0% found this document useful (0 votes)
78 views9 pages

CN5006 Web App Development Resit

Course book

Uploaded by

lancereign43
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
78 views9 pages

CN5006 Web App Development Resit

Course book

Uploaded by

lancereign43
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

SCHOOL OF ARCHITECTURE

COMPUTING AND ENGINEERING

Submission instructions
• Cover sheet to be attached to the front of the assignment when submitted
• All pages to be numbered sequentially
• All work has to be presented in a ready to submit state upon arrival at the
Hub. Assignment cover sheets or stationery will NOT be provided by the Hub
staff.

Module code CN5006

Module title Web and Mobile Application Development


Dr. Nadeem Qazi
Module leader

Assignment tutor Dr. Nadeem Qazi

Assignment title Coursework Resit

Assignment number 1

Weighting 50%

Hand-out date 28th Oct 2024

Submission date 9th Dec 2024 at 23:59 (online submission) Strictly No


Extension
Learning outcomes
assessed by this 5-10
assignment
Turnitin submission Yes Turnitin Grade Mark No
requirement feedback used?
UEL Plus Grade Book No UEL Plus Grade Book No
submission used? feedback used?
Other electronic No Are submissions / feedback Yes
system used? totally electronic?
Additional information
Form of assessment:

Individual work Group work

Number of assignment copies required:

1 2 Other

Assignment to be presented in the following format:

On-line submission
Stapled once in the top left-hand corner
Glue bound
Spiral bound
Placed in a A4 ring bound folder (not lever arch)

Note: To students submitting work on A3/A2 boards, work has to be contained in


suitable protective case to ensure any damage to work is avoided.

Soft copy:

CD (to be attached to the work in an envelope or purpose made wallet adhered


to the rear)
USB (to be attached to the work in an envelope or purpose made wallet
adhered to the rear)
Soft copy not required

Note to all students

Assignment cover sheets can be downloaded from logging into UEL Direct via the
following pathway.

UEL Direct → My Record → My Program → Assessment log dates with


bar-coded front sheet
CN5006 Application Development
Assignment 2024/24 Academic Year
Course work for CN5006 Web and Mobile Application development. Total
Marks 50
• You should be working in Group of NOT be MORE THAN 6 students .
• React must be for used for user interface.
• Any tool other than React will NOT be accepted.

Task: Design a web server application consisting of the backend and front end in separate
files ,using node js express , mongo dB and mongoose to design the RESTAPI. The course
work would be evaluated through the submitted (Report(45 Marks) and a video file submission 5
Marks)
The REST API will use [Link] (provided to you for this coursework). The given csv data
having the following fields:

1. Team
2. Games Played
3. Win
4. Draw
5. Loss
6. Goals For
7. Goals Against
8. Points
Sub Task 1 Back End application. Following sub tasks should be performed

1. The BackEnd application run as web server using express having a REST API, should
use mongoDB queries to demonstrate following: (Total 25 Marks)
1.1 Create a Mongo dB collection to hold the data from the given CSV file. name this
collection as FootBall Data or any appropriate name. (marks 1)
1.2 Create mongoose Schema in a JS separate file (Name it as of your choice) for this
dataset and from this Schema create a model to be used in add, delete, update and find
queries. (marks 2)
1.3 Create another file (name it as of your choice) import the file that you uses
mongoose Schema created in 1.2 and make connection with mongoDB (marks 2)
1.4 Create a separate JS file ([Link] ) that runs a web server using express and import
the files created in 1.2 and 1.3 (marks 2)
Add the code in [Link] as required in the following :
1.5 , Add a Query in a POST method of the REST API that should be able to Add the
data to the Football collection in mongoDB marks 3
1. Team
2. Games Played
3. Win
4. Draw
5. Loss
6. Goals For
7. Goals Against
8. Points
1.6. write Query in a separate POST method for updating a single record for a Given
Team:
1. Team
2. Games Played
3. Win
4. Draw
5. Loss
6. Goals For
7. Goals Against
8. Points
9. Year
.(marks 3)
1.8 It should also have a separate endpoint using the POST method for deleting the record
for a given Team (marks 3)
1.7 It should also have an separate Get method to show the total games Played, Draw and
Won for the given year (marks 3)
1.9 it should have an endpoint to have a Query to display the first 10 records from the
Football data base to display all the Teams including all nine columns)) for the match “won”
greater than a given value entered by the user. the data should be displayed on
browser.(marks 3)
2.0. it should have an endpoint having a Query to display the all the Team (including all nine
columns) where average “Goal For” for a given year entered by the user the data should be
displayed on browser. . (marks 3)

