Docsity Application Development 1670 Asm1 Grade M

Application Development (1670) -
ASM1- Grade M
Web Application Development
FPT University (FPTU)
85 pag.
Document shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/

Downloaded by: le-trung-duc-btec-hn (ducltbh00954@fpt.edu.vn)
ASSIGNMENT 1 FRONT SHEET
Qualification BTEC Level 5 HND Diploma in Business
Unit number and title Unit 30: Application Development
Submission date Date Received 1st submission
Re-submission Date Date Received 2nd submission
Student Name Phan Nhat Linh Student ID GCD201635
Class GCD0905 Assessor name Nguyen Van Loi
Student declaration
I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I understand that
making a false declaration is a form of malpractice.
Student’s signature Linh
Grading grid
P1 P2 P3 M1 M2 D1

2

 Summative Feedback:  Resubmission Feedback:
Grade: Assessor Signature: Date:

Internal Verifier’s Comments:
Signature & Date: Document shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/

3
ASSIGNMENT 1
Subject: Application Development (1670)

4
Table of Contents
TASK 1. SOFTWARE REQUIREMENTS SPECIFICATIONS AND SOFTWARE DESIGN (P1 – P2) ........................ 9
I. Introduction (P1) ..................................................................................................................................... 9
1. Document Purpose ............................................................................................................................. 9
2. Product Scope..................................................................................................................................... 9
3. Intended Audience and Document Overview .................................................................................. 10
4. Definitions, Acronyms and Abbreviations ........................................................................................ 10
5. References and Acknowledgments .................................................................................................. 10
II/ Overall Description (P1) ....................................................................................................................... 12
1. Product Overview ............................................................................................................................. 12
2. Product Functionality ....................................................................................................................... 13
III. Specific Requirements (P1) ................................................................................................................. 14
1. Functional Requirements ................................................................................................................. 14
2. Use Case Model ................................................................................................................................ 17
3. Wireflow ........................................................................................................................................... 18
IV/ Technical Design (M1) ........................................................................................................................ 22
1. Entity Relationship Diagram ............................................................................................................. 22
2. Class Diagram ................................................................................................................................... 23
3. Activity diagram ................................................................................................................................ 25
4. Gantt Chart ....................................................................................................................................... 28
V/ Risk Assessment (P2) ........................................................................................................................... 30
TASK 2. TECHNOLOGIES EVALUATION ......................................................................................................... 32
I/ Design Tools .......................................................................................................................................... 32
1. Tools to design UML ......................................................................................................................... 32
2. Tools to design User Interface.......................................................................................................... 35
3. Conclude which tools willDownloaded
be used for the design of the application .............................................. 40
by: le-trung-duc-btec-hn (ducltbh00954@fpt.edu.vn)
II/ Front End technology stack.................................................................................................................. 41

1. Front End Programming Language ................................................................................................... 41
2. HTML/CSS/SCSS/SASS/LESS etc. ....................................................................................................... 44
5
3. JavaScript Library / Framework ........................................................................................................ 49
4. CSS Framework ................................................................................................................................. 52
5. Conclude which Front End technologies will be used for the development ................................... 54
III/ Back End technology stack .................................................................................................................. 55
1. Back End Programming Language .................................................................................................... 55
2. Operating System ............................................................................................................................. 58
3. Web Server ....................................................................................................................................... 61
4. Database ........................................................................................................................................... 65
5. Hosting.............................................................................................................................................. 69
6. Frameworks ...................................................................................................................................... 72
7. Conclude which Back End technologies will be used for the development .................................... 76
IV/ Tools for source control management ............................................................................................... 76
1. Git, GitHub, GitLab, etc..................................................................................................................... 76
2. Conclude which tools will be used for the development ................................................................. 79
V/ Software Development Models ........................................................................................................... 80
1. Introduce several SDLC models: Scrum, Waterfall, V-model. .......................................................... 80
2. Conclude which SDLC model will be used for the development (Waterfall, Scrum, etc.) with
explanations ......................................................................................................................................... 83
VI/ Illustrate all your findings on how to use these by drawing the overview ........................................ 84
REFERENCES ................................................................................................................................................. 85

6
Table of Figures
Figure 1: Workflow ....................................................................................................................................... 12
Figure 2: Use Case Model ............................................................................................................................. 17
Figure 3: Login wireflow ............................................................................................................................... 18
Figure 4: Admin wireflow ............................................................................................................................. 19
Figure 5: User wireflow ................................................................................................................................ 20
Figure 6: Owner flow .................................................................................................................................... 21
Figure 7: Entity Relationship Diagram .......................................................................................................... 22
Figure 8: Class diagram................................................................................................................................. 24
Figure 9: Activity diagram of customers....................................................................................................... 26
Figure 10: Activity diagram of store owners ................................................................................................ 27
Figure 11: Activity diagram of admin ........................................................................................................... 28
Figure 12: Gantt Chart .................................................................................................................................. 29
Figure 13: Lucidchart .................................................................................................................................... 32
Figure 14: Gleek.io ........................................................................................................................................ 33
Figure 15: Diagrams.net ............................................................................................................................... 33
Figure 16: Cacoo ........................................................................................................................................... 34
Figure 17: Gliffy ............................................................................................................................................ 35
Figure 18: Sketch .......................................................................................................................................... 36
Figure 19: Adobe XD ..................................................................................................................................... 37
Figure 20: UXPin ........................................................................................................................................... 38
Figure 21: Marvel ......................................................................................................................................... 39
Figure 22: Figma ........................................................................................................................................... 40
Figure 23: Javascript ..................................................................................................................................... 41
Figure 24: React ............................................................................................................................................ 42
Figure 25: HTML ........................................................................................................................................... 44
Figure 26: CSS ............................................................................................................................................... 45
Figure 27: SCSS ............................................................................................................................................. 46
Figure 28: SASS ............................................................................................................................................. 47
Figure 29: LESS.............................................................................................................................................. 48
Figure 30: jQuery .......................................................................................................................................... 49
Figure 31: Vuejs ............................................................................................................................................ 50
Figure 32: React ............................................................................................................................................
51
Figure 33: Bootstrap ..................................................................................................................................... 52
Figure 34: Tailwind ....................................................................................................................................... 53
Figure 35: Java .............................................................................................................................................. 55
Figure 36: C# ................................................................................................................................................. 56
7
Figure 37: PHP .............................................................................................................................................. 57
Figure 38: Window ....................................................................................................................................... 58
Figure 39: MacOS ......................................................................................................................................... 59
Figure 40: Linux ............................................................................................................................................ 60
Figure 41: Apache ......................................................................................................................................... 61
Figure 42: OpenResty ................................................................................................................................... 63
Figure 43: Cloudflare .................................................................................................................................... 64
Figure 44: MongoDB ..................................................................................................................................... 65
Figure 45: MySQL ......................................................................................................................................... 66
Figure 46: PostgreSQL .................................................................................................................................. 67
Figure 47: Azure............................................................................................................................................ 69
Figure 48: AWS ............................................................................................................................................. 70
Figure 49: Google Cloud ............................................................................................................................... 71
Figure 50: ASP.NET Core ............................................................................................................................... 72
Figure 51: Spring MVC .................................................................................................................................. 73
Figure 52: Laravel ......................................................................................................................................... 75
Figure 53: Git ................................................................................................................................................ 76
Figure 54: GitHub ......................................................................................................................................... 77
Figure 55: GitLab .......................................................................................................................................... 78
Figure 56: Scrum ........................................................................................................................................... 80
Figure 57: Waterfall ...................................................................................................................................... 81
Figure 58: V-model ....................................................................................................................................... 82
Figure 59: Overview...................................................................................................................................... 84

8
TASK 1. SOFTWARE REQUIREMENTS
SPECIFICATIONS AND SOFTWARE DESIGN (P1
– P2)
I. Introduction (P1)
1. Document Purpose
My team and I were tasked with the development of a website for FPTBooks, an online bookstore venture
backed by FPT. With the aim of meeting the company's requirements and catering to the needs of both
customers and the business, we conducted extensive research and opted to use ASP.Net core as the
language for the project.
To ensure the website is user-friendly and visually appealing, we integrated bootstrap on the front-end. As
for the database management system, we chose to use Microsoft SQL Server. This decision was based on
the fact that both SQL Server and ASP.Net Core are developed by Microsoft, which ensures seamless
integration between the two and minimizes the chances of errors.
The primary objective of the website is to aid both customers and book store owners in managing their
book purchases and sales. The website will simplify and speed up the process of selection, ordering, and
purchasing books for customers. Additionally, it will allow book store owners to manage a database of
users and products efficiently.
We are committed to delivering a high-quality website that is user-friendly, secure, and scalable. Our team
has extensive experience in web development and is dedicated to delivering the project within the given
timeframe and budget. We believe that with the use of ASP.Net core and other cutting-edge technologies,
we will be able to create a website that meets the needs of both FPT and its customers.
2. Product Scope
FPT Book website is a revolutionary platform that aims to transform the traditional way of selling books
by bringing it online. Our team of expert developers has used cutting-edge programming languages and
frameworks to create a user-friendly and efficient website that makes it easy for users to find the books
they want quickly and conveniently.
The website is designed to cater to the needs of both book store owners and customers. For customers,
FPT Book provides a comprehensive Downloadedonline marketplace
by: le-trung-duc-btec-hn where they can browse through a wide selection
(ducltbh00954@fpt.edu.vn)
of books and make purchases with ease. With the help of advanced search algorithms, users can quickly
find the books they want based on their preferred genres, authors, and titles.
9
One of the unique features of FPT Book is the ability to provide a demo of the book that users are
interested in. This feature will give users a preview of the book and help them make informed decisions
before making a purchase. Additionally, the website provides customers with the option to pay for their
purchases using e-wallets, which adds to the convenience of the platform.
For book store owners, FPT Book provides an intuitive and easy-to-use interface that allows them to
manage their inventory efficiently. The website allows owners to add new books, update existing ones,
and track their inventory in real-time. Owners can also manage their sales and customer database with
ease, helping them to streamline their operations and improve their bottom line.
In summary, FPT Book is a one-stop-shop for all your book-related needs. With its user-friendly interface,
advanced search algorithms, and unique features such as book demos and e-wallet payments, FPT Book
is set to revolutionize the way we buy and sell books online.
3. Intended Audience and Document Overview

This report serves as a comprehensive analysis of the Application Development subject, with a particular
focus on the deployment functionality and use case model. The aim of this report is to provide an in-
depth understanding of the development process and the key elements that were considered during the
project.
The deployment functionality is a critical aspect of any application development project, and this report
delves deep into the various strategies and techniques that were employed to ensure seamless
deployment. The report also outlines the key challenges that were faced during the deployment process,
as well as the solutions that were implemented to overcome these challenges.
4. Definitions, Acronyms and Abbreviations

 ASP.Net Core
 BE: Back-end
 Bootstrap: Bootstrap 5
 DB: SQL Server Database
 FE: Front-end
 MVC: Model-View-Controller
 ERD: Entity Relationship Diagram
 CRUD: Create-Read-Update-Delete
