Đồ án tốt nghiệp Công nghệ thông tin: Building a website and mobile application to manage sales

158 Figure 3.47 Imported product deletion screen in products .... 160 Figure 3.48 Imported product deletion screen in products ..... 48 Table 2.20 View all imported products use case des

RESEARCH SCOPE

1 Chapter 1: Application and technology review

- Use case design and project specification

2 22/03/2024 – 29/03/2024 - Learn about JavaScript's React library and

- Learn about the React Native framework

3 30/03/2024 – 04/04/2024 - Learn about JSON Web Token to apply to system API authentication and authorization

- Learn about MySQL to apply to the system's user data storage

- Proceed to build the user interface for the system

5 04/05/2024 – 06/06/2024 - Bring the built parts together (interface, API, database)

- Learn and modify the system to perfection

6 07/06/2024 – 18/06/2024 - Test the system and fix errors

(sign and print full name)

1.1 THE URGENCY OF THE THESIS 1

CHAPTER 1: APPLICATION AND TECHNOLOGY REVIEW 3

1.1.1 App “Quan Ly Ban Hang” 3

3.5.1 Login with google sequence diagram 115

Figure 1.1 App “Quan Ly Ban Hang" 3

Figure 1.2 App “KiotViet Ban hang” 4

Figure 1.3 App “sshop – So ban hang” 5

Figure 1.4 App “AFaDa – Quan Ly Ban Hang” 6

Figure 1.6 Spring Boot Flow Architecture 8

Figure 1.8 Redux Data Flow Chart 11

Figure 2.1 Guest’s use case diagram 18

Figure 2.2 Buyer’s use case diagram 19

Figure 2.3 Admin’s use case diagram 19

Figure 2.4 Store owner’s use case diagram 20

Figure 2.5 Use case Sign up 21

Figure 2.7 Use case Recover password 24

Figure 2.8 Use case View receipt history 26

Figure 2.9 Use case View receipt detail 28

Figure 2.10 Use case View my QR 29

Figure 2.11 Use case Register store 30

Figure 2.12 Use case View accumulated points 32

Figure 2.13 Use case Update profile 33

Figure 2.14 Use case Change password 35

Figure 2.16 Use case Search imported product 38

Figure 2.17 Use case Setup store 39

Figure 2.18 Use case View all service packages 41

Figure 2.19 Use case Extend account 42

Figure 2.20 Use case Scan product code 44

Figure 2.21 Use case Scan QR customer 46

Figure 2.23 Use case View all imported products 50

Figure 2.24 Use case Create imported product 51

Figure 2.25 Use case Update imported product 53

Figure 2.26 Use case Delete imported product 54

Figure 2.27 Use case View all products 56

Figure 2.28 Use case Create product 57

Figure 2.29 Use case Update product 59

Figure 2.30 Use case Delete product 61

Figure 2.31 Use case View all receipts 62

Figure 2.32 Use case View detailed receipt 64

Figure 2.33 Use case See profit report 65

Figure 2.34 Use case See sale report 67

Figure 2.36 Use case View all customers 70

Figure 2.37 Use case View all coupons 71

Figure 2.38 Use case Create coupon 73

Figure 2.39 Use case Update coupon 74

Figure 2.40 Use case Stop coupon 76

Figure 2.41 Use case Manage import book 77

Figure 2.42 Use case Manage export book 79

Figure 2.43 Use case See profile 80

Figure 2.46 Use case return products in receipt 85

Figure 2.47 Use case View all accounts 87

Figure 2.48 Use case Enable/Disable account 89

Figure 2.49 Use case View all transactions 91

Figure 2.50 Use case View all service packacges 93

Figure 2.51 Use case Create service package 94

Figure 2.52 Use case Update service package 96

Figure 2.53 Use case See profile (website) 99

Figure 2.54 Use case Update profile (website) 100

Figure 2.55 Use case Send notification for users 102

Figure 2.56 Use case View chart report (website) 103

Figure 2.57 Use case Change password (website) 105

Figure 2.58 Use case Export to excel (website) 106

Figure 2.59 Use case Disable/enable system maintenance 108

Figure 3.5 Login with google sequence diagram 115

Figure 3.6 Purchase service sequence diagram 115

Figure 3.8 Export receipt sequence diagram 116

Figure 3.9 View report sequence diagram 117

Figure 3.10 Filter product sequence diagram 117

Figure 3.11 Filter payment sequence diagram 118

Figure 3.12 Filter coupon sequence diagram 118

Figure 3.13 Disable account sequence diagram 119

Figure 3.14 Upload image sequence diagram 119

Figure 3.15 Extend account sequence diagram 120

Figure 3.16 Import product sequence diagram 120

Figure 3.23 Recovery password website screen 01 132

Figure 3.30 Buyer’s receipt list screen 138

Figure 3.31 Buyer’s receipt detail screen 139

Figure 3.34 Store owner dashboard screen 143

Figure 3.41 Service package list screen 152

Figure 3.42 Service package detail screen 154

Figure 3.43 Product code scanning screen 155

Figure 3.44 Imported products management screen 156

Figure 3.46 Imported products list screen in products 158

Figure 3.47 Imported product deletion screen in products 160

Figure 3.49 Product create/update screen 162

Figure 3.54 Detailed screen of imported products 168

Figure 3.62 Store owner’s receipt list screen 178

Figure 3.66 Admin dashboard website screen 183

Figure 3.68 Account list website screen 185

Figure 3.70 Transaction list website screen 188

Figure 3.73 Service package create/updating screen 192

Figure 3.74 Service package create/updating website screen 193

Figure 3.75 Admin setting profile screen 194

Figure 3.76 Disable/Enable system maintenance screen 196

Figure 3.77 Disable/Enable system maintenance website screen 197

Figure 4.1 Build server with Gradle 203

Figure 4.2 Deploy to SAP with Cloud Foundry 203

Figure 4.3 Deploy the mobile application 204

Table 2.2 Sign up use case description 21

Table 2.3 Login use case description 23

Table 2.4 Recover password use case description 25

Table 2.5 View receipt history use case description 26

Table 2.6 View receipt detail use case description 28

Table 2.7 View my QR use case description 29

Table 2.8 Register store use case description 31

Table 2.9 View accumulated points use case description 32

Table 2.10 Update profile use case description 34

Table 2.11 Change password use case description 35

Table 2.12 Logout use case description 36

Table 2.13 Search imported product use case description 38

Table 2.14 Setup store use case description 39

Table 2.15 View all service packages use case description 41

Table 2.16 Extend account use case description 42

Table 2.17 Scan product code use case description 44

Table 2.18 Scan QR customer use case description 46

Table 2.19 Sell use case description 48

Table 2.20 View all imported products use case description 50

Table 2.21 Create imported product use case description 51

Table 2.22 Update imported product use case description 53

Table 2.24 View all products use case description 56

Table 2.25 Create product use case description 58

Table 2.26 Update product use case description 59

Table 2.27 Delete product use case description 61

Table 2.28 View all receipts use case description 62

Table 2.29 View detailed receipt use case description 64

Table 2.30 See profit report use case description 65

Table 2.31 See sale report use case description 67

Table 2.32 See warehouse report use case description 68

