本單元介紹如何使用 Vue 3 和 Firebase 開發一個完整的待辦事項應用，包括基本功能實現和進階優化。

• Firestore
• Composables
• 待辦事項應用開發

本部分將應用前面所學的知識，開發一個完整的待辦事項應用，並介紹一些優化技巧和最佳實踐。

學習目標

• 開發完整的待辦事項應用
• 實現進階功能：分類、搜索、優先級等
• 了解 Firestore 的最佳實踐
• 優化應用性能

1. 應用架構設計

1.1 文件結構

/src
  /assets
  /components
    /todos
      TodoList.vue      # 待辦事項列表
      TodoItem.vue      # 單個待辦事項
      TodoForm.vue      # 新增/編輯表單
      TodoFilter.vue    # 篩選組件
  /composables
    useCollection.js    # 集合操作
    getCollection.js    # 獲取集合
    getDocument.js      # 獲取文檔
  /firebase
    config.js           # Firebase 配置
  /views
    HomeView.vue        # 主頁面
  App.vue
  main.js

本部分將介紹如何使用 Vue 3 的 Composition API 創建可重用的函數來處理待辦事項的 CRUD 操作。

學習目標

• 了解 Vue 3 Composition API 和 Composables
• 創建用於 Firestore CRUD 操作的通用函數
• 實現待辦事項的基本操作功能

1. Composition API 與 Composables 簡介

Vue 3 的 Composition API 是一種基於函數的 API，它提供了組合和重用組件邏輯的新方法。

本部分將快速介紹 Firebase 和 Firestore，並協助你設定專案環境，為待辦事項應用做好準備。

學習目標

• 了解 Firebase 和 Firestore 的基本概念
• 設定 Firebase 專案
• 將 Firebase 整合到 Vue 3 應用中

1. Firebase 與 Firestore 簡介

什麼是 Firebase？

Firebase 是 Google 提供的應用開發平台，提供多種開發工具和基礎設施服務：

• 雲端資料庫 (Firestore、Realtime Database)
• 身份驗證 (Authentication)
• 雲端存儲 (Storage)
• 雲端函數 (Functions)
• 託管服務 (Hosting)

用 n8n 來自動化工作流程，這是一個開源的自動化工具，可以幫助你連接不同的應用程式和服務，並自動執行任務，和 Zapier 或 IFTTT 類似，但 n8n 是開源的，並且可以自託管。

n8n 的安裝

n8n 可以在本地或伺服器上運行，以下是一些安裝的方式：

• 使用 Docker：這是最常見的安裝方式，適合大多數用戶。
• 使用 npm：如果你已經安裝了 Node.js，可以使用 npm 安裝 n8n。
• 使用 n8n Cloud：這是一個託管的解決方案，適合不想自己管理伺服器的用戶。

本單元簡介 VueJS 前端框架。

• 主流前端框架
• Vue.js 簡介
• 快速入門

學習目標

1. 初步認識三大主流前端框架：React, Vue, Angular。
2. 了解各框架的核心思想與主要特點。
3. 比較 React, Vue, Angular 之間的異同之處。
4. 為後續深入學習特定框架打下基礎。

核心概念：三大框架簡介

現代前端開發為了應對日益複雜的應用需求，催生了許多優秀的 JavaScript 框架。其中，React, Vue, 和 Angular 是目前最受歡迎的三個框架。它們都能幫助開發者更有效率地建構互動式、可維護的使用者介面，但各有其設計哲學和特點。

學習目標

1. 了解 Vue.js 的基本概念與核心功能
2. 學會使用 Vue 進行宣告式渲染
3. 理解 Vue 的響應式原理
4. 掌握單文件組件(SFC)的基本使用
5. 比較 Options API 與 Composition API 的差異

教學錄影

核心概念

1. Vue 是什麼？

學習目標

1. 學會創建 Vue 應用程序
2. 了解使用 CDN 引入 Vue 的方法
3. 掌握全局構建和 ES 模塊構建的區別
4. 能夠進行簡單的 Vue 開發

教學錄影-1 教學錄影-2

本單元主要介紹 Figma 的基本操作。

• Figma 簡介
• Wireframe & Prototype 簡介
• Auto Layout
• Prototype