CEGE0043代做、代写Mobile GIS、代写Java语言、Java程序设计代做

日期：2020-04-04 10:20

Web and Mobile GIS

CEGE0043 - Assignment

Warning! This is ONE assignment, and most of you are new to programming. You are not required

to produce an App that you can then sell online – rather , make sure your work shows that you

understand the principles we cover in class. Documentation is important too.

Due: 15th April 2020 at 12.00 noon (deadline extended) (was: 1

st April 2020 at 12:00 noon )

Submission:

1. PDF Report (including all programming code in one or more Appendices) to be

a. uploaded on Turnitin

2. Code in the two provided GitHub repositories – api, app (master 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

? Deadline for questions is 5 days before submission – i.e. 12:00 noon on the 10th April 2020

(was 27th March)

If you have borrowed a phone, when you return it please make sure you don’t have any

fingerprint/password/screen locks. I will arrange a date/time for phone return early in Term 3.

Notes:

1. This assignment constitutes 100% 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 your write-up and in the code files and in the ReadMe for your repositories.

Page 2 of 7

The Assignment – Develop a Location-Based Quiz

You are required to develop a Location-Based App which has two components

- An App, which, depending on where it is run will show:

o A quiz App that runs on a phone (using Bootstrap)

o A question setting App for use in a browser (using Bootstrap)

- A data API that saves questions to the database from the question App and serves these questions

to the quiz App, and then collects the users’ answers to the quiz and saves them to the database

Location-Based Quiz/Question 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 Question Setting version is launched, if the former then the Quiz is launched. Both versions

(known as the Quiz App and the Question Setting App) 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.

Quiz App

Once launched, the App should track the movement of the user. When they are close to a given point, the

App should prompt the user to answer a multiple-choice question about that location. For example, if such

an App were developed for UCL, once the user is in proximity of the main gate a question would appear

that would ask:

Was UCL founded in:

- 1826

- 1836

- 1910

- 1730

The user will then select the answer from the list. The system will then let the user know if they are right or

wrong, and will show them the correct answer. When the user moves to a different location, a different

question will be asked.

Question Setting App

A browser-based App (Web Application) that will allow the system to do the following:

1. Create a new question by clicking on a point on a Leaflet map and adding the question and four

possible answers. The question should be stored in a database via a RESTful Data API.

Note that the App MUST use the Bootstrap template we use in class

You must use the provided database tables to store your quiz questions and

answers (see Appendix). As this is not a databases module you will be given the

basic code for how to do this.

NodeJS RESTful Data API (NodeJS Express)

The questions (quiz points) created in the Question App should be stored in a database, and read from the

database by the Quiz App when the Quiz App is launched. The answers 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 a list of question points and questions to a database, for use with

the Question App

2. Generates the list of questions to send to the quiz App when the App is launched

3. Stores the answers that are sent from the Quiz App

4. Includes the code you need to support any advanced functionality you develop (see marking

scheme below)

Page 3 of 7

Note: You may choose the questions that your system asks. However, the target map locations for your

App should all be within a 2 minute walk from the UCL main gate to allow for easy testing. You should also

select locations that are OUTSIDE to maximize the opportunity for getting a good GPS fix.

Anyone using your App should only be able to answer questions that you have set – you should use your

Port_ID to achieve this.

Submission

You are required to submit:

1. The code – in the two GitHub repositories provided for this module. Note that the ports should not

be hard coded – make sure you use the useful Javascript port detection utility.

2. A short report (PDF) (MAX 5 PAGES) outlining each part of the project – the data API and the

location-based App. In particular this should include:

a. An architecture diagram of the system showing how the different parts link together (app,

data API /database)

b. A list of the advanced components you developed

c. A report of the testing you carry out on your system, for example

i. What test points did you create

ii. What browsers did you test your questions App in

iii. Did you get other people to test your quiz App to see how usable it is

3. Two user guides - for the questions and quiz components of your submission – presented as

HTML pages within each App component (i.e. so that the users can access them while they are

using the software) – put one user giude in the Quiz and one in the Questions components and

make sure they are linked as HELP options from the menu

a. These should NOT include any technical detail – they should make it clear to the user how to

run the App

b. Step-by-step screenshots may be useful to guide the user through what they need to do

4. A technical guide for both App and API components – presented in the readme file in your

GitHub repositories on the README page for each component. This documentation should

include:

a. Any system requirements you have (e.g. software versions, browser versions, hardware

versions such as Android phone version)

b. How to deploy the code

c. How to test the code

d. A table listing what each HTML or JS or CSS file in the repository does

e. A list of any third party code you have referenced while creating your code (including code

samples from class)

Page 4 of 7

You will be assigned marks for criteria as follows (NB – the list describes functionality from the App

perspective but of course the corresponding data API functionality must also be developed):

Task Mark Comment

Good use of GitHub

8

You should have at least 200 contributions over the module.

These 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.

Note in particular that you should use a separate branch to

develop each of the functionality groups below, merging the

resulting code into the main branch (I will test the main branch).

GitHub only counts contributions that have been merged onto the

master branch in your repository.

PDF Documentation

10

? Maximum 5 pages

? Clear overall aims and objectives of the system you have built,

describing how the system is linked together

? Details of any testing carried out

Other Documentation

20

? Technical Report summarizing your 2 applications and the API

repository in README files in the corresponding GitHub

repositories

? The user guides provided must be non-technical (linked as

‘help’ functionality HTML pages on your two Apps

? In-code documentation

Deployment

3

? Can I easily deploy and test your App by downloading the code

from your GitHub repository

? Can I easily deploy and test the data API you have created,

using the code from your GitHub repository

0 marks if the port numbers are hard coded – use the port

detection Javascript I provided1

(I will be testing on my Ubuntu

server which has different ports so your code won’t work if you

hard-code the port numbers)

Core Functionality 1

16

? App - Questions Component: create a question point, and save

it to the database

o The lat/lng of the question point should be created by

clicking on the map

? App - Quiz Component: question points (showing the questions

set by your questions component) load automatically when the

quiz component starts

? App - Quiz Component: the user clicks manually on the

question point in the quiz and is presented with a question

? App – Quiz Component: the question appears in the pop-up on

the question point (when the user clicks on the point)

? App – Quiz Component: the user answers the question and is

told if the answer is correct or incorrect

o For this version, there is no need to send the answer

back to the data API

? Links to help documentation (HTML pages) in both

components

Note – if I am unable to deploy the code as described above then

you may get 0 for this component. If you do not use the Bootstrap

templates you could also get 0

1 A good way to test this is to deploy your code onto a friend’s server and see if it works

Page 5 of 7

Core Functionality 2

4

As for Core Functionality 1 but:

? App - Questions component: existing quiz points that you have

created display on the question setting component

? An error message appears in the question setting component if

user doesn’t type in a number between 1-4 for the correct

answer field or if the user doesn’t fill in all the required fields

? App – quiz component: the map tracks the user’s location

automatically when the quiz app starts

? App – quiz component: answers are sent back to the data API

to be saved to the database

Note – if I am unable to deploy the code as described above then

you may get 0 for this component. If you do not use the Bootstrap

templates you could also get 0

Advanced Functionality 1

12

As for Core Functionality 2 but:

? App – quiz component: quiz question pops up automatically

(proximity alert) when the user is close to the point

? App – quiz component: quiz point changes colour when the

question has been answered, with the colour depending on

whether answer was right or wrong

? App – quiz component: user is told how many questions they

have answered correctly when they answer a question

? App – quiz component: user is given their ranking (in

comparison to all other users) (as a menu option)

Note – if I am unable to deploy the code as described above then

you may get 0 for this component. If you do not use the Bootstrap

templates you could also get 0

Advanced Functionality 2

21

Advanced Functionality 2:

? App – quiz component: graph showing top 5 scorers in the

quiz (as a menu option)

? App – questions component: graph showing daily

participation rates for the past week (how many questions

have been answered, and how many answers were

correct) (as a menu option)

o For your user only

o For all users

? App – questions component: map layer showing all the

questions added in the last week (by any user). The layer

must be added and removed via a menu option

? App – questions component: map layer showing the 5

questions closest to the user’s current location, added by

any user. The layer must be added/removed via a menu

option

? App – questions component: list of the 5 most difficult

questions (via a menu option) – i.e. where most wrong

answers were given

? App – quiz component: map showing the last 5 questions

that the user answered (colour coded depending on

whether they were right/wrong the first time they answered

the question)

? App – quiz component: App only shows questions and

calculates proximity alerts for questions that the user hasn’t

answered correctly

Note – if I am unable to deploy the code as described above then

you may get 0 for this component. If you do not use the Bootstrap

Page 6 of 7

templates you could also get 0

Quality of Programming

3

? Is the code structured correctly (use of different files for

different aspects of the code)

? Do you demonstrate good understanding of the concepts we

covered in class, and how to apply these in practice (can we

link from questions to data API to quiz)

? Are there appropriate error handlers

? Is there any duplicated code

Usability and Interface

Design

3

? How easy is it to use the question and quiz apps (ideally

without instructions)

? Have you made any additions to the basic Bootstrap interface

that we have been using in class, and if so are these well

presented

Note that this is an INDIVIDUAL piece of work. You should not work with others on this task. If necessary, I

will make use of tools such as MOSS to check for this2

.

Note: as this is not a databases assignment, I will post the SQL for the functions on Moodle. You will then

need to place this in your code

Note – if any element of your software does not work as you expect, then you should still submit the

corresponding documentation showing how it SHOULD work, using mock-ups of the screens – e.g. by

creating screen shots

2 https://theory.stanford.edu/~aiken/moss/ (Accessed 27th December 2017)

Page 7 of 7

Appendix 1- Database Tables

Two tables have been pre-created in my database for use in this assignment, as follows:

1. quizquestions – this is where you store the questions that you create using the question setting

App, and where you will get the questions from for the quiz component. The structure of this table

is as follows (all information is compulsory/mandatory – but the ID is generated automatically):

2. quizanswers – this is where you will save the answers that the user provides when they are using

the quiz. Note that you must provide the following information:

- port_id (the port on your Ubuntu server)

- question_id (which you will be able to obtain from the GeoJSON for the questions you submitted)

- answer_selected (a number between 1 and 4)

- correct_answer (a number between 1 and 4)

The timestamp is filled in automatically. The ID is generated automatically