Building a website for a chain of coffee shops faculty of high quality training graduations thesis of the information technology

Reason for choosing the topic

To enhance coffee shop sales, a dedicated website was developed to connect customers with the store's products online This platform allows customers to conveniently place orders from home, eliminating the need to visit the store Additionally, the website enables customers to leave ratings and comments, providing valuable feedback that helps the business improve and grow.

Purpose and tasks performed

Learn more about frameworks and libraries (NodeJs and ReactJs) in today's new software technology, to cultivate knowledge for web programming skills as well as their skills

− Learn React, NodeJS, and Mongodb through online documentation and knowledge from internships

− Find the style and do the actual business of the website

− Develop websites based on popular coffee selling websites on the Internet.

Research Methods

Our team has conducted thorough research on manuals from websites offering MERN stack courses, focusing on Node.js and React.js Additionally, we reviewed documents related to our internship experience at the company, which provided valuable insights into website outsourcing practices.

Expected results achieved

Successfully built a coffee shop chain business website with database using Mongodb, backend using NodeJs and frontend using ReactJs.

About ReactJs

React is the most popular JavaScript library for building user interfaces

(UIs) It gives excellent response speed when users input using a new method of rendering web pages

Developed by Facebook, this tool was launched in 2013 as an open-source JavaScript engine It has since outpaced major competitors, including Angular and Bootstrap, which were the leading JavaScript libraries at the time.

In this article, we'll help you understand what React is and the benefits it brings to work as a front-end developer

− Suitable for developing complex UIs on web as well as mobile

− Use virtual DOM instead of real DOM

− Easily integrated with other JavaScript frameworks

JSX, or JavaScript XML, is an extended syntax of JavaScript designed to simplify the rendering of UI components By encapsulating JavaScript expressions in curly braces, developers can seamlessly integrate dynamic content Once compiled, JSX expressions transform into regular JavaScript objects, allowing for their use in conditional statements, loops, and as function arguments or return values ReactJS utilizes JSX to enhance the readability and writability of HTML code, ultimately improving the performance of applications and websites.

In React, components function similarly to JavaScript functions by returning HTML elements, making them self-contained and reusable Their primary role is to render HTML through the render function, and they can be categorized into two types: Function Components and Class Components.

Props, short for Properties, are attributes that enhance components by allowing the inclusion of dynamic data within the render method They facilitate the unidirectional flow of information from parent components to child components, enabling efficient data transfer and rendering.

State is a crucial object in component-based development that holds data specific to a component Unlike props, which can be passed between different components, state is confined to the component that contains it and can be modified as needed Whenever the state is updated, the component automatically re-renders to reflect these changes.

About NodeJs

Node.js is a powerful platform that utilizes the V8 JavaScript runtime, an exceptionally fast interpreter designed for the Chrome browser While V8 can be embedded in various applications, Node.js specifically optimizes it for web servers This demonstrates that JavaScript, a versatile programming language, can effectively operate in server environments in addition to client-side applications.

Node.js APIs operate asynchronously, meaning they are non-blocking and primarily rely on the Node.js server to retrieve data This design allows the server to proceed to the next API call while waiting for a response from the previous one, facilitating real-time data handling through an efficient calling and notification mechanism of Node.js events.

Run fastly: NodeJs is based on the V8 JavaScript Engine platform so The program is executed quickly

Node.js operates on a single-threaded model that leverages an event-driven architecture, allowing it to handle multiple requests in a non-blocking manner This design enhances scalability, enabling Node.js to manage a higher volume of requests compared to traditional servers like Apache HTTP Server, which rely on a limited number of threads for handling incoming requests.

No buffering: NodeJS does not buffer any data and these applications are mainly data output

Permits: NodeJS has been licensed by MIT License

Node.js offers significant advantages in speed enforcement and scalability, making it an ideal choice for startups aiming to develop exceptional products and achieve rapid growth Its fast performance is crucial for businesses looking to expand quickly in a competitive market.

About ExpressJs

Express.js is a robust framework based on Node.js, designed to enhance web and mobile development It offers powerful features, supports various HTTP methods, and utilizes API middleware, making it both highly effective and user-friendly.

− Setting the intermediate layer to return the HTTP request

− Define router allows use with different actions based on HTTP method and URL

− Allows returning HTML pages based on parameters

Express.js simplifies development and makes it easier to write secure, modular, and fast applications It is possible to do all that in plain old Node.js.

About MongoDB

MongoDb is an open-source database management system that is a NoSQL database and is used by millions of people

MongoDb is a document-oriented database, the data stored in the document type as JSON instead of relational database table so the query will be very fast

