Intro to Dialogflow Chatbot Development

人工智慧語意分析工具應用 Ryan@iii.org.tw
人工智慧語意分析工具
Dialogflow(API.ai)
Ryan@iii.org.tw
III Digital Education Institute
1

實作範例
• 天氣機器人
–語意確認
–資料查詢
–五日查詢
• 電影機器人
–文法規則
–電影資料庫
–查詢比對
2
• 電商機器人
–自建資料
–自訂型態
–圖文卡片
• 電燈開關
–資料更新
–網頁模擬
–物聯網概念

問題
• 如何讓機器人聽得懂人話？
– 特定指令
– 日常生活會說的句子
明天下午三點
到北車集合
4月22日15:00在
台北火車站碰面
明天下午三點整在
北平西路3號會合
哈摟！我看明天我們
就在台北車站碰面好
了，下午三點，要記
得哦
ㄟ，還記得明天的約
會嗎？是下午三點，
在火車站，別遲到！
提醒你一下，三點在
北車碰頭，不見不散
！
3

天氣機器人開發 1.0
• 目標
– 輸入：時間、地點
– 回傳：天氣概況、溫度
• 介面
– Web Chat
• 工具/技術
– Dialogflow
– Node.JS
4

Dialogflow.com -> Go to console
5
https://dialogflow.com/

Sign in with Google
6

Create New Agent
7

Create New Agent
8

語意分析常見名詞
• Intent 意圖
– 使用者對談的目的
• Entity 關鍵資訊
– 達成目的的必要輸入資訊
• Utterance 例句
– 使用者常用的句型
9

Create Intent
10

輸入 Intent 名稱後，按下Save
11

進入 Training phrases 區塊
• 點擊下方Add Training Phrases
12

輸入對應此Intent會出現的句子
• How is the weather?
• How is the weather today?
• What is the weather like in Taipei tomorrow?
13

系統自動偵測了一些關鍵資訊與型態
14

進入變數與對應行動的設定
• 點擊下方 Manage Parameters and Action
15

標示必要資訊，並引導使用者輸入
• 決定哪些偵測到的資訊是必要的，在前方打勾
• 必要資訊還沒收集到時，設定提示句向使用者索
取必要資訊 (Define prompts...)
16

追問出日期
17

追問出城市
18

設定回應
• 點擊下方的 Add Response
• 意圖確認，並且拿到必要的關鍵資訊
19

設定確認回應後，按下右上角Save
Agent Trained Complete
20

在右上角測試看看
21

用Web Demo網頁展示
• 點擊左方選單中的 Integrations
• 將Web Demo的開關打開
22

• 點擊出現的網址
• 出現網頁對話視窗！測試看看
23

結合Open Weather Map
https://openweathermap.org/
24

註冊帳號
https://home.openweathermap.org/users/sign_up
25

產生API Key
https://home.openweathermap.org/api_keys
26

測試使用 API - By city name
27
https://openweathermap.org/current

Lab：測試語法
28
• 目標
– 在瀏覽器中得到天氣資訊
• 運用
– 剛剛取得的API Key
– API網址
– 參數

DialogFlow 運作機制
Source: DialogFlow
29

網頁基本運作
1. 在瀏覽器中輸入網址，依據網址向對應的伺服器
要資料
2. 依資料類型：
– 靜態資料直接傳回：一般HTML, CSS, JS, 圖片, 文字...
– 動態程式先執行再傳回結果：PHP, Node, ASP, JSP,...
30

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

實作：Webhook建立
使用天氣機器人1.0為基底
32

啟動webhook
• 在DialogFlow中，進入WeatherBot專案
• 點擊左邊Intents，然後進入「Get Weather
Status」Intent
• 最下方Fulfillment右方箭頭展開
– Enable Fulfillment
• 打開開關 Enable webhook call for this intent
• 右上角 Save
33

確認設定為V2 API
• 點擊專案名稱旁邊的齒輪
• General -> API Version
• 選擇 V2 API
34

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

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

