Smart Home Intro Lab - Speaker Deck

Slide 1

Slide 1 text

AI in Your Daily Life – [email protected] AI 生活商機智慧家庭-生活助理 AI in Your Daily Life [email protected] III Digital Education Institute 1

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

AI in Your Daily Life – [email protected] 4

Slide 5

Slide 5 text

AI in Your Daily Life – [email protected] Alexa Everywhere! 5

Slide 6

Slide 6 text

AI in Your Daily Life – [email protected] echo dot & amazon tap 6

Slide 7

Slide 7 text

AI in Your Daily Life – [email protected] 你的腦叫你一直買 7

Slide 8

Slide 8 text

AI in Your Daily Life – [email protected] Echo Show 8

Slide 9

Slide 9 text

AI in Your Daily Life – [email protected] amazon echo family https://www.amazon.com/Amazon-Echo-And-Alexa-Devices/b?ie=UTF8&node=9818047011 9

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

AI in Your Daily Life – [email protected] 播放電影預告片 Show me some latest movies. Play the trailer for number X. https://www.youtube.com/watch?v=aKg85qEFMHs 11

Slide 12

Slide 12 text

AI in Your Daily Life – [email protected] 播放音樂 • 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

Slide 13

Slide 13 text

AI in Your Daily Life – [email protected] Smart Home with Alexa 13

Slide 14

Slide 14 text

AI in Your Daily Life – [email protected] August 智慧門鎖 14

Slide 15

Slide 15 text

AI in Your Daily Life – [email protected] August 智慧門鎖 15

Slide 16

Slide 16 text

AI in Your Daily Life – [email protected] Smart Control Your Devices 狀態：開 / 關 Connect 近端遠端查看門鎖狀態發送虛擬鑰匙遠端解鎖查詢記錄 16

Slide 17

Slide 17 text

AI in Your Daily Life – [email protected] Alexa - Smart Home Skill API https://developer.amazon.com/docs/smarthome/understand-the-smart-home-skill-api.html 17

Slide 18

Slide 18 text

AI in Your Daily Life – [email protected] 電燈開發模擬實作我想要開燈 Dialogflow 語意分析電燈狀態通關密語 Webhook Host at Heroku 通關密語確認設定電燈狀態 Google Sheets Web Page 顯示電燈狀態 SheetDB 18

Slide 19

Slide 19 text

AI in Your Daily Life – [email protected] 課前可準備事項 • 申請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

Slide 20

Slide 20 text

AI in Your Daily Life – [email protected] 將設備狀態記錄在Google 試算表 • 進入Google 雲端硬碟，建一個Google Sheets • 第一列兩個欄位：light_name、light_switch • 第二列兩個欄位：main、關 20

Slide 21

Slide 21 text

AI in Your Daily Life – [email protected] 開發流程 • 安裝所需工具以及準備好設備名稱與狀態資料 – 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

Slide 22

Slide 22 text

Slide 23

Slide 23 text

AI in Your Daily Life – [email protected] DialogFlow • Agent：SmartHomeXXYY • Language：zh-TW • Intent ：LightSwitch • Entities：LightStatus 訓練例句 23

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

AI in Your Daily Life – [email protected] Dialogflow – 建立新的Intent • Intents -> CREATE INTENT – 輸入Intent名稱為：LightSwitch • Training phrases 輸入常見例句 – ADD TRAINING PHRASES 25

Slide 26

Slide 26 text

AI in Your Daily Life – [email protected] Dialogflow – 建立新的Entity • Entities -> CREATE ENTITY – 輸入Entity名稱為：LightStatus • 輸入分類名稱以及同義字 26

Slide 27

Slide 27 text

AI in Your Daily Life – [email protected] Intents -> Action and parameters • ADD PARAMETERS AND ACTION • 設定Category變數、反問的提示句 27

Slide 28

Slide 28 text

AI in Your Daily Life – [email protected] Responses & Fulfillment • 設定階段性完成回應 • 啟動Fulfillment -> ENABLE FULFILLMENT 28

Slide 29

Slide 29 text

AI in Your Daily Life – [email protected] 標記例句中的關鍵資訊 • 選取例句中的狀態關鍵字 • 選擇 @LightStatus • 做完記得按下右上角的SAVE 29

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

AI in Your Daily Life – [email protected] 在右方測試區進行測試 31

Slide 32

Slide 32 text

AI in Your Daily Life – [email protected] Integrations -> Web Demo • 打開Web Demo的開關 • 點擊跳出視窗中的網址 32

