Smart Home Intro Lab

AI in Your Daily Life – Ryan@iii.org.tw
AI 生活商機
智慧家庭-生活助理
AI in Your Daily Life
Ryan@iii.org.tw
III Digital Education Institute
1

資策會數位教育研究所
² 最新科技進修
Ø 在職夜間假日進修
Ø 轉職全天養成班
² 資訊技術充電站
Ø 國際技術趨勢
Ø 職場必備能力
Ø 基本資訊技能
http://taipei.iiiedu.org.tw/
2

Ryan Chung
² 主要教授科目
Ø 語音助理應用開發
Ø Chatbot應用開發
Ø Web / App 應用
² 資策會數位教育研究所
Ø 課程經理 / 養成班導師
Ø 企業包班 / 政府專案經理
Ø 課程專任講師 /專題輔導
http://mobiledev.tw/ryan
3

AI in Your Daily Life – Ryan@iii.org.tw 4

Alexa Everywhere!
5

echo dot & amazon tap
6

你的腦叫你一直買
7

Echo Show
8

amazon echo family
https://www.amazon.com/Amazon-Echo-And-Alexa-Devices/b?ie=UTF8&node=9818047011
9

常用情境
• 書房(Echo Show /
Tap)
– 聽音樂
– 問天氣
– 問時間
– 看電影預告
– 搜尋影片
– 拼單字
– 問單字
– 拍張照片
– 算數學
• 廚房(Echo Show)
– 聽音樂
– 問時間
– 設定倒數計時
– 查食譜
10

播放電影預告片
Show me some latest movies.
Play the trailer for number X.
https://www.youtube.com/watch?v=aKg85qEFMHs
11

播放音樂
• 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.
12

Smart Home with Alexa
13

August 智慧門鎖
14

August 智慧門鎖
15

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

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

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

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

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

開發流程
• 安裝所需工具以及準備好設備名稱與狀態資料
– Google Account, Heroku Account, Heroku CLI
• 分析使用者輸入，確定目的
– Google Dialogflow Natural Language Processing
• 依據目的，取得要更新的狀態以及密碼
– Fulfillment Programming
• 將撰寫好的程式碼部署上線
– Push your code to Heroku
• 在Web/Line/FB中實際測試
– Integrate to Messenger
21

開發流程
22

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

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

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

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

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

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

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

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

在右方測試區進行測試
31

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

開發流程
33

開發前準備事項
• 安裝 VS Code
– https://code.visualstudio.com/
• 安裝Node
– https://nodejs.org/en/download/
• 安裝NPM
– https://github.com/nodejs-tw/nodejs-wiki-
book/blob/master/zh-tw/node_npm.rst
34

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

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

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

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

index.js
39

index.js
• 更新完成或是密碼驗證錯誤，都讓使用者知道
40

開發流程
41

套件安裝
• 終端機：
npm-install-all index.js
(如果沒有npm-install-all的話請先照下面步驟安裝)
npm install npm-install-all -g (Mac使用者前面加sudo)
• 增加 .gitignore 檔案
– 裡面寫：node_modules/
42

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

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
44

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

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

找到Heroku的網址
• Domains and certificates
https://dashboard.heroku.com/apps/YourAppName/settings
• 其實網址就是
https://YourAppName.herokuapp.com
47

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

開發流程
49

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

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

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

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

Gartner 預測
• 2018年，會有超過20億人會以對話的形式來與
虛擬個人助理、智慧型手機以及連網裝置進行
互動
• 2020年，40%的使用者會以對話的形式為主來
使用支援人工智慧應用程式
• 2020年，25%的家庭會有兩個甚至更多的智慧
語音助理喇叭
Source : http://iveybusinessreview.ca/
54

手機APP/網站 -> 語音助理/Chatbot
• 需求的存取將透過更多元的方式，如VPA、
Chatbot來實現
55

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

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

為什麼要透過
語音或是聊天的方式來輸入內容？
User Friendly
58

Web -> APP -> Chatbot/VPA
你好！請問需
要什麼協助？
59

Typeform - 用即時通來回答問卷
Source：http://www.playpcesor.com/2017/03/typeform-facebook-messenger.html
60

Skyscanner - 用Chatbot查優惠機票
m.me/skyscanner
61

使用者通常拿語音助理來做什麼？
62

財務管理語音助理
https://www.americanexpress.com/us/content/alexa/
63

Conversational UI 的時代來臨
64

這是不是肯德基
• 語意分析 + 聊天機器人+ 認知服務 + 部署上線
DialogFlow
• 意圖：判斷品牌
• 資料：品牌名稱
認知服務
Custom Vision
Service
• 圖片分類
MS Bot Framework
Bot Channels
Registration
65

測試
66

人機互動腳本準則
• 以人們真正會說的話來設計，而不是那種文章上的口吻
• 不要假設使用者知道要怎麼做或是知道會發生什麼事
真實
• 避免使用有多重含義的詞句、片語
• 引導使用者提供必要的資訊
明確
• 清楚地把選項呈現出來
• 一般而言，一次不要丟出超過三個選項
• 一次向使用者要一個資訊
簡單
67

語音助理技能設計方向
• 讓人們更快達成目的
• 語音控制音樂播放Fast
• 讓人們更簡單地達成目的
• 語音控制電燈開關、語音設定倒數計時Easy
• 增添生活趣味
• 具有挑戰性的遊戲Fun
Source: Voice Design Guide – Amazon Alexa
68

語音助理/聊天機器人學習地圖
雲端服務
Microsoft Azure Google CloudAWS
雲端應用
認知服務
電腦視覺
語音辨識
資料存取
Open Data
資料庫
語法基礎
Node.JS C#Python
聊天機器人 Chatbot
Microsoft Bot Framework
LineFacebook WeChat
Slack Skype Web
人工智慧語意分析應用服務
Dialogflow Wit.aiLuis.ai
語言翻譯
UI
對談介面
流程設計
語音助理 VA
Amazon Alexa
Microsoft Cortana
Google Home
69

Recap for Developer
• 新一代的開發者：Connector
• 使用者介面、處理機制與雲端資源
• Node.js 在潮流中倍受重視
• 語音助理/Chatbot 設計的第一步是釐清目標
Source : https://sijieand500words.com
70

Recap for All
• 自然語言交談介面裝置將大舉進入你的生活
• 語言和文化密不可分，跨領域合作優化服務
• 多元化的後端服務與資料，將產生殺手級應用
71

敬請指教
Ryan Chung
Senior Engineer
III Digital Education Institute
Ryan@iii.org.tw
72

Smart Home Intro Lab

More Related Content

Similar to Smart Home Intro Lab

More from Ryan Chung

Smart Home Intro Lab