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。