2018年9月16日 星期日

使用C#開發Linebot(27) - 在發送的訊息中加上Quick Reply

LINE在2018/7月底推出了Quick Reply機制,他可以讓使用者可以更輕鬆的回覆Line bot所發送的問題,官方細節你可以參可底下連結:
https://developers.line.me/en/news/2018/07/31

過去,我們要讓用戶回答Line bot的某個問題,除了透過自然語言(讓用戶隨意打)的方式,就是透過Template Message,讓line bot跳出一整塊大面積的選單訊息,像是:

但這樣的Tempalte Message佔用了很大一塊版面,每塊卻又只能最多放四個選項,有些時候顯得大而無當。特別是若你其實只是要用戶選擇一個簡單的答案時,根本不需要像上面這樣的Template Message又是大圖又是標題的。

這時,你可以採用底下這樣的QuickReply來解決:

Quick Reply 就是上圖Menu上方的小小選項(Action),最多可以出現13個Action,並且支援postback, message, datetime picker, camera, camera roll等各種action。

要實現這樣的功能很簡單,請參考底下這樣的程式碼:

過去我們在發送訊息的時候,也是採用PushMessage,而為了支援QuickReply的功能,我們額外建立了一個TextMessage類別(第2行),你可以直接建立該物件,並指定要顯示的訊息。

接著,透過該物件的quickReply屬性,你可以在items集合中以Add方法加入想要新增的QuickReply item。

在上面例子中,我們新增了三個都是一般的QuickReplyMessageAction,該action的行為如同先前介紹過在TemplateMessage中的MessageAction一般,就是顯示一個標題,執行結果如下:

圖示則是第三個參數 new Uri(…)所指定的,別忘了必須是https並且為.png格式。

如此一來,用戶就可以直接點選上面的『特休』、『事假』、『病假』其中之一。點選時的行為就等同於用戶說了『特休』、『事假』、『病假』這幾個字一般,這就是QuickReplyMessageAction所呈現的功能。

而更精彩的是,除了QuickReplyMessageAction之外,前面提到過,還有可以讓用戶直接選擇時間日期的QuickReplyDatetimePickerAction,支援地圖位置選擇的QuickReplyLocationAction,支援相機的QuickReplyCameraAction與QuickReplyCamerarollAction…,這些功能可以讓你的Line bot,直接要求用戶提供座標位置、照片、輸入時間日期…等,像是:

如此一來,就不用全部仰賴自然語言輸入了,不錯吧,快試試看囉…

要透過LineBotSDK使用此功能,別忘了要升級到 0.8.2以上的版本唷。更詳細的教學影片請參考我們的線上課程囉。

------------------
LineBotSDK:https://www.nuget.org/packages/LineBotSDK
相關課程:http://www.studyhost.tw/NewCourses/LineBot
線上課程:https://www.udemy.com/line-bot/
更多內容,請參考電子書:https://www.pubu.com.tw/ebook/103305
LINE Bot實體書籍:https://www.tenlong.com.tw/products/9789865020354
如果需要即時取得更多相關訊息,可按這裡加入FB專頁。若這篇文章對您有所幫助,請幫我們分享出去,謝謝您的支持。

2018年9月7日 星期五

使用C#開發Linebot(26) - 利用ngrok讓你的Line bot可以使用localhost作為WebHook

過去,我們大多是建議開發人員直接將asp.net WebApi所撰寫的WebHook佈署到IIS或Azure Web Site站台上去測試,勤快一點寫寫Log和try…catch,大致上基本的除錯也都能處理,但碰到真的需要設定中斷點單步執行或除錯的時候,也只能使用『遠端偵錯』這個殺手鐧了。

但無奈遠端偵錯的速度實在不快,碰到比較複雜的程式碼,跑起來需要不少的初始時間。沒有其他的辦法嗎?

其實是有的,坊間有一個可以把localhost轉成網際網路上特定endpoint的工具,稱為ngrok。

你只要從底下網址下載這個工具即可:
https://ngrok.com/download

下載回來解壓縮後,其實只有一個小小的.exe檔案:

它是一個命令列工具,你只需要將你透過Visual Studio開發好的asp.net web API運行起來,然後執行底下這樣的指令:
ngrok http 31217 -host-header="localhost:31217"

畫面上會出現類似底下的內容:

這表示,ngrok已經幫你把 http://c5bfcbb9.ngrok.io 這個位址的所有往來封包轉向到你的 localhost:31217 這個位置,如此一來,我們只需要在Line bot後台輸入WebHook的地方,將底下這樣的url作為WebHook位置即可:


http://c5bfcbb9.ngrok.io/api/{你的route}

你會發現,Line bot所接收到的所有訊息,如今會轉傳到你的localhost:31217的應用程式中,你可以大方的在本機電腦上測試WebHook,甚至設置中斷點了。

不錯吧?

ngrok是一個好用的測試工具,但如果長時間使用可能不很適合,同時間它也有免費使用的限制,具體的費用可以參考:
https://ngrok.com/pricing

但不管如何,它對於我們的Line bot WebHook測試來說,確實提升了不小的便利性,大夥不妨可以試試看。

-----------
線上課程:https://www.udemy.com/line-bot/
電子書:http://studyhost.blogspot.tw/2017/12/line-bot.html
LineBotSDK:https://www.nuget.org/packages/LineBotSDK
如果需要即時取得更多相關訊息,可按這裡加入FB專頁。若這篇文章對您有所幫助,請幫我們分享出去,謝謝您的支持。

Related Posts Plugin for WordPress, Blogger...

熱門文章