5. References and Acknowledgments Downloaded by: le-trung-duc-btec-hn (ducltbh00954@fpt.edu.vn)
 GeeksforGeeks (2019, 07 Jun) “Scrum (software development)”. [Online].
Available at: https://www.geeksforgeeks.org/scrum-software-development/
 Simplilearn (2022, 12 Jul) “What is Git: Features, Command and Workflow in Git”. [Online].
10
Available at: https://www.simplilearn.com/tutorials/git-tutorial/what-is-git#features_of_git
 W3school (2022) “What is GitHub?”. [Online].
Available at: https://www.w3schools.com/whatis/whatis_github.asp
 Isabella Gabbert (2022, 05 October) “Overall Satisfaction with Google Drive”. [Online].
Available at: https://www.trustradius.com/reviews/google-drive-2022-10-04-09-54-49
 Redwerk (2021, 01 February) “ASP.NET Core Advantages and Disadvantages”. [Online].
Available at: https://redwerk.com/blog/asp-net-core-pros-and-cons/

11
II/ Overall Description (P1)
1. Product Overview
Figure 1: Workflow
When a user enters the website and performs any function, the website will prompt the user with a login
form and allow them to log in with their account. Each account has a specific role that determines
whether they are an admin, owner, or customer.
12
Accounts with an admin role have permission to approve or reject requests from users and reset the
passwords of any account.
Accounts with an owner role have permission to create, read, update, and delete books, make requests,
and view customer records.
Accounts with a customer role have permission to view all books, view book details, search for books,
and purchase books.
This system ensures that users have the appropriate level of access and functionality based on their
account role. It also provides security by ensuring that only authorized users can access certain features
of the website.
2. Product Functionality
As a customer:
 Customers can log in and log out of their account.

 Customers can view the store homepage and browse all available books.
 Customers can view detailed information about a specific book.
 Customers can search for books using keywords or filters.
 Customers can add books to their cart and complete the purchase.
 Customers can register for an account and create a profile.
As a store owner:
 Store owners can log in and log out of their account.

 Store owners can view all books and categories available in the store.
 Store owners can add, edit, or delete books from the store inventory.
 Store owners can view customer order records and mark them as fulfilled when completed.
 Store owners can search for books using keywords or filters.
As an admin:
 Admins can log in and log out of their account.

 Admins can reset the password of any account in the system.
 Admins can add, edit, or remove user accounts.
 Admins can approve
Documentor reject
shared requests from the book owners, such as requests to add new books
on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/
to the store inventory.
This system ensures that each user has a specific set of permissions based on their role, providing a
secure and efficient way to manage the online bookstore.
13
III. Specific Requirements (P1)
1. Functional Requirements
AS A I WANT TO SO THAT I CAN
View the homepage of the website view the website's interface and interact with it
understand how many categories are available

view a list of books categories
in the store
find out how many books are in the shop and
view all books in the store their descriptions on the website (name, image,
price).
Choose a category to see all of the know how many products in that category and
goods in that category. their details
know more about each book in the shop so that
view book details
I can determine whether or not to buy it
see all the information of book
Learn more about the book before deciding to
including name, author, images,
purchase it.
descriptions, price.
Customer search for book by name of book or
quickly and simply locate a book
author
See all the books that I choose and purchase 1
Have a cart
time.
Login before purchase Protect my account
Logout Protect my information
Have a register screen Register for new account and have my profile.
View my information to check if they can be

Have a profile
wrong or not
See the help screen Have a guide for using the website
14
know how many categories there are in my
see all the categories in my store
store.
know how many books there are in my store
view all books in my store and view all details of each (name, author,
images, descriptions, price).
Add new book Add more books in my store
Update book information in case they have

Update book
wrong information
Delete book Remove the book
Add new category of book Have more books in that genre

Store
Owner
Delete category Remove the category of book
View all the record orders of customer Manage the book have been sold.
Search for books by name or author Find the book easily and quickly
Login before going to main screen Protect my data in store
Logout Protect my data
Finish the order when the customer have been

Remove the order
purchased.
Login before going to admin screen Protect my data

Admin Logout Protect my data
View all the accounts of customers Manage the customer accounts
15
Edit the accounts of customers Reset password of customer if I need
Delete the accounts of customers Remove the account of customer if I need
View all the accounts of Store Owners Manage the Store Owners accounts
Edit the accounts of Store Owners Reset password of Store Owners if I need
Delete the accounts of Store Owners Remove the account of Store Owners if I need
Approval or reject request from store

Manage the store
owners
Input password before doing any
Protect my account and my store
action

16
2. Use Case Model
Figure 2: Use Case Model
As depicted in the use case diagram, the system has three primary users: customers, store owners, and
admins. Customers can register as members and log in and out of the system. They have the ability to
view all books available in the store, along with detailed information about each book. Customers can
also search for specific books and complete a purchase once they find the desired item.
Store owners can log in and out of the system and view all books available in the store. They have the
ability to add new books, edit existing books, and remove books from the store inventory. In addition,
store owners can also add, update, or delete categories, but these actions require approval from the
admin.
17
Admins can log in and out of the system and have the ability to approve or reject requests made by store
owners, such as requests to add new categories. They also manage user accounts and have the ability to
reset passwords if necessary.
In summary, the system is designed to cater to the needs of customers, store owners, and admins. Each
user has specific functions and permissions based on their role, ensuring the efficient and secure
management of the online bookstore.
3. Wireflow
Figure 3: Login wireflow
In order to access the owner or admin section of the website, users must first log in with their
credentials. Once logged in successfully, they will be granted access to the full range of tools and
features available to them.
For customers, the process of logging in is somewhat different. Customers can log in from the
homepage, but they must have an account in order to do so. If a customer does not already have an
account, they can easily register as a member by providing their personal details and creating a unique
login and password. Document shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/
Once registered, the customer can log in to the website and begin browsing the available books. They
can view detailed information about each book, including its title, author, category, image, and price. If
they decide to purchase a book, they can add it to their cart and proceed to the checkout page, where
they can input their shipping and payment details.
18
By creating an account, customers are able to enjoy a more personalized and streamlined shopping
experience. They can easily view their order history, manage their payment and shipping information,
and receive updates and notifications about new books and special offers.
Overall, the login and registration process is designed to be simple and intuitive, allowing customers to
quickly and easily create an account and begin exploring the website's extensive collection of books.
With a focus on user experience and customer satisfaction, this approach is sure to delight customers
and drive sales for the online bookstore.
Figure 4: Admin wireflow
Once logged in, admins have access to all customer and store owner accounts. They can add new
accounts, edit existing accounts, and delete accounts as needed. Additionally, admins have the ability to
reset passwords for any account if necessary.

19
Figure 5: User wireflow
The customer wireflow for the website involves a straightforward and intuitive process for customers to
browse and purchase books. Upon visiting the website, customers are presented with a comprehensive
display of all books available in the store, allowing them to browse and explore at their leisure.
If a customer desires more detailed information about a particular book, they can simply click on it to
view the book's details. The detail window will then show the book's title, author, category, image, and
price, giving customers all the information they need to make an informed purchase decision.
When a customer decides to purchase a book, they can easily add it to their cart with a single click. The
cart window then displays a list of all the books that the customer has chosen, allowing them to review
their selections before proceeding to the purchase window.
The purchase window is where customers can complete their transaction by inputting their shipping and
payment information. This final step is designed to be straightforward and streamlined, ensuring that
customers can quickly and easily purchase the books they want without unnecessary delays or
complications.
Overall, the wireflow provides a seamless and intuitive user experience that makes it easy for customers
to browse, select, and purchase books from the store. This approach is sure to delight customers and
20
boost sales, making it a smart choice for any online book retailer looking to improve their customer
experience.
Figure 6: Owner flow
Once the store owner has successfully logged into the system, they are provided with a range of
powerful tools to help them manage their books more effectively. These tools include the ability to add
new books, edit existing ones, and delete books that are no longer needed.
Adding a new book is a simple process that involves filling out a form with all the relevant details, such as
the book's title, author, category, image, and price. Once the form has been completed, the new book is
automatically added to the store's inventory, ready for customers to browse and purchase.
Editing an existing book is just as straightforward, with owners able to modify any of the book's details as
needed. This can include updating the book's price, changing the book's image, or adjusting its category.
However, when it comes to changing a book's category, owners are required to send a request to the
admin for approval, ensuring that the store's category system remains consistent and well-organized.
Deleting a book is also a simple process, with owners able to quickly remove any books that are no
longer needed. This can be useful for managing inventory levels and ensuring that the store continues to
offer a current and relevant selection of books.
Overall, the store owner's management tools provide a powerful and flexible set of features that enable
them to manage their books with ease. By streamlining the process of adding, editing, and deleting
books, owners can focus on providing the best possible customer experience, leading to increased sales
and customer satisfaction.
21
IV/ Technical Design (M1)
1. Entity Relationship Diagram
An Entity Relationship diagram is designed to provide a visual representation of the entities, attributes,
and relationships involved in the online bookstore system. The ERD consists of several entities, including
Users, Orders, OrderDetails, Products, and Categories. The User entity represents the users of the system
who can browse and purchase products. It contains attributes such as customer ID, name, email, and
address. The Orders entity represents the orders placed by customers and contains attributes such as
order ID, order date, and total price. The Products entity represents the items that are available for
purchase and contains attributes such as product ID, name, description, and price. The Categories entity
represents the different categories in which products are classified and contains attributes such as
category ID and name. The OrderDetail entity represents the detail of an order that includes OrderID,
ProductID, quantity, and total.

Figure 7: Entity Relationship Diagram
22
The ERD also contains relationships between these entities. The Customers entity has a one-tomany
relationship with the Orders entity, which means that a customer can place multiple orders. The Orders
entity has a one-to-many relationship with the OrderDetails entity, which means that an order can
contain multiple OrderDetails. The OrderDetails entity has a many-to-one relationship with the Product
entity, which means a book can appear in various OrderDetail records. The Products entity has a many-
to-one relationship with the Categories entity, which means that many products can have the same
category. Overall, the e-commerce bookstore ERD provides a comprehensive overview of the entities
and relationships involved in an online shopping system. It helps to identify the data requirements of the
system, making it easier to design and develop an efficient and effective e-commerce platform.
2. Class Diagram