Table 2.33 View all customers use case description 70

Table 2.34 View all coupons use case description 71

Table 2.35 Create coupon use case description 73

Table 2.36 Update coupon use case description 74

Table 2.37 Stop coupon use case description 76

Table 2.38 Manage import book use case description 78

Table 2.39 Manage export book use case description 79

Table 2.40 See profile use case description 81

Table 2.43 Return products in receipt use case description 85

Table 2.44 View all accounts use case description 87

Table 2.45 Enable/Disable account use case description 89

Table 2.46 View all transactions use case description 91

This article outlines various use case descriptions for service package management, user notifications, and profile updates, including specific functionalities such as creating, updating, and viewing service packages and user profiles Additionally, it details features like password changes, Excel exports, and system maintenance controls The database diagram and screen descriptions for different user roles, including guests, buyers, store owners, and admins, are also included The article further elaborates on the signup and login processes, as well as password recovery screens, providing a comprehensive overview of the user interface and experience for the buyer dashboard.

This article provides detailed descriptions of various screens within the buyer and store owner dashboards Key sections include the buyer dashboard, receipt list, and receipt detail screens, alongside the store registration and QR code functionalities The store owner dashboard, product search, and settings screens are also outlined, emphasizing personal info and profile settings Additionally, it covers password changes, service package listings, and management of imported products The article includes descriptions for product management, deletion screens, and product creation or updates, culminating with profit and sales report screens, as well as a comprehensive warehouse report.

The article provides a comprehensive overview of various screens related to product management and administrative functions It includes detailed descriptions of imported product screens, customer and coupon lists, warehouse management, import and export book screens, and sales screens Additionally, it covers the admin dashboard and account management features, along with transaction lists and service package management Each table is numbered and corresponds to specific screen functionalities, ensuring clarity and ease of navigation for users seeking to understand the system's capabilities.

Table 3.64 Disable/Enable system maintenance website description 197Table 4.1 Test case Admin description 198Table 4.2 Test case Store owner description 199Table 4.3 Test case Buyer description 200Table 4.4 Test case Guest description 201

1.1 THE URGENCY OF THE THESIS

With the rise of economic development, the retail landscape is expanding rapidly, yet many stores still rely on traditional sales management methods using books and ledgers, which are time-consuming and inefficient To facilitate a smoother transition to digital management, a sales management application has been developed, leveraging the widespread use of smart mobile devices to enhance accessibility for all users This topic is particularly relevant as it addresses genuine needs in the retail sector and offers practical solutions for modern sales management.

From the current situation, we can define some major solutions:

• Inventory import/export management: supports import and export functions and information recording

• Inventory automation: Supports sales via codes to minimize human errors

• Customer management: Save customer information, and manage promotions or points for customers

• Revenue report: Provides detailed reports on revenue over time and products, helping to evaluate business performance

• Friendly interface: The user interface design is easy to use, intuitive and suitable for many different devices such as computers, tablets and mobile phones

• Search and filter features: Supports quick search and information filtering functions, helping users easily find the products or information they need

The application is designed to streamline essential functions of inventory and revenue management, including product management, inventory oversight, customer management, promotional activities, and analytical reporting Additionally, it facilitates point accumulation for purchases The core processing is supported by fully developed APIs that enhance user-side data display.

APPLICATION AND TECHNOLOGY REVIEW

APPLICATION REVIEW

This article provides detailed use case descriptions for various functionalities within a service package, including creating, updating, and viewing profiles, as well as sending notifications and generating reports It also outlines essential actions such as changing passwords, exporting data to Excel, and managing system maintenance Additionally, the article features a comprehensive database diagram and describes user interface screens tailored for different user roles, including guests, buyers, store owners, and administrators Specific screens for signup, login, and password recovery are also detailed, ensuring a clear understanding of the user experience across the platform.

The article includes detailed descriptions of various screens relevant to buyers and store owners, such as the buyer dashboard, receipt list, and receipt detail screens It also outlines the registration process for stores, QR code functionality, and product search capabilities Additionally, the article covers settings for both personal and store profiles, password management, and service package details Importantly, it addresses product management, including scanning, listing, and deletion processes, alongside creating or updating products Finally, the article provides insights into profit and sales reporting, as well as warehouse management, ensuring a comprehensive overview of the platform's functionalities.

This article provides a comprehensive overview of various screen descriptions related to imported products, customer lists, and coupon management, including their detailed interfaces It covers warehouse management, import and export book functionalities, and sales screens, along with descriptions of the admin dashboard and account management features Additionally, it includes insights into transaction lists and service package management, highlighting both screen and website descriptions for effective navigation and user experience Each section is meticulously detailed to ensure clarity and usability for administrators and users alike.

With the rise of economic development, the number of retail stores is increasing, yet many still rely on traditional sales management methods, which can be time-consuming and inefficient To facilitate a smoother transition to digital management, a sales management application has been developed Given the widespread use of smart mobile devices, creating this application on a mobile platform ensures accessibility for all users This topic is particularly relevant as it meets real-world needs and is practical for implementation in retail environments.

The application is designed to efficiently manage essential functions of inventory and revenue management, including product management, inventory tracking, customer management, promotional activities, and generating analytical reports It also features a points accumulation system for purchases To enhance user experience, the application is supported by fully developed APIs that facilitate data display on the user side.

CONTENT CHAPTER 1: APPLICATION AND TECHNOLOGY REVIEW 1.1 APPLICATION REVIEW

1.1.1 App “Quan Ly Ban Hang”

Figure 1.1 App “Quan Ly Ban Hang"

- Manage orders, customers, goods, staffs

- Provides full management and search features

- The interface layout is clear and easy to operate for new users

- The interface is not eye-catching and the display space has not been optimized

Figure 1.2 App “KiotViet Ban hang”

- Manage invoices and products by barcode

- Allows you to create your own orders

- The application has texting to exchange information

- Allows users to choose business type

- The layout division is not clear

- The app has customer support

- The app has multi-language support

- The display space has not been optimized

- Depends on technology: internet connection required

- Sales, warehouse, orders, and product management

- Eye-catching and easy-to-use interface

- Depends on technology: internet connection required.

ENVIRONMENT

Technologies and environments used by the system:

• Framework: o Backend: Spring Boot o Frontend:

• Working environment: Visual Studio Code, IntelliJ IDEA

TECHNOLOGY

Spring Boot is an extension of the core Spring framework, designed to simplify and automate the development process It employs a layered architecture that facilitates communication between different layers, either above or below in a hierarchical structure According to the Spring Boot documentation, it serves as a streamlined framework for building robust applications.

Spring Boot's primary goal is to eliminate the need for XML and annotation-based configuration in applications It offers several advantages, including opinionated defaults that allow for future configuration changes, a convention-over-configuration approach, and the ability to create stand-alone, production-ready applications.

Figure 1.6 Spring Boot Flow Architecture

• The Client makes an HTTP request (GET, PUT, POST, etc.)

• The HTTP request is forwarded to the Controller The controller maps the request It processes the handles and calls the server logic

In the Service layer of a Spring Boot application, business logic is executed, utilizing the Java Persistence Library (JPA) to map database data to Spring Boot model classes.

