創業開店必看！手把手帶您 0 元打造 Hugging Face + Supabase + Python「自動化線上訂位系統」

「點 👉 餐飲數位轉型 3.0：LINE LIFF + 混合雲端訂位 👈 我」

這是「Google Sheets 訂位系統」的終極進化版。在 v3.0 中，我們解決了最困難的兩個問題：「如何無縫抓取顧客 LINE ID」與「如何讓後端處理完後自動跳回官網」。這套架構讓您擁有媲美 Inline 的使用者體驗，同時保持零月費。

🏛️ 系統架構 (System Architecture v3.0)

核心大腦 (Database)：Supabase (新增 user_id 欄位)。
身份識別 (Identity)：LINE Login Channel (LIFF) ➔ 強制登入抓取 ID。
Space A (Front Logic)：隱藏式欄位接收 ID + JavaScript 自動轉址監聽。
Space B (Back Logic)：混合發信 (HTML Table Email + LINE Flex Message)。
前端整合：LIFF.html (LINE 專用) + booking.html (官網) + index.html (狀態彈窗)。

🛠️ 準備工作 (Pre-requisites)

「Hugging Face 帳號 (部署兩個 Spaces)。」
「Supabase 帳號 (資料庫)」
LINE Developers 帳號 (需建立 Login Channel 與 Messaging API Channel)。

步驟一：資料庫設定 (Supabase)

請務必記下 Project Settings 底下 Data API 的 Project URL 做為 SUPABASE_URL 變數與 API Keys 中的 Publishable key 做為 SUPABASE_KEY 變數。

create table bookings (
    id bigint generated by default as identity primary key,
    created_at timestamp with time zone default timezone('utc'::text, now()) not null,
    name text not null,
    tel text not null,
    email text,
    date text not null,
    time text not null,
    pax int not null,
    remarks text,
    status text default '待處理',
    user_id text  -- [v3.0 關鍵] 存放 LINE User ID
);

步驟二：部署 Space A (顧客前端 & 邏輯核心)

這是 v3.0 的技術精華。我們使用了 CSS 隱藏技巧來傳遞 ID，並利用 JS 監聽 來解決瀏覽器阻擋轉址的問題。

關鍵技術 1：隱藏 ID 接收框

為了不破壞畫面，但又要讓 Python 抓到 ID，我們用 CSS 把輸入框藏起來。

            # 確認 CSS 中存在
            #hidden_box { display: none !important; }

            # 在 Python 中設定
            line_id_box = gr.Textbox(visible=True, elem_id="hidden_box")

關鍵技術 2：JavaScript 自動轉址

當資料庫更新完成後，Python 回傳網址給隱藏框，前端 JS 偵測到後立即跳轉。

            # Python 回傳網址
            return f"https://ciecietaipei.github.io/index.html?status=confirmed"

            # JS 監聽並執行跳轉
            redirect_url_box.change(
                fn=None,
                inputs=redirect_url_box,
                outputs=None,
                js="(url) => { if(url) window.location.href = url; }"
            )

            「👉 完整代碼請參考 HuggingFace，記得給愛心哦 ! 👈」。

            並且要注意這幾個 secrets 的參數設定哦
            LINE_ACCESS_TOKEN
            LINE_ADMIN_ID
            SUPABASE_KEY
            SUPABASE_URL

            另可在代碼裡的 2. 座位控管設定 設定預計開放訂位的座位數

步驟三：部署 Space B (後台管理 & 混合通知)

老闆專用的後台，負責發送「確認信」。v3.0 升級了發信邏輯：

1. LINE Flex Message (漂亮卡片)

不再發送醜醜的純文字，改用 JSON 定義的 Flex Message，包含「確認」與「取消」按鈕，點擊後直接連動 Space A。

2. HTML Email (Table 排版)

為了解決手機版 Email 按鈕跑位的問題，我們改用最傳統但最穩定的 <table> 排版技術。

# Email 排版範例
<table width="100%">
    <tr>
        <td align="center">
            <a href="...">✅ 確認出席</a>
        </td>
    </tr>
