Assignment: Seminole Movie Connection

Size: px

Start display at page:

Download "Assignment: Seminole Movie Connection"

Elmer Pierce
5 years ago
Views:

1 Assignment: Seminole Movie Connection Assignment Objectives: Building an application using an Application Programming Interface (API) Parse JSON data from an HTTP response message Use Ajax methods and properties that allow the Client to send an HTTP Request and receive back an HTTP Response Assignment Description: In this exercise, you will be building an application that displays information about movies. This application is very similar to the Internet Movie Database (IMDb) online database, which displays information related to films, television programs and video games, including cast, production crew, fictional characters, biographies, plot summaries, trivia, and reviews. You will use jquery and AJAX methods to parse JSON data returned from a 3 rd party server, TheMovieDB (TMDB) API, to access their movie data. Figure 1, is a preview of the Seminole Movie Connection you will create. Your application may look slightly different depending on the movie data you add to your movie application. Figure 1: Seminole Movie Connection Example

Background: An application-programming interface (API) is a set of programming instructions and standards for accessing a Web-based software application or Web tool.

2 Background: An application-programming interface (API) is a set of programming instructions and standards for accessing a Web-based software application or Web tool. A software company, like Google, releases its API to the public so that other software developers can design products that are powered by its service. For example, Amazon.com released its API so that Web site developers could more easily access Amazon's product information. Using the Amazon API, a third party Web site can post direct links to Amazon products with updated prices and an option to "buy now." APIs are becoming a crucial part of the Web and Web Development. JSON-based APIs are also very prevalent on the Web now. Websites are readily allowing developers to access their data, in fact, encouraging it. Websites such as IMDB, OMDb, TMDb, Google, Twitter, and many more allow you to build entirely separate applications based on the data they ve spent years accumulating. This openness and receptiveness are fostering an intertwined network of users and their corresponding actions. Developers can make HTTP requests by including method calls in the code of their applications. The syntax needed to use the 3 rd party API is described in the documentation made available by the API providers. By providing a means for requesting program services, an API is said to grant access to or open an application. Building an application with no APIs, says Josh Walker, an analyst at Forrester Research Inc. in Cambridge, Mass., "is basically like building a house with no doors. The API for all computing purposes is how you open the blinds and the doors and exchange information." What is AJAX? AJAX is an acronym for Asynchronous JavaScript and XML and this technology will allow us to load data from the server without a browser page refresh (see Figure 2). This technique allows for creating better, faster, and more interactive web applications with the help of XML/JSON, HTML, CSS, and JavaScript. It uses XHTML for content, CSS for presentation, along with the Document Object Model (DOM) and JavaScript for dynamic content display. Applications using AJAX are considered data-driven as opposed to page-driven. jquery provides a rich set of AJAX methods to develop next generation web applications. (See tutorial below to learn more.) Figure 1: AJAX Technology What is JSON? JSON or JavaScript Object Notation and XML is a lightweight text-based open standard designed for humanreadable data interchange. It is an extension of the JavaScript scripting language. It is useful and primarily used to transmit data between a server and web applications. Web services and APIs use JSON format to provide public data. (See tutorial below to learn more.)

3 A lot of services we use every day have JSON-based APIs: Twitter, Facebook and Flickr all send back data (HTTP response) in JSON format. In this project, we will look at loading JSON data using an HTTP GET request. Visit the following site to view 10 Examples of JSON Files: Below is the JSON response message viewed in Google Chrome s developer Console (using the Network tab) for the movie Big using TMDB API where the HTTP response returns JSON data: Review the following tutorials: jquery Ajax Tutorial: o $.ajax() Method Ajax Tutorial: o Ajax Overview o Ajax Quick Guide JSON Tutorials: o JSON with Ajax o JSON Quick Guide

4 Step 1: Register for TheMovieDB (TMDB) Account 1. In your browser, navigate to and follow the instructions to sign up for TMDB account. IMPORTANT: Please go to the account you used to sign up and verify your account by clicking on the verification link provided within the Log in to your TMDB account using the following:

Step 2: Register for TheMovieDB (TMDB) API Key An application programming interface key (API key) is a code passed in by computer programs calling an API to identify the calling program, its