2. Front End Application (20 Marks) : Create Front end using React Application
consisting of Components (either using functional or Class compoment) that should be
able to create user interface and access the appropriate REST API method using axios
API.
2.1 A component that makes a user interface using Form and HTML elements for
adding data i.e. number of Team,Games Played,Win,Draw,Loss,Goals For,Goals
Against,Points,Year to the collection in mongoDB through axios API marks 3.0

2.2 A component that to create user interface using Form and HTML element for update
Team,Games Played,Win,Draw,Loss,Goals For,Goals Against,Points,Year for a given
team Name marks 3.0

2.3 Create a User interface to show total total games Played, Draw and Won for a given
Team marks 3.0
2.4. A component that to create a user interface for deleting a record for a given team
marks 3.0
2.5. A component that to create userinterface to display first 10 drecords from the
records for Task mentioned in 1.9 marks 3.0
2.6. user interface to result of Task 2.0 i.e. Query to display the all the Team (including all
nine columns) where average “Goal For” for a given year marks 3.0
2.7 A React Router Application that integrates all the above components 2 Marks

The course work would be evaluated through the submitted Report ,a video presentation and Peer
Assessment form and Code. A template of this form is provided to all of you along the course
work.
What is the Peer Assessment Form:
Since it is a group project you all be working in the group. Each member of
the group would be submitting a peer review separately.
4 Summarize your code in a PDF Report 45 Marks including the Marks for Backend-
Front End
• Write a report(template given below) having proper format with a list of content, abstract introduction
reflecting your understanding of RESTAPI , coding used, etc. along with the development process
• The total marks of report 45 marks will include the marks of the backend i.e. 25 plus marks of
• Front end i.e. 20 marks.
• The report MUST contain, screenshots of the input and output of the user interface showing the
java script & HTML code and Mongodb query with proper explanation. It is mandatory to show all
the Mongo DB queries you used in the code, in the report according to the template provided below.
• The report should clearly mention the code mongoDB queries and snapshot of the user interfaces
as required in back-end and front-end application. For example you might use something like this
in your report
Task 1.1 : (snap shot of the code) explain its briefly and how it is used in User interface.

• Therefore in order to claim the marks for every respective tasks of the back-end and front-
end you must include the description of that task i.e. 1.1-1.9 for the back-end and 21.1-2.7
for the front end with code and corresponding user interface in the report.
• So If your report or presentation does not include any of the subtasks i.e. 1.1-1.9 for back
end and 2.1-2.6 for front-end with code and corresponding user interface screenshot, that
subtask will then be assumed incomplete and marked zero accordingly.

Therefore please note Your report and video presentation must evidence the completion of
every subtask to claim the marks of the corresponding sub task.

What to Submit
1. A single report should be submitted by the entire group showing the name of each
group member along with role of every group member in the project. The report
should be submitted on the Moodle,.
2. The entire code (JS files) in the zip file should also be submitted in the Moodle on the
provided link.
3. However Each member of the group will also submit a peer review assessment form
provided on Moodle. In this form you will assess how your group member participated
in the project. This will effect the final marks of the member of the group. For example
if the group project mark is say 80 then depending on the peer reviewe assessment
your marks can be same or less or greater than 80

5. Video Presentation (5 Marks)


The presentation of your project should be in group (one video presentation for entire
group) to give the demo of your work. The video should also use camera for the introduction
of each member of the group with his/her university ID card mentioned in the video. If any
of the member misses the presentation video he or she will lose 5 marks.
The video should be of 10-15 Minutes showing the working of the entire project. In the video
each group member will run at least one user interface of the project explaining the work he
or she is done in the project. The video will be submitted on Teams a separate channel
would be provided to upload the video.
Coursework Evaluation:

Report 45 Marks:
• Back End Application 25 Marks
• Front End Application 20 Marks
Video presentation 5 Marks
Total : 50 Marks

ASSIGNMENT TEMPLATE
SCHOOL OF ARCHITECTURE, COMPUTING & ENGINEERING

Module code CN5006


Module title Web and Mobile Application Development
Group
Names Student 1 (Name, ID)
Student 2 (Name, ID)
Student 3 Name ,ID
Case Study Title Title
Module leader Dr Nadeem Qazi
Assignment title Group report
Assignment number 1
Weighting 50%
REPORT TEMPLATE
Introduction/Abstract
The overall aim is to set the scene for your case study, explain any assumption, descope irrelevant issues,
etc.

Project plan
This section is used to explain who is doing what, milestones and other project planning [Link]
should mention here how you have structured the source code for back end and front end etc.

Body (You can give this section any name)


Use this section to respond to the questions as they are structured in the coursework document i.e. Back-
end and front end sub-domains describing each subs tasks
Example Task 2.1: you should describe the following in order to show that you have completed the task
2.1
Logic or procedure adopted: Describe here how did you performed that task
Code: Include the code and mongoDB queries for that subtask i.e. 2.1 and explain it
Interface: include the snapshot of subtask 2.1
Plagiarism