</table>

            「👉 完整代碼請參考 HuggingFace，記得給愛心哦 ! 👈」。

步驟四：Google Apps Scripts 整合 (發送確認信)

到你要用來發信的 Google 帳號的「Google Apps Scripts 」新增一個專案。

需佈署發布為「網頁應用程式 (Web App)」，執行身分 (Execute as)：必須是 "Me" (您的帳號)，誰可以存取 (Who has access)：必須選 "Anyone" (任何人)。

                function doPost(e) {
                try {
                    var param = JSON.parse(e.postData.contents);
                    MailApp.sendEmail({
                    to: param.to,
                    subject: param.subject,
                    htmlBody: param.htmlBody,
                    name: param.name || "Cié Cié Taipei"
                    });
                    return ContentService.createTextOutput(JSON.stringify({ "status": "success" })).setMimeType(ContentService.MimeType.JSON);
                } catch (error) {
                    return ContentService.createTextOutput(JSON.stringify({ "status": "error", "msg": error.toString() })).setMimeType(ContentService.MimeType.JSON);
                }
                }

步驟五：前端網頁整合 (GitHub Pages)

我們需要三個檔案各司其職：

            「👉 完整代碼請參考 Github，記得給星哦 ! 👈」。

            並且要注意這幾個 secrets 的參數設定哦
            LINE_ACCESS_TOKEN
            ADMIN_USER
            ADMIN_PASSWORD
            SUPABASE_KEY
            SUPABASE_URL
            GAS_MAIL_URL

1. `「LIFF.html」` (LINE 官方帳號專用)

掛在 LINE 圖文選單。特色：強制登入。若沒登入會直接執行 liff.login()，確保 100% 抓到 ID；並修改其中這兩個變數

            // 您的正確 LIFF ID
            const MY_LIFF_ID = "2008912847-H6CWHiI7";

            // Space A 網址
            const HF_SPACE_URL = "https://deeplearning101-ciecietaipei.hf.space?__theme=dark";

2. `「booking.html」` (官網訂位頁)

掛在官網。特色：相容模式。如果在 LINE 內開就抓 ID，在 Chrome 開就當訪客，避免電腦版一直跳轉；並修改其中這兩個變數

            // 您的正確 LIFF ID
            const MY_LIFF_ID = "2008912847-H6CWHiI7";

            // Space A 網址
            const HF_SPACE_URL = "https://deeplearning101-ciecietaipei.hf.space?__theme=dark";

2. `「index.html」` (首頁)

特色：接收訊號。當 Space A 處理完訂單轉址回來時 (帶有 ?status=confirmed)，首頁會負責彈出「🎉 訂位確認成功」的視窗。

<script>
    window.addEventListener('load', function() {
        const urlParams = new URLSearchParams(window.location.search);
        const status = urlParams.get('status');
        if (status === 'confirmed') {
            alert("🎉 訂位確認成功！");
            // 清除網址參數，保持美觀
            window.history.replaceState({}, document.title, window.location.pathname);
        }
    });
</script>

⚠️ 開發者避坑指南

Gradio 重啟：修改 Python 代碼後，一定要按 Restart this Space，否則舊邏輯會殘留。
LIFF ID 設定：請區分 Channel ID (純數字) 與 LIFF ID (數字-亂碼)，前端要填的是後者。
Endpoint URL：LINE Developers 後台的 Endpoint URL 必須與您 GitHub 上傳的檔名完全一致 (區分大小寫)。

這套 v3.0 系統展示了如何用最少的成本，整合現今最強大的 Serverless 工具，打造出專業級的餐飲訂位體驗。

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

🔥 入門篇：Google 全家桶搭配 LINE Messaging API 的自動化訂位系統🔥
🔥 進階篇：打造 APP 級體驗！LINE LIFF 內嵌訂位系統 🔥

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

自動接單：客人填寫 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 -> 觸發時機：編輯時。

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

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

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

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

未滿十八歲請勿飲酒。喝酒不開車，開車不喝酒。

📍店家地址：大安區信義路四段390號 📍訂位專線：02-27093446

TonTon Huang Ph.D. | Deep Learning 101

搜尋此網誌