第一部分：Firebase 與 Firestore 簡介及設定

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

學習目標

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

1. Firebase 與 Firestore 簡介

什麼是 Firebase？

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

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

什麼是 Firestore？

Firestore 是 Firebase 的 NoSQL 文件導向資料庫：

• 資料以文件(documents)和集合(collections)形式儲存
• 支援即時數據同步
• 支援離線模式
• 提供豐富的查詢功能

2. 設定 Firebase 專案

步驟 1：創建 Firebase 專案

1. 前往 Firebase 控制台
2. 點擊「建立專案」
3. 輸入專案名稱（例如：vue-todo-app）
4. 按照提示完成專案設置

步驟 2：將 Web 應用添加到 Firebase 專案

1. 在專案首頁，點擊「Web」圖標 (</>)
2. 輸入應用名稱（例如：vue-todo-app）
3. 點擊「註冊應用程式」
4. 複製提供的 Firebase 配置資訊

步驟 3：創建 Firestore 資料庫

1. 在左側選單中選擇「Firestore Database」
2. 點擊「建立資料庫」
3. 選擇「測試模式」（開發階段使用）
4. 選擇資料庫位置（建議選擇離用戶最近的區域）
5. 點擊「啟用」

3. 設定 Vue 3 專案與 Firebase

步驟 1：創建 Vue 3 專案

# 使用 Vue CLI
npm create vue@latest my-todo-app
cd my-todo-app
npm install

步驟 2：安裝 Firebase 套件

npm install firebase

步驟 3：創建 Firebase 配置檔案

在 src 目錄下創建 firebase 資料夾，並在其中創建 config.js 檔案：

// src/firebase/config.js
import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'

// Firebase 配置資訊（從 Firebase 控制台複製）
const firebaseConfig = {
  apiKey: "你的_API_KEY",
  authDomain: "你的專案ID.firebaseapp.com",
  projectId: "你的專案ID",
  storageBucket: "你的專案ID.appspot.com",
  messagingSenderId: "你的訊息發送ID",
  appId: "你的應用ID"
}

// 初始化 Firebase
const app = initializeApp(firebaseConfig)

// 初始化 Firestore
const db = getFirestore(app)

export { db }

步驟 4：在 main.js 中引入 Firebase 配置

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './firebase/config' // 引入 Firebase 配置

createApp(App).mount('#app')

步驟 5：建立待辦事項集合

在 Firestore 中，我們需要建立一個名為 todos 的集合，用來存儲待辦事項資料。

每個待辦事項會包含這些欄位：

• title: 待辦事項標題
• details: 待辦事項詳細描述（選填）
• completed: 是否已完成 (布林值)
• createdAt: 創建時間
• category: 分類（選填）

4. 測試 Firebase 連接

創建一個簡單的組件來測試 Firestore 連接：

<!-- src/components/FirebaseTest.vue -->
<script setup>
import { ref } from 'vue'
import { collection, addDoc, serverTimestamp } from 'firebase/firestore'
import { db } from '@/firebase/config'

const message = ref('')

const testConnection = async () => {
  try {
    message.value = '測試中...'

    // 嘗試添加一個測試文檔
    const testData = {
      title: '測試待辦事項',
      completed: false,
      createdAt: serverTimestamp()
    }

    const docRef = await addDoc(collection(db, 'todos'), testData)
    message.value = `連接成功！已添加測試文檔，ID: ${docRef.id}`
  } catch (error) {
    message.value = `連接失敗: ${error.message}`
  }
}
</script>

<template>
  <div>
    <h2>Firebase 連接測試</h2>
    <p v-if="message">{{ message }}</p>
    <button @click="testConnection">測試連接</button>
  </div>
</template>

練習

1. 設定一個 Firebase 專案並創建 Firestore 資料庫
2. 將 Firebase 配置整合到 Vue 3 專案中
3. 使用測試組件確認 Firestore 連接正常
4. 在 Firebase 控制台中查看測試創建的文檔

總結

在這一部分，我們:

• 了解了 Firebase 和 Firestore 的基本概念
• 設定了 Firebase 專案和 Firestore 資料庫
• 將 Firebase 整合到 Vue 3 應用中
• 測試了 Firebase 連接

下一部分我們將學習如何使用 Vue 3 的 Composition API 創建可重用的 Firestore 操作函數，實現基本的 CRUD 功能。