LINE DEV DAY 2019 - Let’s experience super smart city leveraging LINE API

大家好,我是卡米哥,LINE 官方認證的 API 專家,LINE API Expert。目前在維護知名 Node.js 聊天機器人框架 Bottender

身為 LINE API Expert 的我,受邀參加 LINE DEVELOPER DAY 2019,這是 LINE 每年都會舉辦的開發者大會,發表 LINE 所研發以及使用的技術,這麼棒的研討會,當然不能只有我聽到。

本文不是講座翻譯,為了讓大家理解,除了幾個重要的專有名詞之外,我會避免使用專有名詞,增加說明和省略細節。

這場議程的講者 Kazuki Nakajima 是受到 LINE 的邀請而來。講者來自一家開發聊天機器人的公司 Bot Express。他們做了一個同名的聊天機器人框架 bot-express。身為聊天機器人框架 Bottender 以及 Kamigo 的開發者我,當然就深深地被這場議程所吸引。

講者想要解決的問題

這場議程在介紹講者使用 Bot Express 所製作的一個 LINE Bot 專案,目標是讓一般民眾能透過 LINE Bot 來辦理住民票的申請,讓公務員也能透過操作後台來與一般民眾溝通,如下圖所示。比較可惜的是這場議程的投影片似乎沒有公開,所以我只能放現場拍攝的照片。

系統操作流程

講者一開始直接就進行了 Live Demo,畫面上看到的網頁是公務人員的操作後台,而手機畫面則是用戶視角。講者正在操作手上的手機來進行 Live Demo。在這裡可以注意到一個 UX 設計,講者使用 Quick Reply 來製作選擇題介面。

但緊接著顯示的,是疑似 Button Template 或 Flex Message 的按鈕以及 Quick Reply。

大家在這裡可以想一下按鈕與 quick reply 的差異,為什麼講者不直接使用 quick reply 就好,而是要多顯示一個按鈕呢?讓我們先看看按鈕按下後發生了什麼事?按鈕點擊後,是以 LIFF 開啟一個表單填寫頁面。

這個 LIFF 表單呈現的是一個複選題,我們可以把一個複選的選擇題看成是很多個是非題。從這裡可以看出 LIFF 非常適合用來做複選題,他能夠有效的降低使用者的操作次數。

至於為什麼講者選擇用 Flex Message 來呈現按鈕,而不是採用 Quick Reply 來呈現按鈕呢?我猜測有可能是因為 Quick Reply 的特性是點擊後消失,但 Flex Message 點擊後不會消失。講者可能是希望讓用戶能有點擊一次以上的機會。

因為住民票申請是需要付款才能完成的,所以在用戶填寫完所有訊息後,送出申請前,有必要請用戶確認以上填寫內容是否正確。

用戶按下申請則進入付款流程,首先是選擇付款方式。

講者選擇使用 LINE Pay 支付。

支付完成後,看到領收書,聽說領收書就是日本的發票的意思。

至此,用戶視角就結束了,而在公務員後台上就會看到有一個申請在等待審核。

員在後台查看細節後,如果認為資料不齊全,可以提出修正,在這個後台是直接將住民票申請單從「受付」拖曳至「修正」,系統將會透過 LINE Bot 發送 Push Message 聯絡該用戶。

在這裡講者巧妙地使用 Quick Reply 來做資料修正流程,如下圖:

將用戶上次填入的內容植入 Quick Reply,當用戶不需要修改此項目時,就可以直接以點選的方式輸入。

修正送出後,住民票申請就會回到「受付」,這次示範的是審核通過的情境。

用戶立即就收到申請成功的通知。

講者緊接者示範的是申請被取消的退款流程,當公務員從後台操作退款,用戶立即收到退款通知。

這就是全部的操作流程了。

接下來展示的是 NLU 的支援,講者用語音輸入文字的方式詢問一個問題,而 LINE Bot 回應了這個問題,並且使用 Quick Reply 引導用戶進行後續的操作。其背後是串接了 Google 的 DialogFlow

聊天機器人框架 bot-express

bot-express 的框架包含5大模組,分別為:Skill、Context、NLU、Logger 以及 DB。這裡是介面設計的部分,為了保持將來與各種不同服務串接的彈性。

講者針對 Skill 做了較深入的解說。

每個 Skill 是由 Begin Function、Finish Function 以及數個 Parameter 所組成,它是一個使用者操作流程,有一個明確的進入點和結束點。講者接著針對 Parameter 繼續解說。

Parameter 有很多種可能性,甚至可以是另一個 Skill,在這裡實作來應對各種情況。同時這些 Parameter 也提供了與 salesforce 串接的機制。

整場議程就講到這裡。

我對 bot-express 很好奇,於是我去看了它的 GitHub 原始碼以及它的相關文件。我發現到它其實沒有文件,也就是我必須要從原始碼看起。我簡單看了一下之後發現它的資料夾結構設計與議程投影片提及的似乎有落差,在不確定是 code 比較新,還是投影片比較新的情況下,我就決定就不繼續看下去了。

我認為

這場議程展示了 LINE Bot 如何完美地與 salesforce 做整合,並且以「住民票申請」作為實際案例,在各處都能看出開發者的對於用戶體驗的用心,大家可以將注意力放在他如何結合各種 LINE Messaging API 來提升用戶體驗。不過如果要我給 bot-express 一個評價的話,我會說:

沒有文件的框架,根本沒有試用的必要

身為 Bottender 以及 Kamigo 兩個框架的開發者,在進行了一連串的開發者訪談後,我們發現到文件對於開發者來說,實在是太重要了!如果框架實作某個功能卻沒有寫在文件上,根本沒有人知道怎麼使用,那其實就跟沒有實作功能一樣!

我們投入了大量人力在文件上,提供各種程式碼片段以及整隻寫好的聊天機器人範例,讓開發者可以直接打包帶回家。我們希望文件補到最後能讓開發者直接參考我們的文件就能做出東西,而不需要到處去查看各個通訊軟體所提供的文件,雖然這是個很遙遠的夢想,但我們正扎扎實實地往目標前進。

請容我在此向各位推薦聊天機器人框架 Bottender 以及 Kamigo

聊天機器人框架 Bottender

Bottender 是由 Yoctol 優拓資訊所開發的聊天機器人框架,使用 JavaScript 程式語言,可同時支援 Messenger、LINE、Telegram、Slack、Viber 等通訊軟體;提供良好的設計模式,給開發者高度彈性來設計自己的程式碼結構;提供各種場景的程式範例給開發者直接複製貼上。從建立專案、開發專案、發布專案到除錯專案,我們都做了不少功夫,讓你能將所有心力放在聊天機器人的核心功能上。

https://bottender.js.org/

聊天機器人框架 Kamigo

Kamigo 是由我所開發的聊天機器人框架,使用 Ruby 程式語言,架構在 Rails 之上,目前僅支援 LINE 通訊軟體。Kamigo 融入 Rails 文化,與 Rails 緊密結合,將聊天機器人開發與網站開發視為同構,所以你可以使用 Kamigo 同時開發出聊天機器人以及網站,共用 Controller 和 Model,只需要寫兩種 View 就能做出。Kamigo 針對 Flex Message 以及 LIFF 做優化,讓你可以快速開發出大量使用 Flex Message 以及 LIFF 的 LINE Bot。

https://github.com/etrex/kamigo

參考連結

LINE DEV DAY Session
講者公司網站
bot-express
Bottender
Kamigo

在追求真理的道路上

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store