Developer Console
Amazon Developer Blogs

Amazon Developer Blogs

Showing posts tagged with API

February 27, 2014

David Isbitski

About Kinetic Art

Kinetic Art, an Israeli startup established in 2010, is the publisher of the highly popular cooking app Look & Cook. Kinetic Art's core technology and intellectual property revolves around in-app ecommerce optimization.

Recently, Kinetic Art published Look & Cook to the Amazon Appstore (download here) their first ever-Android version. I had a chance to sit down with Dudu Mimran from Kinetic Art and talk about Kinetic Art’s experience publishing on the Amazon Appstore, what it was like implementing the Amazon Mobile Associates API, and what type of success they have seen so far.

“Look and Cook is a cooking and now a shopping app, thanks to Amazon’s Mobile Associates API. We are building a platform for building cooking apps.” - Dudu Mimran.

Why start with Amazon? A better user experience.

Having found early success on iOS, including an advertising campaign on Pinterest, the team decided it was time for an Android version. For Kinetic Art the most important thing for Look & Cook was ensuring a great user experience. They were confident they could achieve this vision on Kindle Fire as they only needed to target a single device vs a multiple of Android devices. “On Amazon, you can focus a lot on Kindle. With Google Play you have to make sure you having everything looking good on many, many devices. We decided it would be a much easier transition going from iOS to Amazon because of this.”

Look & Cook was able to leverage Amazon to create a culinary lifestyle experience by integrating ecommerce into the food and culinary world. The current version of Look & Cook now has numerous physical goods related to the cooking of the selected recipe. “We created a small shop within each recipe. The tools that are included in the app are recommended by the recipe creator to make the recipe perfectly. In general, this is what our investors have in mind. Our main business model in the future will be ecommerce. We are not there yet, but this is a great step. We are betting everything on ecommerce and we already have purchases. People are buying for sure,” declares Dudu.

“Look and Cook is a cooking and now a shopping app, thanks to Amazon’s Mobile Associates API. We are building a platform for building cooking apps. Amazon’s Mobile Associates API really excited us because we have always wanted to integrate ecommerce but it’s something very hard to do as a startup. Since Mobile Associates launched it has made it much easier for us. We are very happy working with Amazon,” says Dudu.

Amazon Customers: More Engaged

Even though the team has seen a smaller number of app downloads on Amazon vs. iOS people are definitely buying goods and they have already seen differences in the behavior of customers. “We have two types of users on Amazon: those that use it on an ongoing basis and those that love it for cooking. We also see those that love it for the very first time. They are more engaged on Amazon, and if I compare the amount and depth of reviews, then totally, people are much more engaged into the app itself,” says Dudu.

According to the team, once they understood the basics of integrating the API for Amazon Mobile Associates, things progressed quickly. “It was very easy, and it just works!” says Dudu.

“Our main business model in the future will be ecommerce. We are not there yet, but this is a great step. We are betting everything on ecommerce and we already have purchases. “

Figure 1- Look & Cook running on a Kindle Fire HDX 7”

Figure 2- Tapping on Shop will bring up a physical good for that recipe you can buy with the Buy Now button.

Figure 3- Clicking Buy Now takes you right to the product from Amazon without leaving Look & Cook

Figure 4- Look & Cook’s category of recipes

Kinetic Art projecting 8-10x growth

To measure success the team built a detailed level of conversion measurement. For example, they know how many people download the app, navigate through the app, navigated to an extended view, and buy products. In the future, one of the improvements will be creating greater exposure to other random products and not forcing people into the ones the app recommended.

It’s too early to tell how much money the team will be making but already they are seeing purchases. “It’s less important for the number at the moment, behavior is what is very important. Really getting customers used to the behavior is important. They are not accustomed to buying within the app. Now we are working on several angles: distribution, volume of users, exposure of more products, and then quality of product and selection,” says Dudu. 

When asked about potential growth, the team projects as much as 8-10x growth once they start really marketing to users. Their favorite part about working with Amazon? “I would say the personal touch. This is very, very important to us and a huge differentiator. From a user perspective, Amazon customers are much more engaged and seem to be people that buy.”

You can check out Look & Cook in the Amazon Appstore here and find out more about the Amazon Mobile Associates API here.

-Dave (@TheDaveDev)

 

February 25, 2014

David Isbitski

Two years ago, Sean Sheedy, saw an opportunity to teach his boys more about mobile app development. He decided to take his sons Tommy and Ian with him to MoDevEast and participate together in a hackathon. These three were our big winners from the MoDevEast competition. It all started out with Sean bringing paper, pens and other supplies so that the boys could help out by drawing the app’s user interface in prior MoDevEast competitions. Once they came up with the user interface Sean would code whatever ideas the boys came up with.

Figure 1Sean with his sons Tommy and Ian

His oldest son Tommy (ten at the time) would always talk to other attendees and sponsors from the hackathon and would work alongside them. When one of the attendees gave Tommy an iOS app recipe, it wasn’t long after that Tommy had an entire app running and needless to say dad was impressed.

