【實戰教學】用 Google 試算表打造「手繪風」手機點餐系統：從零開始到除錯全紀錄
你是否想過，不需要租用昂貴的伺服器，只要用 Google 試算表 (Google Sheets) 就能做出一個風格可愛、功能完整的「手機點餐系統」？
在這篇文章中，我將分享如何利用 Google Apps Script (GAS) 開發一個具備手繪插畫風格的網頁應用程式 (Web App)。我們將實現訂單串接、動態菜單上傳，並分享在開發過程中遇到的 SyntaxError 語法錯誤是如何解決的，以及如何將系統設定「隱藏」在後台，讓使用者體驗更流暢。
一、 專案目標與功能
我們希望打造一個簡單溫馨的點餐介面，主要功能包含：- 手繪插畫風格 UI：親切、不死板，適合手作或文創類型的小店。
- 手機優先設計：RWD 響應式網頁，手機點餐無障礙。
- 核心點餐功能：輸入姓名、選擇品名、價格、數量，自動計算總金額。
- 後台資料庫：所有訂單自動寫入 Google 試算表。
- 動態菜單上傳：店主可以上傳新菜單，不需要改程式碼。
二、 開發過程全紀錄
第一步：建立資料庫 (Google Sheets)
首先，建立一個新的 Google 試算表，並重新命名兩個工作表：
- orders (訂單)：欄位包含
時間戳記,姓名,品名,單價,數量,總金額。 - menu (菜單)：欄位包含
品名,價格,圖片連結(選填)。
第二步：後端核心 (Google Apps Script)
點選 擴充功能 > Apps Script，我們需要處理兩個主要的函數：doGet (顯示網頁) 和 doPost (接收訂單)。
關鍵設定：隱藏系統 URL 在開發初期，我們可能需要手動輸入 Script URL 來測試。但為了讓使用者打開網頁就能用，我們將 URL 直接寫入程式碼設定中，不需要使用者操心。
JavaScript
// 後端系統設定：這裡定義您的 Web App URL const SYSTEM_CONFIG = { scriptUrl: "https://script.google.com/macros/s/AKfycbza4cEldF4IuAzevHtlYDVxHbHxWY8pGqt_QnXNTtz_1ahd_zypBJFOD690FhXVWyE3/exec", sheetId: "您的試算表ID" // 若有需要指定 }; function doGet(e) { return HtmlService.createTemplateFromFile('Index') .evaluate() .setTitle('手繪風點餐系統') .addMetaTag('viewport', 'width=device-width, initial-scale=1'); } function processForm(formObject) { // 處理訂單寫入試算表的邏輯 var url = "您的試算表URL"; var ss = SpreadsheetApp.openByUrl(url); var ws = ss.getSheetByName("orders"); ws.appendRow([ new Date(), formObject.name, formObject.item, formObject.price, formObject.quantity, formObject.total ]); return "訂購成功！"; }
第三步：前端介面與手繪風格 (HTML/CSS)
為了達成「手繪風」，我們使用了 CSS 的 border-radius 不規則數值以及手寫字體設定，並加入了類似素描線條的邊框。
HTML
<style> /* 手繪風格關鍵 CSS */ .hand-drawn-box { border: 2px solid #333; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; /* 不規則圓角 */ box-shadow: 2px 3px 5px rgba(0,0,0,0.2); font-family: "Comic Sans MS", "Chalkboard SE", sans-serif; /* 模擬手寫字 */ background: #fff; padding: 20px; } /* 按鈕的手繪感 */ button { background: #ffcc00; border: 2px solid #000; transform: rotate(-1deg); transition: transform 0.2s; } button:active { transform: rotate(1deg) scale(0.95); } </style>
在 JavaScript 部分，我們將後端的 Script URL 設定為全域變數，這樣 fetch 或 google.script.run 呼叫時就能直接使用，隱藏了複雜的設定。
第四步：功能升級 - 上傳菜單
為了讓店家能更新菜單，我們新增了一個「上傳菜單」的功能。這涉及到讀取 menu 工作表的資料，並動態生成前端的下拉選單。
在此階段，我們遇到了一個常見的挑戰。
第五步：除錯實錄 (Debug)
在整合程式碼時，系統噴出了錯誤訊息：
Error:
SyntaxError: Invalid or unexpected token(行數：28, 37)
問題分析： 這種錯誤在 GAS 開發中非常常見，通常發生在：
- 字串換行問題：在 JavaScript 中，普通的單引號
'或雙引號"不支援跨行字串。 - HTML 模板嵌入錯誤：在
.gs檔案中直接拼接 HTML 字串時，如果不小心斷行或引號未閉合，就會報錯。
解決方案：
- 使用樣板字面量 (Template Literals)：將原本的引號改為反引號 ( ` )，這樣就可以支援多行字串與變數嵌入
${variable}。 - 檢查拼接符號：確認所有的
+號前後都有正確連接字串。
修正前 (錯誤範例)：
JavaScript
// 這樣寫如果換行會報錯 var html = "<div class='menu-item'>" + item.name + " </div>";
修正後 (正確範例)：
JavaScript
// 使用反引號，或是確保都在同一行 var html = `<div class='menu-item'> ${item.name} </div>`;
經過兩次修正（第一次修復基礎語法，第二次修復新增上傳功能後的拼接錯誤），系統終於順利運行。
三、 系統設定與部署
最後一步是將這些複雜的設定「隱藏起來」。
在程式碼的最終版本中，我們將 Google Script URL 直接寫死在後端的 Code.gs 或前端的 <script> 變數中。使用者看到的介面只有清爽的表單，不需要去複製貼上那串長長的網址。
部署步驟：
- 點擊 Apps Script 右上角的「部署」 (Deploy)。
- 選擇「新增部署」 (New deployment)。
- 類型選擇「網頁應用程式」 (Web app)。
- 執行身分：我 (Me)。
- 誰可以存取：任何人 (Anyone) (這樣客人才不用登入 Google 也能點餐)。
四、 成果展示與結語
透過這次的實作，我們完成了一個：
- ✅ 介面可愛：手繪線條與溫暖配色。
- ✅ 功能實用：從點餐到後台統計一條龍。
- ✅ 維護容易：透過試算表即可管理訂單與菜單。
程式開發的過程中，遇到 SyntaxError 是家常便飯，重要的是學會看錯誤行數，檢查引號與斷行。希望這篇文章能幫助想嘗試自製點餐系統的你！
網頁呈現
網頁呈現
網頁呈現
試算表內容
