這是「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 工具，打造出專業級的餐飲訂位體驗。