At the recent MoDevEast 2013 conference Tommy brought his friend Devin and his Dad to the conference too, bringing the teams total membership to four. 

“We were trying to decide what app to write,” recalls Sean, “Devin’s Dad and I like to get together and jam on the guitar. We thought about doing an app called Jam Session. The idea that we tried to implement was an app that would let you playback a track that somebody else recorded and while it plays back you can record your own track. I found two API’s called Audio Track and Audio Record for Android. We found that it was possible to do this and then figured out how to make the app work.”

“Tommy investigated early on of what it would take to make this work on a Kindle. He saw that it would be really easy to port over to the Kindle because it’s basically Android,” says Sean. “Tommy saw the benefit of creating the design and then began writing code. We initially built it for Android. The API we ended up implementing was really a simple audio playback. “

Figure 3 Sean and the boys using post it notes to flush out the app user interface

“There was no porting involved – it was intended to run on any Android device and that includes the Kindle.” - Sean

So what was the process like getting their Android app running on Kindle? “It was a no brainer to port this over to Kindle. It basically ran right away. We basically did no work,” Sean says. “The only thing that would have been a deal breaker is if we had used vendor-specific or unpublished APIs. Nothing stood out to be an issue. There was no porting involved – it was intended to run on any Android device and that includes the Kindle Fire. “

What about the Kindle development environment? Since Kindle is Android it’s just like any other Android environment using Eclipse. “In development it’s really cool that I can plug the Kindle in and it’s just like any Android device. That is REALLY nice.” says Tommy. 

   

So what do Sean and the boys envision for the future? “We would like to be able to make it easy to buy the music that people are jamming to in our app. You can start off by buying the music you want to jam to and make that the base track and then add your tracks to it. Amazon’s Mobile Associates API would help us do that.”

“In development, it’s really cool that I can plug the Kindle in, and it’s just like any Android device. That is REALLY nice.” - Tommy.

Did the boys have fun on this father and sons hackathon adventure? “Tommy thought this was our best concept yet. We didn’t win the top prize, but we won the Kindle Fire and some money,” says Sean. “Pretty much every hackathon I’ve gone to I’ve gone to with the kids. The boys are getting a lot from the experience, and I highly recommend this to any tech parent.” 

Amazon Mobile Associates

Interested in selling Physical Goods in your Android Apps using the Amazon’s Moble Associates API that Sean mentions? Be sure to check out our Mobile Associates Blog Posts and Developer Portal for full details.

-Dave (@TheDaveDev)

 

February 21, 2014

Mike Hines

Big Blue Bubble is a Canadian development studio out of Ontario.  In the last few years, they have focused on creating free-to-play games for iOS, Android, including Kindle Fire, and Windows Phone. Their latest update to their app My Singing Monsters includes catchy new tunes from Grammy winner Kristian Bush and is not only a big hit with customers, but a big hit on the Amazon Appstore. Director of Development Bryan Davis shares some general strategy and how they generated 10%-15% better average revenue per user and 25%-30% better IAP revenue in the Amazon Appstore.

In-app purchasing: Big Blue Bubble goes for volume

Davis tells us: “A very important aspect of monetization from free-to-play games is IAP (in-app purchasing). Our strategy is to go for volume, rather than chasing whales.”  While average revenue per user (ARPU) is important, Bryan tells us that a high conversion rate is more important for Big Blue Bubble.

Big Blue Bubble games also use aggressive discounts to be successful.

“Something always needs to be ‘on sale’,” says Bryan. “People like to get discounts, so constantly running the promotions is the way to go.” Bryan recommends letting the promotions run for at least 3-4 days so the majority of your players have a chance to get a discount when they use the app.  

Better ARPU and IAP revenue than other stores

How is this working for Big Blue Bubble? We asked Bryan how well this strategy monetizes on the Amazon Appstore. He stated that: “…the overall revenues per user are just about 10-15% better.” However, “In terms of IAP, Amazon Appstore constantly outperforms other stores by 25%-30%.” 

Pre-Authorized Amazon Customers a Big Help to ARPU

Were there any special tricks or tips Big Blue Bubble used to get IAP to monetize so well on the Amazon Appstore? Bryan noted that: “…the fact that most users already have a credit card on file helps a lot.”

We also asked about downloads, and Bryan said that:

“In terms of download units, Amazon Appstore is still behind Google Play or iTunes App Store. In the Amazon Appstore ARPU is better and customer engagement is about the same.  The Amazon Appstore conversion rate from downloads to installs) is by far the highest and percentage of users with technical issues is the lowest.”

So is it safe to say Big Blue Bubble is happy with their app performance on the Amazon Appstore? “We are very happy with the performance. It is obvious that the user base is growing every day, not only for our game but for the Amazon Appstore as well.”

It’s good to hear that Big Blue Bubble’s monetization strategy is working well on the Amazon Appstore. We asked for any last recommendations, and Bryan had this to say: “Don’t keep [your customers] waiting too long for new content. Keep engaged with your audience at all time.”  We couldn’t agree more.

