The New Web App Starter Kit Features - Subcategories, YouTube Support, Live Streaming, in App Purchases and More - Make It Even Easier to Create Engaging Fire TV Media Apps
Launched last December, the Web App Starter Kit for Fire TV is an open source project intended to help developers get up to speed quickly creating simple media-oriented apps for the Amazon Fire TV and Fire TV Stick. The Starter Kit provides a basic media app template that is designed for the 10-foot user experience and includes UI controls, support for the Fire TV remote, sample UI components, support for various data formats and more. Since its release, the Starter Kit has been used to create dozens of apps already live in the Amazon Appstore for Fire TV, including Wall Street Journal Live, University of California TV, University of Washington TV, Gear Live TV, and Motorz TV.
You can find the Starter Kit on the GitHub project page.
The latest release, version 1.2, just launched and we want to give you an update on some of the new additions that benefit both developers and end users alike. These include technical improvements such as a streamlined build process and code enhancements to help reduce app development time, as well as a host of new client features. The Starter Kit now has support for YouTube videos, podcast feeds, a cleaner user interface, continuous video playback, search, live streaming videos and more. The end result is a richer code base that improves the developer experience and helps jump start the creation of great looking, functional, full-featured media apps.
Here are some more details about some of the cool new features we've added.
In addition to general bug fixes, code optimization and documentation cleanup, we've also completely reorganized and streamlined the original build process to make it much easier to create and manage multiple apps. This gives developers more flexibility, and gives us the ability to include a variety of sample media apps that show off all the features and functionality available in the Starter Kit. Apps are now self-contained in a src/projects folder, which hold unique files for that app, while pulling files from the src/common folder during the build process. The result is a much more organized project structure, allowing developers to create more than one media app within the same source tree, enabling both code reuse and the capability of easily individualizing each app as needed.
We've also made it much easier for developers to customize the functionality and look of their apps without having to dig into the project code as much. The build process allows for customizing the included CSS and assets, and the project's init.js configuration file allows developer to enable/disable various options such as button display, player types, data models, logo and more. For more specifics on all the various options available for developers, check out the documentation hosted on the GitHub project page.
One of the most important new features that we've added to the Starter Kit is the ability to use YouTube as the source for an app's media content. We've integrated the official YouTube API and the YouTube HTML5 video player into the Starter Kit template so that developers can easily create YouTube-based Fire TV web apps. By simply adding in their YouTube API Developer Key, choosing a channel, and adjusting the project's initialization options, a developer can create a full-featured media app in very little time. The project gives developers the flexibility to choose to automatically add categories based on a channel's current section setup, or create a customized category menu with selected playlists, channels and even search terms. Below are screenshots of an example app created from the official Amazon Web Services YouTube channel, with the logo and categories automatically imported using the YouTube API.
When the user has selected a category (such as "Featured"), the screen displays a horizontal list of videos to browse and play. It's incredibly easy for content owners and developers to use the Starter Kit to quickly create custom media apps for their YouTube content.
The Starter Kit now gives developers the option to enable integrated search functionality, with no extra dev effort needed. For media apps that use a static data feeds such as JSON or MRSS, the search will be done on the client, returning results derived from the feed's media meta-data such as title and description. For apps using the YouTube template, the search will use the YouTube API to dynamically return results from the YouTube server. Below is a screenshot of a search for "Fire" in the above AWS YouTube channel app, with the results shown displayed in the same format as a category list.
Developers can easily customize their web apps using CSS to give a unique look and feel. We've provided several sample themes in the Starter Kit that show how easy it is to include a custom theme.css file to a project. Below is a screenshot of the AWS media app using a sample theme with a dark background, colored content titles and a custom category menu list that hovers over the list of videos rather than hiding them under a solid bar.
The Starter Kit has also added support for using Media RSS as a data source. This common XML data format used by thousands of websites was created for podcasting, and adopted by a variety of content providers as a standard media feed format. Developers can now easily create media apps from these feeds in minutes. Below is a screenshot of a sample media app created using the public video podcast feed for a popular tech blog This Week In Tech.
The first version of the Starter Kit only supported one row of media within a given category. This worked well for many apps, but most need one or more levels of content below that. We've now added the ability for apps to have multiple levels of subcategories contained within the media list. This allows apps based on the Starter Kit to support navigation hierarchies such as Show/Season/Episode, Genre/Subgenre/Movie or simply create playlists within categories to present more organized content to viewers. Below is a screenshot of an example app using the official Kindle YouTube channel. Each playlist within the "All Playlists" category is represented by a thumbnail image and a description, presented in the familiar horizontal format. When the user selects a playlist, they get a list of videos within that subcategory which they can select and play, or by hitting the back button, go back up to the playlist selection screen again.
In addition to the navigation enhancements above, the Starter Kit now has added nicer playback controls for when the end user is viewing a video. We've improved the skip functionality and interface, providing the developer with better control over the length of the skip, and the end user with a clearer indicator of how far they have skipped back or forward. We also added the option for videos to play one after another within a category. As a video is nearing its end, a dialog will appear with the title, description and thumbnail of the next video to be played, and a countdown timer shows how long before it automatically starts. The user can activate the next video immediately by hitting the select button on their remote, or wait for the countdown and not have to touch their remote at all. The screenshots below show these new user interface options in action with a video from AWS.
The Starter Kit includes a new custom HTML5 player that supports live internet video streams. The screenshots below show an example app created using NASA's popular live stream. The stream is displayed in a category list like a normal video, but is marked as live video. During playback, the stream is marked as being live, and controls that wouldn't work in a live stream (such as skip forward) are removed, making the user interface simpler and cleaner for end users.
Included in the Starter Kit is a new sample media app that shows how the Amazon In-App Purchasing system works for Fire TV web apps. Because of the potential complexity of subscriptions or media purchases, we decided to start with a more basic sample app that shows how IAP works by enabling users to purchase "upgrades" - in this case, custom app backgrounds. Below are screenshots of the IAP sample app in action. When a user clicks on the (large and obvious) Upgrades button, they are presented with the option to buy additional backgrounds for 99 cents each. If they select a background, they'll go through the standard Fire TV purchase process and the background will be unlocked for them to use. Though somewhat limited, the sample shows all the basic steps a developer will have to go through - adding graphics, descriptions, prices, etc. - to enable IAP content in their media app.
We hope you like the new features added so far and look forward to continuing to expand the Starter Kit functionality over the months to come. We'd love to hear your thoughts, so if you have any questions, comments or suggestions, please use the GitHub project page to send them to us.