The University defines an assessment offence as any action(s) or behavior likely to


confer an unfair advantage in assessment, whether by advantaging the alleged
offender or disadvantaging (deliberately or unconsciously) another or others. A
number of examples are set out in the Regulations and these include:
“D.5.7.1 (e) the submission of material (written, visual or oral), originally produced by
another person or persons, without due acknowledgement, so that the work could be
assumed the student’s own. For the purposes of these Regulations, this includes
incorporation of significant extracts or elements taken from the work of (an) other(s),
without acknowledgement or reference, and the submission of work produced in
collaboration for an assignment based on the assessment of individual work. (Such
offences are typically described as plagiarism and collusion.)”
The University's Assessment Offences Regulations can be found on our web site.
Also, information about plagiarism can be found on the programme’s handbook.

Common questions

Powered by AI

The use of peer review in group assignments impacts students’ learning and performance by fostering accountability among team members, as individual scores may be adjusted based on peer feedback. This encourages deeper engagement in the project as students are mindful that their contributions are evaluated by peers. It also enhances collaborative skills and fosters reflection on personal and team performance, leading to improvements in personal work ethic and interpersonal skills. Moreover, it can mitigate issues of unequal participation, ensuring fairer evaluation of each member's efforts .

MongoDB and Express.js offer several advantages in this coursework. MongoDB provides a flexible schema design, which is ideal for handling the CSV data related to football statistics. It allows for efficient data manipulation and queries needed for tasks such as updating and fetching records based on specific metrics. Express.js provides a robust and minimal framework for setting up a REST API server. Its middleware capabilities allow for seamless handling of HTTP requests, making it easier to implement the API endpoints required by the coursework. Together, they enable a scalable and efficient backend setup for CRUD operations .

The role of React Router in the context of this coursework's front-end application is to integrate all the components developed for the user interface into a cohesive application. React Router facilitates navigation between different components such as forms for adding and updating data, displays for viewing records, and interfaces for deleting records. It allows seamless transitions and management of UI states, contributing to a well-structured and user-friendly interface .

The assignment criteria ensure demonstration of individual contributions through the requirement of a Peer Assessment Form, where each group member assesses the participation of others. The group contribution is evaluated via a single group report submitted on Moodle, containing each member's role and names. This system allows markers to adjust individual scores from the group mark based on peer feedback, ensuring fair assessment of individual efforts within a collaborative project .

The coursework emphasizes practical understanding and application of REST API principles through hands-on tasks that include creating, reading, updating, and deleting operations using Express.js to handle HTTP requests. Students are required to design a REST API with multiple endpoints that interact with MongoDB to perform data manipulations as specified. The need to implement specific queries and design both backend and frontend interfaces to access and display data reinforces conceptual knowledge while highlighting the practicalities of building an API-driven application. This approach bridges theoretical understanding with real-world programming challenges .

The key software components required for developing a web server application in this coursework include Node.js for the runtime environment, Express.js for building the backend web server, MongoDB for the database, and Mongoose for object data modeling. Additionally, React must be used for the frontend user interface development. The REST API should be designed using these technologies, and data management should be handled through MongoDB queries .

The inclusion of screenshots and code in the project report submission is essential for demonstrating that specific tasks were completed correctly. It provides visual evidence of the user interfaces and how tasks are executed, including MongoDB queries and JavaScript & HTML code. Detailed documentation with snapshots and explanations allows the assessment to verify that functional requirements were met and further ensures transparency and clarity in how the application's features were implemented .

Potential challenges in integrating the backend and frontend components may include mismatches in server-client communication due to incorrect REST API endpoints or response formats. Handling asynchronous data flow between the client (React frontend) and server (Express backend) can also be challenging, particularly with error handling and state management during API calls using axios. Ensuring all data operations (CRUD) are accurately reflected on the interface and managing potential conflicts or race conditions during data updates are further challenges that need careful design and testing .

The requirement of using only React for the user interface is likely specified to standardize the technology stack and focus on mastering specific skills. React is well-suited for building dynamic, component-based UIs, making it an ideal choice for applications requiring interactive components and real-time updates without reloading the page. By restricting the framework, the coursework ensures students develop proficiency in React’s concepts like state management and componentization, which are highly relevant in modern web and mobile application development environments .

The importance of video presentations in group projects, as outlined in the coursework, lies in their ability to complement written submissions by providing a dynamic demonstration of the project in action. They allow students to visually exhibit the functionalities of their application and articulate their individual contributions, enhancing transparency and authenticity. Additionally, video presentations facilitate engagement with the assessors and enable them to gauge the comprehensive understanding and communication skills of each group member. This multimedia approach ensures a more holistic evaluation beyond static written content .

You might also like