Vibe Coding 串接 Google 云端硬盘

在“Vibe Coding”的浪潮下，如果需要为网页应用程序增加“文件上传”功能时，与其去设定复杂的 AWS 或 Google Cloud Storage，不如利用普及的 Google Drive ( Google 云端硬盘 ) 作为上传数据库，这篇教学会透过 Google Apps Script ( GAS ) 作为中继站，以直觉的方式将 Google Drive 变成云端硬盘后端，轻松完成文件上传的操作。

快速导览：

• 使用 Google Drive 作为上传空间的优缺点
• 使用 Google Drive 作为上传空间的注意事项
• 准备工作 1：建立账号密码表与上传文件夹
• 准备工作 2：建立操作 Google Sheets 的 Apps Script
• 部署 Google Apps Script
• Vibe Coding 上传文件到 Google Drive

教学影片

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

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

使用 Google Drive 作为上传空间的优缺点

使用 Google Drive 作为文件储存方案，对于 Vibe Coding 玩家来说有明显的吸引力，但也存在一些限制，下方列出相关的优缺点：

• 优点

  • 完全免费：对于个人专案或小规模应用，Google 默认 15GB 免费空间绰绰有余。

  • 直觉管理：上传的文件可以直接透过 Google Drive 界面查看、分类或分享，不需要额外的后台管理系统。

  • 低门槛：使用 Web App 方式不需要设定 API 金钥或复杂的认证流程，部署极快。

  • 生态系整合：文件上传后，可以轻易连动 Google Sheets 纪录路径，或透过 Gmail 发送通知。

• 缺点

  • 效能限制：Google Apps Script 的执行速度与 API 反应时间较慢，不适合高频率、大量文件的并发上传。

  • 文件大小限制：透过 GAS 处理文件时，单次 Request 有大小限制 ( 建议 10MB-50MB 以下较为稳定 )。

  • 隐私风险：若 Web App 权限设定不当，可能导致后端网址被滥用。

使用 Google Drive 作为上传空间的注意事项

在开始实作前，请务必留意以下几点，以确保 Google Drive 和专案的稳定性与安全性：

• 安全性

  • 加入检查机制：将 GAS 部署为“Web App”并设定为“所有人”可以存取时，任何知道该网址的人都能尝试发送请求。建议在程序码中加入简单的 Token 或 Password 检查机制。
  • 避免机密信息公开：机密的 Web App 网址不应直接公开在 GitHub 的公开储存库中。

• Google Apps Script 每日限额

  • 执行时间限制：一般个人账号每天的指令码总执行时间上限为 90 分钟，单次执行最长不得超过 6 分钟 ( Google Workspace 账号则较宽裕 )。

  • URL Fetch 请求次数：GAS Web App 接受呼叫的次数，个人账号限额通常为 20,000 次，流量较大的应用需要特别注意。

  • Google Drive 写入频率：虽然文件储存空间共用 15GB，但若短时间内进行极高频率的文件建立或删除，可能会触发 Google 的流量管控机制导致请求失败。

  • 同时执行数：GAS Web App 同时处理的请求数有限，若瞬间并发过高，后端可能会返回 503 错误。

• CORS 跨来源资源共用

  前端 JavaScript 呼叫 GAS 网址时，由于 GAS 的 Redirect 特性，时常会遇到 CORS 问题。实作时需确保返回正确的 ContentService 格式。

准备工作 1：建立账号密码表与上传文件夹

既然要使用 Google Drive 作为上传数据库，就一定要先建立“上传文件夹”，此外还要多建立一份“账号密码表”，让“只有账号密码”的用户才可以上传数据，借此提高安全性，参考下方步骤建立文件夹和账号密码表：

建立上传文件夹

进入自己的云端硬盘，用新增功能，新增一个名为“upload”的文件夹 ( 名称先设定为 upload，如果使用自订名称，待会 Apps Script 串接时再、额外修改 )，文件夹不需要更动权限，保持只有自己可以使用即可。

建立账号密码 Google Sheet

进入自己的云端硬盘，用新增功能，新增一个名为“user”的 Google Sheet ( 名称先设定为 user，如果使用自订名称，待会 Apps Script 串接时再额外修改 )。

打开这份 Google Sheet，第一个字段填上账号，第二个字段填入密码，Google Sheet 不需要更动权限，保持只有自己可以使用即可。

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

建立了账号密码表和上传的文件夹之后，就要开始透过 Google Apps Script 产生网页应用程序，让网页可以判断账号密码并上传文件，如果对于 Google Apps Script 不了解，可以先参考下方教学 ( 从头阅读到“Google Apps Script 的部署方式”即可 )：

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

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

• 安全机制：透过“不公开”的“账号密码”试算表验证身份，确认账号密码后才可以上传文件。
• 数据格式：可以限制哪种类型的文件才可以上传。
• 消息回馈：会回馈账号密码错误、已经上传、文件网址等消息。

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

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

建立副本之后，如果刚刚账号密码 Google Sheet 和上传文件夹使用自己的档名，需要额外修改 Apps Script 里 CONFIG 信息，将内容换成自己的档名，没有的话就不需要修改。

部署 Google Apps Script

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

在弹出视窗中点击左上方“齿轮”图示，选择“网页应用程序”，将“谁可以存取”的权限设定为“所有人”( “我的身份”就是你自己的账号 )，说明文字可自由填写。

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

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

全选启用上方权限，点击“Continue”按钮继续部署。

部署完成后，就会产生一串网址，届时就可以在网页里面使用这串网址比对账号密码，并上传数据到 Google 云端硬盘。

Vibe Coding 上传文件到 Google Drive

因为使用 GAS 串接 Google Drive 并不是使用标准的 API，因此 AI 会不清楚所有的读写文件的方法 ( AI 只认得官方提供的标准 API )，不过如果要透过 Vibe Coding 的方式，只要提供 AI 对应的 API 文件或是程序码，AI 就可以从中抓取对应的方法使用，下方是 STEAM 教育学习网串接 Google Drive 的 API 说明文件，可以先下载到自己的电脑中 ( 可以存档为 .txt 或 .md )。

打开：串接 Google Drive API 说明文件

有了说明文件后，接着就上传这个说明文件，并透过下方提示词，请 AI 产生可以上传文件到 Google Drive 的网页。

請幫我產生一個網頁
- 我的網頁會透過 GAS 上傳檔案到 Google Drive，GAS API 用法請參考附件的說明文件。
- 使用純 HTML 和 JS，不要使用額外框架
- 畫面上有帳號密碼輸入欄位、選擇檔案按鈕、上傳按鈕、訊息提示
- 幫我在程式碼中使用假的 API 路徑，我會自行替換

完成后，参考“下载 Vibe Coding 网页程序码”教学，下载 HTML 并用程序码编辑器或文字编辑器打开 HTML 源代码，把假数据的位置替换成刚刚 GAS 部署的网址。

接下来只要在本机环境启用服务器，或参考“使用 GitHub 部署你的网页作品”的教学步骤，把网页上传到 Github，打开网页，输入账号密码，就可以上传文件到 Google 云端硬盘了！

回到云端硬盘的 upload 文件夹，就可以看见上传的文件 ( 注意，如果要让其他人也可以检视文件，需要打开文件夹分享权限 )。

结语

透过 Google Drive 与 Apps Script 的组合，可以轻松避开传统开发中租用服务器与设定数据库的困难，用最少的开发成本换取了最大的实作弹性，虽然这种架构不适合商用的重度应用，但对于个人工具、原型设计或是小团队的内部系统来说，Google Drive 无疑是极佳的解决方案！

延伸阅读

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

意见反馈