用 AI 做了一套小吃店手機點餐系統:從 Prompt 到真的送出訂單
我把需求拆成四輪 Prompt,實際完成可用手機選餐、送單並寫入 Google 試算表的小吃店點餐範例。本文附完整程式、操作畫面與驗收方法。

我原本想找一個夠簡單的 AI 應用,讓沒有程式背景的人也能照著做出成品。試過幾種自動化工具後,我最後選了小吃店手機點餐,理由很直接:需求容易理解,而且做完可以用手機真的下一筆訂單。
這次我用 AI 協助整理規格、產生初版程式與檢查漏洞,資料則放在 Google 試算表,網頁使用 Google Apps Script服務,如此即便在沒有租用線上主機空間或資料庫也能讓服務在線上跑起來。AI 並沒有替我按完所有按鈕,也不是第一版就完全正確;仍然需逐步測試金額、欄位與手機畫面。下面把整個過程照實整理出來。
先看完成後能做什麼
- 顧客掃描 QR code 後,在手機上依分類選餐並調整數量。
- 結帳前可核對餐點,選擇內用或外帶,再填桌號或取餐人。
- 送出後顯示訂單編號與總額,店家端的 Google 試算表會新增一筆訂單。
- 店家可直接在試算表調整價格、停售餐點及更新製作狀態。



先把第一版範圍定好
我沒有一開始就叫 AI 做「完整 POS」。那會同時扯到付款、發票、庫存、出單機和權限,錯一個地方就很難判斷。第一版只處理選餐與送單,目標是先跑完一條完整流程。
這次會完成
菜單維護、分類選餐、購物車、內用/外帶、訂單編號、Google 試算表訂單紀錄。
這次先不做
線上付款、發票、即時庫存、廚房出單機、會員與外送平台串接。
Prompt 要怎麼下,才不會越做越亂
我沒有把所有要求塞進一句「幫我做點餐系統」。我的做法是先讓 AI 整理規格,確認資料欄位後才產程式碼。
第一輪:先釐清需求和流程,不急著請AI寫程式
我想做一套給台灣小吃店使用的手機點餐系統,但我沒有程式背景。 使用情境: - 顧客掃描桌上的 QR code,在手機上點餐。 - 可以選餐、調整數量、選擇內用或外帶。 - 內用要填桌號,外帶要填取餐人稱呼。 - 送出後顯示訂單編號與總金額。 - 店家用 Google 試算表維護菜單並查看訂單。 第一版先不要做: - 線上付款 - 發票 - 庫存 - 出單機 - 會員登入 請先不要寫程式。請先整理: 1. 顧客操作流程 2. 店家操作流程 3. 需要哪些試算表與欄位 4. 哪些資料必須在伺服器端重新驗證 5. 第一版完成後,我要怎麼測試才知道真的可用 請用台灣中文回答。
這一輪的重點在確認AI是否有把需求轉成初步規格
第二輪:把已確認的規格變成可執行檔案
請依照前面確認的規格,用 Google Sheets + Google Apps Script 製作可執行版本。 請完整輸出以下三個檔案,不要無故省略程式碼: 1. Code.gs 2. Index.html 3. appsscript.json 必要規格: - 菜單工作表欄位:餐點編號、分類、餐點名稱、說明、價格、圖片網址、販售中。 - 訂單工作表欄位:訂單編號、建立時間、用餐方式、桌號/取餐人、訂購人、聯絡電話、訂單內容、總金額、備註、狀態。 - 設定工作表至少有店名與營業提示。 - 提供 setupDemo(),第一次執行時建立工作表與示範菜單,但不可覆蓋已有資料。 - setupDemo() 要把試算表 ID 存進 Script Properties;網頁執行時用 openById() 取得試算表,不要依賴 getActiveSpreadsheet()。 - 顧客端用 google.script.run 呼叫後端。 - 後端必須依餐點編號重新讀取菜單價格並計算總價,不可信任前端傳來的金額。 - 拒絕不存在或已下架的餐點,單項數量限制 1 到 20。 - 寫入訂單時使用 LockService,並防止使用者輸入被試算表當成公式。 - 手機寬度 390px 時文字、圖片、按鈕不可重疊。 - 介面使用台灣中文。 輸出程式碼後,再列出從建立試算表、執行 setupDemo、授權到部署網頁應用程式的操作步驟。
這輪把規格透過AI轉成可執行的APP
第三輪:執行遇到問題別慌,確實告知AI。
我遇到問題,請先判斷原因,不要重寫整套程式。 操作方式: 1. 我從 Google 試算表的「擴充功能 → Apps Script」建立綁定式專案。 2. 在編輯器內執行 setupDemo() 時可以建立工作表。 3. 部署成網頁應用程式後,網頁卻讀不到原本的試算表。 目前程式在網頁請求中使用 SpreadsheetApp.getActiveSpreadsheet()。 請說明: - 為什麼在編輯器可用、部署後卻失敗? - 請只提供最小修改:setupDemo() 儲存試算表 ID,網頁端改用 SpreadsheetApp.openById()。 - 修改後哪些功能要重新測試? 若需要更多資訊,先告訴我要貼哪一段錯誤訊息或程式碼,不要自行猜測。
我第一版就踩到這個坑:在 Apps Script 編輯器執行時可以取得目前的試算表,部署成網頁後卻不能沿用同一種取得方式。後來改成初始化時記住試算表 ID,再由網頁端用 ID 開啟。這種問題若只問「為什麼不能用」,AI 往往會一次改太多;把操作步驟與可疑程式一起貼回去,答案會收斂得多。
第四輪:功能跑起來後,再請 AI 找漏洞
請以程式碼審查者的角度檢查這套點餐範例,不要增加新功能。 請逐項確認: 1. 前端若把總價從 260 改成 26,後端是否仍會依菜單算回 260? 2. 已下架或不存在的餐點編號是否會被拒絕? 3. 數量為 0、負數、小數或超過 20 是否會被拒絕? 4. 兩位顧客同時送單時,寫入訂單是否有鎖定? 5. 姓名或備註以 =、+、-、@ 開頭時,是否可能被試算表當成公式? 6. 前端是否有顯示後端錯誤,而不是按鈕永遠停在送出中? 7. 程式是否把任何密碼、API Key 或試算表私人資料傳到瀏覽器? 請用「通過/需修改/無法判斷」逐項回答,指出對應函式名稱,最後只列必要修改。
這輪不能只看 AI 回「通過」。另外用測試程式把前端總價故意改錯、送不存在的餐點、塞入 100 份數量,也測了以等號開頭的姓名。四項測試都被後端正確處理,才把這版留下來。
要如何開始>建立 Google 試算表與 Apps Script
- 建立空白 Google 試算表。
檔名可取「小吃店點餐系統」。先不必手動新增工作表,稍後由程式建立。
- 從試算表選單開啟「擴充功能 → Apps Script」。
這樣建立的是與該試算表綁定的專案,日後管理比較直覺。
- 放入三個檔案。
將下載包中的 `Code.gs`、`Index.html` 與 `appsscript.json` 放進專案。檔名要一致,尤其 HTML 檔不要誤存成文字檔。
- 執行一次 `setupDemo()`。
第一次執行會要求授權。完成後回到試算表,應該會看到「菜單」、「訂單」、「設定」三個工作表,以及六項示範餐點。


