Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Smart Home Intro Lab

Ryan Chung
September 08, 2018

Smart Home Intro Lab

Ryan Chung

September 08, 2018
Tweet

More Decks by Ryan Chung

Other Decks in Technology

Transcript

  1. AI in Your Daily Life – [email protected] 資策會 數位教育研究所 ²

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

    主要教授科目 Ø 語音助理應用開發 Ø Chatbot應用開發 Ø Web / App 應用 ² 資策會數位教育研究所 Ø 課程經理 / 養成班導師 Ø 企業包班 / 政府專案經理 Ø 課程專任講師 /專題輔導 http://mobiledev.tw/ryan 3
  3. 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
  4. AI in Your Daily Life – [email protected] 常用情境 • 書房(Echo

    Show / Tap) – 聽音樂 – 問天氣 – 問時間 – 看電影預告 – 搜尋影片 – 拼單字 – 問單字 – 拍張照片 – 算數學 • 廚房(Echo Show) – 聽音樂 – 問時間 – 設定倒數計時 – 查食譜 10
  5. 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
  6. 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
  7. AI in Your Daily Life – [email protected] Smart Control Your

    Devices 狀態:開 / 關 Connect 近端 遠端 查看門鎖狀態 發送虛擬鑰匙 遠端解鎖 查詢記錄 16
  8. 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
  9. AI in Your Daily Life – [email protected] 電燈開發模擬實作 我想要 開燈

    Dialogflow 語意分析 電燈狀態 通關密語 Webhook Host at Heroku 通關密語確認 設定電燈狀態 Google Sheets Web Page 顯示電燈狀態 SheetDB 18
  10. 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
  11. AI in Your Daily Life – [email protected] 將設備狀態記錄在Google 試算表 •

    進入Google 雲端硬碟,建一個Google Sheets • 第一列兩個欄位:light_name、light_switch • 第二列兩個欄位:main、關 20
  12. 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
  13. 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 22
  14. AI in Your Daily Life – [email protected] DialogFlow • Agent:SmartHomeXXYY

    • Language:zh-TW • Intent :LightSwitch • Entities:LightStatus 訓練例句 23
  15. 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
  16. AI in Your Daily Life – [email protected] Dialogflow – 建立新的Intent

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

    • Entities -> CREATE ENTITY – 輸入Entity名稱為:LightStatus • 輸入分類名稱以及同義字 26
  18. AI in Your Daily Life – [email protected] Intents -> Action

    and parameters • ADD PARAMETERS AND ACTION • 設定Category變數、反問的提示句 27
  19. AI in Your Daily Life – [email protected] Responses & Fulfillment

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

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

    Demo • 打開Web Demo的開關 • 點擊跳出視窗中的網址 32
  22. 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 33
  23. 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
  24. AI in Your Daily Life – [email protected] SheetDB.io • 用同一個Google帳號登入SheetDB.io

    • 將剛才試算表的網址貼到SheetDB.io網站 • 產生API URL 35
  25. 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
  26. AI in Your Daily Life – [email protected] index.js 38 •

    依據密碼是否正確,決定要不要更新狀態
  27. 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 41
  28. 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
  29. AI in Your Daily Life – [email protected] 部署至Heroku • 註冊帳號

    • 右上角 New -> Create new app • 設定App name:smart-home-XXYY • 區域:美國 • Create App https://www.heroku.com/ 43
  30. 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
  31. AI in Your Daily Life – [email protected] 開始部署上傳(每次更新步驟亦同) • git

    add . • git commit –am "make it better" • git push heroku master • heroku restart 雙引號這邊像是你的上傳筆記 在這裡寫上這次更新的內容 之後code更新時再加這一步 第一次不用 45
  32. AI in Your Daily Life – [email protected] 啟動網站 • heroku

    ps:scale web=1 非常非常關鍵的一步,一定要記得做 46
  33. AI in Your Daily Life – [email protected] 找到Heroku的網址 • Domains

    and certificates https://dashboard.heroku.com/apps/YourAppName/settings • 其實網址就是 https://YourAppName.herokuapp.com 47
  34. AI in Your Daily Life – [email protected] 回到DialogFlow設定Fulfillment • Webhook

    Enabled https://YourAppName.herokuapp.com/webhook • 打完記得畫面拉至最下方,按下Save 48
  35. 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 49
  36. AI in Your Daily Life – [email protected] Gartner 預測 •

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

    • 需求的存取將透過更多元的方式,如VPA、 Chatbot來實現 55
  38. 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
  39. AI in Your Daily Life – [email protected] 語音/聊天機器人 助理的運作方式 查詢

    新增 修改 刪除 網際網路資源 公開資料 私有 資料庫 使用者介面 雲端處理機制 57
  40. AI in Your Daily Life – [email protected] Web -> APP

    -> Chatbot/VPA 你好!請問需 要什麼協助? 59
  41. AI in Your Daily Life – [email protected] Typeform - 用即時通來回答問卷

    Source:http://www.playpcesor.com/2017/03/typeform-facebook-messenger.html 60
  42. AI in Your Daily Life – [email protected] 這是不是肯德基 • 語意分析

    + 聊天機器人+ 認知服務 + 部署上線 DialogFlow • 意圖:判斷品牌 • 資料:品牌名稱 認知服務 Custom Vision Service • 圖片分類 MS Bot Framework Bot Channels Registration 65
  43. AI in Your Daily Life – [email protected] 人機互動腳本準則 • 以人們真正會說的話來設計,而不是那種文章上的口吻

    • 不要假設使用者知道要怎麼做或是知道會發生什麼事 真實 • 避免使用有多重含義的詞句、片語 • 引導使用者提供必要的資訊 明確 • 清楚地把選項呈現出來 • 一般而言,一次不要丟出超過三個選項 • 一次向使用者要一個資訊 簡單 67
  44. AI in Your Daily Life – [email protected] 語音助理技能設計方向 • 讓人們更快達成目的

    • 語音控制音樂播放 Fast • 讓人們更簡單地達成目的 • 語音控制電燈開關、語音設定倒數計時 Easy • 增添生活趣味 • 具有挑戰性的遊戲 Fun Source: Voice Design Guide – Amazon Alexa 68
  45. 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
  46. AI in Your Daily Life – [email protected] Recap for Developer

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

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