Building Apps for Amazon FireTV using Fire App Builder

Amazon Fire TV is a streaming TV service available on Amazon’s Fire TV hardware and FireTV stick. The platform is based on Android and building apps is as simple as building apps in Android Studio and compiling for the Amazon Fire TV service. The Fire App Builder is an open source SDK comprised of common functionality to enable developers get started quickly and build and deploy apps.

Here are steps to get started:

• Install Android Studio and make sure to update to the latest version (Android Studio 2.2.2 – stable) http://tools.android.com/download/studio/stable

• Create an Android TV Emulator (Marshmallow) following this instructions: Use an Android TV Emulator to Run Your App (Fire App Builder)

• Following the instructions here: Fire App Builder Download and Build, clone the project https://github.com/amzn/fire-app-builder.git

• Compile the Fire App Builder project. If you are facing issues at compile-time, see Troubleshooting (Fire App Builder)

Short tutorial

This tutorial shows you how to create recipes which are feeds of video clips hosted on a cloud store and are rendered into a FireTV app user interface. Then you can change the look and feel and the fonts. And finally you can link to Facebook authentication on top of the Amazon Prime user authentication.

Step 1: Understand the Feed integration & Recipes
0) Open the LightCastCategoriesRecipe.json and LightCastCategoriesRecipe.json file (located in app > assets -> recipes).

How to query categories (using JayWay JSONPath):

1) Open the urlFile.json file (located in app > assets).
2) Open the first url in a browser: http://www.lightcast.com/api/firetv/channels.php?app_id=263&app_key=4rghy65dcsqa&action=channels_videos
3) Copy the JSON text
4) Open Jayway Evaluator http://jsonpath.herokuapp.com/
5) Paste the JSON Text
6) In the “Path” field, enter $[?(@.categories[0])]
7) All the items for categories[0] are shown as results!

Step 2: Edit The Interface

https://developer.amazon.com/public/solutions/devices/fire-tv/docs/fire-app-builder-customize-look-and-feel

1) To Edit Fonts:
Open the Navigator.json file (located in app > assets).

Change “branding” like this:

"branding": {
"globalTheme": "AppTheme",
"lightFont" : "Amazon Ember Light",
"boldFont" : "Amazon Ember Bold",
"regularFont" : "Amazon Ember"
}

2) To remove Reccomended Content:
In Navigator.json (inside app->assets)

"showRecommendedContent": true,

3) To change to the more compressed layout:
Open the Navigator.json file (located in app > assets).

In the graph object, locate the ContentBrowseActivity:

"com.amazon.android.tv.tenfoot.ui.activities.ContentBrowseActivity": {
"verifyScreenAccess": false,
"verifyNetworkConnection": true,
"onAction": "CONTENT_HOME_SCREEN"
}

Change ContentBrowseActivity to FullContentBrowseActivity.

"com.amazon.android.tv.tenfoot.ui.activities.FullContentBrowseActivity": {
"verifyScreenAccess": false,
"verifyNetworkConnection": true,
"onAction": "CONTENT_HOME_SCREEN"
}

Step 3:
Working with Modules: Login with Amazon (only if you have an Amazon Developer Account)
Details: https://developer.amazon.com/public/solutions/devices/fire-tv/docs/fire-app-builder-login-with-amazon-component

0) Load the Component “LoginWithAmazonComponent”.
This is done by importing the LoginWithAmazonComponent module and substituting the “FacebookAuthComponent” with “LoginWithAmazonComponent” in build.gradle (Module: app) and settings.gradle

1) open the Navigator.json file (located in app > assets).
2) Set the verifyScreenAccess value to true for the screen where you want users to log in.
e.g.
"com.amazon.android.uamp.ui.PlaybackActivity": {
"verifyScreenAccess": true,
"verifyNetworkConnection": true,
"onAction": "CONTENT_RENDERER_SCREEN"
}

3) To change the text that appears in the Login with Amazon screen (Figure 1), go to LoginWithAmazonComponent > res > values > strings.xml. Copy the strings into your app’s custom.xml file (inside res > values) and customize the string values.

4) If you have an Amazon Developer account, go to: https://developer.amazon.com/lwa/sp/overview.html
5) Create a New API Key
6) get the MD5 Keytool signature:

keytool -list -v -alias androiddebugkey -keystore debug.keystore
password is android

7) Copy MD5 and finalyse
8) After you get the API key, go into the LoginWithAmazonComponent > assets folder in Android Studio and open the api_key.txt file. Delete all the default text that appears in that file, and then paste your API key.
9) Run the app (Login with Amazon will fail on Android Emulator but will work on physical Fire TV devices)

Step 4: Swap the JSON Feed
1) Open the urlFile.json file (located in app > assets).
2) Subsitute the two urls with:

{
"urls": [
"https://s3-eu-west-1.amazonaws.com/fireappbuilderworkshop/amazonappstorevideos.html",
"https://s3-eu-west-1.amazonaws.com/fireappbuilderworkshop/amazonappstorevideos.html"
]
}

3) Copy and paste LightCastContentsRecipe.json (located in app > assets > recipes) and call it LightCastContentsRecipe1.json
4) Edit LightCastContentsRecipe1.json “query” field like follows, to fetch the second tag from the JSON:

"query": "$[?(@.categories[1] in [$$par0$$])]",

5) in Navigator.json, update “globalRecipe” like follows, configuring the second feed to use the LightCastContentsRecipe1.json recipe:

"globalRecipes": [
{
"categories": {
"dataLoader": "recipes/LightCastDataLoaderRecipe1.json",
"dynamicParser": "recipes/LightCastCategoriesRecipe.json"
},
"contents": {
"dataLoader": "recipes/LightCastDataLoaderRecipe1.json",
"dynamicParser": "recipes/LightCastContentsRecipe.json"
}
},
{
"categories": {
"dataLoader": "recipes/LightCastDataLoaderRecipe1.json",
"dynamicParser": "recipes/LightCastCategoriesRecipe.json"
},
"contents": {
"dataLoader": "recipes/LightCastDataLoaderRecipe1.json",
"dynamicParser": "recipes/LightCastContentsRecipe1.json"
}
}
....

firetvemulator

 

References:

admin has written 51 articles