Vibe Coding + Spreadsheet 数据库

在 AI 辅助开发的“Vibe Coding”时代，对于刚入门的开发者或想快速验证想法的创作者来说，传统数据库的架设往往过于繁琐，这篇教学将分享如何将熟悉的 Google Sheets，转化为强大的云端数据库，用最轻松的“Vibe”完成数据存取。

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

快速导览：

• 为何选择 Google Sheets 作为“第一个”数据表？
• 使用 Google Sheets 作为数据库的优缺点
• 什么时候该用 Google Sheets？
• 使用 Google Sheets 的注意事项
• 准备工作 1：建立账号密码与数据的 Google Sheets
  • 第一份：账号密码 SpreadSheet
  • 第二份：数据 SpreadSheet
• 准备工作 2：建立操作 Google Sheets 的 Apps Script
  • 范例 1、纯 GAS 读取 Google Sheets
  • 范例 2、GAS 加载数据库读取 Google Sheets
• 部署 Google Apps Script
• Vibe Coding 使用 Google Sheets 读写数据

教学影片

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

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

为何选择 Google Sheets 作为“第一个”数据表？

Google Sheets ( Google 试算表、Google Sheets ) 不仅是一个线上表格工具，它的本质是一个基于云端的二维数据表，对开发者而言，具备了即时储存、多人协作以及强大的视觉化界面，只要透过 Google Apps Script ( GAS )，就可以轻松地将它变成一个网页或 App 的后端储存中心。

为什么要透过 Google Apps Script ( GAS )来读取，而不是直接存取？

• 数据格式化：GAS 能将试算表中的数据，转换成前端最容易处理的 JSON 格式。
• 提高安全性：透过 GAS 管理将复杂的权限验证逻辑，避免前端暴露试算表 ID 或敏感金钥。
• 客制化逻辑：在 GAS 进行数据筛选、排序或初步计算，减少前端的负担。
• 极简部署：GAS 部署后会产生一个专属的 Web App URL，使用时就像呼叫 API 一样简单。

使用 Google Sheets 作为数据库的优缺点

如果要把 Google Sheets 作为数据库，需要透过 Google Apps Script ( GAS ) 存取 Google Sheets，所以必须考量平台的“配额与执行限制”，例如：每日 URL Fetch 次数有上限，且单次脚本执行时间通常限制在 6 分钟内 ( Google Workspace 用户为 30 分钟 )，这表示如果数据运算过于繁重或存取过于频繁，可能会触发逾时错误或配额耗尽，下方列出 Google Apps Script 的使用限制：

除了 GAS 的限制，下方列出 Google Sheets 的数据库优缺点：

• 优点

  • 完全免费：对于个人专案或小型工具，不需要负担服务器或数据库授权费用。
  • 视觉化界面：不需要安装数据库管理软件，直接打开浏览器就能查看、编辑与筛选数据。
  • 门槛极低：只要会使用 Excel 或 Google Sheets，就已经理解了数据的基本结构。
  • 内建协作：方便多人同时检视数据，且具备完整的版本修订历史。

• 缺点

  • 效能限制：当数据量太多时 ( 几千笔以上 )，读取与写入的速度会明显下降。
  • 并行处理弱：不适合处理极高频率、同时发生的大量写入请求。
  • 安全性不足：虽然 GAS 能有基本安全性防护，但整体仍缺乏正规数据库的安全性管控，若权限设定不当，数据容易暴露且被修改。
  • 功能限制：不支援复杂的关联查询或进阶的数据库索引功能。

什么时候该用 Google Sheets？

并非所有专案都适合“拿试算表当数据库”，但在特定的开发阶段与应用类型中，它能发挥意想不到的效率。以下是几个最能展现其优势的实践情境：

• 快速原型 ( MVP )：在产品初期快速验证功能，无需花时间架设复杂后端。
• 个人小工具：例如记账软件、个人书单或简单的待办事项。
• 内部管理系统：公司内的小型问卷、报名系统 or 静态信息展示。
• 低流量应用：每天存取次数在几百次内的轻量级服务。

使用 Google Sheets 的注意事项

在开始动手写程序之前，有些关于数据库维护的细节若没处理好，可能会让数据管理变得混乱。以下整理了几个实战中必须留意的注意事项：

