Vibe Coding 实战：线上订餐系统

这个 Vibe Coding 范例会使用 Google 试算表 ( Google Sheets )，搭配试算表内建的 Apps Script，在完全不手写任何程序码的情况下，把各种点餐菜单提供给生成式 AI，轻松又无脑”的“聊”出一个精美的线上点餐网页，体验不用写 Code 就能当工程师的快乐了！

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

快速导览：

• Step 1、上传菜单图片，产生结构化的 JSON 文件
• Step 2、Vibe Coding 让 JSON 档产生程序码和页面
• Step 3、设定试算表和 Apps Script 部署应用程序
• Step 4、测试功能，并在 Google Sheets 查看订单
• 如何删除部署的专案
• 相关注意事项

教学影片

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

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

Step 1、上传菜单图片，产生结构化的 JSON 文件

要制作线上点餐系统，一定要先有“菜单”，从网络上下载菜单的图片，或者拍照扫描手边的菜单图片，将菜单传送给 AI，并输入下列提示词，让 AI 产生 JSON 格式的菜单。

請幫我把這張飲料菜單，整理成 json 資料表格式。

送出之后，AI 就会分析菜单内容，产生对应的 JSON 文件，将这个文件下载到电脑中。如果想确认或修改 AI 产生的内容，也可用文字编辑器或程序码编辑器打开 JSON 文件查看并修改内容，以范例中的饮料菜单为例，打开后可以看到各种饮料的名称、价钱等信息，如果有错误就可以直接修改。

Step 2、Vibe Coding 让 JSON 档产生程序码和页面

有了结构化的菜单数据之后，提供 AI 这份菜单 JSON 档并搭配下方提示词，产生后端网页程序与前端页面，也可根据个人需求，指定页面的风格和配色，但过程中需要注意，要强调“google sheets 内建的 Apps Script”，这样才会套用对应的储存数据方式。

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

請幫我根據這個飲料 json 資料，
產生一個透過 google 試算表內建 apps script 部署的訂餐網頁，
並且在使用者點餐之後，會把資料儲存到試算表中。

網頁前後端分開，網頁使用「扁平化設計風格」與「紅白黑」色系。

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

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

Step 3、设定试算表和 Apps Script 部署应用程序

使用 Google 账号登录 Google 云端硬盘，建立一个专属的文件夹，在文件夹里新增并打开一个“空白试算表”，点击上方选单“扩充功能 > Apps Script”。

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

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

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

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

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

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

最后就会看到一串网页应用程序的“网址”，点击或分享这个网址，就可以开始点餐或订饮料啰！

Step 4、测试功能，并在 Google Sheets 查看订单

点击并打开网址，检查看看网页是否和刚刚的菜单相同，或者有没有缺漏什么功能。

如果界面都正常，就可以尝试进行点餐，如果点餐成功之后，数据有正确存入 Google 试算表，就表示这个订餐网页已经可以正常运作啰！

如何删除部署的专案

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

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

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

相关注意事项

使用 Google Apps Script 虽然可以快速又方便的产生页面，但需要特别注意“安全性”，因为 Apps Script 产生的网页应用程序无法进行“保护”，所以“任何人”都可以透过这个网址点餐，甚至如果了解读写文件规则，还可以任意复写数据。因此如果要让 Apps Script 更具有安全性，建议可以额外增加输入“账号密码”的功能，避免有心人士破坏。

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

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

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

小结

以前如果要架设一个含有前后端、能跟云端硬盘串接的文件上传系统，至少需要一个工程师花上好几天的时间开发与测试。但在 AI 时代，透过 Vibe Coding，只需要明确表达需求，AI 就能在几秒钟内写好所有程序码。现在就动手试试看，为下一次的作业收集或活动收件，打造一个精美又专业的专属网页！

延伸阅读

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

意见反馈