Download - Intro to API.ai / Wit.ai / Luis.ai
![Page 2: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/2.jpg)
行動開發學院 MobileDev.TW
問題
• 如何讓機器人聽得懂人話?–特定指令–日常生活會說的句子
明天下午三點到北車集合
4月22日15:00在台北火車站碰面
明天下午三點整在北平西路3號會合
哈摟!我看明天我們就在台北車站碰面好了,下午三點,要記得哦
ㄟ,還記得明天的約會嗎?是下午三點,在火車站,別遲到!
提醒你一下,三點在北車碰頭,不見不散!
2
![Page 3: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/3.jpg)
行動開發學院 MobileDev.TW
天氣機器人開發 1.0
• 目標–輸入:時間、地點–回傳:天氣概況、溫度
• 介面–網頁
• 工具/技術– API.ai– AJAX
3
![Page 4: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/4.jpg)
行動開發學院 MobileDev.TW
API.ai
4
![Page 5: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/5.jpg)
行動開發學院 MobileDev.TW
Create New Agent
5
![Page 6: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/6.jpg)
行動開發學院 MobileDev.TW
Create New Agent
6
![Page 7: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/7.jpg)
行動開發學院 MobileDev.TW
語意分析常見名詞
• Intent 意圖–使用者對談的目的
• Entity 關鍵資訊–達成目的的必要輸入資訊
• Utterance 例句–使用者常用的句型
7
![Page 8: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/8.jpg)
行動開發學院 MobileDev.TW
Create Intent
8
![Page 9: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/9.jpg)
行動開發學院 MobileDev.TW
標示必要資訊,並引導使用者輸入
9
![Page 10: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/10.jpg)
行動開發學院 MobileDev.TW
追問出日期
10
![Page 11: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/11.jpg)
行動開發學院 MobileDev.TW
追問出城市
11
![Page 12: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/12.jpg)
行動開發學院 MobileDev.TW
設定確認取得查詢資訊的回應
AgentTrainedComplete
12
![Page 13: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/13.jpg)
行動開發學院 MobileDev.TW
測試看看
13
![Page 14: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/14.jpg)
行動開發學院 MobileDev.TW
整合至網頁
14
https://gist.github.com/Gugic/cfc008599fa9a82eeba4127648009132
![Page 15: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/15.jpg)
行動開發學院 MobileDev.TW
修改網頁
• Client access token
15
![Page 16: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/16.jpg)
行動開發學院 MobileDev.TW
開始有回應
16
![Page 17: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/17.jpg)
行動開發學院 MobileDev.TW
修改顯示的回應內容• 只顯示想要給使用者看的內容
17
![Page 18: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/18.jpg)
行動開發學院 MobileDev.TW
顯示出對話記錄
18
![Page 19: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/19.jpg)
行動開發學院 MobileDev.TW
顯示出對話記錄
19
![Page 20: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/20.jpg)
行動開發學院 MobileDev.TW
結合Open Weather Map
http://openweathermap.org/
20
![Page 21: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/21.jpg)
行動開發學院 MobileDev.TW
Get API Key
https://openweathermap.org/appid
21
![Page 22: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/22.jpg)
行動開發學院 MobileDev.TW
API - By city name
22
![Page 23: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/23.jpg)
行動開發學院 MobileDev.TW
取得天氣資訊• 確定交談動作完成時,開始取得資料
23
![Page 24: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/24.jpg)
行動開發學院 MobileDev.TW
取得天氣資訊• 依城市名稱進行天氣資訊查詢
24
![Page 25: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/25.jpg)
行動開發學院 MobileDev.TW
jQuery.ajax()
25
http://api.jquery.com/jquery.ajax/
![Page 26: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/26.jpg)
行動開發學院 MobileDev.TW
jQuery.getJSON()
26
http://api.jquery.com/jquery.getjson/
![Page 27: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/27.jpg)
行動開發學院 MobileDev.TW
簡易版天氣機器人完成
27
![Page 28: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/28.jpg)
行動開發學院 MobileDev.TW
延伸實作• 如何查詢特定日期天氣?• 如何在網頁上顯示天氣概況圖?• 能不能回傳中文天氣概況描述?
28
![Page 29: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/29.jpg)
行動開發學院 MobileDev.TW
回顧一下,我們串了什麼?
輸入查詢
HTML5網頁
雲端處理機制
語意分析判斷輸入
使用者介面網際網路資源
開放資料
天氣 API
29
![Page 30: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/30.jpg)
行動開發學院 MobileDev.TW
輸入與輸出
How is the weather today in Taipei?
時間:Today地點:Taipei
取得當天氣溫天氣描述
30
![Page 31: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/31.jpg)
行動開發學院 MobileDev.TW
練習:電影機器人開發 1.0• 目標–輸入:電影名稱–回傳:簡介、海報
• 介面–網頁
• 工具/技術– API.ai– AJAX
• 資料– theMovieDB.org
31
![Page 32: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/32.jpg)
行動開發學院 MobileDev.TW
產品預期畫面
32
![Page 33: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/33.jpg)
行動開發學院 MobileDev.TW
延伸實作:Backend整合
• 用API.ai取代傳統餐廳預約表單輸入–將餐廳預約需要的資訊整理至API.ai–將API.ai產生的變數傳送至餐廳預約系統–檢查是否有成功預約
• 用API.ai取代Google表單輸入–將問卷中的問題移至API.ai–將API.ai產生的變數傳送至Google表單系統–檢查是否有成功輸入
33
![Page 34: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/34.jpg)
行動開發學院 MobileDev.TW
Wit.ai
34
![Page 35: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/35.jpg)
行動開發學院 MobileDev.TW
新增 APP
35
![Page 36: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/36.jpg)
行動開發學院 MobileDev.TW
增加例句並設定entity
36
![Page 37: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/37.jpg)
行動開發學院 MobileDev.TW
測試 (Settings)
37
onlinecurl.com
![Page 38: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/38.jpg)
行動開發學院 MobileDev.TW
Start your curl• Check response body
38
![Page 39: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/39.jpg)
行動開發學院 MobileDev.TW
Luis.ai
39
![Page 40: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/40.jpg)
行動開發學院 MobileDev.TW
New App
40
![Page 41: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/41.jpg)
行動開發學院 MobileDev.TW
餐廳預約
41
![Page 42: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/42.jpg)
行動開發學院 MobileDev.TW
Create an intent
42
![Page 43: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/43.jpg)
行動開發學院 MobileDev.TW
Intent : 進行餐廳預約
43
![Page 44: Intro to API.ai / Wit.ai / Luis.ai](https://reader033.vdocuments.pub/reader033/viewer/2022052418/5a6492177f8b9a2c568b5d33/html5/thumbnails/44.jpg)
行動開發學院 MobileDev.TW
使用情形
• 中文斷詞判斷優於API.ai• 但以注音輸入中文時,按下Enter會被網頁判斷
成輸入完成
44