Learn more about the tools used by Big Blue Bubble:

Amazon Appstore Developer Console

Developer Promotions

Mobile Ads

 

February 14, 2014

David Isbitski

When displaying ads in your apps and games, you may want to know how often you are actually displaying ads to your users, what types of ads are being displayed, and how your users are interacting with an ad. 

Thankfully, the Amazon Mobile Ads API includes events that can aid you in understanding performance of ads displayed on your apps.  You have the ability to track when an ad is successfully displayed from the Amazon Ad Network, how long a user views an ad, and when your user opens or closes a rich media expandable banner ad.  These events should help you track and better understand user behavior in your apps when ads are being shown.

With a guaranteed CPM of $1.50 for banner ads displayed on qualified apps during March and April (up to 2 million impressions per app per month), there has never been a better time to get started using the Amazon Mobile Ads API.

Handling Ad Events

All of the events associated with an ad provided by the Amazon Mobile Ads API will be returned by the AdListener interface.  Once you have declared an instance of an Amazon AdLayout, setting an event listener to the layout will let you track the entire life cycle of an ad. 

Keep in mind all of the listener's events are part of the main UI thread.  So if you are planning on executing any long running tasks you should do so in an AsyncTask.

Capturing Metrics When Ads are Loaded

You can capture metrics in your app each time an ad is loaded using the AdLoaded event.  AdLoaded is called each time an ad is successfully served by the Amazon Mobile Ad Network, and available for display.  You can use this event to adjust your app’s user interface when a new ad is loaded or to keep track of the type of ads you are being served. 

For example, if you have a game, you should choose to delay displaying the AdView until the player is at a point where an ad will not interrupt gameplay.  In the below example I am updating a TextView each time an ad is successfully loaded and then adding the AdView to the root container for display.

You can get additional properties about the ad being served at runtime through AdProperties.  These properties can help determine if your ad is a static banner or a rich media expandable banner.  Static banners are HTML web views that typically open an in-app browser, native browser, or Android Intent.  Rich Media Expandable Banners are HTML web views that expand in-app with rich interactive content (including videos), but also typically include opening an in-app browser, native browser, or Android Intent.

 

In the above screenshot, I have set a breakpoint to get information from the AdProperties variable.  There are four types of information that are filled by AdProperties.  These include:

  • adType - possible values are 'Image Banner', 'MRAID 1.0' or 'MRAID 2.0'.  MRAID stands for Mobile Richmedia Ad Interface Definition and will determine the capability of the rich media expandable banner.
  • canExpand – determines if the ad can be expanded
  • canPlayAudio – determines if the ad plays audio when expanded
  • canPlayVideo – determines if the ad plays video when expanded

Trigger changes when an ad expands

The onAdExpanded and onAdCollapsed events are called when a rich media expandable banner ad has been clicked by a user and is either expanded or collapsed.  You can use this event to pause your game or suspend background audio music when an ad has expanded, among other options.

 

Handling Ad Load Errors

If an ad fails to load, the AdListener.onAdFailedToLoad event returns an AdError object that contains an error code and a descriptive response message.  For example, the onAdFailedToLoad event below is logging the ad error message, removing the Amazon view from the UI, and then loading a Google AdMob view to request an ad.

 

It is important to keep in mind that the there is no logic to retry loading an ad.  If you encounter an error, you should decide whether to call AdLayout.loadAd again based on the error code returned. 

The error codes are helpful in debugging where errors may be occurring; server side, network based, or within the app code itself.  In the below example we see an AdError occurring due to the developer setting an incorrect view size.  This can happen if an ad is requested before its parent view is available. 

 

The possible error codes that can be returned include the following.

  • NETWORK_ERROR The ad request failed due to problems with network connectivity. Try again when a connection becomes available.
  • NO_FILL The ad request succeeded but no ads were available. Don’t retry immediately.
  • INTERNAL_ERROR The ad request failed due to a server-side error. Try again but limit the number of retry attempts.
  • REQUEST_ERROR There is a problem with the ad request parameters. Do not retry. Review the error message and update your app accordingly.

For specific error message descriptions, please refer to the following chart on our developer portal here.

You can get more information on the Amazon Mobile Ads API including code samples and training videos here.

-Dave (@TheDaveDev)

 

February 06, 2014

Peter Heinrich

If you develop apps or games with Unity, you may already be using Amazon’s GameCircle plug-in for Unity to integrate cross-platform leaderboards, achievements, and game data synchronization.  The plug-in works on iOS, Android, and Fire OS, connecting your app to Amazon’s GameCircle service.  Its leaderboards and achievements encourage friendly competition and replay, while its Whispersync for Games component backs up game data to the cloud, improving the customer experience.  With GameCircle, gamers won’t lose their progress if they reset their device or buy a new one.

If you haven’t used the GameCircle plug-in yet, you can now download it from the Scripting/Integration section of the Unity Asset Store.  Accessible directly from within the Unity development environment, the Unity Asset Store makes it fast and convenient to add editor or game functionality through third-party extensions like the GameCircle plug-in.

 

 

