數位靈魂的存放處：Vibe Coding 串接 Firebase Firestore

在 Vibe Coding 的過程中，雖然可以透過對話快速產出功能，但如果要讓作品具備「靈魂」與「記憶」，就必須得使用雲端資料庫，Firebase Firestore 作為 Google 提供的強大 NoSQL 資料庫，可以讓 AI 輕鬆串接並實現即時資料同步，這篇教學會從零開始介紹 Firestore，並逐步導入 Vibe Coding 的開發流程。

更多參考：Vibe Coding 全方位開發導讀

快速導覽：

• 認識 Firebase Firestore
• 終極對決：Firestore 與 Realtime Database 的權衡之道
• 開始使用 Firebase Firestore
• Firestore 儲存的資料結構
• Firebase Firestore 安全規則設定
• 建立 Firebase 應用程式
• Vibe Coding 使用 Firebase Firestore 儲存資料
• Vibe Coding 使用 Firebase Firestore 讀取資料

認識 Firebase Firestore

Firebase Firestore ( Cloud Firestore ) 是 Google 推出的彈性 NoSQL 雲端資料庫，專門針對行動裝置與網頁開發而設計，對於 Vibe Coding 開發者而言，Firestore 具備以下優點：

• 即時同步：資料一旦更新，所有連線的裝置會立刻收到通知，不需要重新整理網頁。
• 彈性架構：不需要像傳統資料庫一樣先定義複雜的資料表，隨時可以新增或修改資料欄位。
• 離線支援：內建離線快取功能，即便在網路不穩的情況下，應用程式依然能正常運作。

Firebase 提供相當實惠的免費額度 ( Spark 計畫 )，如果超過免費額度，Firebase 將暫停服務直到隔日重新計算，或切換至「付費（Blaze）」計畫。對於初學者而言，免費額度通常非常充足，非常適合個人專案或原型開發，下方列出免費方案和付費方案的差異：

注意，如果專案需要使用 Cloud Functions 連接到外部 API ( 例如 OpenAI API )，則必須將專案升級為 Blaze 計畫，參考「Firebase Pricing plans。

終極對決：Firestore 與 Realtime Database 的權衡之道

在先前的教學「Vibe Coding 遇上 Firebase Realtime Database」 中，深入探討和實作 Firebase Realtime Database 的應用，但隨著專案複雜度提升，可能就得逐步導入 Firebase Firestore。以下列出這兩款 Firebase 核心資料庫的差異，幫助開發者在不同的開發情境中做出最適當的判斷。

參考：Vibe Coding 遇上 Firebase Realtime Database

開始使用 Firebase Firestore

使用自己的 Google 帳號登入 Firebase Console ( Firebase 專案控制台 )，點擊「請設定 Firebase 專案」的按鈕，開始建立專案。

前往：Firebase Console

如果已經有專案，也可以點擊「建立新的 Firebase 專案」開始建立專案。

輸入專案名稱，按下「繼續」。

根據個人需求決定是否啟用 Gemini 輔助功能以及串連 Google Analytics 分析功能 ( 可以都不用勾選 )，完成後點擊「建立專案」。

專案建立後，就可以看到類似下圖的專案畫面。

專案建立後，從左側選單選擇「建構 > Firestore database」。

點擊「建立資料庫」。

如果是個人帳號就選擇「standard 版本」，並將位置設定在「Taiwan」( 速度可能比較快 )。

接著不需要選擇模式 ( 因為待會在安全性就會覆寫這些預設規則 )，直接點擊「建立」就會建立資料庫。

資料庫建立完成後，就會看到下方的資料庫畫面。

Firestore 儲存的資料結構

建立資料庫之後就要來認識 Firestore 是怎麼儲存資料，有別於 Realtime Database 是使用 json 節點的形式，Firestore 採用「集合與文件」的方式儲存資料，下方是 Firebase Firestore 儲存的資料結構。

• 集合 ( Collection )：類似「資料夾」，存放相同類型的內容。
• 文件 ( Document )：存放於集合中，是資料的最小單位 ( JSON 格式 )。
• 欄位 ( Field )：文件內的具體內容，例如：name: "Oxxo", age: 18，裡面還可以額外添加不同集合和文件。

