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.

Easily Create & Manage Multiple Apps

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.

Quickly Create Fire TV Apps Based on YouTube Content

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.

Built-in Search Helps End Users Discover 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.

Differentiate Your App With Custom Themes

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.

Build Apps From Thousands of Video Podcasts with Built-In Media RSS Support

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.

Make App Content More Discoverable With Subcategories

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.

Enhanced Media Playback Controls

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.

Stream Your Content With Live Streaming Support

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.

An Easy Template for Implementing In-App Purchasing

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.

Ready to Build a Web App for Fire TV?

• Learn more about Fire TV and Fire TV stick
• Fire TV Design and User Experience Guidelines
• Customizing Your Fire TV Web App
• HTML5 Packaged Apps Service Makes It Even Easier to Submit Apps

Do you have an idea for a great mobile game? Have you been following Jesse Freeman's blog series on creating games for the Amazon Appstore? Are you looking for inspiration to finally dive in and get started?

Thanks to the folks over at Scirra, now is the perfect time to fire up Construct 2 and turn your amazing idea into a working game—without programming. Scirra just launched their Build a Game Challenge, which rewards game developers for submitting their Construct 2 apps to the Amazon Appstore. From now until April 1, 2015, you can earn up to $100 toward the purchase of royalty free assets available from Scirra, like graphics, animations, sound effects, and music.

Fast, Fun, Powerful

Construct 2 is a drag-and-drop game creation tool that makes it easy to build 2D games based on HTML5. No coding is required, so even beginners can get started quickly. Experienced developers will find it flexible enough to support demanding requirements like complex behavior processing, graphical effects, and specialized event handling.

Worldwide Reach with Amazon

Once you have created your HTML5 game with Construct 2, you can publish it to Amazon's Appstore and make it available to millions of players around the world. Your game will be accessible in 236 countries and territories, and will appear in our store right alongside the native Android apps there. (Learn more about publishing web apps on Amazon.)

Turn That Game Idea into Reality

Don't put it off any longer! Take Scirra's Build a Game Challenge and bring your game idea to life. You will have fun doing it and even earn rewards along the way.

Not sure how to get started? Stay tuned for our upcoming blog series on building a game with Construct2.

Ready to Submit Your App or Game?

• To learn more about the Amazon Appstore, click here
• Click here to register for free as an Amazon Developer. 
• Click here to download the Amazon Mobile SDK. 
• Click here to submit your app

-peter (@peterdotgames)

The Amazon Mobile Ads API allows you to monetize apps and games across the Android, Fire OS, and iOS platforms by displaying ads to customers in the US, UK, France, Italy, Spain, and Germany. Ads can be banner or interstitial and will advertise products or services coming from Amazon or other well-known brands. You are paid on ad impressions served whilst some other Ad networks only pay on clicks. To get more information on the benefits of using the Amazon Mobile Ad Network, check out the Success Stories.

This blog is about how you get started with using the Amazon Mobile Ads API in your Android Java based app or game that is running on an Android device, Amazon Fire OS tablet or phone device.

How Do I get Access to the APIs?

The Amazon Mobile Ads API is part of a single SDK (the Amazon Mobile App SDK, which you can download here) that also provides access to other Amazon mobile services and APIs such as GameCircle and In-App Purchasing.  The same download also includes the necessary files to use the Amazon Mobile Ads API in apps developed for iOS.

You can use the Android Java version of the Mobile Ads API in projects that have been created in Eclipse or Android Studio. First, download the SDK and extract the zip file to the appropriate location on your development machine. Here’s what the SDK folder looks like on my machine…

Obtain an Application Key

Before you can use the Amazon Mobile Ads API in an app, you should create an Application Key that is unique to the application. This key is used by the Amazon framework to identify your app so it’s essential that you use the correct one so that you will be paid.

To create a new key you need an Amazon Apps & Games Developer Portal account. If you don’t have one, you can create a free account by clicking here. Also note, because you will be receiving income into the account, you will need to add your payment and tax information details to your developer account profile.

You can bypass this step for now if you want to just try out the API using one of the sample apps. Just make sure you create your own key (and account) later.

Check out the Samples First