MongoDB utilizes a flexible data storage model by organizing data in the form of JSON documents, allowing each collection to vary in size and structure This adaptability enables users to insert diverse types of data without strict schema requirements.

MongoDB operates without mutual constraints and lacks the join functionality found in traditional RDBMS, allowing for faster data operations When inserting, deleting, or updating data, MongoDB does not require time-consuming checks for data constraints, resulting in improved performance and efficiency.

MongoDB offers exceptional horizontal scalability, allowing for easy system expansion By utilizing a cluster of interconnected nodes that share data, adding a new node to the cluster facilitates seamless growth and enhances performance.

The data field "_id" is always automatically indexed (indexed) for the highest performance information query speed

When there is a data query, the record is cached to RAM, to serve the following query faster without having to read from the hard drive

MongoDB offers significantly higher performance compared to relational database management systems (RDBMS), particularly in query speed for operations such as finding, updating, inserting, and deleting data Tests indicate that as data volume increases, MongoDB's insert speed can surpass that of traditional RDBMS, making it a faster choice for handling large datasets.

About Natural Language Processing

2.5.1 What is Natural Language Processing?

Natural Language Processing (NLP) is a key area of Artificial Intelligence dedicated to understanding how computers interact with human language Its primary aim is to enhance the ability of machines to comprehend and execute tasks related to natural language, thereby facilitating human-machine interactions, improving communication between individuals, and optimizing word and speech processing efficiency.

2.5.2 Application of Natural Language Processing in chatbot building

A chatbot is an advanced computer program designed to engage in conversation with humans It effectively handles repetitive inquiries, answering questions like "When does event X take place?" or "What is Vinaphone MAX70?" Additionally, chatbots serve as virtual assistants, facilitating more complex tasks such as event registration, order assistance, and form completion, often breaking down these processes into manageable steps.

Dialogflow is a natural language understanding platform that makes it easy to design and integrate a conversational user interface into your mobile

6 app, web application, device, bot, interactive voice response system, and so on Using Dialogflow, you can provide new and engaging ways for users to interact with your product

Dialogflow is capable of analyzing various input types from customers, including text and audio inputs such as phone calls or voice recordings Additionally, it can respond to customers through text messages or synthetic speech, enhancing the overall user experience.

Current status survey

Currently, with the 4.0 eras Many coffee shops have succeeded in building website to promote their image and product business Therefore, our group decided to build our website model

A few images surveyed by the team from the websites:

Figure 3.1 Current status survey: The Coffee House

Figure 3.2 Current status survey: Highland Coffee

Figure 3.3 Current status survey: Trung Nguyen Legend

Figure 3.4 Current status survey: Starbucks

Request list

A coffee business website has the following basic structure:

− User group is management - Role: Admin

− User group is the employee - Role: Employee

− User group is customers who have not an account - No role

− User group is customers who have an account - No role

❖ Essential functions of each user group:

− Log in and have full rights to the system

− Add accounts for employees to the branch they work for

− View information all the employees in the store's branches

− Manage and check customer information on the website

− Lock customers from logging in to the website if there is bad behavior

− Lock employee accounts when no longer working at the store

− Manage and view revenue statistics of branches

• User group is the employee

− Log in to the branch of the store which they are working in

− Manage orders placed at the branch

− Confirm the order placed on the website

− View the store's sales statistics

• User group is customers who have not an account

− See product information on the website

− Order directly on the website

− Can register an account to use more functions

• User group is customers who have an account

− Sign in with google or the account created on the website

− Order directly on the website

− Rate and leave a comment on purchased products

Requirements Modeling

Use Case Diagram

Figure 3.6 Use Case Diagram 1 - Store management

Figure 3.7 Use Case Diagram 2 - Customer

Figure 3.9 Usecase admin: Manage account

Table 3.1 Usecase specification: Admin - Manage account

Goal Allows admin to manage the accounts of those who have registered accounts on the website

Pre-conditions User must login with admin account

3.1 If you want to lock the account, click on the user you want to delete and press the “Lock User” button

Figure 3.10 Usecase admin: Manage employee

Table 3.2 Usecase specification: Admin - Manage employee

Goal Allow admin to manage store's employee information

4 Click the “Add Employee” button to add employee 4.1 Enter employee information and click “Ok” to create a new employee

Figure 3.11 Usecase admin: Manage branch

Table 3.3 Usecase specification: Admin - Manage branch

Goal Allow admin to manage the store's branches

4 Click “Mange Branch” button to manage branches 4.1 To add a branch click on the “Add Branch” button 4.2 To delete a branch click on the “Delete” button To edit the operating status of the store, press “Close” or “Open”

5 Click the “Add Product” button to add products for the branch

5.1 Select branch before adding products 5.2 Select category, product name and quantity to add to branch

