Vibe Coding 實戰：用 Google Drive 輕鬆打造「檔案＆作業上傳系統」

不知道大家是否有遇過，當要從學生、客戶或活動參與者收集檔案，卻卡在「寄信附件太大」或「通訊軟體傳檔期限過期」的狀況呢？這個 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 查看檔案
• 如何刪除部署的專案
• 相關注意事項

Step 1、Google Drive 建立上傳檔案資料夾

用 Google 帳號登入自己的 Google 雲端硬碟，建立一個資料夾 ( 如果是要讓學生交作業，可暫時命名為 「XX 課程」)，並在資料夾中再建立一個名為「upload」的資料夾，接著畫面停留在 XX 課程的資料夾中。

Step 2、Vibe Coding 相關程式碼

開啟自己常用的生成式 AI 工具，準備透過 Vibe Coding 產生對應的網頁，首先確認檔案上傳要有哪些功能：

• 可以使用「選擇」和「拖拉」兩種方式上傳檔案。
• 可以一次上傳多個檔案。
• 上傳之後可以知道「是誰」上傳。

確認需求之後，就可以使用下面的提示詞產生網頁 ( 注意「同目錄裡的 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 實戰：打造自己的英文單字卡！

意見回饋

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