ECBot

Chatbot Development - Get Your Own Data

1. ECBot – Ryan@iii.org.tw Chatbot Development – Get Your Own Data III Digital Education Institute Ryan Chung 未來之星 – 菁英培育計畫 Source: https://alivetek.com 透過對話介面，經營電商小舖的老闆 可以讓消費者依據分類查詢商品，並 瀏覽熱門商品！ 1
2. ECBot – Ryan@iii.org.tw 資策會 數位教育研究所 ² 最新科技進修 Ø 在職夜間假日進修 Ø 轉職全天養成班 ² 資訊技術充電站 Ø 國際技術趨勢 Ø 職場必備能力 Ø 基本資訊技能 http://taipei.iiiedu.org.tw/ 2
3. ECBot – Ryan@iii.org.tw Ryan Chung ² 主要教授科目 Ø 語音助理應用開發 Ø Chatbot應用開發 Ø Web / App 應用 ² 資策會數位教育研究所 Ø 課程經理 / 養成班導師 Ø 企業包班 / 政府專案經理 Ø 課程專任講師 /專題輔導 http://mobiledev.tw/ryan 3
4. ECBot – Ryan@iii.org.tw 預期成果 – 在Line中呈現 4
5. ECBot – Ryan@iii.org.tw 電商機器人開發 1.0 • 目標 –輸入：查詢類別 –回傳：該類別的商品資訊 • 介面 –Line • 工具/技術 –DialogFlow –Node.JS • 資料 –自建資料，放置於Google Sheets 5
6. ECBot – Ryan@iii.org.tw 將商品資訊放在Google 試算表 • 進入Google 雲端硬碟，建一個Google Sheets • 第一列七個欄位寫：Number、Category、Name、 Price、Description、Photo、IsHot 6
7. ECBot – Ryan@iii.org.tw 商品瀏覽服務架構 • 語意分析 + 聊天機器人+ 資料庫 + 部署上線 FulFillment • 設定回應 Google Drive • 資料儲存 DialogFlow 意圖：商品瀏覽 資料：商品類別 SheetDB Line 7
8. ECBot – Ryan@iii.org.tw 開發流程 • 安裝所需工具以及準備好商品資料 – Google Account, Heroku Account, Heroku CLI • 分析使用者輸入，確定目的 – Google Dialogflow Natural Language Processing • 依據目的，取得使用者所需資料 – Fulfillment Programming • 將撰寫好的程式碼利用Ngrok暫時上線 – Using Ngrok to turn your NB to Server • 在Line中實際測試 – Integrate to Line 8
9. ECBot – Ryan@iii.org.tw 開發流程 • 安裝所需工具以及準備好商品資料 – Google Account, Heroku Account, Heroku CLI • 分析使用者輸入，確定目的 – Google Dialogflow Natural Language Processing • 依據目的，取得使用者所需資料 – Fulfillment Programming • 將撰寫好的程式碼利用Ngrok暫時上線 – Using Ngrok to turn your NB to Server • 在Line中實際測試 – Integrate to Line 9
10. ECBot – Ryan@iii.org.tw DialogFlow • Agent：ECbotXXYY • Language：zh-TW • Intent ：CheckProductsByCategory • Entities：CategoryType 訓練例句 10
11. ECBot – Ryan@iii.org.tw Dialogflow – 建立新的Agent • 輸入Agent名稱 – ECbotXXYY • 設定預設語言 – Chinese(Traditional) – zh-tw • 設定時區 – (GMT+8:00) Asia/Hong_Kong • 按下右上方CREATE按鈕 https://console.dialogflow.com/api-client/#/newAgent 11
12. ECBot – Ryan@iii.org.tw Dialogflow – 建立新的Intent • Intents -> CREATE INTENT –輸入Intent名稱為：CheckProductsByCategory • Training phrases 輸入常見例句 –ADD TRAINING PHRASES 12
13. ECBot – Ryan@iii.org.tw Dialogflow – 建立新的Entity • Entities -> CREATE ENTITY –輸入Entity名稱為：CategoryType • 輸入分類名稱以及同義字 13
14. ECBot – Ryan@iii.org.tw Intents -> Action and parameters • ADD PARAMETERS AND ACTION • 設定Category變數 14
15. ECBot – Ryan@iii.org.tw Responses & Fulfillment • 設定階段性完成回應 • 啟動Fulfillment -> ENABLE FULFILLMENT 15
16. ECBot – Ryan@iii.org.tw 標記例句中的關鍵資訊 • 選取例句中的分類關鍵字 • 選擇 @CategoryType:Category • 做完記得按下右上角的SAVE 16
17. ECBot – Ryan@iii.org.tw Intents -> Default Fallback & Welcome • 兩個都設定相同的回應，引導使用者說出符合瀏覽 商品意圖的例句 – 刪除其他預設回應句 – 改成如下的特定回應句 17
18. ECBot – Ryan@iii.org.tw 在右方測試區進行測試 18
19. ECBot – Ryan@iii.org.tw Integrations -> Web Demo • 打開Web Demo的開關 • 點擊跳出視窗中的網址 19
20. ECBot – Ryan@iii.org.tw DialogFlow 運作機制 Source: DialogFlow 20
21. ECBot – Ryan@iii.org.tw Webhook 1. 透過Webhook在雲端運行，DialogFlow透過 Webhook去取得所需的資料，再傳遞給使用者 2. 所有處理程序都在後端，前端可由所有支援的方 式來運作(網站、聊天機器人、語音助理...) 21
22. ECBot – Ryan@iii.org.tw 開發流程 • 安裝所需工具以及準備好商品資料 – Google Account, Heroku Account, Heroku CLI • 分析使用者輸入，確定目的 – Google Dialogflow Natural Language Processing • 依據目的，取得使用者所需資料 – Fulfillment Programming • 將撰寫好的程式碼利用Ngrok暫時上線 – Using Ngrok to turn your NB to Server • 在Line中實際測試 – Integrate to Line 22
23. ECBot – Ryan@iii.org.tw 開發前準備事項 • 安裝 VS Code –https://code.visualstudio.com/ • 安裝 Node –https://nodejs.org/en/download/ • 安裝 Ngrok –https://ngrok.com/download 23
24. ECBot – Ryan@iii.org.tw 安裝Node.js • 選擇穩定版 (Recommend For Most Users) – Windows Installer：下載msi檔 – macOS Installer：下載pkg檔 • 如何確認安裝? – 打開終端機，輸入：node -v https://nodejs.org/en/ 24
25. ECBot – Ryan@iii.org.tw 安裝Ngrok • 建議放置位置 – Windows：主要使用者資料夾 – Mac：應用程式 • 設定為在哪裡都可以執行 – Windows：我的電腦 -> 右鍵 -> 內容 -> 進階系統設定 -> 環境變數 -> 系統變數 -> Path -> 編輯 -> 新增 – Mac：ln -s /Applications/ngrok ngrok https://ngrok.com/download 25
26. ECBot – Ryan@iii.org.tw SheetDB.io • 用同一個Google帳號登入SheetDB.io • 將剛才試算表的網址貼到SheetDB.io網站 • 產生API URL 26
27. ECBot – Ryan@iii.org.tw 建立開發專案 • 專案資料夾：ECBot • 主要程式：index.js • 終端機指令(在VS Code中，按下 Ctrl + ~ 開啟終端機) npm init • package.json 在scripts中增加 "start":"node index.js", "debug":"node --inspect index.js" 27 https://github.com/ryan403/ECbot
28. ECBot – Ryan@iii.org.tw index.js 注意大小寫 28
29. ECBot – Ryan@iii.org.tw 依據查詢分類，取得Google試算表中的資料 29
30. ECBot – Ryan@iii.org.tw index.js • 用卡片方式呈現商品資訊 card.title card.subtitle card.imageUri card.buttons 30
31. ECBot – Ryan@iii.org.tw 設定SheetDB API Key • 新增config資料夾 • 在config資料夾中新增檔案：default.json • 增加productinfo_id (SheetDB API Key)
32. ECBot – Ryan@iii.org.tw 套件安裝 • 在VS Code中，按下 Ctrl + ~ 開啟終端機 • 安裝能夠一次安裝需求模組的套件 –在終端機輸入npm install npm-install-all -g –需要管理者權限(Mac加sudo) • 針對特定檔案中的需求來安裝套件 –在終端機輸入npm-install-all index.js 32
33. ECBot – Ryan@iii.org.tw 開發流程 • 安裝所需工具以及準備好商品資料 – Google Account, Heroku Account, Heroku CLI • 分析使用者輸入，確定目的 – Google Dialogflow Natural Language Processing • 依據目的，取得使用者所需資料 – Fulfillment Programming • 將撰寫好的程式碼利用Ngrok暫時上線 – Using Ngrok to turn your NB to Server • 在Line中實際測試 – Integrate to Line 33
34. ECBot – Ryan@iii.org.tw 執行並開啟除錯模式 • 點擊VS Code中左邊選單中的第四個(偵錯) • 上方Play按鈕右邊下拉新增組態... • 選擇「{ } Node.js 透過NPM 啟動」 • 按下Play按鈕 • 下方偵錯主控台確認伺服器是否已啟動 34
35. ECBot – Ryan@iii.org.tw 運用Ngrok讓開發機變成伺服器 • 在終端機執行 ngrok http 5000 • 複製產生的公開網址 (Forwarding https://.....) Copy this one 35
36. ECBot – Ryan@iii.org.tw DialogFlow Fulfillment • ENABLED、填完URL(後面加上/webhook)後，按下下方的Save 36
37. ECBot – Ryan@iii.org.tw 回到DialogFlow右方測試區進行測試 • 可順利連線，拿到衣服資料！ 37
38. ECBot – Ryan@iii.org.tw 開發流程 • 安裝所需工具以及準備好商品資料 – Google Account, Heroku Account, Heroku CLI • 分析使用者輸入，確定目的 – Google Dialogflow Natural Language Processing • 依據目的，取得使用者所需資料 – Fulfillment Programming • 將撰寫好的程式碼利用Ngrok暫時上線 – Using Ngrok to turn your NB to Server • 在Line中實際測試 – Integrate to Line 38
39. ECBot – Ryan@iii.org.tw Integrations -> LINE -> 打開 • 跟著步驟建立帳號、啟動Messaging API • Log in to console 39
40. ECBot – Ryan@iii.org.tw Line Developer Console • Select provider 選擇既有或新增 https://developers.line.me/console/register/messaging-api/provider/ 40
41. ECBot – Ryan@iii.org.tw Create new channel • 輸入 App icon、name、description • 選擇 Free Plan • 設定 Category、Subcategory • 輸入 Email address • Confirm 41
42. ECBot – 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 42
43. ECBot – Ryan@iii.org.tw 用QR code 加入自己的Chatbot • 用Line加入自己的Chatbot • 試著看看能不能看到剛才設 定好的對話 43
44. ECBot – Ryan@iii.org.tw 電腦關機怎麼辦? 44
45. ECBot – Ryan@iii.org.tw node_modules 不上傳 • 增加 .gitignore 檔案 –裡面寫：node_modules/ 45
46. ECBot – Ryan@iii.org.tw 部署至Heroku • 註冊帳號 • 右上角 New -> Create new app • 設定App name：ec-bot-XXYYZZ • 區域：美國 • Create App https://www.heroku.com/ 46
47. ECBot – 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中的專案名稱哦！ 通常長得像 ec-bot-xxyyzz 47
48. ECBot – Ryan@iii.org.tw 開始部署上傳(每次更新步驟亦同) • git add . • git commit –am "make it better" • git push heroku master • heroku restart 雙引號這邊像是你的上傳筆記 在這裡寫上這次更新的內容 之後code更新時再加這一步 第一次不用 48
49. ECBot – Ryan@iii.org.tw 啟動網站 • heroku ps:scale web=1 非常非常關鍵的一步，一定要記得做 49
50. ECBot – Ryan@iii.org.tw 找到Heroku的網址 • Domains and certificates https://dashboard.heroku.com/apps/YourAppName/settings • 其實網址就是 https://YourAppName.herokuapp.com 50
51. ECBot – Ryan@iii.org.tw 回到DialogFlow設定Fulfillment • Webhook Enabled https://YourAppName.herokuapp.com/webhook • 打完記得畫面拉至最下方，按下Save 51
52. ECBot – Ryan@iii.org.tw 再度進行測試 • 本地的Ngrok、VS Code 都可以關掉 • 進入DialogFlow -> 右方 測試區 52
53. ECBot – Ryan@iii.org.tw 整合至Facebook • Integrations -> Facebook Messenger 開關 53
54. ECBot – Ryan@iii.org.tw 整合至Facebook 54
55. ECBot – Ryan@iii.org.tw 建立粉絲專頁 – 依需求選擇 https://www.facebook.com/pages/creation/ 55
56. ECBot – Ryan@iii.org.tw 建立應用程式 • 取完名字後，設定Messenger • 選擇粉絲專頁產生存取權杖 • 貼回DialogFlow • 設定Verify Token：任意字串均可 • 複製Callback URL，回到FB應用程式 • 設定Webhooks回呼網址、驗證權杖(Verify Token) • 勾選messages, messaging_postbacks • 設定應用程式訂閱對應的粉絲專頁 https://developers.facebook.com/ 56
57. ECBot – Ryan@iii.org.tw 粉絲專頁 • 回到粉絲專頁。。。以粉絲專頁訪客角度檢視 • 按下傳送訊息開始測試 57
58. ECBot – Ryan@iii.org.tw FB應用程式 • 新增測試人員 –左邊面板 -> 角色 -> 角色 -> 測試人員 –回到粉絲專頁傳送訊息進行測試 • 正式上線 –應用程式 -> 應用程式審查 -> 開始提交 58
59. ECBot – 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/" } ] } } ] 59
60. ECBot – Ryan@iii.org.tw fulfillmentMessages支援 • Text • Image https://dialogflow.com/docs/reference/v1-v2-migration-guide-fulfillment#fulfillment_messages_reference • Quick Reply 60
61. ECBot – Ryan@iii.org.tw 對話流程 人 <-> 人 人 <-> Chatbot/VA 開啟對話 寒暄語 Hello、你好、嗨 喚醒語 Invocation 系統指定啟動語 Alexa, Hi Siri, OK Google 提出需求 台北的天氣如何？ 一般人均可直接理解對方的需求 釐清意圖 Intent 透過語句解析，確定對方的意圖是什麼 訓練 釐清意圖 N/A 由於同一意圖有多種表達方式 所以要多提供例句讓機器對應至特定意圖 取得 關鍵資訊 若對方漏說了地方與時間 持續問答取得資訊 取出關鍵資訊 Entity 預先定義好滿足該意圖所需的關鍵資訊 持續與使用者對話取得所有需求關鍵資訊 確認 條件滿足 跟對方確定取得必要資訊後 開始進行查詢 依據關鍵資訊與意圖 進行下一階段資料查詢(API 介接) 回應 回應查詢結果 新聞說今天臺北在下雨，氣溫19度 依據查詢結果 以文字、圖形或語音的方式回應 延伸問答 依據目前資訊的延伸問題 那明天的狀況也一樣嗎？ 須將既有輸入資訊暫存 更新資料查詢並進行回應 61
62. ECBot – Ryan@iii.org.tw 人機互動腳本準則 • 以人們真正會說的話來設計，而不是那種文章上的口吻 • 不要假設使用者知道要怎麼做或是知道會發生什麼事 真實 • 避免使用有多重含義的詞句、片語 • 引導使用者提供必要的資訊 明確 • 清楚地把選項呈現出來 • 一般而言，一次不要丟出超過三個選項 • 一次向使用者要一個資訊 簡單 62
63. ECBot – Ryan@iii.org.tw Recap • Dialogflow – 語意分析、前端整合 • SheetDB API – 取用Google Sheets • Ngrok – 暫時讓本機變成Server • Heroku – 雲端主機服務 • 換成自己喜歡的資料 – 藝人、動物、收藏... • 新增資料 – 問卷調查、資料登記 • 更新資料 – 狀態改變、家電控制 • 商品推薦 – 測驗、查詢記錄... Extra 63
64. ECBot – Ryan@iii.org.tw 敬請指教 Ryan Chung Senior Engineer III Digital Education Institute Ryan@iii.org.tw 64