MovieBot
0 likes453 views
本文件介绍了电影聊天机器人开发的步骤，包括语音助理和聊天机器人应用的创建。重点介绍了使用 Dialogflow 和 Node.js 开发的实现细节，以及如何将项目部署到 Heroku。还包括关于如何设置 webhook 和与 The Movie Database API 集成的信息。
![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](https://image.slidesharecdn.com/chatbot-getmovieinfo-181107160405/85/MovieBot-60-320.jpg)
MovieBot
- 1. Chatbot開發 – 你的口袋電影百科 [email protected] Chatbot開發 你的口袋電影百科 Ryan Chung III Digital Education Institute 未來之星 – 菁英培育計畫 1
- 2. Chatbot開發 – 你的口袋電影百科 [email protected] 資策會 數位教育研究所 ² 最新科技進修 Ø 在職夜間假日進修 Ø 轉職全天養成班 ² 資訊技術充電站 Ø 國際技術趨勢 Ø 職場必備能力 Ø 基本資訊技能 http://taipei.iiiedu.org.tw/ 2
- 3. Chatbot開發 – 你的口袋電影百科 [email protected] Ryan Chung ² 主要教授科目 Ø 語音助理應用開發 Ø Chatbot應用開發 Ø Web / App 應用 ² 資策會數位教育研究所 Ø 課程經理 / 養成班導師 Ø 企業包班 / 政府專案經理 Ø 課程專任講師 /專題輔導 http://mobiledev.tw/ryan 3
- 4. Chatbot開發 – 你的口袋電影百科 [email protected] 產品預期畫面 4
- 5. Chatbot開發 – 你的口袋電影百科 [email protected] 電影機器人開發 1.0 • 目標 – 輸入：電影名稱 – 回傳：簡介、海報 • 介面 – Line • 工具/技術 – DialogFlow – Node.JS • 資料 – theMovieDB.org 5
- 6. Chatbot開發 – 你的口袋電影百科 [email protected] MovieBot 架構 • 語意分析 + 聊天機器人+ 電影資料庫 + 部署上線 FulFillment • 設定回應 The Movie DB • 電影資料 DialogFlow 意圖：查詢電影簡介 資料：電影名稱 API Line 6
- 7. Chatbot開發 – 你的口袋電影百科 [email protected] Dialogflow 7
- 8. Chatbot開發 – 你的口袋電影百科 [email protected] Create New Agent 8
- 9. Chatbot開發 – 你的口袋電影百科 [email protected] Create New Agent • 建立Agent – 名稱：MovieBot – 語言：zh-tw 9
- 10. Chatbot開發 – 你的口袋電影百科 [email protected] 語意分析常見名詞 • Intent 意圖 – 使用者對談的目的 • Entity 關鍵資訊 – 達成目的的必要輸入資訊 • Utterance 例句 – 使用者常用的句型 10
- 11. Chatbot開發 – 你的口袋電影百科 [email protected] Create Intent 11
- 12. Chatbot開發 – 你的口袋電影百科 [email protected] 輸入 Intent 名稱後，按下Save 12
- 13. Chatbot開發 – 你的口袋電影百科 [email protected] 進入 Training phrases 區塊 • 點擊下方Add Training Phrases 13
- 14. Chatbot開發 – 你的口袋電影百科 [email protected] 輸入對應此Intent會出現的句子 • 輸入例句 – ❞我想要查電影簡介 – ❞我想知道教父的劇情 • 把教父反白，選擇 @sys.any，設定變數名稱為MovieName – @我想知道@sys.any:MovieName 的劇情 • 注意最前面換成@、注意 @sys.any:MovieName 有上色 • 雙逗號：例句輸入、＠：文法結構輸入 14
- 15. Chatbot開發 – 你的口袋電影百科 [email protected] 進入變數與對應行動的設定 • 點擊下方 Manage Parameters and Action 15
- 16. Chatbot開發 – 你的口袋電影百科 [email protected] 標示必要資訊，並引導使用者輸入 • 決定哪些偵測到的資訊是必要的，在前方打勾 • 必要資訊還沒收集到時，設定提示句向使用者索 取必要資訊 (Define prompts...) • 點擊 Define prompts... 16
- 17. Chatbot開發 – 你的口袋電影百科 [email protected] 追問出電影名稱 • 輸入引導使用者說出電影名稱的句子 17
- 18. Chatbot開發 – 你的口袋電影百科 [email protected] 設定回應 • 點擊下方的 Add Response • 意圖確認，並且拿到必要的關鍵資訊 18
- 19. Chatbot開發 – 你的口袋電影百科 [email protected] 設定確認回應後，按下右上角Save • 存檔完成後，過一會右下方會出現訓練完成訊息 Agent Training Completed 19
- 20. Chatbot開發 – 你的口袋電影百科 [email protected] 在右上角測試看看 20
- 21. Chatbot開發 – 你的口袋電影百科 [email protected] 用Web Demo網頁展示 • 點擊左方選單中的 Integrations • 將Web Demo的開關打開 21
- 22. Chatbot開發 – 你的口袋電影百科 [email protected] 用Web Demo網頁展示 • 點擊出現的網址 • 出現網頁對話視窗！測試看看 22
- 23. Chatbot開發 – 你的口袋電影百科 [email protected] DialogFlow Recap • 建立Agent – 名稱：MovieBot – 語言：zh-TW • 建立Intent – 名稱：Get Movie Intro • 輸入例句 – ❞我想要查電影簡介 – ❞我想知道教父的劇情 • 把教父反白，選擇 @sys.any，設定變數名稱為MovieName – @我想知道@sys.any:MovieName 的劇情 • 注意最前面換成@、注意 @sys.any:MovieName 有上色 23
- 24. Chatbot開發 – 你的口袋電影百科 [email protected] DialogFlow • 設定需求變數與反問句 – 將MovieName打勾 – 設定反問句：請問你要查詢的電影名稱是？ • 設定確認回饋句 – 了解，馬上為你查詢$MovieName的劇情簡介 24
- 25. Chatbot開發 – 你的口袋電影百科 [email protected] DialogFlow 運作機制 Source: DialogFlow 25
- 26. Chatbot開發 – 你的口袋電影百科 [email protected] Webhook 1. 透過Webhook在雲端運行，DialogFlow透過 Webhook去取得所需的資料，再傳遞給使用者 2. 所有處理程序都在後端，前端可由所有支援的方 式來運作(網站、聊天機器人、語音助理...) 26
- 27. Chatbot開發 – 你的口袋電影百科 [email protected] 實作：Webhook建立 確認目標，取得資料 27
- 28. Chatbot開發 – 你的口袋電影百科 [email protected] 啟動webhook • 在DialogFlow中，進入MovieBot專案 • 點擊左邊Intents，然後進入「Get Movie Intro」Intent • 最下方Fulfillment，點擊 Enable Fulfillment • 打開 Enable webhook call for this intent • 右上方點擊Save 28
- 29. Chatbot開發 – 你的口袋電影百科 [email protected] 確認設定為V2 API • 點擊專案名稱旁邊的齒輪 • General -> API Version • 選擇 V2 API 29
- 30. Chatbot開發 – 你的口袋電影百科 [email protected] 開發前準備事項 • 安裝 VS Code – https://code.visualstudio.com/ • 安裝 Node – https://nodejs.org/en/download/ • 安裝 Ngrok – https://ngrok.com/download 30
- 31. Chatbot開發 – 你的口袋電影百科 [email protected] 安裝Node.js • 選擇穩定版 (Recommend For Most Users) – Windows Installer：下載msi檔 – macOS Installer：下載pkg檔 • 如何確認安裝? – 打開終端機，輸入：node -v https://nodejs.org/en/ 31
- 32. Chatbot開發 – 你的口袋電影百科 [email protected] 安裝Ngrok • 建議放置位置 – Windows：主要使用者資料夾 – Mac：應用程式 • 設定為在哪裡都可以執行 – Windows：我的電腦 -> 右鍵 -> 內容 -> 進階系統設定 -> 環境變數 -> 系統變數 -> Path -> 編輯 -> 新增 – Mac：ln -s /Applications/ngrok ngrok https://ngrok.com/download 32
- 33. Chatbot開發 – 你的口袋電影百科 [email protected] 建立開發專案 • 建立專案資料夾：MovieBot • 建立主要程式檔：index.js https://github.com/ryan403/MovieBot 33
- 34. Chatbot開發 – 你的口袋電影百科 [email protected] 建立index.js 輸入程式碼 注意大小寫 34
- 35. Chatbot開發 – 你的口袋電影百科 [email protected] 繼續於index.js 輸入程式碼 35
- 36. Chatbot開發 – 你的口袋電影百科 [email protected] 繼續於index.js 輸入程式碼 36
- 37. Chatbot開發 – 你的口袋電影百科 [email protected] 設定MovieDB API Key • 新增config資料夾 • 在config資料夾中新增檔案：default.json • 增加MovieDB_API_Key (稍後至該網站申請) Your API Key here 37
- 38. Chatbot開發 – 你的口袋電影百科 [email protected] TheMovieDB.org • 註冊帳號、填寫相關資料 • 點擊個人頭像 -> 帳戶設定 • 左邊清單點擊API • 複製API Key(v3 auth)至上一頁 https://www.themoviedb.org/account/signup 38
- 39. Chatbot開發 – 你的口袋電影百科 [email protected] TheMovieDB Search API https://developers.themoviedb.org/3/search/search-movies 39
- 40. Chatbot開發 – 你的口袋電影百科 [email protected] 專案初始化 • 在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開發 – 你的口袋電影百科 [email protected] 增加Debug與Start Scripts • 在 package.json 新增 • debug：在地測試、start：伺服器上線 41
- 42. Chatbot開發 – 你的口袋電影百科 [email protected] 執行並開啟除錯模式 • 點擊VS Code中左邊選單中的第四個(偵錯) • 上方Play按鈕右邊下拉新增組態... • 選擇「{ } Node.js 透過NPM 啟動」 • 按下Play按鈕 • 下方偵錯主控台確認伺服器是否已啟動 42
- 43. Chatbot開發 – 你的口袋電影百科 [email protected] 運用Ngrok讓開發機變成伺服器 • 在終端機執行 ngrok http 5000 • 複製產生的公開網址 (Forwarding https://.....) Copy this one 43
- 44. Chatbot開發 – 你的口袋電影百科 [email protected] DialogFlow Fulfillment • ENABLED、填完URL(後面加上/webhook)後，按下下方的Save 44
- 45. Chatbot開發 – 你的口袋電影百科 [email protected] 回到右方測試區進行測試 • 可順利連線，拿到電影資料！ 45
- 46. Chatbot開發 – 你的口袋電影百科 [email protected] Integrations -> LINE -> 打開 • 跟著步驟建立帳號、啟動Messaging API • Log in to console 46
- 47. Chatbot開發 – 你的口袋電影百科 [email protected] Line Developer Console • Select provider 選擇既有或新增 https://developers.line.me/console/register/messaging-api/provider/ 47
- 48. Chatbot開發 – 你的口袋電影百科 [email protected] Create new channel • 輸入 App icon、name、description • 選擇 Free Plan • 設定 Category、Subcategory • 輸入 Email address • Confirm 48
- 49. Chatbot開發 – 你的口袋電影百科 [email protected] 取得相關資訊 • 進入新建立的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開發 – 你的口袋電影百科 [email protected] 用QR code 加入自己的Chatbot • 用Line加入自己的Chatbot • 試著看看能不能看到剛才設定好的對話 50
- 51. Chatbot開發 – 你的口袋電影百科 [email protected] 電腦關機怎麼辦? 51
- 52. Chatbot開發 – 你的口袋電影百科 [email protected] node_modules 不上傳 • 增加 .gitignore 檔案 – 裡面寫：node_modules/ 52
- 53. Chatbot開發 – 你的口袋電影百科 [email protected] 部署至Heroku • 註冊帳號 • 右上角 New -> Create new app • 設定App name：movie-bot-XXYYZZ • 區域：美國 • Create App https://www.heroku.com/ 53
- 54. Chatbot開發 – 你的口袋電影百科 [email protected] 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開發 – 你的口袋電影百科 [email protected] 開始部署上傳(每次更新步驟亦同) • git add . • git commit –am "make it better" • git push heroku master • heroku restart 雙引號這邊像是你的上傳筆記 在這裡寫上這次更新的內容 之後code更新時再加這一步 第一次不用 55
- 56. Chatbot開發 – 你的口袋電影百科 [email protected] 啟動網站 • heroku ps:scale web=1 非常非常關鍵的一步，一定要記得做 56
- 57. Chatbot開發 – 你的口袋電影百科 [email protected] 找到Heroku的網址 • Settinges分頁下拉 -> Domains and certificates https://dashboard.heroku.com/apps/YourAppName/settings • 其實網址就是 https://YourAppName.herokuapp.com 57
- 58. Chatbot開發 – 你的口袋電影百科 [email protected] 回到DialogFlow設定Fulfillment • Webhook Enabled https://YourAppName.herokuapp.com/webhook • 打完記得畫面拉至最下方，按下Save 58
- 59. Chatbot開發 – 你的口袋電影百科 [email protected] 再度進行測試 • 本地的Ngrok、VS Code 都可以關掉 • 進入DialogFlow -> 右方測試區 59
- 60. Chatbot開發 – 你的口袋電影百科 [email protected] 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開發 – 你的口袋電影百科 [email protected] fulfillmentMessages支援 • Text • Image https://dialogflow.com/docs/reference/v1-v2-migration-guide-fulfillment#fulfillment_messages_reference • Quick Reply 61
- 62. Chatbot開發 – 你的口袋電影百科 [email protected] 對話流程 人 <-> 人 人 <-> Chatbot/VA 開啟對話 寒暄語 Hello、你好、嗨 喚醒語 Invocation 系統指定啟動語 Alexa, Hi Siri, OK Google 提出需求 台北的天氣如何？ 一般人均可直接理解對方的需求 釐清意圖 Intent 透過語句解析，確定對方的意圖是什麼 訓練 釐清意圖 N/A 由於同一意圖有多種表達方式 所以要多提供例句讓機器對應至特定意圖 取得 關鍵資訊 若對方漏說了地方與時間 持續問答取得資訊 取出關鍵資訊 Entity 預先定義好滿足該意圖所需的關鍵資訊 持續與使用者對話取得所有需求關鍵資訊 確認 條件滿足 跟對方確定取得必要資訊後 開始進行查詢 依據關鍵資訊與意圖 進行下一階段資料查詢(API 介接) 回應 回應查詢結果 新聞說今天臺北在下雨，氣溫19度 依據查詢結果 以文字、圖形或語音的方式回應 延伸問答 依據目前資訊的延伸問題 那明天的狀況也一樣嗎？ 須將既有輸入資訊暫存 更新資料查詢並進行回應 62
- 63. Chatbot開發 – 你的口袋電影百科 [email protected] 人機互動腳本準則 • 以人們真正會說的話來設計，而不是那種文章上的口吻 • 不要假設使用者知道要怎麼做或是知道會發生什麼事 真實 • 避免使用有多重含義的詞句、片語 • 引導使用者提供必要的資訊 明確 • 清楚地把選項呈現出來 • 一般而言，一次不要丟出超過三個選項 • 一次向使用者要一個資訊 簡單 63
- 64. Chatbot開發 – 你的口袋電影百科 [email protected] Recap • Dialogflow – 語意分析、前端整合 • TheMovieDB API – 資料來源 • Ngrok – 暫時讓本機變成Server • Heroku – 雲端主機服務 • 電影其他資訊查詢 – 評分、演員、年代... • 電影時刻查詢 – 各地電影院時刻資料 • 多媒體 – 電影預告、電影配樂 • 電影推薦 – 測驗、查詢記錄... Extra 64
- 65. Chatbot開發 – 你的口袋電影百科 [email protected] 敬請指教 Ryan Chung Senior Engineer III Digital Education Institute [email protected] 65