6 To edit the branch's products, click “Edit”

7 To delete a branch's products, click “Delete”

Figure 3.12 Usecase admin: Manage category

Table 3.4 Usecase specification: Admin - Manage category

Goal Allows admin to manage the store's categories (add, edit, delete)

3.1 To add a new category, press the “Add Category” button and fill in the

3.2 To edit the information’s category, click the “Edit” button and select the information’s category

3.3 To delete category, press the “Delete” button on the screen corresponding to the category to be deleted Exception

Figure 3.13 Usecase admin: Manage product

Table 3.5 Usecase specification: Admin - Manage product

Goal Allow admin to manage the store's products (add, edit, delete)

3.1 To add a new product, press the “Add Product” button and fill in the

3.2 To edit the information’s product, click the “Edit” button and select the information’s product

3.3 To delete a product, press the “Delete” button on the screen corresponding to the product to be deleted

Figure 3.14 Usecase admin: Manage comment

Table 3.6 Usecase specification: Admin – Manage comment

Goal Allow admin to manage customer comments on products

3.1 To delete customer's comment, click button "Delete" Exception

Figure 3.15 Usecase admin: Manage order

Table 3.7 Usecase specification: Admin – Manage order

Goal Allow admin to manage the products sold and the store's invoices

3.1 To view order details, click on the “Detail” button corresponding to each order

3.2 To confirm the order after calling the customer, press the “Confirm” button

Figure 3.16 Usecase admin: Manage coupon code

Table 3.8 Usecase specification: Admin – Manage coupon code

Goal Allow admin to manage discount codes when there is an event

3.1 To generate a coupon code, click on the “Add Coupon” button Then enter the quantity, discount percentage, start - end date and content

3.2 To delete a coupon code, click on the “Delete” button Exception

Figure 3.17 Usecase admin: View stats

Table 3.9 Usecase specification: Admin – View stats

Goal Allow admin to examine the number of products sold and the revenue of the affiliates

Pre-conditions Access the management page

Table 3.10 Usecase specification: Admin – Login

Goal Log in to the system as admin

4 Enter your email and password to login Exception

Table 3.11 Usecase specification: Admin – Logout

Goal Log out of the system

Pre-conditions User must log in to the system

2 After completing the job, press the logout button to log out of the system

Figure 3.21 Usecase employee: Manage branch

Table 3.12 Usecase specification: Employee - Manage branch

Goal Allow employees to add and delete products of the branch the store is working in

Pre-conditions User must login with employee account

4 Click the “Add Product” button to add products to the branch

4.1 Select branch before adding products 4.2 Select category, product name and quantity to add to branch

5 To delete a branch's products, click “Delete”

Figure 3.22 Usecase employee: Manage order

Table 3.13 Usecase specification: Employee – Manage order

Goal Allow employee to view order details and confirm order

3.1 To view order details, click on the “Detail” button corresponding to each order

3.2 To confirm the order after calling the customer, press the “Confirm” button

Figure 3.23 Usecase employee: Manage coupon code

Table 3.14 Usecase specification: Employee – Manage coupon code

Goal Allow employee to manage discount codes when there is an event

3.1 To generate a coupon code, click on the “Add Coupon” button Then enter the quantity, discount percentage, start - end date and content

3.2 To delete a coupon code, click on the “Delete” button

Figure 3.24 Usecase employee: View stats

Table 3.15 Usecase specification: Employee – View stats

Goal Allow employee to examine the number of products sold and the revenue of the affiliates

Pre-conditions Access the management page

Table 3.16 Usecase specification: Employee – Login

Goal Log in to the system as employee

4 Enter your email and password to login

5 After login, to update information and password, Employee click on “personal profile”

Table 3.17 Usecase specification: Employee – Logout

Pre-conditions User must log in to the system

2 After completing the job, press the logout button to log out of the system

Figure 3.27 Usecase: Customers have account

Figure 3.28 Usecase customers have account: Login

Table 3.18 Describe usecase: Customers have account - Login

Goal Log in to the system as customer

Actors Usecase customers have account

- Customers must log in to the system with their created account or Google account

2 Enter your email and password to login

3 Choose to sign in with Google to log in directly to the website

4 After login, to update information and password, customer click on “personal profile”

Figure 3.29 Usecase customers have account: Logout

Table 3.19 Describe usecase: Customers have account - Logout

2 After completing the shopping, press the logout button to log out of the system Exception

3.4.3.3 Customers have account – Rating and comment

Figure 3.30 Usecase customers have account: Rating and comment

Table 3.20 Describe usecase: Customers have account – Rating and comment

Goal Customers comment and rating the product after purchasing Actors Usecase customers have account

Post-conditions Customer is logged in and still in session

