Firebase功能：Realtime Database

步驟一：在 Firebase 控制台設定專案

前往 Firebase 控制台：
- 開啟瀏覽器，前往 Firebase 控制台。
- 點擊「新增專案」，輸入專案名稱（例如 todo-list-app），然後點擊「繼續」。
- 關閉 Google Analytics（這是可選的，為了簡化教學我們先關閉），然後點擊「建立專案」。
新增 Web 應用程式：
- 在 Firebase 控制台的專案概覽頁面，點擊「新增應用程式」並選擇「Web（</>）」。
- 輸入應用程式名稱（例如 Todo List），不需要勾選「設定 Firebase Hosting」。
- 點擊「註冊應用程式」，Firebase 會提供一組設定物件（firebaseConfig），看起來像這樣：
```
const firebaseConfig = {
  apiKey: "你的-api-key",
  authDomain: "你的專案-id.firebaseapp.com",
  databaseURL: "https://你的專案-id.firebaseio.com",
  projectId: "你的專案-id",
  storageBucket: "你的專案-id.appspot.com",
  messagingSenderId: "你的-messaging-sender-id",
  appId: "你的-app-id"
};
```
- 複製這段程式碼，稍後會用到。
啟用 Realtime Database：
- 在 Firebase 控制台左側選單，點擊「建置」 > 「Realtime Database」。
- 點擊「建立資料庫」，選擇你所在的區域（例如 us-central1）。
- 選擇「開始模式：測試模式」（允許讀寫，適合開發階段）。注意：測試模式會允許任何人讀寫資料，正式上線前需設定安全規則。

步驟二：安裝並初始化 Firebase

安裝 Firebase：
- 在專案目錄的終端機中，執行以下指令安裝 Firebase：
```
npm install firebase
```

建立 Firebase 設定檔案：

在 src 資料夾中建立一個新檔案，命名為 firebase.js。

將 Firebase 控制台提供的 firebaseConfig 貼到檔案中，並加入初始化程式碼。完整程式碼如下：

// src/firebase.js
import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

// 你的 Firebase 設定物件
const firebaseConfig = {
  apiKey: "你的-api-key",
  authDomain: "你的專案-id.firebaseapp.com",
  databaseURL: "https://你的專案-id.firebaseio.com",
  projectId: "你的專案-id",
  storageBucket: "你的專案-id.appspot.com",
  messagingSenderId: "你的-messaging-sender-id",
  appId: "你的-app-id"
};

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

// 初始化 Realtime Database
const database = getDatabase(app);

// 匯出 database 供其他元件使用
export { database };

注意：請將 firebaseConfig 中的值替換成你在 Firebase 控制台取得的實際值。

設定環境變數（可選，但建議）：

為了安全起見，建議將 Firebase 設定儲存在環境變數中，而不是直接寫在程式碼中。

在專案根目錄建立一個 .env 檔案，加入以下內容：

VITE_FIREBASE_API_KEY=你的-api-key
VITE_FIREBASE_AUTH_DOMAIN=你的專案-id.firebaseapp.com
VITE_FIREBASE_DATABASE_URL=https://你的專案-id.firebaseio.com
VITE_FIREBASE_PROJECT_ID=你的專案-id
VITE_FIREBASE_STORAGE_BUCKET=你的專案-id.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=你的-messaging-sender-id
VITE_FIREBASE_APP_ID=你的-app-id

修改 src/firebase.js，使用環境變數：

// src/firebase.js
import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  databaseURL: import.meta.env.VITE_FIREBASE_DATABASE_URL,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID
};

const app = initializeApp(firebaseConfig);
const database = getDatabase(app);

export { database };

將 .env 加入 .gitignore，避免將敏感資訊上傳到公開的 Git 儲存庫。

步驟三：實現簡單的 Todo List 元件

我們將建立一個簡單的待辦事項清單，實現新增、讀取和刪除功能。

修改 App 元件：

打開 src/App.jsx，替換為以下程式碼：

// src/App.jsx
import { useState, useEffect } from "react";
import { database } from "./firebase";
import { ref, push, onValue, remove } from "firebase/database";
import "./App.css";

function App() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState("");

  // 讀取資料
  useEffect(() => {
    const todosRef = ref(database, "todos");
    onValue(todosRef, (snapshot) => {
      const data = snapshot.val();
      const todosArray = data
        ? Object.keys(data).map((key) => ({
            id: key,
            text: data[key].text
          }))
        : [];
      setTodos(todosArray);
    });
  }, []);

  // 新增待辦事項
  const handleAddTodo = () => {
    if (newTodo.trim() === "") return;
    const todosRef = ref(database, "todos");
    push(todosRef, { text: newTodo });
    setNewTodo("");
  };

  // 刪除待辦事項
  const handleDeleteTodo = (id) => {
    const todoRef = ref(database, `todos/${id}`);
    remove(todoRef);
  };

  return (
    <div className="App">
      <h1>待辦事項清單</h1>
      <div>
        <input
          type="text"
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
          placeholder="輸入新的待辦事項"
        />
        <button onClick={handleAddTodo}>新增</button>
      </div>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => handleDeleteTodo(todo.id)}>刪除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

說明程式碼：
- useState：管理輸入框的文字（newTodo）和待辦事項清單（todos）。
- useEffect：使用 onValue 監聽 Firebase Realtime Database 的 todos 節點，當資料改變時更新狀態。
- handleAddTodo：使用 push 將新待辦事項寫入資料庫。
- handleDeleteTodo：使用 remove 刪除指定的待辦事項。
- 資料結構在 Firebase 中會儲存為：
```
{
  "todos": {
    "隨機ID1": { "text": "買牛奶" },
    "隨機ID2": { "text": "寫程式" }
  }
}
```

步驟四：測試應用程式

啟動專案：
```
npm run dev
```
開啟瀏覽器，前往 http://localhost:5173 ，你應該能看到：
- 一個輸入框和「新增」按鈕。
- 輸入文字後點擊「新增」，待辦事項會出現在清單中。
- 點擊「刪除」按鈕可以移除對應的待辦事項。
檢查 Firebase 控制台：
- 回到 Firebase 控制台的「Realtime Database」頁面，點擊「資料」標籤。
- 你應該能看到 todos 節點下儲存了你新增的待辦事項。

重要提醒

安全性規則：目前 Realtime Database 處於測試模式，允許任何人讀寫資料。正式上線前，務必在 Firebase 控制台的「Realtime Database」 > 「規則」設定適當的安全規則，例如：
```
{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}
```
這表示只有經過身份驗證的使用者才能讀寫資料。
環境變數：如前所述，使用 .env 檔案儲存 Firebase 設定，避免將敏感資訊直接寫在程式碼中。

常見問題與除錯

錯誤：Firebase: No Firebase App '[DEFAULT]' has been created：
- 檢查 firebase.js 是否正確初始化 Firebase。
- 確保 firebaseConfig 中的值正確。
資料沒有即時更新：
- 確認 onValue 監聽器是否正確設定，且指向正確的資料庫路徑。
- 檢查網路連線是否正常。
部署後頁面空白：
- 確認 firebase.json 中的 public 設為 dist。
- 確認已執行 npm run build。

步驟一：在 Firebase 控制台設定專案​

步驟二：安裝並初始化 Firebase​

步驟三：實現簡單的 Todo List 元件​

步驟四：測試應用程式​

重要提醒​

常見問題與除錯​