This official GameCircle plug-in is compatible with iOS and Android phones and tablets, as well as Kindle Fire, Kindle Fire HD, and Kindle Fire HDX devices.  Add the plug-in to your project to access GameCircle leaderboards, achievements, and Whispersync for Games.

In addition, the GameCircle plug-in also works with the Unity Social API, which provides a unified interface to social back-ends such as Game Center and Xbox Live.  Set the active social platform to GameCircle and calls to the Unity Social API will pass through to the GameCircle service in the same way:

#if UNITY_IOS || UNITY_ANDROID
Social.Active = GameCircleSocial.Instance;    
#endif

Since Unity’s Social API is designed to be a generic interface that works across many services, it doesn’t support every feature of every back-end.  GameCircle leaderboards and achievements work seamlessly, for example, but Unity’s Social API provides no hooks for game data synchronization.  To use some advanced features of GameCircle, like Whispersync for Games, simply call the API through the normal GameCircle interface.  It’s easy to use the two APIs side-by-side, and the plug-in includes a sample scene to help you get GameCircle and Unity’s Social API up and running together.

Check out the official GameCircle plug-in in the Unity Asset Store.  It’s easier than ever to get started integrating GameCircle’s leaderboards, achievements, and Whispersync for Games in your Unity-based game for most mobile devices.  You can also visit our developer portal for more detailed information about using GameCircle and Unity together, as well as links to help you call other Amazon services from your Unity projects.

 

January 29, 2014

Mike Hines

Last week, I wrote to tell you about the new Dolby SDK that makes it easy for you to optimize the sound on the device to match the different kinds of audio you use in the course of your app. This week, we have some feedback from a developer who has implemented the Dolby Plug-In for their app on Kindle Fire.

Luxurious Animals is a game developer in New York. They wrote the casual game Lux Ahoy!, a netmagazine.com Top-10 game. Before working with Dolby Digital Pro, they didn’t consider audio to be a key component.  However after using the Dolby Plug-in, Luxurious Animals had this to say: “The API created a much richer and more immersive experience, making the game feel more exciting and absorbing.  It really took our game to the next level.”

Overall, Luxurious Animals found the Dolby Plug-in to be easy to work with and required no changes to the overall workflow:

“Adding the Dolby magic to our app was as easy as linking a JAR file with our project and calling Dolby-specific methods from our app. We used the Game audio profile inside the API, which creates a ‘live’ space to best bring out the effect of fast-moving objects in the audio. The API also offers Music, Movie and Voice profile options.  We had Dolby capabilities in the game up and running in less than 15 minutes. The API package comes with a Javadocs and a quick-start guide along with a sample application showing how Dolby APIs should be invoked.

Today, we have a fun casual game that not only has great-looking graphics, but also a rich soundtrack that pulls users in and holds their attention. We are confident these enhancements have increased the overall experience for our customers on the Kindle Fire HD.”

I’m thrilled that Luxurious Animals has been able to improve the customer experience for relatively little effort; it speaks well to the smart API design by the Dolby development team.  

To learn more about the Dolby Digital Plus SDK, please read the previous blog post on the topic here, or get the SDK directly from Dolby here.

 

January 28, 2014

Jesse Freeman

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)

 

January 23, 2014

David Isbitski

Amazon allows you to distribute your web apps and mobile-optimized HTML5 websites to millions of Amazon Appstore customers in nearly 200 countries across the globe.  With Amazon’s In-App Purchasing API for JavaScript you can increase revenue by enabling compelling monetization strategies.  This includes a "freemium" model for your app where the app itself is free but you charge a premium for advanced services or functionality.  Your web app can offer customers in app currency, subscriptions and entitlements all through the secure Amazon checkout process.

Getting Started

The first step in implementing In-App Purchasing in your web apps is to download the Amazon Mobile App SDK, then you will submit a new web app to the portal and then finally add a reference to the Amazon Web API libraries in your html. 

The latest versions of the Amazon Web API libraries are hosted by Amazon for you.  The current urls can always be found in the LATEST_URLS.txt file located in the Amazon Mobile App SDK folder.

<!DOCTYPE html>

<html>

<head>

    <title>Button Tester</title>

    <!-- Use of this sample code involves calling jQuery from Google

                 Hosted Libraries and is subject to the terms located here:

                 https://developers.google.com/speed/libraries/terms

    -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

    <script src="https://amazon-web-app-resources.s3.amazonaws.com/v0/latest/Amazon-Web-App-API.min.js" type="text/javascript"></script>

    <script src="https://amazon-web-app-resources.s3.amazonaws.com/v0/latest/Amazon-Web-App-API-tester.min.js" type="text/javascript"></script>

    <script src="js/buttonclicker.js" type="text/javascript"></script>

    <link rel="stylesheet" href="buttons.css"/>

</head>

Once you have referenced these JavaScript files you will have everything you need to access the Amazon In-App Purchasing API from your web app.

Setting Up Your Catalog

