Research for building a multi platformphone e commerce system (website) mern stack appplication

Trang 1 TECHNOLOGY AND EDUCATIONMINISTRY OF EDUCATION AND TRAININGHO CHI MINH CITY UNIVERSITY OF GRADUATION PROJECT INFORMATION TECHNOLOGY LECTURER: LE VINH THINH PHDSTUDENTS: TRAN NGUY

TECHNOLOGY AND EDUCATION

MINISTRY OF EDUCATION AND TRAINING

HO CHI MINH CITY UNIVERSITY OF

GRADUATION PROJECT INFORMATION TECHNOLOGY

LECTURER: LE VINH THINH PHD STUDENTS: TRAN NGUYEN TAI NGUYEN VAN TAY

S K L 0 0 9 8 8 5

RESEARCH FOR BUILDING A MULTI- PLATFORMPHONE E-COMMERCE SYSTEM (WEBSITE) MERN STACK

APPLICATION

HCMC UNIVERSITY OF TECHNOLOG Y AND EDUCATION

FACULTY FOR HIGH QUALITY TRAINING

GRADUATION PROJECT

RESEARCH FOR BUILDING A

MULTI-PHONE E-COMMERCE SYSTEM (WEBSITE) MERN STACK APPLICATION

Ho Chi Minh City, June 2022

THE SOCIALIST REPUBLIC OF

VIETNAM

Independence – Freedom– Happiness

Ho Chi Minh City,………, 2022

GRADUATION PROJECT ASSIGNMENT

Major: Information technology Class: 2017

Advisor: Le Vinh Thinh PhD

Date of assignment:…………, 2022 Date of submission:………., 2022

1 Project title:

Research for building a multi-platform phone e-commerce system (website) MERN Stack application

2 Initial materials provided by the advisor: None

3 Content of the project:

Building an E-commerce system to sell phones on Website platforms:

• Backend: Learn and build RESTful API based on non-relational database

MongoDB based on NodeJS Express framework

• Website frontend: Learn and connect API to create website interface

through ReactJS library

4 Final product: Website ensure the necessary functions

THE SOCIALIST REPUBLIC OF

VIETNAM

Independence – Freedom– Happiness

Ho Chi Minh City,………,……….,2022

ADVISOR’S EVALUATION SHEET

Major: Information technology Class: 2017

Research for building a multi-platform phone e-commerce system (website) MERN Stack application

Advisor: Le Vinh Thinh PhD

Date of assignment:…………, 2022 Date of submission:………., 2022

EVALUATION

1 Content of the project:

2.Strengths: 3.Weaknesses:

4 Approval for oral defense? (Approved or denied)

5 Overall evaluation: (Excellent, Good, Fair, Poor)

6 Mark: …… (in words: )

Ho Chi Minh City, , 2022

ADVISOR

(Name and signature)

THE SOCIALIST REPUBLIC OF

VIETNAM

Independence – Freedom– Happiness

PRE-DEFENSE EVALUATION SHEET

Major: Information technology Class: 2017

Research for building a multi-platform phone e-commerce system (website) MERN Stack application

Advisor: Le Vinh Thinh PhD

Date of assignment:…………, 2022 Date of submission:………., 2022

EVALUATION

1 Content of the project:

2.Strengths: 3.Weaknesses:

4.Approval for oral defense? (Approved or denied)

5.Overall evaluation: (Excellent, Good, Fair, Poor)

6.Mark: ……(in words: )

Ho Chi Minh City,……… … , 2022

REVIEWER

(Name and signature)

THE SOCIALIST REPUBLIC OF

VIETNAM

Independence – Freedom– Happiness

EVALUATION SHEET OF DEFENSE COMMITTEE MEMBER

Major: Information technology Class: 2017

Research for building a multi-platform phone e-commerce system (website) MERN Stack application

Advisor: Le Vinh Thinh PhD

Date of assignment:…………, 2022 Date of submission:………., 2022

EVALUATION

1 Content of the project:

2.Strengths: 3.Weaknesses:

4.Approval for oral defense? (Approved or denied)

5.Overall evaluation: (Excellent, Good, Fair, Poor)

6 Mark: …… (in words: )

Ho Chi Minh City, ,2022

COMMITTEE MEMBER

(Name and signature)

ACKNOWLEDGEMENTS

