Smart Home Intro Lab

1. AI in Your Daily Life – Ryan@iii.org.tw AI 生活商機 智慧家庭-生活助理 AI in Your Daily Life Ryan@iii.org.tw III Digital Education Institute 1
2. AI in Your Daily Life – Ryan@iii.org.tw 資策會 數位教育研究所 ² 最新科技進修 Ø 在職夜間假日進修 Ø 轉職全天養成班 ² 資訊技術充電站 Ø 國際技術趨勢 Ø 職場必備能力 Ø 基本資訊技能 http://taipei.iiiedu.org.tw/ 2
3. AI in Your Daily Life – Ryan@iii.org.tw Ryan Chung ² 主要教授科目 Ø 語音助理應用開發 Ø Chatbot應用開發 Ø Web / App 應用 ² 資策會數位教育研究所 Ø 課程經理 / 養成班導師 Ø 企業包班 / 政府專案經理 Ø 課程專任講師 /專題輔導 http://mobiledev.tw/ryan 3
4. AI in Your Daily Life – Ryan@iii.org.tw 4
5. AI in Your Daily Life – Ryan@iii.org.tw Alexa Everywhere! 5
6. AI in Your Daily Life – Ryan@iii.org.tw echo dot & amazon tap 6
7. AI in Your Daily Life – Ryan@iii.org.tw 你的腦叫你一直買 7
8. AI in Your Daily Life – Ryan@iii.org.tw Echo Show 8
9. AI in Your Daily Life – Ryan@iii.org.tw amazon echo family https://www.amazon.com/Amazon-Echo-And-Alexa-Devices/b?ie=UTF8&node=9818047011 9
10. AI in Your Daily Life – Ryan@iii.org.tw 常用情境 • 書房(Echo Show / Tap) – 聽音樂 – 問天氣 – 問時間 – 看電影預告 – 搜尋影片 – 拼單字 – 問單字 – 拍張照片 – 算數學 • 廚房(Echo Show) – 聽音樂 – 問時間 – 設定倒數計時 – 查食譜 10
11. AI in Your Daily Life – Ryan@iii.org.tw 播放電影預告片 Show me some latest movies. Play the trailer for number X. https://www.youtube.com/watch?v=aKg85qEFMHs 11
12. AI in Your Daily Life – Ryan@iii.org.tw 播放音樂 • 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
13. AI in Your Daily Life – Ryan@iii.org.tw Smart Home with Alexa 13
14. AI in Your Daily Life – Ryan@iii.org.tw August 智慧門鎖 14
15. AI in Your Daily Life – Ryan@iii.org.tw August 智慧門鎖 15
16. AI in Your Daily Life – Ryan@iii.org.tw Smart Control Your Devices 狀態：開 / 關 Connect 近端 遠端 查看門鎖狀態 發送虛擬鑰匙 遠端解鎖 查詢記錄 16
17. AI in Your Daily Life – Ryan@iii.org.tw Alexa - Smart Home Skill API https://developer.amazon.com/docs/smarthome/understand-the-smart-home-skill-api.html 17
18. AI in Your Daily Life – Ryan@iii.org.tw 電燈開發模擬實作 我想要 開燈 Dialogflow 語意分析 電燈狀態 通關密語 Webhook Host at Heroku 通關密語確認 設定電燈狀態 Google Sheets Web Page 顯示電燈狀態 SheetDB 18
19. AI in Your Daily Life – Ryan@iii.org.tw 課前可準備事項 • 申請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
20. AI in Your Daily Life – Ryan@iii.org.tw 將設備狀態記錄在Google 試算表 • 進入Google 雲端硬碟，建一個Google Sheets • 第一列兩個欄位：light_name、light_switch • 第二列兩個欄位：main、關 20
21. AI in Your Daily Life – Ryan@iii.org.tw 開發流程 • 安裝所需工具以及準備好設備名稱與狀態資料 – 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. AI in Your Daily Life – Ryan@iii.org.tw 開發流程 • 安裝所需工具以及準備好設備名稱與狀態資料 – Google Account, Heroku Account, Heroku CLI • 分析使用者輸入，確定目的 – Google Dialogflow Natural Language Processing • 依據目的，取得要更新的狀態以及密碼 – Fulfillment Programming • 將撰寫好的程式碼部署上線 – Push your code to Heroku • 在Web/Line/FB中實際測試 – Integrate to Messenger 22
23. AI in Your Daily Life – Ryan@iii.org.tw DialogFlow • Agent：SmartHomeXXYY • Language：zh-TW • Intent ：LightSwitch • Entities：LightStatus 訓練例句 23
24. AI in Your Daily Life – Ryan@iii.org.tw Dialogflow – 建立新的Agent • 輸入Agent名稱 – SmartHomeXXYY • 設定預設語言 – Chinese(Traditional) – zh-tw • 設定時區 – (GMT+8:00) Asia/Hong_Kong • 按下右上方CREATE按鈕 24 https://console.dialogflow.com/api-client/#/newAgent
25. AI in Your Daily Life – Ryan@iii.org.tw Dialogflow – 建立新的Intent • Intents -> CREATE INTENT – 輸入Intent名稱為：LightSwitch • Training phrases 輸入常見例句 – ADD TRAINING PHRASES 25
26. AI in Your Daily Life – Ryan@iii.org.tw Dialogflow – 建立新的Entity • Entities -> CREATE ENTITY – 輸入Entity名稱為：LightStatus • 輸入分類名稱以及同義字 26
27. AI in Your Daily Life – Ryan@iii.org.tw Intents -> Action and parameters • ADD PARAMETERS AND ACTION • 設定Category變數、反問的提示句 27
28. AI in Your Daily Life – Ryan@iii.org.tw Responses & Fulfillment • 設定階段性完成回應 • 啟動Fulfillment -> ENABLE FULFILLMENT 28
29. AI in Your Daily Life – Ryan@iii.org.tw 標記例句中的關鍵資訊 • 選取例句中的狀態關鍵字 • 選擇 @LightStatus • 做完記得按下右上角的SAVE 29
30. AI in Your Daily Life – Ryan@iii.org.tw Intents -> Default Fallback & Welcome • 兩個都設定相同的回應，引導使用者說出符合瀏覽 設定設備狀態意圖的例句 – 刪除其他預設回應句 – 改成如下的特定回應句 30
31. AI in Your Daily Life – Ryan@iii.org.tw 在右方測試區進行測試 31
32. AI in Your Daily Life – Ryan@iii.org.tw Integrations -> Web Demo • 打開Web Demo的開關 • 點擊跳出視窗中的網址 32
33. AI in Your Daily Life – Ryan@iii.org.tw 開發流程 • 安裝所需工具以及準備好設備名稱與狀態資料 – Google Account, Heroku Account, Heroku CLI • 分析使用者輸入，確定目的 – Google Dialogflow Natural Language Processing • 依據目的，取得要更新的狀態以及密碼 – Fulfillment Programming • 將撰寫好的程式碼部署上線 – Push your code to Heroku • 在Web/Line/FB中實際測試 – Integrate to Messenger 33
34. AI in Your Daily Life – Ryan@iii.org.tw 開發前準備事項 • 安裝 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
35. AI in Your Daily Life – Ryan@iii.org.tw SheetDB.io • 用同一個Google帳號登入SheetDB.io • 將剛才試算表的網址貼到SheetDB.io網站 • 產生API URL 35
36. AI in Your Daily Life – Ryan@iii.org.tw 建立開發專案 • 專案資料夾：SmartHome • 主要程式：index.js • 終端機指令 npm init • package.json 在scripts中增加 "start":"node index.js", "debug":"node --inspect index.js" 36
37. AI in Your Daily Life – Ryan@iii.org.tw index.js • 記得新增config資料夾、裡面放default.json { "productinfo_id":"xxxx" } 注意大小寫 37
38. AI in Your Daily Life – Ryan@iii.org.tw index.js 38 • 依據密碼是否正確，決定要不要更新狀態
39. AI in Your Daily Life – Ryan@iii.org.tw index.js 39
40. AI in Your Daily Life – Ryan@iii.org.tw index.js • 更新完成或是密碼驗證錯誤，都讓使用者知道 40
41. AI in Your Daily Life – Ryan@iii.org.tw 開發流程 • 安裝所需工具以及準備好設備名稱與狀態資料 – Google Account, Heroku Account, Heroku CLI • 分析使用者輸入，確定目的 – Google Dialogflow Natural Language Processing • 依據目的，取得要更新的狀態以及密碼 – Fulfillment Programming • 將撰寫好的程式碼部署上線 – Push your code to Heroku • 在Web/Line/FB中實際測試 – Integrate to Messenger 41
42. AI in Your Daily Life – Ryan@iii.org.tw 套件安裝 • 終端機： npm-install-all index.js (如果沒有npm-install-all的話請先照下面步驟安裝) npm install npm-install-all -g (Mac使用者前面加sudo) • 增加 .gitignore 檔案 – 裡面寫：node_modules/ 42
43. AI in Your Daily Life – Ryan@iii.org.tw 部署至Heroku • 註冊帳號 • 右上角 New -> Create new app • 設定App name：smart-home-XXYY • 區域：美國 • Create App https://www.heroku.com/ 43
44. AI in Your Daily Life – Ryan@iii.org.tw 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
45. AI in Your Daily Life – Ryan@iii.org.tw 開始部署上傳(每次更新步驟亦同) • git add . • git commit –am "make it better" • git push heroku master • heroku restart 雙引號這邊像是你的上傳筆記 在這裡寫上這次更新的內容 之後code更新時再加這一步 第一次不用 45
46. AI in Your Daily Life – Ryan@iii.org.tw 啟動網站 • heroku ps:scale web=1 非常非常關鍵的一步，一定要記得做 46
47. AI in Your Daily Life – Ryan@iii.org.tw 找到Heroku的網址 • Domains and certificates https://dashboard.heroku.com/apps/YourAppName/settings • 其實網址就是 https://YourAppName.herokuapp.com 47
48. AI in Your Daily Life – Ryan@iii.org.tw 回到DialogFlow設定Fulfillment • Webhook Enabled https://YourAppName.herokuapp.com/webhook • 打完記得畫面拉至最下方，按下Save 48
49. AI in Your Daily Life – Ryan@iii.org.tw 開發流程 • 安裝所需工具以及準備好設備名稱與狀態資料 – Google Account, Heroku Account, Heroku CLI • 分析使用者輸入，確定目的 – Google Dialogflow Natural Language Processing • 依據目的，取得要更新的狀態以及密碼 – Fulfillment Programming • 將撰寫好的程式碼部署上線 – Push your code to Heroku • 在Web/Line/FB中實際測試 – Integrate to Messenger 49
50. AI in Your Daily Life – Ryan@iii.org.tw 製作一個簡單網頁來模擬電燈狀態 • 在電腦中新增一個資料夾：SmartHomeWeb • 在裡面新增一個index.html • 撰寫以下內容 50
51. AI in Your Daily Life – Ryan@iii.org.tw 製作一個簡單網頁來模擬電燈狀態 • 在裡面新增一個main.js 撰寫以下內容 51 這邊放你的SheetDB API Key
52. AI in Your Daily Life – Ryan@iii.org.tw 製作一個簡單網頁來模擬電燈狀態 • 建立images資料夾，在裡面放兩張圖片 52
53. AI in Your Daily Life – Ryan@iii.org.tw 打開Dialogflow與剛才的網頁 • 輸入指令與通關密語，看看是否能正常更新 53
54. AI in Your Daily Life – Ryan@iii.org.tw Gartner 預測 • 2018年，會有超過20億人會以對話的形式來與 虛擬個人助理、智慧型手機以及連網裝置進行 互動 • 2020年，40%的使用者會以對話的形式為主來 使用支援人工智慧應用程式 • 2020年，25%的家庭會有兩個甚至更多的智慧 語音助理喇叭 Source : http://iveybusinessreview.ca/ 54
55. AI in Your Daily Life – Ryan@iii.org.tw 手機APP/網站 -> 語音助理/Chatbot • 需求的存取將透過更多元的方式，如VPA、 Chatbot來實現 55
56. AI in Your Daily Life – Ryan@iii.org.tw 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. AI in Your Daily Life – Ryan@iii.org.tw 語音/聊天機器人 助理的運作方式 查詢 新增 修改 刪除 網際網路資源 公開資料 私有 資料庫 使用者介面 雲端處理機制 57
58. AI in Your Daily Life – Ryan@iii.org.tw 為什麼要透過 語音或是聊天的方式來輸入內容？ User Friendly 58
59. AI in Your Daily Life – Ryan@iii.org.tw Web -> APP -> Chatbot/VPA 你好！請問需 要什麼協助？ 59
60. AI in Your Daily Life – Ryan@iii.org.tw Typeform - 用即時通來回答問卷 Source：http://www.playpcesor.com/2017/03/typeform-facebook-messenger.html 60
61. AI in Your Daily Life – Ryan@iii.org.tw Skyscanner - 用Chatbot查優惠機票 m.me/skyscanner 61
62. AI in Your Daily Life – Ryan@iii.org.tw 使用者通常拿語音助理來做什麼？ 62
63. AI in Your Daily Life – Ryan@iii.org.tw 財務管理 語音助理 https://www.americanexpress.com/us/content/alexa/ 63
64. AI in Your Daily Life – Ryan@iii.org.tw Conversational UI 的時代來臨 64
65. AI in Your Daily Life – Ryan@iii.org.tw 這是不是肯德基 • 語意分析 + 聊天機器人+ 認知服務 + 部署上線 DialogFlow • 意圖：判斷品牌 • 資料：品牌名稱 認知服務 Custom Vision Service • 圖片分類 MS Bot Framework Bot Channels Registration 65
66. AI in Your Daily Life – Ryan@iii.org.tw 測試 66
67. AI in Your Daily Life – Ryan@iii.org.tw 人機互動腳本準則 • 以人們真正會說的話來設計，而不是那種文章上的口吻 • 不要假設使用者知道要怎麼做或是知道會發生什麼事 真實 • 避免使用有多重含義的詞句、片語 • 引導使用者提供必要的資訊 明確 • 清楚地把選項呈現出來 • 一般而言，一次不要丟出超過三個選項 • 一次向使用者要一個資訊 簡單 67
68. AI in Your Daily Life – Ryan@iii.org.tw 語音助理技能設計方向 • 讓人們更快達成目的 • 語音控制音樂播放 Fast • 讓人們更簡單地達成目的 • 語音控制電燈開關、語音設定倒數計時 Easy • 增添生活趣味 • 具有挑戰性的遊戲 Fun Source: Voice Design Guide – Amazon Alexa 68
69. AI in Your Daily Life – Ryan@iii.org.tw 語音助理/聊天機器人 學習地圖 雲端服務 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
70. AI in Your Daily Life – Ryan@iii.org.tw Recap for Developer • 新一代的開發者：Connector • 使用者介面、處理機制與雲端資源 • Node.js 在潮流中倍受重視 • 語音助理/Chatbot 設計的第一步是釐清目標 Source : https://sijieand500words.com 70
71. AI in Your Daily Life – Ryan@iii.org.tw Recap for All • 自然語言交談介面裝置將大舉進入你的生活 • 語言和文化密不可分，跨領域合作優化服務 • 多元化的後端服務與資料，將產生殺手級應用 71
72. AI in Your Daily Life – Ryan@iii.org.tw 敬請指教 Ryan Chung Senior Engineer III Digital Education Institute Ryan@iii.org.tw 72