Chatbot Development - Get Movie Intro

1. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
Chatbot開發
你的口袋電影百科
Ryan Chung
III Digital Education Institute
未來之星 – 菁英培育計畫
1

2. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
資策會 數位教育研究所
² 最新科技進修
Ø 在職夜間假日進修
Ø 轉職全天養成班
² 資訊技術充電站
Ø 國際技術趨勢
Ø 職場必備能力
Ø 基本資訊技能
http://taipei.iiiedu.org.tw/
2

3. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
Ryan Chung
² 主要教授科目
Ø 語音助理應用開發
Ø Chatbot應用開發
Ø Web / App 應用
² 資策會數位教育研究所
Ø 課程經理 / 養成班導師
Ø 企業包班 / 政府專案經理
Ø 課程專任講師 /專題輔導
http://mobiledev.tw/ryan
3

4. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
產品預期畫面
4

5. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
電影機器人開發 1.0
• 目標
– 輸入：電影名稱
– 回傳：簡介、海報
• 介面
– Line
• 工具/技術
– DialogFlow
– Node.JS
• 資料
– theMovieDB.org
5

6. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
MovieBot 架構
• 語意分析 + 聊天機器人+ 電影資料庫 + 部署上線
FulFillment • 設定回應
The
Movie
DB
• 電影資料
DialogFlow
意圖：查詢電影簡介
資料：電影名稱
API
Line
6

7. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
Dialogflow
7

8. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
Create New Agent
8

9. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
Create New Agent
• 建立Agent
– 名稱：MovieBot
– 語言：zh-tw
9

10. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
語意分析常見名詞
• Intent 意圖
– 使用者對談的目的
• Entity 關鍵資訊
– 達成目的的必要輸入資訊
• Utterance 例句
– 使用者常用的句型
10

11. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
Create Intent
11

12. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
輸入 Intent 名稱後，按下Save
12

13. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
進入 Training phrases 區塊
• 點擊下方Add Training Phrases
13

14. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
輸入對應此Intent會出現的句子
• 輸入例句
– ❞我想要查電影簡介
– ❞我想知道教父的劇情
• 把教父反白，選擇 @sys.any，設定變數名稱為MovieName
– @我想知道@sys.any:MovieName 的劇情
• 注意最前面換成@、注意 @sys.any:MovieName 有上色
• 雙逗號：例句輸入、＠：文法結構輸入
14

15. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
進入變數與對應行動的設定
• 點擊下方 Manage Parameters and Action
15

16. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
標示必要資訊，並引導使用者輸入
• 決定哪些偵測到的資訊是必要的，在前方打勾
• 必要資訊還沒收集到時，設定提示句向使用者索
取必要資訊 (Define prompts...)
• 點擊 Define prompts...
16

17. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
追問出電影名稱
• 輸入引導使用者說出電影名稱的句子
17

18. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
設定回應
• 點擊下方的 Add Response
• 意圖確認，並且拿到必要的關鍵資訊
18

19. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
設定確認回應後，按下右上角Save
• 存檔完成後，過一會右下方會出現訓練完成訊息
Agent Training Completed
19

20. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
在右上角測試看看
20

21. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
用Web Demo網頁展示
• 點擊左方選單中的 Integrations
• 將Web Demo的開關打開
21

22. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
用Web Demo網頁展示
• 點擊出現的網址
• 出現網頁對話視窗！測試看看
22

23. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
DialogFlow Recap
• 建立Agent
– 名稱：MovieBot
– 語言：zh-TW
• 建立Intent
– 名稱：Get Movie Intro
• 輸入例句
– ❞我想要查電影簡介
– ❞我想知道教父的劇情
• 把教父反白，選擇 @sys.any，設定變數名稱為MovieName
– @我想知道@sys.any:MovieName 的劇情
• 注意最前面換成@、注意 @sys.any:MovieName 有上色
23

24. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
DialogFlow
• 設定需求變數與反問句
– 將MovieName打勾
– 設定反問句：請問你要查詢的電影名稱是？
• 設定確認回饋句
– 了解，馬上為你查詢$MovieName的劇情簡介
24

25. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
DialogFlow 運作機制
Source: DialogFlow
25

26. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
Webhook
1. 透過Webhook在雲端運行，DialogFlow透過
Webhook去取得所需的資料，再傳遞給使用者
2. 所有處理程序都在後端，前端可由所有支援的方
式來運作(網站、聊天機器人、語音助理...)
26

27. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
實作：Webhook建立
確認目標，取得資料
27

28. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
啟動webhook
• 在DialogFlow中，進入MovieBot專案
• 點擊左邊Intents，然後進入「Get Movie Intro」Intent
• 最下方Fulfillment，點擊 Enable Fulfillment
• 打開 Enable webhook call for this intent
• 右上方點擊Save
28

29. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
確認設定為V2 API
• 點擊專案名稱旁邊的齒輪
• General -> API Version
• 選擇 V2 API
29

30. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
開發前準備事項
• 安裝 VS Code
– https://code.visualstudio.com/
• 安裝 Node
– https://nodejs.org/en/download/
• 安裝 Ngrok
– https://ngrok.com/download
30

31. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
安裝Node.js
• 選擇穩定版 (Recommend For Most Users)
– Windows Installer：下載msi檔
– macOS Installer：下載pkg檔
• 如何確認安裝?
– 打開終端機，輸入：node -v
https://nodejs.org/en/
31

32. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
安裝Ngrok
• 建議放置位置
– Windows：主要使用者資料夾
– Mac：應用程式
• 設定為在哪裡都可以執行
– Windows：我的電腦 -> 右鍵 -> 內容 ->
進階系統設定 -> 環境變數 -> 系統變數 ->
Path -> 編輯 -> 新增
– Mac：ln -s /Applications/ngrok ngrok
https://ngrok.com/download
32

33. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
建立開發專案
• 建立專案資料夾：MovieBot
• 建立主要程式檔：index.js
https://github.com/ryan403/MovieBot
33

34. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
建立index.js 輸入程式碼
注意大小寫
34

35. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
繼續於index.js 輸入程式碼
35

36. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
繼續於index.js 輸入程式碼
36

37. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
設定MovieDB API Key
• 新增config資料夾
• 在config資料夾中新增檔案：default.json
• 增加MovieDB_API_Key (稍後至該網站申請)
Your API Key here
37

38. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
TheMovieDB.org
• 註冊帳號、填寫相關資料
• 點擊個人頭像 -> 帳戶設定
• 左邊清單點擊API
• 複製API Key(v3 auth)至上一頁
https://www.themoviedb.org/account/signup
38

39. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
TheMovieDB Search API
https://developers.themoviedb.org/3/search/search-movies
39

40. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
專案初始化
• 在VS Code中，按下 Ctrl + ~ 開啟終端機
• 輸入npm init
• 按下多次enter，使用預設值建立package.json
安裝需要的套件
• 在VS Code中，按下 Ctrl + ~ 開啟終端機
• 安裝能夠一次安裝需求模組的套件
– 在終端機輸入npm install npm-install-all -g
– 需要管理者權限(Mac加sudo)
• 針對特定檔案中的需求來安裝套件
– 在終端機輸入npm-install-all index.js
40

41. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
增加Debug與Start Scripts
• 在 package.json 新增
• debug：在地測試、start：伺服器上線
41

42. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
執行並開啟除錯模式
• 點擊VS Code中左邊選單中的第四個(偵錯)
• 上方Play按鈕右邊下拉新增組態...
• 選擇「{ } Node.js 透過NPM 啟動」
• 按下Play按鈕
• 下方偵錯主控台確認伺服器是否已啟動
42

43. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
運用Ngrok讓開發機變成伺服器
• 在終端機執行 ngrok http 5000
• 複製產生的公開網址 (Forwarding https://.....)
Copy this one
43

44. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
DialogFlow Fulfillment
• ENABLED、填完URL(後面加上/webhook)後，按下下方的Save
44

45. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
回到右方測試區進行測試
• 可順利連線，拿到電影資料！
45

46. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
Integrations -> LINE -> 打開
• 跟著步驟建立帳號、啟動Messaging API
• Log in to console
46

47. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
Line Developer Console
• Select provider 選擇既有或新增
https://developers.line.me/console/register/messaging-api/provider/
47

48. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
Create new channel
• 輸入 App icon、name、description
• 選擇 Free Plan
• 設定 Category、Subcategory
• 輸入 Email address
• Confirm
48

49. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
取得相關資訊
• 進入新建立的Channel -> Channel settings
• 拿到Channel ID、Channel secret 貼至DialogFlow
• Issue to get Channel access token 也貼過去
• 在DialogFlow那邊先按Start
• 回到Line Console，Use webhooks Enabled
• 把Webhook URL從DialogFlow那邊貼過來
• 把Auto-reply messages、Greeting messages
Disabled
49

50. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
用QR code 加入自己的Chatbot
• 用Line加入自己的Chatbot
• 試著看看能不能看到剛才設定好的對話
50

51. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
電腦關機怎麼辦?
51

52. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
node_modules 不上傳
• 增加 .gitignore 檔案
– 裡面寫：node_modules/
52

53. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
部署至Heroku
• 註冊帳號
• 右上角 New -> Create new app
• 設定App name：movie-bot-XXYYZZ
• 區域：美國
• Create App
https://www.heroku.com/
53

54. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
Deploy using Heroku Git
• 使用Heroku Git (Use Heroku CLI)
• 下載與安裝 Heroku CLI
• 終端機
heroku login
cd my-project-dic
git init
heroku git:remote –a YourProjectNameHere
https://devcenter.heroku.com/articles/heroku-command-line
是你在Heroku中的專案名稱哦！
通常長得像 oo-bot-xxyyzz
切換到專案資料夾路徑下，若已經在裡面則可忽略此步驟
54

55. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
開始部署上傳(每次更新步驟亦同)
• git add .
• git commit –am "make it better"
• git push heroku master
• heroku restart
雙引號這邊像是你的上傳筆記
在這裡寫上這次更新的內容
之後code更新時再加這一步
第一次不用
55

56. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
啟動網站
• heroku ps:scale web=1
非常非常關鍵的一步，一定要記得做
56

57. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
找到Heroku的網址
• Settinges分頁下拉 -> Domains and certificates
https://dashboard.heroku.com/apps/YourAppName/settings
• 其實網址就是
https://YourAppName.herokuapp.com
57

58. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
回到DialogFlow設定Fulfillment
• Webhook Enabled
https://YourAppName.herokuapp.com/webhook
• 打完記得畫面拉至最下方，按下Save
58

59. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
再度進行測試
• 本地的Ngrok、VS Code 都可以關掉
• 進入DialogFlow -> 右方測試區
59

60. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
fulfillmentMessages - card
https://dialogflow.com/docs/fulfillment#response
"fulfillmentMessages": [
{
"card": {
"title": "card title",
"subtitle": "card text",
"imageUri": "https://assistant.google.com/static/images/molecule/Molecule-Formation-stop.png",
"buttons": [
{
"text": "button text",
"postback": "https://assistant.google.com/"
}
]
}
}
]
60

61. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
fulfillmentMessages支援
• Text • Image
https://dialogflow.com/docs/reference/v1-v2-migration-guide-fulfillment#fulfillment_messages_reference
• Quick Reply
61

62. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
對話流程
人 <-> 人 人 <-> Chatbot/VA
開啟對話
寒暄語
Hello、你好、嗨
喚醒語 Invocation
系統指定啟動語 Alexa, Hi Siri, OK Google
提出需求
台北的天氣如何？
一般人均可直接理解對方的需求
釐清意圖 Intent
透過語句解析，確定對方的意圖是什麼
訓練
釐清意圖
N/A
由於同一意圖有多種表達方式
所以要多提供例句讓機器對應至特定意圖
取得
關鍵資訊
若對方漏說了地方與時間
持續問答取得資訊
取出關鍵資訊 Entity
預先定義好滿足該意圖所需的關鍵資訊
持續與使用者對話取得所有需求關鍵資訊
確認
條件滿足
跟對方確定取得必要資訊後
開始進行查詢
依據關鍵資訊與意圖
進行下一階段資料查詢(API 介接)
回應
回應查詢結果
新聞說今天臺北在下雨，氣溫19度
依據查詢結果
以文字、圖形或語音的方式回應
延伸問答
依據目前資訊的延伸問題
那明天的狀況也一樣嗎？
須將既有輸入資訊暫存
更新資料查詢並進行回應
62

63. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
人機互動腳本準則
• 以人們真正會說的話來設計，而不是那種文章上的口吻
• 不要假設使用者知道要怎麼做或是知道會發生什麼事
真實
• 避免使用有多重含義的詞句、片語
• 引導使用者提供必要的資訊
明確
• 清楚地把選項呈現出來
• 一般而言，一次不要丟出超過三個選項
• 一次向使用者要一個資訊
簡單
63

64. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
Recap
• Dialogflow
– 語意分析、前端整合
• TheMovieDB API
– 資料來源
• Ngrok
– 暫時讓本機變成Server
• Heroku
– 雲端主機服務
• 電影其他資訊查詢
– 評分、演員、年代...
• 電影時刻查詢
– 各地電影院時刻資料
• 多媒體
– 電影預告、電影配樂
• 電影推薦
– 測驗、查詢記錄...
Extra
64

65. Chatbot開發 – 你的口袋電影百科 Ryan@iii.org.tw
敬請指教
Ryan Chung
Senior Engineer
III Digital Education Institute
Ryan@iii.org.tw
65