Published June 1, 2015 How To: Bringing Media Channels to Amazon Fire TV Russell Beattie, Technical Evangelist, Amazon Lab 126 and Justin Webster, Executive Director of Product Development & Operations for The Wall Street Journal Digital Network Amazon Fire TV can help content creators and developers find new customers by making it easy to create media-based apps for the best-selling Amazon Fire TV and Fire TV Stick. In this presentation, we will dive into the Fire TV platform and show attendees how they can quickly publish their content as media apps using Amazon's open source Web App Starter Kit for Fire TV. Attendees will also hear from Wall Street Journal, a Starter Kit beta partner, about their experience rapidly developing a real-world Fire TV media app that provides a great viewing experience for their customers.

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. 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. AMAZON FIRE TV AND FIRE TV STICK
3

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. 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. 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. 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. MEDIA PLATFORM
8

9. AMAZON FIRE OS
9

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. 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. FIRE OS DEVELOPMENT OPTIONS
• Native Apps
Android Java
• Cross Platform Apps
Cordova/PhoneGap
• Pure Web Apps
Mobile App Distribution Program
12

13. AMAZON HTML5 PLATFORM
13
Chromium
Based
Modern Web
Standards
GPU
Accelerated
Hardware
Optimized
Fire OS
Integrated
Developer
Friendly
</>

14. HTML5 WEB APPS ON FIRE TV
WEB APP STARTER KIT FOR FIRE TV
14

15. COMPUTER, COMPACT, COUCH
15

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
goals—what is often called user-centered
design.”
http://en.wikipedia.org/wiki/10-foot_user_interface
16

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. SUPPORT FOR MULTIPLE VIDEO PROVIDERS
18
JSON
YouTube
MRSS

19. DEMO
WEB APP STARTER KIT FOR FIRE TV
19

20. WALL STREET JOURNAL
20

21. 21
WSJLive.

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

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
PlatformEngagement.!
83%
Averageadcompletion rate
71%
Averagecontent completion rate
4.03
Averagevideosper viewer
32
Averageminutesper viewer

26. 26

27. 27

28. 28

29. Deployment.!
3 Days
TestingandQA Signoff
1Week
ToProduction
WebAppStarter Kit
Start toFinish in Just 1Week
LaunchedDec.2014
On-demand VideoService

30. DEVELOPMENT
WEB APP STARTER KIT FOR FIRE TV
30

31. SIMPLE DEVELOPMENT LIFECYCLE
31
Download Modify Debug Publish

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. MODIFY
33
$ cd ./youtube-sections
$ ls -1
index.html
firetv.css
./assets
./js

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. 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. FIRETV.CSS – CATEGORY LIST
36
1) .leftnav-menu-list
2) .leftnav-list-item-selected
3) .leftnav-list-item-static

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. WEB APP TESTER
WEB APP STARTER KIT FOR FIRE TV
38

39. 39

40. 40

41. 41

42. 42

43. REMOTE DEVTOOLS
43

44. PUBLISH YOUR MEDIA APP
WEB APP STARTER KIT FOR FIRE TV
44

45. AMAZON DEVELOPER PORTAL
45

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. THANKS!
47

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