• 权限控管：务必确认试算表权限，不要将敏感数据放在公开的表格中。
• 定义字段：通常会把第一列作为字段名称 ( Header )，且避免使用特殊字元。
• 确定字段：因为写入数据时可能会把原始数据覆盖，因此要确认储存的字段位置。
• 备份数据：定期将重要数据导出存档。

准备工作 1：建立账号密码与数据的 Google Sheets

既然要使用 Google Sheets 作为简易数据库，就一定要先建立对应的文件，这个范例会分别建立“账号密码”和“数据”的 SpreadSheet，透过不同权限的管控，让“只有账号密码”的用户才可以操作“数据”，借此提高安全性，参考下方步骤建立这两份试算表：

第一份：账号密码 SpreadSheet

在 Google 云端硬盘中建立一份 SpreadSheet 存放账号密码，第一栏 ( A 栏 ) 是账号，第二栏 ( B 栏 ) 是密码，工作表名称是“sheet1”( 名称可自订，程序里面撰写自订名称即可 )，可预先填入一些账号密码进行测试。

接着点击右上方的“共用按钮”，特别注意“共用权限”，因为是账号密码表，所以权限请保持“只有具备存取权”的用户才可以编辑或操作，完成后可以用笔记本纪录复制的网址。

第二份：数据 SpreadSheet

在 Google 云端硬盘中建立一份 SpreadSheet 存放数据，可以保持单纯空白的内容或自行新增一些内容。

接着点击右上方的“共用按钮”，因为要让网页的应用程序可以读写数据，权限也保持“只有具备存取权”的用户 ( 自己 ) 才可以编辑或操作，完成后可以用笔记本纪录复制的网址。

准备工作 2：建立操作 Google Sheets 的 Apps Script

建立了账号和数据的 Google Sheets 之后，就要开始透过 Google Apps Script 产生网页应用程序，让网页可以操控数据，如果对于 Google Apps Script 不了解，可以先参考下方教学 ( 从头阅读到“Google Apps Script 的部署方式”即可 )：

参考：利用 Google Apps Script 打造免费网页部署基地

虽然可以透过 AI 从无到有撰写 Apps Script 的程序，但对于刚入门数据库的用户而言也很辛苦，建议直接使用 STEAM 教育学习网的“范例程序”，搭配 AI 一起操作速度会更快，这个范例程序的功能说明如下：

• 安全机制：透过“不公开”的“账号密码”试算表验证身份，确认账号密码后才可以操作“数据”试算表。
• 读写范围：运用“字母、数字、字母数字组合”来表示储存格范围，例如：“A”表示 A 列、“A1”表示单一格或“A1:C3”表示九宫格。
• 数据格式：使用数组方式写素数据，例如：“"a"”储存单一格文字 a、“[["a1"],["b1"],["a2"],["b2"]]”把数据储存到四宫格内。
• 进阶功能：切换工作表、删除特定范围、删除指定行列、新增行列、把数据摆放在前段或末端等。

使用范例程序的方法分成两种，分别是“纯 GAS ”以及“套用 STEAM 教育学习网程序库的 GAS”，两个的内容方法完全相同。

范例 1、纯 GAS 读取 Google Sheets

打开范例 GAS 链接，档名是“GAS SpreadSheet by OXXO.STUDIO”，打开链接之后，从左边选择“总览”，接着点击右上方“建立副本”，将文件复制到自己的 google 云端硬盘中 ( 自行选择文件夹放置 )。

打开链接：https://script.google.com/d/1SIeOw9QHgazxQSCVaxf6yqmBaAKEhLCY7k2bCh4NTbSD4WMH7xR-IO4T/edit?usp=sharing

建立副本之后，基本上完全不需要更动内容程序，只需要把“刚刚的试算表网址”贴上，并填上指定的工作表名称即可，储存完成后，前往下方步骤“部署 Google Apps Script”。

范例 2、GAS 加载数据库读取 Google Sheets

如果觉得第一种的范例程序“太多”，也可以使用“加载数据库”的方式，加载 STEAM 教育学习网的范例数据库，首先在云端硬盘的自订文件夹中，从左上方选单里建立“Google Apps Script”。

点击“建立指令码”继续建立。

在程序码区域，填入下方的程序码，并把“刚刚的试算表网址”贴上，并填上指定的工作表名称。

