Integrating APIs with XDK - Rotten Tomatoes Sample App

Using the XDK App Designer

This sample app was built using XDK's App Designer, which provides an easy to use GUI interface for building out your views. In this case, it is a single page view, made up of a header, and four rows. Jumping between the Design and Code views is seamless, with the latter affording you the power to hand-craft the code that the GUI tool automatically generates.

Project Layout: JavaScript App Framework and UI

We’ve chosen to use Intel’s App Framework JS library. You can download the App Framework from Github - https://github.com/01org/appframework/. We use it for the following tasks:

• UI - nicely styled CSS themes for iOS, iOS7, Android, Windows 8 and more
• Query selector - easy traversal of the DOM for selecting and modifying values (very similar to jQuery)

In this sample app, we’ve imported the base files (see /js directory), along with a few CSS (see /css) files and one plugin (see /plugins). We’ve also added a few other files that well explain below.

• js/
  • appframework.min.us - minimized version of main framework (part of AF)
  • appframework.ui.min.js - minimized version of the UI framework (part of AF)
  • api.js - functions for making remote API calls and parsing results (made for this sample app)
• plugins/
  • af.8tiles.js - plugin for Windows 8 phones (part of AF)
• css/
  • af.ui.css - general UI elements (part of AF)
  • icons.css - font and icon elements (part of AF)
  • mashery.css - CSS customizations (made for this sample app)

Setting up the Rotten Tomatoes API

The primary focus of this app is to demonstrate how to make API calls, parse the data, and integrate that data into the view. In this sample, we’re using the Rotten Tomatoes API, which showcases data that you would find on the Rotten Tomatoes movie review website (ratings, images, title, etc.). In order for this sample app to operate properly, you will need to get your own Rotten Tomatoes API key. The API is free to use and fetching an API key takes only a minute or two.

Navigate to Rotten Tomatoes developer portal - http://developer.rottentomatoes.com. If you already have a Mashery ID, sign in with your credentials. Otherwise, register for a new account. After providing your registration information, verify your e-mail address, login, and apply for a key (or create a new application). You will soon receive an API key to the Rotten Tomatoes API on your browser and via e-mail.

With this sample app opened up in the XDK, navigate to the Develop tab. On the left side of the XDK, you’ll find a list of directories and files. Inside the js directory, you’ll find api.js. Select/open that file into the IDE (editor). Next, copy your new API key (beware of white-space padding) from your other browser window or e-mail into api.js.

// ********************SET YOUR API KEY HERE**********************// Insert your Rotten Tomatoes API Key here. README for more info.varapiKey='PLACE-YOUR-API-KEY-HERE';// ***************************************************************

One Page, Four Rows

This sample app consists of one view, rendered from index.html. All of the library files mentioned above are loaded from this page. The content is divided into four rows. The first three rows are composed with static content. It's the fourth row that contains a div element that we'll end up populating with the data from Rotten Tomatoes.

<divid="home"selected="rotten tomatoes-results-output">
</div>

App Flow: Search and Results

The user clicks either Opening Movies or Top DVD Rentals. Each button fires off a different function in api.js which is responsible for making the appropriate API call. The div mentioned above is emptied, populated with a header, and then with the parsed results.

Lets take a look at the  fetchTopRentals() function in api.js is where the API call is initiated. The url to the Rotten Tomatoes method is prepared with API key concatenated. The call is made with the following statement:

varapiCall=$.get(url,function(data){fetchTopRentalsCallback(data);});

$.get is an App Framework function, similar to the GET function in jQuery. The call is my asynchronously. On success, it will call fetchTopRentalsCallback. That's the function that performs the parsing then appends the list of thumbnails and links to the DOM.

The results come back in JSON. By using the $.parseJSON() function, iterating through the results is a breeze. One of root level elements of the results object is an array named movies[].

The code to parse through this result set looks like this:

vardata=$.parseJSON(payload);
var movies = data.movies;
$.each(movies, function(index, movie) {
  // Check movie.ratings.critic_rating to see if it's 'Rotten' or 'Fresh'  // Use movie.links.alternate and movie.title for URL and film title}