Day 06 Flex message simulator- 美化自己的chatbot

Flex message simulator- 美化自己的chatbot

虽然已经能让 Line chatbot 回话了，但考虑到之後要做的功能，有必要帮 chatbot 回覆的内容美化一下。Flex message 就能做到美化的效果，透过JSON格式编辑版面，可以客制化的互动对话介面，适用於各种电子载体。

Flex Message elements

Flex message 完整的结构，可以视情况选择哪一个部分要放什麽东西，甚至可以省略不需要的部分：

• Header：通常会填上标题。
• Hero：通常会放上图片。
• Body：讯息的主要内容。
• Footer：按钮和连结通常会放在这里。

Flex Message Simulator

1. 进入 https://developers.line.biz/flex-simulator/
2. 使用 LINE 帐号登入
3. 开始编辑Flex Message:

• 点选 Showcase，依照需求选择范本
• 或者，点选New，选择 bubble 或 carousel

4. 依需求编辑或增减 components
5. 编辑完成後，可点选View as JSON，复制内容，存成JSON档

Components 零件

以下稍微介绍 Flex message 内的零件：

• Box: 用来乘载其他零件
• Button: 可以用来触发某些动作的按钮，例如：前往某一网站或产生讯息
• Image: 影像连结
• Icon: icon连结
• Text: 单一字串，可控制字体字型
• Span: 可将不同字体字型的字串放在一行内
• Separator: 分隔线
• Filler: 产生空间，通常用来排版

Send Flex Message

• 用Python读JSON档，依情境修改内容，透过FlexSendMessage送出

• 范例：

with open("templates/detect_result.json", "r") as f_r:
   bubble = json.load(f_r)
f_r.close()
# 依情况更动 components
bubble["body"]["contents"][0]["contents"][0]["text"] = output
bubble["header"]["contents"][0]["contents"][0]["url"] = link
LINE_BOT.reply_message(
   event.reply_token, 
   [
     FlexSendMessage(alt_text="Report", contents=bubble)
     ]
)

有了这工具之後，我们就可以把之後使用 Azure 认知服务的结果包装成 Flex message 发送给使用者了。下一篇重心要再度回到 Azure 身上，开始利用 Azure 打造 chatbot。