Before you start including the Amazon Mobile Ads API in your project, I recommend that you first build and play with the three samples that come with the SDK. You can find these samples in the /Android/Ads/Samples folder and they are as follows:

Building the Samples in Eclipse

To build the samples in Eclipse is pretty straightforward. Once you have imported the projects, you just need to add the mobile ads JAR file library to your project and ensure that the library file is included in the build process.  There are some good instructions in this Quick Start Guide about how to do this but do note that you need to check the JAR library file in the “Order and Export tab” so that it is included in the build. The screenshot below shows how to do this:

This step is quite easy to miss and unfortunately, if you don’t complete the step, the project will still build successfully but you will get runtime errors saying that methods in the API cannot be found!

Building the Samples in Android Studio

The Mobile Ads API samples were created using Eclipse but you can also use the samples in Android Studio very easily. As this is currently not described in the Quick Start Guide I’ve written some instructions below on how to do this…

1. Run Android Studio and from the Quick Start pane select “Import Non-Android Studio project”. An import wizard begins
2. Locate the Eclipse project folder for the desired sample and click “OK”

1. In the “Import Project from ADT” dialog, first choose a destination directory for the Android Studio version of the project and click “Next”

1. Various import options will appear in the same dialog – just click “Finish” to start the import

1. Once the import has completed, the project will open in Android Studio
2. To add the Amazon Mobile Ads API library file to the project, first create a folder called “libs” under the “app” folder in your project. Use OSX Finder or Windows Explorer (as applicable) to do this
3. Next, find the file “amazon-ads-x.y.z.jar” which located in the “/ads/lib” folder within the Amazon SDK folder and copy it to your new “/app/libs” folder
4. In Android studio, refresh the project view so that the libs folder appears

1. Right click the .jar so that you see the context menu as shown below. Select “Add as library”

1.  Click “OK” in the “Create Library” dialog that appears

1. At this stage the library will have been added and you should see the following newly added lines in the build.gradle file under your ‘app’ folder:

dependencies {

    compile files('libs/amazon-ads-x.y.z.jar')

}

Where: x, y and z will be substituted with the actual version numbers

Running the Samples

Once you have added the library file to a sample project, you should be able to build the code and try it out on a device. In the SimpleAdSample project, for example, you should see something similar to this when it runs:

Including the APIs into Your Own Code

Using the Amazon Mobile Ads APIs in your own code is relatively straightforward and this Quick Start Guide goes through the steps that you need to follow. There are, however, a few things that are worth delving into a little deeper which I discuss below.

Additional Permissions

To use the APIs, you need to add a least one permission to the project’s manifest file. You have to add the permission android.permission.INTERNET as this enables the app to communicate with the ad server. Additionally, it is advisable to add the other permissions suggested in the Quick Start Guide as doing so will give the ad framework a better chance of delivering ads that are more relevant to the user - see also section “Loading the ad” below.

Loading the Ad

There are two main ways in which you can request an ad. The simplest way is just to call the version of the Ad object’s loadAd() method that takes no parameters. However, the problem with this approach is that you will get ads delivered to your app that might not be applicable to your user’s geographical location. A better approach is to use a different version of the same API that takes some parameters…

 final AdTargetingOptions adOptions = new AdTargetingOptions();       

 adOptions.enableGeoLocation(true);

 this.adView.loadAd(adOptions);

In the snippet above, the code uses the Mobile Ads API to send the position of the device to the Amazon Mobile Ad Network so that potentially more targeted ads are delivered to the host app. Note that the user may still choose to disable this feature by disabling location awareness on a system level in the device settings.

Debugging

During development, it’s a good idea to enable logging and testing using the associated methods in the AdRegistration class. Doing so will for example make it easier for you to track the messages sent to the ad framework in the logcat window. Just make sure to disable logging and testing before launching your app to production.

Handling Ad Events

Once an Ad object has been created, it’s possible to hook into events that are generated by the API. This is done via a special listener class from the Mobile Ads API called DefaultAdListener. When you do this, you can trap several events related to an ad and these result in calls to methods that you override. For example, the onAdFailedToLoad() method is called when the ad has failed to load and in that scenario you could determine the possible cause of the failure and if applicable choose to fill the advert using an alternative ad network.

