MovieBot

To get movie info

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