1 of 54

LINE Bot 上的表單驗證、搜尋以及分頁

20191022 卡米哥

2 of 54

卡米哥

  • 「卡米狗」作者
  • 「人人可作卡米狗」作者
  • LINE API Expert
  • 優拓資訊 Senior Software Developer

3 of 54

今天的內容

  • 選單/表單式介面與對話式介面的取捨
  • Kamigo Bot Framework
  • 守護寵物機器人
  • LINE Bot 表單驗證
  • LINE Bot 搜尋
  • LINE Bot 分頁

4 of 54

選單/表單式介面與

對話式介面的取捨

5 of 54

選單/表單式介面

6 of 54

選單/表單式介面的缺點

  • 僅能發布到支援按鈕互動的平台
  • 內容太多就很難以選單呈現
  • YAHOO 網站上也放了 search

7 of 54

對話式介面

8 of 54

對話式介面的缺點

  • 無法預期什麼指令能用
  • 內容太少就沒人想用
  • 如果 google search 不管你輸入什麼都回應查無結果�你還會希望他是對話式介面嗎？

9 of 54

我全都要

如果都要做，那就先做表單式

10 of 54

Kamigo

Bot Framework

11 of 54

Kamigo Bot Framework

  • 基於 Rails 的 Bot Framework
  • 與 Rails routes、active record、turbolinks 緊密結合
  • 開發 Bot 就像做網站一樣快速
  • 網站跟 Bot 同時做好
  • 整合 LIFF 和 Flex Message

​

  • https://github.com/etrex/kamigo�聽完之後你不會用沒關係 你可以幫我按星星嗎？

12 of 54

守護寵物機器人

13 of 54

守護寵物機器人

1

2

測試環境

正式環境

14 of 54

15 of 54

16 of 54

17 of 54

18 of 54

19 of 54

20 of 54

21 of 54

22 of 54

23 of 54

LINE Bot 表單驗證

24 of 54

LINE Bot 表單驗證

  • 列舉（Enum）：下拉式選單
  • 必填 / 特定格式：後端驗證

25 of 54

26 of 54

Rails 表單驗證

27 of 54

Rails 表單驗證 Model

28 of 54

Rails 表單驗證 Turbolinks ajax + js.erb

29 of 54

LINE Bot 搜尋

30 of 54

LINE Bot 搜尋

  • 需要做搜尋頁與搜尋結果頁
  • 確保搜尋條件的格式是預期的結構
  • 搜尋頁採用表單式介面輸入
  • 搜尋結果頁以 Flex Message 呈現

31 of 54

Rails 搜尋頁 Controller

32 of 54

LINE Bot 搜尋頁 View

33 of 54

LINE Bot 搜尋頁 View

34 of 54

LINE Bot 搜尋頁 View

35 of 54

Rails 搜尋結果頁

36 of 54

Rails 搜尋結果頁 Routes

37 of 54

Rails 搜尋結果頁 Controller

38 of 54

LINE Bot 搜尋結果頁 View

39 of 54

LINE Bot 搜尋結果頁 View

40 of 54

LINE Bot 搜尋結果頁 View

41 of 54

LINE Bot 搜尋結果頁 View

42 of 54

LINE Bot 搜尋結果頁 View

43 of 54

LINE Bot 搜尋結果頁 View

44 of 54

LINE Bot 搜尋結果頁 View

45 of 54

LINE Bot 分頁

46 of 54

LINE Bot 分頁

  • 一般分頁按鈕會放置在 index 頁面末端
  • 也就是 carousel 的最後一個 bubble

​

​

  • Rails 常用套件：kaminari�https://github.com/kaminari/kaminari�不是我做的

47 of 54

LINE Bot 分頁

48 of 54

Rails 搜尋結果頁 Controller

49 of 54

LINE Bot 搜尋結果頁 View

50 of 54

LINE Bot 搜尋結果頁 View

51 of 54

LINE Bot 搜尋結果頁 View

52 of 54

LINE Bot 搜尋結果頁 View

顯示文字 postback 內容

​

​

按下後幫 user 講的話

53 of 54

星星知你心 舉手之勞做功德

寫 Rails 的人開發 Bot 要用 kamigo

https://github.com/etrex/kamigo

​

寫 JS 的人開發 Bot 要用 bottender

https://github.com/yoctol/bottender

​

​

54 of 54

3Q