http://MobileDev.TW

1. 行動開發學院 MobileDev.TW
打造你的工具人
Chatbot / Voice Assistant
Development 101
Ryan@iii.org.tw
III IT Training Center
1

2. 行動開發學院 MobileDev.TW
Ryan Chung
• Microsoft
• 國際訓練機構
• 國際菁英俱樂部
• 資訊安全人才
• iOS APP
• Web
• Chatbot/VA
• iOS APP
• Web
• Chatbot/VA
開發者
Developer
講師
Instructor
國際合作
PR
專案經理
PM
2

3. 行動開發學院 MobileDev.TW
談到語音助理，你會想到的是…
3

4. 行動開發學院 MobileDev.TW
談到聊天平台，你會想到的是…
4

5. 行動開發學院 MobileDev.TW
我們先退一步，想想過去常見的
人機互動方式
5

6. 行動開發學院 MobileDev.TW
Desktop UX
• 滑鼠
• 鍵盤
6

7. 行動開發學院 MobileDev.TW
Mobile Device UX
• 觸控手勢
• Tap
• Pinch
• Pan
• Swipe
• Rotate
• Lone Press
7

8. 行動開發學院 MobileDev.TW
TV UX
• 遙控器
• 上下左右
• 進入
• 返回
• 手勢
• 聲音
• 智慧型手機
8

9. 行動開發學院 MobileDev.TW
Watch UX
• 點擊、強按、捲動、錶冠、側邊按鈕
9

10. 行動開發學院 MobileDev.TW
APP/Web -> VPA/Chatbot
• Gartner預測，在2020年時，80%的使用者將
只會使用目前一半的APP，大部分的需求會透
過VPA(虛擬個人助理)/Chatbot(聊天機器人)
10

11. 行動開發學院 MobileDev.TW
UX Trend 2017
• AI、Chatbot、VR
Noam Alloush
語音辨識將會撼動整個UX產業。
我相信再過個五年，大家不在討論什麼前
端還是後端，而是語音端(Voice Side)
Ignas Rubezius
Conversational UI(對話式介面)將是
2017年最有趣的趨勢，隨著快速成長的
趨勢，這將成為未來UX的重要角色
UX Trends 2017: Experts Bet On AI, Chatbots And VR - https://www.forbes.com
11

12. 行動開發學院 MobileDev.TW
VPA / Chatbot
12

13. 行動開發學院 MobileDev.TW
語音/聊天機器人 助理的運作方式
查詢
新增
修改
刪除
雲端處理機制 使用者介面網際網路資源
公開資料
私有
資料庫
13

14. 行動開發學院 MobileDev.TW
為什麼要透過
語音或是聊天的方式來輸入內容？
User Friendly
14

15. 行動開發學院 MobileDev.TW
Web -> APP -> Chatbot/VPA
你好！請問需
要什麼協助？
15

16. 行動開發學院 MobileDev.TW
Typeform用即時通來回答問卷
Source：http://www.playpcesor.com/2017/03/typeform-facebook-messenger.html
16

17. 行動開發學院 MobileDev.TW
Conversational UI 的時代來臨
17

18. 行動開發學院 MobileDev.TW
Chatbot / VPA
Development 101
18

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

20. 行動開發學院 MobileDev.TW
天氣機器人開發 1.0
• 目標
– 輸入：時間、地點
– 回傳：天氣概況、溫度
• 介面
– 網頁
• 工具/技術
– API.ai
– AJAX
20

21. 行動開發學院 MobileDev.TW
API.ai
21

22. 行動開發學院 MobileDev.TW
Create Agent
22

23. 行動開發學院 MobileDev.TW
Create Intent
23

24. 行動開發學院 MobileDev.TW
標示必要資訊，並引導使用者輸入
24

25. 行動開發學院 MobileDev.TW
追問出日期
25

26. 行動開發學院 MobileDev.TW
追問出城市
26

27. 行動開發學院 MobileDev.TW
設定確認取得查詢資訊的回應
Agent Trained Complete
27

28. 行動開發學院 MobileDev.TW
測試看看
28

29. 行動開發學院 MobileDev.TW
結合Open Weather Map
http://openweathermap.org/
29

30. 行動開發學院 MobileDev.TW
Get API Key
https://openweathermap.org/appid
30

31. 行動開發學院 MobileDev.TW
API - By city name
31

32. 行動開發學院 MobileDev.TW
再加上一點AJAX
https://www.slideshare.net/ryan/ajax-basic-47861167
32