See this article about event tracking and error handling for more details.

Conclusion

The Amazon Mobile Ads API provides you with additional ways in which you can monetize your mobile apps and games via ads relating to products or services that come from Amazon or other well-known brands. Integrating the API into your Android Java app or game is quick and easy. Once you have integrated the API, you are paid for ads on impressions rather than on clicks.

Here are some more links to useful articles on using the Amazon Mobile Ads API in your Android Java based app:

• Mobile Ads for Android
• Mobile Ads FAQ

In upcoming blogs, I will discuss how you can use the Amazon Mobile Ad API in games or apps running on iOS and those that have been developed using popular frameworks such as Unity and Marmalade.

Simon Howard (@SimonH109)

Working on a Fire TV or Fire TV Stick app/game? Let us know at @AmazonAppDev with the following hashtag #MadeForFireTV

In April, Amazon introduced Amazon Fire TV, and it quickly became the best-selling streaming media box on Amazon.  Amazon Fire TV, made it easier for customers to watch Netflix, Prime Instant Video, Hulu Plus, WatchESPN, and more on their big-screen TV, and brought photos, music, and games to the living room.  In October, we brought the same experience customers love about Amazon Fire TV—ease of use, great performance, and vast selection—to a smaller and even more affordable device - Fire TV Stick.

For developers, one of the most exciting prospects of publishing your game on Amazon Fire TV is that you can run Android games directly on the TV. If you are already building games for Android, you can use the same codebase you currently have, and make that game playable on Amazon Fire TV.

While you may be familiar with targeting Android tablets and phones, there are a few things you need to consider for your app to run correctly on Amazon Fire TV.  Below is a quick round-up of some of the great content we created in 2014 to help make the transition easy.

Responsive Game Design: Making Games that Scale Across Desktop, Mobile & TV

Gone are the days where you can make a game and publish it to a single platform and expect to be successful. Like any business that sells consumer products, you need to go where the people are. That means the games you make should run on a multitude of different platforms and accept any number of different input types. With that in mind I have outlined what I call “responsive game design,” which is modeled loosely after some of the core concepts of responsive web design. It’s also a framework that will help you think about enabling your games to scale across multiple platforms.  Click here to learn more.

10 Tips for Remote & Controller

If you’re porting an existing Android app to Fire TV, you have to add support for user input from the Amazon Fire TV remote and maybe the Amazon Fire game controller. Luckily, basic controller support is already built into Android.  You can leverage the Android input device APIs and the game controller API from the Amazon Fire TV SDK to get your game ready to publish in no time. Here are the top ten things you should do in order to get your game ready for Amazon Fire TV customers.

Tips for Getting Your Android Apps Looking Good on Fire TV

While you may be familiar with targeting Android tablets and phones, there are a few things you need to consider for your app to run correctly on Amazon Fire TV. This includes understanding the layout, dimensions and orientation of Amazon Fire TV views, changes to the user experience when interacting with a TV (10’ away on average), UI and navigation patterns, as well as some other TV-specific gotchas such as overscan and color reproduction.  Here are some practical tips to help you get your Android apps looking good on Fire TV.

Building Apps & Casual Games for Fire TV Stick

Fire TV Stick is one of the most affordable devices on the market for creating apps and casual games intended for the big screen. The best part is if you are already building for Android, Fire TV stick is another great platform to help grow your audience.  In this post we cover how to get started, optimizing for Fire TV Stick as well as the hardware/software differences between the Fire TV Stick and Fire TV to help make your apps and games run great on both devices.

Reaching New Android Customers with Xamarin & Amazon Fire TV

Xamarin is a cross platform development environment that leverages the power of the C# programming language and takes full advantage of native hardware acceleration. Xamarin includes a suite of tools that allow you to test, build, and analyze your apps across all of the major mobile platforms. Utilizing Xamarin you can now publish your own apps and games to all Amazon Fire devices. This includes Amazon Fire tablets, Amazon Fire phone, Amazon Fire TV and the recently announced Amazon Fire TV Stick.  Click here to learn how to get your app or game running on Fire TV using Xamarin.

Introducing the Web App Starter Kit for Fire TV

