ECBot - Speaker Deck

Slide 1

Slide 1 text

ECBot – [email protected] Chatbot Development – Get Your Own Data III Digital Education Institute Ryan Chung 未來之星 – 菁英培育計畫 Source: https://alivetek.com 透過對話介面，經營電商小舖的老闆可以讓消費者依據分類查詢商品，並瀏覽熱門商品！ 1

Slide 2

Slide 2 text

ECBot – [email protected] 資策會數位教育研究所 ² 最新科技進修 Ø 在職夜間假日進修 Ø 轉職全天養成班 ² 資訊技術充電站 Ø 國際技術趨勢 Ø 職場必備能力 Ø 基本資訊技能 http://taipei.iiiedu.org.tw/ 2

Slide 3

Slide 3 text

ECBot – [email protected] Ryan Chung ² 主要教授科目 Ø 語音助理應用開發 Ø Chatbot應用開發 Ø Web / App 應用 ² 資策會數位教育研究所 Ø 課程經理 / 養成班導師 Ø 企業包班 / 政府專案經理 Ø 課程專任講師 /專題輔導 http://mobiledev.tw/ryan 3

Slide 4

Slide 4 text

ECBot – [email protected] 預期成果 – 在Line中呈現 4

Slide 5

Slide 5 text

ECBot – [email protected] 電商機器人開發 1.0 • 目標 –輸入：查詢類別 –回傳：該類別的商品資訊 • 介面 –Line • 工具/技術 –DialogFlow –Node.JS • 資料 –自建資料，放置於Google Sheets 5

Slide 6

Slide 6 text

ECBot – [email protected] 將商品資訊放在Google 試算表 • 進入Google 雲端硬碟，建一個Google Sheets • 第一列七個欄位寫：Number、Category、Name、 Price、Description、Photo、IsHot 6

Slide 7

Slide 7 text

ECBot – [email protected] 商品瀏覽服務架構 • 語意分析 + 聊天機器人+ 資料庫 + 部署上線 FulFillment • 設定回應 Google Drive • 資料儲存 DialogFlow 意圖：商品瀏覽資料：商品類別 SheetDB Line 7

Slide 8

Slide 8 text

ECBot – [email protected] 開發流程 • 安裝所需工具以及準備好商品資料 – 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

Slide 9

Slide 9 text

Slide 10

Slide 10 text

ECBot – [email protected] DialogFlow • Agent：ECbotXXYY • Language：zh-TW • Intent ：CheckProductsByCategory • Entities：CategoryType 訓練例句 10

Slide 11

Slide 11 text

ECBot – [email protected] Dialogflow – 建立新的Agent • 輸入Agent名稱 – ECbotXXYY • 設定預設語言 – Chinese(Traditional) – zh-tw • 設定時區 – (GMT+8:00) Asia/Hong_Kong • 按下右上方CREATE按鈕 https://console.dialogflow.com/api-client/#/newAgent 11

Slide 12

Slide 12 text

ECBot – [email protected] Dialogflow – 建立新的Intent • Intents -> CREATE INTENT –輸入Intent名稱為：CheckProductsByCategory • Training phrases 輸入常見例句 –ADD TRAINING PHRASES 12

Slide 13

Slide 13 text

ECBot – [email protected] Dialogflow – 建立新的Entity • Entities -> CREATE ENTITY –輸入Entity名稱為：CategoryType • 輸入分類名稱以及同義字 13

Slide 14

Slide 14 text

ECBot – [email protected] Intents -> Action and parameters • ADD PARAMETERS AND ACTION • 設定Category變數 14

Slide 15

Slide 15 text

ECBot – [email protected] Responses & Fulfillment • 設定階段性完成回應 • 啟動Fulfillment -> ENABLE FULFILLMENT 15

Slide 16

Slide 16 text

ECBot – [email protected] 標記例句中的關鍵資訊 • 選取例句中的分類關鍵字 • 選擇 @CategoryType:Category • 做完記得按下右上角的SAVE 16

Slide 17

Slide 17 text

ECBot – [email protected] Intents -> Default Fallback & Welcome • 兩個都設定相同的回應，引導使用者說出符合瀏覽商品意圖的例句 – 刪除其他預設回應句 – 改成如下的特定回應句 17

Slide 18

Slide 18 text

ECBot – [email protected] 在右方測試區進行測試 18

Slide 19

Slide 19 text

