(Đồ án tốt nghiệp) Building a website for a chain of coffee shops

(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops(Đồ án tốt nghiệp) Building a website for a chain of coffee shops

Reason for choosing the topic

To boost coffee shop sales, a dedicated website was launched to connect customers with the store’s products online, enhancing convenience and accessibility The website allows customers to easily place orders from home, eliminating the need to visit in person Additionally, customers can rate and comment on their experiences, providing valuable feedback that helps the store improve and grow continuously.

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 MERN stack courses, focusing on essential manuals for Node.js and React.js Additionally, we have reviewed various internship documents provided by the company, whichoffer valuable insights into website outsourcing processes.

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

Facebook developed this JavaScript engine, which was launched as an open-source tool in 2013 Since then, it has gained a competitive edge, surpassing major libraries like Angular and Bootstrap—two of the most popular JavaScript frameworks—highlighting its significance in web development.

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, which stands for JavaScript XML, is an extended syntax of JavaScript that simplifies rendering UI components in ReactJS It allows developers to embed any JavaScript expression within curly braces, making the code more dynamic and flexible After editing and compiling, JSX expressions are transformed into regular JavaScript objects, enabling their use in conditional statements, loops, and as function arguments or return values ReactJS utilizes JSX to make HTML code more readable and maintainable, while also potentially improving the performance of web applications or websites.

In React, components are self-contained, reusable units that function similarly to JavaScript functions by returning HTML content through the render method There are two main types of components: Function Components and Class Components, both designed to efficiently render UI elements.

Props, short for Properties, are attributes that can be added to components to enable dynamic data rendering They are accessed within components using the "props" object, allowing for flexible and customizable component behavior Props facilitate the unidirectional data flow from parent to child components, making it easy to pass data efficiently within a React or similar component-based framework Using props enhances code reusability and ensures clear data management across your application's component hierarchy.

State is an object used to store data or information within a component, allowing dynamic updates as needed Unlike props, which are passed between components, state is confined to the component that defines it and cannot be accessed directly by others Whenever the state changes, the component automatically re-renders to reflect the updated data, ensuring a responsive user interface Proper management of state is essential for creating interactive and dynamic React applications.

About NodeJs

Node.js is a powerful platform that leverages the V8 JavaScript runtime, an ultrafast JavaScript interpreter used in the Chrome browser It enables developers to run JavaScript on the server side, transforming JavaScript from a client-side language into a versatile tool for backend development By embedding the V8 engine, Node.js allows for efficient and scalable web server applications, demonstrating that JavaScript is equally capable of server environment tasks as it is for browser-based scripting.

Node.js APIs are inherently asynchronous and non-blocking, allowing the server to handle multiple operations concurrently This asynchronous nature is primarily based on Node.js server architecture, which waits for the server to return data before proceeding Utilizing Node.js's event-driven architecture and callback mechanisms, the server efficiently moves to the next API call after receiving a response, enabling real-time data processing and seamless server performance.

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

Node.js operates on a single-threaded, event-driven model, enabling non-blocking server responses that enhance scalability Unlike traditional servers like Apache, which create limited threads to handle requests, Node.js's event mechanism allows it to efficiently manage a larger number of concurrent connections This design makes Node.js highly extensible and capable of serving more requests efficiently with a single-threaded architecture.

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 and scalability, making it an ideal choice for startups aiming to develop high-performance products Its fast performance enables rapid development and deployment, which is essential for businesses looking to expand quickly and efficiently.

About ExpressJs

Express.js is a powerful framework built on Node.js, designed to enhance web and mobile app development It supports various HTTP methods and offers robust API middleware, making development processes more efficient and straightforward With its flexible features, Express.js simplifies building scalable and maintainable applications, making it a popular choice for developers.

− 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 leverages a flexible data storage format using Document JSON, allowing each collection to have varying sizes and diverse documents This flexibility enables you to insert any type of data you need, making MongoDB highly adaptable for different application requirements.

MongoDB data lacks mutual constraints and does not support joins like traditional RDBMS As a result, insertions, deletions, and updates in MongoDB are faster because they do not require checking data constraints, leading to improved performance and flexibility.

MongoDB offers high horizontal scalability through its cluster architecture, where multiple nodes collaborate to store and manage data When expanding the system, simply adding new nodes to the cluster enhances performance and capacity, making MongoDB an excellent choice for scalable databases.

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 high performance with significantly faster query speeds for operations such as find, update, insert, and delete compared to traditional relational database management systems (RDBMS) When handling large volumes of data, tests indicate that MongoDB's insert speeds can surpass those of RDBMS, making it an efficient choice for high-demand applications.

About Natural Language Processing

2.5.1 What is Natural Language Processing?

Natural Language Processing (NLP) is a key branch of Artificial Intelligence dedicated to enabling computers to understand and interpret human language effectively Its primary goal is to enhance human-machine interaction, streamline human-to-human communication, and improve the efficiency of word and speech processing By advancing NLP technologies, we can facilitate more natural and efficient ways for machines and humans to communicate seamlessly.

2.5.2 Application of Natural Language Processing in chatbot building

A chatbot is an advanced computer program designed to engage in human-like conversations, providing quick responses to repetitive questions such as event dates, product details, or pricing information Beyond simple inquiries, chatbots serve as virtual assistants capable of managing more complex tasks like ordering services, event registration, or filling out forms These interactions often occur in step-by-step processes, enhancing efficiency and customer experience Implementing chatbots can significantly streamline customer support and automate routine tasks for businesses.

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 a powerful platform that analyzes various customer inputs, including text and audio from phone calls or voice recordings It offers versatile response options, allowing businesses to communicate with customers through written text or synthetic speech for a more natural interaction.

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

The article provides essential product information, including the product code (id_products), the product name (name), and a detailed description It specifies available sizes, with options such as medium (size_M) and large (size_L) The pricing details (prices) are clearly outlined, allowing customers to understand the cost of each item Additionally, the description offers comprehensive information about the product, helping buyers make informed purchasing decisions.

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 provides a comprehensive overview of order details, including the "id_orders" which uniquely identifies each order, and the "Code orders," serving as the order reference number It highlights key customer information such as "customerName," "customerPhone," and "customerAddress," essential for efficient communication and delivery The "totalPrices" represent the total invoice value for each order, ensuring transparency in billing The "note" section allows customers to include specific messages regarding the product, enhancing personalized service Additionally, the "status" or "Invoice Status" indicates the current state of the order, facilitating effective order management and tracking This structured data ensures a seamless process from order placement to delivery, complying with SEO best practices by encompassing relevant keywords like order details, customer information, invoice, and order status.

An order is considered valid once approved by an admin or employee, with key details including the order completion time (doneAt), the list of products purchased (productList), and the customer's unique identifier (userId) Additional important information encompasses the coupon code used for discounts (couponCodeId), the store branch code (branchId), and the overall order status, ensuring a seamless and transparent purchasing process.

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

A coupon code is a randomly generated discount code used during sale events to offer customers special savings The discount content percentage indicates the percentage off the original price, while the discount amount specifies the actual monetary savings The content of the discount provides details about the promotion, and the condition outlines any requirements or restrictions to redeem the discount codes These coupons are essential for marketing strategies, encouraging purchases by providing attractive offers to customers.

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

Table 4.6 Database entity analysis: User

This article provides essential information about user accounts on the website It includes the user’s unique ID (id_users), their username (User Code), and personal details such as their first name (fName), email address, and date of birth The email serves as the primary login credential, with a separate password used for authentication Additional details include the user’s gender, phone number, and a boolean indicator (isAdmin) confirming whether the account has administrative privileges Understanding these key data points is crucial for effective user management and security on the platform.

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

Throughout the development process, our team faced challenges in implementing new technologies and unfamiliar programming languages, which pushed us to learn and adapt quickly Although MERN Stack is not our area of specialization, it served as an essential starting point to enhance our skills and gain practical experience in web development Through ongoing research and learning, we successfully built a business website featuring core functionalities such as admin management, purchase options, shopping carts, comments, and reviews, marking a significant step forward in our web development journey.

Result

With guidance from Mr Le Vinh Thinh, our team successfully developed a comprehensive website for the coffee shop chain, fulfilling most of the initially set functions and requirements.

Our team is committed to developing additional features to enhance our website's functionality, ensuring a better shopping experience for our customers now and in the future.

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

[1] Priyesh Patel (2018), “Node.js thực sự là gì?” , from : https://topdev.vn/blog/node-js-la-gi/

[2] Sơn Dương (2019), “Xây dựng ứng dụng web với NodeJS + ExpressJS”, from: https://vntalking.com/xay-dung-ung-dung-web-voi-nodejs-expressjs.html

[3] Bách khoa toàn thư mở Wikipedia, “Node.js”, from : https://vi.wikipedia.org/wiki/Node.js

[4] https://mongoosejs.com/docs/models.html

[6] Xtech, from: https://ant.design/components/overview/

[7] https://reactrouter.com/web/guides/quick-start

Tiêu đề	Building a Website for a Chain of Coffee Shops
Tác giả	Do Phi Cuong, Phan Dang Trung
Người hướng dẫn	Le Vinh Thinh, Ph.D
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	Graduation Thesis
Năm xuất bản	2017 – 2021
Thành phố	Ho Chi Minh City

Định dạng
Số trang	124
Dung lượng	6,97 MB