• The JSP page is returned as Response from the controller

• Faster Development: Spring Boot makes a lot of decisions and opinionated defaults over Spring Ecosystem This nature helps the developer to set up and jump into development quickly

Spring Boot offers built-in support for embedded web servers such as Tomcat, Jetty, and Undertow, allowing developers to seamlessly deploy web applications without the complexities of traditional application servers.

• Rich IDE Support: All major IDEs provide support for Spring Boot code assistance For instance, IntelliJ IDEA Ultimate has great code completion and navigation features for Spring Boot projects

• Production-Ready features: Spring Boot provides production-ready features like monitoring, metrics and logging out of the box With these features, the developers can avoid additional configurations

ReactJS, developed by Facebook engineer Jordan Walke in 2011, is an open-source JavaScript library designed to enhance front-end web application development It was created to meet the needs of Facebook’s engineers, enabling them to efficiently manage multiple user interfaces simultaneously, such as chat features and news feed updates.

React enables the creation of reusable and nestable components, allowing developers to break down everything displayed on screens—from websites to mobile apps—into manageable parts In this chapter, you will discover how to create, customize, and conditionally display these React components effectively.

React applications are constructed using discrete UI elements known as components A React component is essentially a JavaScript function that incorporates markup, and these components can vary significantly in size, ranging from a simple button to a complete page.

JSX allows you to incorporate HTML-like syntax directly within JavaScript files, enabling you to maintain both rendering logic and content cohesively This approach facilitates the inclusion of JavaScript logic or dynamic property references within your markup when needed.

Components are fundamental to React, serving as the building blocks for creating user interfaces (UI) They provide an essential starting point for anyone looking to begin their React journey.

Figure 1.8 Redux Data Flow Chart

React JS includes a free syntax extension known as JSX, which simplifies HTML markup within the library By utilizing writing shortcuts, JSX enables developers to create cleaner and more straightforward code, transforming HTML mockups into ReactElement trees Additionally, JSX enhances application performance and helps prevent code injections.

One of the primary advantages of ReactJS is its modular design, which utilizes a component-based architecture This approach enables developers to create reusable components for the user interface, simplifying the maintenance and scalability of applications.

The Virtual DOM, developed by the Facebook team, enhances the efficiency of traffic management and request handling in React.js This feature significantly boosts the speed and accuracy of high-volume applications, making it a standout advantage of the library.

Small modifications or issues within the "child" structure do not impact the "parent" code, resulting in more stable and faster-running applications This aspect of data binding is a significant advantage to consider when weighing the benefits of using ReactJS.

• dev extension in Chrome and Firefox This allows programmers to inspect the React component hierarchies as they appear in the virtual DOM

Redux is an open-source JavaScript library that manages the state of applications efficiently Its core components include the Store, Actions, and Reducers, which work together seamlessly To grasp Redux more effectively, we can explore it through familiar examples.

• Redux helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test

• Centralizing your application's state and logic enables powerful capabilities like undo/redo, state persistence, and much more

Redux DevTools simplify the process of tracking the changes in your application's state by providing insights into when, where, why, and how these changes occur With Redux's architecture, you can log state changes, utilize "time-travel debugging," and even transmit comprehensive error reports to a server for better troubleshooting.

• Redux works with any UI layer, and has a large ecosystem of addons to fit your needs

PROJECT SPECIFICATION

NON-FUNCTIONAL REQUIREMENT

This article provides detailed use case descriptions for various functionalities, including creating and updating service packages, viewing and updating user profiles, sending notifications, generating chart reports, changing passwords, and exporting data to Excel It also outlines system maintenance options and includes a comprehensive database diagram Additionally, the article describes user interface screens for different roles such as Guests, Buyers, Store Owners, and Admins, along with multiple signup and login screen variations, as well as password recovery options The Buyer dashboard screens are also detailed, providing a complete overview of the system's user experience.

The article provides a comprehensive overview of various screen descriptions relevant to both buyers and store owners Key sections include the Buyer Dashboard, Receipt List, and Receipt Detail screens, along with the Register Store and My QR screens Store owners can access their dedicated dashboard and manage product searches, settings, and personal information The article also details the Product Management screens, including options for scanning product codes and managing imported products Additionally, it covers the creation and updating of products, as well as reporting features such as Profit and Sales reports, and a Warehouse report, ensuring users have a complete understanding of the platform's functionalities.

This article provides a comprehensive overview of various screen descriptions related to imported products, customer management, and sales processes Key sections include detailed descriptions of the imported product screens (Tables 3.40-3.47), customer and coupon management screens (Tables 3.42-3.45), and warehouse management functionalities (Table 3.46) Additionally, it outlines the sales screen variations (Tables 3.50-3.51) and features of the admin dashboard (Tables 3.52-3.53) The account and transaction management screens are detailed in Tables 3.54-3.58, while service package management is covered in Tables 3.58-3.62, including creation and updating processes This structured approach ensures clarity and ease of navigation for users seeking information on these essential functionalities.

As retail stores continue to proliferate with economic growth, many still rely on traditional sales management methods, which can be time-consuming and inefficient To facilitate a swift transition to digital management, a sales management application has been developed, capitalizing on the widespread use of smart mobile devices This mobile platform ensures accessibility for all users, making it a practical solution that meets real-world needs in the retail sector.

The application is designed to streamline essential functions of inventory and revenue management, encompassing product management, inventory oversight, customer management, promotional activities, analytical reporting, and rewards accumulation during purchases It features a robust processing core with fully developed APIs to enhance user-side data presentation.

Spring Boot is an enhanced version of the core Spring framework, designed to simplify and automate development processes It operates on a layered architecture, facilitating communication between different layers in a hierarchical manner According to the Spring Boot documentation, it is defined as a framework that streamlines application development.

Spring Boot's primary goal is to eliminate the need for XML and annotation-based configuration in applications It offers several advantages, including opinionated defaults that allow for future configuration changes, a convention-over-configuration approach, and the ability to create stand-alone, production-ready applications.

In the Service layer, business logic is executed, with Spring Boot managing all operations on database data that is mapped to Spring Boot model classes using the Java Persistence API (JPA).

Spring Boot offers seamless integration with embedded web servers such as Tomcat, Jetty, and Undertow, allowing developers to effortlessly deploy web applications without the complexities of traditional application servers.

ReactJS, developed by Facebook engineer Jordan Walke in 2011, is an open-source JavaScript library designed to simplify front-end web application development It was created to enable Facebook's engineers to manage multiple user interfaces simultaneously, such as chat features and news feed updates.

React enables the creation of reusable and nestable components, allowing developers to break down everything displayed on screens, from websites to mobile applications, into manageable parts This chapter will guide you through the process of creating, customizing, and conditionally displaying React components effectively.

React applications consist of modular UI elements known as components, which are JavaScript functions enhanced with markup These components can vary in size, ranging from simple buttons to complete web pages.

JSX allows you to incorporate HTML-like syntax within JavaScript files, enabling you to maintain rendering logic alongside content This feature is particularly useful when you need to integrate JavaScript logic or reference dynamic properties within your markup.

