(實例分享) 免月費、免寫 Code?自建訂位管理
單純心血來潮想跨域體會瞭解一下不同行業
開店每一分錢都要花在刀口上。市面上的訂位系統雖然強大,但每月的月費或以「訂位人數」抽成的費用,對剛起步的餐酒館或小餐廳來說是一筆不小的負擔。這篇文章以從幫 朋友的餐酒館製作為 Github Pages 網站 的經驗開始,聊到了線上訂位的需求問題,於是就不囉唆,來個手把手教你如何利用:
🚀 這套入門篇系統能做什麼?
- 自動接單:客人填寫 Google 表單,資料自動進入後台(Google Sheet)。
- LINE 秒通知:店家手機立刻跳出 LINE 通知(即時掌握桌況)。
- 一鍵確認:店家在手機上點一下,系統自動寄出「保留確認信」。
- 雙向互動:客人點擊信中連結確認出席,系統自動更新狀態為「已確認」,防止 No-show。
🛠️ 準備工作 (Pre-requisites)
在開始之前,你需要準備:
- 一個 Google 帳號 (建議用店家的專用帳號)
- 一個 LINE 官方帳號 (用於發送通知)
步驟一:建立 Google 表單與資料庫
這是系統的「門面」與「地基」。
- 建立 Google Sheets (試算表):
- 新增一個試算表,命名為「訂位管理系統」。
- 建立以下幾個欄位:訂位姓名、聯絡電話、Email、訂位日期、訂位時間、用餐人數、備註。
- 建立 Google Form (表單):
- 在試算表中點選「工具」>「建立新表單」。
- 依序建立題目 (必填):訂位姓名、聯絡電話、Email、訂位日期、訂位時間、用餐人數、備註。
- 設定技巧:關閉「自動收集電子郵件」,改用我們自己建立的 Email 題目,以確保欄位順序可控。
- 關鍵調整:校正欄位
- 回到試算表,會看到「表單回應 1」分頁。
- 重要! 在 A 欄(原本的時間戳記)按右鍵 >「在左側插入 1 欄」。
- 將新 A 欄命名為 訂位編號;調整後的 Excel 欄位,B 欄是時間戳記,E 欄是 Email。
- 關鍵調整:新增狀態欄與下拉選單
- 滑到最右邊的空白欄位(通常是 J 欄或 K 欄),將標題命名為 訂位狀態。
- 選擇上方選單的 「資料」>「資料驗證」。
- 新增規則 > 條件選 「下拉式選單」。
- 輸入選項:"待處理"、"發送確認信"、"客戶已確認"、"客戶已取消"。
步驟二:申請 LINE Messaging API (新版通知神器)
由於 LINE Notify 即將走入歷史,我們直接使用最新的 Messaging API。
- 前往 LINE Official Account Manager 建立一個官方帳號 (例如:Cié Cié Taipei 訂位通知)。
- 進入 設定 > Messaging API,啟用 API。
- 前往 LINE Developers Console,在 Channel settings 中取得 Channel Access Token (Long-lived)。
- 員工加入好友:掃描官方帳號 QR Code 加入好友。
注意:請至官方帳號後台關閉「自動回應訊息」,以免機器人一直回話。
步驟三:植入核心大腦 (Google Apps Script)
這是讓系統動起來的魔法。
- 在 Google Sheets 點選 「擴充功能」>「Apps Script」。
- 將編輯區清空,貼上 完整的自動化程式碼 (1~260 行)。
- 修改關鍵變數:
- CHANNEL_ACCESS_TOKEN:填入步驟二取得的 LINE Token。
- SHEET_ID:填入試算表網址 /d/ 後面的亂碼。
- WEB_APP_URL:先留空,下一步填。
步驟四:部署與自動化設定 (Deployment)
- 部署為 Web App:
- 點擊右上角「部署」>「新增部署」> 選取「網頁應用程式」。
- 執行身分:我 (Me)。
- 誰可以存取:所有人 (Anyone) <--- li=""> --->
- 複製產生的網址,貼回程式碼中的 WEB_APP_URL,並建立新版本再次部署。
- 設定觸發條件 (Triggers):
- 點擊左側鬧鐘圖示。
- 新增 onFormSubmit -> 觸發時機:提交表單時。
- 新增 sendEmailOnEdit -> 觸發時機:編輯時。
步驟五:實際操作流程演練
系統上線後,您的日常營運流程將變得超級順暢:
2. 店家確認 (手機操作)
打開 Google Sheets App,看到新訂位。若確認有位子,在「訂位狀態」欄位選擇 「發送確認信」。
3. 系統自動寄信
系統會自動寄出一封排版精美的 Email 給客人,信中包含「確認出席」的按鈕。
4. 雙向確認閉環
客人點擊按鈕後,會看到「確認成功」的網頁。同時,您的後台 Excel 該筆資料會自動變成 綠色 (已確認),LINE 也會再次通知您:「✅ 訂單成立!」。
💡 優化心得 💡
- 數據資產自己握:不同於外部平台,這些客戶資料都在自己的 Google 雲端,未來要做 EDM 行銷或會員分析非常方便。
- 完全客製化:Email 的文案、Logo、顏色,甚至 LINE 通知的格式,全部都能依照品牌風格調整。
- 成本控制:在月訂位量 200 組以內,這套系統幾乎是 0 元。
數位轉型不需要花大錢。透過聰明的工具組合,小店也能擁有專業級的營運效率!
(如果您在設定過程中有任何問題,歡迎交流!)
🔥 進階篇:打造 APP 級體驗!LINE LIFF 內嵌訂位系統 🔥
如果您覺得 Google 表單的介面不夠像「原生 App」,或者希望能做到更嚴謹的「O2O 閉環管理」(客人填單 -> 老闆審核 -> 系統自動寄信 -> 到店前 LINE 自動提醒 -> 客人二次確認),那麼請參考這個進階版的 LIFF 實作方案。
🚀 升級後的 O2O 自動化流程
- Step 1 客人訂位 (LIFF):在 LINE 聊天室直接開啟半版網頁填寫,系統自動抓取 User ID。
- Step 2 老闆審核 (LINE):老闆手機收到通知,點擊「✅ 確認接單」按鈕。
- Step 3 系統通知 (Email):GAS 自動寄送確認信給客人 (訂位成立)。
- Step 4 自動提醒 (LINE):系統偵測用餐前 6 小時,自動發 LINE 詢問客人是否出席。
- Step 5 最終確認 (LINE):客人點擊「👌 我會出席」,老闆收到最終確認通知。
準備工作:雙通道設定 (Dual Channels)
進階版需要兩個 LINE Channel 協同合作:
- Messaging API Channel (原本那個):負責讓機器人「發聲」,傳送通知給老闆與客人。
- LINE Login Channel (新增的):負責提供 LIFF 介面,讓客人填寫資料並辨識身分。
- 前往 LINE Developers,在同一個 Provider 下新增 Channel,選擇 LINE Login,App Type 選 Web App。
- 建立後,到 LIFF 頁籤,點 Add。
- Endpoint URL:先填暫定。
- Scopes:勾選 profile 和 openid。
- 儲存後,複製 LIFF ID。
實作步驟一:升級 Google Sheets (試算表)
為了支援審核與提醒狀態,我們需要擴充欄位。請建立一個新工作表,第一列 (A1~K1) 依序設定為:
- A: 下單時間
- B: 姓名
- C: 電話
- D: Email (接收確認信用)
- E: 日期
- F: 時間
- G: 人數
- H: 備註
- I: UserID (系統自動抓取)
- J: 訂位狀態 (待確認/已確認/顧客已二確)
- K: 提醒狀態 (未發送/已發送)
實作步驟二:部署全能大腦 (GAS V2)
這段程式碼是核心,它同時處理 LIFF 傳來的資料、老闆的審核按鈕、以及定時提醒。
- 選擇Google Sheets的擴充功能到 Apps Script,新增程式碼。
- 貼上 完整的自動化程式碼 (300~409 行)。
- 關鍵設定:
CHANNEL_ACCESS_TOKEN:填入 Messaging API 的 Token。ADMIN_USER_ID:填入您的 User ID (第一次測試後可從 Sheet 取得)。
- 右上角「部署」 > 「新增部署」。
- 類型:網頁應用程式
- 誰可以存取:所有人 (Anyone) <--- 這點最重要,選錯全毀。
- 點擊部署,複製網頁應用程式網址 (Web App URL),取得 GAS URL。
- 回頭設定 Webhook:將 GAS URL 貼回 LINE Developers (Messaging API) 的 Webhook URL 欄位,並開啟 Use Webhook。
實作步驟三:製作前端介面 (LIFF HTML)
我們不再使用 Google 表單,而是自己寫一個輕量的 HTML 頁面。
- 建立 liff-
booking.html,引入 LIFF SDK。 - 設定
liff.init並填入您的 LIFF ID。 - 設定表單送出時,透過
fetch()將 JSON 資料傳送給步驟二的 GAS URL。 - 將此 HTML 檔案上傳至 GitHub Pages 或任何網頁空間。
- 將 HTML 網址貼回 LINE Developers (LINE Login Channel) 的 LIFF Endpoint URL。
實作步驟四:開啟自動巡邏 (Triggers)
為了實現「前 6 小時自動提醒」,我們需要設定排程:
- 在 Apps Script 左側點擊「觸發條件 (鬧鐘)」。
- 新增觸發條件:執行
checkReminders函式。 - 活動來源:時間驅動 -> 小時計時器 -> 每小時。
完成以上設定後,您就擁有了一套不輸給付費平台的 Smart Reservation System。客人體驗更流暢,且透過雙重確認機制,能大幅降低 No-show 率!