建立專案資料夾
• 新增一個資料夾作為專案資料夾 WeatherBot
• 用VS Code 開啟此專案資料夾
• 新增一個檔案：index.js
37

建立index.js 輸入程式碼
38

繼續於 index.js 輸入程式碼
39
https://github.com/ryan403/WeatherBot

設定Open Weather Map API Key
• 新增config資料夾
• 在config資料夾中新增檔案：default.json
Your API Key here
40
專案內檔案

專案初始化
• 在VS Code中，按下 Ctrl + ~ 開啟終端機
• 輸入npm init
• 按下多次enter，使用預設值建立package.json
安裝需要的套件
• 安裝能夠一次安裝需求模組的套件
– 在終端機輸入npm install npm-install-all -g
• 針對特定檔案中的需求來安裝套件
– 在終端機輸入npm-install-all index.js
41

增加Debug與Start Scripts
• 在 package.json 新增
• debug：在地測試、start：伺服器上線
42

執行並開啟除錯模式
• 點擊VS Code中左邊選單中的第四個(偵錯)
• 上方Play按鈕右邊下拉新增設定... 選Node.js
• 再一次，新增設定，選擇「{ } Node.js 透過NPM
啟動」
• 按下Play按鈕
• 下方偵錯主控台確認伺服器是否已啟動
43

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

設定DialogFlow的Webhook
• ENABLED、填完URL(後面加上/webhook)後，按下下方的Save
45

回到Web Demo進行測試
• 可順利連線，拿到天氣資料！
46
https://github.com/ryan403/WeatherBot

電腦關機怎麼辦?
47

node_modules 不上傳
• 增加 .gitignore 檔案
– 裡面寫：node_modules/
48

部署至Heroku
• 註冊帳號
• 右上角 New -> Create new app
• 設定App name：weather-bot-XXYYZZ
• 區域：美國
• Create App
https://www.heroku.com/
49

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

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

啟動網站
• heroku ps:scale web=1
非常非常關鍵的一步，一定要記得做
52

找到Heroku的網址
• Settinges分頁下拉 -> Domains and certificates
https://dashboard.heroku.com/apps/YourAppName/settings
• 其實網址就是
https://YourAppName.herokuapp.com
53

回到DialogFlow設定Fulfillment
• Webhook Enabled
https://YourAppName.herokuapp.com/webhook
• 打完記得畫面拉至最下方，按下Save
54

再度進行測試
• 本地的Ngrok、VS Code 都可以關掉
• 進入DialogFlow -> Integrations -> Web Demo
55

Integrations -> LINE -> 打開
56

Line Developer Console
• Select provider 選擇既有或新增
https://developers.line.me/console/register/messaging-api/provider/
57

Create new channel
• 輸入 App icon、name、description
• 選擇 Developer Trial
• 設定 Category、Subcategory
• 輸入 Email address
• Confirm
58

取得相關資訊
• 進入新建立的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

用QR code 加入自己的Chatbot
• 用Line加入自己的Chatbot
• 試著看看能不能看到剛才設定好的對話
60

常見問題
• 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
Line
Messaging API 語意分析
意圖釐清
關鍵資訊取得
後續處理
特殊判斷
天氣資料

延伸實作一
• 如何查詢特定日期天氣？
– 使用OpenWeatherMap的五日預測
https://openweathermap.org/forecast5
63

五日預測會拿到什麼？
• list
– 陣列
– 所有預測資料
• main.temp
– 氣溫
• weather[0].description
– 天氣描述
• dt_txt
– 日期時間
64

修改程式碼
• 更換呼叫的網址
• 找到對應的日期，回傳資料
– 使用迴圈
– 使用字串切割，比對日期
– 找到之後，跳離迴圈
65

升級成可查詢特定日期的版本
66

延伸實作二
• 如何得到天氣概況圖？
– 回傳的weather陣列中的資料，有一個icon
68