Before you can make any In-App Purchase calls you need to have a catalog of SKUs set for your web app to use.  You can add SKUs to your web app’s catalog by opening the Developer Console, selecting Apps & Services, choosing the web app submission you want to add SKUs to and then clicking on the In-App Items link, which will take you to the list of SKUs currently offered in your web app.

There are three types of SKUs you can offer to your customers.

·         Consumables – This type of purchase is available only on the device it was purchased on.  Some consumable examples include in-game currency or an extra power up in a game.

·         Entitlements – This is content that requires access rights such as unlocking additional game levels or offering specific magazine issues.  Entitlements do not expire, are tied to a customer’s Amazon account and are available on any device they access the content from.

·         Subscriptions – These are entitlements that are bound by a period of time which auto-renews at the end of the period and is tied to the customer’s Amazon account. Subscriptions are available on any device a customer accesses the content from. You are allowed to have multiple subscriptions for purchase within your app.

 

Simply click on the type of SKU you would like to add and you will be taken to a new screen where you can provide information about the SKU.  For example, if I wanted to offer an Entitlement purchase for my World of Warcraft Realm Status app to track a single realm I would click Add an Entitlement and then enter a Title and SKU.

 

Next you will need to enter pricing information for your new SKU.  In this case, I want to sell a Track Single Realm for $1.00.  Amazon gives you the option of setting your own list price for each marketplace or it can match the prices based on your entered base price.

 

You can also enter a detailed description, along with keywords for the Entitlement.  Descriptions can be provided in multiple languages and if no translations are given the default English description will be used.

 

You also need to provide images of the item for users along with the image you want displayed upon a successful purchase.

 

Once you  have completed this, click Save, and then Submit In-App Item.  You will be taken back to our In-App Items screen with the new SKU now listed.  In the upper right corner will be a button to download a JSON Data file. 

This JSON file will include a list of our SKUs that will be used by the SDK Tester Tool when we want to simulate a purchase in our development environment.

 

The SDK Tester Tool is included in the Amazon AVD Launcher emulators or it can be installed on a device via the APK included in the Amazon Mobile App SDK under the /Android/InAppPurchasing/tools.

The Button Clicker example includes a similar JSON file that covers all of the purchasable item types.

Purchase Process Flow

The JavaScript In-App Purchasing API is designed to encapsulate the complexity behind the purchase process while providing a fully featured API. While building your app, it is important to understand which parts of the purchase flow the app must implement, and which parts are handled by the Amazon Services library.

Note: In order to protect customers, we also require that you serve the page of your app that uses In-App Purchasing over  SSL/HTTPS. For more information, please refer to the Making Your Web App Safe documentation

Below is a simplified chart explaining responsibilities during the purchase flow.

 

In-App Purchasing API for JavaScript is comprised of three elements:

  • Amazon Services JavaScript - The class/API that manages the interaction between the application and Amazon's native APIs.
  • Purchase Handlers - The object your application provides to respond to callbacks from the Amazon Services JavaScript. They are registered as an observer to the Amazon Services In-App Purchasing API.
  • Receipt Verification Service - An HTTP service you should use to validate the customer's purchase receipt.

The process workflow between your JavaScript calls and the Amazon Services JavaScript library looks something like this:

 

You can deliver static content stored locally or dynamic content that is updated over time for customers.  For more details about the Purchase Process workflow and the types of deliverable content you refer to the Understanding In-App Purchasing for JavaScript API documentation here.

Implementing and Testing Purchase Calls

Now that you understand the process flow, have referenced the proper JavaScript libraries and have created a list of SKUs (or local JSON file) it’s time to call out to the Amazon Services in your own JavaScript.

Every call you initiate via the Amazon Services JavaScript Libraries results in a response received by the corresponding response handler specified in registerObserver(). Each of these responses makes use of a response object and includes the following:

  • GetUserIdResponse - Provides the app-specific UserID for the user currently logged into the Amazon Client
  • PurchaseUpdatesResponse - Provides a paginated list of receipts and revoked SKUs since the offset passed into the initiating request. Receipts are returned in a set and are unordered.
  • ItemDataResponse - Provides item data, keyed by SKU.
  • PurchaseResponse - Provides status on purchases initiated within your app. Any error for a purchase is automatically managed for you by In-App Purchasing API.

There are also purchase handlers, similar to the In-App Purchasing API for Android that have already been implemented for you inside the Amazon Services JavaScript files.  They include the following:

  • onSdkAvailable(onAvailableResponse) - This gets called when the In-App Purchasing services are ready to be called by your code. Production applications should not grant entitlements when they are run in sandbox mode.
  • onGetUserIdResponse(userIdResponse) - Called in response to GetUserId.
  • onItemDataResponse(itemDataResponse) - Called in response to GetItemData. data.itemData is a hash table of itemData objects keyed by SKU.
  • onPurchaseResponse(purchaseResponse) - Called to report the status of a purchase operation. purchaseResponse.purchaseRequestStatus contains the status of the response. If a prior session of the application shut down before a purchase response could be delivered, this function will be called when a new session of the application registers a purchase hander.
  • onPurchaseUpdateResponse(data) - Called with the list of entitlements that the user has been granted. data.receipts contains a hash table, keyed on SKU, that contains the receipts for the IAPs that have been granted to the user. data.revokedSkus has a list of SKUs that the user can no longer use.