23
Figure 8: Class diagram
Generally, there are eight classes in my class diagram including User, Customer, Admin, Owner, Order,
OrderDetail, Book, and Category.
Account class:
The Account class represents the user's account, which can be used to log in to the system. It contains
attributes like an account ID, username,
Downloaded by:and password.
le-trung-duc-btec-hn (ducltbh00954@fpt.edu.vn)
Customer class:
The Customer class represents a customer who can place orders through the system. It contains
attributes like a customer ID, name, email, and phone number. This class inherits from the class
24
Account and has a composition relationship with class Order.
Admin class:
The Admin class represents an administrator who can manage the system, including the accounts of
customers and owners. It contains attributes like an admin ID, name, email, and phone number. This
class inherits from the class Account.
Shop owner class:
The Shop owner class represents a bookshop owner who can manage the books available in their shop. It
contains attributes like a shop owner ID, name, email, and phone number. This class inherits from the
class Account and has aggregation relationships with class Book and Category and an association
relationship with class Order.
Order class:
The Order class represents an order placed by a customer. It contains attributes like an order ID, date,
customer ID, and status. This class is associated with the Customer class, indicating that an order is
placed by a customer. Also, it has a composition relationship with OrderDetail, indicating that the order
contains one or more order details.
OrderDetail class:
The OrderDetail class represents the details of an order, including the books ordered, quantity, and
price. OrderDetail is associated with Book, indicating that an order detail is for a specific book.
Book class:
The Book class represents a book that can be sold through the system. It contains attributes like a book
ID, title, author, price, and quantity.
Category class:
The Category class represents the categories that books can be classified into, such as fiction, non-
fiction, or science fiction.
3. Activity diagram Downloaded by: le-trung-duc-btec-hn (ducltbh00954@fpt.edu.vn)
25
Figure 9: Activity diagram of customers

26
Figure 10: Activity diagram of store owners

27
Figure 11: Activity diagram of admin
4. Gantt Chart

28
Figure 12: Gantt Chart

29
V/ Risk Assessment (P2)
Identify and list Hazards List Current Risk Controls List Additional Controls (if any - where current controls are
Risk Rating
not adequately managing the level of risk)
Regular backup of data, strong Implement encryption for sensitive data,

1 Data security breach High
password policy conduct regular security audits
Implement a backup system for critical data,

2 Software malfunction Regular testing and debugging Medium establish a protocol for responding to system
failures
User manuals and instructional Conduct training sessions for new users,
3 Inadequate user training Low
materials provide ongoing support and assistance
Implement a review system for product

Inaccurate or incomplete Regular quality checks,
4 Medium information, establish a process for updating
product information standardized product descriptions
and correcting errors
Implement a ticketing system for customer

Inadequate customer Online support resources,
5 Low inquiries, conduct customer satisfaction surveys
support customer service hotline
to identify areas for improvement.
30

31

TASK 2. TECHNOLOGIES EVALUATION
I/ Design Tools
1. Tools to design UML
a. Lucidchart
Figure 13: Lucidchart
Many developer’s go-to diagramming tool, Lucidchart provides a suite of simple tools. Lucidchart works
in real time across many platforms thanks to its code being HTML 5-based. Lucidchart integrates with
Confluence, and also with MS Team, Slack and G Suite. Lucidchart handles anything from complex
system diagrams to mind maps. Lucidchart has fans among less-technical development team members
because of its easy drag-and-drop user interface. Check out our Draw.io vs. Lucidchart article to get a
more in-depth look at the app’s functionality.
Lucidchart input type:
 Drag-and-drop
UML diagram types where lucidchart shines:
 Class diagrams
 Sequence diagrams
 Activity diagrams
32
b. Gleek.io
Figure 14: Gleek.io
Gleek.io creates several types of UML diagrams: sequence diagrams, class diagrams, and object
diagrams. Teams also use Gleek.io to create org charts, flowcharts, mind maps and many other diagrams.
As power users and developers know, using the keyboard proves much faster than using a mouse.
Because Gleek.io relies on keyboard commands, developers work faster than they do with drag and drop
diagramming programs. And Gleek.io has syntax help available right in the diagramming window should
you get stuck.
Gleek input type:
 Keyboard, not drag-and-drop
UML diagram Gleek.io does best:
 Class diagrams
 Object diagrams
c. Diagrams.net

Figure 15: Diagrams.net
Diagrams.net (formerly draw.io) offers a simple drag-and-drop interface for flowcharts and graphs, but
also works for UML as well. Diagrams.net works well for a wide variety of tasks, but may not have
33
enough specialized functions for some users. If you seek a drag-and-drop UML solution, draw.io costs a
bit less than Lucidchart and offers the same ease-of-use for general users.
Input type:
 Drag-and-drop
UML diagram types that diagrams.net specializes in:
 Case diagrams
d. Cacoo
Figure 16: Cacoo
Cacoo gives a great diagramming experience to a wide variety of users. Most people will be able to start
diagramming very quickly with Cacoo’s intuitive drag-and-drop interface. Cacoo also offers real-time
collaboration, so teams can find problems together quickly. You do not need to know everything about
UML to use Cacoo. Cacoo might not meet the needs of every developer. It’s a drag-and-drop solution
aimed at a general audience of users.
Input type:
Drag-and-drop
UML diagram types that Cacoo does well:
 Use case diagrams

34
e. Gliffy
Figure 17: Gliffy
Gliffy provides themes and templates to draw many UML diagrams. Gliffy employs a drag-and-drop
interface. Gliffy also works well to create other types of charts and diagrams. Gliffy offers a space to
create just about anything you would write on a whiteboard, but in virtual space. This might not be ideal
for users looking for a hand-core UML solution. Gliffy works well for teams that have members who are
less fluent in UML and diagramming. Read more about the tool in the detailed comparison of Lucidchart
and Gliffy.
Input type:
 Drag-and-drop
UML diagram types that Gliffy does well:
 Packet diagrams
 Composite structure diagrams
 component diagrams
2. Tools to design User Interface

a. Sketch
Sketch is a vector graphics editor used for drawing, wireframing, prototyping and design handoff—
essentially everything you need to bring your designs to life.
35
Figure 18: Sketch
Sketch is a powerful and flexible UX and UI design platform built for collaborative design. It has long
been considered an industry-standard tool, ideal for both beginner and advanced designers. However,
bear in mind that Sketch is only compatible with macOS.
Key features:
 Intuitive vector editing tools and editable boolean operations for flexible and iterative design
 Infinite design canvas with flexible Artboards, design presets, customisable grids and simple
resizing tools, allowing you to scale your designs to any screen size
 Shorthand and math operators to speed up the design process
 Variable and OpenType fonts for infinite control over your interface typography
 Cross-platform tools for real-time collaboration, feedback, sharing and developer handoff
b. Adobe XD
Adobe XD is another all-encompassing vector-based UI tool packed with features for collaborative design
and prototyping.

36
Figure 19: Adobe XD
Adobe XD is considered by many as the go-to design tool. It’s fast, it’s powerful, and there’s not a lot you
can’t do with it! From early ideation and low-fidelity designs, right through to impressive animations and
true-to-life prototypes, Adobe XD will see you through the entire UX and UI design process.
Adobe XD is part of the Adobe Creative Cloud suite and can be used with both Windows and Mac, giving
it a slight edge over Sketch.
Key features:
 Vector-based drag-and-drop editor tool with unlimited artboards and smart guides that help you
to align different objects and elements in your designs
 UI kits (i.e. ready-made components) for Apple Design, Google Material Design, Amazon Alexa,
and more
 3D Transforms, allowing you to simulate object depth and perspective in your designs
 Components and states for iterative and scalable design. Components work intuitively to
instantly push changes across entire designs or documents, sparing you the work of manually
duplicating and implementing changes
 Powerful animation functionality, including video and Lottie playback, micro-animations and
motion effects, scroll groups and anchor links
 Voice prototyping, enabling youby:tole-trung-duc-btec-hn
Downloaded create voice commands, build in speech playback, and
integrate voice-enabled features

 Design Specs feature to streamline the handoff process, allowing you to share interactive
prototypes, CSS code snippets and downloadable assets with developers—all via one link
37
c. UXPin
UXPin is a popular UX and UI tool, used by both new and seasoned designers alike. UXPin is another end-
to-end platform capable of delivering polished, interactive prototypes—no coding skills required.
Figure 20: UXPin
If you’re already familiar with Sketch or Photoshop, you’ll find the UXPin interface fairly easy to navigate.
Not only does it come with thousands of ready-to-use design components; it’s also well-equipped to help
you create and manage solid design systems.
UXPin works with Mac and Windows, or in the browser.
Key features:
 Built-in libraries for iOS, Google Material Design, Bootstrap and User Flows, full of ready-to-use
interactive elements, colours, text styles and icons
 Interactive components that you can drag into your designs to create high-fidelity interactions
 Embedded user flow capabilities to help you tell the story of your work
 Built-in contrast checker and colour blindness simulator to help you ensure your designs are as
accessible and inclusive as possible
 Streamlined developer handoff Downloaded by: with downloadable
le-trung-duc-btec-hn design specs
38
d. Marvel
Marvel promises all the core functionality you need to design and build digital products, including
wireframing, prototyping, and design specs for handoff. And, with its user-friendly and intuitive platform,
it’s the ideal UX/UI design tool for beginners.
Figure 21: Marvel
Marvel is a web-based tool that works in the browser, so you don’t need to download or install anything.
It has been built for simple, fast design, with features for wireframing, UI design, and prototyping.
Marvel also integrates with many other popular design tools to help you power up your workflow.
Key features:
 Drag-and-drop wireframe templates for quick, early-stage designs

 A vast collection of pre-made assets, images and icons to help you visualise your ideas
 Option to import static designs from other tools (e.g. Sketch)
 Interactive prototyping with hotspots, interactions and layers. You can learn more about how to
use Marvel for prototyping (and about other prototyping tools) in this guide
 Built-in user testing functionality to get feedback on your ideas and validate your designs
 Design handoff tool to instantly turn designs into code, specs and assets for developers to use
 Integrations for Jira, Maze, Confluence, Lookback, and more
e. Figma Document shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/
You’ll struggle to find a UX/UI tools list that doesn’t mention Figma, and for good reason. Figma is a
browser-based interface design tool that empowers fast design and prototyping and a smooth,
collaborative workflow.
39
Figure 22: Figma
ust like Sketch and Adobe XD, Figma is a vector graphics editor. Figma is ideal if you’re looking for an all-
in-one tool to cover everything from ideation to interactive prototyping—wrapped up in a delightfully
intuitive interface.
And, if you do give Figma a go, be sure to try out FigJam, too—Figma’s online whiteboard tool for
collaborative ideation, brainstorming and workshops.
Key features:
 Modern pen tool which allows you to draw in any direction with Vector Networks
 Auto Layout for easy responsive design
 Flexible Styles which you can apply across all your UI projects
 Accessible libraries with ready-made assets which you can drag and drop into your design files
 Code snippets for CSS, iOS, and Android, ensuring easy developer handoff
 Plugins to automate and augment your design work
 Interactive prototyping features including advanced transitions, dynamic overlays and animated
GIFs
 Embedded commenting functionality for a collaborative design process