icon值即為天氣圖的檔案名稱
• https://openweathermap.org/img/w/03n.png
69

練習
• 用卡片顯示天氣圖片、溫度與概況
70

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

Lab : 回傳一個文字、一個影像
74
• Text • Image
https://dialogflow.com/docs/reference/v1-v2-migration-guide-fulfillment#fulfillment_messages_reference
• Quick Reply

OpenWeatherMap 多國語系支援
• lang=zh_tw
76

練習：電影機器人開發 1.0
• 目標
– 輸入：電影名稱
– 回傳：簡介、海報
• 介面
– Line
• 工具/技術
– DialogFlow
– Node.JS
• 資料
– theMovieDB.org
77

MovieBot 架構
• 語意分析 + 聊天機器人+ 電影資料庫 + 部署上線
FulFillment • 設定回應
The
Movie
DB
• 電影資料
DialogFlow
意圖：查詢電影簡介
資料：電影名稱
API
Line
78

產品預期畫面
79

Dialogflow
80

Create New Agent
81

Create New Agent
• 建立Agent
– 名稱：MovieBot
– 語言：zh-tw
82

Create Intent
83

輸入 Intent 名稱後，按下Save
84

進入 Training phrases 區塊
• 點擊下方Add Training Phrases
85

輸入對應此Intent會出現的句子
• 輸入例句
– ❞我想要查電影簡介
– ❞我想知道教父的劇情
• 把教父反白，選擇 @sys.any，設定變數名稱為MovieName
86

進入變數與對應行動的設定
• 點擊下方 Manage Parameters and Action
87

標示必要資訊，並引導使用者輸入
• 決定哪些偵測到的資訊是必要的，在前方打勾
• 必要資訊還沒收集到時，設定提示句向使用者索
取必要資訊 (Define prompts...)
• 點擊 Define prompts...
88

追問出電影名稱
• 輸入引導使用者說出電影名稱的句子
89

設定回應
• 點擊下方的 Add Response
• 意圖確認，並且拿到必要的關鍵資訊
90

設定確認回應後，按下右上角Save
• 存檔完成後，過一會右下方會出現訓練完成訊息
Agent Training Completed
91

在右上角測試看看
92

• 點擊左方選單中的 Integrations
• 將Web Demo的開關打開
93

• 點擊出現的網址
• 出現網頁對話視窗！測試看看
94

DialogFlow Recap
• 建立Agent
– 名稱：MovieBot
– 語言：zh-TW
• 建立Intent
– 名稱：Get Movie Intro
• 輸入例句
– ❞我想要查電影簡介
– ❞我想知道教父的劇情
• 把教父反白，選擇 @sys.any，設定變數名稱為MovieName
95

DialogFlow
• 設定需求變數與反問句
– 將MovieName打勾
– 設定反問句：請問你要查詢的電影名稱是？
• 設定確認回饋句
– 了解，馬上為你查詢$MovieName的劇情簡介
96

實作：Webhook建立
確認目標，取得資料
97

啟動webhook
• 在DialogFlow中，進入MovieBot專案
• 點擊左邊Intents，然後進入「Get Movie Intro」Intent
• 最下方Fulfillment，點擊 Enable Fulfillment
• 打開 Enable webhook call for this intent
• 右上方點擊Save
98

確認設定為V2 API
• 點擊專案名稱旁邊的齒輪
• General -> API Version
• 選擇 V2 API
99

開發前準備事項
• 安裝 VS Code
– https://code.visualstudio.com/
• 安裝 Node
– https://nodejs.org/en/download/
• 安裝 Ngrok
– https://ngrok.com/download
100

安裝Node.js
101

安裝Ngrok
– Windows：我的電腦 -> 右鍵 -> 內容 ->
進階系統設定 -> 環境變數 -> 系統變數 ->
Path -> 編輯 -> 新增
102

建立開發專案
• 建立專案資料夾：MovieBot
• 建立主要程式檔：index.js
https://github.com/ryan403/MovieBot
103

