距離上次發文已經間隔兩個月了,其實一直都有東西可以寫可是卻總是沒有時間寫出來(找藉口),所以趁過年前來多多少少還一些技術債…
在12月底某一天,莫名的被通知我們進了『第三屆華南金控金融科技創新競賽』複賽(350組取40組),然後距離deadline只剩一個禮拜。沒錯,就是那個只有7天,也就是不吃飯不睡覺不上課也只有168小時的一個禮拜……
橫豎都是一刀,咱們就來硬著頭皮做吧…所以我們的作品就在168小時內『哩聽無某-華南聲控助理』誕生了,這是一個使用dialogflow + google speech recognition的line chatbot,可以透過語音訊息和chatbot取得你所需要的相關資訊……不過今天不是要來講這個,詳細的內容之後會整理完放在github。
今天要來分享的是透過如何利用line message api製作客製化,製作類似表格的回覆訊息。
Line可以回覆不同種的訊息給使用者,像是文字訊息、貼圖訊息、語音訊息……,又或是一般使用者無法傳送的樣板格式(Template),樣板的部分Line也提供了幾種格式,分別是: Confirm、Buttons、Carousel、Image carousel……(想知道更多關於line的訊息種類我推薦看這一篇:Day15[Line ChatBot]Messaging types下集,介紹得非常清楚。),此外,Line也提供Flex Messages讓使用者可以根據自己的需求客製化出不同的訊息格式,如下圖取自Line的document:
其實,Flex Messages還可以做成表格狀的形式,下圖取自中信chatbot和我們這次參加華南競賽所製作的chatbot,每一個都是一個按鈕,按下後可以選擇發送文字訊息或是開啟超連結:
[gallery ids=”2643,2644” type=”rectangular”]
當初我也不知道可以做成這樣,是因為我本身有在使用中信的chatbot,發現有這種種類的回覆訊息格式後才去研究的。
設計概念其實跟Android UI的XML設計概念很類似,你必須一層一層的由外到內定義排列方式和對應的物件個數,比方說,我想要設計一個2x2的回覆訊息,
- 從最外面看的話你會有兩列,所以你最外層的排列方式就要是vertical,並且裡面包含了兩個Component
接下來每一列都會有兩個按鈕,所以每一個Component內都要定義排列方式為
horizontal,並且裡面包含了2個Component
Component是什麼呢?line的官方文檔提供了很多種Component類型,如BoxComponent、SpacerComponent、ImageComponent、TextComponent,看名字就知道是箱型的物件(我是把它想成你訊息格式的骨架)、可以顯示空白(用來對齊、排版)的物件、可以放貼圖和放文字的物件…。
最後想分享一下,line message api的部分在demo code真的做得很好,其實只要看一下官方範例就能很容易的改出屬於自己想要的東西,有興趣的人真的很推薦去研究一下line的github: line-bot-sdk-python
我也將這次華南的custom template放在自己的github上,我是參照demo code去改的,並沒有改得很好,不過如果對於想製作類似回應訊息格式的人或許可以作為一些的參考:line_costumed_reply