Components are fundamental to React, serving as the building blocks for creating user interfaces (UI) Understanding components is essential for anyone looking to begin their journey with React.

React JS includes a free syntax extension known as JSX, which simplifies HTML markup within the library By utilizing writing shortcuts, developers can create cleaner and more straightforward code, transforming HTML mockups into ReactElement trees Additionally, JSX enhances security by preventing code injections and contributes to improved application performance.

SYSTEM DESIGN

DATABASE DIAGRAM

This article provides detailed descriptions of various use cases and screens related to a service package and user management system Key use cases include creating, updating, and viewing service packages and user profiles, sending notifications, generating chart reports, changing passwords, exporting data to Excel, and managing system maintenance Additionally, it outlines a comprehensive database diagram and describes user interface screens for different roles, including guests, buyers, store owners, and admins The signup and login processes, as well as password recovery mechanisms, are also thoroughly detailed, ensuring a user-friendly experience across the platform.

This article provides detailed descriptions of various screens within the buyer and store owner dashboards, including the buyer's receipt list, detail screens, and registration processes It covers essential functionalities such as the QR code screen, product search, and settings management, along with personal info and profile settings Additionally, it outlines the process for changing passwords and managing service packages, including their details The article also addresses product management, including importing, creating, updating, and deleting products, as well as reporting features like profit and sales reports, and warehouse management.

This article provides detailed descriptions of various screens related to product management and administrative functions Key sections include the imported product screens, customer and coupon lists, warehouse management, and sales screens, which are essential for efficient operations Additionally, it covers the admin dashboard and account management, highlighting the importance of transaction tracking and service package management Each section is meticulously outlined to ensure clarity and usability for users navigating these interfaces.

As the economy grows, the number of retail stores is increasing, yet many still rely on outdated sales management methods involving books and ledgers, which are inefficient and time-consuming To facilitate a swift transition to digital management, sales management applications have been developed With the widespread use of smart mobile devices, creating these applications for mobile platforms ensures accessibility for all users This topic is pertinent as it meets genuine needs and is practical for implementation.

The application is designed to efficiently manage essential functions of inventory and revenue, including product management, inventory oversight, customer management, promotional activities, analysis reporting, and rewards accumulation during purchases It features a robust processing core with fully developed APIs to enhance user-side data presentation.

Spring Boot is an enhanced version of the core Spring framework, designed to simplify and automate application development It operates on a layered architecture, allowing seamless communication between different layers in a hierarchical manner According to its documentation, Spring Boot streamlines the development process by providing essential features and configurations out of the box.

Spring Boot's primary goal is to eliminate the need for XML and annotation-based configuration in applications It offers several advantages, including opinionated defaults that allow for later configuration adjustments, a convention-over-configuration approach, and the ability to create stand-alone, production-ready applications.

The Service layer is responsible for executing business logic in Spring Boot applications, utilizing the Java Persistence Library (JPA) to map database data to Spring Boot model classes.

Spring Boot offers seamless integration with embedded web servers such as Tomcat, Jetty, and Undertow, allowing developers to deploy web applications without the complexities of traditional application servers.

ReactJS, developed by Facebook engineer Jordan Walke in 2011, is an open-source JavaScript library designed to enhance front-end web application development It was created to enable Facebook's engineers to efficiently manage multiple user interfaces simultaneously, such as chat features and news feed updates.

React enables the creation of reusable and nestable components, allowing developers to break down everything displayed on screens—from websites to mobile applications—into manageable parts In this chapter, you will learn how to create, customize, and conditionally render React components effectively.

React applications consist of modular UI elements known as components, which are essentially JavaScript functions enhanced with markup These components can range from simple elements like buttons to complex structures that represent entire pages.

JSX allows you to incorporate HTML-like markup directly within a JavaScript file, effectively combining rendering logic with content This approach enables the inclusion of JavaScript logic or dynamic properties within the markup seamlessly.

Components are fundamental to React, serving as the building blocks for creating user interfaces (UI) This makes them an ideal starting point for anyone beginning their journey with React.

React JS includes a free syntax extension known as JSX, which simplifies HTML markup within the library By utilizing writing shortcuts, JSX enables developers to create cleaner and more straightforward code, transforming HTML mockups into ReactElement trees Additionally, JSX enhances application performance and helps prevent code injections.

CLASS DIAGRAM

SEQUENCE DIAGRAM

3.5.1 Login with google sequence diagram

Figure 3.5 Login with google sequence diagram

Figure 3.8 Export receipt sequence diagram

Figure 3.9 View report sequence diagram

Figure 3.10 Filter product sequence diagram

Figure 3.11 Filter payment sequence diagram

Figure 3.12 Filter coupon sequence diagram

Figure 3.13 Disable account sequence diagram

Figure 3.14 Upload image sequence diagram

Figure 3.15 Extend account sequence diagram

Figure 3.16 Import product sequence diagram

USER INTERFACES DESIGN

1 Signup screen This page to perform the function of signing up the system

2 Login screen This page to perform the function of logging into the system

3 Recovery password screen This page to perform the function of recovering the password

1 Dashboard screen This is the main screen of the buyer's mobile application including header, footer, avatar, profile info, accumulated points, and password change

2 Receipt list screen This screen displays the list of receipts of the buyer

3 Receipt detail screen This screen displays the detailed receipt of the buyer

4 Register store screen This screen to perform the function of registering store

5 My QR screen This screen displays the buyer’s QR when the buyer makes payment

Table 3.4 Screen for Store owner

1 Dashboard screen This is the main screen of the store owner's mobile application including header, footer, report today, and function tab

2 Product search screen This screen to perform the function of searching product

3 Settings screen This screen displays the option to set

4 Store settings screen This screen to perform the function of setting store

5 Personal info This screen displays the account’s info

6 Profile settings screen This screen to perform the function of setting profile

7 Password change screen This screen to perform the function of changing password

8 Service package list screen This screen displays the list of service packages to extend the account

9 Service package detail screen This screen displays the detailed service package

10 Product code scanning screen This screen performs the function of scanning product code to get the product’s information

This screen displays the list of imported products in the store

12 Product management screen This screen displays the list of products in the store

13 Imported products list screen in This screen displays the list of imported products products belongs to the specific product

14 Imported product deletion screen in products

This screen performs the function of deleting the imported product

15 Imported product creation screen in products

This screen performs the function of creating the imported product

16 Product update screen This screen performs the function of updating the product

17 Product create screen This screen performs the function of creating the product

18 Receipt detail screen This screen displays the detailed receipt

19 Profit report screen This screen displays the profit report including statistical reports and board reports

20 Sales report screen This screen displays the sales report including statistical reports, charts and board reports

21 Warehouse report screen This screen displays the warehouse report including product statistical reports

22 Imported product screen This screen displays the list of imported products in the store

23 Detailed screen of imported products

This screen displays the details of the imported product

24 Customer list screen This screen displays the list of customers in the store

25 Coupon list screen This screen displays the list of coupons in the store

26 Coupon type screen This screen displays the list of coupon types in the store

27 Coupon create screen This screen performs the function of creating the coupon

28 Warehouse management screen This screen performs the information in the warehouse including products, import books, and export books

29 Import book screen This screen shows statistics of imported products and displays of imported history