Fire TV and Fire TV Stick both support HTML5 web apps. The Web App Starter Kit for Fire TV is a new open source project intended to help developers get up to speed quickly creating a simple media-oriented app for this exciting new web platform. Features of the project include an example user interface designed for the 10-foot user experience, support for the Fire TV remote control, and sample components to create and customize a media app. You can learn more about the Web App Starter Kit for Fire TV here.

- Jesse Freeman (@jessefreeman)

Today we are announcing full support for publishing HTML5 apps to  Amazon Fire TV and Fire TV Stick as part of our existing HTML5 web app publishing toolset. This now opens up a new opportunity for web developers to publish HTML5 powered apps to the living room. In addition, developers with web apps already published to Fire tablets and Fire phone will now be able to release their existing hosted web apps on the Fire TV family of devices using the same workflow they are already using. To help support web apps on Fire TV devices we have made additions to the Amazon WebView, which powers web apps on our platform, to give developers access to the following features:

• Support for the Amazon Fire TV and Fire TV Stick Remotes
• Support for analog input from the Amazon Fire TV Game Controller and other gamepads.
• Access to our In App Purchase (IAP) API via JavaScript
• A new starter template app optimized for 10 foot experience for creating Fire TV HTML5 media apps

By adding full support for Fire TV devices, developers can publish the same web app across all of our Fire devices and take advantage of the great performance enhancements the Amazon WebView offers.

Powered by the Amazon WebView

The Amazon WebView supports everything you have come to expect from the mobile version of Chromium. This includes WebGL, GPU optimized CSS3 Transition and fast JavaScript code executionWeb developers can now sell their web apps at a premium price, use IAP (via our JavaScript API), and have their app distributed right alongside native Android apps and games.

HTML5 Apps on the TV

In addition to our launch partners, we are excited to see what developers come up with to help push HTML5 forward onto the big screen. Through the Amazon Appstore on Fire TV devices developers can now deploy web apps and games to a whole new audience. HTML5 is a great cross platform choice for developers and we are now enabling them to reach even more customers than before. While traditional media apps make sense on the Fire TV, we are also looking forward to seeing HTML5 games and media apps evolve on this new platform. With support for WebGL, Gamepad API and accelerated canvas, high quality web games can now run on the TV. This opens up an entirely new world to HTML5 game developers hoping to build console quality games with the tools and frameworks they currently use to reach millions of web and mobile web gamers every day.

Getting Started

Bringing your web app to Fire TV is easy.  If you already have an app optimized for the 10-foot experience, you can get started by downloading the Web App Tester from the Amazon Appstore on your Fire TV or Fire TV Stick. Once installed, you simply enter in the name of your app and its URL online.

Likewise, you can also supply a .zip file to package up your app by following these instructions. After all the details are supplied, you can see how your web app will run on the Fire TV via the preview option.

If you are looking to get started building Web Apps for Fire TV or Fire TV stick, we have also provided an open source template on GitHub. Make sure to check out the online documentation that will walk you through everything you need to know about publishing HTML5 apps to the Fire TV family of devices.

Related Links

• Fire TV HTML5 developer documentation
• Web App Template on Github
• Publishing HTML5 Apps to Amazon Appstore
• Difference between Packaged and Hosted Apps
• In-App Purchasing JavaScript API

- Jesse Freeman (@jessefreeman)

It’s time to kick off a new developer series on the Amazon Developer Portal. These interviews help to highlight how developers on our platform are using our services and tools. To help promote how we are making publishing Web Apps a first class citizen on Fire Tablet, we sat down to interview SB Nation. Chris Hines, SB Nation's Sr Product Manager, tells us about how they are leveraging responsive design, HTML5 and our web app publishing tools to deploy their fan-centric sports community sites to Fire Tablet users.

Can you tell us a little bit about SBNation and your products?

SB Nation is the fastest-growing online sports media brand and the largest network of over 300 individual fan-centric sports communities. From the beginning, SB Nation has focused on developing the highest quality grassroots sports sites on the web, recruiting only the most respected web-native journalists to build their communities. SB Nation's audience consistently ranks as the most affluent and influential in the sports category.