1 Customers go to the homepage of the website

2 Choose the product to comment and rating

3 Choose “Review” to view product reviews

4.1 Enter comments and give stars Exception

Figure 3.31 Usecase customers have account: Order

Table 3.21 Describe usecase: Customers have account - Order

Goal Customers buy products directly through the website

Post-conditions The customer has selected the product they want to buy

1 Select the product and click “Buy Now” to move the product to the cart

2 Customers go to the cart page

3 Customers add discount codes if any

5 Customers enter consignee's name and phone number

6 Customers press the payment button and choose the payment method

- Customer did not enter complete order information

- Customers are too far from the store

- The notice requires entering full order information

Figure 3.32 Usecase: Customers have no account

3.4.4.1 Customers have no account - Register

Figure 3.33 Usecase customers have no account: Register

Table 3.22 Describe usecase: Customers have no account - Register

Goal Users register for an account to log in to the website and rate the product

Actors Customers have no account

Pre-conditions - The user must access the website

- User must have email Post-conditions

3 Select the “Register” section 3.1 Click “Register” after filling in the registration information

3.2 Log in to your registered email and click on the link to confirm

4 After successful registration, go back to the successful registration page and click on the button to go to the homepage

3.4.4.2 Customers have no account - Order

Figure 3.34 Usecase customers have no account: Order

Table 3.23 Describe usecase: Customers have no account - Order

Goal Customers buy products directly through the website

Actors Usecase customers have no account

Pre-conditions Customers accessing the website

Post-conditions The customer has selected the product they want to buy

1 Select the product and click “Buy Now” to move the product to the cart

3 Customers add discount codes if any

5 Customers enter consignee's name and phone number

6 Customers press the payment button and choose the payment method

7 Notice of successful order Exception

- Customer did not enter complete order information

- Customers are too far from the store

- The notice requires entering full order information Open Issues - N/A

Database design

Table 4.1 Database entity analysis: Categories

Name Explain Note id_categories Product type code name Product type name alias alias timestamps Initialization time and update time

When initializing and updating the time automatically get the current time

Table 4.2 Database entity analysis: Product

This article provides essential details about products, including their unique identification codes and names It specifies sizes, with options for medium (size_M) and large (size_L), along with pricing information Additionally, it includes descriptions that offer comprehensive insights into each product's features and specifications.

43 alias alias imagesProduct Product pictures categoryId Product type code timestamps Initialization time and update time

Table 4.3 Database entity analysis: Order

The article outlines key components of an order management system, including the order ID, customer name, phone number, and address It also highlights the total invoice value and any notes from customers regarding the product Additionally, it emphasizes the importance of tracking the invoice status for efficient order processing.

The order is considered valid once it has been approved by an admin or employee The completion time of the order is recorded as "doneAt," and it includes a product list identified as "productList." Each order is associated with a unique customer code referred to as "userId," and any applicable discounts are represented by "couponCodeId." Additionally, the order is linked to a specific store location indicated by the "branchId."

44 timestamps Initialization time and update time

Table 4.4 Database entity analysis: Branches

Id_branches Branch code name Name of the store alias alias status Store Operation Status listProduct List of products of the branch store timestamps Initialization time and update time

Table 4.5 Database entity analysis: Coupon code

The article discusses essential elements related to discount codes, including the identification of coupon codes, which are randomly generated codes used during sales events It highlights the significance of discount content, detailing the percentage off and the total discount amount available Additionally, it emphasizes the conditions that apply to these discount codes, ensuring that users understand the terms associated with their use.

45 startTime Promotion start time endTime Promotion end time timestamps Initialization time and update time

Table 4.6 Database entity analysis: User

The user information includes a unique user code (id_users), the user's name (fName), the email address used for website login, and the password for account access Additionally, it captures the user's gender, date of birth (birthday), and phone number The system also verifies whether the account has administrative privileges (isAdmin).

If the user is an administrator, isAdmin will be set to "true" and vice versa isEmployee Verify the account is Employee

If the user is an employee, isEmployee will be set to

"true" and vice versa isConfirm Email’s user is confirmed

After using a real email (which exists) to register an account, isConfirm will be set to "true" and vice versa

If users comment with spam purposes to disrupt the website, the administrator will lock the account by setting isLock to "true"

If Employee no longer works at the store, the administrator will lock the account by setting isLock to "true" branchId Branch code timestamps Initialization time and update time

Table 4.7 Database entity analysis: Comments

Name Explain Note id_comments Comment code email Email used by customers to comment content

Content that customers have commented on the product they bought rating Customer product reviews productId Product code timestamps Initialization time and update time

Website interface design

4.2.1 Admin - Employee page (CMS Page)

