Vibe Coding 实战：文件上传系统

不知道大家是否有遇过，当要从学生、客户或活动参与者收集文件，却卡在“寄信附件太大”或“通讯软件传档期限过期”的状况呢？这个 Vibe Coding 范例会使用 Google Drive 和 Google Apps Script 的方式，轻松打造出精美好用的“文件上传网页”！

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

快速导览：

• Step 1、Google Drive 建立上传文件文件夹
• Step 2、Vibe Coding 相关程序码
• Step 3、Apps Script 部署网页应用程序
• Step 4、测试功能，并在 Google Drive 查看文件
• 如何删除部署的专案
• 相关注意事项

教学影片

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

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

Step 1、Google Drive 建立上传文件文件夹

用 Google 账号登录自己的 Google 云端硬盘，建立一个文件夹 ( 如果是要让学生交作业，可暂时命名为 “XX 课程”)，并在文件夹中再建立一个名为“upload”的文件夹，接着画面停留在 XX 课程的文件夹中。

Step 2、Vibe Coding 相关程序码

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

• 可以使用“选择”和“拖拉”两种方式上传文件。
• 上传文件到同一层的 upload 文件夹 ( 可自订名称 )。
• 可以一次上传多个文件。
• 上传之后可以知道“是谁”上传。

确认需求之后，就可以使用下面的提示词产生网页 ( 注意“同目录里的 upload 文件夹”，表示 apps script 程序和 upload 文件夹会放在同样的文件夹中 )。

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

幫我用 apps script 產生的網頁：
- 前後端分離，使用扁平化簡潔風格，藍白配色。
- 使用者可以選擇檔案，或將檔案拖拉到上傳區域，上傳到與 apps script 同目錄裡的 upload 資料夾。
- 使用者上傳檔案時，需要輸入「名字」，上傳檔案後，會在原本檔案名稱前方加上使用者的名字，例如名字是「小明」，檔名是「test.jpg」，上傳之後的檔案名稱就會是「小明-test.jpg」
- 可以一次上傳多個檔案。

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

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

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

进入刚刚“XX 课程”的文件夹，在文件夹里新增并打开一个“Apps Script”。

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

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

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

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

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

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

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

Step 4、测试功能，并在 Google Drive 查看文件

点击并打开网址，可以看见输入名字的字段以及上传文件的区域。

选择上传的文件，或将要上传的文件拖拉到上传区域，输入自己的名字之后就可以开始上传，上传成功也会有提示。

接着进入云端硬盘的 upload 文件夹，就可以看见上传的文件，同时在档名的前方，也会看见刚刚自己输入的名字，就可以识别到底是谁上传了文件。

如何删除部署的专案

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

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

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

相关注意事项

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

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

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

参考：Vibe Coding 将 Google Drive 变身最强文件后端

小结

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

意见反馈