30 Export book screen This screen shows statistics of exported products and displays of exported history

31 Receipt list screen This screen displays the list of receipts in the store

32 Sales screen This screen performs the function of selling

1 Dashboard screen This is the main screen of the admin's mobile application including the header, report today, function tab, and button to send notifications

2 Personal info screen This screen displays the account’s info

3 Profile settings screen This screen to perform the function of setting profile

4 Account list screen This screen displays the list of accounts on the system

5 Transaction list screen This screen displays the list of transactions on the system

6 Service package list screen This screen displays the list of service packages on the system

7 Service package update screen This screen performs the function of updating the coupon

8 Service package create screen This screen performs the function of creating the coupon

No Name Type Description Action Result

1 Label username Text Display label username

2 Input username TextInput Enter username

3 Button submit Button Button submit username Go to register screen if username doesn’t exist

4 Label option Text Display label option

5 Button google Button Login with google

6 Security Image Image Display security image

7 Label rules Text Display label rules

1 Image back Image Display image back Go to the previous screen

2 Label register Text Display label register

4 Label email Text Display label email

5 Input email TextInput Enter an email

6 Label password Text Display label password

7 Input password TextInput Enter a password

Text Display label confirm password

10 Button register Button Button register account Go to the login screen if user register success

Figure 3.19 Signup screen 03 Table 3.8 Signup screen 03 description

2 Label accuracy Text Display label accuracy

4 Input OTP TextInput Enter a OTP Go to the login screen if user registers success

5 Label send again Text Display label send again

6 Label second Text Display label second

Text Display label re-enter username

4 Input password TextInput Enter a password

Text Display label forgot password

6 Button login Button Login into the system Go to dashboard screen if user login successfully

Table 3.10 Login website screen description

1 Label header Text Display label header

3 Input username Input Enter username

5 Input password Input Enter password

Text Recover password Go to the recovery password screen

7 Button login Button Log into the system

Figure 3.22 Recovery password screen Table 3.11 Recovery password screen description

Text Display label recovery password

5 Input password TextInput Enter password

Text Display label confirm password

Button Recovery password Go to the recovery password screen

Figure 3.23 Recovery password website screen 01 o Step 2

Figure 3.24 Recovery password website screen 02 o Step 3

Figure 3.25 Recovery password website screen 02

Table 3.12 Recovery password website screen description

2 Progress step Progress Display progress of step

4 Input username Input Enter username

5 Button continue Button Go to the next step Go to the step 2

6 Label code Text Display label

7 Input code Input Enter code

8 Button back Button Go to the previous step Go to the step 1

9 Button continue Button Go to the next step Go to the step 3

10 Label new password Text Display label new password

11 Enter new password Input Enter new password

Text Display label confirm new password

Input Enter confirm new password

Button Recovery password Recovery password

Figure 3.26 Buyer dashboard screen 01 Table 3.13 Buyer dashboard screen 01 description

1 Image receipt Image Display label receipt

3 Image logout Image Display image logout Log out

4 Image avatar Image Display avatar Open the avatar change modal

5 Label info Text Display label info

6 Dropdown info Dropdown Display information Show information

7 Label point Text Display label point

Text Display label change password

9 Button my QR Button Display my QR to make a payment

Go to my QR screen

Button Register store Go to register store screen

Table 3.14 Buyer dashboard screen 02 description

13 Input phone TextInput Enter phone

14 Input full name TextInput Enter full name

Button Update profile Go to the settings profile screen

Table 3.15 Buyer dashboard screen 03 description

16 Image fireworks Image Display image fireworks

17 Label store Text Display label store

DataTable Display accumulated points table

Figure 3.29 Buyer dashboard screen 04 Table 3.16 Buyer dashboard screen 04 description

Button Change password Change password

3.6.2.5 Screen 05: Buyer’s receipt list screen

Figure 3.30 Buyer’s receipt list screen Table 3.17 Buyer’s receipt list screen description

3 Button search Image Search receipt Show receipt filtered

4 Button calendar Image Choose date to filter Show receipt filtered

5 Label time Text Display label time

6 Label status Text Display label status

7 Select status Dropdown Select status to filter Show receipt filtered

8 Label list receipt Text Display label list receipt

9 Label amount Text Display label amount

10 Table receipt DataTable Display receipt table

3.6.2.6 Screen 06: Buyer’s receipt detail screen

Figure 3.31 Buyer’s receipt detail screen

Table 3.18 Buyer’s receipt detail screen description

3 Label receipt id Text Display label receipt id

4 Label receipt time Text Display label receipt time

Text Display label receipt method

Text Display label receipt price

7 Label promotion Text Display label promotion

Text Display label product name

Text Display label product amount

Text Display label product price

11 Label total Text Display label total

12 Label price total Text Display label price total

Figure 3.32 Register store screen Table 3.19 Register store screen description

2 Label store name Text Display label store name

4 Input store name TextInput Enter store name

5 Label content Text Display label content

Figure 3.33 My QR screen Table 3.20 My QR screen description

3 Image QR Image Display image QR

4 Label guide Text Display label guide

3.6.2.9 Screen 09: Store owner dashboard screen

Figure 3.34 Store owner dashboard screen Table 3.21 Store owner dashboard screen description

1 Image store Image Display image store Go to the store settings screen

3 Image search Image Display image search Go to the product search screen

4 Image setting Text Display image setting Go to the settings screen

5 Label view report View Display view report Go to the profit screen

7 View account View Display view account

9 Image tab Image Display image tab

10 Label tab Text Display label tab

11 Function tab View Display function tab Go to the corresponding tab

12 Navigation Tab.Navigator Display navigator Go to the corresponding navigation

Figure 3.35 Product search screen Table 3.22 Product search screen description

2 Input search Text Enter key search Show product filtered

3 Image no result Image Display image no result

4 Label no result Text Display label no result

Figure 3.36 Settings screen Table 3.23 Settings screen description

3 Option setting View Display option setting Go to the screen corresponding to the type of coupon

Figure 3.37 Store settings screen Table 3.24 Store settings screen description

4 Input store name TextInput Enter store name

6 Label explanatory Text Display label explanatory

7 Switch status Switch Change the point status

8 Label guide Text Display label guide

9 Input money TextInput Enter money

Text Display label point change

Button Save setting Save setting and show notification

3 View info View Show profile

5 Label about us Text Display label about us

Table 3.26 Profile settings screen description

3 Image avatar Image Display avatar

Button Save setting Save setting

Figure 3.40 Password change screen Table 3.27 Password change screen description

Text Display label current password

4 Input current TextInput Enter current password password

Text Display label new password

7 Label re-enter new password

Text Display label confirm new password

8 Input re-enter new password

TextInput Enter confirm new password

Button Save setting Save setting

3.6.2.16 Screen 16: Service package list screen

Figure 3.41 Service package list screen

Table 3.28 Service package list screen description

3 Image pro Image Display image pro

4 Label title Text Display label title

5 Label name Text Display label name

6 Label name Text Display label name

7 Label day Text Display label day

8 Label price Text Display label price

9 Button buy Button Buy package Show the detailed package modal

3.6.2.17 Screen 17: Service package detail screen

