MovieBot Development

Transcript

1. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Chatbot開發 你的口袋電影百科 Ryan Chung 76
2. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 產品預期畫面 77
3. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 電影機器人開發 1.0 • 目標 – 輸入：電影名稱 – 回傳：簡介、海報 • 介面 – Line • 工具/技術 – DialogFlow – Node.JS • 資料 – theMovieDB.org 78
4. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 MovieBot 架構 • 語意分析 + 聊天機器人+ 電影資料庫 + 部署上線 FulFillment • 設定回應 The Movie DB • 電影資料 DialogFlow 意圖：查詢電影簡介 資料：電影名稱 API Line 79
5. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Dialogflow 80 https://dialogflow.cloud.google.com/
6. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Create New Agent 81
7. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Create New Agent • 建立Agent – 名稱：MovieBot – 語言：zh-tw 82
8. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 語意分析常見名詞 • Intent 意圖 – 使用者對談的目的 • Entity 關鍵資訊 – 達成目的的必要輸入資訊 • Utterance 例句 – 使用者常用的句型 83
9. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Create Intent 84
10. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 輸入 Intent 名稱後，按下Save 85
11. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 進入 Training phrases 區塊 • 點擊下方Add Training Phrases 86
12. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 輸入對應此Intent會出現的句子 • 輸入例句 – ❞我想要查電影簡介 – ❞我想知道教父的劇情 • 把教父反白，選擇 @sys.any，設定變數名稱為MovieName – ❞我想知道神力女超人在演什麼 • 把神力女超人反白，選擇 @sys.any:MovieName 87
13. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 進入變數與對應行動的設定 • 點擊下方 Manage Parameters and Action 88
14. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 標示必要資訊，並引導使用者輸入 • 決定哪些偵測到的資訊是必要的，在前方打勾 • 必要資訊還沒收集到時，設定提示句向使用者 索取必要資訊 (Define prompts...) • 點擊 Define prompts... 89
15. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 追問出電影名稱 • 輸入引導使用者說出電影名稱的句子 90
16. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 設定確認回應，按下右上角Save • 存檔完成後，過一會右下方會出現訓練完成訊息 Agent Training Completed 91
17. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 在右上角測試看看 92
18. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 用Web Demo網頁展示 • 點擊左方選單中的 Integrations • 將Web Demo的開關打開 93
19. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 用Web Demo網頁展示 • 點擊出現的網址 • 出現網頁對話視窗！測試看看 94
20. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 DialogFlow Recap(1/2) • 建立Agent – 名稱：MovieBot – 語言：zh-TW • 建立Intent – 名稱：Get Movie Intro • 輸入例句 – ❞我想要查電影簡介 – ❞我想知道教父的劇情 • 把教父反白，選擇 @sys.any，設定變數名稱為MovieName – ❞我想知道神力女超人在演什麼 • 把神力女超人反白，選擇 @sys.any:MovieName 95
21. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 DialogFlow Recap(2/2) • 設定需求變數與反問句 – 將MovieName打勾 – 設定反問句：請問你要查詢的電影名稱是？ • 設定確認回饋句 – 了解，馬上為你查詢$MovieName的劇情簡介 96
22. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 DialogFlow 運作機制 Source: DialogFlow 97
23. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Webhook 1. 透過Webhook在雲端運行，DialogFlow透過 Webhook去取得所需的資料，再傳遞給使用者 2. 所有處理程序都在後端，前端可由所有支援的方 式來運作(網站、聊天機器人、語音助理...) 98
24. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 實作：Webhook建立 確認目標，取得資料 99
25. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 啟動webhook • 在DialogFlow中，進入MovieBot專案 • 點擊左邊Intents，然後進入「Get Movie Intro」Intent • 最下方Fulfillment，點擊 Enable Fulfillment • 打開 Enable webhook call for this intent • 右上方點擊Save 100
26. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 開發前準備事項 • 安裝 VS Code – https://code.visualstudio.com/ • 安裝 Node – https://nodejs.org/en/download/ • 安裝 Ngrok – https://ngrok.com/download 101
27. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 安裝Node.js • 選擇穩定版 (Recommend For Most Users) – Windows Installer：下載msi檔 – macOS Installer：下載pkg檔 • 如何確認安裝? – 打開終端機，輸入：node -v https://nodejs.org/en/ 102
28. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 安裝Ngrok • 建議放置位置 – Windows：主要使用者資料夾 – Mac：應用程式 • 設定為在哪裡都可以執行 – Windows：我的電腦 -> 右鍵 -> 內容 -> 進階系統設定 -> 環境變數 -> 系統 變數 ->Path -> 編輯 -> 新增 – Mac：ln -s /Applications/ngrok ngrok https://ngrok.com/download 103
29. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 建立開發專案 • 建立專案資料夾：MovieBot • 建立主要程式檔：index.js 104
30. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 'use strict'; const config = require('config'), express = require('express'), request = require('request'); var app = express(); var port = process.env.PORT || process.env.port || 5000; app.set('port',port); app.use(express.json()); app.listen(app.get('port'),function(){ console.log('[app.listen] Node app is running on port', app.get('port')); }); module.exports = app; const MOVIE_API_KEY = config.get('MovieDB_API_Key'); 建立index.js 輸入程式碼 注意大小寫 105
31. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 繼續於index.js 輸入程式碼 106 app.post('/webhook',function(req, res){ let data = req.body; let queryMovieName = data.queryResult.parameters.MovieName; let propertiesObject = { query:queryMovieName, api_key:MOVIE_API_KEY, language:'zh-TW' }; request({ uri:"https://api.themoviedb.org/3/search/movie?", json:true, qs:propertiesObject },function(error, response, body){ if(!error && response.statusCode == 200){ if(body.results.length!=0){ let thisFulfillmentMessages = []; let movieTitleObject = {}; if(body.results[0].title == queryMovieName){ movieTitleObject.text = {text:[body.results[0].title]}; }else{ movieTitleObject.text = {text:["系統內最相關的電影是"+body.results[0].title]}; } thisFulfillmentMessages.push(movieTitleObject);
32. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 繼續於index.js 輸入程式碼 107 if(body.results[0].overview){ let movieOverViewObject = {}; movieOverViewObject.text = {text:[body.results[0].overview]}; thisFulfillmentMessages.push(movieOverViewObject); } if(body.results[0].poster_path){ let movieImageObject={}; movieImageObject.image = {imageUri:"https://image.tmdb.org/t/p/w185/"+body.results[0].poster_path}; thisFulfillmentMessages.push(movieImageObject); } res.json({fulfillmentMessages:thisFulfillmentMessages}); }else{ res.json({fulfillmentText:"很抱歉，系統裡面沒有這部電影"}); } }else{ console.log("[the MovieDB] failed"); } }); });
33. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 設定MovieDB API Key • 新增config資料夾 • 在config資料夾中新增檔案：default.json • 增加MovieDB_API_Key (稍後至該網站申請) Your API Key here 108
34. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 TheMovieDB.org • 註冊帳號、填寫相關資料 • 點擊個人頭像 -> 帳戶設定 • 左邊清單點擊API • 複製API Key(v3 auth)至上一頁 https://www.themoviedb.org/account/signup 109
35. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 TheMovieDB Search API https://developers.themoviedb.org/3/search/search-movies 110
36. Chatbot Development – Ryan@MobileDev.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 111
37. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 增加Debug與Start Scripts • 在 package.json 新增 • debug：在地測試、start：伺服器上線 112
38. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 執行並開啟除錯模式 • 點擊VS Code中左邊選單中的第四個(執行) • 建立launch.json檔案... 選Node.js • 下拉選單，新增組態，選擇「{ } Node.js 透 過NPM 啟動」 • 下拉選至 Launch via NPM，按下Play按鈕 • 下方偵錯主控台確認伺服器是否已啟動 113
39. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 運用Ngrok讓開發機變成伺服器 • 在終端機執行 ngrok http 5000 • 複製產生的公開網址 (Forwarding https://.....) Copy this one 114
40. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 DialogFlow Fulfillment • ENABLED、填完URL(後面加上/webhook)後，按下下方的Save 115
41. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 回到右方測試區進行測試 • 可順利連線，拿到電影資料！ 116
42. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Integrations -> LINE -> 打開 117
43. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Integrations -> LINE -> 打開 • 跟著步驟建立帳號、啟動Messaging API • Log in to console 118
44. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Line Developer Console • Select provider 選擇既有或新增 https://developers.line.biz/console/register/messaging-api/provider/ 119
45. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Create new channel • 輸入 App icon、name、description • 設定 Category、Subcategory • 輸入 Email address • Create 120
46. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 取得相關資訊 • 進入新建立的Channel -> Basic settings – 拿到Channel ID、Channel secret 貼至DialogFlow • 到第二分頁 Messaging Settings – Issue to get Channel access token 也貼過去 • 在DialogFlow那邊先按Start • 回到Line Console – Use webhooks Enabled – 把Webhook URL從DialogFlow那邊貼過來 – 把Auto-reply messages、Greeting messages Disabled 121
47. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 用QR code 加入自己的Chatbot • 用Line加入自己的Chatbot • 試著看看能不能看到剛才設定好的對話 122
48. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 電腦關機怎麼辦? 123
49. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 node_modules 不上傳 • 增加 .gitignore 檔案 – 裡面寫：node_modules/ 124
50. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 部署至Heroku • 註冊帳號 • 右上角 New -> Create new app • 設定App name：movie-bot-XXYYZZ • 區域：美國 • Create App https://www.heroku.com/ 125
51. Chatbot Development – Ryan@MobileDev.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 切換到專案資料夾路徑下，若已經在裡面則可忽略此步驟 126
52. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 開始部署上傳(每次更新步驟亦同) • git add . • git commit –am "make it better" • git push heroku master • heroku restart 雙引號這邊像是你的上傳筆記 在這裡寫上這次更新的內容 之後code更新時再加這一步 第一次不用 127
53. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 找到Heroku的網址 • Settinges分頁下拉 -> Domains and certificates https://dashboard.heroku.com/apps/YourAppName/settings • 其實網址就是 https://YourAppName.herokuapp.com 129
54. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 回到DialogFlow設定Fulfillment • Webhook Enabled https://YourAppName.herokuapp.com/webhook • 打完記得畫面拉至最下方，按下Save 130
55. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 再度進行測試 • 本地的Ngrok、VS Code 都可以關掉 • 進入DialogFlow -> 右方測試區 131
56. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 fulfillmentMessages - card https://dialogflow.com/docs/reference/v1-v2-migration-guide-fulfillment#fulfillment_message_objects "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/" } ] } } ] 132
57. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 fulfillmentMessages支援 • Text • Image https://dialogflow.com/docs/reference/v1-v2-migration-guide-fulfillment#fulfillment_message_objects • Quick Reply 133
58. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 對話流程 人 <-> 人 人 <-> Chatbot/VA 開啟對話 寒暄語 Hello、你好、嗨 喚醒語 Invocation 系統指定啟動語 Alexa, Hi Siri, OK Google 提出需求 台北的天氣如何？ 一般人均可直接理解對方的需求 釐清意圖 Intent 透過語句解析，確定對方的意圖是什麼 訓練 釐清意圖 N/A 由於同一意圖有多種表達方式 所以要多提供例句讓機器對應至特定意圖 取得 關鍵資訊 若對方漏說了地方與時間 持續問答取得資訊 取出關鍵資訊 Entity 預先定義好滿足該意圖所需的關鍵資訊 持續與使用者對話取得所有需求關鍵資訊 確認 條件滿足 跟對方確定取得必要資訊後 開始進行查詢 依據關鍵資訊與意圖 進行下一階段資料查詢(API 介接) 回應 回應查詢結果 新聞說今天臺北在下雨，氣溫19度 依據查詢結果 以文字、圖形或語音的方式回應 延伸問答 依據目前資訊的延伸問題 那明天的狀況也一樣嗎？ 須將既有輸入資訊暫存 更新資料查詢並進行回應 134
59. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 人機互動腳本準則 • 以人們真正會說的話來設計，而不是那種文章上的口吻 • 不要假設使用者知道要怎麼做或是知道會發生什麼事 真實 • 避免使用有多重含義的詞句、片語 • 引導使用者提供必要的資訊 明確 • 清楚地把選項呈現出來 • 一般而言，一次不要丟出超過三個選項 • 一次向使用者要一個資訊 簡單 135
60. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Recap • Dialogflow – 語意分析、前端整合 • TheMovieDB API – 資料來源 • Ngrok – 暫時讓本機變成 Server • Heroku – 雲端主機服務 • 電影其他資訊查詢 – 評分、演員、年代... • 電影時刻查詢 – 各地電影院時刻資料 • 多媒體 – 電影預告、電影配樂 • 電影推薦 – 測驗、查詢記錄... Extra 136
61. Chatbot Development – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Lab • 如何解決第一筆不是最相符資料的問題？ – 迴圈、判斷 – Test Case：超人 • The Movie DB API – discover – https://www.themoviedb.org/documentation/ api/discover 137