function doPost(e) {
  const config = {
    dataSsUrl: "你的資料 SpreadSheet 網址", // 權限限制只有自己讀取
    userSsUrl: "你的使用者帳密網址", // 權限限制只有自己讀取
    defaultSheet: "sheet1",   // 資料表的預設工作表
    userSheetName: "sheet1"   // 使用者權限表的預設工作表
  };
  try {
    // 確保有資料傳入
    if (!e.postData.contents) throw "No data received";
    // 直接呼叫 Library 並回傳結果
    return GASDatabaseforSpreadSheetbyOXXOSTUDIO.runHandler(e, config);
  } catch (err) {
    // 發生錯誤時回傳簡單的 JSON
    return ContentService.createTextOutput(JSON.stringify({
      success: false,
      message: err.toString()
    })).setMimeType(ContentService.MimeType.JSON);
  }
}

点击左侧“数据库”后方的“+”新增数据库。

输入下方指令码 ID，点击“查询”后选择最新版本 ( 最大的数字 )，点击“新增”完成加入数据库的动作，完成后储存，接着前往下方步骤“部署 Google Apps Script”。

指令码 ID：17o1UvArffJ7XKPVm_fg7Vs0E6KW7VfQkXsZJSGTFVjmGF3h4tDyOWokA

部署 Google Apps Script

范例的 Apps Script 完成之后，下一个动作就是要将这个程序部署为网页可以使用的程序，点击右上角“部署”，选择“新增部署作业”。

在弹出视窗中点击左上方“齿轮”图示，选择“网页应用程序”。

将“谁可以存取”的权限设定为“所有人”( “我的身份”就是你自己的账号 )，说明文字可自由填写。

接着点击“部署”，第一次部署会出现“要求存取权”的提示，点击“授予存取权”。

点击“Advanced”展开继续的选项，点击“Go to....”进行下一步。

点击“Continue”按钮继续部署。

部署完成后，就会产生一串网址，届时就可以在网页里面使用这串网址操控 Google Sheets 数据。

Vibe Coding 使用 Google Sheets 读写数据

有别于正规的数据库，因为 Google Sheets 是透过自己的 Apps Script 进行操控，所以在读写文件的 API 方法也必须自己撰写，不过幸好目前是 AI 发达的时代，透过 Vibe Coding 的方式，只要提供 AI 对应的 API 文件或是程序码，AI 就可以从中抓取对应的方法使用，下方是 STEAM 教育学习网读取 Google Sheets 的 API 说明文件，可以先下载到自己的电脑中 ( 可以存档为 .txt 或 .md )。

打开：读取 Google Sheets API 说明文件

有了说明文件后，接着就上传这个说明文件，并透过下方提示词，请 AI 产生将 Google Sheets 作为数据库的简单网页。

請幫我產生一個簡單的網頁，具有下列功能：
- 我的網頁會透過 GAS 讀取指定的 Google Sheets，GAS API 用法請參考附件的說明文件。
- 只使用基本的 HTML 和 JS，不要有其他的框架或套件。
- 套用的 GAS 網址會寫在原始碼中。
- 網頁流程：
> a. 使用帳號密碼登入。
> b. 登入後的畫面分成上下兩部分，上半部是讀取，下半部是寫入。
> c. 上方讀取部分有「試算表名稱」和「儲存格範圍」欄位和「讀取」按鈕，點擊按鈕後會讀取範圍資料並顯示。
> d. 下方寫入部分有「試算表名稱」和「儲存格範圍」和「資料」欄位，以及「寫入」「寫在最下方」「從頭插入」「清除範圍內容」按鈕。
> 最下方有狀態提示資訊。

完成后下载 HTML，用程序码编辑器或文字编辑器打开 HTML 源代码，把假数据的位置替换成刚刚 GAS 部署的网址。

接下来只要参考“使用 GitHub 部署你的网页作品”的教学步骤，把网页上传到 Github，打开网页，登录刚刚设定的账号密码，就可以透过 Google Sheets 读写数据啰！

小结

利用 Google Sheets 作为数据库，是进入 Web 开发世界的绝佳敲门砖，当 Vibe Coding 就可以真正让“写程序”这件事回归到“解决问题”的本质，不需要被复杂的基础架构所绑架，可以轻松开发出许多属于自己的小型应用，不过如果开始进行比较复杂的开发，仍然得迁移到更专业的数据库喔！

延伸阅读

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 实战：打造自己的英文单字卡！

意见反馈