SB Nation is published on Chorus, Vox Media's proprietary modern media stack. Chorus supports seven different verticals, over 300 individual communities, and thousands of writers.

Why did you choose HTML5 as your development platform?

Our sites our completely responsive at this point and when Amazon reached out about being a partner in their HTML5 program, it was really a no-brainer way to seamlessly enter the Kindle App marketplace.

Have you found HTML5 to be an easy platform to scale on?

Absolutely. We already have almost 70 apps running with only minimal development effort from our team.

Talk about your move from Web to mobile. What hurdles have you faced and what successes have you had?

The move from web to mobile was really very natural for us. Our audience was increasingly discovering and using our sites on their mobile phones and tablets (a percentage that is still growing every day). That led us to prioritize the development and performance of our mobile experience. The switch to a fully responsive experience across all of our sites was not without it's challenges, but it has ultimately been very fruitful for us.

How did you hear about publishing HTML5 apps on the Amazon Appstore?

Amazon reached out to us about being a partner.

Can you describe the process and how you got your web apps ready for the Amazon Appstore?

The process was very simple. We connected with an Amazon rep who got us squared away with a login for the developer console on Amazon. We pulled together an XML file of a number of our sites and passed that over to the team at Amazon. Less than a week later, our apps were live.

Were there any special modifications you needed to make to your site in order to get them working with the Web App Tester?

No changes were needed at all. It was very simple.

What are your thoughts on the move from Web to mobile for HTML5 developers?

For publishers, the mobile web will always be a large source of traffic, given the in-app browsers for large traffic sources (Twitter and Facebook) and search traffic, but HTML5 wrappers are very good ways for developers to take advantage of the native app experience and audience

What advice do you have for other companies that are leveraging HTML5 on the Web in order to make the move to native stores such as the Amazon Appstore?

Ultimately, the move to developing in HTML5 will be a benefit to the performance and flexibility of a web app and limit the specific development necessary for a native app thanks to stores like the Amazon Appstore.

Anything else you would like to add or say about the platform, your experience working with it or about the Amazon Appstore in general?

It has been a pleasure working with the Amazon team. Everything has been very simple and straightforward.

Wrapping Up

SB Nation is just one of many companies taking advantage of our HTML5 publishing tools for Fire OS. If you are looking for more information on how to publish your own Web Apps to Fire OS and any of our devices, make sure to get yourself a free developer account at http://developer.amazon.com and checkout the following links.

About Chris Haines

Chris Haines is the Senior Product Manager for Audience Development and SB Nation at Vox Media. In this role, Chris leads product development for Vox's SB Nation property and leads up all product efforts on Vox Media's Audience Development team.

Related links:

• More about publishing HTML5 apps to the Amazon Appstore - https://developer.amazon.com/public/solutions/platforms/webapps
• Download the web app Tester - http://www.amazon.com/gp/product/B00DZ3I1W8
• Adding IAP to Your Web App - https://developer.amazon.com/post/Tx3LQBBJRUYE58P/Implementing-the-Amazon-In-App-Purchasing-API-in-your-HTML5-Web-Apps.html

- Jesse Freeman (@jessefreeman) is a Developer Evangelist at Amazon focusing on HTML5 and Games for the Amazon Appstore.

The Amazon Appstore now provides web app developers with the option to submit self-contained, packaged web apps. Developers only need to wrap the assets for their web app (i.e. HTML, CSS, JavaScript, images etc.) into a standard zip file and Amazon will offer that web app to millions of Kindle Fire and Amazon Appstore customers.

This new service expands on our previous web app solution, which enabled hosted mobile web sites to publish apps to the Amazon Appstore. This works well for thousands of mobile web developers who are already serving content to the web, and we'll be continuing to offer hosted web apps in the future. But for many other developers, hosted apps aren't an ideal solution - they might not have a server, don't want to deal with the extra burden and cost of maintaining a server-side host for their app, or want their app to work seamlessly while offline.

Amazon's packaged web app solution solves this problem by letting web developers bundle all the files needed for their app into a zip file. Similar to other pure HTML5 solutions, web developers can submit apps to the Amazon Appstore without any need to worry about native packaging or distribution. Developers can concentrate on creating cutting edge web apps that take advantage of the advanced capabilities of our Chromium-based Amazon WebView available on our Kindle Fire tablets, or create more cross platform web apps that run on any device where Amazon Appstore is installed.  Web developers can focus on creating great apps, and Amazon takes care of the native app creation and hosting process. 