3. Conclude which tools will be used for the design of the application
For the design of an application, there are various tools available in the market. However, my choice for
designing the application wouldDownloaded
be Figma and Diagrams.net.
Figma is a powerful design tool that allows designers to create and collaborate on interfaces and
graphics. It provides a wide range of features, including vector editing tools, prototyping, and design
system management. Figma allows designers to work collaboratively in real-time, making it an ideal tool
40
for team projects. It also has a large library of plugins and integrations that make it easy to work with
other tools.
Diagrams.net, formerly known as Draw.io, is a free and open-source diagramming tool that allows you to
create flowcharts, network diagrams, and other types of diagrams. It is a versatile tool that can be used
for a wide range of applications, including software design, project planning, and system architecture.
Diagrams.net also provides a wide range of templates and shapes, making it easy to create professional-
looking diagrams quickly.
Together, Figma and Diagrams.net can provide a comprehensive set of tools for designing and
prototyping an application. Figma can be used for creating the user interface and graphics, while
Diagrams.net can be used for creating system architecture diagrams and flowcharts. Both tools can be
used collaboratively, allowing teams to work together in real-time and streamline the design process.
Overall, Figma and Diagrams.net are powerful and versatile tools that can help streamline the design
process and create a high-quality application.
II/ Front End technology stack

1. Front End Programming Language
a. Javascript
Figure 23: Javascript

JavaScript is a high-level, interpreted programming language that is primarily used for creating
interactive web pages and web applications. It was created in 1995 by Brendan Eich while he was
working at Netscape Communications Corporation. JavaScript is a versatile language that can run on
various platforms, including browsers, servers, and mobile devices.
41
Advantages of JavaScript:
 Interactivity: JavaScript allows developers to create interactive user interfaces and responsive
web pages, making for a better user experience.
 Versatility: JavaScript can be used for a wide range of applications, including web development,
server-side programming, and desktop application development.
 Large Community: JavaScript has a large and active community of developers who contribute to
its development and share their knowledge and expertise.
 Easy to Learn: JavaScript has a low barrier to entry, making it easy for beginners to learn and start
developing.
Disadvantages of JavaScript:
 Security: JavaScript can be vulnerable to security threats, such as cross-site scripting (XSS)
attacks.
 Browser Compatibility: JavaScript may not work the same way across different browsers, which
can cause compatibility issues.
 Performance: JavaScript can sometimes cause performance issues, especially on older devices or
when running complex applications.
 No Strict Typing: JavaScript is a dynamically typed language, which means that it can be prone to
errors caused by incorrect data types.
Overall, JavaScript is a powerful and versatile language that is widely used for web development and
other applications. While it has some limitations and drawbacks, its advantages and versatility make it an
important language for developers to learn and use.
b. React

Figure 24: React
42
React is an open-source JavaScript library that is primarily used for building user interfaces. It was
developed by Facebook and was first released in 2013. React allows developers to create reusable UI
components and build complex user interfaces in a declarative and efficient manner.
Advantages of React:
 Reusability: React allows developers to create reusable UI components, making it easy to build
and maintain large-scale applications.
 Declarative: React uses a declarative approach, which makes it easier to understand and maintain
the codebase.
 Virtual DOM: React uses a virtual DOM, which allows it to update the UI efficiently and quickly.
 Large Community: React has a large and active community of developers who contribute to its
development and share their knowledge and expertise.
Disadvantages of React:
 Steep Learning Curve: React has a steep learning curve, particularly for developers who are new
to the library and its associated tools.
 Limited Scope: React is primarily focused on building user interfaces, which means that it may not
be the best choice for applications that require complex back-end functionality.
 JSX Syntax: React uses JSX syntax, which can be confusing for some developers who are used to
working with HTML and CSS.
 Tooling: React relies heavily on a range of tools and libraries, which can make it difficult to set up
and configure the development environment.

43
2. HTML/CSS/SCSS/SASS/LESS etc.
a. HTML
Figure 25: HTML
HTML (Hypertext Markup Language) is a markup language used for creating web pages and web
applications. It is the standard language used for creating content on the World Wide Web. HTML allows
developers to define the structure, content, and layout of a web page using a set of predefined tags and
attributes.
Advantages of HTML:
 Easy to Learn: HTML has a simple syntax and is easy to learn, making it accessible to beginners.
 Versatility: HTML can be used for a wide range of applications, including web development,
mobile app development, and email marketing.
 Accessibility: HTML allows developers to create websites and applications that are accessible to
users with disabilities, improving the user experience for all users.
 SEO-Friendly: HTML is SEO-friendly, which means that it can help improve the visibility and
ranking of web pages in search engines.
Disadvantages of HTML:
 Limited Functionality: HTML is primarily used for creating static web pages and does not have the
capability to create dynamic content or complex functionality.
 Browser Compatibility: HTML may not work the same way across different browsers, which can
cause compatibility issues.
 Security: HTML can be vulnerable to security threats, such as cross-site scripting (XSS) attacks.
44
 Lack of Interactivity: HTML alone cannot create interactive websites, and additional languages
such as CSS and JavaScript are needed for interactivity.
b. CSS
Figure 26: CSS
CSS (Cascading Style Sheets) is a stylesheet language used for describing the presentation and layout of
web pages. It is used in conjunction with HTML to define the visual style, design, and layout of web
pages. CSS allows developers to separate the content and structure of a web page from its presentation,
making it easier to maintain and update the design.
Advantages of CSS:
 Separation of Concerns: CSS allows developers to separate the content and structure of a web
page from its presentation, making it easier to maintain and update the design.
 Consistency: CSS allows developers to create a consistent visual style across multiple pages and
websites.
 Flexibility: CSS provides a wide range of styling options, making it possible to create complex
layouts and designs.
 Accessibility: CSS allows developers to create websites and applications that are accessible to
users with disabilities, improving the user experience for all users.
Disadvantages of CSS:
 Complexity: CSS can be complex and difficult to learn, particularly for developers who are new to
web development.
 Browser Compatibility: CSS may not work the same way across different browsers, which can
45
 Performance: CSS can sometimes cause performance issues, especially on older devices or when
using complex animations and effects.
 Limited Functionality: CSS is primarily used for styling and layout, and additional languages such
as HTML and JavaScript are needed for functionality and interactivity.
c. SCSS
Figure 27: SCSS
SCSS (Sassy CSS) is a preprocessor scripting language that is an extension of CSS. It adds several features
that are not available in regular CSS, such as variables, nesting, mixins, and inheritance. SCSS files are
compiled into standard CSS files before being deployed to the web.
Advantages of SCSS:
 Modularity: SCSS allows developers to create modular and reusable stylesheets, making it easier
to maintain and update the design.
 Efficiency: SCSS allows developers to write less code and achieve more, which can save time and
effort in the development process.
 Readability: SCSS code is more readable and easier to understand than regular CSS, making it
easier for developers to work collaboratively on projects.
 Compatibility: SCSS is fully compatible with CSS, which means that existing CSS code can be easily
converted to SCSS.
Disadvantages of SCSS:
 Learning Curve: SCSS has a steeper learning curve than regular CSS, particularly for developers
who are new to the language and its associated tools.
 Compilation: SCSS files must be compiled into CSS before they can be deployed to the web, which
can be an extra step in the development process.
 Performance: SCSS can sometimes cause performance issues, especially when using complex
features such as nesting and inheritance.
46
 Tooling: SCSS relies heavily on a range of tools and libraries, which can make it difficult to set up
d. SASS
Figure 28: SASS
SASS (Syntactically Awesome Style Sheets) is a preprocessor scripting language that is an extension of
CSS. It uses a syntax that is similar to regular CSS but adds several features that are not available in CSS,
such as variables, nesting, mixins, and inheritance. SASS files are compiled into standard CSS files before
being deployed to the web.
Advantages of SASS:
 Modularity: SASS allows developers to create modular and reusable stylesheets, making it easier
 Efficiency: SASS allows developers to write less code and achieve more, which can save time and
 Readability: SASS code is more readable and easier to understand than regular CSS, making it
 Compatibility: SASS is fully compatible with CSS, which means that existing CSS code can be easily
converted to SASS.
Disadvantages of SASS: Document shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/

 Learning Curve: SASS has a steeper learning curve than regular CSS, particularly for developers
 Compilation: SASS files must be compiled into CSS before they can be deployed to the web, which
47
 Performance: SASS can sometimes cause performance issues, especially when using complex
features such as nesting and inheritance.
 Tooling: SASS relies heavily on a range of tools and libraries, which can make it difficult to set up
e. LESS
Figure 29: LESS
LESS is a preprocessor scripting language that is an extension of CSS. It uses a syntax that is similar to
regular CSS but adds several features that are not available in CSS, such as variables, mixins, and nesting.
LESS files are compiled into standard CSS files before being deployed to the web.
Advantages of LESS:
 Modularity: LESS allows developers to create modular and reusable stylesheets, making it easier
 Efficiency: LESS allows developers to write less code and achieve more, which can save time and
 Readability: LESS code is more readable and easier to understand than regular CSS, making it
 Compatibility: LESS is fully compatible with CSS, which means that existing CSS code can be easily
converted to LESS.
Disadvantages of LESS:
 Learning Curve: LESS hasDownloaded

a steeperby: le-trung-duc-btec-hn (ducltbh00954@fpt.edu.vn)
learning curve than regular CSS, particularly for developers
 Compilation: LESS files must be compiled into CSS before they can be deployed to the web, which
48
 Performance: LESS can sometimes cause performance issues, especially when using complex
features such as nesting and mixins.
 Tooling: LESS relies heavily on a range of tools and libraries, which can make it difficult to set up
3. JavaScript Library / Framework

a. jQuery
Figure 30: jQuery
jQuery is a fast, small, and feature-rich JavaScript library that is used for simplifying client-side scripting
of HTML. It provides a wide range of features and functions that make it easier to manipulate HTML
documents, handle events, and create animations and effects.
Advantages of jQuery:
 Simplification: jQuery simplifies the process of writing JavaScript code, making it easier to create
complex functionality with less code.
 Cross-Browser Compatibility: jQuery is designed to work across different browsers, ensuring that
the same code works consistently on all platforms.
 Large Community: jQuery has a large and active community of developers who contribute to its
 Plugins and Extensions: jQuery has a large library of plugins and extensions that can be used to
extend its functionality and add new features to web pages.
Disadvantages of jQuery:
49
 Performance: jQuery can sometimes cause performance issues, especially when used on older
devices or when running complex applications.
 Dependency: jQuery relies on JavaScript, which means that it may not be suitable for applications
that require a leaner codebase.
 Learning Curve: jQuery has a learning curve, particularly for developers who are new to the
library and its associated tools.
 Not Suitable for Large Projects: jQuery may not be suitable for large projects that require a more
robust and scalable framework.
b. Vuejs
Figure 31: Vuejs
Vue.js is an open-source JavaScript framework used for building user interfaces and single-page
applications. It was created by Evan You and first released in 2014. Vue.js uses a reactive data binding
system and a component-based architecture to simplify the process of building complex user interfaces.
Advantages of Vue.js:
 Versatility: Vue.js can be used for a wide range of applications, including web development,
mobile app development, and desktop application development.
 Easy to Learn: Vue.js has a low barrier to entry, making it easy for beginners to learn and start
developing.
 Lightweight: Vue.js is ashared
