Chapter 3: Advanced Line Experience - Implementing a Stunning Punch Card (Flex Message)
If your attendance system only returns a bland "Punch successful" message after an employee clocks in, it looks as unimpressive as a college student's final-year project report. This amateurish interface is absolutely unappealing to paying customers (traditional industry bosses).
Line provides an extremely powerful, almost fetishistic UI feature called Flex Message (Bubble Card). This is a layout language written entirely in pure JSON, allowing you to send "beautiful cards" in the chat room featuring high-resolution images, gradient backgrounds, interactive buttons, and complex grid layouts! The visual quality it presents is nearly equivalent to a native app screen.
🎯 Chapter Objectives
- Familiarize yourself with and master the secret weapon from Line's official toolkit: Flex Message Simulator.
- Use Vibe Prompt's "Code Rendering Technique" to seamlessly convert lengthy JSON into Python code.
- Implement a "Punch Card Information Card" with employee name, punch time, and beautiful design when a user successfully punches in.
🎨 Step 1: Designing the Appearance with the Card Simulator
We absolutely will not use our brains to imagine and manually write those complex JSON brackets—that would be dangerous. Line officially provides an excellent, what-you-see-is-what-you-get web-based drag-and-drop tool.
Please visit Line Flex Message Simulator (Card Simulator).
This is a UI tool designed for non-engineers.
- Click Showcase (Showcase Window) in the top-right corner of the screen.
- You will see a wide variety of high-quality pre-made templates provided by the official team (including electronic receipts, restaurant introductions, event tickets, etc.).
- Find a template you like (for example, a template similar to an invoice receipt).
- Then, in the property panel on the right side, just like in Word, modify the text inside, change the colors to your desired palette, and even replace the images with your company's punch card system Logo.
When the preview on the left side of the screen is 100% satisfactory, click the </> View JSON button in the top-right corner. You will get a long string of JSON code, possibly up to 100 lines. Please copy and save this entire code snippet!
🪄 Step 2: Ask AI to Convert JSON into a Python Function
If you were to paste that long, stinky, quote-laden JSON string directly into your main.py file in FastAPI, your code would become extremely bloated and difficult to maintain. Although Line Bot SDK provides various Python classes (such as FlexSendMessage, BubbleContainer, BoxComponent) to assemble cards, the way of writing is quite cumbersome.
This is when the most intelligent and elegant approach is: Let AI be your translator! Feed the JSON into a dictionary (Dictionary) and let it do the work!
🔥【Vibe Prompt Combat Spell】
I am developing a Python Line Bot.Please look at the following JSON that I copied from the Flex Simulator:(Paste your 100-line JSON code here)
Please write a standalone Python function: def create_punch_card(user_name: str, punch_time: str, status: str):The responsibilities of this function are:1. Place the above JSON string into a Python dict variable (named bubble_dict).2. Replace the hardcoded "Employee Name" in the dict with the user_name variable passed in, and "Punch Time" with punch_time.3. Use line-bot-sdk v3's FlexMessage class to convert this dict into a FlexMessage object and return it.4. (Important) Set alt_text to "You have a new punch card record!"
AI will immediately translate that rigid JSON into a clean Python function with dynamic variables. This technique is incredibly powerful!
from linebot.v3.messaging import FlexMessage
def create_punch_card(user_name: str, punch_time: str, status: str):
# AI helped convert the long JSON into a clean Python Dictionary
bubble_dict = {
"type": "bubble",
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{ "type": "text", "text": f"Punch successful {status} ✅", "weight": "bold", "size": "xl", "color": "#1DB446" },
{ "type": "text", "text": f"Employee Name: {user_name}", "margin": "md" },
{ "type": "text", "text": f"Record Time: {punch_time}", "color": "#888888" }
]
}
}
# Wrap the dict into a FlexMessage object that the Line server can understand
return FlexMessage(
alt_text="You have a new punch card record!",
contents=bubble_dict
)
🚀 Step 3: Launch This Card in the Webhook!
Return to your main.py file where the message-handling Webhook function is located. Replace the previously boring text-only (TextMessage) response with a call to the super-cool card-generating function you just created!
from your_module import create_punch_card # Assuming you wrote it in a separate file
@handler.add(MessageEvent, message=TextMessageContent)
def handle_message(event):
# ...the logic for inserting data into Supabase database earlier...
# 1. Call our card generator and pass in real dynamic data
import datetime
current_time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
flex_msg = create_punch_card(
user_name="Wang Xiaoming (Test User)",
punch_time=current_time,
status="[Clocking In]"
)
# 2. Reply with this beautiful Flex card to the mobile device
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] # Note that we replaced it with flex_msg
)
)
💼 [Business Application Scenario] Using Alt Text to Increase Open Rates
In the code above, have you noticed the setting alt_text="You have a new punch card record!"?
This is a very important marketing detail.
When your Line Bot pushes this Flex card to users, if the user's phone is still on the lock screen (Lock Screen), or in the chat list, since Line cannot display the entire card in those places, it will show this alt_text string as a substitute.
If you casually write something like alt_text="flex message", the customer's phone push notification will display "The bot sent a flex message", which looks extremely like a scam, and the customer won't even want to click it.
Be sure to write alt_text with compelling copy that creates suspense or incites clicking desire! This will significantly improve the quality of your enterprise-grade product.
✅ Chapter Summary
After mastering Flex Messages, your Line Bot instantly upgrades from a "cold, text-based chatbot" to a "brand-soul enterprise-grade App". However! You probably feel that every time you change a small piece of code or a card color, you have to redeploy and upload to the Render server to test on your phone, which is an extremely painful and lengthy wait! This completely violates the spirit of Vibe Coding's rapid development.
In the next chapter, we will introduce the most widely acclaimed development life-saving tool across the entire internet: ngrok (Local Tunnel), allowing you to modify your code, hit save, and have your phone take effect within one second!
🔗 Transition to Next Chapter: ngrok - The Ultimate Local Development Accelerator
In the previous chapter, we successfully transformed a basic text-based punch card system into a visually stunning, enterprise-grade Flex Message experience. However, we also encountered a significant pain point: every code modification required redeploying to a cloud server, resulting in frustratingly long feedback cycles that hinder rapid iteration and creative experimentation.
The next chapter introduces ngrok, a revolutionary tool that creates secure tunnels from public URLs to your local development environment. This powerful technology eliminates the need for constant cloud deployments during development, allowing you to test changes instantly on your mobile device with just a single save operation. We'll explore how to set up ngrok with your FastAPI application, configure webhook URLs dynamically, and leverage its inspection features to debug HTTP requests in real-time.
By mastering ngrok integration, you'll unlock a development workflow that mirrors professional enterprise practices while maintaining the rapid iteration speed essential for Vibe Coding methodology. This combination of professional-grade tools and agile development techniques will position you to build production-ready Line Bots that can scale from prototype to enterprise deployment seamlessly.
The skills you'll acquire in this chapter—local tunnel configuration, real-time webhook testing, and dynamic URL management—are fundamental to modern API development workflows. These techniques extend far beyond Line Bot development, applying equally to any web service requiring external service integration or third-party webhook testing.
As we conclude this course, you'll have mastered not just the technical implementation of sophisticated Line Bot features, but also the development methodologies and tools that distinguish professional developers from hobbyists. The journey from basic text responses to dynamic Flex Messages, combined with rapid local testing capabilities, represents the complete toolkit needed to build commercially viable, enterprise-grade messaging applications.
In the final section, we'll provide a comprehensive roadmap for applying these skills to real-world commercial projects, including deployment strategies, monitoring best practices, and scaling considerations that will serve as your foundation for building the next generation of interactive messaging experiences.