iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
0
Software Development

LINE bot 好好玩 30 天玩轉 LINE API系列 第 5

[30 天教你如何玩弄 Line bot API] 第 5 天:教你怎麼嘴最舒服!- Template message

  • 分享至 

  • xImage
  •  

本文同步刊載於 Clarence 部落格:[LINE bot 好好玩 30 天玩轉 LINE API] 第 5 天:什麼回應方法都難不倒我!- Template message

今天來介紹 Template message,這種互動框是只有機器人才有辦法使用的特別 Message 與昨天說明的那些 message type 是完全不同的東西,它其實可以讓使用者感覺有更多的互動,並且讓大家更想使用 Bot 。

Template message

在最近大家開始變得不太使用 Template message 了,因為使用 Template message 在電腦上面會顯示請至智慧手機上確認訊息內容(如下圖),使用者體驗其實不太好,而使用 Flex Message 其實也可以做到長得差不多的 UI,因此現在使用 Template message 的人不太多了。

https://ithelp.ithome.com.tw/upload/images/20190920/20117701fSVUhUukqa.png

Buttons template

如下為 Buttons template Sample

https://ithelp.ithome.com.tw/upload/images/20190920/20117701LOUZdOOEzi.jpg

  • type: 定義此 message 的屬性
  • altText: 使用者收到通知出現的字樣
  • thumbnailImageUrl: 圖片網址
  • imageAspectRatio: 圖片比例有兩種,預設為 rectangle
    • rectangle: 1.51:1
    • square: 1:1
  • imageSize: 圖片大小有兩種,預設為 cover
    • cover:圖像填充整個圖像區域。
    • contain:整個圖像顯示在圖像區域中。
  • imageBackgroundColor: 圖像的背景顏色配合 imageSize 的 contain
  • title: 標題顯示的文字
  • text: 標題內容的文字
  • defaultAction: 預設功能,簡單來說就是點擊其他不是 button 區域的時候會做什麼
  • actions: 決定下面 button 幾個以及分別的功能

在這邊有幾個比較特別的 type 分別是 postback、message 與 uri

以下的 postback 在使用者按下的時候可以用 event postback 接收這個資訊來做後續處理,在後面章節會介紹怎麼處理 postback event

{
  type: 'postback',
  label: 'Buy',
  data: 'action=buy&itemid=123',
}

以下的 message 代表使用者按下去會自動變成輸入文字模式,而 label 通常與 text 設定一樣就可以了

{
  type: 'message',
  label: 'it 邦幫忙鐵人賽',
  text: 'it 邦幫忙鐵人賽',
}

以下的 uri 代表使用者按下後會導入 webview

{
  type: 'uri',
  label: 'View detail',
  uri: 'https://ithelp.ithome.com.tw/2020ironman',
}

完整程式碼

Confirm template

以下為 Confirm template 的範例,基本上用法是當你只有兩個選擇的時候使用它

  • 要 or 不要
  • 是 or 不是

它最多只有兩個選項,這個地方要注意一下

https://ithelp.ithome.com.tw/upload/images/20190920/20117701tTXdSVGKM2.jpg

完整程式碼

Carousel template

Carousel template 是一種多個 Buttons template 的集合,如果希望做一個左右滑的 Buttons template 就可以用 Carousel template。

https://ithelp.ithome.com.tw/upload/images/20190920/20117701Kbihq70B01.jpg

完整程式碼

Image carousel template

大圖示顯示圖片的方法,如果只想要一張圖片直接讓 columns 存在一個就可以了!

https://ithelp.ithome.com.tw/upload/images/20190920/20117701rgYe7VXeHB.jpg

完整程式碼

詳細說明文件

如果想要看更詳細的介紹可以看官方文件

總結

基本上 Template message 已經可以完成許多對話視窗的使用者行為了,不過美中不足就是電腦版沒有辦法顯示,所以明天我們就來介紹 Flex Message 把這個美中不足解決掉!!!


工商時間

團隊系列文

CSScoke - 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎
King Tzeng - IoT沒那麼難!新手用JavaScript入門做自己的玩具~
Hina Hina - 陣列大亂鬥
阿斬 - Python 程式交易 30 天新手入門
塔塔默 - 用Python開發的網頁不能放到Github上?Lektor說可以!!
Vita Ora - 好 Js 不學嗎 !? JavaScript 入門中的入門。


上一篇
[30 天教你如何玩弄 Line bot API] 第 4 天:教你怎麼嘴最舒服!- 一般嘴法
下一篇
[30 天教你如何玩弄 Line bot API] 第 6 天:教你怎麼嘴最舒服!- Flex Message
系列文
LINE bot 好好玩 30 天玩轉 LINE API30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言