COMP3322 BModern Technologies

COMP3322 BModern 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-weatherstation
API: https://ogciopsi.blob.core.windows.net/dataset/weather-station/weather-station-info.json
Documentation: https://ogciopsi.blob.core.windows.net/dataset/weather-station/weatherstation-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-dashboardaqhi/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=<value>&lon=<value>
&zoom=18&addressdetails=1
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 //Yau Tsim Mong
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 showsthe 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, forthe 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.movabletype.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
<body> part of the file. Instead, you use JavaScript to dynamically create all HTML elements and
their contents during runtime and use CSS and JavaScript to set the styling and layout. In
principle, you do not need to touch on the index.html file. Your task is to implement the two
files - style.css and wapp.js. Note: you can have different names for the two files, and you can
structure your code in multiple .js and .css files. You are not allowed to use external libraries
(e.g., Bootstrap, jQuery) for the task. If you use different filenames for the two files or adding
other CSS style files or JavaScript files, please update the index.html file accordingly.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="wapp.js"></script>
<title>My Weather Portal</title>
</head>
<body>
<!--
Use JavaScript to add all HTML elements
-->
</body>
</html>
• 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 and 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 realtime
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 functioning as well as we may
also make use of software tools to detect software plagiarism.

请加QQ：99515681 或邮箱：99515681@qq.com   WX：codehelp

标签：Web,temperature,COMP3322,weather,BModern,https,Technologies,data,your
来源： https://www.cnblogs.com/lhafjava/p/14603307.html