How to Package Your HTML5 Web App

Creating a new packaged app is as simple as creating any other type of zip file. Make sure the app has an index.html file as its starting page, or indicate the path to the app's main launch page when submitting the app.  To ensure the app works offline, include all those assets as well.

A packaged HTML5 app project looks and works like a normal web project folder on a server. For example:

./project/index.html
./project/js/main.js
./project/js/libs/jquery.min.js
./project/css/main.css
./project/images/logo.png
./project/images/picture.jpg
...
etc.

You can use a GUI application like WinZip, or using zip from the command line. This command for zipping a folder will result in the basic zip file you need:

$ zip -r project.zip ./project
 
adding: project/ (stored 0%)
adding: project/css/ (stored 0%)
adding: project/css/main.css (stored 0%)
adding: project/images/ (stored 0%)
adding: project/images/logo.png (deflated 7%)
adding: project/images/picture.jpg (deflated 1%)
adding: project/index.html (deflated 47%)
adding: project/js/ (stored 0%)
adding: project/js/libs/ (stored 0%)
adding: project/js/libs/jquery.min.js (deflated 65%)
adding: project/js/main.js (deflated 69%)

Testing Your Packaged Web App

The Amazon Web App Tester has been upgraded to handle packaged web apps as well. If you're not familiar with the Web App Tester, check out this blog post, Getting the most out of the Web App Tester, which shows you how to use it to test your web app before submission, including enabling and using the Remote Development Tools and other tips and tricks.

In addition to entering URLs for hosted web apps, developers can now load their zipped web app files on to the device, which will be pulled in by the Web App Tester for viewing/debugging. Using the Android File Transfer tool, copy the zipped web app files you want to test to a folder in the root of the device:

/amazonwebapps

The app package file should then show up in Web App Tester, where you can click Extract and use the app as per normal.  You can also enter a URL pointing to a packaged zip file instead and follow the same steps above.

Submitting your HTML5 Packaged Web App to the Amazon Appstore

Developers need to follow the following simple steps to submit their web apps:

1. Create a Free Amazon Developer account. 

2. Go to the New Web App Submission page and provide details about the packaged web app:

1. General Information (title, category, support details, privacy URL)
2. Availability and Pricing  (release date and base list price)
3. Description
4. Images and Multimedia (screen shots, icons)
5. Content rating

3. Choose whether or not to submit a hosted web app or a packaged web app. (In this case, the latter).

4. Upload the web app files (HTML, JavaScript, CSS, content files/resources) as a zip file.

5. Submit!

Final Thoughts

That's it! Creating HTML5 packaged apps for the Amazon Appstore is straight forward, but if you have any problems, be sure to check out the web app support forum, where you can find answers or post questions.

Amazon's packaged web apps are a great step forward for the open web. Creating cross platform apps using HTML5 technologies will enable a whole new class of apps created by a whole new generation of developers. We're excited to launch this new functionality and can't wait to see what developers do.

-Russ

The Current HTML5 Landscape

In a world quickly moving toward mobile device adoption, there is a growing pressure for web developers to learn new languages in order to adapt to the ever-changing landscape of content delivery. For the past 16+ years, web has been the king of mass distribution. But now as app stores on mobile devices are driving huge monetization opportunities, how do web developers stay competitive in this new “post PC world”? The key is to understand how you can maximize your web app’s potential in the distribution vs. monetization model.

The Distribution Vs. Monetization Model

As developers look to create new content, be it a web app or native app, they should be thinking about the following model:

The distribution vs monetization model.

The concept is that the larger your distribution base, the better your chances of monetization are. Along the far side of the x-axis is the native mobile and tablet space, which is fragmented around several different platforms, and the individual platform distribution potential is much smaller. On the flip side, since all mobile devices and computers have web browsers, an online web app’s potential reach is staggering.

