2017年1月24日 星期二

關於LineBot(8) - 發送Template Message

LineBot傳送訊息的形式,除了單純的文字、貼圖、圖片之外,還有一個比較特別的形式,稱之為Template Message,這種形式的訊息本質上是一個選單,長得像是底下這樣:

上面這個是三種Template Message中的一種形式,稱為Buttons Template Message,另外兩種形式是Confirm Template Message(下圖左)與Carousel Template Message(下圖右):

Confirm Template Message好理解,基本上它就是一個確認(confirm)對話框,可以讓用戶選擇Yes/No之類的回答。而Carousel Template Message其實就是多個Buttons Template Message,橫著擺可以左右scroll。

我們先從Buttons Template Message開始看起。

關於Buttons Template Message

我們剛才說過,Buttons Template Message這種形式的訊息本質上是一個選單,包含著一張圖片(下圖1)、一個標題(下圖2)、以及一些文字(下圖3),並且可以設置1-4個選項(下圖4-6,範例中我們只設置了3個):

當你的Bot送出這個訊息給用戶,用戶可以點選底下的選項(上圖4-6的文字),這些選項被稱為Action,這Action也有三種不同的類型,分別是:

  1. MessageAction : 幫用戶說一段指定的文字訊息
  2. UriAction : 直接在Line裡面開啟指定的網頁
  3. PostbackAction : 觸發一個可以你的WebHook收到參數的postback

其中UriAction最容易理解,用戶點選該Action,Line就會直接開啟某個網頁。

而MessageAction可以用來幹嘛? 它可以讓你幫用戶說特定的話,實務上應用時,你可以透過這個機制先設計好一些固定的指令,讓WebHook看到這個指令就能進行相對應的工作(其功能等同於用戶在對話框中說了這個指令)。

而postback則是不出現任何訊息,直接把特定參數傳給WebHook,WebHook就可以進行特定工作。

讓LineBot發送Buttons Template Message

我們看底下這段程式碼,它的功能就是讓LineBot發送Button Template Message:

你會看到我們先在第2-8行建立三個Action(因為是範例,因此每一種一個)。第一個是MessageAction,當用戶點選『點選這邊等同用戶直接輸入某訊息』,Line就會『幫』用戶說『/例如這樣』:

而『點這邊開啟網頁』這個選項則很單純,當用戶點選上圖中該action,就會自動開啟Google首頁。

而上圖中最後一個action,被點選時,WebHook會收到一個postback event,其JSON內容類似像底下這樣:

{"events":[{"type":"postback","replyToken":"d7aooxxo154c6d94oo01xx28coxoxfd04","source":{"userId":"U8x2788OOXX53422082e301b80xb00030","type":"user"},"timestamp":1485251255286,"postback":{"data":"abc=aaa&def=111"}}]}

留意其中的data,就是我們在上面程式碼第8行中指定的postback data,當你的WebHook收到上面這樣的指令,就可以進行相對應的工作。

OK,瞭解了Actions之後,我們繼續回頭看上面的程式碼,我們在第11行建立一個ButtonsTemplate。留意一下第13行的altText,因為並非每一種device都可以顯示Template Message,因此,你可以設定替代文字,這會被用於無法顯示Template Message的場合(例如PC版的Line、手機板的Line訊息預覽畫面、手機的Notification通知畫面…etc.)。

而14,15兩行是標題,這沒什麼,17行則是提供一張大圖的url,Template Message會將你指定的圖顯示出來。程式碼的最後,我們把前面建立好的三個Actions丟給ButtonTemplate物件,然後透過PushMessage指令送出,done.

此範例原始程式碼位於 : https://github.com/isdaviddong/LineBotSdkExample/blob/master/LineBotSdkExample/WebFormExample.aspx.cs

--------------------------------------------
相關課程: http://www.studyhost.tw/NewCourses
如果需要即時取得更多相關訊息,可按這裡加入FB專頁。若這篇文章對您有所幫助,請幫我們分享出去,謝謝您的支持。

12 則留言:

wei wei 提到...

請問CarouselTemplate Message有範例嗎

isDavid 提到...

@WEI,
https://github.com/isdaviddong/LinePushButtonsTemplateExample
可以先看上面這個,很類似

steven 張 提到...
作者已經移除這則留言。
匿名 提到...

請問 Template Message,若我不要設定圖片連結
不要顯示圖片,只要文字就好,要如何設定?
謝謝

阿豪 提到...

你好,
想請問,可以取得傳送訊息用戶的頭像和ID嗎?

isDavid 提到...

可以啊

Karen Jian 提到...
作者已經移除這則留言。
Karen Jian 提到...

請問,LINE有simulator可以local測試嗎? 還是只能把程式publish到正式的web hook線上debug?

isDavid 提到...

@Karen Jian,

只能publish上去...沒有local的模擬器可以玩...

阿麥 提到...

您好:

感謝您的分享與教學,想請問我使用CarouseTemplate Message供使用者點選,其中的一個選項點選後必須開啟手機內建browser連接URI,請問是可行的嗎?

嚕喵Youtuber派對 呼 提到...

請問,LINE有simulator可以local測試嗎:
我是用pycharm+ngrok 就可以測試了
可以參考這篇:
https://github.com/twtrubiks/line-bot-tutorial

isDavid 提到...

測試指的是單步執行和偵錯吧,其實.net developer如果用azure,完全不需要其他的模擬器,也不用把遠端的WebAPI導回localhost,你可以直接在visual studio開發環境中,遠端偵錯一個真實運行的網站...

關鍵字是... visual studio remote debugger
過陣子我再找時間說明一下這部分...