根據結構，Firestore 畫面中會把這些結構水平展開區分，以下方的圖片為例，集合是「Fruits」，Fruits 集合裡面有「Apple」的文件，Apple 裡面有「價格 Price」和「數量 number」。

透過這種結構方式，可以很輕鬆地將資料分門別類，例如下圖建立了四個集合，每個集合裡面又有自己的文件和欄位。

Firebase Firestore 安全規則設定

在操作 Firestore 的過程中，安全性規則 ( Security Rules ) 是保護資料不被非法竄改的重要防線。這套規則允許開發者以精確的邏輯定義誰在什麼情況下可以「讀取」或「寫入」資料，進入 Firestore 之後，點擊「規則」頁籤，在下方區域就可以撰寫安全性規則。

詳細安全性規則參考：Firebase Security Rules

雖然在 Vibe Coding 時代，不太需要去記憶安全性規則的寫法，但如果能在 Vibe Coding 的過程中，稍微強調資料或文件的名稱或一些專有名詞，就能讓 AI 更準確的寫出更好的安全性規則，也更能理解 AI 到底寫了些什麼規則，下方簡單列出這些寫法：

• 萬用字元：大括號 { } 包裹的名稱稱為「萬用字元」，作用是擷取該路徑片段的值，並將其存入一個變數中，以便在後方的條件式中使用。
• 變數名稱：名稱並非固定關鍵字，可根據語意自由定義 ( 例如 {userId}、{docId}、{category})。只要在 if 條件中引用的變數名稱與大括號內一致即可。
• 慣用命名方式：
  • {database}：通常用於最外層，代表當前資料庫。
  • {userId} 或 {uid}：識別使用者。
  • {document} 或 {doc}：代表集合中的具體文件。

舉例來說，下方的提示詞可以限制使用者的權限，完成後 AI 就會提供如何建立集合的結構，以及對應的安全性規則：

請幫我撰寫 Firestore 的安全性規則，需求如下：
- 查看集合需要登入。
- 具有 admin 權限的使用者，才可以查看「name」集合的內容。
- 其他集合內容只要登入就可以查看。

除了直接請 AI 撰寫安全性規則，下方也列出幾種常見的安全性規則模式：

• 完全公開 ( 測試環境 )：任何人都可以讀寫，正式上線前務必修改。

  allow read, write: if true;
  

• 私有資料模式 ( 僅限本人讀寫 )：常用模式，限制使用者只能存取屬於自己的文件 ( 文件的 ID 必須等於用戶的 UID )。

  allow read, write: if true;
  

• 進階分層模式 ( 父文件本人讀寫，子集合僅限讀取 )：若資料庫有嵌套結構，可對不同層級設定不同權限。

  service cloud.firestore {
    match /databases/{database}/documents {
      // 匹配 fruit 集合，且僅限本人 (userId) 讀寫
      match /fruit/{userId} {
        allow read, write: if request.auth != null && request.auth.uid == userId; 
      }
      // 匹配 fruit 下屬子集合中的文件，設定為本人可讀、嚴禁寫入
      match /fruit/{userId}/{col}/{doc} {
        allow read: if request.auth != null && request.auth.uid == userId; // 本人可讀取子集合
        allow write: if false; // 任何人都禁止寫入子集合
      }
    }
  }
  

• 唯讀模式 ( 適合公告或展示 )：所有人都能看，但只有管理員能修改。

  allow read: if true;
  allow write: if false;
  

建立 Firebase 應用程式

如果要串接 Firestore 資料庫，還需要再 Firebase 的專案裡建立「應用程式」，目的在於讓網頁可以透過應用程式，串連剛剛建立的資料庫*，點擊左上角的「專案總覽」，點擊「新增應用程式」。

因為要串聯網頁，所以選擇「網頁」應用程式。

輸入應用程式的名稱，點擊「註冊應用程式」。

接著就可以看到一些相關的設定，這是待會串聯資料庫要填入的資訊。

應用程式建立後，回到控制台裡，點擊左上角「齒輪」按鈕，點擊「一般」。

進入專案的「一般」頁籤後，往下拉，也可以看見應用程式的資訊，從中也可以看見所需要的設定資訊。

Vibe Coding 使用 Firebase Firestore 儲存資料