Figure 4.2 Login page for store members

Table 4.8 Describe: Login page for store members

1 Admin rights Click if logged in with an admin account

2 Employee rights Click if logged in with Employee account

3 Email Enter your account with your registered email

5 Login button Click to complete the login operation

Table 4.9 Describe: Dashboard page - statistics

1 User account box Show number of existing user accounts

2 Product type box Show available store product types

3 Product box Show available store products

4 Order box Show invoice number

Show sales of store affiliates

Where the vertical axis is the revenue and the horizontal axis is the name of the branch

Displays the number of products sold

Where the vertical axis is the name of the product and the horizontal axis is the number of products sold

7 Stack navigation: Dashboard Show more prominently while on the dashboard page

Figure 4.4 Admin page: Navigation bar

Table 4.10 Describe: Admin page - Navigation bar

1 Stack navigation: Account Click to go to the account management page

2 Stack navigation: Employee Click to go to employee management page

3 Stack navigation: Category Click to go to the product catalog management page

4 Stack navigation: Coupon Click to go to the coupon code management page

5 Stack navigation: Product Click to go to product management page

6 Stack navigation: Branch Click to go to store branch management page

7 Stack navigation: Order Click to go to order management page

8 Stack navigation: Comment Click to go to the comment management page

Table 4.11 Describe: Category management page

1 Stack navigation: Category Show more prominently while on the category page

2 Button “Create a new category” Click to open the category creation window

3 Category’s name Show category’s name

5 Update time Display the last update date of the category

6 Button “Edit” Click to open the category update window

7 Button “Delete” Click to delete the category

Based on the length of the web page, if it overflows, it will change to a new page

Figure 4.6 The window of creating a new category product

Table 4.12 Describe: The window of creating a new category product

1 Category’s name Enter new category’s name

2 Button “Cancel” Exit the board

3 Button “OK” Confirm the creation of a new category

Figure 4.7 The window of editing category product

Table 4.13 Describe: The window of editing category product

1 Category’s name Enter new category’s name

3 Button “OK” Confirm the creation of a new category

Table 4.14 Describe: Product management page

1 Button “Create a new product” Click to open the product creation window

2 Product’s name Show Product’s name

3 Product’s image Show Product’s image

4 Category’s name Show Category’s name

5 Description Show description of the product

6 Price Show the price of the product

7 Update time Display the last update date of the product

8 Button “Edit” Click to open the product update window

9 Button “Delete” Click to delete the product

10 Stack navigation: Product Show more prominently while on the product page

Figure 4.9 The window of creating a new product

Table 4.15 Describe: The window of creating a new product

1 Product’s name Enter product’s name

2 Price Enter price of the product

Choose size L to add size to the product

5 Price of the size The corresponding price when increasing the size

7 Button “Upload image” Click the button to upload the product image

9 Button “OK” Confirm the creation of a new product

Figure 4.10 The window of update product

Table 4.16 Describe: The window of update product

1 Product’s name Enter product’s name

2 Price Enter price of the product

Choose size L to add size to the product

5 Price of the size The corresponding price when increasing the size

Delete old photos and update new ones

Click the button to upload the product image

9 Button “OK” Confirm the creation of a new product

Table 4.17 Describe: Account management page

2 Full Name Show the name of the account

3 Admin rights Show permissions of the account as an admin

4 Employee rights Show permissions of the account as an employee

5 Status Show account status (Active or locked)

Display the authentication status of the account (registration email exists or not)

7 Button lock account Click to lock the account

9 Stack navigation: Account Show more prominently while on the account page

Table 4.18 Describe: Comments management page

5 Button “Delete” Click the button to delete the comment

6 Pagination Based on the length of the web page, if it overflows, it will change to a new page

7 Stack navigation: Comment Show more prominently while on the comment page

Table 4.19 Describe: Employee management page

1 Button add employee Click to add a new Employee

2 Search bar Enter the employee code to search

3 Employee code Show employee code

5 Full name Show the name of employee

6 Status Determine if the employee is still working at the store

8 Stack navigation: Employee Show more prominently while on the dashboard page

Figure 4.14 The window of creating employee

Table 4.20 Describe: The window of creating employee

1 Name Enter employee's full Name

2 Email Enter the email that Employee will use

3 Phone Enter the employee's phone number

4 Address Enter the employee's address

6 Birthday Enter or select the employee's date of birth

7 Branch Choose a branch for employees

8 Password Enter the password for each employee

9 Button “Ok” Click to finish creating an employee

10 Stack navigation: Employee Show more prominently while on the employee page

Figure 4.15 Coupon code management page

Table 4.21 Describe: Coupon code management page

1 Button “add coupon” Click to open the window to add a discount code

