CS275 Web and Mobile App Development



project 2

As with this and all future projects, you must work individually

Objective:

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

Overview

The Open Weather Map web service, introduced earlier in the term, can provide weather information (forecasts, conditions, periodic 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

https://openweathermap.org/api

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 API key and zip code

2. Click on a button to launch a request for the most recent 5 day / 3 hour forecasts for the location specified in the zip code. That will produce an array of 5 * 8 = 40 forecasts.

3. Display this list of forecasts for the entire set of data. A single forecast line should include the following information in “English” units (eg. temperature in degrees F, etc.)

Date and Time (“dt_txt”)   Weather description (“weather.description”)    Temp (deg. F)

project 2 Activities

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

https://openweathermap.org/price

2. Create the base HTML code, including text fields (to enter the key and zip code), a button (to launch the 3 day / 3 hour forecast script) and an empty div to eventually display the list of 3 hour forecast line items.

3. Create JavaScript code to:

a. Extract the key and zip code from their respective  text fields.

b. Create a url request to obtain the 5 day / 3 hour data. The following url will accomplish this:

https://api.openweathermap.org/data/2.5/forecast?zip={your zip code}&appid={yourkey}

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.

c. Use jQuery’s Ajax feature to launch the request.

d. Parse the JSON response to obtain the 40 forecasts from the JSON response

e. Finally, parse the JSON response to obtain and display (as a table) the list of 3 hour forecasts across the 5 day period as specified in the Overview section of this document.

4. Mobilize!

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

b. 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.

NOTE:  Moving forward (including this project) you are responsible for identifying, addressing, and demonstrating different use cases.

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_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

· 5pts Website has correct elements in it

· 5pts Website uses jQuery Mobile style

· 5pts Website can get zip code and application key

· 10 pts Website gets and displays hourly forecast correct

· 5pts Website handles invalid Openweathermap code properly

· 10pts Video demonstrates understanding of code and explores different use cases.

· 5 points : quality of internal documentation and code style

· 5 points : README file

http://jsonprettyprint.com