Figure 3.42 Service package detail screen Table 3.29 Service package detail screen description

3 Label question Text Display label question

5 Button payment Button Make a payment Go to the payment screen

7 Button VNPAY Button Choose the VNPAY method

8 Button Momo Button Choose the Momo method

9 Button payment Button Make a payment Go to the payment link

3.6.2.18 Screen 18: Product code scanning screen

Figure 3.43 Product code scanning screen Table 3.30 Product code scanning screen description

3 Camera Camera Display camera to scan

3.6.2.19 Screen 19: Imported products management screen

Figure 3.44 Imported products management screen Table 3.31 Imported products management screen description

2 Label header Text Display label

3 Button search Image Display search input

4 Button scan Image Scan product Go to the camera screen

5 Button filter Image Filter product Show the filter modal

Text Display label imported product tab

7 Label product tab Text Display label product tab

8 Image product Image Display product image

9 Product info Text Show product info

Button Add new imported product

Go to the imported product create screen

Table 3.32 Product management screen description

1 Input search TextInput Search product Show product filtered

2 Image product Image Display product image

3 Product info Text Display product info

Button Create product Go to the product creation screen

3.6.2.21 Screen 21: Imported products list screen in products

Figure 3.46 Imported products list screen in products

Table 3.33 Imported products list screen in products description

2 Button search Button Search product Show product filtered

3 Button edit Button Update product Go to the update product screen

Button Delete product Go to the update product screen

6 Label info Text Display label

Button Delete imported product Go to the imported product delete screen

Button Create imported product Go to the imported product create screen

3.6.2.22 Screen 22: Imported product deletion screen in products

Figure 3.47 Imported product deletion screen in products Table 3.34 Imported product deletion screen in products description

1 Checkbox delete Checkbox Check to choose the product to be deleted

2 Button back Button Go to the previous page Go to the imported products list screen in products

3 Button delete Button Delete imported product Show the confirmation modal

3.6.2.23 Screen 23: Imported product creation screen in products

Figure 3.48 Imported product deletion screen in products Table 3.35 Imported product deletion screen in products description

1 Label delete Text Display label delete

2 Button close Button Close the confirmation modal

3 Label question Text Display label question

4 Label back Text Display label back

5 Label delete Text Display label delete

3.6.2.24 Screen 24: Product create/update screen

Figure 3.49 Product create/update screen Table 3.36 Product create/update screen description

2 Button upload Button Upload image Upload image

3 Button photo Button Show the photo modal Choose image from the device

4 Image product Image Display image product

Text Display label product price

8 Input price TextInput Enter price

Button Save product Save product

Table 3.37 Profit report screen description

2 Label tab Text Display label tab

3 Image calendar Image Display image calendar

4 Label time Text Display label time

5 View info Text Display label info

6 Label detail Text Display label detail

7 Table revenue DataTable Display table revenue

8 Select type filter Dropdown Select type filter Display data table by filter type

9 Table revenue DataTable Display label

Figure 3.51 Sales report screen Table 3.38 Sales report screen description

3 Statistical chart Chart Display Statistical chart

Figure 3.52 Warehouse report screen Table 3.39 Warehouse report screen

1 Statistics button View Display statistics button

2 Image product Image Display image product

3 Label product info Text Display label product info

6 Label warehouse Text Display label warehouse

Figure 3.53 Imported product screen Table 3.40 Imported product screen description

2 Button search Button Search imported product Show the search input

3 Button scan Button Scan imported product Go to the camera screen

Button Create new imported product Go to the imported product creation screen

IconButton Import product Go to the detailed imported product screen

3.6.2.29 Screen 29: Detailed screen of imported products

Figure 3.54 Detailed screen of imported products Table 3.41 Detailed screen of imported products description

3 Input name TextInput Enter name

Text Display label capital price

5 Input capital price TextInput Enter capital price

6 Label sale price Text Display label sale price

7 Input sale price TextInput Enter sale price

Text Display label inventory number

Text Display label import number

12 Label product Text Display label product

13 Label import date Text Display label import date

Text Display label expiration date

Text Display label product code

Button Random code for imported product

Random code for imported product

Button Scan product code Go to the camera screen

Table 3.42 Customer list screen description

3 Table customer DataTable Display customer table

Figure 3.56 Coupon list screen Table 3.43 Coupon list screen description

2 Button search Button Search coupon button Show the search input

3 Label coupon info Text Display label coupon info

4 Button create coupon Button Create coupon Go to the coupon creation screen

Figure 3.57 Coupon type screen Table 3.44 Coupon type screen description

Text Display label coupon type info

3 Image continues Image Display image continues

Figure 3.58 Coupon create screen Table 3.45 Coupon create screen

1 Label condition Text Display label condition

2 Select product Dropdown Select product Select product

4 Input coupon TextInput Enter coupon value value

5 Button back Button Back button

6 Button continue Button Continue button

9 Select start date TextInput Choose start date

10 Select end date TextInput Choose end date

12 Button back Button Back button Go to the step 1

Button Save coupon Save coupon

Figure 3.59 Warehouse management screen Table 3.46 Warehouse management screen description

1 View export book View Display export book

2 View export book View Display export book

3 List product SegmentedControlTab Display list product

5 View product info Text Display product info

Figure 3.60 Import book screen Table 3.47 Import book screen desciption

2 Label import amount Text Display label import amount

3 Label import info Text Display label import info

Figure 3.61 Export book screen Table 3.48 Export book screen description

2 Label export amount Text Display label export amount

3 Label export info Text Display label export info

3.6.2.37 Screen 37: Store owner’s receipt list screen

Figure 3.62 Store owner’s receipt list screen Table 3.49 Store owner’s receipt list screen description

4 Label payment Text Display label payment

5 Label total amount Text Display label total amount

6 Label promotion Text Display label promotion

Figure 3.63 Sales screen 01 Table 3.50 Sales screen 01 description

2 Button code input Button Input product code Open the input code modal

3 Button code scan Button Scan product code

4 Label product info Text Display label product info

5 Label amount Text Display label amount

6 Label receipt day Text Display label receipt day

7 Label customer email Text Display label customer email

8 Image scan Image Scan customer email Open the camera modal

9 Label cumulation Text Display label cumulation

10 Select cumulation Switch Choose cumulation On – allow cumulation

11 Button create receipt Button Create receipt Create receipt

14 Image receipt code Image Display image receipt code

15 Label store info Text Display label store info

Text Display label customer email

18 Label receipt info Text Display label receipt info

19 Labal total amount Text Display label total amount

20 Label thanks Text Display label thanks

21 Button home Button Go to home Go to the main screen

Figure 3.65 Admin dashboard screen Table 3.52 Admin dashboard screen description

2 Button logout Button Logout button

4 View today info View Display today info

5 Function tab View Function tab Go to the corresponding function screen

6 Label notification Text Display label notification

Button Send notification Send notification

Figure 3.66 Admin dashboard website screen

Table 3.53 Admin dashboard website screen description

1 Label website name Text Display label website name

2 Image navigation Image Display image navigation

3 Text navigation Text Display label navigation

4 Label main page Text Display label main page

5 Image avatar admin Avatar Display avatar admin

