辅导COM3504/COM6504、Intelligent Web辅导、CSS/Javascript、Java程序调试
解析Java程序|代
COM3504/COM6504 Intelligent Web
Assignment 2018-2019
This assignment is primarily concerned with applying the ideas that are being presented in the
module on methods for accessing the Web and making sense of its content. Some of the basic
algorithms needed for it have already been introduced during the module, and can be obtained from
MOLE.
Organisation of the Assignment
The assignment is divided into two parts:
1. Part 1: Building a fully-fledged PWA and associated remote nodejs server.
a. No marks: after feedback the revised Part 1 will have to be submitted as part of the
Final Assignment. Penalty for not handing in a reasonable solution: up to 25 marks
taken off the final marks.
b. Deadline: Monday 1.4.2019 at 23:59:59
2. Final Assignment: add a mongoDB database and annotation using DBPedia
a. 100% of the marks
b. Deadline: Friday 17.05.2019 (Week 12) at 23:59:59
All submissions are electronic via MOLE. No need to hand in anything at reception.
Feedback about part 1 will be given on Thursday 4.4.2019 and Friday 5.4.2019 (week 9)
Workload
The whole assignment is intended to account for between 20 and 30 hours of each person’s work
towards the module as a whole. Experience has demonstrated that it is not really possible for one
person to do all the work for the assignment in that time, unless they are an exceptionally competent
programmer with previous knowledge of Web programming. Therefore, the assignment is
organised on the basis that people should work on it in groups. Groups must be composed of a
maximum of 3 members. Students are allowed to do the assignment in pairs or on their own.
Please note!
You can only have groups within the same module code, i.e. members must be either all in
COM3504 or in COM6504.
PhD students should ask the lecturer before joining a group.
You must register your group at
https://drive.google.com/open?id=1hZ2VRFcGg55Z7icDs8Xqml5c48Bm9UIgNsV7R7D1Emg&authuser=0
Given a group, you will normally be expected to keep with that group for the whole of the
assignment. However, if any problem arises that makes this difficult, you should notify the lecturer
immediately, so that appropriate action can be taken. See lecture 1 slides on this topic.
It is important that you make clear what contribution each group member has made. It is required
that each person contributes to each stage of the assignment, but it is up to each group to decide
how to divide the work up between individuals. This must be explicitly stated in the report, as
explained below.Only one member of the group needs submitting on Mole. However, in case just one person
submits, the entire group takes responsibility for that submission. If unsure, we suggest that all
members submit.
Deadlines
The deadline is absolutely fixed. You should therefore plan your work to aim at handing the report
in at least a few days before the deadline – do not leave it until the deadline, just in case any minor
thing goes wrong and you then find that you are late.
Note that the Computer Science department applies fairly severe penalties for handing coursework
in late. If you want to look at the details you can find them on the University’s website.
Material Provided
Lecture notes, lab class examples and websites/books to use.
NOTE: no third party code can be used in the assignment, except what has been explicitly
provided in the lectures or lab classes. For example you are allowed to use code given in the lecture
slides but you are not allowed to download any code from the Web or to use any other software that
will perform a considerable part of the assignment. Unauthorised re-use of third party software
will be considered plagiarism. In case of doubt ask the lecturer for permission before using any
third party code. Libraries allowed, despite not being mentioned in the lecture notes are css/js
libraries to improve the look and feel of any interface (e.g. Angular, Bootstrap). For other libraries,
please ask before using.
List of allowed libraries:
CSS/Javascript: Angular, bootstrap
NPM Libraries: Passport, Multer1. Scenario
The goal of the assignment is to build a website, a progressive web app with a local database, a
nodejs webserver and a remote database for recording events at music festivals (e.g. photos,
descriptions, etc.). Moreover, you must build a client server architecture that enables searching for
events and associated user stories using a computer or a mobile (so you must use a Responsive Web
Design on the client).
The architecture will allow to:
● Search for events by keywords, date and location
● Create user stories for each events inclusive of photos, text, address, etc. User stories may be
seen as a simple blog entry such as a Facebook post with multiple photos.
● Return all user stories associated with an event, date or location
● Add photos and comments to existing events
● Annotation events with links to DBPedia
1.1. Building a Selfie-with-fame PWA
Build a Progressive Web App which allows you to take selfie pictures (and indeed any picture!) at
music festivals, hopefully involving some famous musician. The app will allow to:
Select an event from an existing list (e.g. via name, dates, location) or create a new event
Create a number of stories for that event which include:
o pictures
o text
o date and time
o author information
Multiple users can add to the same event.
The PWA must have the following characteristics:
It must use a web worker to allow working while off-line (a common experience at music
festivals!). That means working in offline mode for both querying and storing data
It must store data locally into an IndexedDB structure to make it available for searching
locally
It must sync with the remote nodeJS server (see below)
1.2. Building a nodeJS server collecting data from the PWA
Build a server collecting data captured by the PWA and making it available for searching via the
PWA. It will allow syncing with the PWA – for example if user A adds a story to an event, this
story should be made available to all users of the PWA when they access the site.
The server must be backed by a MongoDB database to store and search the information.
The server must be implemented in Express/NodeJS and must use both Ajax AND socket.io for the
different functions. This means that a simple direct POST from an HTML form is not acceptable;
some functions will be implemented using Ajax, others will be implemented in socket.io. The goal
here is for the students to show that they master both techniques.
Data communication must be implemented using JSON.
1.3. Searching events
The interface must allow users to search for events and stories given: name, or location or dates;
searching by location should be done via a map, e.g. Where the pin represent user stories.
1.3.1.Quality of the solution/ keeping your solution manageable
The assignment per se is rather simple, as it follows the module’s lab class exercises. However, we
require a quality solution. While a simple solution will attract some good marks, a first class
solution will have to provide sophisticated features. Some have been mentioned above.
Please note that the quality is not necessarily related to a stylish design (although that helps) or a
high number of functionalities (ditto).
The quality must be intended as related to the module’s learning objectives, which are to learn the
use of sophisticated client/server architectures, using a range of methods such as login management,
Ajax and socket.io, where the client is specifically designed for users on the go (hence the
progressive app requirement), uses WebRTC, etc. The server must be scalable to potentially
thousands of users, so your solution must be non-blocking on the server side.
Having said that, please note that the assignment is open ended in some respects. Implementing a
perfect solution would be far beyond the scope of this module. Make sure to keep the solution
manageable in the time allocated to the module. Do not overdo it.
2. Marking schema
Each part described in the subsections above will carry marks divided as follows:
36% for the documentation in the project report. More details on the detailed marking
schema can be found in appendix A.
39% for the implementation of your solution (quality of code and Javadoc-like
documentation). See appendix B for further details on the specific marking schema.
25% for the correctness of results.
Please note
● the direct consequence of the marking schema is that providing a program returning the
correct solution is not enough to get a pass mark. You will need to implement the correct
strategies and document/discuss them properly! Quality of documentation and code are
very important issues for computer scientists.
● the weights makes so that getting marks over 75% requires to be creative and go beyond
what strictly required by the assignment: we expect that only excellent solutions will get
marks above that threshold.
Marks for the different sections:1. Interface to insert and search data via forms: 5%
2. Interface to search data via map: 10%
3. PWA – caching of the app template using a web worker: 15%
4. PWA: caching data using IndexedDB: 20%
5. NodeJS server: 15% (5% of which for the non-blocking organisation of multiple dedicated
servers)
6. MongoDB: 20%
7. Quality of solution (e.g. additional optional features): 15%
3. Handing in
Your solution must be contained in a self-contained directory called IntelligentWeb
( in the following) compressed into a zip file submitted through MOLE.
The directory must contain:
1. The code of the solution (please note that we will both inspect and run the code).
(a) All code must be developed in HTML5/EJS /Javascript/CSS. We must be able to
run your solution without problems on a standard lab machine. It should not need
any application to be installed in order to run. If in doubt about using a library or not,
be sure to ask the lecturer for instructions.
(b) You are required to use node.js/express and to make sure that your solution runs on
the lab computers.
(c) All the external libraries must be included in your solution. Some css and js libraries
can be provided with external links that are uploaded automatically when pages are
loaded (e.g. you do not need to include JQuery, just link it in your HTML/EJS files).
The node module libraries MUST NOT be included. Just make sure to create a
complete package.json file so that we can install all the modules running npm install.
(d) Source code; please provide:
1. All the code should be in the directory /solution.
Please note that the quality of the code carries a relevant portion of marks, so be
sure to write it properly.
2. A report documenting your work. The report must be contained in the directory
/report/. An outline and set of requirements for the report are
provided in Appendix A.
3. The documentation in the Javascript/HTML file must be of very high quality. We expect the
same type of quality that would enable generating a complete Javadoc documentation from a
Java file. Please note that this documentation carries a relevant portion of marks, so be sure
to write it properly. For more information on guidelines for this type of documentation see
http://www.oracle.com/technetwork/java/javase/documentation/index-137868.html
4. Screenshots or video of the app so that we can understand what should happen when we run
your solution /screenshots
5. The filled self-assessment form.
3.1. How to submit
Everything must be submitted electronically. Nothing is to be handed in at the reception! Use
MOLE. Store your solution in a .ZIP file that when unzipped will generate the directory
organisation as described above. As emergency measure (and only in that case!), if any last minute
issue should arise in handing in electronically, please send your solution by email to the lecturer (cc
to demonstrators) in a self contained .ZIP file.
Solutions not working on the departmental computers (e.g. working only on personal computers)
will lose considerable marks.Please note: only one member of each groups is required to submit the solution to the assignment.
However: as submission is via MOLE, we will only be able to return the marks to those who have
submitted. If the division of roles in the group is balanced, all the members will get the same marks.
3.2. Anti-cheat measures
Please note that measures are in place for detecting plagiarism and in general cheating.
4. Queries about this assignment?
Should you have any queries about the assignment, feel free to contact
Fabio Ciravegna, Matthew Barber, David Paterson and Robert Chisholm
{f.ciravegna, m.g.barber, dpaterson1, r.chisholm }@ shef.ac.uk
... please note: there are Appendices below..Appendix A: Report Outline and Marking Schema
It is important that you produce a high quality report. Be sure not to leave the report at the very last
minute. It is importance that you do not ignore techniques and examples provided to you during the
lectures and lab classes. Referring back to them during your planning/implementation stages will
give you the base from where to start, as well as a point of comparison/discussion where your ideas
differ from what already presented to you (i.e., do not reinvent the wheel – if it has been done
before, reuse it and complement it where it lacks functionality).
You may use diagrams to aid your explanation in these sections, but please note that a diagram
alone is not acceptable and must be accompanied by an explanation/discussion.
Your report must be organised according to the following outline, which is designed to help you
ensuring that all the required information is provided.
Length: maximum 5 pages (3 pages for the first part).
Index Table
[No marks – OPTIONAL] - You may or may not want to include an index table on your
report. This is completely up to you. This does not count against the page limit.
Introduction
[no marks] – This should give the marker a guide as to what to expect from your report.
Please make the marker’s work easier by being honest.
Diagram
Include a diagram explaining how your solution is organised, showing interconnection (which page
leads to what pages, which connections require logging in – if any - and which ones do not, etc.)
Also show where the information is stored (e.g. the database), where it is cached, etc.
For each task
1. Interface to insert and search data via forms:
2. Interface to search data via map
3. PWA – caching of the app template using a web worker
4. PWA: caching data using IndexedDB
5. NodeJS server including non-blocking organisation of multiple dedicated servers
6. MongoDB
7. Quality of Web solution
Create a subsection for each of them strictly following the organisation below (Challenges,
Solution, Requirements and Limitation).
Challenges
[10% of the report marks for this section] - Introduce the task and the challenges that you are faced
with (i.e. why is it complex?).
Solution:
Design and its motivations: [55% of the report marks for this section] explain how your solution
works and explain why you chose to design your solution in this particular way (e.g. to optimise
number of twitter queries). Does it have advantages/disadvantages over other design choices?
Requirements: [20% of the report marks for this section] how does this design comply with the
requirements specified in the original assignment sheet? Are you meeting all requirements?Limitations: [15% of the report marks for this section] have you thought about exceptional
situations that may limit your solution? Is your solution extensible? Can it be easily adapted for
other requirements? Remember that no design is flawless!
Conclusions
[no marks] - You should include here any relevant conclusions you've collectively arrived at
regarding the process of designing the solution for this part of the assignment as well as any lessons
learned.
Division of Work
[No marks – MANDATORY] – Have all the group members shared the workload in a
balanced way? In what way? E.g. what has each member provided – be precise and especially
make sure that this is completely agreed by all group members!
For example (note - the sections listed in the declaration below are randomly chosen and may not
correspond to an equal development effort):
All the members of the group contributed equally to the assignment solution. The solution
was designed jointly and then each member lead the implementation of one specific part of
the code, its associated documentation and contributed to the writing of the final report.
In particular:
● Member X lead the implementation of 1, 2, 8 and wrote the corresponding
documentation
● Member Y lead the implementation of 3, 4, 7 and associated documentation
● Member Z lead the implementation of 5, 6 and associated documentation
The final document was jointly edited.
Make sure to list clearly what each member has done.
If the group developed the entire project together and nobody contributed particularly to a subset of
sections, feel free to write so.
Extra Information
[No marks – MANDATORY] – This section should include any extra details needed to run
your code. If no extra configuration is needed, please explicitly say so in this section.
Bibliography
[no marks] - Do not forget to cite any sources and reference these within the text where
appropriate (e.g., “(...) we have used the techniques as per [1].”).Make sure to use a standard
format style. The lecture notes must indicate the lecture number (e.g. week 1)Appendix B: Marking schema for the Code
The quality of the code of your submission for each part of the assignment will account for quite a
large part of the marks. It will be marked according to the following schema:
[65% of the code marks] – Code functionality: how the code meets the requirements set in the
assignment description.
[5% of the code marks] - Code documentation. This includes
● in-line commenting to make your code intentions clearer to someone reading
● Javadoc-like documentation: higher level comments on the code and its use. It is important
that you note the different level of detail generally included in Javadoc-like comments as
compared to the kind of comments that are included within your code!
[15% of the code marks] - We must be able to run your code without any problems using the lab
computers.
[5% of the code marks] - Your code should follow a consistent format regarding class and variable
naming as well as indentation, this is can be easy achieved with the use of an IDE (Eclipse, IntelliJ,
Netbeans, etc.).
[5% of the code marks] - Proper use and handling of Exceptions in your code.
[5% of the code marks] - Code organisation (e.g. readability, use of modules in node.js, Javascript
files, etc.).