1. 1. BRINGING MEDIA APPS TO AMAZON FIRE TV STREAMING MEDIA EAST 2015 RUSSELL BEATTIE Technical Evangelist, Amazon Lab126 beattier@amazon.com JUSTIN WEBSTER Executive Director, Product & Operations The Wall Street Journal Digital Network
2. 2. AGENDA Amazon Fire TV & Fire TV Stick Amazon Fire OS HTML5 Platform Web App Starter Kit for Fire TV Features Demo Wall Street Journal Development Hands On 2
3. 3. AMAZON FIRE TV AND FIRE TV STICK 3
4. 4. WHAT IS AMAZON FIRE TV Amazon Fire TV and Fire TV Stick provide a powerful platform to help developers and content creators reach more customers in the living room. 4
5. 5. INCREDIBLY POWERFUL Amazon Fire TV uses a Qualcomm Snapdragon 300 quad core processor, Adreno 320 GPU, 2 GB of RAM and expandable USB storage to support high performance games and media. 5 The Amazon Fire TV is INCREDIBLYPOWERFUL Amazon Fire TV uses a Qualcomm Snapdragon 300 Quad Core processor with Qualcomm Krait technology, Qualcomm Adreno 320 GPU and 2GB of RAM to support high performance game experiences.
6. 6. INCREDIBLY POWERFUL 6 Amazon Fire TV Stick has a dual core processor, a dedicated VideoCore4 GPU, dual-band/ dual-antenna Wi-Fi, 1 GB of RAM and 8 GB of storage enabling streaming of 1080p HD video and Dolby Digital Plus 7.1 surround sound. vs competing streaming media sticks
7. 7. GAMING PLATFORM 7 Developers can create games of all types for the big screen in the living room, using the Amazon Fire TV Remote, Amazon Fire Game Controller, or third party Bluetooth gamepads.
8. 8. MEDIA PLATFORM 8
9. 9. AMAZON FIRE OS 9
10. 10. AMAZON FIRE OS PLATFORM 3 Years - launched November 2011 10 tablets, 2 TVs and 1 phone 10s of millions of Fire devices 10
11. 11. AMAZON APPSTORE The Appstore is integrated across the Amazon ecosystem 400,000+ apps in the Amazon Appstore Only place for apps and games on Fire Tablets, Fire TV, Fire TV Stick and Fire phone Apps and games are included in the Amazon shopping app Available for millions of Android devices Preloaded on Blackberry 10 Reach millions of Fire OS and Android customers in 236 countries and territories worldwide Android Phones & Tablets Fire phone Fire Tablets Fire TV & Fire TV Stick BlackBerry
12. 12. FIRE OS DEVELOPMENT OPTIONS Native Apps Android Java Cross Platform Apps Cordova/PhoneGap Pure Web Apps Mobile App Distribution Program 12
13. 13. AMAZON HTML5 PLATFORM 13 Chromium Based Modern Web Standards GPU Accelerated Hardware Optimized Fire OS Integrated Developer Friendly >
14. 14. HTML5 WEB APPS ON FIRE TV WEB APP STARTER KIT FOR FIRE TV 14
15. 15. COMPUTER, COMPACT, COUCH 15
16. 16. 10 FOOT USER INTERFACE The goal of 10-foot user interface design is to make the user's interaction as simple and efficient as possible, with as few button presses as possible while still having an intuitive layout, in terms of accomplishing user goalswhat is often called user-centered design. http://en.wikipedia.org/wiki/10-foot_user_interface 16
17. 17. WEB APP STARTER KIT FOR FIRE TV HTML5 Templates Pure Web Apps Hybrid Cordova/PhoneGap Open Source Hosted on GitHub https://github.com/amzn Major Features Category Lists Continuous Playback Search Themes Configurable Data Sources Already has live apps! 17
18. 18. SUPPORT FOR MULTIPLE VIDEO PROVIDERS 18 JSON YouTube MRSS
19. 19. DEMO WEB APP STARTER KIT FOR FIRE TV 19
20. 20. WALL STREET JOURNAL 20
21. 21. 21 WSJLive.
22. 22. 22 WSJLive. 1,500 VideosProduced Per Month 120+Hoursof Original VideoContent per Month Launchedin2011Free,liveand on-demand videoservice On Network YouTube Apps Syndication !14 channels !19,051videos !317M views
23. 23. 23
24. 24. 24 MoreThanJust News. WSJ VideoContent: Original Programs: NewsHub Newsyou needtoknow. LunchBreak Featuresamix of hardnewsalongwith businessof life interestslikehealth,lifestyleandluxury real estate. TheShort Answer Answersandexplanationstokey topicsthat aretrendingin thenews. WSJCaf Acousticperformancesandfascinatinginterviewswith someof thebiggest andmost interestingstarsin music, stageandscreen.
25. 25. 25 PlatformEngagement.! 83% Averageadcompletion rate 71% Averagecontent completion rate 4.03 Averagevideosper viewer 32 Averageminutesper viewer
26. 26. 26
27. 27. 27
28. 28. 28
29. 29. Deployment.! 3 Days TestingandQA Signoff 1Week ToProduction WebAppStarter Kit Start toFinish in Just 1Week LaunchedDec.2014 On-demand VideoService
30. 30. DEVELOPMENT WEB APP STARTER KIT FOR FIRE TV 30
31. 31. SIMPLE DEVELOPMENT LIFECYCLE 31 Download Modify Debug Publish
32. 32. DOWNLOAD Web App Starter Kit for Fire TV Source & Docs https://github.com/amzn/web-app-starter-kit-for-fire-tv Live Example (view on Fire TV) https://amzn.github.io/web-app-starter-kit-for-fire-tv Example Projects Zip http://amzn.github.io/web-app-starter-kit-for-fire-tv/web-app- starter-kit-for-fire-tv-projects.zip 32
33. 33. MODIFY 33 $ cd ./youtube-sections $ ls -1 index.html firetv.css ./assets ./js
34. 34. MODIFY INIT.JS 34 $ vi ./js/init.js ... var settings = { Model: YouTubeAPIModel, PlayerView: YouTubePlayerView, PlaylistView: PlaylistPlayerView, showSearch: true, user: "amazonwebservices", devKey: "PUT-YOUTUBE-API-DEV-KEY-HERE", createCategoriesFromSections: true };
35. 35. FIRETV.CSS APP MAIN 35 1) .subcat-header .leftnav-list-item-chosen 2) .app-top-bar 3) .app-main-container 4) img_logo.png 5) .one-D-summary-title 6) .one-D-summary-pubdate 7) .one-D-summary- description 8) .detail-item-button-static
36. 36. FIRETV.CSS CATEGORY LIST 36 1) .leftnav-menu-list 2) .leftnav-list-item-selected 3) .leftnav-list-item-static
37. 37. DEBUG 37 Use Local Web Server $ python -m SimpleHTTPServer 3000 ... $ serve p 3000 Or... Zip Project and Push $ zip r mywebapp.zip * $ adb connect 192.168.1.100 $ adb push mywebapp.zip /sdcard/amazonwebapps/
38. 38. WEB APP TESTER WEB APP STARTER KIT FOR FIRE TV 38
39. 39. 39
40. 40. 40
41. 41. 41
42. 42. 42
43. 43. REMOTE DEVTOOLS 43
44. 44. PUBLISH YOUR MEDIA APP WEB APP STARTER KIT FOR FIRE TV 44
45. 45. AMAZON DEVELOPER PORTAL 45
46. 46. SUBMITTING YOUR APP TO AMAZON APPSTORE Create a free Amazon Developer Account Enter app details on New Web App Submission page: - General Information (title, category, support details, privacy URL) - Availability and Pricing (release date and base list price) - Description - Images and Multimedia (screen shots, icons) - Content rating Choose to submit a hosted web app or a packaged web app - Enter URL of hosted web app OR - Upload zip file of web assets (HTML, JavaScript, CSS, files/resources) In Device Support section, select Fire TV and Fire TV Stick Submit! 46
47. 47. THANKS! 47
48. 48. LINKS, DOCS, SOURCES AND SDKS Learn more: http://developer.amazon.com/apps https://github.com/amzn/web-app-starter-kit-for-fire-tv https://developer.amazon.com/public/resources/development-tools/sdk Contact us: http://forums.developer.amazon.com http://developer.amazon.com/help/contactus.html @AmazonAppDev /AmazonAppDeveloper http://developer.amazon.com/blog WSJ Live: http://www.wsj.com/video