在前一篇（Day 26）我們已經用 Cursor 建立了 Flutter 手機 App。

今天，我們要更進一步 —— 讓「網站端（Next.js）」與「手機端（Flutter）」都共用同一個後端服務：Firebase。

這天的主題重點是：

透過 Cursor 的 AI 協作能力，快速整合 Firebase，實現跨平台（Web + App）資料同步與身份驗證。

☁️ 為什麼選 Firebase？

Firebase 是 Google 提供的一站式雲端平台，適合中小型專案快速起步。

它支援：

• Authentication（登入系統）
• Firestore（即時資料庫）
• Storage（檔案上傳）
• Hosting（靜態網站）
• Functions（Serverless API）

在 AI 輔助開發中，Firebase 的設定其實是半自動化的理想範例。

透過 Cursor，我們可以讓 AI 幫你生成設定、封裝 API、建立資料結構，甚至同步前後端邏輯。

⚙️ Step 1：建立 Firebase 專案與設定檔

先在 Firebase Console 建立一個新專案：

例如 synvize-app。

然後建立兩個應用：

1. Web 應用（提供給 Next.js 前端）
2. iOS / Android 應用（提供給 Flutter App）

在完成設定後，下載：

• firebaseConfig.js（給網站）
• google-services.json / GoogleService-Info.plist（給手機）

💡 提示給 Cursor：

請幫我建立共用的 Firebase 設定檔，讓 Next.js 和 Flutter 都能用相同的 Firestore 與 Auth。

Cursor 會自動生成平台專用初始化程式碼，並封裝在獨立檔案中。

🧩 Step 2：Next.js 整合 Firebase

在你的網站端新增 /lib/firebase.ts：

import { initializeApp, getApps, getApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();

export const db = getFirestore(app);
export const auth = getAuth(app);

🧠 提示給 Cursor：

幫我新增 Firebase 登入註冊頁面，使用 Google Login，登入成功後將使用者資料儲存到 Firestore。

Cursor 會自動建立 /app/login/page.tsx 與對應的 API 處理程式。

📱 Step 3：Flutter 整合 Firebase

在 Flutter 專案中執行：

flutter pub add firebase_core firebase_auth cloud_firestore

接著在 main.dart 加入：

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

並在登入頁面中整合 Google 登入或 Email 登入。

Cursor 可以幫你生成整合程式碼，只要提示：

幫我建立 Flutter 登入頁面，使用 Firebase Auth，並將使用者資料同步到 Firestore。

它會自動連動 firebase_auth 與 cloud_firestore 模組，甚至根據你的網站端欄位結構自動對應欄位。

🔄 Step 4：讓 Cursor 協助「資料同步邏輯」

網站端與手機端若共用同一個 Firestore 結構，

Cursor 可以讀取兩邊的程式碼自動生成同步層（Sync Layer）。

提示：

幫我建立一個同步服務，用於在 Firestore 資料變更時，同步更新 Next.js 與 Flutter 的 UI。

Cursor 會：

• 在 Next.js 生成 listener hooks：useRealtimeData(collectionName)
• 在 Flutter 生成 StreamBuilder 或 Provider 模組
• 自動建立一份共用結構文件（Schema）以避免不一致

🧠 Step 5：整合 Firebase Functions（可選）

若你的應用需要後端邏輯（例如寄信、推播、資料分析），

Cursor 可以幫你在 functions/ 目錄中自動生成 Firebase Cloud Functions。

例如提示：

幫我新增一個 Firebase Function，當使用者註冊後寄送歡迎信。

Cursor 就會自動建立 functions/sendWelcomeEmail.js，並幫你生成部署命令。

🚀 Step 6：部署與跨平台測試

最後，讓 Cursor 幫你設定部署腳本：

firebase deploy --only hosting,functions

它會同時部署：

• Next.js 網站（Firebase Hosting）
• Flutter Web（若啟用）
• Functions API

Cursor 還能生成測試流程：當 Flutter 或 Next.js 呼叫 Firestore 時，自動驗證資料是否正確寫入。

📈 結語

到這一步，我們的專案已經變成真正的跨平台 AI 開發專案：

• 前端（Next.js）與 App（Flutter）共用同一個 Firebase 資料
• 登入系統統一（Auth）
• 即時資料同步（Firestore）
• 可擴充的 Functions API

而最關鍵的是：

這整套架構，Cursor 幾乎都能幫你自動生成、連結、測試與部署。