1.  Objectives

●  Get experience with the Python programming language and Flask framework.

●   Get experience with the Google API, Tomorrow.io API and HighCharts Service.

●  Get experience creating web pages using HTML, CSS, JavaScript, DOM, JSON format and XMLHttpRequest object.

●   Get experience using JSON parsers in Python and JavaScript.

●   Getting hands-on experience in GCP, AWS or Azure.

1.1. Cloud Exercise

The backend of this homework must be implemented in the cloud on Google Cloud App Engine, AWS or Azure, using Python.

●   SeeCloud Setup (Python)for installation of components on GCP, AWS or Azure.

●   See the hints in section 3; a lot of reference material is provided to you.

●   For Python and Flask kick-start, please refer to the Lecture slides on the class website.

●   You must refer to the grading guidelines, the video, the specs, and Piazza. Styling will be graded, and the point’s breakup is mentioned in the grading guidelines.

2.Description

In this exercise, you are asked to create a webpage that allows you to search for weather

information using the Tomorrow.io API, and the results will be displayed in a card and tabular format. The page will also provide day’s weather details.

2.1. Description of the Search Form

The user first opens a web page (for example,weather.html,or any valid web page name). You should use the ipinfo.io API (See hint 3.3) to fetch the user’s geolocation if the location checkbox is checked else the user must enter a Street, City and State to search. An example is shown in Figure 1.

If theCheck herecheckbox is checked then all the fields i.e., Street, City and State should reset text and disable the fields.

The search form has two buttons:

●   SUBMITbutton: Selecting this button performs a search of the given location, and if   location is found it returns weather information. An example of valid input is shown in Figure 2. Once the user has provided valid input, your client JavaScript should send a   request to your web server Python script with the form inputs. You must use GET to transfer the form data to your web server (do not use POST, as you would be unable to provide a sample link to your cloud services). A Python script using Flask will retrieve the form inputs and send it to the Tomorrow.io API weather information service. You   need to use theFlaskPython framework to make all the API calls.

If the user clicks on the SUBMIT button without providing a value in the “Street”, “City” and “State” field or checking the location checkbox, you should show an error “tooltip”    that indicates which field is missing. Examples are shown in Figure 2a, 2b and 2c.

Using XMLHttpRequest or any other JavaScript calls for anything other than  calling your own “cloud” backend will lead to a 4-point penalty. Do not call the Tomorrow.io API directly from JavaScript.

Define routing endpoints and make your API call from the Python backend. The recommended tutorial forFlaskand more importantly, routing, can be found at the following link: https://flask.palletsprojects.com/en/1.1.x/

●   CLEARbutton: This button must clear the result area (below the search area) and set all fields to the default values in the search area. The CLEAR operation must be done using a JavaScript function.

Figure 2:An Example of a Valid Search

Figure 2:An Example of an Invalid Search

2.2 Displaying WeatherResults

In this section, we outline how to use the form inputs to construct the calls to the RESTful web services to the Tomorrow.io APIservice and display the result in the web page.

The Tomorrow.io API is documented here: https://docs.tomorrow.io/reference/welcome

If the Street, City and State information is used to get weather results, your client JavaScript uses the input address to get the geocoding via Google Maps Geocoding API. The Google Maps Geocoding API is documented here: https://developers.google.com/maps/documentation/geocoding/start

The Google Maps Geocoding API expects two parameters:

●   address:The street address that you want to geocode, in the format used by the national postal service of the country concerned. Additional address elements such as business names and unit, suite or floor numbers should be avoided.

●   key:Your application's API key. This key identifies your application for purposes of quota management. (Explained in Section 3.2).

2.2.1 Geocoding

An example of an HTTP request to the Google Maps Geocoding API, when the location address is “University of Southern California, CA” is shown below:

https://maps.googleapis.com/maps/api/geocode/json?address=University+of+So uthern+California+CA&key=YOUR_API_KEY

The response includes the latitude and longitude of the address.

Figure 3shows an example of the JSON object returned in the Google Maps Geocoding API web service response.

The latitude and longitude of the address are used when constructing a RESTful web service URL to retrieve weather information. 

2.2.2. Tomorrow.io API Service

The Tomorrow.io API Retrieve TimeIines (Basic)service is documented here: https://docs.tomorrow.io/reference/get-timelines

Click thePythontab in the example, to see the format of the URL, querystring, and headers. The Tomorrow.io API Retrieve Timelinesservice expects the following parameters:

●   apikey:Your application's API key. This key identifies your application for purposes of quota management.

