從靈感到即時同步：Vibe Coding 遇上 Firebase Realtime Database

Firebase Realtime Database ( RTDB、Firebase 即時資料庫 ) 是 Vibe Coding 最完美的後端夥伴，透過幾乎零配置、即時同步且擴充性強的特色，讓 Vibe Coding 的過程更能專注在開發應用的「靈魂」和「創意」，這篇教學會介紹如何開始使用 Firebase Realtime Database、資料結構和安全性設定。

快速導覽：

• 為什麼需要雲端資料庫？
• 認識 Firebase Realtime Database
• 開始使用 Firebase Realtime Database
• Firebase Realtime Database 儲存的資料結構
• Firebase Realtime Database 安全規則設定
• 建立 Firebase 應用程式
• Vibe Coding 使用 Firebase Realtime Database 儲存資料
• Vibe Coding 使用 Firebase Realtime Database 讀取資料

為什麼需要雲端資料庫？

在進入實作前，新手常會問：「既然已經有 AI，為什麼我還需要一個雲端資料庫？」這個問題關係到應用程式是否具備或需要「長期記憶」與「跨裝置同步」的能力，如果只是一些簡單又不需要儲存的功能 ( 例如計算機、貨幣換算、即時翻譯等 )，在不需要資料庫的狀態下也可以正常運作，但如果是需要儲存資料的功能 ( 例如筆記本、記帳、單字卡等 )，就需要資料庫才能儲存這些資料。

通常在開發過程中會用到不少儲存資料的機制，下方列出常用的儲存資料方式：

• 變數 ( Variable )：屬於「短期記憶」，可能網頁重新整理之後，資料就消失了。

• 本地儲存 ( Cookie、LocalStorage 等 )：屬於「私人筆記本」，資料雖然還在，但換電腦或手機就看不到。

• 雲端資料庫 ( Cloud Database )：真正的「資料庫」，能永久保存資料，在世界上任何地方的使用者都能同時存取、同步資訊。

認識 Firebase Realtime Database

Firebase Realtime Database ( RTDB、Firebase 即時資料庫 ) 是一個託管在雲端的 NoSQL 資料庫。

什麼是 NoSQL？傳統資料庫 ( SQL ) 需要像 Excel 一樣事先定義好嚴謹的表格與欄位，而 NoSQL ( 非關聯式資料庫 ) 像是「自由格式」，不需要預設結構，可以隨時根據需求新增或修改資料欄位，這種「隨寫隨存」的特性，非常符合 Vibe Coding 快速迭代、邊做邊改的節奏。

不同於傳統需要寫 SQL 指令、維護伺服器的資料庫，Firebase Realtime Database 具備以下特點：

• 即時同步 ( Real-time Sync )：這是 Firebase Realtime Database 的最大特色！當資料庫內的數值改變，所有連線的網頁會都會「自動」更新，不需要使用者手動重新整理。

• JSON 結構：資料儲存方式極其直覺，與前端開發完美契合 ( 後面會詳細介紹 )。

• 離線支援：當使用者網路斷線時，會先記錄在本地，等恢復連線後自動同步回雲端。

• 低門檻：透過簡單的 JavaScript 指令就能讀寫，不需要學習複雜的後端語言。

對於開發者而言，Firebase 提供了一個非常大方的「免費」方案，這個超棒的方案稱為「Spark 計畫」，可以在不綁定信用卡的情況下開始使用，不過因為是免費方案，因此還是有下列限制 ( 參考 官方定價頁面、即時資料庫限制 )：

• 連線數：同時 100 個視窗連著資料庫。
• 儲存空間：1 GB。
• 每月下載流量：10 GB。
• 讀取作業限制：每次最多 256MB。

開始使用 Firebase Realtime Database

使用 Google 帳號登入並開啟下方 Firebase 連結，點擊右上方「Go to console」開啟 Firebase 專案控制台。

前往 Firebase：https://firebase.google.com/

進入專案起始畫面後，點擊「請設定 Firebase 專案」的按鈕，開始建立專案。

輸入名稱後就可以繼續。

勾選 Gemini，取消勾選 Google Analytics ( 啟用 Google Analytics 只是方便觀察使用數據，初期不需要勾選 )。

建立專案後，從左側選單選擇「Realtime Database」。

點擊「建立資料庫」，就會開始建立一個即時資料庫。

資料庫位置選擇「新加坡」，速度會比選擇其他地區稍快，完成後點擊下一步。

將資料庫設定為「鎖定模式」，待會介紹安全設定時會進行修改，完成後點擊「啟用」。

啟用後，如果看到下圖的畫面，表示即時資料庫啟用完成，從畫面中可以看見自己的資料庫網址。

Firebase Realtime Database 儲存的資料結構

Firebase Realtime Database 使用 JSON 樹狀結構儲存資料，什麼是 JSON ( JavaScript Object Notation ) 呢？JSON 是大多數即時資料庫儲存資料的方式，也是非常熱門的交換資料格式，JSON 的結構就像是一個具有「明確標籤的置物櫃」，使用下列的符號紀錄資料：

下方是一個簡單的 JSON 範例：

{
  "userName": "小明",       // 字串
  "score": 100,            // 數字
  "isOnline": true         // 布林值
  "next" : {               // 另外一個物件
    "fruit": "apple"
    "num": 200
  }
}