Our whole group was very fortunate to receive guidance and help from teachers and friends during the implementation process Now, the group would like to send this sincere thanks to Mr Le Vinh Thinh, who directly supported the group during the process of choosing the topic, guiding, commenting, and giving suggestions as well as providing reference materials survey Without the guidance and practical experience of the teacher, we think that this topic will be difficult to complete and complete on time Once again, the whole team would like to thank Mr Le Vinh Thinh

We would also like to thank the teachers in the Department of High-Quality Training for their help in supporting the group's knowledge and answering questions Along with that, the group would like to thank their classmates for providing a lot of useful information and knowledge to help the group complete the topic better

The time is limited, along with limited knowledge and many other surprises, so the omission is inevitable, so the team is looking forward to receiving your valuable comments from the teachers to improve their knowledge group is to be improved later

We sincerely thank you!

TABLE OF CONTENTS

Contents

ACKNOWLEDGEMENTS ii

TABLE OF CONTENTS iii

LIST OF FIGURE v

LIST OF TABLES vi

ABSTRACT viii

Chapter 1 INTRODUCTION 1

1.1 Subject name 1

1.2 The urgency of tbe subject 1

1.3 Purpose of the topic 1

1.4 Object and scope of study 2

1.4.1 Functional requirements 2

1.5 Expected results achieved 4

Chapter 2 THEORETICAL BASIC 5

2.1 What is MERN STACK ? 5

2.2 MongoDB 5

2.3 Express JS 5

2.4 ReactJS 5

2.5 NodeJS 5

2.6 NextJS 6

2.7 Loop Back 4 6

2.8 The Avantages of MERN Stack 6

2.9 Recommend system 6

2.9.1 Content base 6

2.9.2 Singular Value Decomposition 6

Chapter 3 REQUIREMENTS ANALYSIS 8

3.1 Situation survey 8

3.1.1 Review the pros and cons of similar services 8

3.1.2 Research roles and functions 11

3.1.3 Issue of records, books, and transaction documents 12

3.1.4 Assess the current situation and solutions 12

3.2 Define Requirements 13

3.2.2 Functional and non-functional requirements 13

3.3 Requirements modeling 13

3.3.1 List of actors 13

3.3.2 Systems overview usecase 13

3.3.3 Detail description of usecase 16

Chapter 4 SOFTWARE DESIGN 31

4.1 Architecture Diagram 31

4.2 Sequence diagram 32

4.2.1 E-commerce modules 32

4.3 Database design 35

4.3.1 Database diagram 35

4.3.2 Database description 37

4.4 User interface design 47

4.4.1 E-commerce website 47

4.4.2 Admin website 70

Chapter 5 IMPLEMENTATION AND TESTING 80

5.1 Implemention 80

5.1.1 Run back end server 80

5.1.2 Run front end server 80

5.2 Testing 81

5.2.1 Overview 81

5.2.2 Test scenarios 81

5.2.3 Test Result 82

Chapter 6 CONCLUSION 90

6.1 Results 90

6.2 Strengths and Drawbacks 90

6.2.1 Strength 90

6.2.2 Drawbacks 90

6.3 Lesson learned 90

6.4 Future works 91

REFERENCES 92

APPENDICES 93

LIST OF FIGURE

Figure 1 Cellphones Logo 8

Figure 2 Thegioididong logo 9

Figure 3 PhongVu Logo 10

Figure 4 Systems overview usecase 14

Figure 5 < Guest > overview use case 16

Figure 6 < User > Overview use case 22

Figure 7 < Admin > Overview use case 28

Figure 8 Architecture Diagram 31

Figure 9 Sequence diagram User Login 33

Figure 10 Sequence diagram Add product to cart 34

Figure 11 Sequence diagram Request an order for the COD payment method 35

Figure 12 Database diagram 36

Figure 13 E-commerce website Screen flow diagram 47

Figure 14 <Ecommerce Website> Header specification 49

Figure 15 <Ecommerce Website> Home Page 50

Figure 16 <Ecommerce Website> Cart Popover 50

Figure 17 <Ecommerce Website> Search Popover 51

Figure 18 <Ecommerce Website> Login Page 52

Figure 19 <Ecommerce Website> Cart Page 53

Figure 20 <Ecommerce Website> Product list page 54

Figure 21 <Ecommerce Website> Detail Page 1 55

Figure 22 <Ecommerce Website> Detail Page 2 56