5 Step 2: Register for TheMovieDB (TMDB) API Key An application programming interface key (API key) is a code passed in by computer programs calling an API to identify the calling program, its developer, or its user to the Web site. API keys are used to track and control how the API is being used, for example to prevent malicious use or abuse of the API (as defined perhaps by terms of service). The API key often acts as both a unique identifier and a secret token for authentication, and will generally have a set of access rights on the API associated with it. View the video below to learn more about API s: Click on the video above or visit:

org/3 3. Read the Introduction and follow the instructions to register for an API key.

6 Steps to obtain a TMDB API Key: 1. Log in to your TMBD account. 2. Upon successful log in, go to the Get Started page by doing the following or use the following link: 3. Read the Introduction and follow the instructions to register for an API key. Make sure when you Create an API Key that you select the Developer as your type. 4. You will have to complete a form to Request an API Key. Enter the following form values for the following fields and complete the rest of the form with your personal information.

Now that you have successfully added your TMDB API Key to the code, let s read and learn more about the TMDB API by reading the API Documentation. API Overview: https://www.themoviedb.

7 Step 3: Add Your TMDB API Key to Movie.js file 1. Open the Movie.js file in Cloud9. 2. Please read through the file for understanding. Now, complete TASK #1 by editing Line: 40 by coping your TMDB API Key you created in the previous step. (see below) **Don t forget to save the file after editing!!** 3. Now that you have successfully added your TMDB API Key to the code, let s read and learn more about the TMDB API by reading the API Documentation. API Overview: o Make sure you read the description for the /search option under Finding Data. We will be using this feature in our application to retrieve data from the TMDB API server. API Documentation: Step 4: Review & Modify the index.html file. 1. Open the index.html file in Cloud9. 2. Modify comments to include your name, today s date, and all information below where indicated in the index.html file: <! > Program Name: Seminole Movie Connection using TheMovieDB API Author: Date: Filename: index.html

3. Preview the index.html by selecting the Preview button in Cloud9.

Only the Movie Title and the Movie Poster are displayed initially. You will be adding additional movie information in later steps.** 4. Review the index.

You will be examining how the application sends an HTTP Request (Movie Title) to the server and the server sends back an HTTP Response (Movie Information). The index.

8 3. Preview the index.html by selecting the Preview button in Cloud9. View the page in a new tab outside of Cloud9 by selecting the following icon: **Notice that the application DOES respond when the user enters a movie title and clicks the Load Movie button. Only the Movie Title and the Movie Poster are displayed initially. You will be adding additional movie information in later steps.** 4. Review the index.html document to familiarize yourself with its content. This application allows the user to enter a movie title, run it through the TMDB API, and return movie information. You will be examining how the application sends an HTTP Request (Movie Title) to the server and the server sends back an HTTP Response (Movie Information). The index.html file uses a JavaScript and Bootstrap. Several pre-built styles and functionality from the Bootstrap framework are included to design the front-end to create a responsive application. For example: Jumbotron - displaying the application title Seminole Movie Connection Typography - providing custom classes and Glyphicon icons to make the site easier on the eyes for example: Load Movie button List Group - displays movie information retrieved from the server 5. In the index.html file, examine the segment of code displayed below. The code segment displays the input field and the button the user will use to request movie information. It uses Bootstrap features. 6. In the index.html file, examine the next segment of code displayed below. The code segment below establishes the placeholders for ONLY TWO movie information items that were chosen to display from the HTTP Response sent to the client from the server: Title and the Poster image. If you recall, the server responds with more than just two movie information items. The initial application will pull out ONLY a few items to display on the webpage. You will add additional movie information to the application in a LATER STEP!