6 Label new statistics Text Display label new statistics

Text Display label chart new statistics

8 Select date for line chart

RangePicker Select date Display chart by date

9 Chart new statistics ReactApexChart Display chart

Text Display label chart transaction

11 Select date for bar chart

RangePicker Select date Display chart by date

12 Chart transaction Chart Display chart

Table 3.54 Account list screen description

Dropdown Choose account type Show data table by account type

3 Label table name Text Display label table name

5 Table account DataTable Display table

Figure 3.68 Account list website screen

Table 3.55 Account list website screen description

2 Input search Input Enter key search Show data filtered by search key

Select Select account type Show data filtered by account type

Select Select account status Show data filtered by account status

5 Header table Tr Display header table

6 Label account Id Text Display label account Id

7 Image account Id Avatar Display account Id

10 Label phone Text Display label phone

Text Display label account status

Text Display label total amount

13 Button page Button Button navigate page number

Go to the corresponding page number

Figure 3.69 Transaction list screen Table 3.56 Transaction list screen description

2 Button search Button Search button Show transactions filtered

3 Label select Text Display label select

4 Select package Dropdown Choose package type Show transactions by package type

5 Select status Dropdown Choose status of transaction Show transactions by status

6 Table transaction DataTable Display transaction table

Figure 3.70 Transaction list website screen

Table 3.57 Transaction list website screen description

2 Select date Select Select date Filter transactions by date

3 Select package type Select Select package type Filter transactions by package type

Select Select transaction status Filter transactions by status

6 Label transaction Id Text Display label transaction Id

7 Label time transaction Text Display label time transaction

9 Image avatar Avatar Display avatar

Icon Display label transaction status

12 Label transaction status Text Display label transaction status

3.6.2.42 Screen 42: Service package list screen

Table 3.58 Service package list screen description

Text Display label package info

Button Create package Go to the service package creation screen

Figure 3.72 Service package list website screen

Table 3.59ervice package list website description

2 Button add Button Add new service package Open the package creation screen

4 Label package Id Text Display label package Id

Text Display label package price

6 Label days Text Display label days

Text Display label created date

Text Display label updated date

9 Label status Text Display label status

10 Image update Image Update package Open the package update screen

3.6.2.43 Screen 43: Service package create/updating screen

Figure 3.73 Service package create/updating screen Table 3.60 Service package create/updating screen description

3 Input price TextInput Enter price

5 Input day TextInput Enter day

6 Button save Button Save package Save package package

Figure 3.74 Service package create/updating website screen

Table 3.61 Service package create/updating website screen description

3 Input price Input Enter price

5 Input day Input Enter day

Button Add new service package Add new service package

7 Button cancel create/update service package

Button Cancel create/update service package

Cancel create/update service package

3.6.2.44 Screen 44: Admin setting profile screen

Figure 3.75 Admin setting profile screen Table 3.62 Admin setting profile screen description

Text Display label account username

5 Label email Text Display label

Image Display image change password

Text Display label current password

11 Label new password Text Display label new password

12 Input new password TextInput Enter new password

Button Change password Change password

14 Image personal info Image Display image personal info

15 Label personal info Text Display label personal info

16 Label phone Text Display label phone

18 Label full name Text Display label

20 Button save profile Button Save profile Save profile

Figure 3.76 Disable/Enable system maintenance screen

Table 3.63 Disable/Enable system maintenance screen description

Text Display label system maintenance

2 Switch status Switch Change the system maintenance’s status

Figure 3.77 Disable/Enable system maintenance website screen

Table 3.64 Disable/Enable system maintenance website description

Text Display label system maintenance

2 Switch status Switch Change the system maintenance’s status

VALIDATION AND DEPLOYMENT

DEPLOYMENT

This article provides a comprehensive overview of various use case descriptions and screen layouts for a web application It includes detailed descriptions for creating and updating service packages, managing user profiles, sending notifications, viewing reports, changing passwords, and exporting data to Excel Additionally, it outlines the database diagram and presents specific screen designs for different user roles, including guests, buyers, store owners, and administrators The article also features descriptions of the signup and login processes, as well as password recovery screens, ensuring a thorough understanding of the user interface and functionality for each role within the system.

The article outlines various screen descriptions for a buyer and store owner dashboard, including the buyer dashboard (Table 3.16), receipt list (Table 3.17), and receipt details (Table 3.18) It also covers the store registration screen (Table 3.19) and My QR screen (Table 3.20), along with the store owner dashboard (Table 3.21) and product search functionality (Table 3.22) Additionally, the article details settings screens, including store settings (Table 3.24), personal info (Table 3.25), and profile settings (Table 3.26), as well as password change options (Table 3.27) It further discusses service packages (Tables 3.28 and 3.29), product code scanning (Table 3.30), and management screens for imported products (Tables 3.31 to 3.35) Lastly, it includes descriptions for product creation and updates (Table 3.36), profit reports (Table 3.37), sales reports (Table 3.38), and warehouse reports (Table 3.39).

The article provides detailed descriptions of various screens related to imported products, customer management, and coupon functionalities Key sections include the imported product screen (Table 3.40), customer list (Table 3.42), and coupon creation (Table 3.45) Additionally, it covers warehouse management (Table 3.46), import/export book screens (Tables 3.47 and 3.48), and sales screens (Tables 3.50 and 3.51) The admin dashboard is described in Tables 3.52 and 3.53, alongside account management (Tables 3.54 and 3.55) and transaction lists (Tables 3.56 and 3.57) Finally, it outlines service package management, including creation and updating screens (Tables 3.60 and 3.61), and concludes with the admin settings profile (Table 3.62).

With the rise of economic development, the retail sector is witnessing a surge in the number of stores, many of which still rely on traditional sales management methods involving books and ledgers This outdated approach is not only time-consuming but also complicates effective management To facilitate a swift transition to digital management, a sales management application was developed, leveraging the widespread use of smart mobile devices to enhance accessibility for all users This focus on practical application and addressing real needs is the driving force behind our chosen topic.

The application is designed to streamline essential functions of inventory and revenue management, including product management, inventory tracking, customer management, promotional activities, and generating analytical reports It also facilitates the accumulation of points during purchases To enhance user experience, the application features a robust processing core with fully developed APIs for efficient data display.

Spring Boot is an extension of the core Spring framework, designed to simplify and automate development processes It employs a layered architecture that facilitates communication between different layers in a hierarchical manner According to the Spring Boot documentation, it serves as a streamlined framework that enhances productivity and efficiency in building applications.

Spring Boot primarily aims to simplify application configuration by eliminating the need for XML and annotation-based settings It offers several key benefits, including an opinionated approach that allows for future configuration changes, a convention-over-configuration philosophy, and the ability to create stand-alone, production-ready applications.

In the Service layer of a Spring Boot application, the business logic is executed, utilizing the Java Persistence Library (JPA) to map database data to Spring Boot model classes.

Spring Boot simplifies web application development by offering built-in support for embedded servers like Tomcat, Jetty, and Undertow, eliminating the need for developers to deploy their applications on traditional application servers.