Figure 23 <Ecommerce Website> Checkout Pgae 57

Figure 24 <Ecommerce Website> Modal Address Shipping 59

Figure 25 <Ecommerce Website> Modal Edit Address shipping 60

Figure 26 <Ecommerce Website> Modal Create Address Shipping 61

Figure 27 <Ecommerce Website> User Info Page 62

Figure 28 <Ecommerce Website> Order Page 64

Figure 29 <Ecommerce Website> Manage Address Page 65

Figure 30 <Ecommerce Website> Popover order delivery 66

Figure 31 <Ecommerce Website> Popover Detail Order 67

Figure 32 <Ecommerce Website> Add coment modal 69

Figure 33 Screen Flow description for Administration Website 70

Figure 34 <Admin Website > Dasboard page 72

Figure 35 <Admin Website > Header page 73

Figure 36 <Admin Website > Login page 74

Figure 37 <Admin Website > Order management page 75

Figure 38 <Admin Website > User management page 76

Figure 39 <Admin Website > Product List page 77

Figure 40 <Admin Website > Edit Product page 1 78

Figure 41 <Admin Website > Edit Product page 2 78

Figure 42 < Test Scenario1 > Log in By local acount 1 83

Figure 43 < Test Scenario1 > Log in By local acount 2 83

Figure 44 < Test Scenario1 > Total amount to cart 1 85

Figure 45 < Test Scenario1 > Total amount to cart 2 85

Figure 46 < Test Scenario1 > Caculate the shipping fee 1 87

Figure 47 < Test Scenario1 > Caculate the shipping fee 2 87

Figure 48 < Test Scenario1 > filter product 1 88

Figure 49 < Test Scenario1 > filter product 2 89

LIST OF TABLES

Table 1 Tool and techiques 3

Table 2 List of actor 13

Table 3 System overview usecase 15

Table 4 < Guest > Sign up 16

Table 5 <Guest > Login 17

Table 6 < Guest > View product detail 18

Table 7 < Guest > Add to cart 19

Table 8 < Guest > Manage shopping cart 19

Table 9 < Guest > Search product 20

Table 10 < Guest > Filter poducts 21

Table 11 < User > Payment 22

Table 12 < User > Review purchased product 23

Table 13 < User > Personal information management 24

Table 14 < User > Order Management 25

Table 15 < User > Manage notifications 26

Table 16 < User > Add comment 27

Table 17 < Admin > Order management 28

Table 18 < Admin > User management 29

Table 19 < Admin > Product management 30

Table 20 Architecture 31

Table 21 Database overview 36

Table 22 Database Address 37

Table 23 Databese Carts 37

Table 24 Database Comments 38

Table 25 Database Orders 39

Table 26 Databse product 42

Table 27 Database RecentProduct 44

Table 28 Databse Reviews 44

Table 29 Database Users 45

Table 30 Database Variants 46

Table 31 Database brands 47

Table 32 Screen Flow description for an e-commerce website 48

Table 33 <Ecommerce Website> Header specification 49

Table 34 <Ecommerce Website> Home Page 50

Table 35 <Ecommerce Website> Cart Popover 50

Table 36 <Ecommerce Website> Search Popover 51

Table 37<Ecommerce Website> Login Page 52

Table 38 <Ecommerce Website> Cart Page 53

Table 39 <Ecommerce Website> Product list page 55

Table 40 <Ecommerce Website> Detail Page 56

Table 41 <Ecommerce Website> Checkout Pgae 58

Table 42 <Ecommerce Website> Modal Address Shipping 59

Table 43 <Ecommerce Website> Modal Edit Address shipping 60

Table 44 <Ecommerce Website> Modal Create Address Shipping 61

Table 45 <Ecommerce Website> User Info Page 62

Table 46 <Ecommerce Website> Order Page 64

Table 47 <Ecommerce Website> Manage Address Page 65

Table 48 <Ecommerce Website> Popover order delivery 66

Table 49 <Ecommerce Website> Popover Detail Order 67

Table 50 <Ecommerce Website> Add coment modal 69

Table 51 Screen Flow description for Administration Website 71

Table 52 <Admin Website > Dasboard page 72

Table 53 <Admin Website > Header page 73

Table 54 <Admin Website > Login page 74

Table 55 <Admin Website > Order management page 75

Table 56 <Admin Website > User management page 76

Table 57 <Admin Website > Product List page 77