33. 行動開發學院 MobileDev.TW
就可以做出簡易的天氣機器人！
http://mobiledev.tw/WeatherBot/
33

34. 行動開發學院 MobileDev.TW
回顧一下，我們串了什麼？
輸入
查詢
HTML5
網頁
雲端處理機制
語意分析
判斷輸入
使用者介面網際網路資源
開放資料
天氣 API
34

35. 行動開發學院 MobileDev.TW
輸入與輸出
How is the weather today in Taipei?
時間：Today
地點：Taipei
取得
當天氣溫
天氣描述
35

36. 行動開發學院 MobileDev.TW
橫掃 CES 2017 的當紅炸子雞
36

37. 行動開發學院 MobileDev.TW
Alexa Devices
$179.99 US$49.99 US$129.99
插電使用 插電使用 電量充飽 約9hr
聲控 聲控 按鈕 / 聲控
單聲道 立體聲 立體聲 & 杜比
37

38. 行動開發學院 MobileDev.TW
網頁模擬測試
https://echosim.io
38

39. 行動開發學院 MobileDev.TW
網頁/APP 模擬
https://reverb.ai/
39

40. 行動開發學院 MobileDev.TW
Alexa Everywhere!
40

41. 行動開發學院 MobileDev.TW
Alexa擁有超過1萬個技能
41

42. 行動開發學院 MobileDev.TW
Alexa可以幹麻？
42

43. 行動開發學院 MobileDev.TW
目前有多少人有一台Echo?
超過820萬人
– 2017/1
43

44. 行動開發學院 MobileDev.TW
最熱門的技能種類
1. News (2,105)
2. Games, Trivia & Accessories (1,897)
3. Education & Reference(1,264)
4. Lifestyle(686)
5. Novelty & Humor(640)
44

45. 行動開發學院 MobileDev.TW
可以跟Alexa聊什麼？
Who is the president of united states?
The US President is
Donald Trump.
45

46. 行動開發學院 MobileDev.TW
可以跟Alexa聊什麼？
Are you hungry?
I don't get hungry or thirsty,
but thank you for asking.
46

47. 行動開發學院 MobileDev.TW
可以跟Alexa聊什麼？
Do you have a brain?
I don't have a brain like you do.
My smarts live in the cloud.
47

48. 行動開發學院 MobileDev.TW
可以跟Alexa聊什麼？
How old are you?
I'm 2 in human years, 14 in dog years, and
25 in cat years. I think A.I. years are marked
by nanoseconds, so that makes me like a
scrillion.
48

49. 行動開發學院 MobileDev.TW
可以跟Alexa聊什麼？
Are you hot?
No, I don't really feel hot or cold,
but thanks for asking.
49

50. 行動開發學院 MobileDev.TW
可以跟Alexa聊什麼？
Can you speak Chinese?
I speak fluent English and conversational
Pig Latin. My accent is atrocious, but it's
good enough to keep me from getting lost
in Pig Latium.
50

51. 行動開發學院 MobileDev.TW
可以跟Alexa聊什麼？
Pick a card
Your card is
the four of spades.
51

52. 行動開發學院 MobileDev.TW
可以跟Alexa聊什麼？
Roll a six sided die
I rolled a die
and got 4.
52

53. 行動開發學院 MobileDev.TW
可以跟Alexa聊什麼？
Flip a coin
Flipping...
it's heads.
53

54. 行動開發學院 MobileDev.TW
可以跟Alexa聊什麼？
Good morning
Good morning, and happy birthday
to comedian Ellen Degeneres. She's a
funny lady who loves to dance. I'm
pretty sure we'd be BFFs, if we ever
got a chance to hang out!
54

55. 行動開發學院 MobileDev.TW
可以跟Alexa聊什麼？
How much are you?
You can search on Amazon.com
to see how much I cost.
55

56. 行動開發學院 MobileDev.TW
我最常叫Alexa做的事情
• Just say, “Alexa!” and then…
– “Play [song name] by [artist]”.
– “Pause” pauses the currently playing track.
– “Play [Discover Weekly] playlist”.
– “Volume up/down” turns volume up or down.
– “Stop” stops the currently playing track.
56

57. 行動開發學院 MobileDev.TW
Alexa Skill Type
• Custom skill
– 網路服務介接
– 互動遊戲
• Smart Home Skill API
– 開關燈
– 溫度控制
• Flash Briefing Skill API
– 每日笑話
– 定時新聞
57

