Faculty of Engineering, Environment and Computing
304CEM Web API Development
Assignment Brief 2018/19
Module Title: Web API Development
Ind/Group
Cohort
Sep 2018
Module Code: 304CEM
Coursework Title: Developing a Full Stack Web Application
Hand out date: PT:10/1/2019
FT:24/1/2019
Lecturer: PT:Mr. WONG, Hang-chit
FT: Mr. Cheng Chi-yeung
Due date: PT:18/4/2019
FT: 2/5/2019
Estimated Time (hrs):
Coursework type: Individual Practical
% of Module Mark: 100%
Submission arrangement online via Moodle: Upload through Assignment Links
File types and method of recording: URLs (repository, live Application and Screencast) and source code
Mark and Feedback date: PT: 01/05/2019
FT: 15/05/2019
Mark and Feedback method: Rubric Marks and Comments
Module Learning Outcomes Assessed:
LO1 – Develop a secure, open-standards-based API to support server-client communication. LO2 – Create modern web content involving asynchronous data retrieval, client -side DOM manipulation, standards adherence and user -user interaction
LO3 – Manage data persistence cross both server and client web -based solutions.
LO4 – Design and implement an API and client based on given, non -trivial requirements using a range
of appropriate developer tools.
Task and Mark distribution:
1. Persistent Storage: 10%
2. Public Web API: 40%
3. Single Page Application 45%
4. Video Recording: 5%
Notes:
1. You are expected to use the CUHarvard referencing format. For support and advice on how this students can contact Centre for Academic Writing (CAW).
2. Please notify your registry course support team and module leader for disability support.
3. Any student requiring an extension or deferral should follow the university process as outlined here.
4. The University cannot take responsibility for any coursework lost or corrupted on disks, laptops or personal computer. Students should therefore regularly back-up any work and are advised to save it on the University system.
5. If there are technical or performance issues that prevent students submitting coursework through the online coursework submission system on the day of a coursework deadline, an appropriate extension to the coursework submission deadline will be agreed. This extension will normally be 24 hours or the next working day if the deadline falls on a Friday or over the weekend period. This will be communicated via email and as a CUMoodle announcement.
304CEM
Web API Development
Interim report (PT:28 March 2019
FT: 11 April 2019)
To preview last minute work, you are required to submit a not more than 3-minutes video to review your work. You are required to present what you have already done or prepare to do with show up your work through GitLab. The assessment will be part of the video reflection report.
Final Assignment (PT:18 April 2019)
FT: 2 May 2019)
During the module, you will learn how to develop full-stack cloud-based web applications. In this assignment, you are required to apply these skills to develop a full stack web application using the tools you have learnt in this module.
Deadline
The deadline for this assignment:
• Interim report: PT:28th March 2019 23:55 (11:55pm)
FT:11th April 2019 23:55 (11:55pm)
• Final Assignment: PT: Thursday 18th April 2019 23:55 (11:55 pm).
FT: Thursday 2nd May 2019 23:55 (11:55pm)
Resit
If you fail to achieve a grade of 40%+ in this assignment you will be required to complete the resit assignment which will be capped at 40%. This will cover a similar skill set and will be released on Aug May 2019. The deadline for submitting the resit coursework is Sep 2019.
Planning
You will be given time each week in your labs to both work on it and to ask any questions relating to the project. It is vital that you don’t miss these sessions!
The assignment structure closely follows the weekly topics, make sure you start each step whilst the module content is still fresh.
Assignment Brief
You need to develop a full stack, full restful web application. The exact topic you choose is entirely up to you, you can decide to create a news website, a Recipe website, a Cinema website, a portfolio website or any other ideas you are interested in.
You will need to do four tasks:
1- Create a persistent data storage (SQL, NoSQL, JSON files, text files or any other technology you think suitable for your website) and write one page report about its design
2- A backend system in a form of a full Restful public web API using NodeJS, in case you are not comfortable with NodeJS you may only use Python, no other alternatives are permitted. For this part of the assignment the source code should be hosted on a GIT repository
3- A web application using combination of modern web UI technologies such as Bootstrap and JQuery. The front-end should communicate with your backend system, the source code should hosted on a GIT repository.
4- A link to your live application or a video recording of your application.
Task 1: Persistent Storage (10%)
You should create a persistent data storage, you can choose the technology you think will be most suitable for your application, it can be a SQL database (e.g. mySQL, SQL Server), a noSQL database (e.g. MongoDB, CouchDB) a files system, text files or any other technology. You should explain your database design and justify the design and the chosen technology in a one page report and submit it through Moodle.
Task 2: Backend System (Public Web API) (40%)
You should create a backend system for your application, this backend system should be in a form of a full Restful public web API, you will learn how to create such system during this module, your backend system should be written in NodeJS only, you can use any framework or library available, so for example you may use NodeJS + RESTIFY. Your backend system should serve at least the following functionality:
1- User Registrations
2- Login System and Authentication.
3- At least two CREATE methods using POST requests to insert data in the database
(apart from user registration or login activities)
4- At least two UPDATE methods using PUT requests to update data in the database
(apart from user registration or login activities)
5- At least two DELETE methods using DELETE requests to delete data from the database (apart from user registration or login activities)
6- At least two RETRIEVE methods using GET requests (apart from user registration or login activities)
For example, you may suggest developing a Recipe website, then your minimum requirements could be:
1- A public API for user’s registrations
2- A public API for user’s login
3- Public APIs to add a recipe, and add an existing recipe to a favourite list(2 CREATE methods)
4- Public APIs to update a recipe, a comment, and a specific user’s profile information
(2 UPDATE methods)
5- Public APIs to delete a recipe, and a specific recipe from a specific user’s favourite list (2 DELETE methods).
6- Public APIs to retrieve a recipe, and a specific user’s favourite list. (2 RETREIVE methods).
You will need to write also automated testing for your API using an appropriate unit testing framework, fully document your source code using the appropriate documentation convention.
You should submit a link to your GIT repository.
Task 3: The front-end System (45%)
You will need to prototype, design, and implement a single page application for your project using a mixture of HTML5, Vanilla JavaScript, Bootstrap, JQuery. For more extra credits and challenge you may use Single Page Application frameworks such as AngularJS or Vue.JS.
You should not use any other front-end system frameworks other than what is proposed above, the reason for that, is to make marking and assessment consistent.
The web application should connect to the back-end server to read and write data. This application should at least allow the user to register, login, and perform the other required 12 operations (2 creates, 2 updates, 2 deletes, 2 retrieves).
You will be assessed on the design of your front-end and its, completeness, effectiveness and responsive.
Task 4: Video Reflection Report with demonstration (5%)
You can evidence your work with submitting a video recording of it. Live application is optional.
If you are able to submit a link to your live application then you can host it anywhere on the internet, please make sure it is deployed and functional before the assignment deadline and that the deployed version matches the source code you submit also make sure the application stays live at least until the assessment is completed and final grades are released, you will be provided with a list of free hosts for each possible technology you may use.
(1) Interim report (50% of this task)
You are required to submit a not more than 3-minutes video to review your work. You are required to present what you have already done or prepare to do with show up your work through GitLab. The video should be hosted on YouTube and publish as “unlisted”. You are required to submit the link through Moodle.
(2) Final Report (50% of this task)
You need to submit a not less than 5 minutes video recording of your application, showing the application and its functionality, please make sure that you demonstrate that your front-end and back-end system perform the required functionality as detailed in task 2 and 3. The video should be hosted on YouTube and published as “unlisted”.
Final Submission
This assignment requires you to demonstrate the range of skills and knowledge required by industry and this is reflected in the coursework submission. You are required to submit the following.
1. Links to your Git remote repositories, you will have a repository for your backend API and a repository for your front-end.
2. A link to your live application where all components working together (persistent storage + API + Front-end) and/or a link to your reflective video (hosted on YouTube)
3. A maximum 500 words report about your data persistent design.
Source Code
Managing source code is a vital skill if you are to become a successful developer and for this assignment you are required to track your back-end API code and your front-end code in separate Git repositories and you will be marked on how efficiently you organise this. You will be required to submit links to both your Git remotes hosted on GitLab. Both repositories should include full documentation available through the home page.
0
1
2
3
4
5
Version
Control
5%
No access given to the remote repository on GitLab.
Code access provided but does not match the code demonstrated.
Access provided to GitLab however there is no evidence of regular commits.
Access has been given to the code on GitLab with evidence of regular commits.
Evidence of regular commits over an extended period of time.
Commits over an extended period of time, demonstrating the use of branching and merging.
Automated
Testing
5%
No tests have been written or run.
Limited attempt at flawed tests.
An attempt has been made to write simple tests
Evidence of a limited number of tests written and run.
A range of tests showing how they contribute to code quality.
A full suite of automated tests ensuring full code coverage
API Design
10%
No API demonstrated in the screencast
An attempt has been made to implement a basic API however this does not work as expected
Simple functional API demonstrating a basic understanding of REST principles (resources, collections, methods and headers)
The API is fully functional and includes an authentication mechanism. The API demonstrates a good understanding of REST principles.
The API demonstrates user registration and authentication. It provides feedback for invalid requests through appropriate response codes and messages. Limited HATEOAS support.
Fully REST-compliant API that includes filtering and sorting and conditional GET requests.
It makes use of the full range of request and response headers.
Full HATEOAS implementation.
Architecture
5%
No code supplied through GitLab
An attempt to write the API however it fails to work correctly.
All code for routing and business logic maintained in a single file
Code split into several files but overlap between routing and business logic.
Clear separation between routing and business logic code.
Clear separation between routing and business logic code with no code duplication.
Coding
10%
No code supplied through GitLab
An attempt has been made to write code to implement some of the basic functionality although this may not be successful. No attempt at documentation.
Working code base showing the application of basic programming principles. Code may contain linting errors and warnings. No attempt at code documentation
Demonstration of the usage of modularity to organise the code. Code documentation is incomplete. Code contains linting warnings but no errors.
The code is modular and includes full exception- handling. Code is fully annotated and explained. Code contains no linting errors or warnings and is fully documented.
The API demonstrates a wide range of appropriate language constructs including clear modular structure. Code contains no linting errors or warnings and is fully documented.
Completeness
5%
No APIs were developed at all, or all of the created APIs are not working
Only few of the requested APIs were created, the exiting APIs may lack functionality
Half of the requested APIs were created and working properly, the existing APIs may not work or lack functionality
Most of the requested APIs were created, the existing APIs may not work or lack functionality
All requested API were created, with some of them may not working or lack functionality
All requested APIs were created and all working correctly
0
1
2
3
4
5
Version Control
5%
No access given to the remote repository on GitLab.
Code access provided but does not match the code demonstrated.
Access provided to GitLab however there is no evidence of regular commits.
Access has been given to the code on GitLab with evidence of regular commits.
Evidence of regular commits over an extended period of time.
Commits over an extended period of time, demonstrating the use of branching and merging.
Responsive
5%
No responsive design
An attempt for a responsive design but it is not working properly.
Around half of the pages are responsive, or there are all responsive with major issues in each page
Most of the pages are responsive, with very few
major issue with design such as wrong placement of large components
Fully responsive design, with minor issues, such as wrong placement of some small elements or extra shifts in some components
Fully responsive design UI
CSS
10%
No CSS used at all
Most of the CSS are working from the template. No real modification or use of its customised CSS
Half of the website is based on the original and customised CSS which heavily dependent on the template CSS
Most of the pages used original CSS, with major components throughout the pages used the template CSS
Well designed and original CSS, with some elements used from the template
Well designed, original CSS creation, completely different from the standard template
Front-end code
Architecture
5%
No architecture
An attempt for a front-end code architecture was made, but it is not working properly, or it is mostly incomplete
Code architecture is not complete, with major flaws in some pages
Generally good architecture that needs improving in some places.
Good architecture with some minor flow in the design of the code
Clear architecture, clear separation of JS, CSS and contents
Front-end Coding (HTML & JS
)
10%
No code supplied through GitLab
An attempt has been made to write code to implement some of the basic functionality although this may not be successful. No attempt at documentation.
Working code base showing the application of basic programming principles. Code may contain linting errors and warnings.
Demonstration of the usage of modularity to organise the code. Code contains linting warnings but no errors.
The code is modular. Code contains no linting errors or warnings with minor errors in the code
Code contains no linting errors or warnings.
Completeness
5%
Zero achievement
At attempt has been made to create front-end for the requested API, however they still need major work and improvements
Have of the back-end services have been utilised in the front-end
Most of the requested back- end APIs were used in the front-end, with some having minor or major issue
Most of the requested back-end APIs have
front-end pages ready to
serve them
All requested backend APIs have been utilised in the front-end
Connecting to
APIs
5%
No connecting to APIs from the front-end
An attempt for connecting and retrieving data from the APIs was done but it is mostly having issues in connecting
half of the pages connecting and retrieving data from the APIs with few having minor or major issues in connecting
Most of the pages connecting and retrieving data from the APIs with few having minor or major issues in connecting
All pages connecting and retrieving data from the API with few having
minor or major issues in connecting
All pages connecting and retrieving data from the API
0
1
2
3
4
5
Persistent Storage Design
10%
No Persistent storage at all
An attempt has been made a persistent storage however it is not working or lacking most of the functionality
Persistent storage working, however there is major work needed to improve the design.
A working persistent storage design with some major issues
Well-designed persistent storage with few minor improvements needed to improved efficiency
Well design and fully functional persistent storage
304CEM Grading Rubric for Video or Live Application (5%)
0
1
2
Video
3%
No video submitted
A video was submitted but the demonstration is not complete or unclear.
A video was submitted and the demonstration is clear.
Live
Application
2%
No live
Application
A live application was submitted