Vibe Coding + 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 读取数据

教学影片

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

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

认识 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 打造顺畅的注册登录体验
• Vibe Coding 将 Google Drive 变身最强文件后端
• 灵感即程序：用 Gemini API 打开你的 Vibe Coding 新时代
• Vibe Coding 极速打造 LINE Bot 智能机器人
• Vibe Coding 实战：免写程序！把 Google 试算表变成超精美点餐系统
• Vibe Coding 实战：用 Google Drive 轻松打造“文件＆作业上传系统”
• Vibe Coding 实战：用 Google 试算表轻松搞定“线上点名系统”
• Vibe Coding 实战：打造自己的英文单字卡！

意见反馈