Vibe Coding 將 Google Drive 變身最強檔案後端

在「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

使用 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 新時代

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～