Table 58 <Admin Website > Edit Product page 78

Table 59 Test Scenarios 81

Table 60 < Test Scenario1 > Log in By local acount 82

Table 61 < Test Scenario1 > Total amount to cart 84

Table 62 < Test Scenario1 > Caculate the shipping fee 85

Table 63 < Test Scenario1 > filter product 88

Table 64 Task Distribution 93

ABSTRACT

MERN: MongoDB (M), ExpressJS (E), React (R) và NodeJS

(N) JS: Javascript

API: Application Programming

Interface JSON: JavaScript Object

Notation HTTP: Hyper Text Transfer

Protocol JWT: Json Web Token

Chapter 1 INTRODUCTION

1.1 Subject name

Research for building a multi-platform phone e-commerce system (website) MERN Stack application

1.2 The urgency of tbe subject

Currently, advanced technologies develop more and more strongly and are applied more and more in the fields of economy, production as well as people's daily life A typical point in the development of such technologies is the application of information technology in almost all activities Thanks to that, the work is done quickly, accurately, and with much higher results

When society is developing, people's living standards are improved, and economic income is improving, the mobile phone is no longer strange to everyone, but on the contrary, it is an indispensable item indispensable for people today Most people equip themselves with a phone that suits their needs and pocket However, with today's increasingly busy life, to want to buy a favorite phone, consumers have to go to the store to choose, so it will take a lot of time and effort Along with the reasons mentioned above, through researching the project team,

it is known that the application of selling mobile phones online will help customers reduce the time and effort to go to the store to buy If you want to choose a phone that suits your budget, you just need to sit next to a computer with an internet connection to be able to buy the phone you need Besides, smart mobile devices such as smartphones are now also an inseparable object of each person, so a cross-platform multi-platform sales system that connects will help customers' purchasing decisions goods are always timely and fast

Therefore, the project team chose to carry out the topic "Research and build a cross-platform phone selling system (Website) using MERN Stack "

The system is built with the orientation to make shopping for customers' phones easier and faster, without wasting time and effort, giving customers the same experience as buying a phone at a physical store

1.3 Purpose of the topic

Building an E-commerce system to sell phones on two platforms Website and Mobile:

 Backend: Learn and build RESTful API based on non-relational

database MongoDB based on NodeJS Express framework

 Front-end Website: Learn and connect API to create website interface

through ReactJS library

1.4 Object and scope of study

1.4.1 Functional requirements

The object of the topic in the system is to build a system for customers to access and perform the behavior of viewing, purchasing products, managing purchased orders, from the system (customers have not registered yet logged in and logged in) Along with that, the administrator can manage the system with basic administrator functions

1.4.1.1 Requirements of the customer user group

- The interface is easy to use and has high aesthetics

- Allow customers to register for membership and ensure confidentiality

of information

- View and change account information

- The form of payment must be accurate

- Product information is rich and diverse

- Introduce and sell many types of goods and items so that customers have many opportunities to choose about one type of item Information about

a product must be detailed so that customers can grasp information about the product they choose Especially the items that many customers are interested in

- Always update, introduce the latest generations of phones

- Allow customers to search quickly and accurately according to many criteria

- Allow customers to buy products in installments

1.4.1.2 Requiremets of the system administrator user group

- General management: related to the information of customers, goods,

- Updating goods information online

- Easily update and regularly change images, detailed price

information of items you will do business with anywhere

- Manage, store and report information about orders and status of orders: delivered yet, multi-payment

- Detailed statistics specific, accurate and fast

- Statistics on which items are sold out, which are best-selling, which are in stock, which items need to be edited

- Summary of daily, weekly, monthly, quarterly, and annual revenue and expenditure

- Aggregate and store customer feedback to be able to answer

- Customers quickly and accurately

- Products: Can add, edit and delete information, categories

- Receive and respond to customer requests

- Manage other information: promotions,

1.4.2 Tools and techniques

Table 1 Tool and techiques

Source control Github Modeling tool draw.io, Enterprise Architect, Moon

Modeler

1.5 Expected results achieved

Understand the knowledge of MERN Stack , Restful API

Complete a website application selling phones online with full basic features

Chapter 2 THEORETICAL BASIC

2.1 What is MERN STACK ?

MERN is the acronym for MongoDB, Express JS, React JS, and Node JS The MERN stack is a combination of the above technologies, all based on JavaScript, used to build advanced web applications It is an open-source full-stack development