The reality of this however has been that even with the smaller distribution of mobile, developers are seeing much higher opportunities to monetize on those devices. On the web, we have seen more difficulty to monetize that content without the help of built-in systems like IAP (in app purchase) or integrated checkout, which are generally available on native devices through their app stores. The ideal solution would be to actually target both demographics, and the only platform we have seen that is capable of effectively doing that is HTML5.

Scaling Your Web App

When most developers hear “scaling a web app” they instinctually think about the backend or server side of things. But over the past year as responsive design has come into its own, we are finally seeing websites that can not only run on desktop browsers but elegantly reconfigure themselves to accommodate all the different viewports users are visiting with.

The most common responsive design resolution breakpoints.

The forethought that goes into building a truly responsive design that flows correctly from desktop to mobile phones is no small task but the opportunity for capturing the largest possible distribution is worth it. Gone are the days of splitting off your web traffic between a mobile only site and a desktop site because the cost of maintaining both grow exponentially. But what about still reaching native app stores?

But What About Still Reaching Native App Stores?

Some of the current solutions on the market for publishing HTML5 content next to native apps have revolved around the PhoneGap/Cordova model. These allow the developer to package the web app and submit it to a native app store. But there is one glaring downside to this kind of distribution; you lose the ability to maintain a single codebase. In an ideal world, you would want to simply redistribute your online app in a mobile store and keep the two in sync. This is some of the thinking behind our HTML5 web app resources for Amazon Appstore.

Own Your Content and Keep it Online

The last thing a developer would want to do is fork a project and end up maintaining multiple code bases to support each platform it is distributed on. So why not just keep your content online where it will get the largest potential for distribution and still submit it to an app store that offers you an entirely new way to monetize it? This is a fairly new publishing model that has been growing more and more popular over the past few years. It offers the best of both worlds since you maintain a single place were your web content can live and you gain the added benefit of being able to distribute your app in a native store. With that distribution comes the potential of increased monetization by simply charging for the app, using IAP or continuing with your current ad based model.

The best part is that you can experiment with this new type of distribution today in the Amazon Appstore with our HTML5 Web App Tester. Simply download the app, point it to your site’s URL and test out how your web app works. From there it’s easy to submit to the Amazon Appstore and begin reaching a whole new audience.

Note: Effective 08-26-2015 Free App of the Day (FAD) has been replaced with Amazon Underground.

In August of last year we enabled HTML5 developers to publish hosted web apps next to native Android apps in the Amazon Appstore, making HTML5 web apps discoverable to millions of Amazon customers. Starting today, developers can set a list price for their web apps, giving them another way to monetize web content to Amazon Appstore customers in nearly 200 countries across the globe.

Prior to this update, web apps published to the Amazon Appstore were automatically set to free.  In the latest update developers can now set a list price in specific currencies based on the local markets they’re publishing their web apps to. This is great news for developers looking to publish their first web app to the Amazon Appstore, and the feature is now retroactive to all web apps that have already been published. That means existing developers simply need to log into their Developer Account to see an updated “Availability & Pricing” tab with the option to charge for the app.

Now with the ability to set a price for web apps in the Amazon Appstore, HTML5 developers can take part in our Free App of the Day (FAD) promotion. For developers not familiar with this program, qualifying apps gain greater exposure that could drive significant traffic to their apps. Opting into the FAD promotion and being selected enables us to work directly with the publisher to be featured in some of our most visible marketing placements. This includes placements on mobile devices, Kindle Fire, and the Amazon Gold Box Best Deals page, which are complemented by social media exposure including Facebook and Twitter announcements. These placements and the exposure they provide can drive significant traffic to the featured apps and allow the developers to grow their install base quickly. 

To learn more about qualifying for the Free App of the Day program, check out this post on how to get approved, and make sure you opt to have your web app considered for the program during the app submission process.

To republish an existing app as paid, simply edit the ‘Availability & Pricing’ tab and enter a list price, which is already defaulted to free. The same list price changes can also be made to any submission set to “IN PROGRESS” that is waiting to be approved for release.

This is just one new feature we’ve added to help make publishing HTML5 Web Apps to the Kindle Fire best in class. For more information, check out the HTML5 Web Apps detail page

-Jesse Freeman (@JesseFreeman)

