Reference no: EM131059982

Someone in your team needs to sign up for an account on developer.forecast.io,the web service you will use for weather data. This is required to obtain an API key which is in turn needed to call the forecast.io JavaScript API.

You can not include the API key, just marked this place in source code, so I can place it there.

Required functionality

Launch page ("Locations List")

The app should launch to page that displays a list of saved locations that have been added by the user. This list will initially be empty. These user¬specified locations should persist between app launches, that is, be stored in the browser's local storage. A "location" consists of a nickname, a latitude and a longitude.

Each entry in the list should display the location nickname. For each location the current day's low and high temperature and condition summary (as text or icon) should also be shown. When first loading the app this information might not be available. Hence, the page should show that the weather for each entry is loading until the required data is returned from the forecast API. You should use the LocationWeatherCache classtorequest weather information (see below) .

This page should display a header bar at the top with the title "Locations". This header bar should have a "+" button on the far right, which when tapped opens the Add Location page.

Tapping on any entry in the Locations List should open the Location Weather page for that location.

Add Location page

This page should have a header bar at the top with the title "Add location". It should show two text fields. The first field should allow the user to type a location. The second should allow them to enter a nickname for the location, e.g., "Home" or "Work". Aside from the text fields, this page should display a map and button titled "Add location".

The expected workflow for this page is that the user taps the location field and types in a location such as an address or suburb. As they enter characters, the app should utilise the Google Geocoding API (see "Resources" section below) to look up the GPS coordinates for that location and display the location on the map. The app should display the formatted address returned by the geocoding API as an annotation on the map. The behaviour of this page is intended to allow the user to confirm they have entered the desired location. Next, the user can optionally enter a nickname for the location. Then, if the user taps the "Add location" button the current GPS location should be added to the LocationWeatherCacheobject (the cache saved to localStorage) and the user returned to the Locations List page. If no nickname is specified by the user, the formatted address from the geocoding request should be used.

Note: If there is no valid GPS position for a given location entered by the user, then nothing should be added to the Locations List and an error can instead be shown to the user.

Location Weather page

The Location Weather page should show weather information for the selected location. The top of this page should show a header bar with the nickname for the active location. Below this the page should    include the following:
- A map displaying the active location,
- The date that the displayed weather applies to,
- A date selection slider,
- A summary of the weather for the particular date, and
- A "Remove this location" button

The date should be displayed in the YYYY;¬MM¬DD format. We have provided a new method for the Date class called simpleDateString()which returns a String.

The slider should be able to be dragged to change the displayed date, and the displayed weather. The slider should have 30 positions, representing the current day and the previous 29 days. The slider position should initially be set to the far right, i.e., the current day. The change to the selected date should happen in response to the user dragging the slider control, rather than waiting until the user has let the tool go.

The map should be centred on the selected location and highlight it in some way.
. The weather information displayed for the selected date and location should include:
- A human¬readable text summary of current conditions, e.g., "Partly Cloudy"
- Minimum temperature in °C
- Maximum temperature in °C
- Current humidity in %
- Current wind speed in km/h

Like the Locations List, this page might need to display weather information which is not yet available. In this case it should show that the weather information is loading and this information should be automatically filled in once the info has been returned by the forecast.io A P I . You should use the LocationWeatherCache class to request weather information (see below)

If the user taps the "Remove this location" button then location being viewed should be removed from the LocationWeatherCache(the cache saved to local storage) and the user should be returned to the Locations List page.

LocationWeatherCache class

This file locationweatherCache.jsin the skeleton contains a LocationWeatherCache class. This class includes method names but the methods themselves still need to be filled in. This file should not be dependant on any of the rest of the code of the app. This JavaScript file will be included in each of the three web pages of the app.

The purpose of the LocationWeatherCacheclass is to provide a simple way to access weather information (current day or historic) for particular locations. This class should act as a cache for the forecast.io API. That is, when the app requests the weather for a particular location and date, the app should check the cache and return this information if it is stored locally by the class, otherwise it should request this data from the API, and then store the result in in the class and notify the app via a callback when it receives the information.

- This class should have a private attribute called locations, an array that stores a list of location objects. This array should initially be empty.

- Each location object should have a nickname,latitude,longitudeand forecasts properties. The forecastsproperty should contain an object. This forecasts object should contain a property for each cached weather forecast. The property name should be a combination of the location and date, of the form "{lat},{lng},{date}", e.g., "46.0617697,12.078846800000065,2016¬04¬01T12:00:00" (the same format used for the forecast.io request). The property value should be the daily weather forecast object returned by forecast.io. Hint: the hasOwnProperty() method can be used to check if the forecasts object has weather for a particular location and date.

- TheLocationWeather class instances should be persistent,i.e,they should be preserved between app launches. This means storing them to Local Storage when their data changes. Hence you need to implement a toJSON()method that writes out the private attributes of the class by returning a version of the class with only public attributes. You should also implement an initialiseFromJSON()method which sets the private attributes for a class instance, allowing the LocalWeatherclass instances to be recreated when the app is reopened.

- The cache class should include a getWeatherAtIndexForDate()method. This method takes three arguments: the index of the location, a JavaScript Date object representing the requested date, and a callback function to be called when the weather is returned (see comments in the locationWeatherCache.jsfile).

- The time component of the date can be ignored. The app cares only about dates at daily granularity. We provide you a Date.forecastDateString()method which given a date returns a string formatted exactly for use with the forecast.io.

- This method should check if the weather data point for this date is already in the forecasts array . If so , it should call the callback function and pass the corresponding weather data as an argument.

- If the class does not have the weather data locally, it should call the forecast.io API using JSONP. When the request returns, the ‘daily' weather data point stored be stored into the forecasts array and also returned to the callback function. Note, we don't want to use the hourly forecasts returned by the forecast.io API,

- By default, the forecast.io API returns a heap of data we don't need. It is just the data point in the dailyproperty that we are interested in. Hence the minutely,hourlyand currently data blocks should be ignored, which can be done by including the excludefield in the API call query string.

- The user may specify different callback functions to be invoked for different location weather requests. In order to cope with this possibility it is necessary for you to temporarily store these callback function references in the callbacks private attribute of the class. These are only useful until the query has completed, and don't need to be serialised to local storage.

The locationWeatherCache.js file should contain a loadLocations() function. When invoked, this function should create a single LocationWeatherCache class instance in a global variable called LocationWeatherCache. It should then check local storage for an existing cache object. If there is one it should initialise the locationWeatherCache object from the serialised version in local storage. This function should be called at the end of the locationWeatherCache.js file. Since this file is included in all pages of the app, this ensures that the cache will be loaded from local storage and always be available.

The locationWeatherCache.jsfile should contain a saveLocations() function. When invoked, this function should serialise the locationWeatherCache object to local storage.

Extension: Current Location

This functionality is optional. Without completing it the maximum code mark is 9/10

For the Locations List, the first entry in this list should be "Current location", followed by any other locations the user has added. The "Current Location" need not have a weather summary shown for it on the Locations List page.

When the user taps on the Current location list entry the app should open the View Weather page. In this case, the View Location page should show the text "Current location" as the title in the header bar. Additionally the page should initialise the GeoLocation API in order to watch the user's position via the device GPS. As the app receives location updates from this API it should display the current position and location accuracy on the map. It should also display the weather at this location for the current day, updating as the GPS location changes.

Attachment:- WEBD.zip