ReactJS, developed by Facebook engineer Jordan Walke in 2011, is an open-source JavaScript library designed to enhance front-end web application development It was created to meet the needs of Facebook’s engineers, enabling them to efficiently manage multiple user interfaces simultaneously, such as chat features and news feed updates.

React enables the creation of reusable and nestable components, allowing developers to break down everything on the screen—from websites to mobile apps—into manageable parts In this chapter, you will learn how to create, customize, and conditionally display React components effectively.

React applications consist of individual UI elements known as components, which are JavaScript functions enhanced with markup These components can vary in size, ranging from a simple button to a complete webpage.

JSX allows you to incorporate HTML-like syntax directly within JavaScript files, enabling you to maintain rendering logic and content together This feature is particularly useful when you need to introduce JavaScript logic or reference dynamic properties within your markup.

Components are fundamental to React, serving as the building blocks for creating user interfaces (UI) Understanding components is essential for anyone beginning their React journey.

React JS includes a free syntax extension known as JSX, which simplifies HTML markup within the library This feature allows for writing shortcuts that enhance code simplicity and cleanliness, transforming HTML mockups into ReactElement trees Additionally, JSX helps prevent code injections and improves the overall performance of your application.

STRENGTH

THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness

Ho Chi Minh City, December 2023

Student name: Ho Kim Tien Student ID: 20110572

Student name: Truong Pham Ly Huong Student ID: 20110081

Thesis name: Building a website and mobile application to manage sales

We extend our heartfelt gratitude to Lecturer Nguyen Duc Khoan for his invaluable support throughout our project His practical experience and insightful guidance were instrumental in shaping our chosen topic We appreciate his prompt responses to our queries and the timely suggestions and corrections he provided, which helped us address our shortcomings and successfully complete the project on time.

This discussion marks our initial foray into the topic, and we acknowledge our limited knowledge and technical constraints in executing a software project As we explore this subject, we recognize certain shortcomings and welcome your valuable feedback to enhance our understanding and improve our efforts Thank you for your support.

Finally, we respectfully wish you good health and greater success in your career We want to express our sincerest thanks to the teachers, especially Mr Nguyen Duc Khoan.

HCMC University Of Technology And Education

Student name: Ho Kim Tien Student ID: 20110572

Student name: Truong Pham Ly Huong Student ID: 20110081

Thesis name: Building a website and mobile application to manage sales

Advisor: Nguyen Duc Khoan, M.Sc.IT

Learn about technologies: Spring Boot, ReactJS, React Native

- Use Spring Boot to build backend, and write API for modules in the system

- Use MySQL to store the system's user data

- Use ReactJS to design and handle web interfaces for admin

- Use React Native to design and handle mobile interfaces for all actors

1.1 The urgency of the thesis

1 Chapter 1: Application and technology review

This article provides a comprehensive overview of various use case descriptions related to service packages and user interactions on a website Key sections include the creation and updating of service packages, profile management, user notifications, chart report viewing, password changes, and data export functionalities Additionally, the article outlines database diagrams and user interface screens tailored for different roles, including guests, buyers, store owners, and administrators Notable screens discussed are the signup and login processes, as well as password recovery options, ensuring a user-friendly experience across the platform.

This article provides detailed descriptions of various screens within a buyer and store owner dashboard, including the buyer dashboard, receipt list, receipt details, store registration, QR code functionality, product search, and settings It also covers personal information management, profile settings, password changes, service package listings and details, product code scanning, imported product management, and product management Additionally, it includes descriptions of screens for importing products, deleting imported products, creating or updating products, and generating profit and sales reports, along with a comprehensive warehouse report.

This article provides a comprehensive overview of various screen descriptions related to imported products, customer management, coupon management, warehouse operations, and sales processes Key sections include detailed descriptions of the imported product screens (Tables 3.40-3.47), customer and coupon list screens (Tables 3.42-3.45), and sales screens (Tables 3.50-3.51) Additionally, it covers the admin dashboard and account management screens (Tables 3.52-3.56), alongside transaction and service package listings (Tables 3.56-3.60) Each table offers insights into the functionalities and features of the respective screens, ensuring a thorough understanding of the system's capabilities.

As economic development accelerates, the proliferation of retail stores continues, yet many still rely on traditional sales management methods involving books and ledgers, which are time-consuming and inefficient To facilitate a swift transition to digital management, a sales management application has been developed With the rise of smart mobile devices, creating this application on a mobile platform ensures widespread accessibility This topic is particularly relevant as it meets real needs and offers practical solutions for modern retail management.

The application is designed to efficiently manage essential inventory and revenue operations, including product management, inventory control, customer management, promotional activities, and generating analytical reports It also features a points accumulation system for purchases Additionally, the core processing is supported by fully developed APIs that facilitate user-side data presentation.

Spring Boot is an extension of the core Spring framework, designed to simplify and automate the development process It employs a layered architecture, enabling seamless communication between different layers in a hierarchical structure According to the official Spring Boot documentation, it offers a streamlined approach to building applications using the Spring framework.

Spring Boot's primary objective is to eliminate the need for XML and annotations-based configuration in applications It offers several advantages, including opinionated defaults that allow for future configuration changes, a convention-over-configuration approach, and the ability to create stand-alone, production-ready applications.

In the Service layer, business logic is executed, where Spring Boot manages all operations related to database data mapped to Spring Boot model classes via the Java Persistence Library (JPA).

Spring Boot offers seamless integration with embedded web servers such as Tomcat, Jetty, and Undertow, allowing developers to deploy web applications without the complexities of traditional application servers.

ReactJS, developed by Jordan Walke at Facebook in 2011, is an open-source JavaScript library designed to enhance front-end web application development It was created to meet the needs of Facebook's engineers, enabling them to manage multiple user interfaces simultaneously, such as chat features and news feed updates.

React enables the creation of reusable and nestable components, allowing developers to break down everything displayed on screens, from websites to mobile apps In this chapter, you will learn how to create, customize, and conditionally render React components effectively.

React applications are constructed using individual UI elements known as components A React component is essentially a JavaScript function that incorporates markup, allowing for versatile design These components can range in size from a simple button to a complete webpage.

JSX enables the integration of HTML-like markup within JavaScript files, allowing for the combination of rendering logic and content in a unified location This feature is particularly useful when you need to incorporate JavaScript logic or reference dynamic properties within the markup.

THROWBACK

Besides, the application still encounters disadvantages:

• The system is deployed on a free server, so it cannot handle a large number of users

• The app has not yet been deployed to Google Play and the App Store.

FUTURE DEVELOPMENT

To build a more complete and complete application, we aim to:

• Improved system performance when uploading images to the server consultation between the application and the store owner

• Need to add employee and shift management features

[1] “Advantages of ReactJS”, 8 Advantages of React JS: Reasons to Choose | ProCoders

[2] “ReactJS doc “, https://react.dev/

[3] “Redux doc” , Redux - A JS library for predictable and maintainable global state management | Redux

Tiêu đề	Building A Website And Mobile Application To Manage Sales
Tác giả	Ho Kim Tien, Truong Pham Ly Huong
Người hướng dẫn	Nguyen Duc Khoan, M.Sc.IT
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	2024
Thành phố	Ho Chi Minh City

Định dạng
Số trang	235
Dung lượng	7,19 MB