Assignment 2 Solution

Description

Objective:

The purpose of this assignment is learn how to utilize jQuery and Ajax to develop a web page to invoke the Weather Wunderground web service and parse it’s JSON response.

Overview

The Weather Wunderground web service, introduced earlier in the term, can provide weather information (forecasts, conditions, hourly readings, physical location of the client, etc.) from URL based requests to a variety of data endpoints. The API for this application may be accessed at

http://www.wunderground.com

As noted in the API documentation, requests can be make in the form of specially coded URLs, which include the request parameters, to specific endpoints.

You are asked to develop a web page that:

1. Allows a user to enter his/her wunderground key

2. Click on a button to launch a request for the most recent hourly forecasts for the location where the client resides

a. Read the Assignment 2 Activities section to see how you can find your current location.

3. Display this list of forecasts along with their associated weather symbols in the web page

Assignment 2 Activities

1. If you have not already done so, sign up for a key at the Weather Wunderground website:

http://www.wunderground.com/weather/api

2. Create the base HTML code, including a text field (to enter the key), a button (to launch the hourly forecast script) and an empty div to eventually display the list of hourly forecast line items.

3. Create JavaScript code to:

   1. Extract the key from the text field.

   2. Create a url request to obtain the location (zip code will suffice) of the client. The following url will accomplish this:

http://api.wunderground.com/api/your_key/geolookup/q/autoip.json Note: At this point, you may want to manually run this request from the browser’s address field in order to discover the JSON response structure needed to navigate to the zip code.

1. 3. Use jQuery’s Ajax feature to launch the request.

   4. Parse the JSON response to obtain the zip code.

   5. Incorporate the obtained zip code into the following url to create the hourly forecast request:

http://api.wunderground.com/api/your_key/hourly/q/your_Zip_Code.json As in the step above, manually run this request to determine the JSON response structure.

1. 6. Again, use jQuery’s Ajax feature to launch this request.

   7. Finally, parse the JSON response to obtain and display the list of hourly forecast readings along with their associated icons.

2. Mobilize!

   1. Use jQuery Mobile to add a header and footer to your page that are fixed at the top and bottom respectively.

1. 2. Use jQuery Mobile’s table data-type and ui-responsive CSS to make your table resize properly for mobile devices.

Debugging Hints:

1. Most browsers allow you to right-click somewhere on a webpage and choose something like “Inspect”. This will bring up a window that allows you to see errors in Javascript among other things.

2. JavaScript has a function alert(object) that pops open a window with the object printed out. This can be useful for debugging as well.

3. You could also make a div to change the innerHTML of for debugging purposes.

What to submit

For submission you are to submit (as a single zip file):

• A screen cast video to Blackboard detailing a thorough code review of your program along with a demo execution of the application.

• Your source code, well internally documented. Your main html file should have the filename <drexelID>_HW2.html

• README file on how to run your code.

Grading (50) Points

• 40 points : program correctness and along with adherence to the stated requirements

• 5 points : quality of internal documentation and code style

• 5 points : README file