Document lightweight framework, which means that it can be faster and more
efficient than some other frameworks.
 Flexibility: Vue.js can be integrated with other libraries and frameworks, making it a flexible and
adaptable choice for development projects.
Disadvantages of Vue.js:
50
 Limited Resources: Vue.js has a smaller community and fewer resources compared to some other
frameworks, which can make it more difficult to find support and resources.
 Limited Functionality: Vue.js is primarily focused on building user interfaces, which means that it
may not be the best choice for applications that require complex back-end functionality.
 Scalability: Vue.js may not be as scalable as some other frameworks, particularly for large and
complex projects.
 Limited Compatibility: Vue.js may not work the same way across different browsers, which can
c. React
Figure 32: React
React is an open-source JavaScript library that is primarily used for building user interfaces. It was
developed by Facebook and was first released in 2013. React allows developers to create reusable UI
components and build complex user interfaces in a declarative and efficient manner.
Advantages of React:
 Reusability: React allows developers to create reusable UI components, making it easy to build
and maintain large-scale applications.
 Declarative: React uses a declarative approach, which makes it easier to understand and maintain
the codebase.
 Virtual DOM: React uses a virtual DOM, which allows it to update the UI efficiently and quickly.
 Large Community: ReactDownloaded
has a large and active community of developers who contribute to its
Disadvantages of React:
51
 Steep Learning Curve: React has a steep learning curve, particularly for developers who are new
to the library and its associated tools.
 Limited Scope: React is primarily focused on building user interfaces, which means that it may not
be the best choice for applications that require complex back-end functionality.
 JSX Syntax: React uses JSX syntax, which can be confusing for some developers who are used to
working with HTML and CSS.
 Tooling: React relies heavily on a range of tools and libraries, which can make it difficult to set up
4. CSS Framework
a. Bootstrap
Figure 33: Bootstrap
Bootstrap is an open-source front-end framework used for building responsive and mobile-first web
pages and applications. It was developed by Twitter and was first released in 2011. Bootstrap provides a
wide range of pre-built UI components and CSS styles that make it easy to create professional-looking
web pages and applications.
Advantages of Bootstrap:
 Responsive Design: Bootstrap

Document provides a responsive design that works across multiple devices
shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/
and screen sizes, making it easy to create mobile-first web pages and applications.
 Pre-built Components: Bootstrap provides a wide range of pre-built UI components, such as
buttons, forms, and navigation menus, that can be easily customized to match the design of the
web page or application.
52
 Large Community: Bootstrap has a large and active community of developers who contribute to
its development and share their knowledge and expertise.
 Cross-Browser Compatibility: Bootstrap is designed to work across different browsers, ensuring
that the same code works consistently on all platforms.
Disadvantages of Bootstrap:
 Limited Customization: Bootstrap's pre-built components may not be suitable for all design
needs, and customization can sometimes be limited.
 Bloat: Bootstrap's pre-built CSS styles and JavaScript files can add bloat to the codebase, which
can slow down the performance of the web page or application.
 Dependency: Bootstrap relies on jQuery and other libraries, which means that it may not be
suitable for applications that require a leaner codebase.
 Overused: Bootstrap is a popular framework, which means that many web pages and applications
may have a similar look and feel.
b. Tailwind
Figure 34: Tailwind
Tailwind is a utility-first CSS framework used for building responsive and customizable user interfaces. It
provides a set of pre-built CSS classes that can be used to style HTML elements and create complex
layouts and designs.
Advantages of Tailwind:
 Customizability: Tailwind provides a wide range of customizable CSS classes that can be used to
create unique and personalized designs.
53
 Efficiency: Tailwind's utility-first approach allows developers to write less code and achieve more,
which can save time and effort in the development process.
 Consistency: Tailwind provides a consistent design language that can be applied across multiple
pages and websites.
 Accessibility: Tailwind provides a set of pre-built accessibility classes that can be used to create
websites and applications that are accessible to users with disabilities.
Disadvantages of Tailwind:
 Learning Curve: Tailwind has a learning curve, particularly for developers who are new to the
framework and its associated tools.
 Overuse: Tailwind's pre-built CSS classes can be overused, which can lead to a lack of
differentiation and originality in designs.
 Limited Functionality: Tailwind is primarily used for styling and layout, and additional languages
such as HTML and JavaScript are needed for functionality and interactivity.
 Large CSS File: Tailwind's pre-built CSS file can be large, which can slow down the performance of
the web page or application.
5. Conclude which Front End technologies will be used for the

development
In conclusion, the combination of HTML, CSS, Bootstrap, and JavaScript provides a comprehensive set of
front-end technologies for developing modern and responsive web pages and applications. HTML
provides the structure and organization of the content, while CSS is used to style and layout the content.
Bootstrap provides a set of pre-built components and styles that can be customized to create
professional-looking designs, and JavaScript adds interactivity and functionality to the web page or
application.
The use of Bootstrap can significantly speed up the development process by providing pre-built
components and styles that can be easily customized to create a unique and personalized design.
Additionally, the use of JavaScript can enhance the user experience by adding dynamic content and
interactivity, such as form validation and animations.
Overall, the combination of HTML, CSS, Bootstrap, and JavaScript provides a powerful and flexible set of
front-end technologies that can be used to create modern and responsive web pages and applications.
With these technologies,Document
developers can create engaging and visually appealing designs that provide a
seamless user experience.
54
III/ Back End technology stack
1. Back End Programming Language
a. Java
Figure 35: Java
Java is a general-purpose, high-level programming language that was developed by Sun Microsystems in
the mid-1990s. It is an object-oriented language that is designed to be platform-independent, meaning
that Java code can run on any computer that has a Java Virtual Machine (JVM) installed.
Advantages of Java:
 Platform Independence: Java code can run on any computer that has a Java Virtual Machine
(JVM) installed, making it highly portable and flexible.
 Object-Oriented: Java is an object-oriented language, which makes it easier to write and maintain
complex applications.
 Large Community: Java has a large and active community of developers who contribute to its
 Security: Java has built-in security features, such as the ability to run code in a sandbox, which
makes it a popular choice for developing secure applications.
Disadvantages of Java:
 Performance: Java can sometimes be slower than other programming languages, especially when
running large and complex applications.
55
 Memory Consumption: Java applications can consume a large amount of memory, which can be a
concern for applications that require high performance on low-memory devices.
 Complexity: Java can be complex and difficult to learn, particularly for beginners who are new to
programming.
 Tooling: Java relies heavily on a range of tools and libraries, which can make it difficult to set up
b. C#
Figure 36: C#
C# (pronounced "C sharp") is a modern, object-oriented programming language developed by Microsoft

in the early 2000s. C# is designed to be a simple, efficient, and type-safe language that can be used for
developing a wide range of applications, from desktop software to web applications and games.
Advantages of C#:
 Object-Oriented: C# is an object-oriented language, which makes it easier to write and maintain

complex applications.
 Large Community: C# has a large and active community of developers who contribute to its
 Integration with .NET: C# is designed to work with the .NET framework, which provides a range of
powerful tools and libraries
Document for developing applications.
 Cross-Platform: C# applications can be developed to run on multiple platforms, including
Windows, Linux, and macOS.
Disadvantages of C#:
56
 Learning Curve: C# can be complex and difficult to learn, particularly for beginners who are new
to programming.
 Limited Performance: C# can sometimes be slower than other programming languages, especially
when running large and complex applications.
 Tooling: C# relies heavily on a range of tools and libraries, which can make it difficult to set up
 Vendor-Specific: C# is developed and maintained by Microsoft, which may limit its appeal to
developers who prefer open-source technologies.
c. PHP
Figure 37: PHP
PHP is a server-side scripting language that was originally designed for web development. It was first
released in 1995 and has since become one of the most widely used programming languages on the web.
PHP is used to create dynamic web pages and applications that can interact with databases and other
server-side technologies.
Advantages of PHP:
 Easy to Learn: PHP is easy to learn and understand, particularly for developers who are new to
programming.
 Large Community: PHP has a large and active community of developers who contribute to its
 Database Support: PHP
Document provides
shared built-in support for a wide range of databases, making it easy to
create dynamic and database-driven web applications.
 Open-Source: PHP is open-source, which means that it is free to use and can be customized to fit
the needs of individual developers.
Disadvantages of PHP:
57
 Security: PHP has a history of security vulnerabilities, which can be a concern for developers who
are building applications that handle sensitive data.
 Performance: PHP can sometimes be slower than other programming languages, especially when
running large and complex applications.
 Scalability: PHP can be difficult to scale, particularly for applications that require high levels of
performance and reliability.
 Syntax: PHP's syntax can be inconsistent and difficult to read, particularly for developers who are
used to working with other programming languages.
2. Operating System
a. Window
Figure 38: Window
Windows is a family of operating systems developed by Microsoft Corporation. It is the most widely used
operating system in the world and is designed to provide a graphical user interface (GUI) and support for
a wide range of applications and hardware devices.
Advantages of Windows:
 User-Friendly: Windows is designed to be user-friendly and easy to navigate, making it accessible

to users of all levels of technical expertise.
 Wide Compatibility: Windows
Document is compatible with a wide range of hardware devices and software
applications, making it a flexible and versatile operating system.
 Large User Base: Windows has a large user base, which means that there is a wealth of support
and resources available to users and developers.
58
 Security: Windows includes built-in security features, such as antivirus software and firewalls, to
help protect against malware and other security threats.
Disadvantages of Windows:
 Cost: Windows can be expensive to purchase and install, particularly for enterprise users who
require multiple licenses.
 Compatibility Issues: Windows can sometimes have compatibility issues with older hardware
devices and software applications.
 Bloat: Windows can be bloated with unnecessary features and applications, which can slow down
the performance of the operating system.
 Vulnerability: Windows has a history of security vulnerabilities, which can put users at risk of
malware and other security threats.
b. MacOS
Figure 39: MacOS
macOS is the operating system developed by Apple Inc. for its Macintosh line of computers. It is designed
to provide a user-friendly interface and support for a wide range of applications and hardware devices.
Advantages of macOS: Downloaded by: le-trung-duc-btec-hn (ducltbh00954@fpt.edu.vn)
 User-Friendly: macOS is designed to be user-friendly and easy to navigate, making it accessible to

users of all levels of technical expertise.
59
 Compatibility: macOS is compatible with a wide range of hardware devices and software
applications, making it a flexible and versatile operating system.
 Security: macOS includes built-in security features, such as Gatekeeper and FileVault, to help
protect against malware and other security threats.
 Integration with Apple Ecosystem: macOS is designed to integrate seamlessly with other Apple
devices and services, such as iCloud, making it a popular choice for Apple users.
Disadvantages of macOS:
 Cost: macOS is only available on Apple hardware, which can be expensive to purchase and
maintain.
 Limited Gaming Support: macOS has limited support for gaming, which can be a concern for users
who want to play games on their computer.
 Limited Software Availability: Some software applications are not available on macOS, which can
be a concern for users who rely on specific applications for their work or hobbies.
 Limited Customizability: macOS has limited customizability compared to other operating systems,