framework, it provides entire front-end to back-end development components [1] 2.2 MongoDB

MongoDB is an open-source, cross-platform, NoSQL DBMS

It is a document-oriented database, which means that data is saved using

collections and documents, instead of tables and rows, like in a relational database This makes possible easier and faster data integration within applications [1]

MongoDB stores the data in binary JSON format that allows the fast exchange of

data between client and server [1]

MongoDB can be used for the storage of large volumes of data, which makes it highly scalable [1]

React JS offers the facility of code reusability on multiple platforms

It is fast and scalable

2.5 NodeJS

Node JS is an open-source, cross-platform, JavaScript runtime environment It

is designed to run the JavaScript code outside the browser, on the server-side [1]

Node JS accesses the Node Package Manager (NPM), which hosts a large

number of private and public packages, and is as well utilized for publishing Node JS projects [1]

It is based on the event-driven, non-blocking I/O model

is one of the best full-stack development suites after MEAN [1]

React JS is the best when it comes to UI layer abstraction It provides the best - in-class tools for faster code development While React is only a library, it gives you the freedom to build the application and organize the code the way you want, by providing the necessary tools Hence, it is better than Angular in terms of UI rendering and performance [1]

Product recommendation technology based on matrix algorithms

Based on the effect of the algorithm, we can apply it to the system to suggest products that are close to customers' thoughts to help increase sales based on customer proximity

Chapter 3 REQUIREMENTS ANALYSIS

- Websites with the pretty fast loading speed

- Customers can easily find the products they want to buy through the filter

- Very smart search, product suggestion support

- Support Flash sales and promotions, speeding up the user's purchasing decision

3.1.1.1.3 Drawbacks

- It is not compatible with international customers because it only supports purchases in the Vietnamese language, with a face value of VND

- The interface is tangled, not optimized for the necessary functions

- Product evaluation is not optimal Because anyone can make a product review, even though they haven't purchased in the store Causing the phenomenon of false evaluation to lower the reputation of the store as well

as the product

Figure 1 Cellphones Logo

- Support through Zalo, receive messages and reply for a long time It is not possible to directly support the product the customer wants

- Customer account channel is not supported From there, customers cannot directly track their current order and installment information

- Product comparison function is not supported for all products, some errors are detected

- Does not support in-app purchases

- The interface has the correct support functions

- Support to view order history

- Support to register for installment payment associated with major domestic banks and famous installment support channels such as FE Credit, Home Credit,

- Compare products with optimal design, users can easily see the difference between products

- Customers can easily find the products they want to buy through a very smart search filter, supporting product suggestions

Figure 2 Thegioididong logo

- Support Flash sales and promotions, speeding up the user's purchasing

decision 3.1.1.2.3 Drawbacks

- Websites with very slow loading data speed, during loading the interface

is a white background which is not user-friendly

- Not yet support chatbot or consultant on the purchase interface, forcing shoppers to call the call center if they have any questions

- Product evaluation is not optimal Because anyone can do a product review, even though they haven't purchased in the store Causing the phenomenon of false evaluation to bring down the reputation of the store

as well as the product

3.1.1.3 Phong Vu

3.1.1.3.1 Introduce

Phong Vu is known as a long-standing and prestigious retailer in Vietnam Phong Vu specializes in trading information technology products, game entertainment equipment, office equipment, and hi-tech equipment of many big brands

such as Dell, Asus, HP, MSI, Lenovo

3.1.1.3.2 Advantages

- The filter is optimized precisely, helping buyers quickly identify the products they want to buy according to their needs

- The website interface is a very good-looking, minimalistic design, in

line with the general design trend, making it easy for new users to access

Figure 3 PhongVu Logo

3.1.1.3.3 Drawbacks

- Some product category pages return incorrect results

- Installment sales on the website interface are not supported yet

- The function of comparing products is not supported yet

- Does not support comments, inquiries about product information

- Product reviews are not supported yet

- Not yet support to suggest other related products when the buyer enters

a page any product details

- Products with the same name "Example: iPhone X" are separated by many separate page details (one color per page, ex iPhone X 64GB black, iPhone X 64GB White, .) makes users want to choose a different product, or differen

- The capacity must be searched again, not suggested

- The interface on the app is quite sketchy App rated below average