58. 行動開發學院 MobileDev.TW
Alexa 處理流程
58

59. 行動開發學院 MobileDev.TW
Alexa, tell me a fact.
• 任務
– 讓Alexa隨機說出一個冷知識
• 建構步驟：
– 設定可接受的指令
– 設定可使用的冷知識
– 進行測試
59

60. 行動開發學院 MobileDev.TW
Alexa Skills Kit
上傳
建立與存放程式碼
設計 Voice UI
60

61. 行動開發學院 MobileDev.TW
註冊並登入Amazon開發平台
https://developer.amazon.com/
61

62. 行動開發學院 MobileDev.TW
註冊並登入Amazon開發平台
62

63. 行動開發學院 MobileDev.TW
增加一個技能
63

64. 行動開發學院 MobileDev.TW
設定技能屬性
設定技能型態
設定技能上架的名稱
設定使用者講什麼來
使用這個技能
64

65. 行動開發學院 MobileDev.TW
Intent Schema
• 以JSON格式儲存
• 用來宣告你有哪些服務
65

66. 行動開發學院 MobileDev.TW
在Intent Schema中輸入
66

67. 行動開發學院 MobileDev.TW
建立 Utterance List
• 由於語言的多元豐富性，我們必須建立一組讓
Alexa聽得懂的詢問方式語句庫
67

68. 行動開發學院 MobileDev.TW
註冊並登入AWS
68

69. 行動開發學院 MobileDev.TW
右上角區域選US East(N. Virginia)
進入Lambda服務
69

70. 行動開發學院 MobileDev.TW
點擊進入建立Lambda函數
70

71. 行動開發學院 MobileDev.TW
點擊進入建立Lambda函數
71

72. 行動開發學院 MobileDev.TW
選擇Alexa Skills Kit
72

73. 行動開發學院 MobileDev.TW
進行測試
Echo, ask Linbe
tell me a fact.
The most handsome man
in the world is Ryan.
73

74. 行動開發學院 MobileDev.TW
Microsoft Bot Framework
74

75. 行動開發學院 MobileDev.TW
Microsoft Bot Framework
• Bot Builder SDK
– .NET
– Node.js
• Bot Connector
– Skype
– Slack
– Facebook Messenger
– …
• Developer Portal
• Bot Directory
75

76. 行動開發學院 MobileDev.TW
利用聊天機器人
預約理髮
76

77. 行動開發學院 MobileDev.TW
開發工具 / 語言
• .NET SDK
• Node.js SDK
77

78. 行動開發學院 MobileDev.TW
測試
• 執行 node app.js
• 打開Bot emulater進行測試
78

79. 行動開發學院 MobileDev.TW
誰去買午餐？
• 任務
– 隨機挑選出去買午餐的人
• 方式
– 利用聊天機器人把要被選擇的人加入
– 請聊天機器人隨機挑選出一個人
79

80. 行動開發學院 MobileDev.TW
Demo
80

81. 行動開發學院 MobileDev.TW
Card Type
Hero Card Thumbnail Card Receipt Card
81

82. 行動開發學院 MobileDev.TW
Card Type
Animation Card Video Card Audio Card
82

83. 行動開發學院 MobileDev.TW
Microsoft Cognitive Service
• Computer Vision API
a man swimming in a pool of water
83

84. 行動開發學院 MobileDev.TW
Chatbot/VPA 拿來做什麼用？
• 資訊查詢
• 下訂單
• 預約系統
• 組合測試
84

85. 行動開發學院 MobileDev.TW
Chatbot/語音助理 學習地圖
雲端服務
Microsoft Azure Google CloudAWS
雲端應用
電腦視覺
語音辨識
資料存取
Open Data
資料庫
語法基礎
Node.JS C#Python
通訊平台連接
Microsoft Bot Framework
LineFacebook WeChat
Slack Skype Web
人工智慧應用服務
API.ai Wit.aiLuis.ai
語言翻譯
UI
對談介面
流程設計
85

86. 行動開發學院 MobileDev.TW
Summary
• 新一代的開發者：Connector
• 使用者介面、處理機制與雲端資源
• Node.js 在潮流中倍受重視
• Chatbot/VPA設計的第一步是釐清目標
86

87. 行動開發學院 MobileDev.TW
本講座由資策會「未來之星-菁英培育計畫」贊助舉辦
Ryan Chung
Program R&D Manager
III IT Training Center
Ryan@iii.org.tw
87