which can be a concern for users who prefer to personalize their computing experience.
c. Linux
Figure 40: Linux
Linux is an open-source operating system based on the Unix kernel. It is designed to be a free and
customizable operating Document
system that
shared can run on a wide range of hardware devices, from smartphones to
supercomputers.
Advantages of Linux:
60
 Open-Source: Linux is open-source, which means that it is free to use, modify, and distribute,
making it an accessible and customizable operating system.
 Security: Linux is known for its strong security features, including built-in firewalls and encryption
tools, making it a popular choice for servers and other critical applications.
 Stability: Linux is known for its stability and reliability, making it a popular choice for servers and
other mission-critical applications.
 Customizability: Linux can be customized to fit the needs of individual users and organizations,
making it a flexible and versatile operating system.
Disadvantages of Linux:
 Learning Curve: Linux can be complex and difficult to learn, particularly for users who are new to
the operating system.
 Compatibility Issues: Linux can sometimes have compatibility issues with certain hardware
devices and software applications.
 Limited Software Availability: Some software applications are not available on Linux, which can
be a concern for users who rely on specific applications for their work or hobbies.
 Fragmentation: Linux can be fragmented across different distributions and versions, which can
make it difficult to ensure compatibility and consistency across different systems.
3. Web Server
a. Apache

Figure 41: Apache
61
Apache, or Apache HTTP Server, is a free and open-source web server software that is widely used to
serve web pages on the internet. Here are the definitions, advantages, and disadvantages of Apache:
Definition:
Apache is a web server software that runs on a variety of operating systems, including Windows, Linux,
and macOS. It is designed to serve static and dynamic web pages and supports common web
development technologies such as PHP, Perl, and Python.
Advantages:
 Open-source: Apache is free and open-source, which means that anyone can use, modify, and
distribute it. This makes it a popular choice for web developers who want to create web
applications without incurring licensing fees.
 Cross-platform compatibility: Apache is designed to run on multiple operating systems, including
Windows, Linux, and macOS. This makes it a flexible choice for web developers who work on
different platforms.
 Scalability: Apache is highly scalable and can handle a large number of simultaneous web
requests. This makes it a good choice for websites that receive high traffic volumes.
 Security: Apache has a robust security system that can protect against common web-based
attacks such as cross-site scripting (XSS), SQL injection, and more.
Disadvantages:
 Configuration complexity: Apache can be complex to configure, especially for novice users. This
can make it difficult to set up and maintain for some web developers.
 Performance issues: Apache can be resource-intensive and may not be the fastest web server
available. Other web servers, such as Nginx, are known to be faster in some cases.
 Lack of support: While Apache is widely used, it may not have the same level of support as other
web servers. This can make it harder to find help and resources when issues arise.

62
b. OpenResty
Figure 42: OpenResty
OpenResty is a web application server that integrates the Nginx web server with Lua, a high-level
programming language. Here are the definitions, advantages, and disadvantages of OpenResty:
Definition:
OpenResty is a web application server that is designed to run powerful web applications based on Nginx
and Lua. It provides a powerful API for Lua developers to write high-performance web applications.
Advantages:
 High-performance: OpenResty is designed to be fast and efficient. It uses the Nginx web server,
which is known for its speed and scalability, and the Lua programming language, which is known
for its performance and flexibility.
 Easy to use: OpenResty has a simple and intuitive configuration language that makes it easy for
developers to configure and customize their web applications.
 Scalability: OpenResty is designed to be highly scalable and can handle a large number of
simultaneous requests. This makes it a good choice for web applications that receive high traffic
volumes.
 Flexibility: OpenResty supports a wide range of web development technologies, including Lua,
JavaScript, and other programming languages. This makes it a flexible choice for web developers
who want to build web
Document applications
shared using their preferred programming language.
Disadvantages:
 Learning curve: OpenResty has a steep learning curve, especially for developers who are new to
Lua or Nginx. This can make it challenging for some developers to get started with the platform.
63
 Limited support: OpenResty is a relatively new platform and may not have the same level of
support as other web servers. This can make it harder to find help and resources when issues
arise.
 Customization challenges: While OpenResty is highly customizable, it can be challenging to
customize certain aspects of the web server. This can make it harder for developers to build the
exact web application they need.
c. Cloudflare
Figure 43: Cloudflare
Cloudflare is a content delivery network (CDN) and cybersecurity company that provides a suite of
services to protect and accelerate websites. Here are the definitions, advantages, and disadvantages of
Cloudflare:
Definition:
Cloudflare is a CDN and cybersecurity company that provides a suite of services to protect and accelerate
websites. Its services include DDoS protection, SSL/TLS encryption, content caching, and more.
Advantages:
 Security: Cloudflare provides a robust set of security features, including DDoS protection, web
application firewall (WAF),
Document and SSL/TLS encryption. This helps protect websites from cyber
attacks and data breaches.
 Performance: Cloudflare uses a global network of servers to cache and deliver website content,
which can improve website performance and reduce page load times.
64
 Cost-effective: Cloudflare offers a range of pricing plans, including a free plan, which makes it a
cost-effective option for website owners who want to improve their website's security and
performance.
 Easy to use: Cloudflare's services are easy to set up and configure, even for non-technical users.
Disadvantages:
 Dependency: Cloudflare acts as a middleman between the website and its visitors, which means
that if Cloudflare experiences downtime or other issues, it can affect the website's availability.
 Limited control: Cloudflare's services are designed to be easy to use, which means that there may
be limited control over the configuration and customization of some services.
 Privacy concerns: Cloudflare's services involve routing website traffic through its servers, which
raises privacy concerns for some users.
4. Database
a. MongoDB
Figure 44: MongoDB
MongoDB is a NoSQL document-oriented database that is designed to handle unstructured and semi-
structured data. Here are the definitions, advantages, and disadvantages of MongoDB:
Definition:
MongoDB is a NoSQL document-oriented database that
Downloaded by: le-trung-duc-btec-hn is designed to store and manage unstructured
and semi-structured data. It uses a flexible document model that allows developers to store and retrieve
data in a variety of formats, including JSON and BSON.
65
Advantages:
 Scalability: MongoDB is designed to be highly scalable and can handle a large volume of data. It
uses a distributed architecture that allows it to scale horizontally across multiple servers.
 Flexibility: MongoDB's document model is flexible and can handle a wide range of data formats.
This makes it a good choice for applications that deal with unstructured or semi-structured data.
 Performance: MongoDB is designed to be fast and efficient. It uses a number of optimization
techniques, such as indexing, to improve query performance.
 Open-source: MongoDB is free and open-source, which means that anyone can use, modify, and
distribute it.
Disadvantages:
 Complexity: MongoDB can be complex to set up and configure, especially for developers who are
new to NoSQL databases. This can make it challenging to get started with the platform.
 Lack of transactions: MongoDB does not support multi-document transactions, which can make it
harder to maintain data consistency in some cases.
 Memory usage: MongoDB can be memory-intensive, especially when working with large
datasets. This can make it challenging to run on systems with limited memory.
b. MySQL
Figure 45: MySQL
MySQL is a popular open-source relational

Document shared on database management system. Here are the definitions,
https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/
advantages, and disadvantages of MySQL:
Definition:
66
MySQL is a relational database management system (RDBMS) that uses Structured Query Language (SQL)
to manage and manipulate data. MySQL is open-source software that is used by many web applications
and websites to store and manage data.
Advantages:
 Easy to use: MySQL is easy to learn and use, especially for developers who are already familiar
with SQL. It has a wide range of tools and resources that make it easy to set up and manage a
database.
 Scalability: MySQL is designed to be scalable and can handle large datasets. It is used by many
high-traffic websites and web applications.
 Flexibility: MySQL supports a wide range of data types and table structures, which makes it a
flexible choice for developers who need to work with complex data.
 Wide adoption: MySQL is widely used and supported by many web hosting providers, which
makes it a popular choice for web developers and website owners.
Disadvantages:
 Limited transaction support: MySQL's transaction support is limited compared to other relational
databases, which can make it harder to ensure data consistency in some cases.
 Security concerns: MySQL can be vulnerable to security threats if not properly configured or
maintained. This can put sensitive data at risk.
 Performance issues: MySQL's performance can be affected by a number of factors, including the
size of the database, the complexity of the queries, and the hardware on which it is run.
c. PostgreSQL

Figure 46: PostgreSQL
67
PostgreSQL is an open-source relational database management system (RDBMS) that is known for its
reliability, scalability, and extensibility. Here are the definitions, advantages, and disadvantages of
PostgreSQL:
Definition:
 PostgreSQL is an open-source RDBMS that uses SQL to manage and manipulate data. It is known
for its advanced features, such as support for complex queries, indexes, and transaction
management.
 Advantages:
 Reliability: PostgreSQL is known for its reliability and is used in many mission-critical applications.
It has a robust architecture that includes support for replication, failover, and recovery.
 Scalability: PostgreSQL is designed to be highly scalable and can handle large datasets. It is used
by many high-traffic websites and web applications.
 Extensibility: PostgreSQL is highly extensible and can be customized using a variety of
programming languages, such as C, Python, and Java. This makes it a flexible choice for
developers who need to build custom functionality.
 Open-source: PostgreSQL is free and open-source, which means that anyone can use, modify, and
distribute it.
Disadvantages:
 Complexity: PostgreSQL can be complex to set up and configure, especially for developers who
are new to RDBMS. This can make it challenging to get started with the platform.
 Limited support: While PostgreSQL is widely used, it may not have the same level of support as
other RDBMS such as Oracle or Microsoft SQL Server. This can make it harder to find help and
resources when issues arise.
 Memory usage: PostgreSQL can be memory-intensive, especially when working with large
datasets. This can make it challenging to run on systems with limited memory.

68
5. Hosting
a. Azure
Figure 47: Azure
Azure Hosting refers to the cloud hosting services provided by Microsoft Azure. It offers a range of
services for hosting web applications, databases, and virtual machines in the cloud. Here are the
definitions, advantages, and disadvantages of Azure Hosting:
Definition:
Azure Hosting is a cloud hosting service offered by Microsoft Azure. It provides a range of services for
hosting web applications, databases, and virtual machines in the cloud.
Advantages:
 Scalability: Azure Hosting is designed to be highly scalable and can handle a large volume of
traffic. It can scale up or down based on the needs of the application or website.
 Global reach: Azure Hosting has a global network of data centers, which makes it easy to deploy
applications in different regions around the world.
 Security: Azure Hosting provides a range of security features, such as network security groups,
encryption, and identity management, to protect applications and data in the cloud.
 Integration with other Microsoft services: Azure Hosting is integrated with other Microsoft
services, such as Office 365 andby:Dynamics
Downloaded 365,
le-trung-duc-btec-hn which makes it easy to build end-to-end solutions.
Disadvantages:
 Complexity: Azure Hosting can be complex to set up and configure, especially for developers who
