第三章：進階 Line 體驗 - 實作精美氣泡卡片 (Flex Message)

如果你的打卡系統，在員工打卡後只會回傳一句乾巴巴的「打卡成功」，這看起來就像是大學生期末報告的作品。這種陽春的介面，是絕對吸引不到付費客戶 (傳統產業老闆) 的。

Line 提供了一種極度強大、甚至可以說是有點變態的 UI 功能，叫做 Flex Message (圖文氣泡卡片)。這是一種用純 JSON 寫成的排版語言，能讓你在聊天室裡面傳送帶有高清圖片、漸層背景、互動按鈕、以及複雜網格排版的「精美卡片」！它呈現出來的質感，幾乎等同於一個原生 App 的畫面。

🎯 本章目標

認識並學會操作 Line 官方的秘密武器：Flex Message Simulator。
使用 Vibe Prompt 的「程式碼轉譯術」，將落落長的 JSON 無痛轉換為 Python 程式碼。
實作當使用者打卡成功時，回傳一張帶有員工姓名、打卡時間與美美設計的「打卡資訊卡」。

🎨 第一步：使用卡片模擬器 (Simulator) 設計外觀

我們絕對不會用腦袋去憑空想像並手寫那些複雜的 JSON 括號，那會出人命的。 Line 官方提供了一個非常棒、所見即所得的網頁版拖曳工具。

請前往 Line Flex Message Simulator (卡片模擬器)。

這是一個專為非工程師設計的 UI 工具。

在畫面的右上角點擊 Showcase (展示櫥窗)。
你可以看到官方提供了非常多種極具質感的現成版型（包含電子收據、餐廳介紹、活動票券等）。
找一個你喜歡的版型（例如類似發票收據的版型）。
然後在畫面右側的屬性面板，像是在用 Word 一樣，去修改裡面的文字、換成你想要的顏色，甚至把圖片換成打卡系統的 Logo。

當你在左邊的預覽畫面，把卡片改到 100% 滿意後，點擊右上角的 </> View JSON 按鈕。你會得到一長串、可能高達 100 行的 JSON 程式碼，請把這段程式碼全部反白複製起來！

![Flex Simulator 操作]([SCREENSHOT_PLACEHOLDER: Line Flex Simulator 的操作畫面截圖，顯示左邊是精美票券卡片，右邊是屬性編輯器，右上角圈出 View JSON 按鈕])

🪄 第二步：請 AI 將 JSON 轉換為 Python 函數

如果你要把這串又臭又長、裡面還包著一堆引號的 JSON 字串，直接貼進 FastAPI 的 main.py 裡面，你的程式碼會變得無比肥大且難以維護。而 Line Bot SDK 雖然提供了各種 Python 類別 (如 FlexSendMessage, BubbleContainer, BoxComponent) 讓你組裝卡片，但那個寫法實在太囉嗦了。

這時候，最聰明、最優雅的做法是：讓 AI 當你的翻譯官！把 JSON 當成字典 (Dictionary) 塞進去！

🔥【Vibe Prompt 實戰咒語】 我正在開發 Python Line Bot。 請看以下這段我從 Flex Simulator 複製拿到的 JSON： (貼上你那 100 行的 JSON 程式碼)

請幫我寫一個獨立的 Python 函數： def create_punch_card(user_name: str, punch_time: str, status: str): 這個函數的職責是： 1. 把上面那串 JSON 放進一個 Python 的 dict 變數中 (命名為 bubble_dict)。 2. 將 dict 裡面原本寫死的 "人員名稱" 換成傳入的 user_name 變數，"打卡時間" 換成 punch_time。 3. 請使用 line-bot-sdk v3 的 FlexMessage 類別，把這包 dict 轉換為 FlexMessage 物件並 return。 4. (重要) alt_text 請設定為 "您有一筆新的打卡紀錄！"

AI 會立刻幫你把死板的 JSON，翻譯成帶有動態變數的 Python 函數。這招非常強大！

from linebot.v3.messaging import FlexMessage

def create_punch_card(user_name: str, punch_time: str, status: str):
    # AI 幫你把長長的 JSON 轉成了乾淨的 Python Dictionary
    bubble_dict = {
      "type": "bubble",
      "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          { "type": "text", "text": f"打卡成功 {status} ✅", "weight": "bold", "size": "xl", "color": "#1DB446" },
          { "type": "text", "text": f"員工姓名：{user_name}", "margin": "md" },
          { "type": "text", "text": f"紀錄時間：{punch_time}", "color": "#888888" }
        ]
      }
    }
    
    # 將 dict 包裝成 Line 伺服器看得懂的 FlexMessage 物件
    return FlexMessage(
        alt_text="您有一筆新的打卡紀錄！", 
        contents=bubble_dict
    )

🚀 第三步：在 Webhook 中發射這張卡片！

回到你 main.py 負責處理訊息的 Webhook 函式，把原本只會回傳無聊純文字 (TextMessage) 的地方，換成呼叫你剛寫好的超炫卡片函數！

from your_module import create_punch_card # 假設你寫在別的檔案

@handler.add(MessageEvent, message=TextMessageContent)
def handle_message(event):
    # ...前面寫入 Supabase 資料庫的邏輯...
    
    # 1. 呼叫我們的卡片產生器，並塞入真實動態資料
    import datetime
    current_time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    
    flex_msg = create_punch_card(
        user_name="王小明 (測試員)", 
        punch_time=current_time,
        status="[上班]"
    )

    # 2. 回傳這張精美的 Flex 卡片給手機端
    with ApiClient(configuration) as api_client:
        line_bot_api = MessagingApi(api_client)
        line_bot_api.reply_message_with_http_info(
            ReplyMessageRequest(
                reply_token=event.reply_token,
                messages=[flex_msg] # 注意這裡換成了 flex_msg
            )
        )

💼 [商業應用場景] 善用 Alt Text 增加開信率

在上面的程式碼中，你有沒有注意到 alt_text="您有一筆新的打卡紀錄！" 這個設定？這是一個非常重要的行銷細節。當你的 Line 機器人推播這張 Flex 卡片給使用者時，如果使用者的手機還在鎖定畫面 (Lock Screen)，或者在聊天列表頁面，由於 Line 無法在那些地方顯示整張卡片，所以它會顯示這串 alt_text 代替。

如果你隨便寫個 alt_text="flex message"，客人的手機推播就會顯示「機器人傳送了 flex message」，這看起來極度像詐騙，客人連點都不會想點。請務必將 alt_text 寫成具有懸念或是能引發點擊慾望的文案！這會大幅提升你企業級產品的質感。

✅ 本章小結

學會 Flex Message 後，你的 Line Bot 瞬間從「冷冰冰的文字機器」升級成了「具備品牌靈魂的企業級 App」。但是！你一定覺得每次改一點點程式、換個卡片顏色，就要重新部署上傳到 Render 伺服器上才能在手機測試，這種漫長的等待實在太痛苦了！這完全違背了 Vibe Coding 的神速精神。

下一章，我們將為你介紹全網公認開發生涯最偉大的救星工具：ngrok (本地端穿透)，讓你修改完程式碼，按下存檔的一秒鐘內，手機立刻生效！