1 of 81

聊天機器人 MVC 框架 - Kamigo

20191106 郭佳甯-卡米哥

2 of 81

https://ubin.io/VkaHb4

3 of 81

郭佳甯-卡米哥

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

4 of 81

今天的內容

  • 為什麼你應該先做圖像介面(GUI) 再做對話介面(CUI)
  • CRUD 是開發的最小單位
  • 聊天機器人(Bot)開發就是網站(Web)開發
  • Kamigo Bot Framework
  • Live Demo

5 of 81

為什麼你應該

先做圖像介面(GUI)

再做對話介面(CUI)

6 of 81

圖像介面 (Graphical User Interface)

7 of 81

圖像介面的缺點

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

8 of 81

對話介面 (Conversational User Interface)

9 of 81

對話介面 (Conversational User Interface)

10 of 81

對話介面的缺點

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

11 of 81

為什麼你該先做圖像介面(GUI)再做對話介面(CUI)

圖像介面適用於

對話介面適用於

內容少

內容多

需支援按鈕

所有平台

12 of 81

我全都要

如果都要做，那就先做 GUI

13 of 81

CRUD

是開發的最小單位

14 of 81

卡米狗的核心功能：學說話

15 of 81

你會說什麼

16 of 81

卡米狗壞壞

17 of 81

卡米狗抽籤

18 of 81

CRUD 是開發的最小單位

卡米狗

CRUD

學；{關鍵字}；{回覆}

Create

卡米狗 你會說什麼

Index

卡米狗忘記；{關鍵字}

Destroy

卡米狗壞壞

Destroy Last

{關鍵字}

Show Last

卡米狗{關鍵字}

Show Random

19 of 81

我全都要

客戶在描述需求時就像擠牙膏，從 Create 開始，最終會是完整的 CRUD

20 of 81

聊天機器人(Bot)開發

就是網站(Web)開發

21 of 81

MVC 架構的網站(Web)開發

controller/action

controller/action

controller/action

view

view

view

router

Url

Params

QueryResult

22 of 81

聊天機器人(Bot)開發

controller/action

controller/action

controller/action

view

view

view

router

Url

Params

QueryResult

controller/action

view

router

Webhook Url

Events

200 OK

23 of 81

聊天機器人(Bot)開發理論

https://www.slideshare.net/tw_dsconf/ss-75294430

24 of 81

聊天機器人(Bot)開發理論

https://www.slideshare.net/tw_dsconf/ss-75294430

聲音轉文字

語言理解

Router

對話管理

Controller/Action

語言生成

View

資料庫

Model

25 of 81

聊天機器人(Bot)開發實務

對話管理

controller/action

語言生成

view

語言理解

router

controller/action

view

router

Webhook Url

Events

200 OK

Text

Intent/Entity

QueryResult

Message Json

26 of 81

聊天機器人(Bot)開發實務

controller/action

controller/action

controller/action

view

view

view

router

Url

Params

QueryResult

controller/action

view

router

Webhook Url

Events

200 OK

27 of 81

controller/action

controller/action

view

view

對話管理

controller/action

語言生成

view

語言理解

router

Params

QueryResult

controller/action

view

router

Webhook Url

Events

200 OK

Text

Message Json

Url

Entity

28 of 81

聊天機器人(Bot)開發就是網站(Web)開發

聊天機器人(Bot)

MVC 架構網站(Web)

文字(Text)

網址(Url)

語言理解(Lungange Understanding)

路由(Router)

關鍵字(Entity)

參數(Param)

意圖(Intent)

Controller/Action

對話管理

Controller/Action 的內部實作

語言生成

View

29 of 81

我全都要

聊天機器人跟網站一起做，共用 Controller 和 Model 不是夢想

30 of 81

Kamigo

Bot Framework

31 of 81

聊天機器人(Bot)開發需求

  • 快速滿足客戶、快速結案
  • 快速開發 CRUD
  • 快速開發圖像介面
  • 程式碼好維護
  • Web、Bot 一起完成

32 of 81

Kamigo Bot Framework

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

​

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

33 of 81

Kamigo Demo

34 of 81

肌肉仔

35 of 81

守護寵物機器人

36 of 81

Live

Demo

37 of 81

舉手之勞做功德

寫 Rails 的人開發 Bot 要用 kamigo

https://github.com/etrex/kamigo

​

寫 JS 的人開發 Bot 要用 bottender

https://github.com/yoctol/bottender

​

​

聽完之後不會用沒關係 可以幫我按星星嗎？

38 of 81

3Q

39 of 81

3Q

40 of 81

3Q

41 of 81

守護寵物機器人

42 of 81

守護寵物機器人

1

2

測試環境

正式環境

43 of 81

44 of 81

45 of 81

46 of 81

47 of 81

48 of 81

49 of 81

50 of 81

51 of 81

52 of 81

LINE Bot 表單驗證

53 of 81

LINE Bot 表單驗證

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

54 of 81

55 of 81

Rails 表單驗證

56 of 81

Rails 表單驗證 Model

57 of 81

Rails 表單驗證 Turbolinks ajax + js.erb

58 of 81

LINE Bot 搜尋

59 of 81

LINE Bot 搜尋

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

60 of 81

Rails 搜尋頁 Controller

61 of 81

LINE Bot 搜尋頁 View

62 of 81

LINE Bot 搜尋頁 View

63 of 81

LINE Bot 搜尋頁 View

64 of 81

Rails 搜尋結果頁

65 of 81

Rails 搜尋結果頁 Routes

66 of 81

Rails 搜尋結果頁 Controller

67 of 81

LINE Bot 搜尋結果頁 View

68 of 81

LINE Bot 搜尋結果頁 View

69 of 81

LINE Bot 搜尋結果頁 View

70 of 81

LINE Bot 搜尋結果頁 View

71 of 81

LINE Bot 搜尋結果頁 View

72 of 81

LINE Bot 搜尋結果頁 View

73 of 81

LINE Bot 搜尋結果頁 View

74 of 81

LINE Bot 分頁

75 of 81

LINE Bot 分頁

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

​

​

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

76 of 81

LINE Bot 分頁

77 of 81

Rails 搜尋結果頁 Controller

78 of 81

LINE Bot 搜尋結果頁 View

79 of 81

LINE Bot 搜尋結果頁 View

80 of 81

LINE Bot 搜尋結果頁 View

81 of 81

LINE Bot 搜尋結果頁 View

顯示文字 postback 內容

​

​

按下後幫 user 講的話