are new to cloud hosting. This can make it challenging to get started with the platform.
69
 Cost: Azure Hosting can be expensive, especially for applications with high traffic volumes. It uses
a pay-as-you-go pricing model, which means that users are charged based on their usage.
 Limited support: While Azure Hosting is widely used, it may not have the same level of support as
other cloud hosting providers such as AWS. This can make it harder to find help and resources
when issues arise.
b. AWS
Figure 48: AWS
AWS (Amazon Web Services) hosting refers to the cloud hosting services provided by Amazon. It offers a
range of services for hosting web applications, databases, and virtual machines in the cloud. Here are the
definitions, advantages, and disadvantages of AWS hosting:
Definition:
AWS hosting is a cloud hosting service offered by Amazon Web Services. It provides a range of services
for hosting web applications, databases, and virtual machines in the cloud.
Advantages:
 Scalability: AWS hosting is designed to be highly scalable and can handle a large volume of traffic.
It can scale up orDocument
down based
shared on the needs of the application or website.
 Reliability: AWS hosting is known for its high reliability and uptime. It uses a distributed
architecture that is designed to minimize downtime and ensure high availability.
 Security: AWS hosting provides a range of security features, such as network security groups,
encryption, and identity management, to protect applications and data in the cloud.
70
 Integration with other Amazon services: AWS hosting is integrated with other Amazon services,
such as Amazon S3 and Amazon RDS, which makes it easy to build end-to-end solutions.
Disadvantages:
 Complexity: AWS hosting can be complex to set up and configure, especially for developers who
are new to cloud hosting. This can make it challenging to get started with the platform.
 Cost: AWS hosting can be expensive, especially for applications with high traffic volumes. It uses a
pay-as-you-go pricing model, which means that users are charged based on their usage.
 Limited support: While AWS hosting is widely used, it may not have the same level of support as
other cloud hosting providers such as Microsoft Azure. This can make it harder to find help and
c. Google Cloud
Figure 49: Google Cloud
Google Cloud hosting refers to the cloud hosting services provided by Google Cloud Platform. It offers a
range of services for hosting web applications, databases, and virtual machines in the cloud. Here are the
definitions, advantages, and disadvantages of Google Cloud hosting:
Definition:
Google Cloud hosting is a cloud hosting service offered by Google Cloud Platform. It provides a range of
services for hosting webDocument
applications, databases, and virtual machines in the cloud.
Advantages:
 Scalability: Google Cloud hosting is designed to be highly scalable and can handle a large volume
of traffic. It can scale up or down based on the needs of the application or website.
71
 Reliability: Google Cloud hosting is known for its high reliability and uptime. It uses a distributed
architecture that is designed to minimize downtime and ensure high availability.
 Security: Google Cloud hosting provides a range of security features, such as network security
groups, encryption, and identity management, to protect applications and data in the cloud.
 Integration with other Google services: Google Cloud hosting is integrated with other Google
services, such as Google Analytics and Google Ads, which makes it easy to track and analyze user
behavior and monetize applications.
Disadvantages:
 Complexity: Google Cloud hosting can be complex to set up and configure, especially for
developers who are new to cloud hosting. This can make it challenging to get started with the
platform.
 Cost: Google Cloud hosting can be expensive, especially for applications with high traffic volumes.
It uses a pay-as-you-go pricing model, which means that users are charged based on their usage.
 Limited support: While Google Cloud hosting is widely used, it may not have the same level of
support as other cloud hosting providers such as AWS or Microsoft Azure. This can make it harder
to find help and resources when issues arise.
6. Frameworks
a. ASP.NET Core

Figure 50: ASP.NET Core
ASP.NET Core is a free, open-source, cross-platform web framework for building modern, cloud-based
applications. Here are the definitions, advantages, and disadvantages of ASP.NET Core:
Definition:
72
ASP.NET Core is a web framework for building modern, cloud-based applications. It is free, open-source,
and cross-platform, which means that it can be used on Windows, Linux, and macOS.
Advantages:
 Cross-platform: ASP.NET Core can be used on Windows, Linux, and macOS, which makes it a
flexible choice for developers who need to build applications for multiple platforms.
 Performance: ASP.NET Core is designed to be fast and efficient, which makes it a good choice for
applications that need to handle a large volume of traffic.
 Security: ASP.NET Core includes a range of security features, such as authentication and
authorization, to help protect applications from security threats.
 Open-source: ASP.NET Core is free and open-source, which means that anyone can use, modify,
and distribute it.
Disadvantages:
 Complexity: ASP.NET Core can be complex to set up and configure, especially for developers who
are new to web development. This can make it challenging to get started with the framework.
 Limited support: While ASP.NET Core is widely used, it may not have the same level of support as
other web frameworks such as Ruby on Rails or Django. This can make it harder to find help and
 Learning curve: ASP.NET Core has a steep learning curve, especially for developers who are new
to the .NET ecosystem. This can make it challenging to get up to speed with the framework.
b. Spring MVC

Figure 51: Spring MVC
Spring MVC is a web framework for building Java-based web applications. Here are the definitions,
advantages, and disadvantages of Spring MVC:
73
Definition:
Spring MVC is a web framework that is part of the Spring Framework for building Java-based web
applications. It provides a set of libraries, templates, and tools that developers can use to build web
applications more efficiently.
Advantages:
 Lightweight: Spring MVC is designed to be lightweight, which means that it can handle a large
volume of traffic without consuming too many system resources.
 Modular: Spring MVC is modular and can be customized to meet the specific needs of the
application. This makes it a flexible choice for developers who need to build custom functionality.
 Easy integration: Spring MVC can be easily integrated with other Spring Framework components,
such as Spring Security and Spring Data, which makes it easy to build end-to-end solutions.
 Large community: Spring MVC has a large and active community of developers, which means that
there are plenty of resources and support available.
Disadvantages:
 Learning curve: Spring MVC has a steep learning curve, especially for developers who are new to
the Spring Framework. This can make it challenging to get started with the framework.
 Configuration: Spring MVC can be complex to set up and configure, especially for developers who
are new to web development. This can make it challenging to get started with the framework.
 Limited support: While Spring MVC is widely used, it may not have the same level of support as
other web frameworks such as Ruby on Rails or Django. This can make it harder to find help and

74
c. Laravel
Figure 52: Laravel
Laravel is a popular open-source web application framework for PHP. Here are the definitions,
advantages, and disadvantages of Laravel:
Definition:
Laravel is a web application framework for PHP that is designed to make web development easier and
more efficient. It provides a range of tools and features for building scalable and secure web
applications.
Advantages:
 Elegant syntax: Laravel has an elegant and expressive syntax that makes it easy to write clean and
readable code.
 Modular: Laravel is modular and can be customized to meet the specific needs of the application.
This makes it a flexible choice for developers who need to build custom functionality.
 Built-in features: Laravel includes a range of built-in features, such as authentication, routing, and
database migrations, which makes it easy to build robust web applications.
 Large community: Laravel has a large and active community of developers, which means that
there are plenty of resources and support available.
Disadvantages: Document shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/

 Learning curve: Laravel has a learning curve, especially for developers who are new to PHP or
web development. This can make it challenging to get started with the framework.
 Performance: Laravel can be slower than other PHP frameworks, especially for applications with
high traffic volumes. This can make it challenging to scale the application.
75
 Limited support: While Laravel is widely used, it may not have the same level of support as other
web frameworks such as Ruby on Rails or Django. This can make it harder to find help and
7. Conclude which Back End technologies will be used for the

development
After considering various factors such as scalability, performance, security, and ease of use, it has been
decided that ASP.NET Core will be used for the development of the web application's back end. ASP.NET
Core is a robust and flexible web framework that is designed to handle a wide range of web
development tasks, including authentication, routing, and database integration. Its cross-platform
support and ease of use make it a popular choice among web developers. Additionally, the framework's
built-in security features help to ensure that the application is protected from common security threats.
Overall, ASP.NET Core is a reliable and efficient choice for back-end development, and it is expected to
provide the necessary tools and features to build a high-quality and scalable web application.
IV/ Tools for source control management

1. Git, GitHub, GitLab, etc.
a. Git
Figure 53: Git
Git is a version control system that is used for software development. Here are the definitions,
advantages, and disadvantages of Git:
Definition:
Git is a free and open-source version control system that is used for software development. It allows
multiple developers to collaborate on a project and keep track of changes to the codebase over time.
76
Advantages:
 Distributed: Git is a distributed version control system, which means that each developer has
their own copy of the codebase. This makes it easy to work offline and collaborate with others
without the need for a centralized server.
 Branching: Git allows developers to create multiple branches of the codebase, which makes it
easy to experiment with new features or bug fixes without affecting the main codebase.
 Security: Git provides a range of security features, such as authentication and encryption, to
protect the codebase from unauthorized access.
 Large community: Git has a large and active community of developers, which means that there
are plenty of resources and support available.
Disadvantages:
 Learning curve: Git has a learning curve, especially for developers who are new to version control
systems. This can make it challenging to get started with the system.
 Complexity: Git can be complex to set up and configure, especially for developers who are new to
software development. This can make it challenging to get started with the system.
 Command-line interface: Git is primarily used through a command-line interface, which may not
be ideal for developers who are more comfortable with graphical user interfaces.
b. GitHub

Figure 54: GitHub
GitHub is a web-based platform for hosting and collaborating on Git repositories. Here are the
definitions, advantages, and disadvantages of GitHub:
Definition:
77
GitHub is a web-based platform that provides hosting for Git repositories. It allows developers to store
and manage their code, collaborate with others, and track changes to the codebase over time.
Advantages:
 Collaboration: GitHub makes it easy for developers to collaborate on a project, even if they are
working remotely or in different time zones. It provides tools for code review, issue tracking, and
project management, which makes it easy to work together on a project.
 Versioning: GitHub provides version control for Git repositories, which allows developers to keep
track of changes to the codebase over time and revert to previous versions if necessary.
 Community: GitHub has a large and active community of developers, which means that there are
plenty of resources and support available. It also provides tools for social coding, such as forking,
pull requests, and code sharing, which makes it easy to contribute to open-source projects.
 Integration: GitHub integrates with a range of other tools and services, such as project
management tools, continuous integration and deployment tools, and text editors, which makes
it easy to build end-to-end solutions.
Disadvantages:
 Learning curve: GitHub has a learning curve, especially for developers who are new to version
control systems or web development. This can make it challenging to get started with the
platform.
 Pricing: While GitHub provides free hosting for public repositories, it can be expensive for private
repositories or organizations that require advanced features.
 Security: While GitHub provides a range of security features, such as two-factor authentication
and encryption, it may not be suitable for projects that require the highest level of security.
c. GitLab

Figure 55: GitLab
78
GitLab is a web-based platform for hosting and collaborating on Git repositories, similar to GitHub. Here
are the definitions, advantages, and disadvantages of GitLab:
Definition:
GitLab is a web-based platform for hosting and collaborating on Git repositories. It provides tools for
version control, issue tracking, continuous integration and deployment, and project management.
Advantages:
 Customization: GitLab is highly customizable, which means that it can be tailored to the specific
