Chatbot Development - Using DialogFlow

http://MobileDev.TW

1. 人工智慧語意分析工具應用 Ryan@iii.org.tw 人工智慧語意分析工具 Dialogflow(API.ai) Ryan@iii.org.tw III Digital Education Institute 1
2. 人工智慧語意分析工具應用 Ryan@iii.org.tw 實作範例 • 天氣機器人 –語意確認 –資料查詢 –五日查詢 • 電影機器人 –文法規則 –電影資料庫 –查詢比對 2 • 電商機器人 –自建資料 –自訂型態 –圖文卡片 • 電燈開關 –資料更新 –網頁模擬 –物聯網概念
3. 人工智慧語意分析工具應用 Ryan@iii.org.tw 問題 • 如何讓機器人聽得懂人話？ – 特定指令 – 日常生活會說的句子 明天下午三點 到北車集合 4月22日15:00在 台北火車站碰面 明天下午三點整在 北平西路3號會合 哈摟！我看明天我們 就在台北車站碰面好 了，下午三點，要記 得哦 ㄟ，還記得明天的約 會嗎？是下午三點， 在火車站，別遲到！ 提醒你一下，三點在 北車碰頭，不見不散 ！ 3
4. 人工智慧語意分析工具應用 Ryan@iii.org.tw 天氣機器人開發 1.0 • 目標 – 輸入：時間、地點 – 回傳：天氣概況、溫度 • 介面 – Web Chat • 工具/技術 – Dialogflow – Node.JS 4
5. 人工智慧語意分析工具應用 Ryan@iii.org.tw Dialogflow.com -> Go to console 5 https://dialogflow.com/
6. 人工智慧語意分析工具應用 Ryan@iii.org.tw Sign in with Google 6
7. 人工智慧語意分析工具應用 Ryan@iii.org.tw Create New Agent 7
8. 人工智慧語意分析工具應用 Ryan@iii.org.tw Create New Agent 8
9. 人工智慧語意分析工具應用 Ryan@iii.org.tw 語意分析常見名詞 • Intent 意圖 – 使用者對談的目的 • Entity 關鍵資訊 – 達成目的的必要輸入資訊 • Utterance 例句 – 使用者常用的句型 9
10. 人工智慧語意分析工具應用 Ryan@iii.org.tw Create Intent 10
11. 人工智慧語意分析工具應用 Ryan@iii.org.tw 輸入 Intent 名稱後，按下Save 11
12. 人工智慧語意分析工具應用 Ryan@iii.org.tw 進入 Training phrases 區塊 • 點擊下方Add Training Phrases 12
13. 人工智慧語意分析工具應用 Ryan@iii.org.tw 輸入對應此Intent會出現的句子 • How is the weather? • How is the weather today? • What is the weather like in Taipei tomorrow? 13
14. 人工智慧語意分析工具應用 Ryan@iii.org.tw 系統自動偵測了一些關鍵資訊與型態 14
15. 人工智慧語意分析工具應用 Ryan@iii.org.tw 進入變數與對應行動的設定 • 點擊下方 Manage Parameters and Action 15
16. 人工智慧語意分析工具應用 Ryan@iii.org.tw 標示必要資訊，並引導使用者輸入 • 決定哪些偵測到的資訊是必要的，在前方打勾 • 必要資訊還沒收集到時，設定提示句向使用者索 取必要資訊 (Define prompts...) 16
17. 人工智慧語意分析工具應用 Ryan@iii.org.tw 追問出日期 17
18. 人工智慧語意分析工具應用 Ryan@iii.org.tw 追問出城市 18
19. 人工智慧語意分析工具應用 Ryan@iii.org.tw 設定回應 • 點擊下方的 Add Response • 意圖確認，並且拿到必要的關鍵資訊 19
20. 人工智慧語意分析工具應用 Ryan@iii.org.tw 設定確認回應後，按下右上角Save Agent Trained Complete 20
21. 人工智慧語意分析工具應用 Ryan@iii.org.tw 在右上角測試看看 21
22. 人工智慧語意分析工具應用 Ryan@iii.org.tw 用Web Demo網頁展示 • 點擊左方選單中的 Integrations • 將Web Demo的開關打開 22
23. 人工智慧語意分析工具應用 Ryan@iii.org.tw 用Web Demo網頁展示 • 點擊出現的網址 • 出現網頁對話視窗！測試看看 23
24. 人工智慧語意分析工具應用 Ryan@iii.org.tw 結合Open Weather Map https://openweathermap.org/ 24
25. 人工智慧語意分析工具應用 Ryan@iii.org.tw 註冊帳號 https://home.openweathermap.org/users/sign_up 25
26. 人工智慧語意分析工具應用 Ryan@iii.org.tw 產生API Key https://home.openweathermap.org/api_keys 26
27. 人工智慧語意分析工具應用 Ryan@iii.org.tw 測試使用 API - By city name 27 https://openweathermap.org/current
28. 人工智慧語意分析工具應用 Ryan@iii.org.tw Lab：測試語法 28 • 目標 – 在瀏覽器中得到天氣資訊 • 運用 – 剛剛取得的API Key – API網址 – 參數
29. 人工智慧語意分析工具應用 Ryan@iii.org.tw DialogFlow 運作機制 Source: DialogFlow 29
30. 人工智慧語意分析工具應用 Ryan@iii.org.tw 網頁基本運作 1. 在瀏覽器中輸入網址，依據網址向對應的伺服器 要資料 2. 依資料類型： – 靜態資料直接傳回：一般HTML, CSS, JS, 圖片, 文字... – 動態程式先執行再傳回結果：PHP, Node, ASP, JSP,... 30
31. 人工智慧語意分析工具應用 Ryan@iii.org.tw Webhook 1. 透過Webhook在雲端運行，DialogFlow透過 Webhook去取得所需的資料，再傳遞給使用者 2. 所有處理程序都在後端，前端可由所有支援的方 式來運作(網站、聊天機器人、語音助理...) 31
32. 人工智慧語意分析工具應用 Ryan@iii.org.tw 實作：Webhook建立 使用天氣機器人1.0為基底 32
33. 人工智慧語意分析工具應用 Ryan@iii.org.tw 啟動webhook • 在DialogFlow中，進入WeatherBot專案 • 點擊左邊Intents，然後進入「Get Weather Status」Intent • 最下方Fulfillment右方箭頭展開 – Enable Fulfillment • 打開開關 Enable webhook call for this intent • 右上角 Save 33
34. 人工智慧語意分析工具應用 Ryan@iii.org.tw 確認設定為V2 API • 點擊專案名稱旁邊的齒輪 • General -> API Version • 選擇 V2 API 34
35. 人工智慧語意分析工具應用 Ryan@iii.org.tw 安裝Node.js • 選擇穩定版 (Recommend For Most Users) – Windows Installer：下載msi檔 – macOS Installer：下載pkg檔 • 如何確認安裝? – 打開終端機，輸入：node -v https://nodejs.org/en/ 35
36. 人工智慧語意分析工具應用 Ryan@iii.org.tw 安裝Ngrok • 建議放置位置 – Windows：主要使用者資料夾 – Mac：應用程式 • 設定為在哪裡都可以執行 – Windows：進階系統設定 -> 環境變數 -> 系統變數 -> Path -> 編輯 -> 新增 – Mac：ln -s /Applications/ngrok ngrok https://ngrok.com/download 36
37. 人工智慧語意分析工具應用 Ryan@iii.org.tw 建立專案資料夾 • 新增一個資料夾作為專案資料夾 WeatherBot • 用VS Code 開啟此專案資料夾 • 新增一個檔案：index.js 37
38. 人工智慧語意分析工具應用 Ryan@iii.org.tw 建立index.js 輸入程式碼 38
39. 人工智慧語意分析工具應用 Ryan@iii.org.tw 繼續於 index.js 輸入程式碼 39 https://github.com/ryan403/WeatherBot
40. 人工智慧語意分析工具應用 Ryan@iii.org.tw 設定Open Weather Map API Key • 新增config資料夾 • 在config資料夾中新增檔案：default.json Your API Key here 40 專案內檔案
41. 人工智慧語意分析工具應用 Ryan@iii.org.tw 專案初始化 • 在VS Code中，按下 Ctrl + ~ 開啟終端機 • 輸入npm init • 按下多次enter，使用預設值建立package.json 安裝需要的套件 • 在VS Code中，按下 Ctrl + ~ 開啟終端機 • 安裝能夠一次安裝需求模組的套件 – 在終端機輸入npm install npm-install-all -g • 針對特定檔案中的需求來安裝套件 – 在終端機輸入npm-install-all index.js 41
42. 人工智慧語意分析工具應用 Ryan@iii.org.tw 增加Debug與Start Scripts • 在 package.json 新增 • debug：在地測試、start：伺服器上線 42
43. 人工智慧語意分析工具應用 Ryan@iii.org.tw 執行並開啟除錯模式 • 點擊VS Code中左邊選單中的第四個(偵錯) • 上方Play按鈕右邊下拉新增設定... 選Node.js • 再一次，新增設定，選擇「{ } Node.js 透過NPM 啟動」 • 按下Play按鈕 • 下方偵錯主控台確認伺服器是否已啟動 43
44. 人工智慧語意分析工具應用 Ryan@iii.org.tw 運用Ngrok讓開發機變成伺服器 • 在終端機執行 ngrok http 5000 • 複製產生的公開網址 (Forwarding https://.....) Copy this one 44
45. 人工智慧語意分析工具應用 Ryan@iii.org.tw 設定DialogFlow的Webhook • ENABLED、填完URL(後面加上/webhook)後，按下下方的Save 45
46. 人工智慧語意分析工具應用 Ryan@iii.org.tw 回到Web Demo進行測試 • 可順利連線，拿到天氣資料！ 46 https://github.com/ryan403/WeatherBot
47. 人工智慧語意分析工具應用 Ryan@iii.org.tw 電腦關機怎麼辦? 47
48. 人工智慧語意分析工具應用 Ryan@iii.org.tw node_modules 不上傳 • 增加 .gitignore 檔案 – 裡面寫：node_modules/ 48
49. 人工智慧語意分析工具應用 Ryan@iii.org.tw 部署至Heroku • 註冊帳號 • 右上角 New -> Create new app • 設定App name：weather-bot-XXYYZZ • 區域：美國 • Create App https://www.heroku.com/ 49
50. 人工智慧語意分析工具應用 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 切換到專案資料夾路徑下，若已經在裡面則可忽略此步驟 50
51. 人工智慧語意分析工具應用 Ryan@iii.org.tw 開始部署上傳(每次更新步驟亦同) • git add . • git commit –am "make it better" • git push heroku master • heroku restart 雙引號這邊像是你的上傳筆記 在這裡寫上這次更新的內容 之後code更新時再加這一步 第一次不用 51
52. 人工智慧語意分析工具應用 Ryan@iii.org.tw 啟動網站 • heroku ps:scale web=1 非常非常關鍵的一步，一定要記得做 52
53. 人工智慧語意分析工具應用 Ryan@iii.org.tw 找到Heroku的網址 • Settinges分頁下拉 -> Domains and certificates https://dashboard.heroku.com/apps/YourAppName/settings • 其實網址就是 https://YourAppName.herokuapp.com 53
54. 人工智慧語意分析工具應用 Ryan@iii.org.tw 回到DialogFlow設定Fulfillment • Webhook Enabled https://YourAppName.herokuapp.com/webhook • 打完記得畫面拉至最下方，按下Save 54
55. 人工智慧語意分析工具應用 Ryan@iii.org.tw 再度進行測試 • 本地的Ngrok、VS Code 都可以關掉 • 進入DialogFlow -> Integrations -> Web Demo 55
56. 人工智慧語意分析工具應用 Ryan@iii.org.tw Integrations -> LINE -> 打開 56
57. 人工智慧語意分析工具應用 Ryan@iii.org.tw Line Developer Console • Select provider 選擇既有或新增 https://developers.line.me/console/register/messaging-api/provider/ 57
58. 人工智慧語意分析工具應用 Ryan@iii.org.tw Create new channel • 輸入 App icon、name、description • 選擇 Developer Trial • 設定 Category、Subcategory • 輸入 Email address • Confirm 58
59. 人工智慧語意分析工具應用 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 59
60. 人工智慧語意分析工具應用 Ryan@iii.org.tw 用QR code 加入自己的Chatbot • 用Line加入自己的Chatbot • 試著看看能不能看到剛才設定好的對話 60
61. 人工智慧語意分析工具應用 Ryan@iii.org.tw 常見問題 • Webhook沒有啟動 – Channel settings – 或是從Line@Manager檢查(https://admin-official.line.me) • Heroku沒有啟動 – heroku ps:scale web=1 • Webhook URL搞錯 – 貼到Line的Webhook URL是從Dialogflow產生的，不是 Heroku的網址 61
62. 人工智慧語意分析工具應用 Ryan@iii.org.tw 系統架構 62 Line Messaging API 語意分析 意圖釐清 關鍵資訊取得 後續處理 特殊判斷 天氣資料
63. 人工智慧語意分析工具應用 Ryan@iii.org.tw 延伸實作一 • 如何查詢特定日期天氣？ – 使用OpenWeatherMap的五日預測 https://openweathermap.org/forecast5 63
64. 人工智慧語意分析工具應用 Ryan@iii.org.tw 五日預測會拿到什麼？ • list – 陣列 – 所有預測資料 • main.temp – 氣溫 • weather[0].description – 天氣描述 • dt_txt – 日期時間 64
65. 人工智慧語意分析工具應用 Ryan@iii.org.tw 修改程式碼 • 更換呼叫的網址 • 找到對應的日期，回傳資料 – 使用迴圈 – 使用字串切割，比對日期 – 找到之後，跳離迴圈 65
66. 人工智慧語意分析工具應用 Ryan@iii.org.tw 升級成可查詢特定日期的版本 66
67. 人工智慧語意分析工具應用 Ryan@iii.org.tw 延伸實作二 • 如何得到天氣概況圖？ – 回傳的weather陣列中的資料，有一個icon 68
68. 人工智慧語意分析工具應用 Ryan@iii.org.tw icon值即為天氣圖的檔案名稱 • https://openweathermap.org/img/w/03n.png 69
69. 人工智慧語意分析工具應用 Ryan@iii.org.tw 練習 • 用卡片顯示天氣圖片、溫度與概況 70
70. 人工智慧語意分析工具應用 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/" } ] } } ] 71
71. 人工智慧語意分析工具應用 Ryan@iii.org.tw Lab : 回傳一個文字、一個影像 74 • Text • Image https://dialogflow.com/docs/reference/v1-v2-migration-guide-fulfillment#fulfillment_messages_reference • Quick Reply
72. 人工智慧語意分析工具應用 Ryan@iii.org.tw OpenWeatherMap 多國語系支援 • lang=zh_tw 76
73. 人工智慧語意分析工具應用 Ryan@iii.org.tw 練習：電影機器人開發 1.0 • 目標 – 輸入：電影名稱 – 回傳：簡介、海報 • 介面 – Line • 工具/技術 – DialogFlow – Node.JS • 資料 – theMovieDB.org 77
74. 人工智慧語意分析工具應用 Ryan@iii.org.tw MovieBot 架構 • 語意分析 + 聊天機器人+ 電影資料庫 + 部署上線 FulFillment • 設定回應 The Movie DB • 電影資料 DialogFlow 意圖：查詢電影簡介 資料：電影名稱 API Line 78
75. 人工智慧語意分析工具應用 Ryan@iii.org.tw 產品預期畫面 79
76. 人工智慧語意分析工具應用 Ryan@iii.org.tw Dialogflow 80
77. 人工智慧語意分析工具應用 Ryan@iii.org.tw Create New Agent 81
78. 人工智慧語意分析工具應用 Ryan@iii.org.tw Create New Agent • 建立Agent – 名稱：MovieBot – 語言：zh-tw 82
79. 人工智慧語意分析工具應用 Ryan@iii.org.tw Create Intent 83
80. 人工智慧語意分析工具應用 Ryan@iii.org.tw 輸入 Intent 名稱後，按下Save 84
81. 人工智慧語意分析工具應用 Ryan@iii.org.tw 進入 Training phrases 區塊 • 點擊下方Add Training Phrases 85
82. 人工智慧語意分析工具應用 Ryan@iii.org.tw 輸入對應此Intent會出現的句子 • 輸入例句 – ❞我想要查電影簡介 – ❞我想知道教父的劇情 • 把教父反白，選擇 @sys.any，設定變數名稱為MovieName 86
83. 人工智慧語意分析工具應用 Ryan@iii.org.tw 進入變數與對應行動的設定 • 點擊下方 Manage Parameters and Action 87
84. 人工智慧語意分析工具應用 Ryan@iii.org.tw 標示必要資訊，並引導使用者輸入 • 決定哪些偵測到的資訊是必要的，在前方打勾 • 必要資訊還沒收集到時，設定提示句向使用者索 取必要資訊 (Define prompts...) • 點擊 Define prompts... 88
85. 人工智慧語意分析工具應用 Ryan@iii.org.tw 追問出電影名稱 • 輸入引導使用者說出電影名稱的句子 89
86. 人工智慧語意分析工具應用 Ryan@iii.org.tw 設定回應 • 點擊下方的 Add Response • 意圖確認，並且拿到必要的關鍵資訊 90
87. 人工智慧語意分析工具應用 Ryan@iii.org.tw 設定確認回應後，按下右上角Save • 存檔完成後，過一會右下方會出現訓練完成訊息 Agent Training Completed 91
88. 人工智慧語意分析工具應用 Ryan@iii.org.tw 在右上角測試看看 92
89. 人工智慧語意分析工具應用 Ryan@iii.org.tw 用Web Demo網頁展示 • 點擊左方選單中的 Integrations • 將Web Demo的開關打開 93
90. 人工智慧語意分析工具應用 Ryan@iii.org.tw 用Web Demo網頁展示 • 點擊出現的網址 • 出現網頁對話視窗！測試看看 94
91. 人工智慧語意分析工具應用 Ryan@iii.org.tw DialogFlow Recap • 建立Agent – 名稱：MovieBot – 語言：zh-TW • 建立Intent – 名稱：Get Movie Intro • 輸入例句 – ❞我想要查電影簡介 – ❞我想知道教父的劇情 • 把教父反白，選擇 @sys.any，設定變數名稱為MovieName 95
92. 人工智慧語意分析工具應用 Ryan@iii.org.tw DialogFlow • 設定需求變數與反問句 – 將MovieName打勾 – 設定反問句：請問你要查詢的電影名稱是？ • 設定確認回饋句 – 了解，馬上為你查詢$MovieName的劇情簡介 96
93. 人工智慧語意分析工具應用 Ryan@iii.org.tw 實作：Webhook建立 確認目標，取得資料 97
94. 人工智慧語意分析工具應用 Ryan@iii.org.tw 啟動webhook • 在DialogFlow中，進入MovieBot專案 • 點擊左邊Intents，然後進入「Get Movie Intro」Intent • 最下方Fulfillment，點擊 Enable Fulfillment • 打開 Enable webhook call for this intent • 右上方點擊Save 98
95. 人工智慧語意分析工具應用 Ryan@iii.org.tw 確認設定為V2 API • 點擊專案名稱旁邊的齒輪 • General -> API Version • 選擇 V2 API 99
96. 人工智慧語意分析工具應用 Ryan@iii.org.tw 開發前準備事項 • 安裝 VS Code – https://code.visualstudio.com/ • 安裝 Node – https://nodejs.org/en/download/ • 安裝 Ngrok – https://ngrok.com/download 100
97. 人工智慧語意分析工具應用 Ryan@iii.org.tw 安裝Node.js • 選擇穩定版 (Recommend For Most Users) – Windows Installer：下載msi檔 – macOS Installer：下載pkg檔 • 如何確認安裝? – 打開終端機，輸入：node -v https://nodejs.org/en/ 101
98. 人工智慧語意分析工具應用 Ryan@iii.org.tw 安裝Ngrok • 建議放置位置 – Windows：主要使用者資料夾 – Mac：應用程式 • 設定為在哪裡都可以執行 – Windows：我的電腦 -> 右鍵 -> 內容 -> 進階系統設定 -> 環境變數 -> 系統變數 -> Path -> 編輯 -> 新增 – Mac：ln -s /Applications/ngrok ngrok https://ngrok.com/download 102
99. 人工智慧語意分析工具應用 Ryan@iii.org.tw 建立開發專案 • 建立專案資料夾：MovieBot • 建立主要程式檔：index.js https://github.com/ryan403/MovieBot 103
100. 人工智慧語意分析工具應用 Ryan@iii.org.tw 建立index.js 輸入程式碼 注意大小寫 104
101. 人工智慧語意分析工具應用 Ryan@iii.org.tw 繼續於index.js 輸入程式碼 105
102. 人工智慧語意分析工具應用 Ryan@iii.org.tw 繼續於index.js 輸入程式碼 106
103. 人工智慧語意分析工具應用 Ryan@iii.org.tw 設定MovieDB API Key • 新增config資料夾 • 在config資料夾中新增檔案：default.json • 增加MovieDB_API_Key (稍後至該網站申請) Your API Key here 107
104. 人工智慧語意分析工具應用 Ryan@iii.org.tw TheMovieDB.org • 註冊帳號、填寫相關資料 • 點擊個人頭像 -> 帳戶設定 • 左邊清單點擊API • Request an API Key • 複製API Key(v3 auth)至上一頁 https://www.themoviedb.org/account/signup 108
105. 人工智慧語意分析工具應用 Ryan@iii.org.tw TheMovieDB Search API https://developers.themoviedb.org/3/search/search-movies 109
106. 人工智慧語意分析工具應用 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 110
107. 人工智慧語意分析工具應用 Ryan@iii.org.tw 增加Debug與Start Scripts • 在 package.json 新增 • debug：在地測試、start：伺服器上線 111
108. 人工智慧語意分析工具應用 Ryan@iii.org.tw 執行並開啟除錯模式 • 點擊VS Code中左邊選單中的第四個(偵錯) • 上方Play按鈕右邊下拉新增組態... • 選擇「{ } Node.js 透過NPM 啟動」 • 按下Play按鈕 • 下方偵錯主控台確認伺服器是否已啟動 112
109. 人工智慧語意分析工具應用 Ryan@iii.org.tw 運用Ngrok讓開發機變成伺服器 • 在終端機執行 ngrok http 5000 • 複製產生的公開網址 (Forwarding https://.....) Copy this one 113
110. 人工智慧語意分析工具應用 Ryan@iii.org.tw DialogFlow Fulfillment • ENABLED、填完URL(後面加上/webhook)後，按下下方的Save 114
111. 人工智慧語意分析工具應用 Ryan@iii.org.tw 回到右方測試區進行測試 • 可順利連線，拿到電影資料！ 115
112. 人工智慧語意分析工具應用 Ryan@iii.org.tw Integrations -> LINE -> 打開 • 跟著步驟建立帳號、啟動Messaging API • Log in to console 116
113. 人工智慧語意分析工具應用 Ryan@iii.org.tw Line Developer Console • Select provider 選擇既有或新增 https://developers.line.me/console/register/messaging-api/provider/ 117
114. 人工智慧語意分析工具應用 Ryan@iii.org.tw Create new channel • 輸入 App icon、name、description • 選擇 Free Plan • 設定 Category、Subcategory • 輸入 Email address • Confirm 118
115. 人工智慧語意分析工具應用 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 119
116. 人工智慧語意分析工具應用 Ryan@iii.org.tw 用QR code 加入自己的Chatbot • 用Line加入自己的Chatbot • 試著看看能不能看到剛才設定好的對話 120
117. 人工智慧語意分析工具應用 Ryan@iii.org.tw 電腦關機怎麼辦? 121
118. 人工智慧語意分析工具應用 Ryan@iii.org.tw node_modules 不上傳 • 增加 .gitignore 檔案 – 裡面寫：node_modules/ 122
119. 人工智慧語意分析工具應用 Ryan@iii.org.tw 部署至Heroku • 註冊帳號 • 右上角 New -> Create new app • 設定App name：movie-bot-XXYYZZ • 區域：美國 • Create App https://www.heroku.com/ 123
120. 人工智慧語意分析工具應用 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 切換到專案資料夾路徑下，若已經在裡面則可忽略此步驟 124
121. 人工智慧語意分析工具應用 Ryan@iii.org.tw 開始部署上傳(每次更新步驟亦同) • git add . • git commit –am "make it better" • git push heroku master • heroku restart 雙引號這邊像是你的上傳筆記 在這裡寫上這次更新的內容 之後code更新時再加這一步 第一次不用 125
122. 人工智慧語意分析工具應用 Ryan@iii.org.tw 啟動網站 • heroku ps:scale web=1 非常非常關鍵的一步，一定要記得做 126
123. 人工智慧語意分析工具應用 Ryan@iii.org.tw 找到Heroku的網址 • Settinges分頁下拉 -> Domains and certificates https://dashboard.heroku.com/apps/YourAppName/settings • 其實網址就是 https://YourAppName.herokuapp.com 127
124. 人工智慧語意分析工具應用 Ryan@iii.org.tw 回到DialogFlow設定Fulfillment • Webhook Enabled https://YourAppName.herokuapp.com/webhook • 打完記得畫面拉至最下方，按下Save 128
125. 人工智慧語意分析工具應用 Ryan@iii.org.tw 再度進行測試 • 本地的Ngrok、VS Code 都可以關掉 • 進入DialogFlow -> 右方測試區 129
126. 人工智慧語意分析工具應用 Ryan@iii.org.tw Recap • Dialogflow – 語意分析、前端整合 • TheMovieDB API – 資料來源 • Ngrok – 暫時讓本機變成Server • Heroku – 雲端主機服務 • 電影其他資訊查詢 – 評分、演員、年代... • 電影時刻查詢 – 各地電影院時刻資料 • 多媒體 – 電影預告、電影配樂 • 電影推薦 – 測驗、查詢記錄... Extra 130
127. 人工智慧語意分析工具應用 Ryan@iii.org.tw Lab • 如何解決第一筆不是最相符資料的問題？ – 迴圈、判斷 – Test Case：小小兵 • The Movie DB API – discover – https://www.themoviedb.org/documentation/api/ discover 131
128. 人工智慧語意分析工具應用 Ryan@iii.org.tw Chatbot Development Get Your Own Data Source: https://alivetek.com 透過對話介面，經營電商小舖的老闆 可以讓消費者依據分類查詢商品，並 瀏覽熱門商品！ 132
129. 人工智慧語意分析工具應用 Ryan@iii.org.tw 預期成果 – 在Line中呈現 133
130. 人工智慧語意分析工具應用 Ryan@iii.org.tw 電商機器人開發 1.0 • 目標 – 輸入：查詢類別 – 回傳：該類別的商品資訊 • 介面 – Line • 工具/技術 – DialogFlow – Node.JS • 資料 – 自建資料，放置於Google Sheets 134
131. 人工智慧語意分析工具應用 Ryan@iii.org.tw 將商品資訊放在Google 試算表 • 進入Google 雲端硬碟，建一個Google Sheets • 第一列七個欄位寫：Number、Category、Name、 Price、Description、Photo、IsHot 135
132. 人工智慧語意分析工具應用 Ryan@iii.org.tw 商品瀏覽服務架構 • 語意分析 + 聊天機器人+ 資料庫 + 部署上線 FulFillment • 設定回應 Google Drive • 資料儲存 DialogFlow 意圖：商品瀏覽 資料：商品類別 SheetDB Line 136
133. 人工智慧語意分析工具應用 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 137
134. 人工智慧語意分析工具應用 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 138
135. 人工智慧語意分析工具應用 Ryan@iii.org.tw DialogFlow • Agent：ECbotXXYY • Language：zh-TW • Intent ：CheckProductsByCategory • Entities：CategoryType 訓練例句 139
136. 人工智慧語意分析工具應用 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 140
137. 人工智慧語意分析工具應用 Ryan@iii.org.tw Dialogflow – 建立新的Intent • Intents -> CREATE INTENT – 輸入Intent名稱為：CheckProductsByCategory • Training phrases 輸入常見例句 – ADD TRAINING PHRASES 141
138. 人工智慧語意分析工具應用 Ryan@iii.org.tw Dialogflow – 建立新的Entity • Entities -> CREATE ENTITY – 輸入Entity名稱為：CategoryType • 輸入分類名稱以及同義字 142
139. 人工智慧語意分析工具應用 Ryan@iii.org.tw Intents -> Action and parameters • ADD PARAMETERS AND ACTION • 設定Category變數 143
140. 人工智慧語意分析工具應用 Ryan@iii.org.tw Responses & Fulfillment • 設定階段性完成回應 • 啟動Fulfillment -> ENABLE FULFILLMENT 144
141. 人工智慧語意分析工具應用 Ryan@iii.org.tw 標記例句中的關鍵資訊 • 選取例句中的分類關鍵字 • 選擇 @CategoryType:Category • 做完記得按下右上角的SAVE 145
142. 人工智慧語意分析工具應用 Ryan@iii.org.tw Intents -> Default Fallback & Welcome • 兩個都設定相同的回應，引導使用者說出符合瀏覽 商品意圖的例句 – 刪除其他預設回應句 – 改成如下的特定回應句 146
143. 人工智慧語意分析工具應用 Ryan@iii.org.tw 在右方測試區進行測試 147
144. 人工智慧語意分析工具應用 Ryan@iii.org.tw Integrations -> Web Demo • 打開Web Demo的開關 • 點擊跳出視窗中的網址 148
145. 人工智慧語意分析工具應用 Ryan@iii.org.tw DialogFlow 運作機制 Source: DialogFlow 149
146. 人工智慧語意分析工具應用 Ryan@iii.org.tw Webhook 1. 透過Webhook在雲端運行，DialogFlow透過 Webhook去取得所需的資料，再傳遞給使用者 2. 所有處理程序都在後端，前端可由所有支援的方 式來運作(網站、聊天機器人、語音助理...) 150
147. 人工智慧語意分析工具應用 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 151
148. 人工智慧語意分析工具應用 Ryan@iii.org.tw 開發前準備事項 • 安裝 VS Code – https://code.visualstudio.com/ • 安裝 Node – https://nodejs.org/en/download/ • 安裝 Ngrok – https://ngrok.com/download 152
149. 人工智慧語意分析工具應用 Ryan@iii.org.tw 安裝Node.js • 選擇穩定版 (Recommend For Most Users) – Windows Installer：下載msi檔 – macOS Installer：下載pkg檔 • 如何確認安裝? – 打開終端機，輸入：node -v https://nodejs.org/en/ 153
150. 人工智慧語意分析工具應用 Ryan@iii.org.tw 安裝Ngrok • 建議放置位置 – Windows：主要使用者資料夾 – Mac：應用程式 • 設定為在哪裡都可以執行 – Windows：我的電腦 -> 右鍵 -> 內容 -> 進階系統設定 -> 環境變數 -> 系統變數 -> Path -> 編輯 -> 新增 – Mac：ln -s /Applications/ngrok ngrok https://ngrok.com/download 154
151. 人工智慧語意分析工具應用 Ryan@iii.org.tw SheetDB.io • 用同一個Google帳號登入SheetDB.io • 建立新的API Create new API • 將剛才試算表的網址貼到SheetDB.io網站 • 產生API URL 155
152. 人工智慧語意分析工具應用 Ryan@iii.org.tw 建立開發專案 • 專案資料夾：ECBot • 主要程式：index.js • 終端機指令(在VS Code中，按下 Ctrl + ~ 開啟終端機) npm init • package.json 在scripts中增加 "start":"node index.js", "debug":"node --inspect index.js" https://github.com/ryan403/ECbot 156
153. 人工智慧語意分析工具應用 Ryan@iii.org.tw index.js 注意大小寫 157
154. 人工智慧語意分析工具應用 Ryan@iii.org.tw 依據查詢分類，取得Google試算表中的資料 158
155. 人工智慧語意分析工具應用 Ryan@iii.org.tw index.js • 用卡片方式呈現商品資訊 card.title card.subtitle card.imageUri card.buttons 159
156. 人工智慧語意分析工具應用 Ryan@iii.org.tw 設定SheetDB API Key • 新增config資料夾 • 在config資料夾中新增檔案：default.json • 增加productinfo_id (SheetDB API Key) 160
157. 人工智慧語意分析工具應用 Ryan@iii.org.tw 套件安裝 • 在VS Code中，按下 Ctrl + ~ 開啟終端機 • 安裝能夠一次安裝需求模組的套件 – 在終端機輸入npm install npm-install-all -g – 需要管理者權限(Mac加sudo) • 針對特定檔案中的需求來安裝套件 – 在終端機輸入npm-install-all index.js 161
158. 人工智慧語意分析工具應用 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 162
159. 人工智慧語意分析工具應用 Ryan@iii.org.tw 執行並開啟除錯模式 • 點擊VS Code中左邊選單中的第四個(偵錯) • 上方Play按鈕右邊下拉新增組態... • 選擇「{ } Node.js 透過NPM 啟動」 • 按下Play按鈕 • 下方偵錯主控台確認伺服器是否已啟動 163
160. 人工智慧語意分析工具應用 Ryan@iii.org.tw 運用Ngrok讓開發機變成伺服器 • 在終端機執行 ngrok http 5000 • 複製產生的公開網址 (Forwarding https://.....) Copy this one 164
161. 人工智慧語意分析工具應用 Ryan@iii.org.tw DialogFlow Fulfillment • ENABLED、填完URL(後面加上/webhook)後，按下下方的Save 165
162. 人工智慧語意分析工具應用 Ryan@iii.org.tw 回到DialogFlow右方測試區進行測試 • 可順利連線，拿到衣服資料！ 166
163. 人工智慧語意分析工具應用 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 167
164. 人工智慧語意分析工具應用 Ryan@iii.org.tw Integrations -> LINE -> 打開 • 跟著步驟建立帳號、啟動Messaging API • Log in to console 168
165. 人工智慧語意分析工具應用 Ryan@iii.org.tw Line Developer Console • Select provider 選擇既有或新增 https://developers.line.me/console/register/messaging-api/provider/ 169
166. 人工智慧語意分析工具應用 Ryan@iii.org.tw Create new channel • 輸入 App icon、name、description • 選擇 Free Plan • 設定 Category、Subcategory • 輸入 Email address • Confirm 170
167. 人工智慧語意分析工具應用 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 171
168. 人工智慧語意分析工具應用 Ryan@iii.org.tw 用QR code 加入自己的Chatbot • 用Line加入自己的Chatbot • 試著看看能不能看到剛才設定 好的對話 172
169. 人工智慧語意分析工具應用 Ryan@iii.org.tw 電腦關機怎麼辦? 173
170. 人工智慧語意分析工具應用 Ryan@iii.org.tw node_modules 不上傳 • 增加 .gitignore 檔案 – 裡面寫：node_modules/ 174
171. 人工智慧語意分析工具應用 Ryan@iii.org.tw 部署至Heroku • 註冊帳號 • 右上角 New -> Create new app • 設定App name：ec-bot-XXYYZZ • 區域：美國 • Create App https://www.heroku.com/ 175
172. 人工智慧語意分析工具應用 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 176
173. 人工智慧語意分析工具應用 Ryan@iii.org.tw 開始部署上傳(每次更新步驟亦同) • git add . • git commit –am "make it better" • git push heroku master • heroku restart 雙引號這邊像是你的上傳筆記 在這裡寫上這次更新的內容 之後code更新時再加這一步 第一次不用 177
174. 人工智慧語意分析工具應用 Ryan@iii.org.tw 啟動網站 • heroku ps:scale web=1 非常非常關鍵的一步，一定要記得做 178
175. 人工智慧語意分析工具應用 Ryan@iii.org.tw 找到Heroku的網址 • Domains and certificates https://dashboard.heroku.com/apps/YourAppName/settings • 其實網址就是 https://YourAppName.herokuapp.com 179
176. 人工智慧語意分析工具應用 Ryan@iii.org.tw 回到DialogFlow設定Fulfillment • Webhook Enabled https://YourAppName.herokuapp.com/webhook • 打完記得畫面拉至最下方，按下Save 180
177. 人工智慧語意分析工具應用 Ryan@iii.org.tw 再度進行測試 • 本地的Ngrok、VS Code 都 可以關掉 • 進入DialogFlow -> 右方測試 區 181
178. 人工智慧語意分析工具應用 Ryan@iii.org.tw 整合至Facebook • Integrations -> Facebook Messenger 開關 182
179. 人工智慧語意分析工具應用 Ryan@iii.org.tw 整合至Facebook 183
180. 人工智慧語意分析工具應用 Ryan@iii.org.tw 建立粉絲專頁 – 依需求選擇 https://www.facebook.com/pages/creation/ 184
181. 人工智慧語意分析工具應用 Ryan@iii.org.tw 建立應用程式 • 取完名字後，設定Messenger • 選擇粉絲專頁產生存取權杖 • 貼回DialogFlow • 設定Verify Token：任意字串均可 • 複製Callback URL，回到FB應用程式 • 設定Webhooks回呼網址、驗證權杖(Verify Token) • 勾選messages, messaging_postbacks • 設定應用程式訂閱對應的粉絲專頁 https://developers.facebook.com/ 185
182. 人工智慧語意分析工具應用 Ryan@iii.org.tw 粉絲專頁 • 回到粉絲專頁。。。以粉絲專頁訪客角度檢視 • 按下傳送訊息開始測試 186
183. 人工智慧語意分析工具應用 Ryan@iii.org.tw FB應用程式 • 新增測試人員 – 左邊面板 -> 角色 -> 角色 -> 測試人員 – 回到粉絲專頁傳送訊息進行測試 • 正式上線 – 應用程式 -> 應用程式審查 -> 開始提交 187
184. 人工智慧語意分析工具應用 Ryan@iii.org.tw Smart Home with Alexa 188
185. 人工智慧語意分析工具應用 Ryan@iii.org.tw August 智慧門鎖 189
186. 人工智慧語意分析工具應用 Ryan@iii.org.tw August 智慧門鎖 190
187. 人工智慧語意分析工具應用 Ryan@iii.org.tw Smart Control Your Devices 狀態：開 / 關 Connect 近端 遠端 查看門鎖狀態 發送虛擬鑰匙 遠端解鎖 查詢記錄 191
188. 人工智慧語意分析工具應用 Ryan@iii.org.tw Alexa - Smart Home Skill API https://developer.amazon.com/docs/smarthome/understand-the-smart-home-skill-api.html 192
189. 人工智慧語意分析工具應用 Ryan@iii.org.tw 電燈開發模擬實作 我想要 開燈 Dialogflow 語意分析 電燈狀態 通關密語 Webhook Host at Heroku 通關密語確認 設定電燈狀態 Google Sheets Web Page 顯示電燈狀態 SheetDB 193
190. 人工智慧語意分析工具應用 Ryan@iii.org.tw 課前可準備事項 • 申請Google帳號(有Gmail亦可) • 申請Heroku帳號 https://signup.heroku.com/login • 安裝Heroku CLI指令列工具 – Windows 64-bit • https://cli-assets.heroku.com/heroku-x64.exe – Mac • https://cli-assets.heroku.com/heroku.pkg 194
191. 人工智慧語意分析工具應用 Ryan@iii.org.tw 將設備狀態記錄在Google 試算表 • 進入Google 雲端硬碟，建一個Google Sheets • 第一列兩個欄位：lightName、lightSwitch • 第二列兩個欄位：main、關 195
192. 人工智慧語意分析工具應用 Ryan@iii.org.tw 開發流程 • 安裝所需工具以及準備好設備名稱與狀態資料 – Google Account, Heroku Account, Heroku CLI • 分析使用者輸入，確定目的 – Google Dialogflow Natural Language Processing • 依據目的，取得要更新的狀態以及密碼 – Fulfillment Programming • 將撰寫好的程式碼部署上線 – Push your code to Heroku • 在Web/Line/FB中實際測試 – Integrate to Messenger 196
193. 人工智慧語意分析工具應用 Ryan@iii.org.tw 開發流程 • 安裝所需工具以及準備好設備名稱與狀態資料 – Google Account, Heroku Account, Heroku CLI • 分析使用者輸入，確定目的 – Google Dialogflow Natural Language Processing • 依據目的，取得要更新的狀態以及密碼 – Fulfillment Programming • 將撰寫好的程式碼部署上線 – Push your code to Heroku • 在Web/Line/FB中實際測試 – Integrate to Messenger 197
194. 人工智慧語意分析工具應用 Ryan@iii.org.tw DialogFlow • Agent：SmartHomeXXYY • Language：zh-TW • Intent ：LightSwitch • Entities：LightStatus 訓練例句 198
195. 人工智慧語意分析工具應用 Ryan@iii.org.tw Dialogflow – 建立新的Agent • 輸入Agent名稱 – SmartHomeXXYY • 設定預設語言 – Chinese(Traditional) – zh-tw • 設定時區 – (GMT+8:00) Asia/Hong_Kong • 按下右上方CREATE按鈕 199 https://console.dialogflow.com/api-client/#/newAgent
196. 人工智慧語意分析工具應用 Ryan@iii.org.tw Dialogflow – 建立新的Intent • Intents -> CREATE INTENT – 輸入Intent名稱為：LightSwitch • Training phrases 輸入常見例句 – ADD TRAINING PHRASES 200
197. 人工智慧語意分析工具應用 Ryan@iii.org.tw Dialogflow – 建立新的Entity • Entities -> CREATE ENTITY – 輸入Entity名稱為：LightStatus • 輸入分類名稱以及同義字 201
198. 人工智慧語意分析工具應用 Ryan@iii.org.tw Intents -> Action and parameters • ADD PARAMETERS AND ACTION • 設定Category變數、反問的提示句 202
199. 人工智慧語意分析工具應用 Ryan@iii.org.tw Responses & Fulfillment • 設定階段性完成回應 • 啟動Fulfillment -> ENABLE FULFILLMENT 203
200. 人工智慧語意分析工具應用 Ryan@iii.org.tw 標記例句中的關鍵資訊 • 選取例句中的狀態關鍵字 • 選擇 @LightStatus • 做完記得按下右上角的SAVE 204
201. 人工智慧語意分析工具應用 Ryan@iii.org.tw Intents -> Default Fallback & Welcome • 兩個都設定相同的回應，引導使用者說出符合瀏覽 設定設備狀態意圖的例句 – 刪除其他預設回應句 – 改成如下的特定回應句 205
202. 人工智慧語意分析工具應用 Ryan@iii.org.tw 在右方測試區進行測試 206
203. 人工智慧語意分析工具應用 Ryan@iii.org.tw Integrations -> Web Demo • 打開Web Demo的開關 • 點擊跳出視窗中的網址 207
204. 人工智慧語意分析工具應用 Ryan@iii.org.tw 開發流程 • 安裝所需工具以及準備好設備名稱與狀態資料 – Google Account, Heroku Account, Heroku CLI • 分析使用者輸入，確定目的 – Google Dialogflow Natural Language Processing • 依據目的，取得要更新的狀態以及密碼 – Fulfillment Programming • 將撰寫好的程式碼部署上線 – Push your code to Heroku • 在Web/Line/FB中實際測試 – Integrate to Messenger 208
205. 人工智慧語意分析工具應用 Ryan@iii.org.tw 開發前準備事項 • 安裝 VS Code – https://code.visualstudio.com/ • 安裝Node – https://nodejs.org/en/download/ 209
206. 人工智慧語意分析工具應用 Ryan@iii.org.tw SheetDB.io • 用同一個Google帳號登入SheetDB.io • 將剛才試算表的網址貼到SheetDB.io網站 • 產生API URL 210
207. 人工智慧語意分析工具應用 Ryan@iii.org.tw 建立開發專案 • 專案資料夾：SmartHome • 主要程式：index.js • 終端機指令 npm init • package.json 在scripts中增加 "start":"node index.js", "debug":"node --inspect index.js" 211
208. 人工智慧語意分析工具應用 Ryan@iii.org.tw index.js • 記得新增config資料夾、裡面放default.json { "productinfo_id":"xxxx" } 注意大小寫 212
209. 人工智慧語意分析工具應用 Ryan@iii.org.tw index.js 213 • 依據密碼是否正確，決定要不要更新狀態
210. 人工智慧語意分析工具應用 Ryan@iii.org.tw index.js 214
211. 人工智慧語意分析工具應用 Ryan@iii.org.tw index.js • 更新完成或是密碼驗證錯誤，都讓使用者知道 215 [ { "text" : { "text" : [ "更新完成" ] } } ]
212. 人工智慧語意分析工具應用 Ryan@iii.org.tw 開發流程 • 安裝所需工具以及準備好設備名稱與狀態資料 – Google Account, Heroku Account, Heroku CLI • 分析使用者輸入，確定目的 – Google Dialogflow Natural Language Processing • 依據目的，取得要更新的狀態以及密碼 – Fulfillment Programming • 將撰寫好的程式碼部署上線 – Push your code to Heroku • 在Web/Line/FB中實際測試 – Integrate to Messenger 216
213. 人工智慧語意分析工具應用 Ryan@iii.org.tw 套件安裝 • 終端機： npm-install-all index.js (如果沒有npm-install-all的話請先照下面步驟安裝) npm install npm-install-all -g (Mac使用者前面加sudo) • 增加 .gitignore 檔案 – 裡面寫：node_modules/ 217
214. 人工智慧語意分析工具應用 Ryan@iii.org.tw 部署至Heroku • 註冊帳號 • 右上角 New -> Create new app • 設定App name：smart-home-XXYY • 區域：美國 • Create App https://www.heroku.com/ 218
215. 人工智慧語意分析工具應用 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中的專案名稱哦！ 通常長得像 smart-home-xxyyzz 219
216. 人工智慧語意分析工具應用 Ryan@iii.org.tw 開始部署上傳(每次更新步驟亦同) • git add . • git commit –am "make it better" • git push heroku master • heroku restart 雙引號這邊像是你的上傳筆記 在這裡寫上這次更新的內容 之後code更新時再加這一步 第一次不用 220
217. 人工智慧語意分析工具應用 Ryan@iii.org.tw 啟動網站 • heroku ps:scale web=1 非常非常關鍵的一步，一定要記得做 221
218. 人工智慧語意分析工具應用 Ryan@iii.org.tw 找到Heroku的網址 • Domains and certificates https://dashboard.heroku.com/apps/YourAppName/settings • 其實網址就是 https://YourAppName.herokuapp.com 222
219. 人工智慧語意分析工具應用 Ryan@iii.org.tw 回到DialogFlow設定Fulfillment • Webhook Enabled https://YourAppName.herokuapp.com/webhook • 打完記得畫面拉至最下方，按下Save 223
220. 人工智慧語意分析工具應用 Ryan@iii.org.tw 開發流程 • 安裝所需工具以及準備好設備名稱與狀態資料 – Google Account, Heroku Account, Heroku CLI • 分析使用者輸入，確定目的 – Google Dialogflow Natural Language Processing • 依據目的，取得要更新的狀態以及密碼 – Fulfillment Programming • 將撰寫好的程式碼部署上線 – Push your code to Heroku • 在Web/Line/FB中實際測試 – Integrate to Messenger 224
221. 人工智慧語意分析工具應用 Ryan@iii.org.tw 製作一個簡單網頁來模擬電燈狀態 • 在電腦中新增一個資料夾：SmartHomeWeb • 在裡面新增一個index.html • 撰寫以下內容 225
222. 人工智慧語意分析工具應用 Ryan@iii.org.tw 製作一個簡單網頁來模擬電燈狀態 • 在裡面新增一個main.js 撰寫以下內容 226 這邊放你的SheetDB API Key
223. 人工智慧語意分析工具應用 Ryan@iii.org.tw 製作一個簡單網頁來模擬電燈狀態 • 建立images資料夾，在裡面放兩張圖片 227
224. 人工智慧語意分析工具應用 Ryan@iii.org.tw 打開Dialogflow與剛才的網頁 • 輸入指令與通關密語，看看是否能正常更新 228
225. 人工智慧語意分析工具應用 Ryan@iii.org.tw 對話流程 人 <-> 人 人 <-> Chatbot/VA 開啟對話 寒暄語 Hello、你好、嗨 喚醒語 Invocation 系統指定啟動語 Alexa, Hi Siri, OK Google 提出需求 台北的天氣如何？ 一般人均可直接理解對方的需求 釐清意圖 Intent 透過語句解析，確定對方的意圖是什麼 訓練 釐清意圖 N/A 由於同一意圖有多種表達方式 所以要多提供例句讓機器對應至特定意圖 取得 關鍵資訊 若對方漏說了地方與時間 持續問答取得資訊 取出關鍵資訊 Entity 預先定義好滿足該意圖所需的關鍵資訊 持續與使用者對話取得所有需求關鍵資訊 確認 條件滿足 跟對方確定取得必要資訊後 開始進行查詢 依據關鍵資訊與意圖 進行下一階段資料查詢(API 介接) 回應 回應查詢結果 新聞說今天臺北在下雨，氣溫19度 依據查詢結果 以文字、圖形或語音的方式回應 延伸問答 依據目前資訊的延伸問題 那明天的狀況也一樣嗎？ 須將既有輸入資訊暫存 更新資料查詢並進行回應 229
226. 人工智慧語意分析工具應用 Ryan@iii.org.tw Ideas to develop Source : Dialogflow 230
227. 人工智慧語意分析工具應用 Ryan@iii.org.tw 鬧鐘管理 231
228. 人工智慧語意分析工具應用 Ryan@iii.org.tw 應用程式管理 232
229. 人工智慧語意分析工具應用 Ryan@iii.org.tw 車載資通訊整合 233
230. 人工智慧語意分析工具應用 Ryan@iii.org.tw 匯率轉換 234
231. 人工智慧語意分析工具應用 Ryan@iii.org.tw 日期與假日 235
232. 人工智慧語意分析工具應用 Ryan@iii.org.tw 裝置設定管理 236
233. 人工智慧語意分析工具應用 Ryan@iii.org.tw 常見問答集 237
234. 人工智慧語意分析工具應用 Ryan@iii.org.tw 航班預約 238
235. 人工智慧語意分析工具應用 Ryan@iii.org.tw 外送服務 239
236. 人工智慧語意分析工具應用 Ryan@iii.org.tw 訂房服務 240
237. 人工智慧語意分析工具應用 Ryan@iii.org.tw 地圖應用 241
238. 人工智慧語意分析工具應用 Ryan@iii.org.tw 音樂播放 242
239. 人工智慧語意分析工具應用 Ryan@iii.org.tw 導航 243
240. 人工智慧語意分析工具應用 Ryan@iii.org.tw 新聞 244
241. 人工智慧語意分析工具應用 Ryan@iii.org.tw 電台播放 245
242. 人工智慧語意分析工具應用 Ryan@iii.org.tw 餐廳預約 246
243. 人工智慧語意分析工具應用 Ryan@iii.org.tw 閒聊 247
244. 人工智慧語意分析工具應用 Ryan@iii.org.tw 智慧家庭 248
245. 人工智慧語意分析工具應用 Ryan@iii.org.tw 技術支援 249
246. 人工智慧語意分析工具應用 Ryan@iii.org.tw 電視控制 250
247. 人工智慧語意分析工具應用 Ryan@iii.org.tw 時間相關 251
248. 人工智慧語意分析工具應用 Ryan@iii.org.tw 小費計算 252
249. 人工智慧語意分析工具應用 Ryan@iii.org.tw 交通狀況查詢 253
250. 人工智慧語意分析工具應用 Ryan@iii.org.tw 翻譯 254
251. 人工智慧語意分析工具應用 Ryan@iii.org.tw 單位轉換 255
252. 人工智慧語意分析工具應用 Ryan@iii.org.tw 影片播放 256
253. 人工智慧語意分析工具應用 Ryan@iii.org.tw 音量控制 257
254. 人工智慧語意分析工具應用 Ryan@iii.org.tw 天氣相關 258
255. 人工智慧語意分析工具應用 Ryan@iii.org.tw 網路搜尋 259
256. 人工智慧語意分析工具應用 Ryan@iii.org.tw 練習：功能拆解 • 請挑選上述其中一個範例或自創一個 – 列出意圖 – 列出關鍵資訊 – 列出會需要的資料或是介接的資源 • 也可自行加入其他的創意功能 260