2 Coupon code Show discount code

3 Percent discount Show discount percentage of discount code

4 Amount Show the number of discount codes available

5 Start day Coupon start time

6 End date The end time of the discount code

7 Content Note the content of the discount code

8 Button “Delete” Remove discount code

Show more prominently while on the dashboard page

Figure 4.16 The window of creating coupon code

Table 4.22 Describe: The window of creating coupon code

1 Amount Enter quantity for discount code

2 Percent discount Enter discount percentage

3 Start Date - End Date Enter the start and end time of the coupon

5 Button “Cancel” Click to exit the board

6 Button “OK” Click to confirm the creation of a new coupon code

Table 4.23 Describe: Branch management page

1 Button “Manage branch” Click to view information and add new branches

2 Button “Add product” Click to open the product creation window

3 Branch frame Select a branch to view detailed information

4 Product’s name Show product’s name

5 Product’s image Show product’s image

6 Category Show the category’s name

7 Description Show description of the product

8 Quantity Show quantity of product

9 Price Show the price of the product

10 Update time Display the product's last update date

11 Button “Edit” Click to open the product update window

12 Button “Delete” Click to delete the product

13 Stack navigation: Branch Show more prominently while on the branch page

Figure 4.18 The window of branches management

Table 4.24 Describe: The window of branches management

1 Button “Add branch” Click to add a new branch

2 Branch’s name Show branch name

3 Branch’s location Show branch location

4 Status Show open/closed stores

5 Button “Delete” Delete branch if no longer in use

6 Customize status Branch opening/closing operations

8 Button “Cancel” Click to exit the board

9 Button “OK” Click to end the process

Figure 4.19 The window of creating a new branch

Table 4.25 Describe: The window of creating a new branch

1 Branch’s name Enter a new branch’s name

2 Branch’s location Enter branch location

3 Button “OK” Confirm the creation of a new branch

Figure 4.20 The window of adding new products for the branch

Table 4.26 Describe: The window of adding new products for the branch

1 Category’s name Select the type of product to add

2 Product’s name Select the product name to add

3 Quantity Enter the quantity for the product

4 Button “Cancel” Click to close the window

5 Button “OK” Click to complete

Table 4.27 Describe: Order management page

1 Filter by day Choose a time to view bills for that day

When the call is finished with the customer, the status will change to CONFIRM

6 Confirmation time When the order is confirmed, the time will take the current time

7 Order creation time Show invoice creation start time

8 Order details Show invoice details

9 Button “Order confirmation” Click to confirm order

11 Stack navigation: Orders Show more prominently while on the orders page

Figure 4.22 The window of order detail

Table 4.28 Describe: The window of order detail

1 Employee code Is the Id of the Employee confirming the order

2 Customer's address The address that the customer enters to receive the beverage

3 Total invoice price Show total invoice price

5 Product Name Show product’s name

6 Price The price corresponds to the product

7 Quantity Quantity corresponding to the product

Table 4.29 Describe: Password change page

Enter the account's current password

If correct, the password will be changed

If you enter the wrong password, it cannot be changed

2 New password Enter new password

3 Repeat the password Enter repeat the password

4 Button “Change password” Click to change password

Figure 4.24 Coupon code management page for employee

Table 4.30 Describe: Coupon code management page for employee

1 Button “add coupon” Click to open the window to add a discount code

2 Coupon code Show discount code

3 Percent discount Show discount percentage of discount code

4 Amount Show the number of discount codes available

5 Start day Coupon start time

6 End date The end time of the discount code

8 Button “Delete” Remove discount code

Show more prominently while on the dashboard page

2 Navigation bar: Homepage Click to go to the homepage

Displayed in blue and underlined while

3 Navigation bar: Product Click to go to the product page

4 Navigation bar: View order Click to go to the order view page

5 Navigation bar: Coupon code Click to go to the page containing the discount code

6 Navigation bar: Introduction Click to go to the introduction page

Click to go to the login window

If you don't have an account, go to the registration section

8 Navigation bar: Shopping cart Click to go to cart section

9 Branch Show branch name and location

Figure 4.26 The window of login

Table 4.32 Describe: The window of login

Click to go to the login section

The word “Login” will be bigger and have a green underline

2 Registration Click to go to the registration section

5 Hide/show password Click to hide or show password

6 Button “Login” Click to complete login

Use your Google account to login to the website

If you do not have an account, automatically use your Google account to register and log in

Figure 4.27 The window of register

Table 4.33 Describe: The window of register

1 Log in Click to go to the login section

Click to go to the registration section The word “Register” will be bigger and have a green underline

6 Hide/show password Click to hide or show password

7 Button “Register” Click to complete registration

