第六章：打造企業級門面！圖文選單 (Rich Menu) 與 LIFF 的無縫綁定

當你打開那些大型銀行、知名電商、或是星巴克的 Line 官方帳號時，你會發現一件事：他們從來不會要求消費者「自己用鍵盤打字」來啟動服務。 在他們的聊天室底部，總會有一塊佔據螢幕三分之一大小、設計精美、並且可以點擊的大型圖片按鈕區塊。這個強大的功能，就叫做「圖文選單 (Rich Menu)」。

如果你是在做一個商業接案的打卡系統，你絕對不可能叫一家餐廳的十幾個員工，每天早上自己用手機鍵盤打出「上班」兩個字來打卡。這不僅容易因為打錯字、多打一個空白鍵而導致系統判斷失敗，而且整個產品的質感看起來會極度「陽春」，像是一個大學生的未完成專題。

我們要把上一堂課用 React 寫好的 LIFF 精美打卡網頁，完美且隱密地綁定在這個圖文選單上。讓員工每天早上一打開 Line，不需要思考，直接點擊下方那顆碩大精美的「上班」大按鈕，就能無腦完成打卡！

這章，我們將帶你走過企業級 Line Bot 必備的 UI 門面建置，讓你的專案身價瞬間翻倍。

---

🎨 第一步：準備吸睛的圖文選單 UI 設計底圖

要設定圖文選單，你首先需要有一張設計好按鈕區塊的「底圖」。 Line 官方對於圖文選單的圖片尺寸，有著非常龜毛且嚴格的像素限制，差 1 個像素都不行：

• 大型圖文選單 (最常見，強烈推薦)：2500 x 1686 像素。它佔據的手機版面較大，非常適合放 2~6 個按鈕。
• 小型圖文選單：2500 x 843 像素。
• 檔案大小絕對不能超過 1MB，格式必須為 JPG 或 PNG。

身為一個專注於寫程式的工程師，如果沒有美術天份、不會用 Photoshop 怎麼辦？不用擔心，交給 AI 與強大的免費線上工具來解決。

🔥【Vibe Coder 的設計外包密技】 千萬不要自己從零開始畫。你可以直接打開 Canva (全球最強的免費線上設計工具)，在首頁搜尋框輸入關鍵字 "Line Rich Menu Template" 或是 "Line 圖文選單"。 裡面有上百種現成、連輔助線都幫你切好的精美版型。你只要選擇一個分成「左右兩塊大按鈕」的版型：

• 左邊的按鈕區塊：換上充滿朝氣的顏色，寫上「🌅 上班打卡」。
• 右邊的按鈕區塊：換上沉穩的顏色，寫上「🌃 下班打卡」或是「📝 請假系統」。 只要花 5 分鐘調整好顏色與文字，選擇下載成 2500x1686 尺寸的 PNG 圖片，你的千萬級系統門面就搞定了！

---

⚙️ 第二步：在 Line 官方後台進行圖文綁定

在軟體技術上，你確實可以寫幾百行的 Python 程式碼 (去呼叫 Line Messaging API 裡複雜的 Rich Menu Endpoint)，來動態上傳並建立圖文選單。 但在 90% 的真實接案場景中，你的客戶 (例如餐廳老闆、行銷店長) 未來一定會想要「自己」隨時更換節慶促銷的圖文選單圖片，他們絕對不可能打電話叫你改程式碼。 所以，直接去 Line 官方提供的網頁後台進行視覺化設定，是實務上最快、最穩定、也最方便未來交付給客戶的標準做法！

1. 前往 Line 官方帳號管理後台 (Official Account Manager) 並使用你的 Line 帳號登入。(注意：這跟前面的 Developer 控制台是不同的網頁)
2. 從列表中，點擊進入你的打卡系統機器人帳號。
3. 在畫面最左側的深色選單中，點擊展開 聊天室相關 > 選擇 圖文選單。
4. 點擊畫面右上角的綠色大按鈕 建立。
5. 在「基本設定」中：
   • 標題：填寫僅供內部管理辨識的名稱 (例如 "預設打卡主選單_2024版")。
   • 顯示期間：請把結束時間設定到遙遠的 10 年後 (例如 2035 年)，不然選單過期了員工會崩潰。
   • 選單列顯示文字：維持預設的「選單」即可。
   • 預設顯示方式：選擇「顯示」(讓它一進聊天室就自動彈出來)。

---

🔗 第三步：綁定 LIFF URL！(決定系統成敗的關鍵一步)

這是決定你的系統是一個「只會聊天的玩具」，還是一個「具備商業防弊能力的企業級產品」的分水嶺。在下方的「內容設定 (Action)」區域，請務必嚴格按照以下步驟操作：