Slide 33

Slide 33 text

Slide 34

Slide 34 text

AI in Your Daily Life – [email protected] 開發前準備事項 • 安裝 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

Slide 35

Slide 35 text

AI in Your Daily Life – [email protected] SheetDB.io • 用同一個Google帳號登入SheetDB.io • 將剛才試算表的網址貼到SheetDB.io網站 • 產生API URL 35

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

AI in Your Daily Life – [email protected] index.js • 記得新增config資料夾、裡面放default.json { "productinfo_id":"xxxx" } 注意大小寫 37

Slide 38

Slide 38 text

AI in Your Daily Life – [email protected] index.js 38 • 依據密碼是否正確，決定要不要更新狀態

Slide 39

Slide 39 text

AI in Your Daily Life – [email protected] index.js 39

Slide 40

Slide 40 text

AI in Your Daily Life – [email protected] index.js • 更新完成或是密碼驗證錯誤，都讓使用者知道 40

Slide 41

Slide 41 text

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

AI in Your Daily Life – [email protected] 部署至Heroku • 註冊帳號 • 右上角 New -> Create new app • 設定App name：smart-home-XXYY • 區域：美國 • Create App https://www.heroku.com/ 43

Slide 44

Slide 44 text

AI in Your Daily Life – [email protected] 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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

AI in Your Daily Life – [email protected] 啟動網站 • heroku ps:scale web=1 非常非常關鍵的一步，一定要記得做 46

Slide 47

Slide 47 text

AI in Your Daily Life – [email protected] 找到Heroku的網址 • Domains and certificates https://dashboard.heroku.com/apps/YourAppName/settings • 其實網址就是 https://YourAppName.herokuapp.com 47

Slide 48

Slide 48 text

AI in Your Daily Life – [email protected] 回到DialogFlow設定Fulfillment • Webhook Enabled https://YourAppName.herokuapp.com/webhook • 打完記得畫面拉至最下方，按下Save 48

Slide 49

Slide 49 text

Slide 50

Slide 50 text

AI in Your Daily Life – [email protected] 製作一個簡單網頁來模擬電燈狀態 • 在電腦中新增一個資料夾：SmartHomeWeb • 在裡面新增一個index.html • 撰寫以下內容 50

Slide 51

Slide 51 text

AI in Your Daily Life – [email protected] 製作一個簡單網頁來模擬電燈狀態 • 在裡面新增一個main.js 撰寫以下內容 51 這邊放你的SheetDB API Key

Slide 52

Slide 52 text

AI in Your Daily Life – [email protected] 製作一個簡單網頁來模擬電燈狀態 • 建立images資料夾，在裡面放兩張圖片 52

Slide 53

Slide 53 text

AI in Your Daily Life – [email protected] 打開Dialogflow與剛才的網頁 • 輸入指令與通關密語，看看是否能正常更新 53

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

AI in Your Daily Life – [email protected] 手機APP/網站 -> 語音助理/Chatbot • 需求的存取將透過更多元的方式，如VPA、 Chatbot來實現 55

Slide 56

Slide 56 text

AI in Your Daily Life – [email protected] 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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

AI in Your Daily Life – [email protected] 為什麼要透過語音或是聊天的方式來輸入內容？ User Friendly 58

Slide 59

Slide 59 text

AI in Your Daily Life – [email protected] Web -> APP -> Chatbot/VPA 你好！請問需要什麼協助？ 59

Slide 60

Slide 60 text

AI in Your Daily Life – [email protected] Typeform - 用即時通來回答問卷 Source：http://www.playpcesor.com/2017/03/typeform-facebook-messenger.html 60

Slide 61

Slide 61 text

AI in Your Daily Life – [email protected] Skyscanner - 用Chatbot查優惠機票 m.me/skyscanner 61

Slide 62

Slide 62 text

AI in Your Daily Life – [email protected] 使用者通常拿語音助理來做什麼？ 62

Slide 63

Slide 63 text

AI in Your Daily Life – [email protected] 財務管理語音助理 https://www.americanexpress.com/us/content/alexa/ 63

Slide 64

Slide 64 text

AI in Your Daily Life – [email protected] Conversational UI 的時代來臨 64

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

AI in Your Daily Life – [email protected] 測試 66

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

AI in Your Daily Life – [email protected] 敬請指教 Ryan Chung Senior Engineer III Digital Education Institute [email protected] 72