3.1.2 Research roles and functions

After surveying the status quo by referring to websites selling mobile phones the group has gathered some information:

- Admin is the person with the highest authority: can view information about income as well as any changes on the sales website All information on the website will be posted by the admin

- Admin can be the store owner, who holds all the power, revenue, and expenditure in trading and warehousing activities Admin can be a management staff, who has the task of seeing how many orders are received during the day and week and how many have been solved so that they can report at any time to the store owner

- Customers are divided into 2 groups: logged-in customers and not logged-in customers

- The logged-in customer group can perform all the features of the logged- in customer group and can use other features such as payment, personal

non-information management, order management, receiving non-information news, comments, product reviews,

3.1.3 Issue of records, books, and transaction documents

- Buyer Information: Full name, the hometown where you live, date of birth, occupation, email, phone

- Product information: Product price, quantity, the warranty period

- Consignee information: Usually recipient's address, consignee's note

- Payment information: Payment method (COD/ E-wallet), delivery date, shipping fee, total payable

3.1.4 Assess the current situation and solutions

Through the survey, we found that most of the online sales websites are:

- Introduce products (manufactured goods)

- Meets the majority of web value requirements

The order section has all the information of the order

- But we still see some limitations

- Some sites do not support login or do not support login with 3rd party (Google, Facebook) every time users want to buy a product, they have to re -enter all recipient information, leading to entering the wrong number address phone to receive goods, The tracking of order information has many limitations

- Many websites do not yet support product recommendations for users: they have not taken full advantage of the ability to increase users' purchasing decisions

- The multi-page interface is a bit complicated for users, not giving a good feeling when using

3.2 Define Requirements

3.2.1 System requirements

3.2.1.1 Website section

- Building an online shopping website for the user group is Guest (visitor) and

User (users who already have an account)

- Building an online management website for the group of users who are Admins (administrators of the system)

3.2.2 Functional and non-functional requirements

- Good traffic tolerance

- Confidentiality of customer information

- Ensure good quality of user experience

3.3 Requirements modeling

3.3.1 List of actors

Table 2 List of actor

1 Guest New customer or user who has not logged in to the

system

2 User The user has an account in the system

3.3.2 Systems overview usecase

Figure 4 Systems overview usecase

Table 3 System overview usecase

TP-GUEST-03 View products detail View product details

TP-GUEST-05 manage shopping cart Manage shopping cart

the shopping cart

products to the list

(COD or VnPay)

products

Review of purchased products

management

Manage personal information (name, address, profile picture, phone number)

3.3.3 Detail description of usecase

3.3.3.1 < Guest > overview use case

Figure 5 < Guest > overview use case

3.3.3.1.1 < Guest > Sign up

Table 4 < Guest > Sign up

Brief description Allow visitors to register for an account

2 Customers who are not logged in click on the "Register" button on the

menu bar / Click on the "Personal" box at the bottom of the tab bar and

click on the Login / Register box => select the Register box

3 Customers enter full personal information and email address then click

"Register"

Alternative flow(s)

Internal server error The system displays the error message

Entry condition(s)

“Guest sign up ” scenario The user has an email account or

Facebook, Google account

Exit condition(s)

account registration and redirect the screen to the login page

3.3.3.1.2 < Guest > Login

Table 5 <Guest > Login

Brief description Allow visitors to log in to the system

Flow of events

1 Customers who are not logged in to access the system

2 Customers who are not logged in click on the “Login” button on the menu bar/Click on the “Personal” box at the bottom of the tab bar and click on the Login/Register box

3 Customers enter their username and password and then press the “Login” button

Alternative flow(s)

Internal server error The system displays the error message

Entry condition(s)

an account in the system

Exit condition(s)

and go to the home screen

3.3.3.1.3 < Guest > View products detail

Table 6 < Guest > View product detail

Brief description Allows visitors to view product details

Flow of events

1 Customers who are not logged in to access the system

2 Customers click on a product they want to see in the product list

3 Customers can click on the "See more" button to see the full description of the product

4 Customers click on "Viewed products / Products you may like / Products

of the same type" to see the corresponding product suggestions

5 Customers can click on the "Buy Now" button to add the product to the

detail page and displays all the product information

3.3.3.1.4 < Guest > Add to cart

Table 7 < Guest > Add to cart

Brief description Allow visitors to add products to the

cart

Flow of events

