Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

打造你的工具人 Chatbot / Voice Assistant Development 101

2,505 views

Published on

http://MobileDev.TW

Published in: Technology

打造你的工具人 Chatbot / Voice Assistant Development 101

  1. 1. 行動開發學院 MobileDev.TW 打造你的工具人 Chatbot / Voice Assistant Development 101 Ryan@iii.org.tw III IT Training Center 1
  2. 2. 行動開發學院 MobileDev.TW Ryan Chung • Microsoft • 國際訓練機構 • 國際菁英俱樂部 • 資訊安全人才 • iOS APP • Web • Chatbot/VA • iOS APP • Web • Chatbot/VA 開發者 Developer 講師 Instructor 國際合作 PR 專案經理 PM 2
  3. 3. 行動開發學院 MobileDev.TW 談到語音助理,你會想到的是… 3
  4. 4. 行動開發學院 MobileDev.TW 談到聊天平台,你會想到的是… 4
  5. 5. 行動開發學院 MobileDev.TW 我們先退一步,想想過去常見的 人機互動方式 5
  6. 6. 行動開發學院 MobileDev.TW Desktop UX • 滑鼠 • 鍵盤 6
  7. 7. 行動開發學院 MobileDev.TW Mobile Device UX • 觸控手勢 • Tap • Pinch • Pan • Swipe • Rotate • Lone Press 7
  8. 8. 行動開發學院 MobileDev.TW TV UX • 遙控器 • 上下左右 • 進入 • 返回 • 手勢 • 聲音 • 智慧型手機 8
  9. 9. 行動開發學院 MobileDev.TW Watch UX • 點擊、強按、捲動、錶冠、側邊按鈕 9
  10. 10. 行動開發學院 MobileDev.TW APP/Web -> VPA/Chatbot • Gartner預測,在2020年時,80%的使用者將 只會使用目前一半的APP,大部分的需求會透 過VPA(虛擬個人助理)/Chatbot(聊天機器人) 10
  11. 11. 行動開發學院 MobileDev.TW UX Trend 2017 • AI、Chatbot、VR Noam Alloush 語音辨識將會撼動整個UX產業。 我相信再過個五年,大家不在討論什麼前 端還是後端,而是語音端(Voice Side) Ignas Rubezius Conversational UI(對話式介面)將是 2017年最有趣的趨勢,隨著快速成長的 趨勢,這將成為未來UX的重要角色 UX Trends 2017: Experts Bet On AI, Chatbots And VR - https://www.forbes.com 11
  12. 12. 行動開發學院 MobileDev.TW VPA / Chatbot 12
  13. 13. 行動開發學院 MobileDev.TW 語音/聊天機器人 助理的運作方式 查詢 新增 修改 刪除 雲端處理機制 使用者介面網際網路資源 公開資料 私有 資料庫 13
  14. 14. 行動開發學院 MobileDev.TW 為什麼要透過 語音或是聊天的方式來輸入內容? User Friendly 14
  15. 15. 行動開發學院 MobileDev.TW Web -> APP -> Chatbot/VPA 你好!請問需 要什麼協助? 15
  16. 16. 行動開發學院 MobileDev.TW Typeform用即時通來回答問卷 Source:http://www.playpcesor.com/2017/03/typeform-facebook-messenger.html 16
  17. 17. 行動開發學院 MobileDev.TW Conversational UI 的時代來臨 17
  18. 18. 行動開發學院 MobileDev.TW Chatbot / VPA Development 101 18
  19. 19. 行動開發學院 MobileDev.TW 問題 • 如何讓機器人聽得懂人話? – 特定指令 – 日常生活會說的句子 明天下午三點 到北車集合 4月22日15:00在 台北火車站碰面 明天下午三點整在 北平西路3號會合 哈摟!我看明天我們 就在台北車站碰面好 了,下午三點,要記 得哦 ㄟ,還記得明天的約 會嗎?是下午三點, 在火車站,別遲到! 提醒你一下,三點在 北車碰頭,不見不散 ! 19
  20. 20. 行動開發學院 MobileDev.TW 天氣機器人開發 1.0 • 目標 – 輸入:時間、地點 – 回傳:天氣概況、溫度 • 介面 – 網頁 • 工具/技術 – API.ai – AJAX 20
  21. 21. 行動開發學院 MobileDev.TW API.ai 21
  22. 22. 行動開發學院 MobileDev.TW Create Agent 22
  23. 23. 行動開發學院 MobileDev.TW Create Intent 23
  24. 24. 行動開發學院 MobileDev.TW 標示必要資訊,並引導使用者輸入 24
  25. 25. 行動開發學院 MobileDev.TW 追問出日期 25
  26. 26. 行動開發學院 MobileDev.TW 追問出城市 26
  27. 27. 行動開發學院 MobileDev.TW 設定確認取得查詢資訊的回應 Agent Trained Complete 27
  28. 28. 行動開發學院 MobileDev.TW 測試看看 28
  29. 29. 行動開發學院 MobileDev.TW 結合Open Weather Map http://openweathermap.org/ 29
  30. 30. 行動開發學院 MobileDev.TW Get API Key https://openweathermap.org/appid 30
  31. 31. 行動開發學院 MobileDev.TW API - By city name 31
  32. 32. 行動開發學院 MobileDev.TW 再加上一點AJAX https://www.slideshare.net/ryan/ajax-basic-47861167 32
  33. 33. 行動開發學院 MobileDev.TW 就可以做出簡易的天氣機器人! http://mobiledev.tw/WeatherBot/ 33
  34. 34. 行動開發學院 MobileDev.TW 回顧一下,我們串了什麼? 輸入 查詢 HTML5 網頁 雲端處理機制 語意分析 判斷輸入 使用者介面網際網路資源 開放資料 天氣 API 34
  35. 35. 行動開發學院 MobileDev.TW 輸入與輸出 How is the weather today in Taipei? 時間:Today 地點:Taipei 取得 當天氣溫 天氣描述 35
  36. 36. 行動開發學院 MobileDev.TW 橫掃 CES 2017 的當紅炸子雞 36
  37. 37. 行動開發學院 MobileDev.TW Alexa Devices $179.99 US$49.99 US$129.99 插電使用 插電使用 電量充飽 約9hr 聲控 聲控 按鈕 / 聲控 單聲道 立體聲 立體聲 & 杜比 37
  38. 38. 行動開發學院 MobileDev.TW 網頁模擬測試 https://echosim.io 38
  39. 39. 行動開發學院 MobileDev.TW 網頁/APP 模擬 https://reverb.ai/ 39
  40. 40. 行動開發學院 MobileDev.TW Alexa Everywhere! 40
  41. 41. 行動開發學院 MobileDev.TW Alexa擁有超過1萬個技能 41
  42. 42. 行動開發學院 MobileDev.TW Alexa可以幹麻? 42
  43. 43. 行動開發學院 MobileDev.TW 目前有多少人有一台Echo? 超過820萬人 – 2017/1 43
  44. 44. 行動開發學院 MobileDev.TW 最熱門的技能種類 1. News (2,105) 2. Games, Trivia & Accessories (1,897) 3. Education & Reference(1,264) 4. Lifestyle(686) 5. Novelty & Humor(640) 44
  45. 45. 行動開發學院 MobileDev.TW 可以跟Alexa聊什麼? Who is the president of united states? The US President is Donald Trump. 45
  46. 46. 行動開發學院 MobileDev.TW 可以跟Alexa聊什麼? Are you hungry? I don't get hungry or thirsty, but thank you for asking. 46
  47. 47. 行動開發學院 MobileDev.TW 可以跟Alexa聊什麼? Do you have a brain? I don't have a brain like you do. My smarts live in the cloud. 47
  48. 48. 行動開發學院 MobileDev.TW 可以跟Alexa聊什麼? How old are you? I'm 2 in human years, 14 in dog years, and 25 in cat years. I think A.I. years are marked by nanoseconds, so that makes me like a scrillion. 48
  49. 49. 行動開發學院 MobileDev.TW 可以跟Alexa聊什麼? Are you hot? No, I don't really feel hot or cold, but thanks for asking. 49
  50. 50. 行動開發學院 MobileDev.TW 可以跟Alexa聊什麼? Can you speak Chinese? I speak fluent English and conversational Pig Latin. My accent is atrocious, but it's good enough to keep me from getting lost in Pig Latium. 50
  51. 51. 行動開發學院 MobileDev.TW 可以跟Alexa聊什麼? Pick a card Your card is the four of spades. 51
  52. 52. 行動開發學院 MobileDev.TW 可以跟Alexa聊什麼? Roll a six sided die I rolled a die and got 4. 52
  53. 53. 行動開發學院 MobileDev.TW 可以跟Alexa聊什麼? Flip a coin Flipping... it's heads. 53
  54. 54. 行動開發學院 MobileDev.TW 可以跟Alexa聊什麼? Good morning Good morning, and happy birthday to comedian Ellen Degeneres. She's a funny lady who loves to dance. I'm pretty sure we'd be BFFs, if we ever got a chance to hang out! 54
  55. 55. 行動開發學院 MobileDev.TW 可以跟Alexa聊什麼? How much are you? You can search on Amazon.com to see how much I cost. 55
  56. 56. 行動開發學院 MobileDev.TW 我最常叫Alexa做的事情 • 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. 56
  57. 57. 行動開發學院 MobileDev.TW Alexa Skill Type • Custom skill – 網路服務介接 – 互動遊戲 • Smart Home Skill API – 開關燈 – 溫度控制 • Flash Briefing Skill API – 每日笑話 – 定時新聞 57
  58. 58. 行動開發學院 MobileDev.TW Alexa 處理流程 58
  59. 59. 行動開發學院 MobileDev.TW Alexa, tell me a fact. • 任務 – 讓Alexa隨機說出一個冷知識 • 建構步驟: – 設定可接受的指令 – 設定可使用的冷知識 – 進行測試 59
  60. 60. 行動開發學院 MobileDev.TW Alexa Skills Kit 上傳 建立與存放程式碼 設計 Voice UI 60
  61. 61. 行動開發學院 MobileDev.TW 註冊並登入Amazon開發平台 https://developer.amazon.com/ 61
  62. 62. 行動開發學院 MobileDev.TW 註冊並登入Amazon開發平台 62
  63. 63. 行動開發學院 MobileDev.TW 增加一個技能 63
  64. 64. 行動開發學院 MobileDev.TW 設定技能屬性 設定技能型態 設定技能上架的名稱 設定使用者講什麼來 使用這個技能 64
  65. 65. 行動開發學院 MobileDev.TW Intent Schema • 以JSON格式儲存 • 用來宣告你有哪些服務 65
  66. 66. 行動開發學院 MobileDev.TW 在Intent Schema中輸入 66
  67. 67. 行動開發學院 MobileDev.TW 建立 Utterance List • 由於語言的多元豐富性,我們必須建立一組讓 Alexa聽得懂的詢問方式語句庫 67
  68. 68. 行動開發學院 MobileDev.TW 註冊並登入AWS 68
  69. 69. 行動開發學院 MobileDev.TW 右上角區域選US East(N. Virginia) 進入Lambda服務 69
  70. 70. 行動開發學院 MobileDev.TW 點擊進入建立Lambda函數 70
  71. 71. 行動開發學院 MobileDev.TW 點擊進入建立Lambda函數 71
  72. 72. 行動開發學院 MobileDev.TW 選擇Alexa Skills Kit 72
  73. 73. 行動開發學院 MobileDev.TW 進行測試 Echo, ask Linbe tell me a fact. The most handsome man in the world is Ryan. 73
  74. 74. 行動開發學院 MobileDev.TW Microsoft Bot Framework 74
  75. 75. 行動開發學院 MobileDev.TW Microsoft Bot Framework • Bot Builder SDK – .NET – Node.js • Bot Connector – Skype – Slack – Facebook Messenger – … • Developer Portal • Bot Directory 75
  76. 76. 行動開發學院 MobileDev.TW 利用聊天機器人 預約理髮 76
  77. 77. 行動開發學院 MobileDev.TW 開發工具 / 語言 • .NET SDK • Node.js SDK 77
  78. 78. 行動開發學院 MobileDev.TW 測試 • 執行 node app.js • 打開Bot emulater進行測試 78
  79. 79. 行動開發學院 MobileDev.TW 誰去買午餐? • 任務 – 隨機挑選出去買午餐的人 • 方式 – 利用聊天機器人把要被選擇的人加入 – 請聊天機器人隨機挑選出一個人 79
  80. 80. 行動開發學院 MobileDev.TW Demo 80
  81. 81. 行動開發學院 MobileDev.TW Card Type Hero Card Thumbnail Card Receipt Card 81
  82. 82. 行動開發學院 MobileDev.TW Card Type Animation Card Video Card Audio Card 82
  83. 83. 行動開發學院 MobileDev.TW Microsoft Cognitive Service • Computer Vision API a man swimming in a pool of water 83
  84. 84. 行動開發學院 MobileDev.TW Chatbot/VPA 拿來做什麼用? • 資訊查詢 • 下訂單 • 預約系統 • 組合測試 84
  85. 85. 行動開發學院 MobileDev.TW Chatbot/語音助理 學習地圖 雲端服務 Microsoft Azure Google CloudAWS 雲端應用 電腦視覺 語音辨識 資料存取 Open Data 資料庫 語法基礎 Node.JS C#Python 通訊平台連接 Microsoft Bot Framework LineFacebook WeChat Slack Skype Web 人工智慧應用服務 API.ai Wit.aiLuis.ai 語言翻譯 UI 對談介面 流程設計 85
  86. 86. 行動開發學院 MobileDev.TW Summary • 新一代的開發者:Connector • 使用者介面、處理機制與雲端資源 • Node.js 在潮流中倍受重視 • Chatbot/VPA設計的第一步是釐清目標 86
  87. 87. 行動開發學院 MobileDev.TW 本講座由資策會「未來之星-菁英培育計畫」贊助舉辦 Ryan Chung Program R&D Manager III IT Training Center Ryan@iii.org.tw 87

×