Click to go to the login window

If you don't have an account, go to the registration section

8 Navigation bar: Shopping cart Click to go to cart section

7 Profile Click to go to profile page

8 Navigation bar: Shopping cart Click to go to shopping cart

11 Phone Show phone number of the customer

14 Button “Update profile” After re-entering the information, press the button to complete the update

Figure 4.30 Password change page for the customer

Table 4.36 Describe: Password change page for the customer

Enter the account's current password

If correct, the password will be changed

If you enter the wrong password, it cannot be changed

If you log in with your Google account, you won't be able to change your password

2 New password Enter new password

3 Repeat password Enter repeat password

4 Button “Change password” Click to change password

Click to go to the product page

Displayed in blue and underlined while on the product page

9 Type of product Select the type of product

10 Branch address Select the nearest branch address

11 Find products Search for the desired product

12 Basic product information Contains Product Name and Price

13 Button “Scroll to top” Customers choose "buy now" to add products to the cart

Figure 4.33 Product details page – reviews

Table 4.38 Describe: Product details page - reviews

9 Button “Buy now” Click to add product to cart

10 Product details Display name, price and description of the product

11 Reviews section Click to switch to product review information

12 Rating and comment section Click to switch to user rating and comment

13 Product review information Display customer reviews and comments for the product

Figure 4.34 Product details page – rating and comment

Table 4.39 Describe: Product details page – rating and comment

9 Button “Buy now” Click to add product to cart

10 Product details Display name, price and description of the product

11 Reviews section Click to switch to product review information

12 Rating and comment section Click to switch to user rating and comment

13 Content comment User enters product reviews

14 Star rating Users rate the product by the number of stars

15 Button “upload Comment” Click to post a product review

Table 4.40 Describe: Coupon code page

Click to go to the page containing the discount code

Displayed in blue and underlined while on the coupon code page

Contains discount code, content, end date and discount percentage

Table 4.41 Describe: Order history page

Click to go to the order view page

Displayed in blue and underlined while on the view order page

9 Search history order Customers enter their phone number to view purchase history

11 Order detail Click to view order details

Table 4.42 Describe: Shopping cart page

Click to go to shopping cart

Displayed in blue and underlined while on the shopping cart page

Contains information about products, quantities and prices that have been added to the cart by the customer

10 Coupon code Where to enter discount code

11 Button “Apply code” Click to apply code

13 Payment Click to do to go to order completion step

Figure 4.38 The window of entering customer information

Figure 4.39 The window of payment

Table 4.43 Describe: The window of entering information and payment

1 Find location Enter the customer's location to find on the map

2 Map Show the customer's geographic location after entering the location search box

3 Address Customers enter specific delivery address

4 Customer Name Customer enters consignee's name

5 phone number Enter the phone number of the consignee

6 Note Make a note to the store staff

8 Payment Click to choose a payment method

9 Payment methods Confirm the payment method to complete the order

Mobile interface design

Table 4.44 Describe: Mobile - Login screen

3 Button “Login” When clicked, guests will be redirected to the homepage

4 Sign in with Google User uses google account to login

5 Sign up for an account

Table 4.45 Describe: Mobile - Registration screen

2 Full name User enter full name

Table 4.46 Describe: Mobile - Chatbot screen

1 Chat box Display messages between customers and bots

2 Import content Where the user enters the message content

3 Button “Home” When clicked, customers will be redirected to the homepage

4 Button “Profile” When clicked, customers will be redirected to the profile page

When clicking, customers will be redirected to the chatbot page – Auto reply

Displays a different color from the rest of the pages while working on this page

Table 4.47 Describe: Mobile - Profile screen

1 Button “Edit profile” When clicked, the user will go to the profile update page

2 Email Show logged in user email

3 Date of birth Show customer's date of birth

4 phone number Show customer phone number

5 Gender Show the customer's gender

When clicked, customers will be redirected to the profile page

8 Button “Chatbot” When clicking, customers will be redirected to the chatbot page – Auto reply

Figure 4.44 Mobile - Profile update screen

Table 4.48 Describe: Mobile - Profile update screen

1 User information update screen Where customers update information

2 Button “Update” Click, edited user information will be saved

When clicked, customers will be redirected to the profile page

Table 4.49 Describe: Mobile - Home screen

1 Choose a branch Click to select the nearest branch

2 Add product to cart Click on “+ ”, to add products to cart

3 View cart When clicked, the customer will go to the shopping cart page

When clicked, customers will be redirected to the homepage

Figure 4.46 Mobile – Shopping cart (empty)

Table 4.50 Describe: Mobile – Shopping cart (empty)

1 Product information Contains image, name and product price

2 Add product to cart Click to add product to cart