Implementation of the Amazon Services JavaScript library is as follows:

  • Enable the API Tester
  • Register a Purchase Observer
  • Check to see if we are running in developer Sandbox Mode
  • Update any existing Purchases
  • Handle Purchase Responses
  • Store Receipts

For example, the Button-Clicker example starts off by calling an initialize() function which will set up an IAP observer using amzn_w.IAP.registerObserver() and then checks the response object to see if the web app is in debug mode.  If it is an alert box is generated telling the user the app is in development mode.  If not it will check for updated Purchases.

Finally, the function sets up handlers for Purchase Response and Purchase Updates Response objects.

// Setup

function initialize() {
    loadPageState();
    amzn_wa.enableApiTester(amzn_wa_tester);
    refreshPageState();

    // Setup button press handlers
    $("#theButton").click(function() { buttonPressed(); });
    $("#redButton").click(function() { redButtonPressed(); });
    $("#greenButton").click(function() { greenButtonPressed(); });
    $("#blueButton").click(function() { blueButtonPressed(); });

    // Ensure we can call the IAP API
    if (amzn_wa.IAP == null) {
        console.log("Amazon In-App-Purchasing only works with Apps from the Appstore");
    } else {
        // Registers the appropriate callback functions
        amzn_wa.IAP.registerObserver({
                 // Called the the IAP API is available
                'onSdkAvailable': function(resp) {
                    if (resp.isSandboxMode) {
                        // In a production application this should trigger either
                        // shutting down IAP functionality or redirecting to some
                        // page explaining that you should purchase this application
                        // from the Amazon Appstore.
                        //
                        // Not checking can leave your application in a state that
                        // is vulnerable to attacks. See the supplied documention
                        // for additional information.
                        alert("Running in test mode");
                    }

                    // You should call getPurchaseUpdates to get any purchases
                    // that could have been made in a previous run.
                    amzn_wa.IAP.getPurchaseUpdates(state.lastPurchaseCheckTime != null ?
                            state.lastPurchaseCheckTime : amzn_wa.IAP.Offset.BEGINNING);
                },

                // Called as response to getUserId
                'onGetUserIdResponse': function(resp) {},

                // Called as response to getItemData
                'onItemDataResponse': function(data) {},

                // Called as response to puchaseItem
                'onPurchaseResponse': function(data) { onPurchaseResponse(data); },

                // Called as response to getPurchaseUpdates
                'onPurchaseUpdatesResponse': function(resp) { onPurchaseUpdatesResponse(resp);
            }
        });
    }
}

$(function() {
    initialize();
});

Once initialization is done you can make purchase calls by passing in your SKU title.  The example code here is making a call to purchase the more “sample.clicks” SKU.

