Movies API

Everyone loves the movies. In this tutorial we’ll create an application that allows you to retrieve information about any movie and have it at your fingertips. This is an HTML5 and Javascript based app that will run on any browser or, with a tool like PhoneGap, run on any mobile device.

All you need to get started is a text editor like Brackets (download for free at www.brackets.io) and a web browser to get started. We recommend using Chrome for development but testing on multiple browsers.

The Step-by-Step Instructions

1) Prepare by opening your text editor and typing in the basic document structure. The basic document structure is the HTML5 scaffolding common to almost all applications.

2) We’re going to include the jQuery Mobile libraries to appropriately style our app for mobile. jQuery Mobile will provide larger buttons and text entry areas that work better for mobile users. We’ll be adding some style information of our own as well. Visit jquerymobile.com and click the download button.

jQuery

Towards the center of the page you’ll see three lines of code to download the necessary jQuery mobile code from a CDN (content delivery network).

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css” />
<script src=”http://code.jquery.com/jquery-1.9.1.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js”></script>

Paste these into the <head> element of your document. This will attached the necessary jQuery to your application.

3) We’re going to have a very simple interface for our application. The user will type the name of a movie they want to look up into a text field. A button will start the action— The movie name will be sent to the OMDb web service. We’ll also use a number of placeholders to hold the results that are returned from OMDb.

We’ll use <div> elements for those placeholders. They’ll be empty at first. We’ll populate the divs with content when we parse the data returned from the OMDb service.

Enter the following code in the <body> element of your HTML:

You can determine the complete structure of our application from this code snippet. I frequently put the entire application interface in a container div. This makes styling a bit easier as the container div becomes the parent instead of the <body> element.

4) Test in your browser and make sure your application looks similar to the browser on the left side of following screenshot. If you see errors, or the appearance varies greatly, review your code in your text editor. Make any necessary corrections and test again.

UI

5) When the user presses the button we need to contact the web service. The web service is contacted via a URL with the parameters attached to the URL as a query string. The OMDb service is documented at OMDbAPI.com. Visit the site and read the documentation for this easy-to-use API.

OMDb API

6) Since we’re just collecting the name of the movie from the user and we want a longer plot description our URL will look something like this:

http://www.omdbapi.com/?t=Silence+of+the+Lambs&y=&plot=full&r=json

The final parameter will provide us with JSON (as opposed to XML) results. The “t” parameter is for the title of the movie which we’ll fill in dynamically.

Type or copy this URL into a browser and you’ll see the JSON returned.

JSON

Obviously this JSON is a little hard to read in this format. You can copy the JSON into a JSON formatter like the one located at http://jsonviewer.stack.hu/ to view the JSON code in a more readable format.

7) Since the button triggers the whole web service operation, let’s set up the button to call a function called getMovieInfo().

Add the following code to the <head> element of your application code.

This code retrieves the button element (using the id attribute) and adds a click listener to it. When the click listener is activated with a mouse click or tap on a mobile device the function getMovieInfo is run. We’ve also declared a global variable xmlhttp, which will be the object that actually communicates with the OMDb server.

8) Below the function we just wrote in the <script> element add the following code:

This code initiates the exchange of data with the OMDb server. First the user’s entry into the text field is retrieved and stored in a variable declared as title. Using that title and other parameters the full URL is constructed in a string variable called url. Next, the XMLHttpRequest() object is instantiated and readied for use. A callback function called processdata will handle what is returned from the server. Finally, we run the open() and send() methods to initiate the communication with the OBDb server.

9) Let’s test the return from the server and see if we’re getting what we expect. Create the processData() function as follows. You can insert it right after the getMovieInfo() function in your <script> element.

10) Save your code and open it in the browser. Type the name of a movie into the text field and open your Developer Tools. If you open the Console tab and click the button on your app’s interface you should see the JSON appear in the console in Developer Tools.

Dev Tools

If you’re not receiving the JSON in the developer’s tools, review your code and clean up any mistakes that you have made.

11) The previous step simply provided a text dump of the JSON object. We can actually see how the browser parses the JSON object in Developer Tools as well. Before the console.log() command in your code add the following line of code:

This line will convert the String into a parsable JSON object. Now repeat the steps you used to test the application. If you click on the small triangle in the console you’ll see the parsed object appear.

Parsed Dev Tools

12) Now let’s complete the application by using our parsed JSON to populate the divs in the body of our document. Add the following code to the process data function:

Be especially careful typing this code— It’s syntactically dense and a small mistake might be very hard to locate.

The first section of new code simply graphs the title, year, actors, etc and places the values in local variables. Note that the movieJSON properties come right from the JSON itself. The second section of the code takes the information from the JSON, now stored in local variables and places it into the empty divs. For the movie poster the src attribute of the element is used.

Test your application one more time to find and correct any errors.

13) Once your application is functional, add the following <style> element in the <head> element of your document. We’re making some slight adjustments to the default jQuery mobile presentation.

Test one final time and compare your results to the screenshot below. Enjoy learning about some of your favorite movies.

Complete Application

2 thoughts on “HTML5 App Tutorial: At the Movies

Leave a Reply

Your email address will not be published. Required fields are marked *