部署成顧客能打開的點餐網址
- 在 Apps Script 右上角選擇「部署 → 新增部署作業」。
- 部署類型選「網頁應用程式」,說明可填「小吃店點餐第一版」。
- 執行身分選擇自己;存取對象必須允許實際顧客開啟。若要讓未登入 Google 的顧客掃碼使用,選項需包含匿名使用者。
- 按下部署並完成授權,複製結尾為 `/exec` 的網址。`/dev` 是只有專案編輯者能看的測試網址,不要印到店內 QR code。
Google 的介面文字可能依帳號類型略有不同,但部署概念相同:顧客開啟網頁,程式以部署者身分將訂單寫進指定試算表。若帳號政策不允許匿名存取,就不適合直接拿這個版本做公開點餐。
查看 Google 官方網頁應用程式部署說明最後不要只看畫面,要真的送一筆
我用下面這筆測試單驗收,任何一項對不上就先不要印 QR code:
| 測試內容 | 預期結果 |
|---|---|
| 招牌肉燥飯 2 份 | NT$160 |
| 鍋燒意麵 1 份 | NT$100 |
| 訂單總額 | NT$260 |
| 未填桌號直接送出 | 顯示「請填寫桌號」且不建立訂單 |
| 填完資料送出 | 顯示訂單編號,試算表新增一列且總額為 260 |


實際送單後,我還會用另一支手機掃描 QR code,確認不登入 Google 也能開啟;再把菜單某項的「販售中」取消勾選,檢查前台是否真的消失來驗證功能。
這套範例適合做到哪裡
這是一套可驗證的入門點餐系統,適合內部試用、小型活動或先整理店內流程。它還不是商用 POS:若每天訂單量高、要串金流、發票、廚房出單、會員或庫存,應改用正式資料庫並補上權限、通知、備份與異常監控。