function buyClicks() {
    if (amzn_wa.IAP == null) {
        alert("You are out of clicks, however Amazon In-App-Purchasing works only with Apps from the Appstore.");
    } else if (confirm("Buy more clicks?")) {
        amzn_wa.IAP.purchaseItem("sample.clicks");
    }

The purchaseItem function will return a response object you need to handle and check for success or failure.

// purchaseItem will cause a purchase response with one receipt
function onPurchaseResponse(e) {
    if (e.purchaseRequestStatus == amzn_wa.IAP.PurchaseStatus.SUCCESSFUL) {
        handleReceipt(e.receipt);
    } else if (e.purchaseRequestStatus == amzn_wa.IAP.PurchaseStatus.ALREADY_ENTITLED) {
        // Somehow we are out of sync with the server, let's refresh from the
        // beginning of time.
        amzn_wa.IAP.getPurchaseUpdates(amzn_wa.IAP.Offset.BEGINNING)
    }
    refreshPageState();
}

If it gets back a status of PurchaseStatus.SUCCESSFUL it will handle the receipt returned in the response object like so: 

// purchaseItem will cause a purchase response with one receipt
function onPurchaseResponse(e) {
    if (e.purchaseRequestStatus == amzn_wa.IAP.PurchaseStatus.SUCCESSFUL) {
        handleReceipt(e.receipt);
    } else if (e.purchaseRequestStatus == amzn_wa.IAP.PurchaseStatus.ALREADY_ENTITLED) {
        // Somehow we are out of sync with the server, let's refresh from the
        // beginning of time.
        amzn_wa.IAP.getPurchaseUpdates(amzn_wa.IAP.Offset.BEGINNING)
    }
    refreshPageState();
}

In this Button-Clicker example we are setting a Boolean value to true based on a successful purchase.  In a real web app you would want to save the purchase receipt to local storage or back to your own cloud storage so you can verify purchase receipts in the future.

Using the SDK Tester App

If you are running in the development Sandbox Mode we mentioned above calls to the Amazon Services will go through the local SDK Tester App instead of to the Amazon Cloud. 

This allows you to simulate purchasing SKUs in your web app without having to spend any actual currency.  You have the option to test a purchase inside the browser itself using the included Amazon Service JavaScript Libraries.

In this scenario you need to ensure your JSON file holding the SKUs is located in the same folder as you web app.  If you want to test the In-App Purchase on a device you can do so using the SDK Tester tool and a JSON file that has been copied to the SD Storage.

For a complete video walkthrough of the purchase process and SDK Tester tool you can watch the following screencast on our Youtube Channel.

Conclusion

By utilizing the Amazon In-App Purchasing API for JavaScript you are able to quickly implement and test purchases through your existing web app.  Customers can take advantage of in app items, subscriptions and entitlements you might offer all through the secure Amazon checkout process.

Be sure to check out our HTML5 Web App materials on the developer portal to get started today!

-Dave (TheDaveDev)

 

 

January 22, 2014

Mike Hines

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

Getting the right exposure for your app is a key ingredient to making it successful. Amazon already has several programs which developers can leverage to help drive visibility to their apps, and developers who want even more visibility think outside the box to tailor their customer experiences to increase engagement with their apps. Tribeplay is one of those game publishers who did just that, by issuing a price discount promotion that drastically increased their revenue.

The team which is based out of China has been building apps since 2012 and created the series of games under the title Dr. Panda that first appeared on iOS and Android. According to Tribeplay, making their Android Apps available on the Amazon Appstore required “little to no extra tweaking.” Tribeplay added that “one of the best things about the Amazon Appstore is that there wasn’t much work to get our apps on there. We already develop for Android, so getting our games on the Amazon Appstore was a real breeze.”

 

 

 

 

The games are available worldwide, but the team wanted to increase sales in Europe so they discounted the price of their apps by more than 50% in select countries. By doing so, Tribeplay saw their gross revenue more than double in UK, Germany, France, Italy, and Spain.

So how did the team accomplish this? Tribeplay ran banners highlighting their price promotion, which caught the attention of customers in the Amazon Appstore. When the Amazon Appstore recognized that their app was trending in customer popularity, Amazon assisted by providing more visibility for the app. “The suite of tools for promotions and sales [that Amazon provides] to help market our apps on the Amazon Appstore more effectively are very valuable.” said Tribeplay, the creators of Dr. Panda. The team saw the app’s sales more than double during the time period, when they increased the visibility of their app. 

Aside from the sales uplift, Dr. Panda was also able to reach a new and unique developer audience on Amazon. “Amazon Appstore is a fantastic platform for us and continues to get better. Through Amazon we’ve been able to reach a whole new demographic and really succeed with them. The fact that the Kindle Fire device line is so integrated to the store has also been a great benefit for both developing and marketing our apps with Amazon customers in mind.” The teams recently joined the Appstore Developer Select program and integrated the Mobile Ads API and are excited to see how the results will turn out. By participating in these programs, the team will receive additional impressions for their app, home page placements, and customized ads for their app in the US.

So how can you increase visibility? Besides having your app perform well, you can ensure your app qualifies for the Appstore Developer Select program, or get your app featured in the Free App of the Day program. If you’re looking for something similar to what Tribeplay did with their promotion, check out the Developer Promotions Console, which allows you to easily discount your apps. Getting your app onto these programs only requires a couple pre-requisites and they all aim at providing visibility for your app. For example, for your app to qualify for the Appstore Developer Select program, it must utilize relevant API’s such as Amazon In-App Purchasing, Amazon Mobile Ads, and Game Circle that all contribute to enhancing the user’s experience in your app. If you need help with these requirements we have a lot of resources available as well. “The Amazon team has always been amazing with their help and advice. Questions we ask are always answered promptly and accurately, and any problems we’ve had have been solved super quickly.” says Tribeplay.

 

January 21, 2014

Russell Beattie

The Amazon Mobile App Distribution Program enables developers to create Kindle Fire apps using existing HTML5 mobile web apps. It’s also a good way for web developers to start creating mobile apps using the skills and knowledge they already have.

Back in December we covered how to get your existing web apps onto actual devices with a Webinar on Submitting HTML5 Web Apps to the Amazon Appstore, and companion blog post focusing on setting up the Amazon Web App Tester to debug and test your apps.

We wanted to follow up with some more details to help you get the most out of the tester, which is a key part of the HTML5 web app creation process on Kindle Fire tablets. The Web App Tester has a variety of powerful features which can be used to make development faster and easier. Below are a few ways to best take advantage of all that great functionality. 

Amazon's Web App Tester

What exactly is Amazon's Web App Tester? It's a downloadable app which lets you test your web app in a production-like environment on your Kindle Fire or Android device, without first submitting it to our store. The tester contains the same web engine and libraries that will run your web app when it is wrapped into a downloadable app. The tester however, has an interface that lets you enter in your own custom URLs, and most importantly, enables remote debugging for development and testing using your desktop computer.

Because the Web App Tester is based on the same technologies as the final wrapped app, you should be able to better assess your app's performance and functionality - and more quickly work through any problems you might encounter - on the device itself, rather than via an emulator or simulator, which may not be as accurate.

Additionally, libraries that are pre-loaded into the final downloadable app, such as the In App Purchasing API for JavaScript, are also built into the Tester so you can debug your IAPs before you launch. (Look for a more detailed post about enabling IAP for your web apps coming soon).   

Managing Multiple URLs

The first thing you'll encounter when using the Web App Tester is a place to enter a URL for testing. This is great for easy ad-hoc testing, but if you have complicated URLs to enter, or have multiple URLs that you need to manage, you can create a JSON file of URLs and put it into the root folder of your Kindle Fire. The file has to be named amazon.testerurls.json and placed in the /mnt/sdcard/ folder on your device. Here's how the list of URLs should be formatted:

{ 
   "urls":[
      "http://m.imdb.com",         
      "http://m.amazon.com",         
      "https://read.amazon.com"]     
}
 

The easiest way to get it to the correct spot on your device is via the command line using the Android Debug Bridge (ADB), which comes as part of the Android SDK. Assuming you've set up the SDK correctly, you only need to connect your device using USB, open a command line, change to the directory where your JSON file is located and run this command:

$ adb push amazon.testerurls.json /mnt/sdcard/ 

Remote Debugging Options

If your device and your computer share the same network, you can enable Web Developer Tools for debugging over WiFi. If you're on a corporate network, or want to test aspects of your app including offline functionality or WLAN speeds, you can connect via USB using ADB.

Helpfully, the Web App Tester gives you all the details you need to enable Remote Debugging once you start the app. Simply click the full screen handle at the bottom or side of the screen, and swipe down. There you'll see options to enable remote debugging using ADB or via your network.

 

Once you choose, a dialog box pops up with instructions and the exact URL to enter into your Chromium based browser (for debugging). For example, here are the instructions for remote debugging via WiFi:

 

Close that dialog, enter the URLof your web app to test and you'll be all set to debug via a desktop computer.

Dev Tools Tips

Once the Dev Tools page is open in your desktop browser, remote testing and debugging of your mobile web app should become as familiar as doing development for desktop browsers. Here are some things to watch for.

On Device Tools. First, note that all the normal functionality you'd find in Dev Tools is live, but running on the device itself. In fact the entire UI is a static HTML app served from the device, which then communicates back via Web Sockets. Viewing the network speed, recording the timeline activity or profiling is all happening with the device's hardware.

Reload Shortcut. When doing development for a desktop browser, you may be in the habit of clicking the reload icon in the browser to refresh the page. Rather than exiting out of your app on the device, and then re-starting, you can simply type Command-R/Control-R inside the remote Dev Tools window to refresh the contents of the page on the device itself.

Live Inspection. Just like on a desktop browser, you can use the inspect icon to help pinpoint elements on the screen within the HTML5 markup of your app - rather than clicking the screen, just activate the inspect icon, and then touch the screen to find that element within the Dev Tools. It goes in reverse as well, notice that as you use your mouse to hover over the markup in Dev Tools, the corresponding elements light up on the device.

FPS Meter. In the Dev Tools, you can use the settings icon to turn on the FPS meter, which displays in the top corner of your device. This will let you get a live view of how fast your app is refreshing, without having to add in additional libraries.

On Device Debugging and Console. You can step through JavaScript code just as you would normally. Additionally, the console is also live, with the JavaScript engine running on the device. This allows you to use console tricks such as $0 to refer to the selected element, navigate using document.location.href, or even pop up an alert() window if needed.

Remote Debugging API

Because the Web App Tester's Dev Tools use the same remote debugging protocol as desktop Chromium browsers, they can be accessed not only from Dev Tools, but from text editors, IDEs or via scripting languages such as Python. Here's an example using the chrome-remote-interface Node.js module.

First, install the library using NPM:

npm install chrome-remote-interface 

Then create a test.js file with this boilerplate example (modifying the options variable as needed):

var Chrome = require('chrome-remote-interface');

var options = {

host:  'localhost',

port:  '9222'

};

Chrome(options, function (chrome) {

    with (chrome) {

        on('Network.responseReceived', function (message) {

            console.log(message);

        });

        on('Page.loadEventFired', function (message) {

            console.log("----------------------- page loaded ");

            console.log(message);

        });

        Network.enable();

        Page.enable();

        Page.reload();

    }

}).on('error', function (err) {

    console.log(err);

    console.error('Cannot connect to Chrome');

)};

Then run the script

node test.js 

As you use your app on the device, you'll see events logged in your console as they fire. The protocol and module will also let you send commands to the remote browser, letting you automate testing on the device and recording the results. For more info, check out the Remote Debugging Protocol pages here.

Hopefully some of these tips will come in handy as you're doing development for your web app, if you have any tips of your own or questions about using Dev Tools, definitely get in touch!

-Russ (@RussB)