建立index.js 輸入程式碼
注意大小寫
104

繼續於index.js 輸入程式碼
105

繼續於index.js 輸入程式碼
106

設定MovieDB API Key
• 增加MovieDB_API_Key (稍後至該網站申請)
Your API Key here
107

TheMovieDB.org
• 註冊帳號、填寫相關資料
• 點擊個人頭像 -> 帳戶設定
• 左邊清單點擊API
• Request an API Key
• 複製API Key(v3 auth)至上一頁
https://www.themoviedb.org/account/signup
108

TheMovieDB Search API
https://developers.themoviedb.org/3/search/search-movies
109

專案初始化
• 輸入npm init
• 按下多次enter，使用預設值建立package.json
安裝需要的套件
– 需要管理者權限(Mac加sudo)
110

增加Debug與Start Scripts
• 在 package.json 新增
• debug：在地測試、start：伺服器上線
111

• 上方Play按鈕右邊下拉新增組態...
• 選擇「{ } Node.js 透過NPM 啟動」
112

Copy this one
113

DialogFlow Fulfillment
114

回到右方測試區進行測試
• 可順利連線，拿到電影資料！
115

• 跟著步驟建立帳號、啟動Messaging API
• Log in to console
116

117

Create new channel
• 選擇 Free Plan
• Confirm
118

取得相關資訊
Disabled
119

• 試著看看能不能看到剛才設定好的對話
120

121

122

部署至Heroku
• 註冊帳號
• 設定App name：movie-bot-XXYYZZ
• 區域：美國
• Create App
123

• 終端機
heroku login
cd my-project-dic
git init
通常長得像 oo-bot-xxyyzz
切換到專案資料夾路徑下，若已經在裡面則可忽略此步驟
124

• git add .
• heroku restart
第一次不用
125

啟動網站
126

• Settinges分頁下拉 -> Domains and certificates
127

• Webhook Enabled
128

再度進行測試
• 本地的Ngrok、VS Code 都可以關掉
• 進入DialogFlow -> 右方測試區
129

Recap
• Dialogflow
– 語意分析、前端整合
• TheMovieDB API
– 資料來源
• Ngrok
– 暫時讓本機變成Server
• Heroku
– 雲端主機服務
• 電影其他資訊查詢
– 評分、演員、年代...
• 電影時刻查詢
– 各地電影院時刻資料
• 多媒體
– 電影預告、電影配樂
• 電影推薦
– 測驗、查詢記錄...
Extra
130

Lab
• 如何解決第一筆不是最相符資料的問題？
– 迴圈、判斷
– Test Case：小小兵
• The Movie DB API – discover
– https://www.themoviedb.org/documentation/api/
discover
131

Chatbot Development
Get Your Own Data
Source: https://alivetek.com
透過對話介面，經營電商小舖的老闆
可以讓消費者依據分類查詢商品，並
瀏覽熱門商品！
132

預期成果 – 在Line中呈現
133

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

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

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

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

開發流程
138

DialogFlow
• Agent：ECbotXXYY
• Language：zh-TW
• Intent ：CheckProductsByCategory
• Entities：CategoryType
訓練例句
139

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

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

Dialogflow – 建立新的Entity
• Entities -> CREATE ENTITY
– 輸入Entity名稱為：CategoryType
• 輸入分類名稱以及同義字
142

Intents -> Action and parameters
• ADD PARAMETERS AND ACTION
• 設定Category變數
143

Responses & Fulfillment
• 設定階段性完成回應
• 啟動Fulfillment -> ENABLE FULFILLMENT
144

標記例句中的關鍵資訊
• 選取例句中的分類關鍵字
• 選擇 @CategoryType:Category
• 做完記得按下右上角的SAVE
145

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

在右方測試區進行測試
147

Integrations -> Web Demo
• 打開Web Demo的開關
• 點擊跳出視窗中的網址
148

DialogFlow 運作機制
Source: DialogFlow
149

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

開發流程
151