●   locations:Thelocation around which to retrieve weather information. Acceptable formats for location(https://docs.tomorrow.io/reference/api-formats#locations)

●  fields:The fields which you will require are the following:

○   temperature

○   temperatureApparent

○   temperatureMin

○   temperatureMax

○   windSpeed

○   windDirection

○   humidity

○   pressureSeaLevel

○   uvIndex

○   weatherCode

○   precipitationProbability

○   precipitationType

○   sunriseTime

○   sunsetTime

○   visibility

○   moonPhase

○   cloudCover

●   timesteps:The timesteps needed for the assignment are ‘1h’,’1d’ . Further, details of timesteps are documented here:https://docs.tomorrow.io/reference/weather-data- layers#timestep-availability.

●   timezone: There are various timezones available here https://docs.tomorrow.io/reference/api-formats#timezone. Use “America/Los_Angeles” .

●   units:Unit of the fields. There are two options, “imperial” and “metric” . Use “imperial” .

An example of an HTTP request to the Tomorrow.io API that searches for the nearby weather information near the University of Southern California, Los Angeles, CA is shown below:

-    Current API call

usage: Current weather card view

https://api.tomorrow.io/v4/timelines?location=[LAT,LONG]&fields=[FIELD_NAME]&time steps=current&units=[UNIT]&timezone=[TIME_ZONE]&apikey=[API_KEY]

-    Timestep = 1day API call

usage: Table Details, Detailed Summary of weather card view and Temperature Range(Min, Max) Chart.

https://api.tomorrow.io/v4/timelines?location=[LAT,LONG]&fields=[FIELD_NAME]&time

steps=1d&units=[UNIT]&timezone=[TIME_ZONE]&apikey=[API_KEY] A sample response is shown in Figure 5.

Figure 5:shows an example of the JSON response returned by the Tomorrow.io API service response.

The Python script should pass the returned JSON object to the client side or parse the returned JSON and extract useful fields and pass these fields to the client side in a JSON- formatted object. You should use JavaScript to parse the JSON object, extract theneeded fields, and display the results in a tabular format and a card view containingcurrent day’s weather information. A sample output is shown in Figure 6(a) and 6(b).

The displayed table includes five columns: Date,Status, Temp High, Temp Low,Wind Speed.

Figure 6(a):Output of Search Results

Figure 6(b):Output of Search Results

When the search result contains a record, you need to map the data extracted from the API result to render the HTML result card and table as described in Table 1 and Table 2respectively.

Table 1:Mapping the result from API into HTML card

Table 2:Mapping the result from API into HTML table

Reference for HTML Table Column “Status”: Map the weatherCode to text description and image URLs as shown inFigure 7and refer to the documentation at:

https://docs.tomorrow.io/reference/data-layers-core :

Figure 7:Map of weatherCode to respective weather description and icon URLs The raw images for the above table can be found here:

https://github.com/Tomorrow-IO-API/tomorrow-weather-codes/tree/master/V1_icons/color

Light-wind:https://www.clipartmax.com/png/middle/31-318730_cold-wind-blowing-vector- wind-blow-icon.png

Wind:https://www.clipartmax.com/png/middle/31-319198_winds-weather-symbol-vector- weather-symbol-for-wind.png

StrongWind:https://www.clipartmax.com/png/middle/2-27821_wind-clipart-forecast-icon-line- icon-weather-wind-windy-wind-clipart.png

All images are also provided in the file images.zip, which is included in the Assignment 2 on    D2L Brightspace. You are required to map the Weather Code you obtain from the api response to the summary text shown above as well as its corresponding icon.

Note: For items with more than one icon (e.g., 1100 - Mostly Clear) you can default to the

“morning” icon. On hovering, the Card should have a drop shadow. Please refer to the video for all the features and behavior to be implemented.

2.3 Displaying Detailed Summary of the Weather

In the search result table, if the user clicks on the date of a record, the page should display a detailed description of the daily weather. The request needs same parameters for API call as in 1st (output should be JSON), and the page should request the detailed information using the Tomorrow.io APIand direct to a section populated with this information, as shown in Figure 8 andFigure 9:

Figure 8:Daily Weather Details

Figure 9:Display on Arrow toggle

Below the Daily Weather Detail, there is a chart for the hourly weather. This is hidden by default. When the user clicks on the button  , the “Weather Charts” sub-section should be expanded, and when the user clicks on the button , the “Weather Charts” sub-section should be hidden (if it is open) and vice versa (see the video for the behavior).

Theexamplesubdomain in the above URLs will be replaced by your choice of subdomain from the cloud service. You may also use a different page than index.html. Files to deploy:

1. client-side files (HTML+CSS+JS)

2. server-side file (main.py), .yaml, requirements.txt

The project structure should be like the following one:

3.5 Behavior for Search Forms

When random/bogus values for the Street and City fields are entered in search form along with  any State selected, it should still work and display weather card view and table records with the weather information as shown here: 

In the Table of Assignments page, you should update theAssignment 2 linkto refer to your new initial web search page for this exercise (for example,weather.html). All your files must be hosted on Google Cloud, AWS or Azure cloud service. An additional link should be updated in the Table of Assignments, hyperlinking directly to the back-end code, with a sample query.