needs of the project or organization. It provides a range of features and tools, such as custom
workflows, merge request approvals, and custom notifications.
 Security: GitLab provides a range of security features, such as two-factor authentication and
encryption, to protect the codebase from unauthorized access. It also provides tools for detecting
and preventing security vulnerabilities in the codebase.
 Integration: GitLab integrates with a range of other tools and services, such as project
management tools, continuous integration and deployment tools, and text editors, which makes
it easy to build end-to-end solutions.
 Open-source: GitLab is free and open-source, which means that anyone can use, modify, and
distribute it. This makes it a flexible choice for organizations that need to customize the platform
to meet their specific needs.
Disadvantages:
 Learning curve: GitLab has a learning curve, especially for developers who are new to version
control systems or web development. This can make it challenging to get started with the
platform.
 Pricing: While GitLab provides a free self-hosted version of the platform, it can be expensive for
organizations that require advanced features or cloud hosting.
 Limited community: While GitLab has an active community of developers, it may not have the
same level of support or resources as other platforms such as GitHub.
2. Conclude which tools will be used for the development

Based on the discussionDocument
so far,shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/
itDownloaded
has been decided that Git and GitHub will be used for the development
of the web application. Git is a powerful and flexible version control system that provides a range of
features and tools for managing changes to the codebase over time. GitHub, on the other hand, is a web-
based platform for hosting and collaborating on Git repositories that provides a range of collaboration,
versioning, and security features. Together, Git and GitHub provide a robust and reliable set of tools for
79
managing the development of the web application, including version control, code review, issue tracking,
and project management. Overall, this combination of tools is expected to provide the necessary tools
and features to build a high-quality and scalable web application.
V/ Software Development Models

1. Introduce several SDLC models: Scrum, Waterfall, V-model.
a. Scrum
Figure 56: Scrum
Scrum is an Agile software development model that emphasizes collaboration, self-organization, and
iterative development. Here are the definitions, advantages, and disadvantages of Scrum:
Definition:
Scrum is an Agile software development model that is designed to help teams deliver working software
in short cycles, called sprints. It involves a team of developers working together to achieve a common
goal, with a focus on collaboration, self-organization, and iterative development.
Advantages:
 Flexibility: Scrum is a flexible model that allows teams to adapt to changing requirements and
priorities. It provides a range of tools and techniques, such as user stories, sprint planning, and
daily standups, that help teams stay focused on delivering working software in short cycles.
 Collaboration: Scrum emphasizes collaboration between team members, which helps to ensure
that everyone is working towards a common goal. It provides tools for communication and
80
feedback, such as sprint reviews and retrospectives, that help teams stay aligned and focused on
delivering value to the customer.
 Transparency: Scrum provides a high degree of transparency into the development process,
which helps to ensure that everyone is on the same page. It provides tools for tracking progress,
such as burndown charts and sprint backlogs, that help teams stay focused and accountable.
 Continuous improvement: Scrum encourages teams to continuously improve their processes and
practices. It provides tools for reflection and feedback, such as sprint retrospectives, that help
teams identify areas for improvement and make changes to their approach.
Disadvantages:
 Learning curve: Scrum has a learning curve, especially for teams that are new to Agile software
development. It can take time to get used to the terminology and practices of the model.
 Lack of structure: Scrum is a flexible model that can be customized to meet the specific needs of
the project. However, this lack of structure can be challenging for some teams, especially those
that are used to more rigid development processes.
 Time constraints: Scrum emphasizes delivering working software in short cycles, which can be
challenging for teams that are working on complex or large-scale projects. It can also be
challenging to balance the need for speed with the need for quality.
b. Waterfall
Figure 57: Waterfall

The Waterfall model is a sequential software development process that follows a linear, step-by-step
approach. It is one of the oldest and most traditional software development methodologies.
Advantages of Waterfall model:
81
 Structure: The Waterfall model provides a clear structure and framework for the development
process, with each phase building on the previous one.
 Predictability: The Waterfall model emphasizes planning and documentation, which can make it
easier to predict project timelines and costs.
 Well-suited for small projects: The Waterfall model is well-suited for small, simple projects where
the requirements are well-defined and unlikely to change.
 Easy to understand: The Waterfall model is easy to understand and implement, making it a good
choice for teams that are new to software development.
 Clear milestones: The Waterfall model provides clear milestones for each phase, which can help
keep the team focused and on track.
Disadvantages of Waterfall model:
 Lack of flexibility: The Waterfall model is not well-suited for projects with changing or evolving
requirements, as it is difficult to make changes once a phase is complete.
 Limited customer involvement: The Waterfall model does not prioritize customer involvement or
feedback, which can lead to a final product that does not meet the customer's needs.
 High risk: The Waterfall model carries a high risk of project failure, as any errors or issues that
arise in one phase can carry over to the next phase.
 Limited testing: The Waterfall model does not include testing until the end of the development
process, which can lead to a final product with numerous defects.
 Limited collaboration: The Waterfall model does not emphasize collaboration or teamwork,
which can lead to a lack of communication and understanding between team members.
c. V-model

Figure 58: V-model
82
The V-model is a software development model that is an extension of the Waterfall model. It emphasizes
testing throughout the development process and is often used in industries where safety and reliability
are critical, such as aerospace and defense.
Advantages of V-model:
 Emphasis on testing: The V-model places a strong emphasis on testing throughout the
development process, which can help identify and fix issues early on.
 Clear milestones: The V-model provides clear milestones for each phase of development, which
can help keep the team focused and on track.
 Well-suited for critical systems: The V-model is well-suited for developing critical systems where
safety and reliability are a top priority.
 Predictability: The V-model emphasizes planning and documentation, which can make it easier to
predict project timelines and costs.
 Easy to understand: The V-model is easy to understand and implement, making it a good choice
for teams that are new to software development.
Disadvantages of V-model:
 Lack of flexibility: The V-model is not well-suited for projects with changing or evolving
requirements, as it is difficult to make changes once a phase is complete.
 Limited customer involvement: The V-model does not prioritize customer involvement or
feedback, which can lead to a final product that does not meet the customer's needs.
 High risk: The V-model carries a high risk of project failure, as any errors or issues that arise in
one phase can carry over to the next phase.
 Limited collaboration: The V-model does not emphasize collaboration or teamwork, which can
lead to a lack of communication and understanding between team members.
 High cost: The V-model can be more expensive than other development models due to the
emphasis on testing and documentation.
2. Conclude which SDLC model will be used for the development

(Waterfall, Scrum, etc.) with explanations
Based on the project requirements and objectives, Scrum would be a suitable SDLC model for the
development. Scrum is a popular Agile methodology that emphasizes iterative and incremental
development, teamwork, and customer satisfaction.
Scrum would be a good choice for this project because it involves frequent check-ins with the customer,
allowing for feedback and adjustments to be made throughout the development process. This can help
ensure that the final product meets the customer's needs and requirements.
83
Additionally, Scrum encourages collaboration and communication among team members, which can lead
to a more positive work environment and better outcomes. The flexibility and adaptability of Scrum
make it well-suited for projects with changing or evolving requirements, allowing for quick and easy
adjustments to be made as needed.
Overall, Scrum can help the development team stay focused, organized, and on track, while also
prioritizing customer satisfaction and delivering a high-quality final product.
VI/ Illustrate all your findings on how to use these by

drawing the overview
Figure 59: Overview

84
REFERENCES
appinventiv.com. [Online]
Available at: https://appinventiv.com/blog/top-web-app-database-list/
[Accessed 23 03 2023].
camtaychiviec.com. [Online]
Available at: https://camtaychiviec.com/top-10-hosting-tot-nhat-2022-danh-cho-nguoi-moi-lam-
website-wordpress.html
[Accessed 23 03 2023].
gleek.io. [Online]
Available at: https://www.gleek.io/blog/best-uml-tools.html
[Accessed 22 03 2023].
kellton.com. [Online]
Available at: https://www.kellton.com/kellton-tech-blog/top-8-backend-web-development-frameworks-
in-2022
[Accessed 23 03 2023].
topdev.vn. [Online]
Available at: https://topdev.vn/blog/framework-web-development-2019/
[Accessed 23 03 2023].
uxdesigninstitute.com. [Online]
Available at: https://www.uxdesigninstitute.com/blog/user-interface-ui-design-tools/
[Accessed 22 03 2023].

85

Docsity Application Development 1670 Asm1 Grade M

Uploaded by

Copyright:

Available Formats

Docsity Application Development 1670 Asm1 Grade M

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Docsity Application Development 1670 Asm1 Grade M

Uploaded by

Copyright:

Available Formats

Application Development (1670) -

Document shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/

Qualification BTEC Level 5 HND Diploma in Business

Unit number and title Unit 30: Application Development

Submission date Date Received 1st submission

Re-submission Date Date Received 2nd submission

Student Name Phan Nhat Linh Student ID GCD201635

Class GCD0905 Assessor name Nguyen Van Loi

Student’s signature Linh

Document shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/

Document shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/

Grade: Assessor Signature: Date:

Signature & Date: Document shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/

Subject: Application Development (1670)

II/ Front End technology stack.................................................................................................................. 41

Document shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/

Document shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/

3. Intended Audience and Document Overview

4. Definitions, Acronyms and Abbreviations

 GeeksforGeeks (2019, 07 Jun) “Scrum (software development)”. [Online].

Available at: https://www.geeksforgeeks.org/scrum-software-development/

 W3school (2022) “What is GitHub?”. [Online].

Available at: https://www.w3schools.com/whatis/whatis_github.asp

Available at: https://www.trustradius.com/reviews/google-drive-2022-10-04-09-54-49

 Redwerk (2021, 01 February) “ASP.NET Core Advantages and Disadvantages”. [Online].

Available at: https://redwerk.com/blog/asp-net-core-pros-and-cons/

Document shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/

 Customers can log in and log out of their account.

 Store owners can log in and log out of their account.

 Admins can log in and log out of their account.

AS A I WANT TO SO THAT I CAN

understand how many categories are available

Login before purchase Protect my account

Logout Protect my information

View my information to check if they can be

Add new book Add more books in my store

Update book information in case they have

Delete book Remove the book

Add new category of book Have more books in that genre

Login before going to main screen Protect my data in store

Logout Protect my data

Finish the order when the customer have been

Login before going to admin screen Protect my data

Admin Logout Protect my data

View all the accounts of customers Manage the customer accounts

Delete the accounts of customers Remove the account of customer if I need

Approval or reject request from store

Document shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/

Figure 2: Use Case Model

Figure 3: Login wireflow

Figure 4: Admin wireflow

Document shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/

Figure 6: Owner flow

Document shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/

Figure 7: Entity Relationship Diagram

Document shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/

Shop owner class:

Document shared on https://www.docsity.com/en/application-development-1670-asm1-grade-m/10003935/

3. Activity diagram Downloaded by: le-trung-duc-btec-hn (ducltbh00954@fpt.edu.vn)