• 安裝 VS Code
• 安裝 Node
• 安裝 Ngrok
– https://ngrok.com/download
152

安裝Node.js
153

安裝Ngrok
– Windows：我的電腦 -> 右鍵 -> 內容 ->
進階系統設定 -> 環境變數 -> 系統變數 ->
Path -> 編輯 -> 新增
154

SheetDB.io
• 用同一個Google帳號登入SheetDB.io
• 建立新的API Create new API
• 將剛才試算表的網址貼到SheetDB.io網站
• 產生API URL
155

建立開發專案
• 專案資料夾：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

index.js
注意大小寫
157

依據查詢分類，取得Google試算表中的資料
158

index.js
• 用卡片方式呈現商品資訊
card.title
card.subtitle
card.imageUri
card.buttons
159

設定SheetDB API Key
• 增加productinfo_id (SheetDB API Key)
160

套件安裝
– 需要管理者權限(Mac加sudo)
161

開發流程
162

• 上方Play按鈕右邊下拉新增組態...
• 選擇「{ } Node.js 透過NPM 啟動」
163

Copy this one
164

DialogFlow Fulfillment
165

回到DialogFlow右方測試區進行測試
• 可順利連線，拿到衣服資料！
166

開發流程
167

• 跟著步驟建立帳號、啟動Messaging API
• Log in to console
168

169

Create new channel
• 選擇 Free Plan
• Confirm
170

取得相關資訊
Disabled
171

• 試著看看能不能看到剛才設定
好的對話
172

173

174

部署至Heroku
• 註冊帳號
• 設定App name：ec-bot-XXYYZZ
• 區域：美國
• Create App
175

• 終端機
heroku login
cd my-project-dic
git init
通常長得像 ec-bot-xxyyzz
176

• git add .
• heroku restart
第一次不用
177

啟動網站
178

• Domains and certificates
179

• Webhook Enabled
180

再度進行測試
• 本地的Ngrok、VS Code 都
可以關掉
• 進入DialogFlow -> 右方測試
區
181

整合至Facebook
• Integrations -> Facebook Messenger 開關
182

整合至Facebook
183

建立粉絲專頁 – 依需求選擇
https://www.facebook.com/pages/creation/
184

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

粉絲專頁
• 回到粉絲專頁。。。以粉絲專頁訪客角度檢視
• 按下傳送訊息開始測試
186

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

Smart Home with Alexa
188

August 智慧門鎖
189

August 智慧門鎖
190

Smart Control Your Devices
狀態：開 / 關
Connect
近端
遠端
查看門鎖狀態
發送虛擬鑰匙
遠端解鎖
查詢記錄
191

Alexa - Smart Home Skill API
https://developer.amazon.com/docs/smarthome/understand-the-smart-home-skill-api.html
192

電燈開發模擬實作
我想要
開燈
Dialogflow
語意分析
電燈狀態
通關密語
Webhook
Host at Heroku
通關密語確認
設定電燈狀態Google Sheets
Web Page
顯示電燈狀態
SheetDB
193

課前可準備事項
• 申請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

將設備狀態記錄在Google 試算表
• 進入Google 雲端硬碟，建一個Google Sheets
• 第一列兩個欄位：lightName、lightSwitch
• 第二列兩個欄位：main、關
195

開發流程
• 安裝所需工具以及準備好設備名稱與狀態資料
• 依據目的，取得要更新的狀態以及密碼
• 將撰寫好的程式碼部署上線
– Push your code to Heroku
• 在Web/Line/FB中實際測試
– Integrate to Messenger
196

開發流程
197

DialogFlow
• Agent：SmartHomeXXYY
• Language：zh-TW
• Intent ：LightSwitch
• Entities：LightStatus
訓練例句
198

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

Dialogflow – 建立新的Intent
• Intents -> CREATE INTENT
– 輸入Intent名稱為：LightSwitch
• Training phrases 輸入常見例句
– ADD TRAINING PHRASES
200

