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

Recommended

Recommended

More Related Content

Similar to Smart Home Intro Lab

Similar to Smart Home Intro Lab (20)

More from Ryan Chung

More from Ryan Chung (20)

Smart Home Intro Lab