联系方式

  • QQ:99515681
  • 邮箱:99515681@qq.com
  • 工作时间:8:00-23:00
  • 微信:codinghelp

您当前位置:首页 >> Java编程Java编程

日期:2021-03-30 10:53

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.


版权所有:留学生编程辅导网 2020 All Rights Reserved 联系方式:QQ:99515681 微信:codinghelp 电子信箱:99515681@qq.com
免责声明:本站部分内容从网络整理而来,只供参考!如有版权问题可联系本站删除。 站长地图

python代写
微信客服:codinghelp