Vibe Coding + Firebase 即时数据库

Firebase Realtime Database ( RTDB、Firebase 即时数据库 ) 是 Vibe Coding 最完美的后端伙伴，透过几乎零配置、即时同步且扩充性强的特色，让 Vibe Coding 的过程更能专注在开发应用的“灵魂”和“创意”，这篇教学会介绍如何开始使用 Firebase Realtime Database、数据结构和安全性设定。

更多参考：Vibe Coding 全方位开发导读

快速导览：

• 为什么需要云端数据库？
• 认识 Firebase Realtime Database
• 开始使用 Firebase Realtime Database
• Firebase Realtime Database 储存的数据结构
• Firebase Realtime Database 安全规则设定
• 建立 Firebase 应用程序
• Vibe Coding 使用 Firebase Realtime Database 储存数据
• Vibe Coding 使用 Firebase Realtime Database 读取数据

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

为什么需要云端数据库？

在进入实作前，新手常会问：“既然已经有 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 共同起舞的即兴表演。现在就让创意跨越装置，在云端即时同步吧！

为了确保数据库安全性，强烈建议继续阅读：拒绝数据裸奔！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 打造顺畅的注册登录体验
• Vibe Coding 将 Google Drive 变身最强文件后端
• 灵感即程序：用 Gemini API 打开你的 Vibe Coding 新时代
• Vibe Coding 极速打造 LINE Bot 智能机器人
• Vibe Coding 实战：免写程序！把 Google 试算表变成超精美点餐系统
• Vibe Coding 实战：用 Google Drive 轻松打造“文件＆作业上传系统”
• Vibe Coding 实战：用 Google 试算表轻松搞定“线上点名系统”
• Vibe Coding 实战：打造自己的英文单字卡！

意见反馈