Vibe Coding 實戰：免寫程式！把 Google 試算表變成超精美點餐系統

這個 Vibe Coding 範例會使用 Google 試算表 ( Google Sheets )，搭配試算表內建的 Apps Script，在完全不手寫任何程式碼的情況下，把各種點餐菜單提供給生成式 AI，輕鬆又無腦」的「聊」出一個精美的線上點餐網頁，體驗不用寫 Code 就能當工程師的快樂了！

更多參考：Vibe Coding 全方位開發導讀

快速導覽：

• Step 1、上傳菜單圖片，產生結構化的 JSON 檔案
• Step 2、利用 JSON 檔案，產生程式碼和頁面
• Step 3、設定試算表和 Apps Script 部署應用程式
• Step 4、測試功能，並在 Google Sheets 查看訂單
• 相關注意事項

Step 1、上傳菜單圖片，產生結構化的 JSON 檔案

要製作線上點餐系統，一定要先有「菜單」，從網路上下載菜單的圖片，或者拍照掃描手邊的菜單圖片，將菜單傳送給 AI，並輸入下列提示詞，讓 AI 產生 JSON 格式的菜單。

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

送出之後，AI 就會分析菜單內容，產生對應的 JSON 檔案，將這個檔案下載到電腦中。如果想確認或修改 AI 產生的內容，也可用文字編輯器或程式碼編輯器打開 JSON 檔案查看並修改內容，以範例中的飲料菜單為例，開啟後可以看到各種飲料的名稱、價錢等資訊，如果有錯誤就可以直接修改。

Step 2、利用 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 試算表，就表示這個訂餐網頁已經可以正常運作囉！

相關注意事項

使用 Google Apps Script 雖然可以快速又方便的產生頁面，但需要特別注意「安全性」，因為 Apps Script 產生的網頁應用程式無法進行「保護」，所以「任何人」都可以透過這個網址點餐，甚至如果了解讀寫檔案規則，還可以任意複寫資料。因此如果要讓 Apps Script 更具有安全性，建議可以額外增加輸入「帳號密碼」的功能，避免有心人士破壞。

參考：Vibe Coding 實戰：利用 Google Apps Script 打造免費網頁部署基地

此外，因為 Google 試算表並不是標準資料庫，透過 Google Apps Script 讀寫檔案的速度比較慢，如果是正式上線產品，建議仍要使用標準資料庫的做法。

參考：AI 時代的輕量級後端：當 Vibe Coding 遇上 Google Sheets

另外，因為部署的 Apps Script 並不會因為檔案被刪除就跟著被刪除，如果要永久移除網頁應用程式，建議可以透過 Google 個人帳號裡的「連結的應用程式」進行移除。

小結

隨著 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 實戰：打造自己的英文單字卡！

意見回饋

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