COMP3322B Modern Technologies on World Wide Web Assignment Two
Total 10 points
Deadline: Mar 29, 2021 23:59
Overview
You are going to design and develop a Web app that displays the current weather condition of Hong Kong together with (1) temperature, rainfall, and air quality data of your current location, (2) temperature data of various districts in Hong Kong, and (3) 9-day weather forecast of Hong Kong. Your program retrieves data from various Open Data sources via the corresponding APIs. The Web app should be nicely rendered on mobile platforms and desktop computers.
Objectives
1. A learning activity to support ILO 1 and ILO 2.
2. To learn how to make use of Open Data.
3. To practice using JavaScript to (1) build a Web page from scratch, (2) carry out AJAX
communication for retrieving Open Data, and (3) create dynamic contents.
4. To practice using CSS styling to design responsive Web application.
Open Data
We are going to make use of the following Open Data datasets for building our Web App.
HKO Current Weather Report – provides current weather report of Hong Kong and is updated hourly.
Website: https://data.gov.hk/en-data/dataset/hk-hko-rss-current-weather-report
API: https://data.weather.gov.hk/weatherAPI/opendata/weather.php?dataType=rhrread&lang=en Documentation: https://data.weather.gov.hk/weatherAPI/doc/HKO_Open_Data_API_Documentation.pdf
This dataset consists of:
• rainfall data of various districts
• current weather icon
• UV index
• update time
• warning message
• temperature data of various locations
• humidity
• others: lighting data, rainstorm reminder, special weather tips, message of tropical cyclone
position, etc.
HKO 9-day Weather Forecast – provides a 9-day weather forecast of Hong Kong and is updated twice daily.
Website: https://data.gov.hk/en-data/dataset/hk-hko-rss-9-day-weather-forecast
API: https://data.weather.gov.hk/weatherAPI/opendata/weather.php?dataType=fnd&lang=en Documentation: https://data.weather.gov.hk/weatherAPI/doc/HKO_Open_Data_API_Documentation.pdf
This dataset consists of:
• weather forecast data
• others: general situation, sea temperature, and soil temperature.
OGCIO Weather Station Information – provides basic information of HKO weather stations and is more-or-less static.
Website: https://data.gov.hk/en-data/dataset/hk-ogcio-da_div_02-city-dashboard-weather- station
API: https://ogciopsi.blob.core.windows.net/dataset/weather-station/weather-station-info.json Documentation: https://ogciopsi.blob.core.windows.net/dataset/weather-station/weather- station-citydashboard-dataspec.pdf
This dataset consists of an array of HKO weather stations; each station consists of :
• station name in English
• station code
• latitude and longitude values of that station
• others
OGCIO Air Quality Health Index of Individual Air Quality Monitoring Stations – provides current Air Quality Health Index (AQHI) of individual Air Quality Monitoring stations provided by Environmental Protection Department. The dataset is updated hourly.
Website: https://data.gov.hk/en-data/dataset/hk-ogcio-da_div_02-city-dashboard- aqhi/resource/7b81f922-5c15-4f79-b0c7-9018253a2e97
API: https://dashboard.data.gov.hk/api/aqhi-individual?format=json
This dataset consists of an array of air quality data of different monitoring stations; each station consists of:
• station’s name
• AQHI
• health risk level
• publish date
Air Quality Monitoring Station Information – provides the latitude and longitude coordinates of all general stations and roadside stations.
The dataset is prepared by Dr. Anthony Tam using the information provided by the Environmental Protection Department and the Nominatim search engine for OpenStreetMap.
API: aqhi-station-info.json
This dataset consists of an array of air quality monitoring stations; each station consists of:
• station’s location
• latitude and longitude values of that station
The Reverse Geocoding API is provided by the Nominatim search engine for OpenStreetMap. Website: https://nominatim.org/release-docs/develop/api/Reverse/
API: https://nominatim.openstreetmap.org/reverse?format=json&lat=
For example, to get the address information of HKU Main Building (lat: 22.28408, lon: 114.13790), we use this API query:
https://nominatim.openstreetmap.org/reverse?format=json&lat=22.28408&lon=114.13790&zo om=18&addressdetails=1
We obtain the following data:
Requirements
▪ Retrieve all Open Data datasets using AJAX XHR object or fetch().
▪ Extract required data from the Current Weather Report and 9-day Weather Forecast report
Current weather
Current Weather Report API (WR)
Current weather icon
WR.icon[0] //show the first one
Current temperature
WR.temperature.data[1].value //Hong Kong Observatory
Current humidity
WR.humidity.data[0].value //show the first one
Current rainfall
WR.rainfall.data[13].max //YauTsimMong
Current UV index
WR.uvindex.data[0].value //could be missing //show the first one
Current warning
WR.warningMessage[ ] //could be missing //show the all warning messages
Last update
WR.updateTime
District Temperatures
WR.temperature.data[0..N] //N could be changing from time to time
Temp. of each district
WR.temperature.data[i].place, WR.temperature.data[i].value
Weather forecast
9-day Weather Forecast API (WF)
9-Day Forecast
WF.weatherForecast[0..8]
Forecast icon
WF.weatherForecast[i].ForecastIcon
Forecast date
WF.weatherForecast[i].forecastDate
Forecast week
WF.weatherForecast[i].week
Forecast temperatures
WF.weatherForecast[i].forecastMintemp, WF.weatherForecast[i].forecastMaxtemp
Forecast humidity
WF.weatherForecast[i].forecastminrh, WF.weatherForecast[i].forecastmaxrh
Weather Icons list – https://www.hko.gov.hk/textonly/v2/explain/wxicon_e.htm You can get any weather icon via the following path, e.g. icon no. 63 https://www.hko.gov.hk/images/HKOWxIconOutline/pic63.png
▪ Our Weather Web App consists of a title and four blocks of information. Here is the screenshot of a recommended implementation.
The app should have
1. A header block that shows current HK weather condition – the data includes a weather icon,
the temperature value of HKO, the humidity value of HKO, the rainfall value of Yau Tsim Mong district, the UVindex level of King’s Park (if present), warning message(s) (if present), and last update time of the HKO Current Weather report. If present of the warning message(s), display a button on the bottom left corner, which allows the user to toggle between showing or hiding the warning message(s).
2. A mydata block that shows the weather and air quality information of your current location – the data includes your current district and suburb, the temperature of a nearby weather station, the rainfall value of your district, and the AQHI & health risk level of a nearby air quality monitoring station.
3. A temperature block that allows the user to select a target location for getting the temperature data of that location from the HKO Current Weather report. To make it easier for the user to select the target location, order the dropdown list (or whatever mechanism) in alphabetical order of the locations.
4. A 9-day weather forecast block that shows all 9 days’ forecast data retrieved from the HKO 9-day Weather Forecast report. For showing the 9-day forecast, the app should show the predicted data of each forecast date: weather icon, day and date, temperature range, and humidity range. The data is arranged in chronological order.
Here are some example screenshots of the Web app running on the mobile device and desktop device.
Figure 1 This view shows the Web app in a mobile setting with UVindex and Warning button.
Figure 2 This view shows the Web app in a mobile setting with the warning message.
Figure 3 This view shows the bottom half of the Web app in a mobile setting.
Figure 4 This view shows the Web app in a desktop setting with the warning message.
▪ For the Header, Temperature, and Forecast blocks, the displayed data are from either the HKO Current Weather report or HKO 9-day Weather Forecast report. However, for the MyData block, we need to make use of the following additional resources:
• HTML5 Geolocation API to get the geographical position (latitude and longitude coordinates) of the device.
• Reverse Geocoding API provided by the Nominatim search engine for OpenStreetMap to obtain the address information (District and Suburb) of a geographical position (returned by the device).
Not all returned address information has the suburb field or city_district field. Use the following logic to obtain the information:
if has suburb field return suburb
else if has borough field return borough as suburb
else if has town field return town as suburb
else
return ‘Unknown’
if has city_district field
return city_district as district
else if has county field
return county field as district
else
return ‘Unknown’
• Use the returned district information, we retrieve the rainfall data of your district from the HKO Current Weather report.
• To get the temperature data and AQHI data of your location, we make use of your current position data to find the nearby weather station and air quality monitoring station. We can base on the ‘Equirectangular approximation’ formula to calculate the approximate distance between your current position with a weather/air quality station. You can find more information at https://www.movable- type.co.uk/scripts/latlong.html#equirectangular. And here is the JavaScript excerpted from this Website:
const x = (λ2-λ1) * Math.cos((φ1+φ2)/2); const y = (φ2-φ1);
const d = Math.sqrt(x*x + y*y) * R;
where φ is latitude, λ is longitude, R is earth’s radius (mean radius = 6,371km); we must convert the latitude and longitude coordinates to radians before passing them to the cosine function. For example,
φ = latitude * Math.PI/180; λ = longitude * Math.PI/180;
Based on the list of places in the temperature dataset, we look up their
latitude_longitude coordinates via the OGCIO Weather Station Information API. Use the above Equirectangular approximation formula, we find out which place in the temperature dataset is near to your current location and we set this as the temperature of your current location. We use the same mechanism to locate a nearby air quality monitoring station and use this station location to retrieve the AQHI and Health Risk level
from the OGCIO Air Quality Health Index API.
For the example screenshots, the App reported the temperature data at ‘Hong Kong Park’ and the AQHI data at ‘Central/Western’ monitoring station when the App is running on a desktop PC within the CS Department’s network.
▪ For the Header block, we would like to use different background images at different timings (e.g., daytime & night-time) and weather conditions (raining and no rain).
During daytime without raining
During night-time without raining
During daytime with rain
During night-time with rain
▪ The base document of our Web app is the index.html file. You cannot add any HTML tags to the
• You should implement appropriate CSS settings for rendering the Web app on a mobile device (e.g., iPhone 8 / X or Pixel 2) and a desktop browser (with at least 1000px screen width).
Resources
Here are some (optional) resources you can use for building the Web app.
• images.zip – this file contains all images used in the recommended implementation.
• data.zip – this file contains sample AQHI data from OGCIO and 9-day forecast and weather data
from HKO; this would be useful for you to examine the weather data a nd test the Web app without getting the data from HKO. The weather data set contains records with the warning message, raining day, & UV index.
• index.html – this is the base document of your Web app.
Testing platform
We shall test your Web app using Google Chrome. Please make sure that your Web app is using real- time data from HKO and AQHI APIs (rather than running on the provided sample data).
Submission
Please finish this assignment before Mar 29 Monday 23:59. Upload all files to the i7.cs.hku.hk server and arrange the files according to the file structure of your Web app in a preset directory under the course account (c3322b) for this assignment, i.e., /course/home/c3322b/public_html/assign2/[your_CSID]. We have created a folder for each student under the path for this assignment: /course/home/c3322b/public_html/assign2/
For example, a student with the CS account username – tmchan, would have a directory: /course/home/c3322b/public_html/assign2/tmchan/
We shall visit your individual webpage (https://i7.cs.hku.hk/~c3322b/assign2/[your_CSID]/index.html) to check your assignment.
Grading Policy
Points
Criteria
3.0
Correctly display header block
▪ Showing weather icon (0.3)
▪ Showing temperature, humidity, & rainfall data (0.25 each = 0.75) ▪ Hiding/showing UV index (0.25)
▪ Hiding/showing warning message(s) (1)
▪ Showing last updated time (0.2)
▪ Changing background images (0.5)
2.0
Correctly display MyData block
▪ Showing addressing info (District & Suburb) (0.5)
▪ Showing rainfall data (0.2) ▪ Showing temperature (0.6) ▪ Showing AQ info (0.7)
1.0
Correctly display temperature block
▪ Locations are listed in alphabetical order (0.3) ▪ Provide a suitable selection mechanism (0.3) ▪ Display the temperature correctly (0.4)
1.5
Correctly display 9-day forecast block ▪ Showing weather icon (0.2)
▪ Showing Date and Day (0.2)
▪ Showing the range of temp (0.2) ▪ Showing the humidity range (0.2) ▪ Able to list all 9-day forecast (0.7)
2.5
Styling and layout
▪ The overall look of the Web app (1.5) – color scheme, position & spacing &
dimension of the contents, aesthetic design, etc.
▪ Responsive design (1.0) – adjustment of the layout and position & spacing &
dimension of the contents when displaying the app on a mobile phone or a wide desktop browser
-1.0
Not using index.html as the Web app main page
-2.0
Not using JavaScript to build the body part of the whole web page
-2.0
Not using real-time Open Data from HKO Weather report API and 9-day Forecast API and OGCIO Air Quality Health Index API
Plagiarism
Plagiarism is a very serious academic offence. Students should understand what constitutes plagiarism, the consequences of committing an offence of plagiarism, and how to avoid it. Please note that we may request you to explain to us how your program is fu nctioning as well as we may also make use of software tools to detect software plagiarism.