Faculty of Science and Technology
Department of Computer Science
WEB-BASED MOBILE
APP DEVELOPMENT
CST3145
Module Leader: Luca Piras
Term Autumn 2023
24 weeks
Document Version 01
WEB-BASED MOBILE APP DEVELOPMENT CST3145
2
CST3145_module_handbook_updated_20230831_v01.docx
Online location of handbook
This handbook can also be accessed via My Learning at: link.
Other formats available
This handbook is available in a large print format. If you would like a large print copy
or have other requirements for the handbook, please contact the Disability Support
Service disability@mdx.ac.uk
Disclaimer
The material in this handbook is as accurate as possible at the date of production. You
will be notified of any minor changes promptly. If there are any major changes to the
module you will be consulted prior to the changes being confirmed. Please check the
version number on the front page of this handbook to ensure that you are using the
most accurate information.
Other documents
Your module handbook should be read and used alongside your programme
handbook and the information available to all students on My Learning and UniHub,
including the Academic Regulations. Your programme handbook can be found on the
My Learning programme page for your programme.
WEB-BASED MOBILE APP DEVELOPMENT CST3145
3
CST3145_module_handbook_updated_20230831_v01.docx
Table of Contents
1 Welcome............................................................................................................................5
2 The module teaching team .............................................................................................5
3 Communication with the teaching team........................................................................5
4 Module overview...............................................................................................................6
5 Learning resources ........................................................................................................10
5.1 Reading List ...........................................................................................................10
6 Expectations of studying this module..........................................................................10
6.1 Professional behaviour and online conduct ......................................................11
6.2 Academic Integrity and Misconduct....................................................................12
6.3 Extenuating circumstances..................................................................................13
7 Assessment.....................................................................................................................13
Formative assessment......................................................................................................13
Summative assessment ...................................................................................................13
7.1 CourseWork 1 (CW1): Web App with Vue.js (40%) ........................................14
7.2 CourseWork 2 (CW2): Node.js Server and Express API (30%)....................19
7.3 CourseWork 3 (CW3): Progressive and Mobile App (30%) ...........................22
7.4 Extension, Late Penalty, Incentive System and Demonstration Process ....25
7.4.1 Extension........................................................................................................25
7.4.2 Late Penalty ...................................................................................................25
7.4.3 An Incentive System for Motivating Students to Have their Demo in The
First Weeks, and for Properly Balancing Demonstrations......................................25
7.4.4 Demonstration Process and Important Requirements/Instructions.......26
7.5 Feedback on your assignments..........................................................................27
7.6 How is your assignment mark agreed? .............................................................27
7.7 Anonymous Marking Assessment Policy ..........................................................28
8 Indicative Learning Planner..........................................................................................30
9 University 20-point Scale ..............................................................................................31
WEB-BASED MOBILE APP DEVELOPMENT CST3145
4
CST3145_module_handbook_updated_20230831_v01.docx
WEB-BASED MOBILE APP DEVELOPMENT CST3145
5
CST3145_module_handbook_updated_20230831_v01.docx
1 Welcome
This module teaches you how to build an app that run online and iOS or Android
devices using the web technologies that you started in the second year.
The student will be expected to pursue the latest progress in the Web app
development through group discussions and self-study.
2 The module teaching team
• Please see below details of the teaching team for this module.
Module Leader: Luca Piras
Room number: TG11
Email: l.piras@mdx.ac.uk
Telephone number: +44 (0)20 8411 2700
Office hours: Please email for an
appointment
Dubai Lecturer: Chinnu George
Room number:
Email: c.m.george@mdx.ac.uk
Telephone number:
Office hours:
3 Communication with the teaching team
Students may contact staff via e-mail and by making an appointment to see them (for
instance, online with a Zoom call).
Staff will contact students by e-mail, the My Learning module page and via lectures
and seminars. The team may send urgent group and/or individual messages about
the module to you by email, so it is important that you read your University email
regularly.
In the first instance problems should be dealt with by talking to a member of the
module team. You can give feedback on this module to the Module Leader, your
Student Voice Leader, to your Personal Tutor, and through the end of module
evaluation survey.
WEB-BASED MOBILE APP DEVELOPMENT CST3145
6
CST3145_module_handbook_updated_20230831_v01.docx
4 Module overview
Aims
This module aims to develop a deep understanding of the latest web-based app
programming techniques, frameworks, and methodologies used by the industry to
develop the next generation software that can be deployed on any mobile devices
(both Android and iOS). The module will investigate, develop, and deploy latest
programming language standards that are fundamental to app development and
currently being widely employed in industry. Modern programming frameworks will
be introduced to provide the essential software architecture for large-scale software
development and the ability to target either the Android or iOS platform. The module
will cover the three most important components of a complete mobile app: front end,
back end, and system administration.
Learning Outcomes
Knowledge
On completion of this module, the successful student will be able to:
1. Understand the latest programming standard required for advanced app
development.
2. Utilise the latest software architecture frameworks and understand their
strength and weakness.
3. Utilise of the latest serverless backend that provide app hosting and data
storage.
4. Utilise essential tools required such as version control, dependency
management, transpiling, and behaviour-driven development.
5. Understand the methodology of developing platform-independent mobile app
and the strength and weakness of existing libraries.
Skills
This module will call for the successful student to demonstrate:
6. Ability to develop efficient and robust app following the latest programming
standard.
7. Ability to design and implement industry-scale app utilising the latest software
frameworks.
8. Ability to host app online and design/manage serverless data storage.
9. Ability to efficiently deploy, config, and administrate essential tools required for
advanced web app development workflow such as version control, dependency
management, transpiling, and behaviour-driven development.
10.Ability to develop platform-independent mobile apps using Web-based
technologies.
11.Ability to design and evaluate cross-platform mobile apps based on customer
specifications.
WEB-BASED MOBILE APP DEVELOPMENT CST3145
7
CST3145_module_handbook_updated_20230831_v01.docx
Syllabus
• Object-oriented programming in functional language such as JavaScript.
• Advanced features in the latest programming language standard such as
ECMAScript 6.
• Version control and issue tracking with Git and Github.com.
• Software testing library such as Jest.
• Project dependency and compile tools such as NPM and Webpack.
• Full-stack software framework such as Vue.js:
o UI Component.
o User registration and authentication.
o Serverless data storage and sharing (such as Firebase).
o Messaging.
o Web APIs (such as Facebook and Google Maps).
o Hardware APIs (such as camera, gps, and other sensors).
• Platform-independent mobile app development with framework such as
NativeScript.
Learning and Teaching Strategy
Contact hours:
• Lecture: 1 hr
• Laboratory: 2 hrs
The focus of teaching will be a mixture of lectures and lab-based practical work and
discussions. Skills and experience are built up through weekly lab sessions that
progressively build up the knowledge and skills to complete a full-fledged web
application. Various tools, such as Git, NPM, and VSCode will be introduced
throughout the module as they become necessary. The student will be expected to
pursue the latest progress in the Web app development through group discussions
and self-study.
Assessment Scheme
a) Formative Assessment Scheme
Students will receive formative assessment on all drafts of summative assessments
tasks. Students will be expected to submit a draft to the seminar/lab tutor at least two
weeks before the submission deadline.
b) Summative Assessment Scheme
The coursework gives students the opportunity to put into practice all the theories,
frameworks, and libraries covered in the module. The three pieces of coursework
focus on the three aspects of a complete mobile app: front end (coursework 1), back
end (coursework 2), and administration (coursework 3). Each coursework is built
upon the one(s) before it.
WEB-BASED MOBILE APP DEVELOPMENT CST3145
8
CST3145_module_handbook_updated_20230831_v01.docx
Coursework 1 (individual) will allow students to apply the knowledge and features in
the latest programming standard to design and build the front-end of an app using
one of the architecture framework (Outcomes 1, 2, 5, 6, 7, 10, and 11).
Tasks shall include the design of the app architecture and the implementation of its
features with the advanced features in the latest programming standard. Through the
challenges such as understanding modern architecture and implementing advance
web features, students will improve their knowledge and skills for industrial software
development.
The format of this coursework will consist of a formal report and a demonstration of
the resulting app front end.
Coursework 2 (Individual) will allow students to design and implement the back end
of the app, including the user management, data storage, and messaging.
(Outcomes 3, 4, 5, 8, 9, 10, and 11).
Tasks include create user registration and login with both email/password and social
login such as Google+ and Facebook; hosting mobile app online so it can be
distributed and accessed remotely; design and the create the serverless storage that
records all the user data.
The format of this coursework will consist of a formal report and a demonstration of
the resulting app back end.
Coursework 3 (Individual) will require students to create the app administration
system that allows the app administrator to manage app settings, user, and data
(Outcomes 2, 3, 5, 7, 8, 10, and 11).
This coursework requires the students to design and develop the
management/administration system that allow system users to monitor and adjust
the app. The work will include the design and implementation of a series of visual
analysis functions for the understanding the system status and making sense of its
user behaviours. This will be built upon the front and back end work completed in the
first two coursework.
The format of this coursework will consist of a formal report which demonstrates the
design and development process and a demonstration of all the features.
Assessment Weighting
Coursework 1 (40%)
Coursework 2 (30%)
Coursework 2 (30%)
Total Notional Learning Hours
300
WEB-BASED MOBILE APP DEVELOPMENT CST3145
9
CST3145_module_handbook_updated_20230831_v01.docx
Research Ethics
• The teaching, learning, assessment and research activities undertaken
in this module have been considered and are not likely to require ethical
approval.
• However, please seek advice if undertaking the module entails carrying out
any research activities involving human participants, human data,
animals/animal products, precious artefacts, materials or data systems.
If you submit work that includes data gathered from or about people, this may
be treated as academic misconduct and could lead to fail grade being
awarded.
• Research ethics approval seeks to ensure all research is designed and
undertaken according to certain principles of ethical research. These include:
1. Primary concern must be given to the safety, welfare and dignity of
participants, researchers, colleagues, the environment and the wider
community
2. Consideration of risks should be undertaken before research commences
with the aim of minimising risks to those involved – i.e. human participants
or animal subjects, colleagues, the environment and the wider community,
as well as actual or potential risks to those directly or indirectly affected by
the research.
3. Informed consent should be freely given by participants, and by a trained
person when collecting or analysing human tissue (details on accessing
and completing online training for gaining informed consent for HTA
purposes can be found below in Section 8).
4. Respect for the privacy, confidentiality and anonymity of participants
5. Consideration of the rights of people who may be vulnerable (by virtue of
perceived or actual differences in their social status, ethnic origin, gender,
mental capacities, or other such characteristics) who may be less
competent or able to refuse to give consent to participate
6. Researchers have a responsibility to the general public and to their
profession; as such they should balance the anticipated benefits of their
research against potential harm, misuse or abuse which must be
avoided
7. Researchers must demonstrate the highest standards of ethical conduct
and research integrity. They must work within the limits of their skills,
training and experience, and refrain from exploitation, dishonesty,
plagiarism, infringement of intellectual property rights and the fabrication of
research results. They should declare any actual or potential conflicts of
interest, and where necessary take steps to resolve them.
8. When using human tissues for research, Human Tissue Act and Human
Tissue Authority (HTA) requirements must be met. Please contact the
relevant designated person (DP) in your department or the HTA
Designated Individual (DI) (Dr Lucy Ghali - L.Ghali@mdx.ac.uk). Further
information is provided below in the section: "Human Tissue Authority
Information", see 'Governance Structure" document and SOPs etc. 
9. Research should not involve any illegal activity, and researchers must
comply with all relevant laws.
WEB-BASED MOBILE APP DEVELOPMENT CST3145
10
CST3145_module_handbook_updated_20230831_v01.docx
• For more information about ethics go to the Middlesex Online Research
Ethics (MORE) system which has information and guidance to help you meet
the highest standards of ethical research using this link:
https://MOREform.mdx.ac.uk
• Information and further guidance on how to complete a research ethics
application form (e.g., video guides and templates) can be found on the
MORE MyLearning site*: http://mdx.mrooms.net/enrol/index.php?id=12277
(Log in required)
*Middlesex University Definition of Research document can be located on this
site.
5 Learning resources
This module has a variety of learning resources available for you to use to support
your learning. These include recorded lecture, lecture slides, feedback, and key
reading materials. These can be accessed online via the module page. Please visit
the module page regularly to make use of these.
5.1 Reading List
Your online reading is available at (as well as in the module website): CST3145
Reading List. It highlights recommended reading for this module. The course website
has many links to other online resources.
6 Expectations of studying this module
Attendance and Engagement
The module team are here to help and support you achieve your goals. One of the
key elements to successfully completing this module is engaging with all of the
learning opportunities we offer as well and working with your peers to support one
another.
This module is designed as a combination of contact sessions, directed study and
independent study. This means you must participate in all the allocated sessions and
you must complete all set prework and activities outside them. Students are
expected to take an active part in all learning sessions whether these are online or
on campus, for example lectures, lab sessions, practical classes, etc.
To make the most of this module please complete the following every week.
• Complete any potential prework indicated in preparation for learning sessions.
This may be watching videos, reading through set material or chapters and
WEB-BASED MOBILE APP DEVELOPMENT CST3145
11
CST3145_module_handbook_updated_20230831_v01.docx
completing activities. Please make notes of points you need to clarify and
discuss these in learning sessions with module tutors.
• Read through the notes making a note of any points you need to discuss with
your tutor.
• Complete the set activities before the next session, making a note of any
points you need to discuss with your tutor.
• Go to the module My Learning page regularly and use all the resources, for
example indicated reading, links, extra material, etc. Make a note of anything
you wish to discuss with your tutor.
• Complete potential further reading indicated.
The module team is committed to support you and your fellow students whilst you
undertake this module. In order for you to get the most out of sessions you need to
come prepared and ready to contribute. Please ensure that any work set by the team
has been completed before activities indicated. After each class please review what
has been covered and make a note of anything you would like clarification on.
Engaging with online and on-campus in-person learning and activities is integral to
your success. Middlesex University supports you to achieve your full potential
through a number of strategies, all of which provide a supportive learning
environment online, remotely, face-to-face, or blended.
Further information on attendance and engaging with your programme will be
available at your Induction and updates online at UniHub at the weblink below.
https://unihub.mdx.ac.uk/study/assessment/attendance
6.1 Professional behaviour and online conduct
The programme of study you are undertaking is underpinned by developing
professional behaviour and attitude. It is important that you are respectful and
supportive to your fellow students and tutors. Adopting this approach will create a
positive atmosphere within sessions and is something you can use in your professional
life. You must come to sessions prepared and ready to contribute where appropriate.
To access some of the rooms and specialist space used for this module you will need
your University ID card. Please remember that your University ID should be carried
with you always whilst on campus and you must be able to identify yourself if asked to
do so. Please conduct your email communication with fellow students, tutors and all
relevant staff in a formal and courteous manner. It is helpful to provide your student
number and if you have a query relating to a module include the module number as
well.
In the same way that we help you understand how to effectively participate in learning
on campus, we also want to make sure that you can make the most of online learning.
Our principles of online learning class conduct are available at:
https://unihub.mdx.ac.uk/covid-19-updates-faq/online-classroom-conduct
WEB-BASED MOBILE APP DEVELOPMENT CST3145
12
CST3145_module_handbook_updated_20230831_v01.docx
6.2 Academic Integrity and Misconduct
You should be aware of the University’s academic integrity and misconduct policies
and procedures. Taking unfair advantage over other students in assessment is
considered a serious offence by the University. Action will be taken against any
student who contravenes the regulations through negligence, foolishness or
deliberate intent. Academic misconduct takes several forms, in particular:
• Plagiarism – using extensive unacknowledged quotations from, or direct copying
of, another person’s work and presenting it for assessment as if it were your own
effort. This includes the use of third-party essay writing services.
• Collusion – working together with other students (without the tutor’s permission),
and presenting similar or identical work for assessment.
• Infringement of Exam Room Rules – Communication with another candidate,
taking notes to your table in the exam room and/or referring to notes during the
examination.
• Self-Plagiarism – including any material which is identical or substantially similar
to material that has already been submitted by you for another assessment in the
University or elsewhere.
Students who attempt to gain unfair advantage over others through academic
misconduct will be penalised by sanctions, according to the severity of the offence,
which can include exclusion from the University. Links to the relevant University
regulations and additional support resources can be found here:
Student Success Essentials Course which includes Academic Integrity
Access to course. -You will have to log into to MyUniHub and then MyLearning to
access the course.
Full details on academic integrity and misconduct and the support available can be
found at Academic Integrity | UniHub (mdx.ac.uk)
The Academic Integrity and Misconduct policy is available in our Public Policy
Statements (under Academic Quality) at: Our policies | Middlesex University London
(mdx.ac.uk)
Referencing & Plagiarism: Suspected of plagiarism?:
http://libguides.mdx.ac.uk/c.php?g=**2119&p=2155601
Referencing and avoiding plagiarism:
https://unihub.mdx.ac.uk/study/writing-numeracy/awl-resources/writing
The Middlesex University Students’ Union (MDXSU) Advice Service offers free and
independent support in making an appeal, complaint or responding to any
allegations of academic or non-academic misconduct.
https://www.mdxsu.com/advice
WEB-BASED MOBILE APP DEVELOPMENT CST3145
13
CST3145_module_handbook_updated_20230831_v01.docx
6.3 Extenuating circumstances
There may be difficult circumstances in your life that affect your ability to meet an
assessment deadline or affect your performance in an assessment. These are
known as extenuating circumstances or ‘ECs’. Extenuating circumstances are
exceptional, seriously adverse and outside of your control. Please see link for further
information and guidelines:
https://unihub.mdx.ac.uk/your-study/assessment-and-regulations/extenuatingcircumstances
7 Assessment
Formative assessment: Formative assessment is completed during your year of
study and provides the opportunity to evaluate your progress with your learning.
Formative assessments help show you and us that you are learning and
understanding the material covered in this course and allow us to monitor your
progress towards achieving the learning outcomes for module. Although formative
assessments do not directly contribute to the overall module mark they do provide an
important opportunity to receive feedback on your learning.
Summative assessment: Summative assessment is used to check the level of
learning at the end of the course. It is summative because it is based on accumulated
learning during the course. The point is to ensure that students have met the learning
outcomes for the course and are at the appropriate level. It is the summative
assessment that determines the grade that you are awarded for the module.
There are 3 assessment components in this module:
• Coursework 1 (week 8): Web App with Vue.js (40%).
• Coursework 2 (week 16): Node.js server and Express.js API (30%).
• Coursework 3 (week 22): Progressive and Mobile Apps (30%).
In order to pass this module, you need to pass all assessment tasks with an overall
minimum grade of 40% or equivalent.
Before you submit your work for final grading, please ensure that you have
accurately referenced the work. It is your responsibility to check the spelling and
grammar, as all written assessments will assess technical proficiency in the English.
This means accurate and effective spelling, punctuation and grammar. Details of
how it will be assessed will be provided in the marking criteria for each assessment
and the University overall approach can be found within the Grade Criteria Guide in
WEB-BASED MOBILE APP DEVELOPMENT CST3145
14
CST3145_module_handbook_updated_20230831_v01.docx
the University Regulations https://www.mdx.ac.uk/about-us/policies (scroll to
university regulations)
Reasonable adjustments will be made for those students who have a declared
disability/specific learning condition which would affect performance in this area.
If you have submitted a formative or draft assessment, you will receive feedback but
no grade. The comments should inform you about how well you have done or tell you
about the areas for improvement. All assignments should be submitted online unless
specified in assessment briefs.
Reassessment for this module normally takes place in the following way:
Normally in July with demonstration of improvement of the coursework, and ability to
clearly describe and demonstrate it.
Further information is available at
https://unihub.mdx.ac.uk/study/assessment
Middlesex University is committed to being fair in its approach to assessing student
learning following the UK Quality Code for Higher Education (Quality Code) (2018)
and the UK Quality Code - Advice and Guidance: Assessment (2018) and External
Expertise (2018).
The Assessment Fairness guidance, policies and procedures put in place by
Middlesex University is our commitment to ensure fairness in assessment and are
available at https://unihub.mdx.ac.uk/study/assessment/assessment-regulationsguide
If you have any queries or would like to know more on how this approach has been
applied to modules you are studying please contact your Programme Leader.
7.1 CourseWork 1 (CW1): Web App with Vue.js (40%)
Deadline: Week 7.
Type of CW: Individual Work.
IMPORTANT. A submission could receive zero marks if it fails any of the
following requirements:
• The student must book an available slot for the demo of a CW, by the CW
submission deadline, via the related "Individual Demonstration Booking
System" on the Module Page, AND the work must be demonstrated within
the demonstration weeks scheduled, during the demo slot booked
(IMPORTANT: see more details and guidance on demo booking at section
WEB-BASED MOBILE APP DEVELOPMENT CST3145
15
CST3145_module_handbook_updated_20230831_v01.docx
7.4.4 in the handbook, and for guidance on other important related aspects
at section 7.4 in the handbook).
• The work must be demonstrated and explained satisfactorily during
demonstration, i.e., student can explain what the code does.
Task. For this coursework, you need to create the Front-End of a fictitious web app,
which allows students and their parents to buy after school classes and activities.
The second coursework will add the Back-End and make the app to work offline, and
the third coursework will turn it into a Mobile App.
Submission
Instructions for the text area to compile when uploading your submission:
- please, indicate the same information requested below for the README file
Instructions for the zip file, it must contain the following elements, and must
be no more than 10MB:
• your code.
• a README file with the following 2 links:
o [Vue.js App] the link to your GitHub Repository.
o [Vue.js App] the link to your GitHub Pages from where the app can
directly run.
Overall Requirements and Instructions
• The coursework does not require any backend storage such as a (MongoDB)
database. For this CW it is not required to store data related to completion of
orders.
• You can use an external CSS library such as Bootstrap. Make sure the library
file or online link is included in the submission.
A submission could receive zero marks if it fails any of the
following requirements:
• the App must be implemented by using Vue.js framework. Other frameworks
or related technologies (e.g., React, AngularJS, Svelte, Apache, XAMPP) are
NOT allowed.
• Any JavaScript library is NOT allowed if it duplicates or replaces features
provided by Vue.js framework. Check with the tutor if not sure.
WEB-BASED MOBILE APP DEVELOPMENT CST3145
16
CST3145_module_handbook_updated_20230831_v01.docx
Figure 1. A Lesson element of the App
Figure 2. Sort functionality and List of Lessons
Figure 3. Shopping Cart and Checkout
WEB-BASED MOBILE APP DEVELOPMENT CST3145
17
CST3145_module_handbook_updated_20230831_v01.docx
Marking criteria
• General Requirements (10%):
A. [GitHub Repository] the code of the Vue.js App must be hosted in a
GitHub repository, with at least 10 commits (2%).
B. [GitHub Pages] the Vue.js App must be hosted and demonstrated
on/via GitHub Pages (3% if requirement is fully covered, 1% if app is
running locally).
C. [Vue.js framework, but NOT SFC] the App must be implemented using
Vue.js framework, but not using Single File Component (SFC) (SFC
will be covered in the last part of the module) (5% if requirement is fully
covered, 0% if app is implemented with SFC).
• “Display List of Lessons” functionality (5%):
A. there should be at least 10 lessons, and each lesson should have 5
spaces (or availability) (1%).
B. each lesson should have at least (2%): Subject, Location, Price,
Spaces (or availability: this indicates how many spaces are left), a Font
Awesome icon (or an Image).
C. the list of lessons must be stored as an array of JSON objects, one
object for each lesson, in a separate JavaScript file, such as lessons.js
or lessons.json (1%).
D. v-for must be used for the display of the lesson list (1%).
• Sort functionality (5%):
A. the user can choose to sort the lessons by one of the following
attributes (4%): subject (1%), location (1%), price (1%), or spaces (i.e.
availability) (1%).
B. there must be an option to sort in ascending or descending order (order
dependent on the sorting attribute selected), which should work for
each of the attributes (1%).
• “Add to Cart” functionality (5%):
A. each lesson must have an “Add to Cart” button (1%).
B. the button is always visible, and only enabled when space is larger
than 0 (1%).
C. clicking the button once (related interactions implemented by using von) will add one space to the shopping cart, reducing the remaining
space by one (2%).
D. once there is no more space, i.e. space = 0, the “Add to cart” button
should be disabled but still visible, i.e. clicking it will not further reduce
“space” nor add lessons to the cart (1%).
WEB-BASED MOBILE APP DEVELOPMENT CST3145
18
CST3145_module_handbook_updated_20230831_v01.docx
• “Shopping Cart” functionality (5%):
A. the shopping cart button should only be enabled after at least one
lesson is added to cart (1%).
B. clicking the shopping cart button should show the cart page, and
clicking the button again goes back to the lesson page (1%).
C. the shopping cart, in the cart page, should show all the lessons added
(1%).
D. in the shopping cart page, the user should be able to remove lessons
from the shopping cart; the removed lesson is added back to the
lesson list (in the lesson page) (2%).
• Checkout functionality (5%):
A. the checkout is part of the shopping cart page (1%).
B. a user must provide “Name” and “Phone number” before can click on
the “checkout” button (1%).
C. the “Name” must be letters only and the “Phone” must be numbers
only; the check must be done using JavaScript (suggestion: regular
expressions) (1%).
D. the “checkout” button is always visible and only enabled after valid
“Name” and “Phone” are provided (1%).
E. clicking the “checkout” button should display a message confirming the
order has been submitted (1%); it is not required to save the order, in
fact displaying the message completes the process, which is enough
for this CW.
• Search Functionality (5%):
• [Intro] this is the challenge component of this coursework, and it is not
expected that everyone can complete it. The solution is not covered in the
lecture or lab, so you need to research it.
• [Feature Description] the goal is to add a full-text search feature,
• The user can search for a lesson without specifying which attribute to
search on.
• For example, searching for “a” should return all the lessons with “a” in its
“title” or “location”.
• The search should send back results that include both "title" or "location",
while it is not required that it works also for “price” and “availability”.
• Solutions provided are marked as follows.
[Base Marks (provided depending on which following approach is chosen)]
A. [Approach 1] “using existing library” (2%), you can implement this feature
using an existing JavaScript library (does not have to be a Vue.js library),
in which case you receive maximum 2 marks.
OR
WEB-BASED MOBILE APP DEVELOPMENT CST3145
19
CST3145_module_handbook_updated_20230831_v01.docx
B. [Approach 2] “writing your own search function” (4%), you will receive
maximum 4 marks if you write your own search function, which, again,
does not have to use Vue.js.
[Further Mark]
C. “search as you type” (1%), there is also this mark if the search supports
“search as you type”, i.e. the search starts when user types the first letter
(displaying all the lessons containing that letter), and the result list is
filtered as more search letters are entered (similar to Google Search).
7.2 CourseWork 2 (CW2): Node.js Server and Express API (30%)
Deadline: Week 15.
Type of CW: Individual Work.
IMPORTANT. A submission could receive zero marks if it fails any of the
following requirements:
• The student must book an available slot for the demo of a CW, by the CW
submission deadline, via the related "Individual Demonstration Booking
System" on the Module Page, AND the work must be demonstrated within
the demonstration weeks scheduled, during the demo slot booked
(IMPORTANT: see more details and guidance on demo booking at section
7.4.4 in the handbook, and for guidance on other important related aspects
at section 7.4 in the handbook).
• The work must be demonstrated and explained satisfactorily during
demonstration, i.e., student can explain what the code does.
Task. The goal of this coursework is to build the Back-End for the app created in the
first coursework. MongoDB will be used for storing the data, and data exchange
between the app and the database will be done through REST API implemented
using Express.js. The Back-End will run on a Node.js server.
Submission
Instructions for the text area to compile when uploading your submission:
- please, indicate the same information requested below for the README file
Instructions for the zip file, it must contain the following elements, and must
be no more than 10MB:
• your code in 2 folders respectively related to:
o your Vue.js App.
WEB-BASED MOBILE APP DEVELOPMENT CST3145
20
CST3145_module_handbook_updated_20230831_v01.docx
o your Express.js App (do not include the ’node_modules’ folder,
otherwise, the zip will be too big to submit).
• a README file with the following links:
o [Vue.js App] the link to your GitHub Repository.
o [Vue.js App] the link to your GitHub Pages from where the app can
directly run.
o [Express.js App] the link to your GitHub Repository.
o [AWS Express.js App] the link to the AWS route that returns all the
lessons.
• the ‘lesson’ and the ‘order’ collections exported from your MongoDB Atlas.
See here for how to export collection in MongoDB Compass
(https://docs.mongodb.com/compass/current/import-export#export-data-froma-collection).
• the requests you created in Postman. See here for how to export requests in
Postman (https://learning.postman.com/docs/getting-started/importing-andexporting-data/#exporting-collections).
Overall Requirements
A submission could receive zero marks if it fails any of the
following requirements:
• the Back-End server must use “Node.js”; others such as Apache or Xampp
are not allowed.
• in relation to hosting the Back-End server, it not allowed to use AWS S3, nor
AWS EC2, nor other cloud-based hosting solutions (e.g., Heroku). The only
allowed one is AWS with the technologies covered in the related Lecture.
• the REST API must be developed with “Express.js”.
• the Front-End data access must be achieved with “promise” using “fetch”
function; “XMLHttpRequest” or library such as axios:js are not allowed.
• the data must be stored in “MongoDB Atlas” and retrieved via your Express.js
App; local MongoDB or any other databases are not allowed.
• connection to MongoDB (in your Express.js App) must use the native Node.js
driver only; libraries like Mongoose are not allowed.
Marking criteria
• General Requirements (8%):
A. [GitHub Repositories] the code of the Vue.js App must be hosted in a
GitHub repository (if you want, you can continue using the one of
CW1), and the code of the Express.js App must be hosted in another
GitHub repository (2% if 2 separated repositories are used, 1% if only 1
repository is used).
B. [GitHub Pages] the Vue.js App must be hosted and demonstrated
on/via GitHub Pages and connected (via Fetch) to your AWS
WEB-BASED MOBILE APP DEVELOPMENT CST3145
21
CST3145_module_handbook_updated_20230831_v01.docx
Express.js App (3% if requirement is fully covered, 1% if app is running
locally).
C. [AWS] the Node/Express server must be hosted on Amazon AWS (
https://aws.amazon.com/ ) (3% if requirement is fully covered, 1% if the
server is run locally, 0% if the server is hosted in another cloud-based
solution).
• MongoDB should have (4%):
A. a collection for lesson information (minimal fields: topic, price, location,
and space) (2%).
B. a collection for order information (minimal fields: name,
phone number, lesson IDs, and number of space) (2%). Suggestion:
the element lessonIDs can contain 1 or more lesson IDs, depending on
how many different kinds of lessons you have in your order. Other
solutions could be accepted: in fact, how you design this is not the
primary aspect of this module, therefore it is up to you to find a
reasonable solution that works satisfactorily.
• Middleware Functions implemented in the Express.js Server should
include (4%):
A. a “logger” middleware that outputs all requests to the server console
(2%).
B. a static file middleware that returns lesson images, or an error
message if the image file does not exist (2%).
• REST API implemented in the Express.js Server should include (6%):
A. one GET route /lessons that returns all the lessons as a json (1%).
Example:
[
{‘ topic’: ‘math’, ‘location’: ‘Hendon’, ‘price’: 100, ‘space’: 5},
{‘ topic’: ‘math’, ‘location’: ‘Colindale’, ‘price’: 80, ‘space’: 2},
{‘ topic’: ‘math’, ‘location’: ‘Brent Cross’, ‘price’: **, ‘space’: 6},
{‘ topic’: ‘math’, ‘location’: ‘Golders Green’, ‘price’: 95, ‘space’: 7},
]
B. one POST route that saves a new order to the “order” collection (2%).
C. one PUT route that updates the number of available spaces in the
“lesson” collection after an order is submitted (1%).
D. at least one Postman request is created for each route, and the student
is able to test all of them properly and explain them (2%).
• Fetch Functions implemented in the Front-End should include (3%):
A. one fetch that retrieves all the lessons with GET (1%).
B. one fetch that saves a new order with POST after it is submitted (1%).
C. one fetch that updates the available lesson space with PUT after an
order is submitted (1%).
WEB-BASED MOBILE APP DEVELOPMENT CST3145
22
CST3145_module_handbook_updated_20230831_v01.docx
• Search Functionality (5%):
• [Intro] this is the challenge component of this coursework, and it is not
expected that everyone can complete it. The solution is not covered in the
lecture or lab, so you need to research it.
• [Feature Description] The goal is to add a full-text search feature, similarly
to the challenge component of the Coursework 1.
• The user can search for a lesson without specifying which attribute to
search on.
• The search should send back results that include both "title" or "location",
while it is not required that it works also for “price” and “availability”.
• [Difference with CW1 Search Functionality and Development
Strategy/Constraints] The difference with “CW1 Search” is that the search
here needs to be performed in the Back-End (Express + MongoDB), not in
the Front-End as in CW1 (where it was implemented via Vue +
JavaScript). You will not receive any mark, for this part, if the search is
performed in the Front-End.
• You cannot use any existing library to implement this function. Otherwise,
you will not receive any mark for this part.
• Solutions provided are marked as follows.
A. “Fetch” (2%), in the front end, a “fetch” request should be created to send
the search information to the Back-End.
B. “Express API” (2%), an Express.js route should be created to handle the
search request, and to return the search results from the MongoDB. The
student should implement this as a GET route (“/search”), and should be
able to test it also without using the Front-End.
C. [Further Point] “search as you type” (1%), similarly to Coursework 1, there
is also this mark if the search supports “search as you type”, i.e. the
search starts when user types the first letter (displaying all the lessons
containing that letter), and the result list is filtered as more search letters
are entered (similar to Google Search).
7.3 CourseWork 3 (CW3): Progressive and Mobile App (30%)
Deadline: Week 21.
Type of CW: Individual Work.
IMPORTANT. A submission could receive zero marks if it fails any of the
following requirements:
• The student must book an available slot for the demo of a CW, by the CW
submission deadline, via the related "Individual Demonstration Booking
System" on the Module Page, AND the work must be demonstrated within
the demonstration weeks scheduled, during the demo slot booked
(IMPORTANT: see more details and guidance on demo booking at section
WEB-BASED MOBILE APP DEVELOPMENT CST3145
23
CST3145_module_handbook_updated_20230831_v01.docx
7.4.4 in the handbook, and for guidance on other important related aspects
at section 7.4 in the handbook).
• The work must be demonstrated and explained satisfactorily during
demonstration, i.e., student can explain what the code does.
Task. Make the Front-End of your “After School Lesson” app as a Progressive Web
App (PWA), and refactor the Front-End by using Vue.js Single-File-Component
(SFC). The refactored Front-End should have all the features required in CW1
individual work.
The refactored app should have at least three SFCs:
1. a Parent Component.
2. a Lesson Child Component that shows list of lessons.
3. a Checkout Child Component that allows users to manage an order.
Submission
Instructions for the text area to compile when uploading your submission:
- please, indicate the same information requested below for the README file
Instructions for the zip file, it must contain the following elements, and must
be no more than 10MB:
• your code related to:
o your PWA Vue.js SFC App (do not include the "node_modules"
folder, otherwise, the zip will be too big to submit).
• a README file with the following links:
o [PWA Vue.js SFC App] the link to your GitHub Repository.
o [PWA Vue.js SFC App] the link to your GitHub Pages from where the
app can directly run.
IMPORTANT: do not include any Back-End files, such as those for your Express.js
server. However, please make sure the server is running on AWS and the
MongoDB Atlas is online.
Marking criteria
• General Requirements (6%):
A. App implemented as a unique App, including refactoring and the PWA
behaviour in 1 solution (2%)
B. the front end must be refactored with Vue.js Single-File Component
(SFC) (2%).
WEB-BASED MOBILE APP DEVELOPMENT CST3145
24
CST3145_module_handbook_updated_20230831_v01.docx
C. the app must be hosted on GitHub Pages and demonstrated via the
related GitHub Pages URL (2%).
• [Refactoring] Parent Component (General Aspects) (5%):
A. the Parent Component must import and register Lesson and Checkout
as two child components (1%).
B. the Parent Component must have the "cart" button that shows the
number of lessons in cart, and switches between the Lesson and
Checkout as required in CW1, by using dynamic components switching
(2%).
C. the Parent Component must retrieve all the lesson information in
MongoDB Atlas through a REST API (exposed by the Back-End), and
pass it to Lesson Component with a prop (2% if demonstrated fully, 1%
if demonstrated with a local lesson.json file).
• [Refactoring] Lesson Component and Parent Component: Event-Based
Communication (5%):
A. the Lesson Component must display a list of lessons as required in
CW1 (1%).
B. the Lesson Component, for each lesson, must have an "Add to cart"
button as required in CW1. It must emit a custom event "add-item-tocart" that triggers the Parent Component to add a lesson to cart. It is
not allowed to change the shopping cart in the Lesson Component
(2%).
C. The Parent Component must respond to the "add-item-to-cart" event
(generated from the Lesson Component) by adding the lesson to
shopping cart (2%).
• [Refactoring] Checkout Component and Parent Component: EventBased Communication (6%):
A. the Parent Component must pass the shopping cart to the Checkout
Component as a prop (1%).
B. the Checkout Component must show all the lessons that are in the
shopping cart (1%).
C. the Checkout Component must allow users to remove lessons from
shopping cart, which must be achieved by emitting a custom event
"remove-item-from-cart" that triggers the Parent Component to remove
the lesson from cart. It is not allowed to change the shopping cart in the
Checkout Component (2%).
D. the Parent Component must respond to the removeLesson event
"remove-item-from-cart" (generated from the Checkout Component) by
removing the lesson from the shopping cart, and increasing the lesson
availability accordingly (2%).
• [PWA] The PWA should (5%):
WEB-BASED MOBILE APP DEVELOPMENT CST3145
25
CST3145_module_handbook_updated_20230831_v01.docx
A. include a Web Manifest File with at least basic properties (i.e., name,
short_name, icons, start_url and background color) and and use at
least two copies of the icon image with resolution 192x192 and
512x512 (1%).
B. be without any errors, installable, and runnable from the installed app
(1%).
C. be installed (to be installed during the demo) and demonstrated on a
computer, emulator, or mobile phone (3% mobile phone, 2% emulator,
1% computer).
• [PWA] The Service Worker should (3%):
A. cache all the local files needed to run the app offline (this includes html,
css, js, images, etc.), and the student should demonstrate the PWA
working offline accordingly (1%).
B. use the files from the cache whenever possible, even if the device is
online (1%).
C. add automatically and dynamically any required external files, such as
the Vue library file, to the cache (1%).
7.4 Extension, Late Penalty, Incentive System and Demonstration Process
7.4.1 Extension
All extensions must be applied through the Extenuating Circumstances
service (see Section “Extenuating circumstances” for more details). Please do not
contact the module leader for extension.
7.4.2 Late Penalty
The late penalty is 5% for each day after the deadline. It is the 5% of your final
mark. It is calculated as: “(1 − 5% × days) × mark”. For example, if you receive 30
for your coursework and you are 2 days late, your coursework mark will be (1 − 5% ×
2) × 30 = 27.
7.4.3 An Incentive System for Motivating Students to Have their Demo in The
First Weeks, and for Properly Balancing Demonstrations
Demonstrations of each part are scheduled in 3 weeks sessions starting after the
deadline. In order to distribute our Demonstrations, and to reward Students for
completing on time:
WEB-BASED MOBILE APP DEVELOPMENT CST3145
26
CST3145_module_handbook_updated_20230831_v01.docx
1. [First Week] if a student books and gives the Demo in the first scheduled
week, the student is rewarded with 2 points.
2. [Second Week] if a student books and gives the Demo in the second
scheduled week, the student is rewarded with 1 point.
3. [Third Week] for the 3rd week there are 0 reward points.
4. if a student gets the maximum in a CW part, points will be brought to the next
CW part (for the last CW part, no points can be brought forward, because
there are no further CW parts).
7.4.4 Demonstration Process and Important Requirements/Instructions
The following applies to the demonstration process of all coursework parts.
A submission could receive zero marks if it fails any of the
following requirements:
• The student must book an available slot for the demo of a CW, by the CW
submission deadline, via the related "Individual Demonstration Booking
System" on the Module Page.
• The work must be demonstrated within the demonstration weeks
scheduled, during the demo slot booked.
Demonstration Process: Important Instructions (obtaining a grade,
submission, demonstration and booking).
Requirements for obtaining a grade:
• to submit your work by the CW deadline AND
• to book your Demo by the CW deadline AND
• to attend and give your booked Demo.
Avoiding Issues related to Booking:
• when the booking system is created, there are enough slots for the number
of students of the Module (everything is scheduled and planned according
to the number of students, time, and available rooms).
• if you leave your booking at the last minute, there could not be the slot you
prefer, or slots could have been all booked.
• accordingly, it is your responsibility and part of a valid submission to
book your demo. Thus, if you try to book at the last minute and there are no
more available slots, it is your fault and unfortunately you get 0 for that part;
however, if you get an official extension/deferral from UniHelp, and the
Lecturer is notified from UniHelp, your Demo can be scheduled at the next
possible opportunity (in this case, after getting an official
extension/deferral from UniHelp, contact the Lecturer for asking a new
scheduling of your demo).
WEB-BASED MOBILE APP DEVELOPMENT CST3145
27
CST3145_module_handbook_updated_20230831_v01.docx
Avoiding Issues related to not attending your Booked Demo:
• it is your responsibility and part of a valid submission to attend your
booked demo and give your demo satisfactorily; if you cannot attend your
demo, and you have not important reasons, it is your fault and unfortunately
you get 0 for that part.
• However, if you cannot attend the demo (you have booked) due to important
reasons:
1. check if there are still available slots, and, in that case, feel free to
book another one autonomously.
2. if there are no other available slots, and if you cannot really attend
your booked demo due to important reasons, if you get an official
extension/deferral from UniHelp, and the Lecturer is notified from
UniHelp, your Demo can be scheduled at the next possible
opportunity (in this case, after getting an official extension/deferral
from UniHelp, contact the Lecturer for asking a new scheduling for
your demo).
[Applicable ONLY TO CW3, due to time scheduling constraints; while for CW1
and CW2 the following potential issues cannot occur] Avoiding issues related
to booking the demo, and also using the late penalty submission option:
• your demo must be booked in any case by the CW deadline (not by the late
penalty submission deadline).
• if you plan (or you are unsure if) to use the late penalty submission,
please, book a demo slot which is not in the first week of demonstrations.
7.5 Feedback on your assignments
Oral feedback will be provided during demonstration, and written feedback will be
provided in UniHub in electronic form.
Feedback will normally be provided within 15 working days after the lab
demonstration.
7.6 How is your assignment mark agreed?
External Examiners (external academic experts) review what we deliver at a
programme level. The University reviews a sample of your work to quality assure the
grades and feedback you received from the person who marked your work. Our
External Examiners will sample a selection of modules from a programme, with more
focus of outcomes between modules within a programme.
WEB-BASED MOBILE APP DEVELOPMENT CST3145
28
CST3145_module_handbook_updated_20230831_v01.docx
The following diagram provides an overview of the marking process for your module
assessment. Further information on the role of external examiners can be found at
https://www.mdx.ac.uk/about-us/policies/academic-quality/handbook (section 4)
7.7 Anonymous Marking Assessment Policy
We have worked with the Middlesex University Students’ Union (MDXSU) to create
an anonymous marking policy, in response to student feedback. Anonymous
marking ensures that your identity (your name, student number and other
personal/identifiable information) is not made available to academics when they are
marking your work. This means that you can have confidence that your
assessments will be marked fairly and consistently. However, there are some forms
of assessment for which anonymity cannot be guaranteed and these are recognised
in the policy. We believe that it is important to provide you with the support and
guidance needed to help you develop and prepare for your final assessments (those
which count towards your final grades i.e. summative assessments). Therefore,
anonymous marking will not apply to learning activities and assessments that do not
contribute to your final grades (i.e. formative assessments). If you require further
information and support to understand how anonymous marking works in your
programme modules please contact the Module Leader for more information.
1
• You submit your assignment
2
• The first marker grades the work and provides feedback; this could be completed
anonymously depending on the assessment type.
3
• A moderator or second marker reviews a sample of the work to quality assure the
grades and feedback, to ensure they are accurate. A final mark for the work is
agreed between the first marker and the moderator or second marker.
4
• A sample of work, from a selection of modules across the programme, is sent to
the External Examiner to check that the grading and feedback is at the right level
and in line with external subject benchmarks (this applies to levels 5, 6 & 7 only)
5
• Your final grades are submitted to the subject assessment board.
WEB-BASED MOBILE APP DEVELOPMENT CST3145
29
CST3145_module_handbook_updated_20230831_v01.docx
The Anonymous Marking Assessment Policy is available at:
https://www.mdx.ac.uk/__data/assets/pdf_file/0037/563599/anonymous-markingassessment-policy.pdf
WEB-BASED MOBILE APP DEVELOPMENT CST3145
30
CST3145_module_handbook_updated_20230831_v01.docx
8 Indicative Learning Planner
Week Module
Part
Lecture and Labs Assessment and
Feedback
1 1 Module Overview and JavaScript vs
Vue.js
2 1 Vue Instance and Starting Reviewing CW1
Requirements
3 1 Interactivity
4 1 Version Control with Git
5 1 Forms and Input with Vue.js
6 1 Refactoring with Conditionals and Loops
7 1 Coursework Time CW1 Individual Work Due
8 2 Full Stack Development and Node.js
9 2 Express.js and Middleware Functions CW1 Individual Work Lab
Demo
10 2 Routing Functions, Routers and Starting
Reviewing CW2 Requirements
CW1 Individual Work Lab
Demo
11 2 Fetch and REST API CW1 Individual Work Lab
Demo
12 2 Coursework Time
Student Christmas Vacation (SCV)
13 2 MongoDB Atlas, REST API and Postman
14 2 Amazon AWS and Fetch 2
15 2 Coursework Time CW2 Individual Work Due
16 3 Progressive Web Apps (PWAs)
1** Testing PWAs via HTTPS on Mobile, and
on Any Platform; Starting Reviewing CW3
Requirements
CW2 Individual Work Lab
Demo
18 3 Vue.js Components CW2 Individual Work Lab
Demo
19 3 Single File Component (SFC) CW2 Individual Work Lab
Demo
20 3 Refactoring the Pet Store App and Labs
with Coursework Time and Q&A
21 3 Coursework Time CW3 Individual Work Due
22 3 CW3 Individual Work Lab Demo CW3 Individual Work Lab
Demo
23 3 CW3 Individual Work Lab Demo CW3 Individual Work Lab
Demo
Easter Vacation
24 3 CW3 Individual Work Lab Demo CW3 Individual Work Lab
Demo
WEB-BASED MOBILE APP DEVELOPMENT CST3145
31
CST3145_module_handbook_updated_20230831_v01.docx
如有需要，請加QQ：99515681 或WX：codehelp