HTML5 Web Apps: Tips on Acquiring Customers in the Amazon Appstore

We want to start the year off by focusing on getting your Web Apps noticed in the Amazon Appstore, so you have the best chance of acquiring new customers.  There are a few easy steps you can take to so that your apps, whether web or non-web apps, are more appealing to first time downloaders.  This includes ensuring you have quality screenshots and promotional images, detailed product descriptions, an easy way for customers to review or share your app, as well as a way for customers to discover your apps outside of the Amazon Appstore.  Amazon also offers unique ways to help your Web Apps get noticed including weekly promotions for the top Web Apps in the Appstore as well as access to Appstore Developer Select.   

Appstore Developer Select

All Web Apps submitted to the Amazon Appstore will be automatically entered into for Appstore Developer Select, if they meet the program requirements.  This program helps get your Web Apps discovered and gives you more opportunities to boost your sales and revenue.  As a developer with one or more qualifying apps, you will receive the following benefits:

• Enhanced Merchandising to Improve Discovery: Your qualifying apps will receive 500,000 free mobile ad impressions across the Amazon Mobile Ad Network. We’ll provide enhanced merchandising for your apps in a dedicated section on the Amazon Appstore home page and consider your apps for advertising on Kindle Fire.
• Amazon Coins Rewards to Customers to Improve Conversion: Consumers purchasing your app or in-app items in your app will receive up to 30% of the purchase price back in Amazon Coins. We’ll boost customer acquisition by rewarding first-time purchasers of Select paid apps and in-app items with an extra 250 bonus Coins.
• 25% off AWS Services to Help You Scale: You will earn 25% credit back on qualifying purchases of Amazon Web Services (AWS) products, up to a maximum $500 credit per year.

You can check the status of your eligibility by going to the My Apps section of the Apps and Services Tab in the Developer Console.
 

You can click on View Report to see which items your App has passed on and which items you need to update in order to become eligible.

Once your app has been enrolled in Appstore Developer Select you will also have the option to view the Ad Campaign that has been set up on your behalf.
 

Optimizing App Details

The title and description of your app is like the front door of a building.  Customers will never know what’s inside until they knock and walk inside.  By writing an effective description you can change your app from the spooky abandoned house on the corner to an enticing new shopping mall just waiting to be explored.

The keywords section will be how customers find your app when searching the Amazon Appstore so make sure you chose relevant discoverability terms. 

In addition to the App details you can also select a Content Rating for your app letting customers know what to expect.

Be sure to read our previous blog post with tips on effective title and description for your apps here.

High Res Screenshots and Multimedia

Your Web App submission will need to provide screenshots of your app running as well as an optional video.  You should create and upload both a 114x114 icon and a 512x512 icon, which will be used for the app list and carousel respectively.

In order to take the screenshots of your app running you will need to use the Web App Tester program on a Kindle device (emulators are not currently supported) and use the Kindle built in screenshot button combination.  The button sequence for each Kindle device can be found here.

You will need to next copy the screenshots off of the Kindle device and uploaded to the developer portal.  

On windows simply plug in your Kindle device and open File Explorer to Internal Storage > Pictures > Screenshots.

For Mac OSX you will need to use the Android File Transfer Tool and navigate to Pictures > Screenshots.

While you are only required to submit three screenshots, having additional screenshots as well as a promotional image is recommended and will help to increase the chance for downloads.  You can also include an optional Video showcasing your Web App.

You can get additional information on taking screenshots of your Web Apps via the official developer documentation  here.

App Badges

Amazon also offers App Badges you can include on your Website and customer communications such as email blasts.

These Badges are available in a variety of languages and will further increase potential download traffic to your app by referring customers who are already interested in your products or have come across your website. 

For full details on using App Badges be sure to check out the documentation here.

Conclusion

Building an audience for your apps and connecting with new customers is an important concern for most developers.  By following the steps listed here you can ensure a higher chance of getting noticed.  The more customers who see your app the greater the chance of increased downloads, more reviews and eventual promotion inside the Amazon Appstore.

Got a great HTML5 Web App in the Amazon Appstore?  Looking to get promoted?  Why not tell us about it!  You can Contact Us directly and let us know. 

-Dave (@TheDaveDev)