ECBot – [email protected] Integrations -> Web Demo • 打開Web Demo的開關 • 點擊跳出視窗中的網址 19

Slide 20

Slide 20 text

ECBot – [email protected] DialogFlow 運作機制 Source: DialogFlow 20

Slide 21

Slide 21 text

ECBot – [email protected] Webhook 1. 透過Webhook在雲端運行，DialogFlow透過 Webhook去取得所需的資料，再傳遞給使用者 2. 所有處理程序都在後端，前端可由所有支援的方式來運作(網站、聊天機器人、語音助理...) 21

Slide 22

Slide 22 text

Slide 23

Slide 23 text

ECBot – [email protected] 開發前準備事項 • 安裝 VS Code –https://code.visualstudio.com/ • 安裝 Node –https://nodejs.org/en/download/ • 安裝 Ngrok –https://ngrok.com/download 23

Slide 24

Slide 24 text

ECBot – [email protected] 安裝Node.js • 選擇穩定版 (Recommend For Most Users) – Windows Installer：下載msi檔 – macOS Installer：下載pkg檔 • 如何確認安裝? – 打開終端機，輸入：node -v https://nodejs.org/en/ 24

Slide 25

Slide 25 text

ECBot – [email protected] 安裝Ngrok • 建議放置位置 – Windows：主要使用者資料夾 – Mac：應用程式 • 設定為在哪裡都可以執行 – Windows：我的電腦 -> 右鍵 -> 內容 -> 進階系統設定 -> 環境變數 -> 系統變數 -> Path -> 編輯 -> 新增 – Mac：ln -s /Applications/ngrok ngrok https://ngrok.com/download 25

Slide 26

Slide 26 text

ECBot – [email protected] SheetDB.io • 用同一個Google帳號登入SheetDB.io • 將剛才試算表的網址貼到SheetDB.io網站 • 產生API URL 26

Slide 27

Slide 27 text

ECBot – [email protected] 建立開發專案 • 專案資料夾：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

Slide 28

Slide 28 text

ECBot – [email protected] index.js 注意大小寫 28

Slide 29

Slide 29 text

ECBot – [email protected] 依據查詢分類，取得Google試算表中的資料 29

Slide 30

Slide 30 text

ECBot – [email protected] index.js • 用卡片方式呈現商品資訊 card.title card.subtitle card.imageUri card.buttons 30

Slide 31

Slide 31 text

ECBot – [email protected] 設定SheetDB API Key • 新增config資料夾 • 在config資料夾中新增檔案：default.json • 增加productinfo_id (SheetDB API Key)

Slide 32

Slide 32 text

ECBot – [email protected] 套件安裝 • 在VS Code中，按下 Ctrl + ~ 開啟終端機 • 安裝能夠一次安裝需求模組的套件 –在終端機輸入npm install npm-install-all -g –需要管理者權限(Mac加sudo) • 針對特定檔案中的需求來安裝套件 –在終端機輸入npm-install-all index.js 32

Slide 33

Slide 33 text

Slide 34

Slide 34 text

ECBot – [email protected] 執行並開啟除錯模式 • 點擊VS Code中左邊選單中的第四個(偵錯) • 上方Play按鈕右邊下拉新增組態... • 選擇「{ } Node.js 透過NPM 啟動」 • 按下Play按鈕 • 下方偵錯主控台確認伺服器是否已啟動 34

Slide 35

Slide 35 text