在 Firebase Realtime Database 存檔時，如果沒有指定 Key，預設會生成的隨機 ID 作為 Key，避免資料覆蓋，如果要手動在資料庫添加資料，可以點擊後方「+」號新增。

點擊「+」之後，需要輸入資料的 key 和 value。

如果在網址列點擊「+」，表示在「根目錄」新增資料，如果在每一層的後方點「+」，就會像建立資料夾一般的一層層建立，這類似上方提到的「建立一個新的物件」。

完成後按下「新增」，就可以看到 Firebase Realtime Database 裡面已經出現手動新增的資料。

Firebase Realtime Database 安全規則設定

Firebase Realtime Database 仰賴一套安全規則 ( Security Rules ) 決定讀取或寫入資料的權限，點擊「規則」頁籤，可以看到使用 JSON 格式定義的安全規則。

在 Vibe Coding 時代不需要自己去背這些安全規則，通常只需要問 AI 就可以產生對應的結構，下方提示詞要求 AI 撰寫安全規則 ( 推薦使用 Google Gemini )。

幫我設定 Firebase Realtime Database 安全規則：
- 任何人都可以讀取。
- 除了登入的使用者之外，任何人都不能寫入。
- 如果 key 已經有資料，不能覆蓋這個 key 的資料。

接著將 AI 撰寫的安全規則貼到安全規則區域，按下「發布」就設定完成，發布之前也可以點擊「規則模擬工具」進行簡單測試。

雖然要求 AI 產生規則很簡單，但仍然需要具有一些基本知識，避免完全不清楚規則內容，下方列出規則和新變數：

符號與運算子：

下方列出一些常見的規則 ( Vibe Coding 時代不一定要記，但可以大致看過 )：

• 測試模式 ( 自由讀寫 )

  {
    "rules": {
      ".read": true,
      ".write": true
    }
  }
  

• 限制註冊使用者 ( 搭配 Firebase 自建帳號系統 )

  {
    "rules": {
      ".read": "auth != null",
      ".write": "auth != null"
    }
  }
  

• 資料夾層級設定 ( 限制 user_profiles 層的資料權限 )

  {
    "rules": {
      "user_profiles": {
        "$uid": {
          ".read": "$uid === auth.uid",
          ".write": "$uid === auth.uid"
        }
      }
    }
  }
  

建立 Firebase 應用程式

資料庫設定完成後，接下來要建立「Firebase 應用程式」，目的在於讓網頁可以透過應用程式，串連剛剛建立的資料庫，點擊左上角的「專案總覽」，點擊「新增應用程式」。

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

輸入應用程式的名稱，點擊下一步。

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

從左上角齒輪前往「專案設定」，裡面也可以查看這個應用程式的資訊，點擊應用程式的「設定」也可以看到設定碼。

Vibe Coding 使用 Firebase Realtime Database 儲存資料

應用程式和資料庫都設定完成後，接下來就可以透過 Vibe Coding 嘗試寫入資料，首先把安全性規則設定為測試用，因為權限全開，上方會出現警告的提示。

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

使用下方提示詞產生一個「最基本」的「記事本」網頁，特別注意要提供「自己的 Firebase 網址」以及強調「不要使用 Firebase Firestore」 ( 範例使用 Gemini )：

因為隱私和安全性問題，AI 不會直接填入資料庫網址，需要手動填入。

請按照下列規則，用畫布幫我產生一個網頁：
- 使用基本的 html 和 js，不要套用任何框架和樣式。
- 畫面中有一個多行輸入欄位，以及一個「送出」按鈕和一個「重填」按鈕。
- 如果輸入欄位沒有內容，無法點擊按鈕。
- 如果輸入欄位有內容按下「送出」會把內容儲存到 Firebase realtime 資料庫。
- 如果輸入欄位有內容，按下「重填」會把輸入欄位清空。
- 不需要使用任何登入機制。
- 我會把資料存到我自己的 Firebase realtime database，請先用假的測試網址。
- 不要使用 Firebase Firestore。

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

完成後開啟頁面，在輸入欄位輸入內容，按下送出。

回到資料庫，就可以看到內容已經存入 Firebase 資料庫裡。

因為 AI 產生的寫入資料路徑為 artifacts/${appId}/public/submissions，所以資料會位於多層內。

Vibe Coding 使用 Firebase Realtime Database 讀取資料

如果已經可以儲存資料，接下來就可以請 AI 撰寫「讀取資料」的程式，使用下方提示詞，把剛剛的網頁新增用清單顯示資料的功能。

幫我在下方新增一個清單，會顯示儲存後的資料

完成後複製程式碼，並更新自己的網頁，就可以看到除了可以寫入資料，寫入資料後，還會即時顯示資料。

結語

Vibe Coding 的魅力在於將繁瑣交給 AI，將熱情留給創意。而 Firebase Realtime Database 則是這份熱情的最佳催化劑！掌握了這套「Vibe + Database」的組合拳，開發將不再是一場艱辛的馬拉松，而是一場與 AI 共同起舞的即興表演。現在就讓創意跨越裝置，在雲端即時同步吧！

意見回饋

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