Vibe Coding 实战：线上点名单

不论是老师或活动主办人，时常会遇到手忙脚乱的点名状况，这篇教学会要用最流行的 Vibe Coding，单纯靠 Google 试算表搭配 Google Apps Script，快速又轻松的打造一个多功能的“线上点名系统”，不仅可即时同步 Google 试算表，更能即时查看出缺勤状态喔！

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

快速导览：

• Step 1、使用 Google 试算表建立点名单样板
• Step 2、Vibe Coding 点名单程序码
• Step 3、Apps Script 部署网页应用程序
• Step 4、测试点名单功能，并查看 Google 试算表
• 如何删除部署的专案
• 相关注意事项

教学影片

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

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

Step 1、使用 Google 试算表建立点名单样板

在自己的 Google 云端硬盘，按照下列步骤建立试算表 ( 不一定要完全照教学的方法做，但提供给 AI 提示词必须清楚描述自己的试算表结构 )：

• 建立一个文件夹。
• 在文件夹中建立一份名为“名单”的 Google 试算表。
• 试算表的第一列是标题 ( 只有 A 栏是姓名，B 之后的字段都会自动填上日期 )。
• A 字段从第二列开始就是人名，下方工作表则是科目名称
• 每一个工作表都是同样的格式。

Step 2、Vibe Coding 点名单程序码

打开自己常用的生成式 AI 工具，准备透过 Vibe Coding 产生对应的网页，首先确认点名单要有哪些功能：

• 会自动读取名单，用勾选的方式确认出席状况。
• 可以选择科目和日期，默认是今天的日期。

确认需求之后，就可以使用下面的提示词产生网页，如果是使用 Gemini 进行 Vibe Coding，也可以串联 Google 云端硬盘，将名单的 Google 试算表提供给 AI 参考。。

更多参考：Vibe Coding 实战：利用 Google Apps Script 打造免费网页部署基地、AI 时代的轻量级后端：当 Vibe Coding 遇上 Google Sheets

請幫我產生一個 apps script 點名單網頁
- apps script 為獨立檔案，會串接位於同一個目錄裡的名為「名單」google 試算表。
- google 試算表的第一列是「標題」，第一欄是「姓名」，例如：A1 內容是「姓名」，A2 是「多啦A夢」、A3 是「大雄」，依此類推。
- 除了 A 欄，B 之後的欄位的第一列的標題都是「日期」，第二列之下都用打圈「O」來表現是否出席。
- 試算表中的工作表名稱為「科目」，例如「國語」、「數學」。
- 網頁中請自動串接科目，用點選的方式切換科目。
- 提供日期選單，預設為今日。
- 自動抓取該科目裡的人名，使用 check box 的方式，勾選就表示這個人已經出席，並自動在試算表中更新這個人的出席狀況。
- 試算表範例請參考附件。
- 前後端分離。
- 使用簡潔大方的扁平化設計風格。

完成后应该可以看到“后端程序码”，待会要复制贴上到 Apps Script 的“程式碼.gs”文件中。

还有“前端程序码”，待会要复制贴到到 Apps Script 的“Index.html”文件中。

Step 3、Apps Script 部署网页应用程序

进入刚刚的文件夹，在文件夹里新增并打开一个“Apps Script”( 和刚刚的 Google 试算表位于同一个文件夹里 )。

复制刚刚产生的“后端程序码”，贴到 Apps Script 的“程式碼.gs”文件中。

点击左侧“+”按钮，新增“HTML 文件”，档名设定为“Index”( 不用加上 .html，但需注意大小写，要与刚刚 AI 产生前端程序码的档名相同 )。

复制刚刚产生的“前端程序码”，贴到 Apps Script 的“Index.html”文件中。

储存文件之后，按下右上角的“部署”，选择“新增部署作业”。

点击小齿轮图示，选择部署为“网页应用程序”，并将“谁可以存取”设定为“所有人”。

因为这个网页应用程序会存取 Google 试算表，所以需要进行一些“授权”动作，按照下图不断点击授权按钮即可 ( 最后出现授权同意画面后，按下“Continue”按钮 )。

最后就会看到一串网页应用程序的“网址”，点击或分享这个网址，就可以开始进行点名或查看出缺勤状况！

Step 4、测试功能点名单，并查看 Google 试算表

点击并打开网址，可以看见切换科目、日期和可以勾选出缺席的名单，这时就可以尝试勾选人名，或者切换科目和日期。

当确定点名完成后，打开刚刚的点名单 Google 试算表，就可以看见每个科目中，每个人的出缺席状况。

如何删除部署的专案

因为部署的 Apps Script 并不会因为文件被删除就跟着被删除，如果要永久移除网页应用程序，建议可以透过 Google 个人账号里的“链接的应用程序”进行移除。

进入“链接的应用程序”之后，选择刚刚部署的专案。

当确定点名完成后，打开刚刚的点名单 Google 试算表，就可以看见每个科目中，每个人的出缺席状况。

点击“全部删除”，就可以删除这个专案。

相关注意事项

使用 Google Apps Script 虽然可以快速又方便的产生页面，但需要特别注意“安全性”，因为 Apps Script 产生的网页应用程序无法进行“保护”，所以“任何人”都可以透过这个网址修改点名单内容，所以如果要让 Apps Script 更具有安全性，建议可以额外增加输入“账号密码”的功能，避免有心人士破坏。

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

此外，因为 Google Sheets 并不是标准数据库，透过 Google Apps Script 读写文件的速度比较慢，如果是正式上线产品，建议仍要使用标准数据库的做法。

参考：AI 时代的轻量级后端：当 Vibe Coding 遇上 Google Sheets

小结

随着 Vibe Coding 的出现，彻底打破了程序开发的专业壁垒。在过去，要做出一个串接数据库、拥有后台管理、同时具备美观 RWD ( 响应式 ) 排版的订餐网页，至少需要前端与后端工程师协作数天、甚至数周。而今天只要透过 Google Sheets、Apps Script，不需要任何语法基础，就可以轻松打造轻量级产品。

延伸阅读

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

意见反馈