3 Reviews Show previous user reviews of the product

4 Rating and comment Click to go to rating and comment

Figure 4.48 Mobile - Rating and comment

Table 4.52 Describe: Mobile - Rating and comment

1 Product information Contains image, name and product price

2 Add product to cart Click to add product to cart

3 Star rating The user chooses the number of hearts to rate the product

4 Comment Customers enter product reviews

5 Button “Update rating” When clicked, the product review will be saved

Figure 4.49 Mobile - Order summary screen

Table 4.53 Describe: Mobile - Order summary screen

1 Product added Display the products selected by the customer

2 Temporary total amount Is the total price of the products

3 Button “Order” When clicked, will go to the payment page

Table 4.54 Describe: Mobile - Payment screen

1 Change the address When clicking, the user will change the delivery address

2 Discount code User chooses the appropriate discount code for his order

3 Total price Total amount to be paid by the customer

4 Payment Click confirm order after checking the order and go to the payment method page

Figure 4.51 Mobile - Payment method screen

Table 4.55 Describe: Mobile - Payment method screen

1 PayPal Payment Click to pay the order by PayPal

2 Payment Debit or Credit Click to pay for your order by Debit or

Figure 4.52 Mobile - Thank you screen

Sequence diagram

Figure 4.53 Sequence - Login 4.4.2 Admin - Employee

Figure 4.58 Sequence: Rating and comment

Support tools

− Use Visual Studio Code to write code

− Use mongodb.com to create database

− Use draw.io to draw UML

Set up and run the program

5.2.1 Set up and run Back-end

− Access the folder: Coffee_Shop and go to the backend_api folder

5.2.2 Set up and run Front-end

− Access the folder: Coffee_Shop and go to the folder frontend_cms and frontend_website

Figure 5.2 Structure: Front-end: Admin - Employee

Figure 5.3 Structure: Front-end: Client

Testing

Test Step Test Data Expected

Leave email, password or Name blank

2 Leave email, password, Name blank

3 Click register fName = “” email = “ ” password = “ ”

Report cannot leave email, password and Name blank

Enter email that does not exist and enter Name and password

2 Enter Name and Password but enter email does not exist

3 Click register fName = “trung phan” email = “ aaaaa@gmail.com” password “Abc@123”

Report successful registration but cannot confirm the account via text message sent to email

Enter real email and enter Name and password

2 Enter the real Name and password and email

Report successful registration, customers go to email to verify email

Test Step Test Data Expected

Leave your email or password blank

2 Leave your email and password blank

3 Click sign in email = “ ” password = “ ”

Report cannot leave email and password blank

The email is registered but the password is wrong

2 Enter the correct email but the wrong password

3 Click sign in email “kaitrung99@gmail.co m” password = “aaaaaa”

Report failed login, incorrect email or password

Email is not registered and entered wrong password

2 Enter unregistered email and wrong password email “trungphan123@gmail com” password = “aaaaa”

The email is registered and the password is correct, but the account is locked

2 Enter the registered email and correct password but the account has been locked email “kaimap99@gmail.co m” password “Abc@123”

1 Open the login window email “kaitrung99@gmail.co m”

107 and the password is correct

2 Enter the registered email and correct password password “Abc@123” redirect to homepage

Summary

Our team faced numerous challenges while developing our project, primarily due to our ambition to implement new technologies and languages that we had not previously studied Although we are not specialized in the MERN STACK, it serves as an essential foundation for enhancing our knowledge and experience in website development After extensive research and learning, we successfully created a business website equipped with essential features, including admin management, purchasing capabilities, shopping carts, comments, and reviews.

Result

After a dedicated period of developing the website for our coffee shop chain, our team has successfully fulfilled the majority of the initial functions and requirements, thanks to the invaluable guidance and support of Mr Le Vinh Thinh.

The team will focus on developing enhanced features to fulfill future customer needs, ensuring an improved shopping experience on our website.

Advantages

− Developing the registration and login process of the website is relatively true to the actual business, helping the admin to manage the accounts easily

− The website has a friendly interface that is easy to use

− Order confirmation function allows Admin to review valid orders before confirming for delivery

− Users can leave comments and reviews for products to make shopping more reliable and objective.

Defect

− The purchase of the website is not really close to reality

− Website does not have high security.

Future work

− Customers can pay online by e-wallet (Momo, ZaloPay, )

− Incorporating 3rd parties (such as Now, Baemin, Gojek, ) for customers' orders.

Tiêu đề	Building a Website for a Chain of Coffee Shops
Trường học	Faculty of High Quality Training
Chuyên ngành	Information Technology
Thể loại	Graduation Thesis

Định dạng
Số trang	119
Dung lượng	5,74 MB