Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

Web and Mobile GIS

CEGE0043 - Assignment 5

Due: see Moodle

Submission: Code  and  documentation  files   in  the  two   provided  GitHub   repositories  -  API,  APP (assignment5 branch)

All assignment questions MUST be asked on Moodle so that everyone has the same information and I don’t forget what I’ve discussed with you

NB – Questions should be restricted to asking for clarification about the assignment requirements or general points of theory. Do  NOT post  details  of your code,  usability design/thinking,  test processes or anything else as this will be considered COLLUSION as it allows others to copy rather than think for themselves.

We also cannot solve code bugs for you – this is an INDEPENDENT assignment and you need to make good use of the in-class resources and also Google.

As a reminder – discussing this assignment with anyone else, solving bugs for friends, allowing someone to see your code or anything similar could be COLLUSION/PLAGIARISM. If you have doubts, think of what

would be possible in an exam hall – i.e. no sharing at all!

Notes:

1.   This assignment constitutes 70% of the marks for this module.

2.   Remember, if you borrow/adapt code from any other source you should be sure to acknowledge this in the code files and in  particular in the JSDoc documents for your repositories.

The Assignment - Develop a Crowdsourcing Tool for Petrol Prices and Queue Information

You will develop two components:

-    A Petrol Pricing and Queuing App (using the bootstrap template from the module), which depending on where it is run (screen size) will show:

o A Price/Queue App, that runs on a phone and allows the user to provide queue length and petrol price information as part o a crowdsourcing exercise.

o A Petrol Station Mapping App for use in a browser that will allow the user to place a new petrol station on the map

-    A data API that saves the petrol station locations to the database from the Petrol Station Mapping App and serves the locations to the Price/Queue App. The Price/Queue App then records the prices and queue lenghts for each station and saves those to the database.

All petrol stations are located as POINTS on the map

Price/Queue App, Petrol Station Mapping App (Leaflet/Bootstrap)

This App should detect whether you are opening it on a mobile phone or on a larger screen. If it is the latter then the Petrol Station Mapping App is launched, if the former then the Price/Queue App is launched. Both versions should make use of the same underlying code as well as including functionality that is only used in one of the versions – i.e. they are really one App.

Price/Queue App

Once launched, the App should track the movement of the user.  When they are close to a petrol station, the App should prompt the user to answer a multiple-choice question about the wait time, and to type in the price of unleaded petrol at that station.   The form to capture the price/queue values should look like this (using radio buttons for the queue length options):

Petrol Station Name: XXX

Petrol Station ID: XXXX (should be hidden)

User ID:  XXXX (should be hidden)

Inspection Date: XXXX

Queue is very long (over 15 minutes)

Queue is moderately long (between 10 and 15 minutes)

Queue is OK (between 5 and 10 minutes)

Queue is very short (less than 5 minutes)

No queue

Unknown

Price of Unleaded Petrol in £ per litre:  < BOX FOR USER TO TYPE IN THE VALUE>>

<< SAVE PRICE/QUEUE BUTTON>>

NB: the above list is just an example of queue length options – the actual list should be retrieved from the database

When the user moves to a different location, the price/queue of a different petrol station can be recorded.

NB:  one petrol station can have many price/queue reports. The  User ID  of the person  reporting  the

price/queue must also be saved.

Petrol Station Mapping App

A browser-based App that will allow the user to do the following:

1.   Create a new petrol station by clicking on a point on a Leaflet map and adding the name and oter details.  The petrol station should be stored in a database via a RESTful Data API.  Details for the petrol station form are as follows:

User ID: XXXX (will be hidden)

Petrol Station Name:

Last Inspected:

Note that the App  (both  for  mobile  and  large  screen)  MUST  use  the  Bootstrap template we use in class

You must use the provided database tables to store your petrol station locations and price/queue values.

NodeJS RESTful Data API (NodeJS Express)

The petrol station locations (points) created in the Petrol Station Mapping App should be stored in a database, and read from the database by the Price/Queue App when the Price/Queue App is launched. The answers (queue length and price values) that the user gives should also be uploaded back to the database. You are therefore required to write the RESTful Data API (node.js) code to do the following:

1.  Allows an administrator to store petrol station points and details to a database, via the Petrol Station App (when the screen is browser sized)

2.   Generates the list of petrol station locations and details to send to the Price/Queue App when the Price/Queue App is launched  (i.e. when the screen is mobile sized)

3.   Stores the Price/Queue data that are sent from the Price/Queue App

The API should include the code you need to support any advanced functionality you develop (see marking scheme below)

The required API end points must be used EXACTLY as given in the SQL file that goes with this assignment.

Note: You may choose/invent the petrol station locations test them at your home location.   We will add additional petrol stations when we are testing your code.  If it is safe to do so, you should select locations that are OUTSIDE to maximize the opportunity for getting a good GPS fix.

Anyone using your App should only be able to create price/queue reports for petrol stations that you have created - you should use your user_id and the provided SQL to ensure that this is the case.

Submission

You are required to submit:

1.   The code - in the two GitHub repositories provided for this module.

2.   JSDoc documentation for all functions, for each repository

Menu Items on the App

The following menu items should appear on the App

Petrol Station Location  (large screen – bootstrap medium, large and extra large)

Reference (see SQL file)

Menu Item

Code Component

L1

List of Petrol Stations with

shortest queue times

Advanced Functionality 2

L3

Bar graph showing number of Petrol stations within each

queue time category

Advanced Functionality 2


Crowdsourced Price and Queu

Reference (see SQL file)

e  (mobile screen – bootstrap sm

Menu Item

all and extra small)

Code Component

S1

User Ranking

Advanced Functionality 1

S2

Add Layer – 5 closest petrol stations

Advanced Functionality 2

N/A

Remove Layer – 5 closest petrol stations

Advanced Functionality 2

S5

Add Layer – queue length

unknown

Advanced Functionality 2

N/A

Remove layer – queue length unknown

Advanced Functionality 2

S4

Add Layer – no price

information in the last 3 days

Advanced Functionality 2

N/A

Remove Layer – no price

information in the last 3 days

Advanced Functionality 2

NB:  Multiple views of the petrol station data should NOT be loaded at the same time – e.g. if you load the 5 closest stations, this should automatically remove the user’s default points or the wait time layer if they are   showing etc.  When a ‘reporting’ layer is removed via a menu option, the user’s petrol station points should  be shown again automatically.

Use of GitHub

See Moodle for Commit counts. Commits should not be mostly in the last week of the assignment.  Formatting changes – e.g. where you have added an extra line to a file and then committed it – don’t count. We will check the commit quality manually and automatically. You could score 0% if commits are very poor or not sufficient in number or don’t show a good level of activity.

If you do not show consistent work through the term and good use of GitHub any marks you obtain will be reduced - the sudden appearance of ‘perfect’ code in a repository is an indication of a poor understanding of the good programming practice that is the focus of this module (and also could indicate collusion/plagiarism)

Code Quality

Your HTML and JavaScript code should pass all automated testing. If the code does not pass tests you could score 0% for that component of the code.