More Related Content Similar to Intro to Dialogflow Chatbot Development (20) More from Ryan Chung (20) Intro to Dialogflow Chatbot Development41. 人工智慧語意分析工具應用 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
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
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
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
98. 人工智慧語意分析工具應用 Ryan@iii.org.tw
安裝Ngrok
• 建議放置位置
– Windows:主要使用者資料夾
– Mac:應用程式
• 設定為在哪裡都可以執行
– Windows:我的電腦 -> 右鍵 -> 內容 ->
進階系統設定 -> 環境變數 -> 系統變數 ->
Path -> 編輯 -> 新增
– Mac:ln -s /Applications/ngrok ngrok
https://ngrok.com/download
102
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
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
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
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
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
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
150. 人工智慧語意分析工具應用 Ryan@iii.org.tw
安裝Ngrok
• 建議放置位置
– Windows:主要使用者資料夾
– Mac:應用程式
• 設定為在哪裡都可以執行
– Windows:我的電腦 -> 右鍵 -> 內容 ->
進階系統設定 -> 環境變數 -> 系統變數 ->
Path -> 編輯 -> 新增
– Mac:ln -s /Applications/ngrok ngrok
https://ngrok.com/download
154
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
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
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
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
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
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
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
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
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
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
225. 人工智慧語意分析工具應用 Ryan@iii.org.tw
對話流程
人 <-> 人 人 <-> Chatbot/VA
開啟對話
寒暄語
Hello、你好、嗨
喚醒語 Invocation
系統指定啟動語 Alexa, Hi Siri, OK Google
提出需求
台北的天氣如何?
一般人均可直接理解對方的需求
釐清意圖 Intent
透過語句解析,確定對方的意圖是什麼
訓練
釐清意圖
N/A
由於同一意圖有多種表達方式
所以要多提供例句讓機器對應至特定意圖
取得
關鍵資訊
若對方漏說了地方與時間
持續問答取得資訊
取出關鍵資訊 Entity
預先定義好滿足該意圖所需的關鍵資訊
持續與使用者對話取得所有需求關鍵資訊
確認
條件滿足
跟對方確定取得必要資訊後
開始進行查詢
依據關鍵資訊與意圖
進行下一階段資料查詢(API 介接)
回應
回應查詢結果
新聞說今天臺北在下雨,氣溫19度
依據查詢結果
以文字、圖形或語音的方式回應
延伸問答
依據目前資訊的延伸問題
那明天的狀況也一樣嗎?
須將既有輸入資訊暫存
更新資料查詢並進行回應
229