# 輔助開發 LINE Flex 訊息的工具

大家好,我是做出「LINE 數位版名片」的 LINE API 專家均民。

在開發 LINE Flex 訊息的時候,透過官方 Flex Message Simulator (opens new window) 看到的結果,不一定跟手機上面顯示的相同,如果你想要在手機上面看到顯示結果,你可以考慮使用本文要分享的小工具喔!

本文會教你建立一個聊天機器人,只要你使用桌面版的 LINE 對它送出 JSON 字串,它就會嘗試使用 replyMessage 把資料送出,你就可以在手機版 iOS 和 Android 的 LINE 上面看到顯示結果!

廢話不多說,馬上試用看看吧!

(opens new window)

加入好友: https://liff.line.me/1645278921-kWRPP32q/?accountId=736cebrk (opens new window)

由於後端採用 Google Cloud Function,為了避免用量過高被收錢,所以有鎖執行上限,如果無回應的話,可以考慮建立自己專用的機器人或是重新傳送訊息試試喔!

# 直接把 Message 回傳

加入聊天機器人好友後,請傳送以下的訊息:

{
  "type": "text",
  "text": "Hello world"
}

然後機器人應該就會直接回應一個純文字訊息:

同時你也可以在手機中看到結果:

Android iOS

接下來我們來測試直接從 Flex Message Simulator (opens new window) 複製下來的輸出:

Android iOS

# 顯示收到的 Event

如果你對它傳送其他內容,它就會把 Event 用 JSON 回傳喔!

# 原始碼

https://github.com/taichunmin/gcf-line-devbot (opens new window)

為了要節省後端伺服器的費用,所以這個聊天機器人是直接放在 Google Cloud Function 上面的,如果大家想要自己依樣畫葫蘆建立一個自己使用的機器人,你可以把這個原始碼的 index.jspackage.json 放到 Cloud Function 上面就行囉!

1 2

把程式放到 Cloud Function 上面以後,它就會給你一個 HTTPS 的網址,你就要去 LINE Developer Console 裡面把這個網址設定到 Webhook:

記得要在 webhook 後面加上自己機器人的 Access Token 喔!

# 後記

這是受到卡米哥 (opens new window)啟發而寫出來的工具,至於為什麼需要特別查看每個平台的顯示結果呢?因為有時候你會發現顯示出來的內容會有差異:

Android iOS

有發現哪裡不太對勁嗎?大家來找碴吧!

# 相關連結

TIP

本文範例程式的原始碼授權為 MIT License。