1 Customers who are not logged in to access the system

2 Click to view product details

3 The customer chooses the color and clicks the "Buy now" button

Alternative flow(s)

Internal server error The system displays the error message

Entry condition(s)

“Add to cart” scenario Customers can only add when they

are on the product detail page

Exit condition(s)

3.3.3.1.5 < Guest > Manage shopping cart

Table 8 < Guest > Manage shopping cart

Allow visitors to add, remove or

Brief description delete all products in the cart

Flow of events

1 Customers who are not logged in to access the system

2 Customers who are not logged in click on the “Cart” button on the screen

3 The customer selects the (+) or (-) button on the product that the customer wants to adjust

4 The customer chooses to delete all to clear the cart

cart is updated successfully after each corresponding operation

3.3.3.1.6 < Guest > Search product

Table 9 < Guest > Search product

Brief description Allow visitors to search for products

they want to see

Flow of events

1 Customers who are not logged in to access the system

2 Customers click on the search bar, enter the keywords to find, and press the search button

page, displaying the searched products

3.3.3.1.7 < Guest > Filter poducts

Table 10 < Guest > Filter poducts

Brief description Allow visitors to filter the products

they want to see according to their wishes

Flow of events

1 Customers who are not logged in to access the system

2 Customers select the desired filter on the website/swipe from the left to

display the filter and select the desired filter

Failed The system reports an error

3.3.3.2 < User > Overview use case

Figure 6 < User > Overview use case

3.3.3.2.1 < User > Payment

Table 11 < User > Payment

Brief description Allow the User to pay a bill

Actor(s) User

Flow of events

1 Customers have logged in to access the system

2 The customer clicks on the cart

3 The customer clicks on the checkout button in the shopping cart

4 The user selects the delivery method

The user selects the payment method (COD and Paypal) and then clicks the pay button

notification, a confirmation email is sent

to customer email

3.3.3.2.2 < User > Review purchased product

Table 12 < User > Review purchased product

products

Brief description Allow users to give reviews,

comment on purchased products

Flow of events

1 Customers have logged in to access the system

2 Customer clicks on order management item

3 The customer selects the delivery order item

4 The user chooses to view order details

5 The user selects the review button on the product bar that wants to leave a comment in the order

6 Customers proceed to choose the number of stars to rate and give

comments

Alternative flow(s)

Internal server error The system displays the error message

Entry condition(s)

“Review purchased products” scenario The customer has successfully

logged in and the customer has successfully received the goods for that product

Exit condition(s)

3.3.3.2.3 < User > Personal information management

Table 13 < User > Personal information management

management

Brief description Allow the user to manage the

account (edit personal information)

Flow of events

1 Customers have logged in to access the system

2 Customers click on the account information/username on the personal page

on the app

3 Customers change personal information in each input box

4 The user chooses to change the avatar image, the image is selected from the device

5 The user selects the "Change password" button to open the password

change modal and proceed to enter the old password and then confirm

6 The user selects the "Save changes" button

Alternative flow(s)

Internal server error The system displays the error message

Entry condition(s)

“Personal information management”

Exit condition(s)

information

3.3.3.2.4 < User > Order Management

Table 14 < User > Order Management

Brief description Allows users to manage orders

Flow of events

1 Customers have logged in to access the system

2 Customers click on the ordered item on the website / click on the personal box and select order management on the app

3 Customers select the view details button to view order details

4 The user clicks on the Cancel Order button – for orders that have not been confirmed by the administrator

Alternative flow(s)

Internal server error The system displays the error message

Entry condition(s)

Exit condition(s)

3.3.3.2.5 < User > Manage notifications

Table 15 < User > Manage notifications

Brief description Allow users to manage notifications

Flow of events

1 Customers have logged in to access the system

2 Customers click on the notification box on the website screen / the

message box at the bottom of the app

3 Customers click on the "Mark as viewed" button on any notice

4 Customer clicks on the "Delete" button

5 Customers select the box "Mark as read all"

Customer clicks on the “Clear All” button

Failed The system reports an error

3.3.3.2.6 < User > Add comment

Table 16 < User > Add comment

Brief description Allows users to manage orders

Flow of events

1 Customers have logged in to access the system

2 Customers click on the personal information item on the website

3 Customers click on the on the website order management

4 Customers select the view details button to view order details

5 Click add comment

3.3.3.3 < Admin > Overview use case