Dialogflow – 建立新的Entity
• Entities -> CREATE ENTITY
– 輸入Entity名稱為：LightStatus
• 輸入分類名稱以及同義字
201

Intents -> Action and parameters
• ADD PARAMETERS AND ACTION
• 設定Category變數、反問的提示句
202

Responses & Fulfillment
• 設定階段性完成回應
• 啟動Fulfillment -> ENABLE FULFILLMENT
203

標記例句中的關鍵資訊
• 選取例句中的狀態關鍵字
• 選擇 @LightStatus
• 做完記得按下右上角的SAVE
204

Intents -> Default Fallback & Welcome
• 兩個都設定相同的回應，引導使用者說出符合瀏覽
設定設備狀態意圖的例句
– 刪除其他預設回應句
– 改成如下的特定回應句
205

在右方測試區進行測試
206

Integrations -> Web Demo
• 打開Web Demo的開關
• 點擊跳出視窗中的網址
207

開發流程
208

• 安裝 VS Code
• 安裝Node
209

SheetDB.io
• 用同一個Google帳號登入SheetDB.io
• 將剛才試算表的網址貼到SheetDB.io網站
• 產生API URL
210

建立開發專案
• 專案資料夾：SmartHome
• 主要程式：index.js
• 終端機指令
npm init
• package.json
在scripts中增加
"start":"node index.js",
"debug":"node --inspect index.js"
211

index.js
• 記得新增config資料夾、裡面放default.json
{
"productinfo_id":"xxxx"
}
注意大小寫
212

index.js
213
• 依據密碼是否正確，決定要不要更新狀態

index.js
214

index.js
• 更新完成或是密碼驗證錯誤，都讓使用者知道
215
[
{ "text" :
{ "text" :
[ "更新完成" ]
}
}
]

開發流程
216

套件安裝
• 終端機：
npm-install-all index.js
(如果沒有npm-install-all的話請先照下面步驟安裝)
npm install npm-install-all -g (Mac使用者前面加sudo)
217

部署至Heroku
• 註冊帳號
• 設定App name：smart-home-XXYY
• 區域：美國
• Create App
218

• 終端機
heroku login
cd my-project-dic
git init
通常長得像 smart-home-xxyyzz
219

• git add .
• heroku restart
第一次不用
220

啟動網站
221

• Domains and certificates
222

• Webhook Enabled
223

開發流程
224

製作一個簡單網頁來模擬電燈狀態
• 在電腦中新增一個資料夾：SmartHomeWeb
• 在裡面新增一個index.html
• 撰寫以下內容
225

• 在裡面新增一個main.js 撰寫以下內容
226
這邊放你的SheetDB API Key

• 建立images資料夾，在裡面放兩張圖片
227

打開Dialogflow與剛才的網頁
• 輸入指令與通關密語，看看是否能正常更新
228

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

Ideas to develop
Source : Dialogflow
230

鬧鐘管理
231

應用程式管理
232

車載資通訊整合
233

匯率轉換
234

日期與假日
235

裝置設定管理
236

常見問答集
237

航班預約
238

外送服務
239

訂房服務
240

地圖應用
241

音樂播放
242

導航
243

新聞
244

電台播放
245

餐廳預約
246

閒聊
247

智慧家庭
248

技術支援
249

電視控制
250

時間相關
251

小費計算
252

交通狀況查詢
253

翻譯
254

單位轉換
255

影片播放
256

音量控制
257

天氣相關
258

網路搜尋
259

練習：功能拆解
• 請挑選上述其中一個範例或自創一個
– 列出意圖
– 列出關鍵資訊
– 列出會需要的資料或是介接的資源
• 也可自行加入其他的創意功能
260

Intro to Dialogflow Chatbot Development

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Intro to Dialogflow Chatbot Development

Similaire à Intro to Dialogflow Chatbot Development (20)

Plus de Ryan Chung

Plus de Ryan Chung (20)

Intro to Dialogflow Chatbot Development