iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
AI & Data

我不太懂 AI,可是我會一點 Python 和 Azure系列 第 6

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
  1. 依需求編輯或增減 components
  2. 編輯完成後,可點選View as JSON,複製內容,存成JSON

Components 零件

以下稍微介紹 Flex message 內的零件:

  • Box: 用來乘載其他零件
  • Button: 可以用來觸發某些動作的按鈕,例如:前往某一網站或產生訊息
  • Image: 影像連結
  • Icon: icon連結
  • Text: 單一字串,可控制字體字型
  • Span: 可將不同字體字型的字串放在一行內
  • Separator: 分隔線
  • Filler: 產生空間,通常用來排版

Send Flex Message

  • PythonJSON檔,依情境修改內容,透過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。


上一篇
Day 05 Line Massaging API- 打造自己的 Chatbot
下一篇
Day 07 Azure cognitive service- 於是,Chatbot 也有了智慧
系列文
我不太懂 AI,可是我會一點 Python 和 Azure30

尚未有邦友留言

立即登入留言