當 Firebase 應用程式和 Firestore 資料庫都建立完成後，接下來就可以透過 Vibe Coding 產生網頁，透過網頁儲存資料，開始之前，先由 AI 協助撰寫安全性規則，讓測試階段可以寫入資料。

請幫我撰寫 firestore 安全規則，讓我在測試的時候可以自由寫入資料。

完成後把 AI 撰寫的安全性規則貼到安全性規則區域，任何人都可以寫入和讀取。

接著使用下方提示詞產生網頁：

我已經有一個免費版的 Firebase 應用程式和 Firestore 資料庫，測時期的安全性是所有人都可以寫入和讀取資料，請幫我產生一個測試網頁。
- 只使用 HTML 和 JS，不要套用任何框架。
- 畫面上有一個輸入文字欄位，一個送出按鈕和一個清除重填按鈕。
- 按下送出之後，會把文字欄位的內容儲存到 Firestore 裡。

完成後，參考「好用的編輯 Vibe Coding 程式碼工具」教學，把程式碼下載到自己的電腦中 ( 建議使用「JSBin」)貼上 HTML 程式碼，並把假資料的區域換成剛剛應用程式設定的設定碼。

完成後開啟頁面 ( 本機環境需要啟用伺服器 )，在輸入欄位輸入內容，按下送出，如果沒有錯誤訊息就表示儲存成功。

回到 Firestore 資料庫，就可以看見剛剛儲存的資料，如果有興趣可以觀察一下程式碼，看看設定的「集合」名稱是否與存入的集合相同 ( 如果沒有設定文件名稱，就會自動使用亂數編碼 )。

Vibe Coding 使用 Firebase Firestore 讀取資料

可以存入資料之後，下一步就可以「讀取」資料，沿用剛剛的網頁，額外提供 AI 下方的提示詞，請 AI 產生網頁。

幫在頁面的下方新增清單欄位，讓我存入資料資料之後，可以即時顯示這些資料

AI 產生網頁後，重複「下載 > 替換應用程式代碼 > 部署」的動作，再次打開網頁，輸入資料後，就會即時在網頁裡看見剛剛儲存的內容。

小結

掌握 Firebase Firestore 後，Vibe Coding 作品即從單機版進化至雲端化。透過 AI 的輔助，以往複雜的 CRUD 操作（增刪查改）現在只需簡單的對話即可完成。建議多嘗試不同的資料結構設計，並持續關注安全規則的設定，為下一個大型雲端應用程式打下堅實的基礎。

為了確保資料庫安全性，強烈建議繼續閱讀：拒絕資料裸奔！Vibe Coding 必備 Firebase App Check 安全防護指南

延伸閱讀

Vibe Coding 的重點都不在於「寫程式」，而是為了配合程式的各種「準備工作」，下方列出 Vibe Coding 相關的教學，透過一系列的教學，就更能掌握正確且順暢的開發流程:

• 認識 Vibe Coding：程式不再是拼邏輯，而是拼「感覺」
• Vibe Coding 新手入門：從藍圖規劃到 AI 開發的思維轉型
• Vibe Coding 重要的準備工作：架構流程圖
• Vibe Coding 網頁必備知識：開發者的「溝通工具箱」
• Vibe Coding Python 必備知識：AI 與 Colab 開啟程式直覺
• Vibe Coding 固定網頁樣式：解決樣式不一致的惱人問題
• Vibe Coding 圖片處理心法：從雲端空間到 Base64 的完美配置
• Vibe Coding 玩家必備的 SVG 進階操作指南
• Vibe Coding 字體指南：用文字風格定義網頁靈魂
• 下載 Vibe Coding 網頁程式碼，掌握程式碼的主導權
• Vibe Coding 實戰：利用 Google Apps Script 打造免費網頁部署基地
• Vibe Coding 實戰：使用 GitHub 部署你的網頁作品
• AI 時代的輕量級後端：當 Vibe Coding 遇上 Google Sheets
• 從靈感到即時同步：Vibe Coding 遇上 Firebase Realtime Database
• 數位靈魂的存放處：Vibe Coding 串接 Firebase Firestore
• 拒絕資料裸奔！Vibe Coding 必備 Firebase App Check 安全防護指南
• Vibe Coding + Firebase Authentication 打造順暢的註冊登入體驗
• 靈感即程式：用 Gemini API 開啟你的 Vibe Coding 新時代

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～