1. 版型選擇：點擊選擇版型，選擇與你剛剛 Canva 底圖相符的切塊版型 (例如剛好分成左右兩半對稱的版型)。
2. 點擊上傳背景圖片，把你做好的 2500x1686 圖片傳上去。
3. 設定動作 A (對應左邊的「上班打卡」區塊)：
   • 類型：絕對要選擇下拉選單中的「連結 (URL)」。(⚠️ 致命警告：千萬不要選成「文字」！)
   • 網址：貼上你在前面課程中，於 LIFF 後台產生的那串專屬網址。
   • 範例格式：https://liff.line.me/1234567890-abcdefgh?action=checkin。
4. 設定動作 B (對應右邊的「下班打卡」區塊)：
   • 類型：同樣選擇「連結 (URL)」。
   • 網址：貼上一模一樣的 LIFF URL，但是，請在網址最後面的 Query Parameter 加上不同的參數。
   • 範例格式：https://liff.line.me/1234567890-abcdefgh?action=checkout。

點擊最下方的 儲存 按鈕。 打開你的手機 Line，點進你的機器人，你會看到那個精美的圖文選單已經霸氣地佔據了螢幕的下方。

🧠 為什麼要在網址後面加上 ?action=...？

這是一個非常高階的工程技巧。透過在同一個 LIFF 網址後面加上不同的 URL 參數 (Parameters)。 當員工點擊按鈕，LIFF 網頁從 Line 裡面優雅彈出時，我們寫在網頁裡的 React / JavaScript 程式碼，就能夠去「讀取」這個網址參數，自動判斷員工現在是點了「上班」還是「下班」，並瞬間切換網頁的畫面與顏色給他看。這就是無縫整合的魅力！

---

⚠️ [資深架構師的地雷區] 為什麼絕對不能用 Webhook 文字來處理打卡點擊？

很多剛在網路上學做 Line Bot 的新手工程師，會直覺地把圖文選單按鈕的動作設定為「傳送文字」。他們會設定按下去就自動傳送「上班」兩個字到聊天室裡，然後在後端用 Python FastAPI 的 Webhook 去接這個字串，並把打卡時間寫入資料庫。

如果你在商業打卡系統中這樣做，這是災難的開始，你馬上會被客戶退貨！

如果你只依賴「純文字 Webhook」來判定打卡，你會面臨三個從物理層面無法解決的破綻：

1. 無法取得精準的防弊 GPS 定位：Line 的純文字訊息封包中，是不會帶有手機的 GPS 座標的。你根本不知道員工是在店裡打卡，還是在家裡的床上一邊睡覺一邊打卡。
2. 無法防弊代打卡腳本：稍微懂點電腦的員工，可以自己寫個 Python 腳本，透過 Line API 每天早上 9 點準時發送「上班」字串給你的機器人。
3. 無法防止同事代點：員工可以把手機留給同事，請同事幫忙在螢幕上點一下。

🏆 企業級系統的防弊解法架構： 員工點擊圖文選單的按鈕 ➡️ Line 迅速彈出我們寫好、且受到保護的 LIFF 網頁 ➡️ LIFF 網頁在前景強制取得手機目前的真實 GPS 座標，並驗證該 Line 帳號是否與當下的手機硬體裝置綁定 ➡️ 確認無誤後，網頁將這包帶有加密簽章的資料，呼叫我們的 FastAPI 進行最終打卡確認！

這就是為什麼在前面的課程中，我們花費了巨大的篇幅教你怎麼寫 React + LIFF 網頁。 只有把「圖文選單的無縫無腦入口」結合「LIFF 的強大前端防護力」，你才能做出一套真正順暢、具備強悍商業防弊能力、價值十萬元的企業級 UX (使用者體驗) 產品！

---

💼 [商業變現場景] 用圖文選單做無盡的產品 Upsell (向上銷售)

學會了圖文選單與 LIFF 的動態綁定機制，你的系統擴充性將無可限量。 這就是最賺錢的 SaaS (軟體即服務) 玩法。當你把這套打卡系統賣給飲料店老闆後，穩定運作了半年，你可以再提著公事包去拜訪他：

「老闆，這半年打卡系統用得還順利嗎？我看你們現在員工請假或是排班，都還是用紙本在填寫，每個月算薪水很容易弄錯對吧？ 我幫您在目前原本的圖文選單右下角，加一塊『線上排班與請假系統』的精美按鈕。點進去會彈出一個專屬的請假系統網頁，請假資料會自動跟打卡紀錄與薪資計算模組連動。老闆您在後台一鍵就能看到。這個高階擴充模組，我算老客戶優惠，只收您 15,000 元的設定費，如何？」

這就是軟體業最賺錢的「加值擴充服務 (Upsell)」商業模式。 只要客戶習慣了你的圖文選單入口，你就可以無限地把新的功能模組 (點餐、集點、客服) 綁定上去賣給他。

打好這層完美的門面基礎後，下一章，我們將正式進入後端引擎的最後整備！