ECBot – [email protected] 運用Ngrok讓開發機變成伺服器 • 在終端機執行 ngrok http 5000 • 複製產生的公開網址 (Forwarding https://.....) Copy this one 35

Slide 36

Slide 36 text

ECBot – [email protected] DialogFlow Fulfillment • ENABLED、填完URL(後面加上/webhook)後，按下下方的Save 36

Slide 37

Slide 37 text

ECBot – [email protected] 回到DialogFlow右方測試區進行測試 • 可順利連線，拿到衣服資料！ 37

Slide 38

Slide 38 text

Slide 39

Slide 39 text

ECBot – [email protected] Integrations -> LINE -> 打開 • 跟著步驟建立帳號、啟動Messaging API • Log in to console 39

Slide 40

Slide 40 text

ECBot – [email protected] Line Developer Console • Select provider 選擇既有或新增 https://developers.line.me/console/register/messaging-api/provider/ 40

Slide 41

Slide 41 text

ECBot – [email protected] Create new channel • 輸入 App icon、name、description • 選擇 Free Plan • 設定 Category、Subcategory • 輸入 Email address • Confirm 41

Slide 42

Slide 42 text

ECBot – [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 42

Slide 43

Slide 43 text

ECBot – [email protected] 用QR code 加入自己的Chatbot • 用Line加入自己的Chatbot • 試著看看能不能看到剛才設定好的對話 43

Slide 44

Slide 44 text

ECBot – [email protected] 電腦關機怎麼辦? 44

Slide 45

Slide 45 text

ECBot – [email protected] node_modules 不上傳 • 增加 .gitignore 檔案 –裡面寫：node_modules/ 45

Slide 46

Slide 46 text

ECBot – [email protected] 部署至Heroku • 註冊帳號 • 右上角 New -> Create new app • 設定App name：ec-bot-XXYYZZ • 區域：美國 • Create App https://www.heroku.com/ 46

Slide 47

Slide 47 text

ECBot – [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中的專案名稱哦！通常長得像 ec-bot-xxyyzz 47

Slide 48

Slide 48 text

ECBot – [email protected] 開始部署上傳(每次更新步驟亦同) • git add . • git commit –am "make it better" • git push heroku master • heroku restart 雙引號這邊像是你的上傳筆記在這裡寫上這次更新的內容之後code更新時再加這一步第一次不用 48

Slide 49

Slide 49 text

ECBot – [email protected] 啟動網站 • heroku ps:scale web=1 非常非常關鍵的一步，一定要記得做 49

Slide 50

Slide 50 text

ECBot – [email protected] 找到Heroku的網址 • Domains and certificates https://dashboard.heroku.com/apps/YourAppName/settings • 其實網址就是 https://YourAppName.herokuapp.com 50

Slide 51

Slide 51 text

ECBot – [email protected] 回到DialogFlow設定Fulfillment • Webhook Enabled https://YourAppName.herokuapp.com/webhook • 打完記得畫面拉至最下方，按下Save 51

Slide 52

Slide 52 text

ECBot – [email protected] 再度進行測試 • 本地的Ngrok、VS Code 都可以關掉 • 進入DialogFlow -> 右方測試區 52

Slide 53

Slide 53 text

ECBot – [email protected] 整合至Facebook • Integrations -> Facebook Messenger 開關 53

Slide 54

Slide 54 text

ECBot – [email protected] 整合至Facebook 54

Slide 55

Slide 55 text

ECBot – [email protected] 建立粉絲專頁 – 依需求選擇 https://www.facebook.com/pages/creation/ 55

Slide 56

Slide 56 text

ECBot – [email protected] 建立應用程式 • 取完名字後，設定Messenger • 選擇粉絲專頁產生存取權杖 • 貼回DialogFlow • 設定Verify Token：任意字串均可 • 複製Callback URL，回到FB應用程式 • 設定Webhooks回呼網址、驗證權杖(Verify Token) • 勾選messages, messaging_postbacks • 設定應用程式訂閱對應的粉絲專頁 https://developers.facebook.com/ 56

Slide 57

Slide 57 text

ECBot – [email protected] 粉絲專頁 • 回到粉絲專頁。。。以粉絲專頁訪客角度檢視 • 按下傳送訊息開始測試 57

Slide 58

Slide 58 text

ECBot – [email protected] FB應用程式 • 新增測試人員 –左邊面板 -> 角色 -> 角色 -> 測試人員 –回到粉絲專頁傳送訊息進行測試 • 正式上線 –應用程式 -> 應用程式審查 -> 開始提交 58

Slide 59

Slide 59 text

ECBot – [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/" } ] } } ] 59

Slide 60

Slide 60 text

ECBot – [email protected] fulfillmentMessages支援 • Text • Image https://dialogflow.com/docs/reference/v1-v2-migration-guide-fulfillment#fulfillment_messages_reference • Quick Reply 60

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

ECBot – [email protected] Recap • Dialogflow – 語意分析、前端整合 • SheetDB API – 取用Google Sheets • Ngrok – 暫時讓本機變成Server • Heroku – 雲端主機服務 • 換成自己喜歡的資料 – 藝人、動物、收藏... • 新增資料 – 問卷調查、資料登記 • 更新資料 – 狀態改變、家電控制 • 商品推薦 – 測驗、查詢記錄... Extra 63

Slide 64

Slide 64 text

ECBot – [email protected] 敬請指教 Ryan Chung Senior Engineer III Digital Education Institute [email protected] 64