9 Each element/node in the index.html DOM has an id, which is associated with the name in the name/value pair from the JSON HTTP response data retrieved from the TMDB API server, located in Movie.js. For example: Movie Title element that will display the movie title requested by the user (client) o DOM element: id= original_title o JSON name: json.results[0].original_title Movie Plot element that will display the movie plot requested by the user (client) o DOM element: id= overview o JSON name: json.results[0].overview Movie Release Date element that will display the movie release date requested by the user (client) o DOM element: id= release_date o JSON name: json.results[0].release_date Popularity Rating element that will display the movie popularity rating requested by the user (client) o DOM element: id= popularity o JSON name: json.results[0].popularity Movie Language element that will display the movie language requested by the user (client) o DOM element: id= original_language o JSON name: json.results[0].original language Movie Poster element that will display the movie poster requested by the user (client) o DOM element: id= poster_path o JSON name: json.results[0].poster_path 7. Go to TASKS 2-4 in the index.html file and do the following: Read the description for the code in that section. Follow the instructions stated, which will require you to create additional rows in the application that will eventually display additional movie information: Movie Plot, Release Date, Popularity Rating, and Movie Language. Step 5: Review & Modify the Movie.js file. **Our application will use the /Search/Movie option. Please review the TMDB API Documentation ( for the /Search/Movie to view the types of data the server will return to the client as an HTTP Response message when the client sends to the server an HTTP Request message. The request and response messages are demonstrated below. **

10 /Search/Movie HTTP Request options : **Our application will send to the TMDB server values for the api_key and query parameters.** Example URL sent to server by the client if the movie name is Big : Request URL: /Search/Movie HTTP Response:

11 8. In the Movie.js file, examine the code. The code segment below uses the jquery $.ajax() method. AJAX is the art of exchanging data with a server, and updates part of the web page - without reloading the whole page. This application uses the $.ajax() method. This method performs an asynchronous HTTP request. The $.ajax() function is a behind the scene function using a preset configuration. The signatures of this function are shown below: $.ajax() (url[, options]) or $.ajax() ([options]). The url parameter is a string containing the URL you want to reach with the Ajax call, while options is an object literal containing the configuration for the Ajax request. The code segment below uses the jquery $.ajax() method. In the snippet above, the application employed a few optional parameters of the $.ajax() method. Here is a brief explanation of the options used: url - A string containing the URL to which the request is sent. o (ex. This URL is required and is given to developers by the API providers in the documentation for the service.) data - The data to send to the server when performing the AJAX request. o For example, the TheMovieDB API requires the query parameter to be included, which is assigned to the name of the movie the user is searching for. The query parameter will be the name of the movie the user enters into the textfield. Code snippet: var query = "query=" + $("#moviename").val(); Step 6: Add Additional Movie Content to the Seminole Movie Connection Application Description: This assignment requires that you include additional information about the movie to be displayed in the movie application. Visit the TheMovieDB API site entitled: Search & Query For Details to view additional parameters that can be displayed from the HTTP Response. An example is depicted below for the movie Big using the TMDB API

12 where the HTTP response returns JSON-formatted data. Below, the KEYs or NAMES are in purple and the VALUEs are located AFTER the colon in the key/value JSON pairs. The JSON-formatted response message as viewed in Google Chrome s developer Console (using the Network tab): Steps to add additional movie content to the web application: 1. In the Movie.js file in Cloud9, go to TASKS 6-9 and add the FOUR additional movie items to the web application interface by adding your code. HINTS: Use the code already given to assist in completing the remaining steps. The given sections are for the Movie Title and the Movie Poster. In the.done() method, located in the Movie.js the following statement is included to retrieve the Movie Title from the response and place the response on the HTML document where the placeholder or id= original_title is located. The additional code is highlighted below:

Click the Network tab in the JavaScript Console. 3. Select the last entry "?&query=big" 4.

13 Steps to use the JavaScript Console to troubleshoot your Web Application (if needed!): 1. Preview the index.html by selecting the Preview button in Cloud9. View the page in a new tab outside of Cloud9 by selecting the following icon: 2. Click the Network tab in the JavaScript Console. 3. Select the last entry "?&query=big" 4. Select and review the Preview or Response tab to determine if you are properly retrieving the HTTP Response from the TMDB API Web Service. The below figure demonstrates the HTTP Response the web service sent back from your request:

14 Below is an example of the Seminole Movie Connection application after all four items are added, if the movie is Big!

Homework 8: Ajax, JSON and Responsive Design Travel and Entertainment Search (Bootstrap/Angular/AJAX/JSON/jQuery /Cloud Exercise)

Homework 8: Ajax, JSON and Responsive Design Travel and Entertainment Search (Bootstrap/Angular/AJAX/JSON/jQuery /Cloud Exercise) 1. Objectives Get familiar with the AJAX and JSON technologies Use a combination