Hour of Code - Amazon Alexa

http://mobiledev.tw

Transcript

1. 行動開發學院 MobileDev.TW Ryan Chung III IT Training Center Ryan@iii.org.tw 一小時學程式 Amazon Alexa 冷笑話報報機器人 1
2. 行動開發學院 MobileDev.TW 2
3. 行動開發學院 MobileDev.TW Alexa Everywhere! 3
4. 行動開發學院 MobileDev.TW echo dot & amazon tap 4
5. 行動開發學院 MobileDev.TW Alexa Devices $179.99 US$49.99 US$129.99 插電使用 插電使用 電量充飽 約9hr 聲控 聲控 按鈕 / 聲控 單聲道 立體聲 立體聲 & 杜比 5
6. 行動開發學院 MobileDev.TW echo look • US$199.99 6
7. 行動開發學院 MobileDev.TW amazon echo look • 依據合身度、顏色、樣式與當前趨勢進行判斷 7
8. 行動開發學院 MobileDev.TW amazon echo show • US$229.99 https://www.youtube.com/watch?v=WQqxCeHhmeU 8
9. 行動開發學院 MobileDev.TW 你的腦叫你一直買 9
10. 行動開發學院 MobileDev.TW amazon echo family 10
11. 行動開發學院 MobileDev.TW Gartner 預測 • 2018年，會有超過20億人會以對話的形式來與虛 擬個人助理、智慧型手機以及連網裝置進行互動 • 2020年，40%的使用者會以對話的形式為主來使 用支援人工智慧應用程式 • 2020年，25%的家庭會有兩個甚至更多的智慧語 音助理喇叭 Source : http://iveybusinessreview.ca/ 11
12. 行動開發學院 MobileDev.TW IoT - Smart Home 12
13. 行動開發學院 MobileDev.TW 網頁模擬測試 https://echosim.io 13
14. 行動開發學院 MobileDev.TW 網頁/APP 模擬 https://reverb.ai/ 14
15. 行動開發學院 MobileDev.TW 25,000 第三方技能 Alexa News 15 付費技能 In Skill Purchase Amazon Pay 2,400萬 2017智慧喇叭銷售 80 國家可訂購Echo 3 語言(英、德、日) Source: Strategy Analytics, Amazon Alexa Blog 英式英文 美式英文 加拿大式英文 印度式英文 澳洲式英文
16. 行動開發學院 MobileDev.TW Alexa Skill Store https://www.amazon.com/alexa-skills/b/ref=topnav_storetab_a2s?ie=UTF8&node=13727921011 16
17. 行動開發學院 MobileDev.TW 最熱門的技能種類 (2017/12) 1. Games, Trivia & Accessories (5,184) 2. News (3,474) 3. Education & Reference(2,908) 4. Music & Audio(2,303) 5. Lifestyle(1,840) 17
18. 行動開發學院 MobileDev.TW 2017/11/9 Alexa日文版上線 https://www.amazon.co.jp/alexa-skills/b/ref=topnav_storetab_a2s?ie=UTF8&node=5262653051 18
19. 行動開發學院 MobileDev.TW 播放電影預告片 Show me some latest movies. Play the trailer for number X. 19 https://www.youtube.com/watch?v=aKg85qEFMHs
20. 行動開發學院 MobileDev.TW 播放電影預告片 20
21. 行動開發學院 MobileDev.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. 21
22. 行動開發學院 MobileDev.TW 設計方向 • Fast – 讓人們更快達成目的 – 語音控制音樂播放 • Easy – 讓人們更簡單地達成目的 – 語音控制電燈開關、語音設定倒數計時 • Fun – 增添生活趣味 – 具有挑戰性的遊戲 22 Source: Voice Design Guide – Amazon Alexa
23. 行動開發學院 MobileDev.TW 互動腳本準則 • 真實 ü以人們真正會說的話來設計，而不是那種文章上的口吻 ü不要假設使用者知道要怎麼做或是知道會發生什麼事 • 明確 ü避免使用有多重含義的詞句、片語 ü引導使用者提供必要的資訊 • 簡單 ü清楚地把選項呈現出來 ü一般而言，一次不要丟出超過三個選項 ü一次向使用者要一個資訊 23
24. 行動開發學院 MobileDev.TW Alexa, tell me a cold joke. • 任務 – 讓Alexa隨機說出一個冷笑話 • 建構步驟： – 設定可接受的指令 – 設定可使用的冷笑話 – 進行測試 24
25. 行動開發學院 MobileDev.TW Alexa Skill Kit • 前端：設定互動模式 – https://developer.amazon.com/alexa – Name, Invocation Name – Utterances, Slot type, Intent Schema • 後端：程式邏輯開發與儲存 – https://aws.amazon.com/tw/lambda/ – Node.js Source: Codecademy 25
26. 行動開發學院 MobileDev.TW ASK 設定 • Intent Schema – 使用者的意圖，以及對應可執行的動作 • Custom Slot Type – 特定資料型態與內容 • Sample Utterance – 例句，將使用者的輸入對應至意圖 26
27. 行動開發學院 MobileDev.TW Alexa Skills Kit 上傳與測試 建立與存放程式碼 設計 Voice UI 27
28. 行動開發學院 MobileDev.TW 註冊並登入Amazon開發平台 https://developer.amazon.com/ 28
29. 行動開發學院 MobileDev.TW 選擇 amazon alexa 29
30. 行動開發學院 MobileDev.TW Alexa Skills Kit 30
31. 行動開發學院 MobileDev.TW Start a Skill 31
32. 行動開發學院 MobileDev.TW 設定技能屬性 設定技能型態 設定技能上架的名稱 設定使用者講什麼來 使用這個技能 32
33. 行動開發學院 MobileDev.TW Launch Skill Builder 33 • 使用新的工具來輸入意圖與例句
34. 行動開發學院 MobileDev.TW Add Intent 34
35. 行動開發學院 MobileDev.TW 輸入意圖名稱並建立 35
36. 行動開發學院 MobileDev.TW 輸入使用者可能會講的句子 36
37. 行動開發學院 MobileDev.TW Save & Build Model 37
38. 行動開發學院 MobileDev.TW 進入 Configuration 38
39. 行動開發學院 MobileDev.TW 註冊並登入AWS 39
40. 行動開發學院 MobileDev.TW 右上角區域選US East(N. Virginia) 40
41. 行動開發學院 MobileDev.TW 進入Lambda服務 41
42. 行動開發學院 MobileDev.TW 點擊進入建立Lambda函數 42
43. 行動開發學院 MobileDev.TW Blueprints(從樣板開始)->factskill 43
44. 行動開發學院 MobileDev.TW 取一個函數名稱、設定函數權限(第一次) 44
45. 行動開發學院 MobileDev.TW 允許建立 45
46. 行動開發學院 MobileDev.TW 選擇剛才建立的基本權限 46
47. 行動開發學院 MobileDev.TW 拉至最下方建立函數 47
48. 行動開發學院 MobileDev.TW 設定驅動者為ASK • 點擊左方Alexa Skills Kit，拉至最下方按下Add 48
49. 行動開發學院 MobileDev.TW 下載範例 • http://0rz.tw/J9OKG 安裝開發環境 • 安裝Node.js (到官網下載) • 檢查是否安裝成功 – 到終端機：node –v • 檢查npm是否安裝 – 到終端機：npm • 更新npm – 到終端機：sudo npm install npm -g 49
50. 行動開發學院 MobileDev.TW 下載 Visual Studio Code 50 https://code.visualstudio.com/Download
51. 行動開發學院 MobileDev.TW 用VS Code開啟解壓縮完的資料夾 • 編輯src資料夾裡的index.js • 將en-US中的內容換成冷笑話 51
52. 行動開發學院 MobileDev.TW 修改對應新定義的意圖 52
53. 行動開發學院 MobileDev.TW 拿掉多餘的句子 53
54. 行動開發學院 MobileDev.TW 開啟終端機安裝Alexa SDK • 檢視 -> 整合式終端機 (Ctrl + ~) • 移動至src資料夾 (cd src) • 安裝SDK – npm install alexa-sdk • 壓縮 src資料夾中的檔案 – zip -r -X coldJokeV1.zip . 54
55. 行動開發學院 MobileDev.TW 點擊函數開始進行編輯 55
56. 行動開發學院 MobileDev.TW 選擇上傳 zip 檔 • 上傳剛才壓縮好的檔案，按下右上方Save 56
57. 行動開發學院 MobileDev.TW 複製右上角的ARN碼 57
58. 行動開發學院 MobileDev.TW 回到Amazon開發站，輸入ARN 58
59. 行動開發學院 MobileDev.TW 按下最下方的Save -> Next 59
60. 行動開發學院 MobileDev.TW Service Simulator • 輸入句子進行測試 60
61. 行動開發學院 MobileDev.TW 應用程式邏輯 tell me a joke tell me a cold joke give me a joke give me a cold joke shoot me a cold jpke Surprise me with a cold joke Joke 1 Joke 2 Joke 3 Joke 4 Joke 5 Joke 6 Joke 7 Joke 8 Joke 9 Joke 10 61 Intent : GetNewJoke
62. 行動開發學院 MobileDev.TW Recap • 前端Developer站 – 設定Intent與例句 (記得Save & Build Model) • 本地端 開發 – VS Code、Alexa SDK、壓縮成zip • 後端 AWS Lambda – 地區、Basic Role、Trigger、程式包上傳 62
63. 行動開發學院 MobileDev.TW Summary • 自然語言交談介面裝置將大舉進入你的生活 • 語言和文化密不可分，跨領域合作優化服務 • 多元化的後端服務與資料，將產生殺手級應用 63
64. 行動開發學院 MobileDev.TW 敬請指教 Ryan Chung Program R&D Manager III IT Training Center Ryan@iii.org.tw 64