Using Flex Message to create World Cup LINE Bot
I’ve released my very first blog about how to use LINE Flex Message to create World Cup Chat Bot 3days ago in Thai.
หลังจาก LINE เปิดตัว Flex Message มาได้สักพัก แต่ผมก็ยังไม่มีโอกาสได้ลองเล่นเสียที…medium.com
Then some friends asked me to write it again in English. And This blog is my responsibility to that lovely requests.
After LINE released Flex Message API many weeks ago, It’s my challenge to try and learn about this very interesting things. And then, World Cup’s coming, I thought that it’s a perfect case study to see how complexity Flex Message can support.
For who not yet familiar with LINE Flex Message. Please take a short introduction here.
curl -v -X POST https://api.line.me/v2/bot/message/push \ -H 'Content-Type:application/json' \ -H 'Authorization…developers.line.me
Then, Let’s see how great is it.
First Flex Message (Welcome Screen)
First of all, I started with very basic Flex Bubble components. I designed a welcome message with 4 menu button and 1 additional LIVE button when a match being lived.
- header : “FIFA World Cup 2018” Text
- hero : FIFA World Cup Image
- body : contains 2 parts
1. Live Score (button) and
2. Last Match / Next Match / Schedule / Table Menu (button)
- footer : View Source (button) to see JSON source of this Flex Message
Once you click on “View Source” button you can see raw JSON source of this message like below.
You can simulate this JSON data and see instant result in Flex Message Simulator. (https://developers.line.me/console/fx/)
Group Table Screen
Then I designed a bit more detail screen using Carousel Flex Message (1 group per bubble) and each bubble contains
- header : Group Name
- hero : Not use
- body : contains 3 parts nested in vertical box
1. Table Header (text in horizontal box)
2. Table Separator (separator)
3. Team info (text+icon in horizontal box)
- footer : Schedule Menu (button) and View Source (button)
I use this component to display Last Match, Next Match and Live Match menu. I designed to use Carousel Flex Message (1 Match per Bubble) and each bubble contains
- header : Not use
- hero : Not use
- body : contains 4 parts
1. minutes or status of match (text)
2. match result (horizontal box)
3. scorer (icon + text in horizontal box nested in vertical box)
4. yellow/red card (icon + text in horizontal box nested in vertical box)
- footer : contains 3 parts
1. group and date time (separator + box)
2. Head 2 Head , Statistics (button)
3. View Source (button)
It seems that it’s not necessarily to use all 4 boxes (header, hero, body, footer) in a bubble. This example use only body and footer. In fact only 1 box is required.
I try to use Flex Message in very complex message to find out what’s limitation of it. And then I found that it’s very impress me.
(You can see source code of these messages with link below)
Statistics Screen : https://gist.github.com/kamnan43/1b7d6a4d61fbcc247f425864073892a3
Head to Head Screen: https://gist.github.com/kamnan43/81a35c18d7fe42489890faa10580b423
Schedule Screen : https://gist.github.com/kamnan43/f5ecc9b03cdd2accca8ac7358aaedb42
I’ve made a chat bot with these above contents. Let’s find out how its work.
After a short period experiment, I think Flex Message have both pros and cons, description below.
- Absolutely, Flex Message beyond old style LINE bot message. It can make more impressive UI, and can adapt to use in more use case.
- Flex Message structure is similar to nested HTML elements. So it’s easy to understand for web developers.
- Using “flex” property, made it easy to adjust proportions between components.
- There’re many properties you can apply to your component such as size, colour, margin, style etc.
- Even my chat bot using very complex message, but it still not exceed LINE API limitation(10kb for Bubble, 50kb for Carousel). So it’s enough to create more complex message.
- Display area is insufficient when using more complex detail. May be, you have to considered using LIFF instead .(https://medium.com/linedevth/introduction-to-liff-7d708e2f42ec).
- I try to find out more cons, but I can’t. 👍👍👍
My opinion come from my 2–3 days experiment and I’d like to see other opinions about this thing, If you have any interesting use case, don’t hesitate to share them.
See you next time, Thank you
- FIFA World Cup text and FIFA World Cup picture use in this blog/bot is properties of FIFA.
- This blog/bot was created for education purpose only. ^-^