CIE CIE TAIPEI

台北市大安區信義路四段390號

02-2309-3446

週日至週四: 18:30–02:00;每位低消為一份餐點或飲品

週五至週六: 18:30 – 03:00;每位低消為 NT$800

(本店均酌收10%服務費)

餐酒館/酒吧/餐飲線上訂位數位轉型實例

免月費、免寫 Code;串接 Google 表單、LINE 通知與雙向確認

手把手帶您 0 元打造「自動化線上訂位系統」實戰教學

回首頁


餐飲/餐酒館/酒吧(開店)數位轉型

(實例分享) 免月費、免寫 Code?自建訂位管理

單純心血來潮想跨域體會瞭解一下不同行業

開店每一分錢都要花在刀口上。市面上的訂位系統雖然強大,但每月的月費或以「訂位人數」抽成的費用,對剛起步的餐酒館或小餐廳來說是一筆不小的負擔。這篇文章以從幫 朋友的餐酒館製作為 Github Pages 網站 的經驗開始,聊到了線上訂位的需求問題,於是就不囉唆,來個手把手教你如何利用:

🚀 這套入門篇系統能做什麼?

  • 自動接單:客人填寫 Google 表單,資料自動進入後台(Google Sheet)。
  • LINE 秒通知:店家手機立刻跳出 LINE 通知(即時掌握桌況)。
  • 一鍵確認:店家在手機上點一下,系統自動寄出「保留確認信」。
  • 雙向互動:客人點擊信中連結確認出席,系統自動更新狀態為「已確認」,防止 No-show。

🛠️ 準備工作 (Pre-requisites)

在開始之前,你需要準備:

  • 一個 Google 帳號 (建議用店家的專用帳號)
  • 一個 LINE 官方帳號 (用於發送通知)

步驟一:建立 Google 表單與資料庫

這是系統的「門面」與「地基」。

  • 建立 Google Sheets (試算表)
    • 新增一個試算表,命名為「訂位管理系統」。
    • 建立以下幾個欄位:訂位姓名、聯絡電話、Email、訂位日期、訂位時間、用餐人數、備註。
Google Sheets 欄位設定範例
  • 建立 Google Form (表單)
    • 在試算表中點選「工具」>「建立新表單」。
    • 依序建立題目 (必填):訂位姓名、聯絡電話、Email、訂位日期、訂位時間、用餐人數、備註。
    • 設定技巧:關閉「自動收集電子郵件」,改用我們自己建立的 Email 題目,以確保欄位順序可控。
Google Form 設定畫面
  • 關鍵調整:校正欄位
    • 回到試算表,會看到「表單回應 1」分頁。
    • 重要! 在 A 欄(原本的時間戳記)按右鍵 >「在左側插入 1 欄」。
    • 將新 A 欄命名為 訂位編號;調整後的 Excel 欄位,B 欄是時間戳記,E 欄是 Email。
  • 關鍵調整:新增狀態欄與下拉選單
    • 滑到最右邊的空白欄位(通常是 J 欄或 K 欄),將標題命名為 訂位狀態
    • 選擇上方選單的 「資料」>「資料驗證」。
    • 新增規則 > 條件選 「下拉式選單」。
    • 輸入選項:"待處理"、"發送確認信"、"客戶已確認"、"客戶已取消"。
Excel 資料驗證設定

步驟二:申請 LINE Messaging API (新版通知神器)

由於 LINE Notify 即將走入歷史,我們直接使用最新的 Messaging API。

LINE Official Account Manager
  • 進入 設定 > Messaging API,啟用 API。
  • 前往 LINE Developers Console,在 Channel settings 中取得 Channel Access Token (Long-lived)。
LINE Developers Console Token
  • 員工加入好友:掃描官方帳號 QR Code 加入好友。

注意:請至官方帳號後台關閉「自動回應訊息」,以免機器人一直回話。

步驟三:植入核心大腦 (Google Apps Script)

這是讓系統動起來的魔法。

  • 在 Google Sheets 點選 「擴充功能」>「Apps Script」。
  • 將編輯區清空,貼上 完整的自動化程式碼 (1~260 行)。
  • 修改關鍵變數:
    • CHANNEL_ACCESS_TOKEN:填入步驟二取得的 LINE Token。
    • SHEET_ID:填入試算表網址 /d/ 後面的亂碼。
    • WEB_APP_URL:先留空,下一步填。
Apps Script 編輯畫面

步驟四:部署與自動化設定 (Deployment)

  • 部署為 Web App:
    • 點擊右上角「部署」>「新增部署」> 選取「網頁應用程式」。
    • 執行身分:我 (Me)。
    • 誰可以存取:所有人 (Anyone) <--- li="">
    • 複製產生的網址,貼回程式碼中的 WEB_APP_URL,並建立新版本再次部署。
  • 設定觸發條件 (Triggers):
    • 點擊左側鬧鐘圖示。
    • 新增 onFormSubmit -> 觸發時機:提交表單時。
    • 新增 sendEmailOnEdit -> 觸發時機:編輯時。
Trigger 設定畫面

步驟五:實際操作流程演練

系統上線後,您的日常營運流程將變得超級順暢:

1. 客人訂位
客人填寫表單後,您的 LINE 群組會立刻響起:「🔔 新訂位通知!王先生 4位...」。

2. 店家確認 (手機操作)
打開 Google Sheets App,看到新訂位。若確認有位子,在「訂位狀態」欄位選擇 「發送確認信」。

手機版 Sheets 操作

3. 系統自動寄信
系統會自動寄出一封排版精美的 Email 給客人,信中包含「確認出席」的按鈕。

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 率!