(Đồ án hcmute) building an e commerce system using reactjs and react native

INTRODUCTION

Reason for choosing the topic

In today's rapidly advancing information technology landscape, its integration into daily life has become essential for modern civilization As global economic demands grow, particularly in the exchange of goods, the need for robust internet connectivity and diverse online business models has surged Consequently, many retailers are adopting e-commerce strategies, enabling customers to access information effortlessly while saving time and reducing costs.

Gift Shop UTE was established to cater to the needs of students and faculty at the Ho Chi Minh City University of Technical Education, offering a range of products including school uniforms, textbooks, and items branded with HCMUTE.

Promoting a large-scale store and providing customers with the necessary information to choose products can be challenging A key issue is ensuring that customers can quickly and conveniently order their selected items without wasting time on pickup and payment To address these challenges, and with the guidance of Nguyen Tran Thi Van MSc, we have chosen to focus on "Building an e-commerce system using ReactJS and React Native." Our goal is to implement this project at HCMUTE, and we eagerly seek feedback and direction from our instructors.

Project goals

• Build an E-commerce application on a mobile phone (for users)

• Build an E-commerce website (for users)

• Build the Admin Management Website

• Learn the theoretical foundation and apply it to the topic:

- Terraform with AWS providers The services are being used: n

+ Elastic Compute Cloud (EC2) + IAM Service

- Machine learning/ Deep learning technique:

+ Image processing + Natural language processing + Sentiment analytics

• Analyze the requirements and realize the system

Project mission

- Clear up the theoretical basis of the topic

- Survey the actual situation of the current system

- Design the application and website according to the structure of Online selling

- The function of the application and website is divided into different modules for easy management.

Object & scope

The research object is the management and organization of online sales of UTE Gift Shop products

The project scope of the topic is “Building an e-commerce system using ReactJS and React Native".

Research methodology

Researching through reading books, newspapers, and related documents to build the theoretical basis of the topic and necessary measures to solve the problems of the topic n

Through practical observation, the basis of the claims is required research, the application will be put into the test run to make adjustments more suitable.

Practical scientific significance

The built website and application have applied the achievements of information technology to the commercial field

The launch of this application and website addresses the challenges faced by the UTE Gift Shop, offering students and lecturers a fast and convenient solution With just a few simple steps from the comfort of their homes, users can easily access and purchase the products they desire.

This application and website ensure complete confidentiality for students and teachers regarding their personal information Additionally, the platform enhances the store's visibility, effectively promoting its image to a wide audience of students across various media channels.

THEORY FOUNDATION

Fundamentals of mobile software development

The smartphone industry has long been dominated by two major competitors: Android and Apple, which together accounted for over 99% of global smartphone sales as of 2016 Google acquired the Android operating system, solidifying its position in the market.

2005 from Android Inc and although Android devices are distributed by many different manufacturers, they all use the same operating system

Apple's iOS operating system, originally derived from macOS, incorporates features familiar to users since its early 2000s inception By manufacturing its own devices, Apple tailors software specifically for its hardware, ensuring optimal performance In contrast, Android faces challenges in refining its operating system and software updates across a diverse range of devices with varying hardware capabilities.

Figure 3 demonstrates the increase in Android’s total market share percentage from

From 2012 to 2016, the bar chart illustrates a decline in Apple's market share percentage among smartphone users However, it's important to note that this data does not reflect the growing total of smartphone owners during the same period Consequently, while Apple's market share appears to have decreased, the actual number of individuals owning Apple devices has increased over these four years.

Figure 3: Smartphone OS Market Share [5] n

Figure 4 illustrates the smartphone ownership trends, revealing that iOS devices are predominantly favored in First World countries, while Android devices are more popular in developing nations This preference is largely influenced by the significant price disparity, as iOS devices generally come with a higher price tag.

Figure 4 illustrates the significant disparity in total market share percentages depicted in Figure 3, highlighting that countries with large populations, such as China, India, and Russia, have a higher proportion of Android device users.

As the popularity of Android and Apple devices rises, it is crucial for software developers to support both platforms However, developing and maintaining separate applications for each can be costly and time-consuming for companies.

This section of the thesis will explore the fundamental concepts and knowledge necessary for developing mobile applications, with a particular emphasis on creating a well-designed mobile app using React Native Additionally, it will highlight the significance of mobile marketing in today's digital landscape.

In 2017, the geographical distribution of smartphones highlighted their crucial role in marketing strategies, as mobile devices have become integral to daily activities Companies that fail to engage with this global trend risk appearing disconnected from their audience.

As mobile device usage surges, the demand for high-quality applications grows, emphasizing the critical role of usability in app development A positive user experience (UX) is essential for ensuring that users enjoy interacting with applications Consequently, UX designers have become integral to the development process, focusing on optimizing how users engage with mobile apps across various scenarios.

To address the challenge of comprehending user requirements, it is essential to adopt agile software development for the application This approach ensures that users and customers remain informed about the application's development progress Agile methodology equips programmers and designers with valuable insights into user needs, facilitating a more effective and responsive development process.

User interface designers must prioritize ergonomics to enhance the user experience of their applications By strategically placing the most important and frequently used features on the left side of the lower half of the screen, designers can accommodate the majority of users who are right-handed and typically use their right thumb for navigation on mobile devices.

Effective communication between developers and user interface designers is crucial, as developers can sometimes become fixated on a single implementation approach, potentially overlooking alternative designs Conversely, developers, due to their extensive interaction with the application during development, can identify valuable user experience improvements that designers might not consider.

Mobile software engineers have faced limitations in language options, making it challenging to enter the field of native application development Since the late 2000s, the competition between the two major mobile platforms, iOS and Android, has intensified, leading developers to seek visibility for their applications on both iOS apps are primarily developed in Objective-C and Swift, while Android apps utilize Java or Kotlin, resulting in significant time and effort spent rewriting applications in different languages that may function differently Ideally, developers aspire to create and maintain a single application that can operate across multiple platforms.

Software engineers sought solutions through web applications, which can be developed without platform limitations This led to the emergence of various frameworks for creating multi-platform applications, fostering the rise of hybrid applications A hybrid application operates within a chromeless browser window known as WebView, enabling developers to enhance web development As a result, hybrid applications can closely resemble and function like native applications, providing a seamless user experience.

Hybrid applications, built using JavaScript, HTML5, and CSS, attract web developers and beginners alike Their appeal lies in the abundance of developers skilled in these technologies, making them an attractive option for small and medium-sized businesses The multi-platform capabilities of hybrid applications enable these businesses to reach a broader audience effectively.

Developing with React Native

React and React Native utilize Flux architecture to manage data flow in applications, a system developed by Facebook as a modern alternative to the conventional MVC model Unlike MVC, Flux employs a unidirectional data flow, simplifying error detection and enhancing overall application efficiency.

Figure 5: Data flow in a React application that uses Flux architecture n

The Flux data flow simplifies the traditional MVC data flow by eliminating two-way bindings and mandating that all actions be directed through a centralized dispatcher.

Flux effectively prevents cascading updates commonly seen in the MVC model by utilizing a single dispatcher that manages changes across various stores within the application's data layer This approach, which shares characteristics with functional programming and flow-based programming, ensures that no additional actions are initiated until the store completes its data updates Consequently, the application's View is re-rendered based on these changes, promoting a more efficient and organized data flow.

In React and React Native, the user interface is generated based on the application's data, allowing developers to focus less on how the UI is rendered to the DOM This is facilitated by the Virtual DOM, an intermediate representation within the React framework that optimizes rendering by batching changes and comparing the previous and current states This comparison enables the Virtual DOM to minimize real DOM manipulations Facebook's developers extended this concept to mobile platforms, resulting in the creation of React Native.

To begin developing with React Native, developers can select their preferred IDE and install Node, a package management tool essential for downloading additional software development tools and libraries After installing Node, they should navigate to their desired application directory and utilize the create-react-native-app command-line utility to set up their project.

Figure 6: Command line code that will use NPM to install the react native library

Figure 7: Command line code that will create a React Native Project folder n

To create the application, simply run "npm start" from the command line, which will generate a QR code This QR code can be scanned using the Expo client app on either iOS or Android devices, provided that both the computer and phone are connected to the same wireless network.

2.2.4 Building projects with native code

React Native allows developers to enhance and expand the codebase of existing native applications, making it an advantageous choice for current native projects looking to leverage the powerful features offered by React Native.

To develop an Android application, it's essential to use a native development IDE, specifically Android Studio Proper configuration is necessary and varies based on the developer's operating system For detailed installation processes, refer to the official React Native documentation available on Facebook's website.

One advantage of constructing the project in this manner is the enhanced utilization of an emulator offered by the IDE, which is beneficial for development without requiring a physical device.

This section outlines the process of building a basic application with React Native Assuming all prerequisites are met, the app should be operational on the mobile device The subsequent instructions will assist developers in creating a simple component that illustrates the core principles of React.

To begin, the developer must create a new file, ensuring it follows proper naming conventions by matching the file name with the component class name Next, the developer should import React and the Component class from the React library and then extend the Component class in their code.

The provided code illustrates the proper structure for a JavaScript file when developing with React, highlighting that the render method, located on the fourth line, serves as the primary function responsible for rendering the View component on the user interface.

React components utilize customizable parameters known as props, which are defined by the parent and remain constant during the component's lifecycle These props enhance the reusability of components in various contexts To effectively customize components, it's essential to consult the React Native documentation to understand the available props and their functionalities.

React Native differs from React by not utilizing standard HTML tags; instead, it features custom components that function similarly For instance, the "View" component serves a purpose akin to the "" tag, acting as a container for content Additionally, React Native does not rely on separate CSS files for styling; it employs a class called "StyleSheet," which can be imported and used to create an object resembling a JSON structure This object can then be applied to the style prop of component elements, as demonstrated in the renderFormItem function.

Figure 8: Code block that shows an example of how to create a basic React component n

The code block illustrates the use of StyleSheet for styling the View component in the render method It's essential to instantiate the StyleSheet object outside the class for accessibility across all classes in the file React Native enables styling within the same file as the component, simplifying the customization of element styles compared to traditional CSS.

React Native versus native development

This chapter compares React Native with other native development methods, focusing on their differences An experiment by Calderaio assessed the memory usage of Swift and React Native, aiming to identify the more memory-efficient programming language The tests involved applications that were identical in appearance and functionality.

In the initial three views of the application, the difference in performance between the two coding languages was minimal and likely imperceptible to users However, in the high memory-demanding Maps view, React Native demonstrated a significant advantage, utilizing 61MB less memory compared to Swift.

React-Native demonstrates superior memory efficiency compared to Swift during intensive processes, as illustrated in Figure 6 The tests were conducted under consistent conditions, yielding repeatable results, with the average performance depicted in the accompanying bar chart.

6 This is a surprising discovery as it shows that a widely-used programming language such

Figure 11: Swift vs React-Native Memory Usage [8] n as JavaScript can be used to develop efficient applications for mobile devices that can even outperform native coding languages

While React Native offers numerous advantages, it also has notable shortcomings that can pose challenges for developers One significant issue is the limited documentation available, primarily consisting of release notes from Facebook, which may hinder users in fully leveraging the framework's capabilities.

React Native is a high-maintenance framework due to its constant evolution and updates to newer versions Developers need to stay informed and proficient in the latest version of React Native to effectively utilize its features.

Developing a React Native application often presents challenges in achieving true cross-platform functionality, as the same app cannot fully utilize both native features and function as an independent web application at the same time Additionally, React's unique structure and syntax differ significantly from traditional HTML and JavaScript, contributing to a steep learning curve that can impede the application's development process.

To fully leverage React Native's capabilities, developers need a solid understanding of native development for the respective platform Despite its challenges, a dedicated developer can effectively navigate these obstacles to create a successful application.

Machine learning and Deep learning theory

In this section, we will explore where CNNs came from, what their building blocks look like, and how to implement them using TensorFlow and Keras

Convolutional neural networks (CNNs) emerged from the study of the brain’s visual cortex, and they have been used in image recognition since the 1980s

Recent advancements in computational power and the availability of extensive training data have enabled Convolutional Neural Networks (CNNs) to achieve superhuman performance in complex visual tasks These technologies are now integral to various applications, including image search services, self-driving vehicles, and automated video classification systems.

Moreover, CNNs are not restricted to visual perception: they are also successful at many other tasks, such as voice recognition and natural language processing

2.4.1.1 Neurons in the Visual Cortex

David H Hubel and Torsten Wiesel performed a series of experiments on cats in

1958 and 1959 (and a few years later on monkeys), giving crucial insights into the structure of the visual cortex

Research indicates that numerous neurons in the visual cortex possess small local receptive fields, responding exclusively to visual stimuli within a confined area of the visual field These receptive fields can overlap among different neurons, collectively covering the entire visual field.

The authors discovered that certain neurons are specifically responsive to images of horizontal lines, while others respond exclusively to lines of varying orientations Interestingly, two neurons can share the same receptive field yet still react to different line orientations.

Biological neurons in the visual cortex are tuned to specific patterns within small areas known as receptive fields As visual signals progress through successive brain modules, these neurons begin to respond to increasingly complex patterns found in larger receptive fields Higher-level neurons exhibit larger receptive fields and react to intricate combinations of simpler, lower-level patterns.

A 1998 paper by Yann LeCun et al introduced the famous LeNet-5 architecture, widely used by banks to recognize handwritten check numbers

This architecture incorporates familiar components like fully connected layers and sigmoid activation functions, while also introducing two innovative elements: convolutional layers and pooling layers.

Neurons in the 1st convolutional layer are not connected to every single pixel in the input image, but only to pixels in their receptive fields

FC layer: 1D array of neurons

Convolutional layer: 2D array of neurons

In turn, each neuron in the second convolutional layer is connected only to neurons located within a small rectangle in the first layer

The neuron (i, j) of a layer is connected to the outputs of the neurons in the previous layer located in a receptive rectangle

Figure 13 CNN layers with rectangular local receptive fields [9] n

Connecting a large input layer to a smaller layer by spacing out the receptive fields significantly decreases the model's computational complexity This process involves transitioning from one receptive field to the next, a movement referred to as the stride.

1 stride (1 time moving) = 1 pixel in convolutional layer

Convolutional layer 1: dimension of 5x7 neurons

Figure 14 Connections between layers and zero padding [9]

Figure 15 Padding="same” or “valid” (with input width 13, filter width 6, stride 5) [9] n

Padding must be either "same" or "valid":

- If set to "same", the convolutional layer uses zero-padding if necessary The output size is set to the number of input neurons divided by the stride, rounded up

When the convolutional layer is configured to "valid," it operates without zero padding, which can lead to the omission of certain rows and columns from the input image's bottom and right edges, influenced by the stride settings, as illustrated in Figure 15.

The weight of each convolutional layer is a 2D array

This 2D array is called a filter

Size of filter = receptive rectangle

Feature map is the output of previous image convoluted with filter

The size of feature map = size of convolutional layer

During training, convolutional layers automatically learn the most effective filters for their tasks, eliminating the need for manual filter definition Subsequently, higher layers combine these filters to form more intricate patterns.

Figure 16 Applying two different filters to get two feature maps [9] n

Pool pixels in a receptive rectangle => 1 pixel feature map => pooling => reduce size

KERAS IMPLEMENTATION o Use the Conv2D layer: conv = keras.layers.Conv2D(filters2, kernel_size=3, strides=1, padding="same", activation="relu")

#filters: feature map; kernel_size: receptive rectangle

Figure 17 Convolutional layers with multiple feature maps, and images with three color channels [9]

Figure 18 Max pooling layer (2 × 2 pooling kernel, stride 2, no padding) [9] n

- Invariance can be useful in cases where the prediction should not depend on these details, such as in classification tasks

=> Inserting a max-pooling layer every few layers in a CNN: large scale

Max pooling can be quite destructive, as it significantly reduces the size of the output For instance, using a small 2 × 2 kernel with a stride of 2 results in an output that is half the size in both dimensions, effectively discarding 75% of the input values Additionally, in certain applications, the invariance provided by max pooling may not be beneficial.

KERAS IMPLEMENTATION max_pool = tf.keras.layers.MaxPool2D(pool_size=2)

#pool_size=2: 2x2 kernel, default stride=pool_size, default padding='VALID’

Figure 19 Invariance to small translations [9] n

Typical CNN architectures consist of multiple convolutional layers, each usually followed by a ReLU activation layer, interspersed with pooling layers This structure is repeated several times to enhance feature extraction and dimensionality reduction.

The image gets smaller and smaller as it progresses through the network, but it also typically gets deeper and deeper (i.e., with more feature maps

A standard feedforward neural network is implemented at the top of the architecture, featuring several fully connected layers with ReLU activation functions The final layer utilizes a softmax function to generate predicted class probabilities.

- Choosing convolutional kernels: receptive rectangle size small

- Choosing number of filters: pooling => x2 filters

Classify an image to a specific class The whole image represents one class We don't want to know exactly where are the object Usually, only one object is presented

In image analysis, our goal is to identify all objects that belong to designated classes within a single image, along with their respective locations It's important to note that an image may contain multiple objects from various classes.

=> To predict a bounding box around the object => output: label + 4 number (position of bounding box)

=> Not much charge to the network

One of the most costly parts of deep learning: labeling, annotating

Popular labeling tools: LabelMe, VGG Image Annotator, ImgLab, OpenLabeler

Crowdsourcing platforms: such as Amazon Mechanical Turk

2.4.2.3 Training data for object detectors

An Object detector should have at least the following components:

• Preprocess data (for example, when using pre-train models, it is necessary to resize the image to match the model)

• Class labels: images must be labeled, indicating what those objects are

• Bounding box: objects in the image must be specified at a specific position in the image (can be x, y coordinates, width, height )

2.4.2.4 Detect multiple objects in an image

Previous models only work with 1 object/image

For multiple objects in an image, a simple approach:

• Train a CNN to classify and locate a single object

• Slide it across the image

• Zoom it and slide again

• Then, post-processing, remove the bounding box

The concept of Fully Convolutional Networks (FCNs) was initially presented in a 2015 paper by Jonathan Long and colleagues, focusing on semantic segmentation, which involves classifying each pixel in an image based on the object class it represents.

The authors pointed out that you could replace the dense layers at the top of a CNN with convolutional layers

Dense layers: expect a specific input size n

Convolutional layers: able to work with ANY image size

=> Fully convolutional networks contain only convolutional layer => run with any image size

* Two ways to create an FCN:

• Design the model and train

To convert a Convolutional Neural Network (CNN) into a Fully Convolutional Network (FCN), several key adjustments must be made First, the number of filters in the Conv2D layer should match the number of units in the Dense layer Additionally, the filter size must correspond to the dimensions of the input feature maps It is also important to use "valid" padding and set the stride to 1 or more Notably, this conversion process does not require retraining, as the weights can simply be copied from the Dense layer to the Conv2D layer.

=> Train a CNN to detect a single object in 224x224 images, that outputs 10 numbers:

=> Convert the CNN to FCN

Figure 21 The same fully convolutional network processing a small image

Well-known Object detection NNs

• Single Shot MultiBox Detector (SSD)

RNNs work on sequences of arbitrary length, undetermined length => time series RNNs For small sequences, fully connected

For very long sequences, a convolutional neural network

Examples of sequence data in applications:

• Speech recognition (sequence to sequence):

• Music generation (vector to sequence):

• Machine translation (sequence to sequence):

X: text sequence (in one language)

Y: text sequence (in another language)

• Video activity recognition (sequence to vector):

A recurrent neuron looks very much like a feedforward neuron, except it also has connections pointing backward

Simplest possible RNN: includes only one recurrent neuron

* Unrolling the network through time

At each time step \( t \), known as a frame, a recurrent neuron processes inputs \( x \) along with its output from the previous time step, \( y(t-1) \) In the initial time step, where there is no prior output, this value is typically initialized to 0.

You can easily create a layer of recurrent neurons At each time step t, every neuron receives both the input vector x and the output vector from the previous time step y(t-1)

Figure 23 Recurrent neuron (left) unrolled through time (right) [10]

Figure 24 A layer of recurrent neurons (left) unrolled through time (right) [10] n

Each recurrent neuron has two sets of weights: one for the inputs x(t) and the other for the outputs of the previous time step, y(t-1)

USER REQUIREMENT

Current business status

Students and lecturers at universities in Ho Chi Minh City, including the Ho Chi Minh University of Technology and Education, face challenges when purchasing essential items like uniforms and textbooks, as these must be bought directly from designated sales locations.

• Students or lecturers will take a lot of time to go directly to the store

• It is difficult to choose suitable products

Many students hesitate to make direct purchases due to fears and concerns about pricing To address this issue, it is essential to develop an application that simplifies the buying process, making it more accessible for everyone.

The application, guided by the motto "Your Stores Your Place," is dedicated to continuously enhancing the quality of products and services for students and lecturers Its primary focus is on market expansion, product promotion, and boosting sales to meet the evolving needs of its users.

To identify the requirements for our topic, my team conducted a survey of various smartphone applications, including popular platforms like Lazada and Tiki We have gathered a range of photos and comments that reflect our findings.

• Exclusive offers and daily discount codes are only available on Lazada's app

Reading product and vendor reviews from other buyers enables informed purchasing decisions If you have lingering questions about a product, engaging in direct chat with the seller can provide additional insights.

• Simple login operation can link with other social networks such as Facebook, Twitter

• Optimizing the user experience right on the application

Thereby, we decide to develop an application running on Android mobile devices performing the following functions:

• Add/remove a product to the cart

• Add/remove a product to your favorite list

• Payment o Through cash o Through card (Credit/Visa…)

• Manage feedback o Add feedback o Edit feedback o Remove feedback

• Easily find the category you love With just a few steps, you can completely find the items you want to shop from men's fashion, women's fashion, beauty, or technology

• Access to genuine products from famous brands in the world such as Samsung, Apple,

• Extremely attractive deals every day with the discount code Shopee, giving you the opportunity to own the right items at surprisingly low prices

Figure 36: Shopee Application n o Update personal information o See order history

• Manage category o Add new category o Update category o Delete category

• Manage product o Add new product o Update product o Delete product

• Make statistic o By day/week/month/year o By each product/category

Requirements analysis

The application efficiently stores essential information, including category names and detailed product data such as name, image, description, and price It also securely manages user information, encompassing email, password, full name, phone number, date of birth, and gender Additionally, the application collects feedback from users, capturing the author's name, rating, and content Users can also save their favorite products for easy access.

Searching: o Category: name o Product: name

Statistic: o Product sold by day/week/month/year (for admin) o Product sold by each product/category (for admin) n

Environment: The application is active on Android or IOS phones

Normal user: can register and log in to the application Moreover, the user can see the category and all the products

Admin: have all the permission in this application

- The application can be easy to edit and update for the user requirement

- The button is not difficult to see

- The functional screens interact well with each other, creating convenience for users

- The software runs compatibly on android operating systems

- The software can meet user requirements without affecting other activities

- The design and functionality of the software may be reused for future development

- The code can be used many times and can be applied to many different programs without having to change the code too much n

Lists of requirements for the software

Division: Manage category ID: MC

1 View category Searching View all category

3 Edit category Storage Update name, id for category

Division: Manage Product ID: MP

Formula code Form code Note

3 Edit product Storage Update name, id, image, desc, price for product

Name: Image: Description: _ CategoryId: ProductId: _ Price: _ n

Division: Manage Feedback ID: MF

Formula code Form code Note

Division: Make Statistic ID: MS

1 By day/week/month/year

1 User permission - Admin: manage category, add product, update product, delete product, view category/product

- User: view category, view product details, add product to favorite, manage feedback, make order

No Content Criteria Description Note

1 The database is stored online Compatibility

2 Notify user via email when anything changes

MODELING REQUIREMENTS

Identify actor in the use case diagram

Guest The user does not have an account

Customer User already have an account on this application

Admin The administrator of the application, content management

Identify description of each function and actor

• Remove the product from the cart

1 Register Account Register a new account

2 Login Log in to the application

4 Search Product Search by product name

5 View Category View all items in each category

6 View Product Detail Review the items

7 Add Favorite Product Add items to favorite list

8 Manage Cart Add, remove, or adjust your items

12 Make Payment To pay money

15 Manage User’s Information Delete account and update information

18 Chat Live chat with the admin

19 Manage Product Add, update, remove product information

23 Manage Category Add, update, remove category information

27 Manage Feedback Add, update, remove feedback

31 Make Statistics Make reports daily, weekly, monthly, quarterly, yearly

32 Check Customer Order See all the order detail of the customer n

Use-case diagram

Change user's information Delete account

Add product to cart Remov e product from cart Change quantity

Delete feedback ôextendằ ôextendằ ôextendằ ôextendằ ôextendằ ôextendằ ôextendằ ôextendằ ôextendằ ôextendằ ôextendằ ôextendằ ôextendằ ôextendằ ôextendằ ôextendằ

Use-case specification

Table 10: Register Use-case Specification

Brief Description Create new user information, register an account to use the Application

Use-case starts when the Application is in the "Not logged in" state and the user chooses to create a new account

1 The Application displays the registered account screen

2 The user enters registration information: required personal information, login account information

3 The Application checks the validity of the registration information of users

4 The Application determines the valid registration information

5 The Application registers user information, and grants rights to newly registered users

6 The user notification Application has been successfully registered for users

7 The Application displays the login screen

Fails Authentication If the user entered invalid registration information: duplicate, incorrect…, the following occurs:

1 The Application describes the reasons why the User failed authentication

2 The Application presents the User with suggestions for changes necessary to allow the User to pass authentication

3 The Application prompts the User to re-enter the valid information

4 The Basic Flow continues where the User enters new registration information (see step 2 of the Basic Flow)

Cancel Comment 1 The user selects the “Cancel” option

2 Application returns to Login Screen

Login State The Application is in the "Not logged in" state

The Application has been successfully connected to the server

Upon successful login, the user is redirected to the home screen as a logged-in user Conversely, if the login attempt fails due to various reasons, the user is taken back to the login screen.

Table 11: Login Use-case Specification

Brief Description A user of the Application login to the Application

This use-case starts when an Application user is not logged into the Application and goes to the login screen

1 The application prompts the user for a username and password or registers a new account

2 The user enters his/her username and password

3 The Application validates the entered username and password, making sure that the entered username is valid in the Application, and that the required password is entered for the entered username

4 The user is signed in and returned to the home screen as a Logged-in User

User Fails Authentication If the user entered an invalid username and/or password, the following occurs:

1 The Application describes the reasons why the User failed authentication

2 The Application presents the User with suggestions for changes necessary to allow the User to pass authentication

4 The Basic Flow continues where the User enters new information (see step 2 of the Basic Flow)

Cancel Comment 1 Logged in User selects the “Cancel” option

2 Application returns to a login screen

Login State The user has an account on the Application

Success The User is authenticated and the Application displays a home screen based on the user type

Failure The user is unable to log in for one or more reasons

Table 12: Logout Use-case Specification

Brief Description A user logs out of the Application

This use case starts when an Application user is logged into the Application and click on the “logout” button

The system will move the user session and the user is logged out

Login State The user has been login on to the Application

Success The user logs out and acts like a guest

Failure The user is unable to log out for one or more reasons

Table 13: Add New Category Use-case Specification

Brief Description Users add a new category

This use-case starts when the Logged-in User accesses the “Add new category” feature of the

1 The Application displays the Add new category

2 The user enters the category information and submits it

3 The Application sends the information to the database’s Application

Fails Authentication If the user entered invalid information: duplicate, incorrect…, the following occurs:

1 The Application describes the reasons why the User failed

2 The Application presents the User with suggestions for changes necessary to allow the User to pass step

4 The Basic Flow continues where the User enters the new category’s information (see step 2 of the Basic Flow)

2 Application returns to the Home screen

Success The Use-case is successfully executed

Failure The Use-case fails for one or more reasons and it returns the home screen

Table 14: Update Category Use-case Specification

Brief Description Users update Category’s Information

This use-case starts when Logged in User accesses the “Change Category’s Information” feature of the Application

1 The Application displays the Change page

2 The user enters the new category information and submits it

4 The Basic Flow continues where the User enters the new category’s information (see step 2 of the Basic Flow)

Table 15: Delete Category Use-case Specification

Brief Description Users delete Category

This use case starts when the Logged-in User accesses the “Delete Employee” feature of the

1 The Application displays the delete page

2 The user chooses a category to want to delete and submit

3 The Application sends the requirement to the database’s Application

Table 16: Add New Product Use-case Specification

Brief Description Users add new product

This use case starts when Logged in User accesses the “Add new product” feature of the Application

1 The Application displays the Add new product

2 The user enters the product information and submits it

4 The Basic Flow continues where the User enters new product’s information (see step 2 of the Basic Flow)

Cancel Comment 1 User selects the “Cancel” option

2 Application returns to Home screen

Success The Use case is successfully executed

Failure The Use case fails for one or more reasons and it returns the home screen

Table 17: Update Product Use-case Specification

Brief Description Users use to change Product’s Information

This use case starts when Logged in User accesses the “Change Product’s Information” feature of the Application

1 The Application displays the Change screen

2 The user enters the new product information and submits it

4 The Basic Flow continues where the User enters new product’s information (see step 2 of the Basic Flow)

Table 18: Delete Product Use-case Specification

Brief Description Users delete Product

This use case starts when Logged in User accesses the “Delete Product” feature of the Application

1 The Application displays the delete screen

2 The user chooses a product wants to delete and submit

Table 19: View Category Use-case Specification

Brief Description Users see the product by category

This use case starts when Logged in User clicks on each name’s category

1 The User clicks on the name of the category

2 The Application displays all the items of category

Fails to View If the Logged in User cannot go to the item page, the following occurs:

2 The Application prompts the User to click again

3 The Basic Flow continues where the User clicks another item (see step 2 of the Basic Flow)

Success The use case is successfully executed

Failure The use case fails for one or more reasons and it returns to the home screen Extension Points

Table 20: View Product Detail Use-case Specification

Brief Description Users see the detail of the product

This use case starts when Logged in User clicks on each name’s item

1 The User clicks on the name of the item

2 The Application displays detail of the item

Fails to View If the Logged in User cannot go to the item page, the following occurs:

3 The Basic Flow continues where the User clicks another item (see step 2 of the Basic Flow)

Failure The use case fails for one or more reasons and it returns to the home screen Extension Points

Table 21: Add Favorite Product Use-case Specification

Brief Description Users add products to the favorite list

This use case starts when Logged in User accesses the “Add product to favorite” feature of the

1 Users choose the product to see the details

2 The Application displays the “Add product to favorite” button

3 The user touches the button

3 The Application prompts the User to re-choose the button

4 The Basic Flow continues where the User chooses the button (see step 2 of the Basic Flow)

Table 22: Search Product Information Use-case Specification

Brief Description A user searches product information

This use case starts when a User, Logged in User accesses the “Search” feature of the Application

1 The Application displays the search submission box

2 The user enters search criteria and submits

3 The Application sends the search criteria to the database’s Application and receives searching results

Cancel Comment 1 Guest, Logged in User selects the “Cancel” option

Success The search is successfully executed

Failure The search fails for one or more reasons

Table 23: Add New Feedback Use-case Specification

Brief Description Users to feedback the product

This use case starts when Logged in User sees the product detail feature of the Application

1 The Application displays the detail of the product

2 User touch to the feedback feature

3 The user enters the comment and rate for this product

4 The Basic Flow continues where the User enters a new comment (see step 2 of the Basic Flow)

Table 24: Update Feedback Use-case Specification

Brief Description Users use to update feedback

This use case starts when Logged in User accesses the “Update feedback” feature of the Application

1 The Application displays the Update screen

2 The user enters the new feedback information and submits it

Fails Authentication 1 If the user entered invalid information: duplicate, incorrect…, the following occurs:

5 The Basic Flow continues where the User enters new feedback information (see step 2 of the Basic Flow)

Table 25: Delete Feedback Use-case Specification

Brief Description Users delete feedback

This use case starts when Logged in User accesses the “Delete Feedback” feature of the Application

2 Users choose feedback to want to delete and submit

Table 26: Chat Use-case Specification

Brief Description The user uses to live chat with the admin

This use case starts when the system is in the "Logged in" state and the user chooses to “Chat” feature

1 The Application displays the chat screen

2 Users send messages and emotional icons to chat boxes

3 The Application sends the message to Admin

2 Website returns to Home screen

Success Chatting is successfully executed

Failure Chatting fails for one or more reasons

Table 27:Add Product To Cart Use-case Specification

Brief Description User choose items to want to buy

Actor(s) Logged in User (Customer)

This use case starts when Logged in User adds the new product to the cart

1 The Application displays the list of products

2 Logged in User click the “add to cart” button

4 Verify the information is valid

5 The system adds the items to the cart

Fails Added If the Logged in User cannot add the items, the following occurs:

1 The Application describes the reasons why the User failed to add

2 The Application presents the User with suggestions for changes necessary to allow the User to pass

3 The Application prompts the User to re-add the items

4 The Basic Flow continues where the User adds new items (see step

2 Website returns to Home screen

Login State Users have to login into the screen

Success The order is successfully executed

Failure The order fails for one or more reasons and it returns to the home screen Extension Points

Table 28: Change Quantity Use-case Specification

Brief Description User adjust the number of items

This use case starts when Logged in User goes to the Cart screen

1 Logged in User click “My Cart” button

2 The Application displays the list of items

3 Users click the “increase” or “decrease” button of each item

4 The item will update from their cart

Fails to Change If the Logged in User cannot click the button, the following occurs:

1 The Application describes the reasons why the User failed to adjust

3 The Application prompts the User to do it again

4 The Basic Flow continues where the User changes the quantity of the items (see step 2 of the Basic Flow)

Login State Users have to login into the Application and added some items to their cart

Success The items are successfully changed

Failure Change fails for one or more reasons and it returns to the Homescreen Extension Points

Table 29: Remove Product From Cart

Brief Description User remove their items

This use case starts when Logged in User goes to the Cart screen

1 Logged in User click “My Cart” button

2 The Application displays the list of items

3 Users click the “remove” button of each item

4 The item will remove from their cart

Fails to Remove If the Logged in User cannot remove the items, the following occurs:

1 The Application describes the reasons why the User failed to remove

3 The Application prompts the User to do it again

4 The Basic Flow continues where the User removes an item (see step 2 of the Basic Flow)

Login State Users have to login into the Application and added some items to their cart

Success The items are successfully removed

Failure Remove fail for one or more reasons and it returns to the Homescreen Extension Points

Table 30: Cash On Delivery Use-case Specification

Brief Description Users use methods to pay money

This use case starts when Logged in User accesses the “Payment” feature of the Application

1 The Website displays the Bill page

2 User checks and completes the bill

3 User print bill by the printer

Invalid Infomation If the Logged-in User doesn’t complete bill information, the following occurs:

2 The Application presents the User with suggestions for changes necessary to allow the User to pass invalid information

4 The Basic Flow continues where the User fills in new bill information (see step 2 of the Basic Flow)

Success The bill is successfully printed

Failure The bill fails for one or more reasons and it returns against to Payment screen

Table 31: Make Online Payment Use-case Specification

Brief Description Users use methods to pay money

This use case starts when Logged in User accesses the “Payment” feature of the Application

1 The Application displays the Bill page

2 User checks and completes the bill

3 User print bill by the printer

Invalid Infomation If the Logged-in User doesn’t complete bill information, the following occurs:

4 The Basic Flow continues where the User fills in new bill information (see step 2 of the Basic Flow)

Users have an account on the Application

Success The bill is successfully printed

Failure The bill fails for one or more reasons and it returns against to Payment screen

Table 32: Delete Account Use-case Specification

Brief Description Users delete their accounts

Actor(s) Logged in User (Customer, Admin)

This use case starts when Logged in User accesses the “Delete Account” feature of the Application

2 The user chooses the button “Delete” Account

4 The Application sends the requirement to the database

Login State The user has an account and login into the Application

Failure The Use case fails for one or more reasons and it returns the

Table 33: Update User's Information Use-case Specification

Brief Description User edit User’s Information

Actor(s) Logged in User (Customer, Admin)

This use case starts when Logged in User accesses the “Edit User’s Information” feature of the

1 The Application displays the Update screen

2 The user enters the new user information and submits it

3 The Application sends the information to the database

4 The Basic Flow continues where the User enters a new user’s information (see step 2 of the Basic Flow)

Login State The user has an account and login into the Application

Table 34: Make Statistic Use-case Specification

Brief Description Users make statistic

Actor(s) Logged in User (Admin)

This use case starts when Logged in User accesses the “Make Statistic” feature of the Application

1 The Application displays the Statistic screen

2 The user chooses the time want to make statistics (weekly, monthly, quarterly) and submit

3 The Application sends the criteria to the database and receives results

Invalid Infomation If the Logged-in User doesn’t complete the information screen, the following occurs:

4 The Basic Flow continues where the User make new statistic (see step 2 of the Basic Flow)

Login State Users have an account on the Application

Success The Statistic is successfully executed

Failure The Statistic fails for one or more reasons and it refreshes the screen against

Table 35: Check Customer Order Use-case Specification

Brief Description Users see all the order information of customers

Actor(s) Logged in User (Admin)

This use case starts when Logged in User goes to the Customer Order screen

1 The User click on the “Customer Order” button from navigation bar

2 The Application displays the list of receipt

3 User click on each receipt to see more detail

Fails to View If the Logged in User cannot go to the Customer Order screen, the following occurs:

3 The Basic Flow continues where the User click again (see step 2 of the Basic Flow)

Login State User have an account on the Application

Failure The use case fails for one or more reasons and it returns to the home screen

Sequence diagram

MainForm Database alt Register Results

Check account exists (Username, Password)

Cash On Delivery Sequence Diagram

User LoginScreen UserManagement Home Screen

Check account exists (Username, Password)

4.14 Cash On Delivery Sequence Diagram

Figure 39: Login Sequence Diagram n sd Logout

3.5.3 Logout Sequence Diagram 4.14 Cash On Delivery Sequence Diagram

Page 95 sd Add New Category

Category alt AddNew Category Result

Added new category to database()

3.5.4 Add New Category Sequence Diagram

Figure 41: Add New Category Sequence Diagram n sd Update Category

Check corrected information() Verify result()

Figure 42: Update Category Sequence Diagram n

Category Database alt Delete category

Figure 43: Delete Category Sequence Diagram n sd Add New Product

Admin alt AddNew Product Result

Check information( id, the name of product, )

Add new product information to database() Success Add Product

3.5.7 Add New Product Sequence Diagram

Figure 44: Add New Product Sequence Diagram n

Product Information Screen alt Update product information

Display list product() Choose product()

Update Product Information() Verify results()

Update product information() Success Update Message()

Figure 45: Update Product Sequence Diagram n sd Delete Product

Product Database alt Delete product

Delete Product Information() Display list product()

Figure 46: Delete Product Sequence Diagram n

Display item in each category list()

Figure 47: View Category Sequence Diagram n sd View Product Detail

Verify results() Display prodct detail()

3.5.11 View Product Detail Sequence Diagram

Figure 48: View Product Detail Sequence Diagram n

Page 103 sd Add product to fav orite list

Actor Product Screen Product management

Favorite Product loop Add product to fav orite alt Add product to fav orite

Add product to favorite list()

Figure 49: Add Favorite Product Sequence Diagram n sd Search Product Information

Enter information in the search field()

Verify results() Display list product()

Figure 50: Search Product Information Sequence Diagram n

Page 105 sd Add New Feedback

Feedback Database alt Add New Feeback Result

Enter comment and rate for product()

Add new feedback to database()

3.5.14 Add New Feedback Sequence Diagram

Figure 51: Add New Feedback Sequence Diagram n sd Update Feedback

Management Feedback Screen alt Update Feedback Result

Update feedback into database() Success Update Message()

Figure 52: Update Feedback Sequence Diagram n

Feedback Database alt Delete Feedback Result

Figure 53: Delete Feedback Sequence Diagram n sd Chat

Actor Chat screen Chat management Actor2 Database alt Chat

Page 109 sd Add Product To Cart

Actor Product Screen Cart Management Cart loop Add product to cart alt Add product to cart

3.5.18 Add Product To Cart Sequence

Figure 55: Add Product To Cart Sequence Diagram n sd Change Quantity (Cart)

Actor Cart Screen Cart Management Cart alt Update cart

Display list product() Choose product()

Verify results() Edit product quality()

Figure 56: Change Quantity Sequence Diagram n

Page 111 sd Remov e Product From Cart

Actor Cart Screen Cart Management Cart alt Delete Product From Cart

Select cart view() Display list product()

Choose product want to delete()

3.5.20 Remove Product From Cart Sequence

Figure 57: Remove Product From Cart Sequence Diagram n sd Cash On Deliv ery

Actor Cart form Bill Management Bill Database alt Cash on deliv ery

Display list product() Choose COD method()

Check and complete the bill()

Add new bill to database()

3.5.21 Cash On Delivery Sequence Diagram

Figure 58: Cash On Delivery Sequence Diagram n

Page 113 sd Make Online Payment

Actor Cart Screen Bill Management Bill Bank Database alt Make Online Payment Result

Select cart view() Display list product()

Check and complete the bill()

Check information from the bank()

Check bank transactions() Verify results()

Add new bill to database()

Figure 59: Make Online Payment Sequence Diagram n sd Delete Account

Actor User Screen User Management User Database alt Delete user

Figure 60: Delete Account Sequence Diagram n

Page 115 sd Update User Information

User Information Screen alt Update User Information

Update User Information() Verify results()

Update user information() Success Update Message()

Figure 61: Update User’s Information Sequence Diagram n sd Make Statistics

Actor Statistics Screen Statistics management

Choose time (weekly, monthly, quarterly)

Display revenue and the list of bill()

Figure 62: Make Statistic Sequence Diagram n

Diagram sd Check Customer Order

Actor Order Screen Bill management Bill

Click customer order() Displays list of receipt()

Figure 63: Check Customer Order Sequence Diagram n

SYSTEM DESIGN

Database design

5.1.2.1 User (id, name, roles, email, phoneNumber, isInactive, avatar, password)

Ord Attribute Type Domain Meaning Note

1 id String Primary Key Id of User

2 name String Name of user

3 roles String Role of user

4 email String Email of user

5 phoneNumber String Phone of user

6 isInactive boolean Status of the user account

7 avatar String Profile picture of user

8 password String Password of user

5.1.2.2 Product (id, name, price, imageUrls, description, inStockQty, isInactive, ownerId, categoryId)

1 id String Primary Key Id of product

2 name String Name of product

3 price Number Price of product

4 imageUrls String URLs image of the product

5 description String Description of recipe

6 inStockQty Number Number of product

7 isInactive Boolean Status of product n

8 ownerId String Foreign Key Id of user

9 categoryId String Foreign Key Id of category

5.1.2.3 Category (id, name, description, isInactive)

1 id String Primary Key Id of category

2 name String Name of category

3 description String Description of category

4 isInactive Boolean Status of category

5.1.2.4 Feedback (id, rating, comment, photos, userId, productId)

1 id String Primary Key Id of comment

2 rating Number Rate for product

3 comment String Comment of product

4 photos String Photo of product

5 userId String Foreign Key Id of user

6 productId String Foreign Key Id of product n

5.1.2.5 Order (id, status, products, buyerId)

1 id String Primary Key Id of order

2 status String Status of order

4 buyerId String Foreign Key Id of buyer n

5.1.4 Class diagram class Class Model

+ Category: string + Description: string + Price: int + ProductID: int + Quantity: int

+ Birthday: date + Email: string + FirstName: string + LastName: string + Password: string + PhoneNumber: string + UserID: int + UserName: string

+ addNewProduct() : void + deleteProduct() : void + getProductDetail() : void + searchProductInfor() : void + updateProductInfor() : void

+ changePassword() : void + changeUserInfor() : void + deleteUser() : void + getInformation() : void + LogIn() : boolean + Register() : void

+ CartID: int + Dateadded: date + ProductID: int + Quantity: int

+ addProductToCart() : void + changeQuantity() : void + Checkout() : void + removeProductFromCart() : void

+ BillID: int + BillTime: date + Pay: string + SumCost: int

+ getContent() : string + getID() : void + getName() : void

Interface & processing design

➢ Description: Display logo of the application

Click “Screen 2” button Go to intro screen 2 Click “Screen 3” button Go to intro screen 3 Click “Next ” button Go to intro screen 2

Figure 69: Walk Through Screen 1 UI n

Click “Screen 1” button Go to intro screen 1 Click “Screen 3” button Go to intro screen 3 Click “Next ” button Go to intro screen 3

Click “Screen 1” button Go to intro screen 1 Click “Screen 2” button Go to intro screen 2 Click “Finish ” button Go to home screen

➢ Description: Display the core features of the application

4 Button Add product to favorite list

To navigate the site, click the "Navigation" button to access the navigation panel For layout options, select the "Layout" button to open the layout popup To view product details, click on each "Product" image To add a product to your favorites, simply click the "Heart" button For category browsing, click on each "Category" image or the "Banner" image to reach the category screen.

➢ Description: Allow see product list by another layout

To navigate the interface, click the "Navigation" button to access the navigation panel Then, select the "Layout" button to open the layout popup You can choose each "Layout" button to display products according to the selected layout type If you wish to exit, simply click the "Cancel" button to return to the home screen.

➢ Description: The main bar of the application

To navigate the app, click the "Home" button to access the home screen, the "Category" button to view categories, the "Search" icon to enter the search screen, the "Cart" button to check your cart, and the "User " button to access your user profile.

Figure 74: Tab Bar Screen UI n

➢ Description: The main navigation panel of the application

3 Button Choose contact us screen

4 Button Choose about us screen

6 listView Show category & subcategory list

9 Button Show all product in subcategory

To navigate the application, click the “Shop” button to access the home screen, or select the “News” button for the latest updates For inquiries, use the “Contact Us” button to reach the contact screen, and learn more about the platform by clicking the “About Us” button To log in, simply click the “Login” button Expand the category list by clicking each “Category” option, and use the “Collapse” button to minimize it For a comprehensive view of products, click the “Show All” button, or explore specific items by selecting each “Subcategory” button to access the product list screen.

➢ Description: Display all fields need to sign up new account

1 textInput Enter the first name

2 textInput Enter the last name

3 textInput Enter the user name

Register Screen Click “Sign Up ” button Go to home sceen

➢ Description: Display all login method

1 Button Go to home screen

2 textInput Enter use name or email

Click “Login” button Go to home screen Click “Facebook login” button Go to facebook authentication Click “SMS login” button Go to sms screen

Click “Sign up ” button Go to sign up screen

Click “Back” button Go to home screen

➢ Description: Allow user login by sms method

1 Button Go to login screen

2 textInput Enter use name or email

3 Button Go to sms code provide screen

Click “Back” button Go to login screen

Click “Get code” button Go to sms code provide screen

Figure 78: SMS Login Screen UI n

➢ Description: Allow user enter a code receive from sms login screen

Click “Apply code ” button Go to home sceen

Figure 79: SMS Code Proivde Screen UI n

➢ Description: Display all categories of the applicaiton

1 Button Go to navigation screen

Click “Navigation” button Go to navigation screen

Click each“Category ” image Go to product list screen

➢ Description: Display product list of the application

4 Butotn Choose another layout display

6 Button Add to favorite list

Click “Sort” button Go to sort screen Click “Layout” button Display product list by another layout Click each“Product” button Go to product details screen

Add product to favorite list

Click “Filter” button Go to search filter screen 2 Click “Back” button Go to home screen

Figure 81: Product List Screen UI n

➢ Description: Display product details of the application

1 Button Go back to product list screen

2 Button Choose wish list screen

4 Button Choose color variant of the product

5 dropdownList Show size variant of the product

10 Button Add to wish list

11 Button Add to cart list

12 Button Add to cart list & go to cart screen

Figure 82: Product Detail Screen UI n

Click “Back” button Go to product list screen

To navigate the product page, click the "Heart" button to access your wish list, or the "Cart" button to view your cart Select your desired color by clicking on the corresponding "Color" buttons, and choose the appropriate size from the "Size" dropdown list For product details, click the "Description" tab to read about the item, and the "Features" tab to learn about its specifications To see customer feedback, click the "Review" button, and if you wish to share the product, use the "Share" button Additionally, you can add items to your wish list or cart by clicking the respective buttons located below.

Click “Buy Now” button Add to cart & go to cart screen n

➢ Description: Allow user search product of the application

Search Screen Click “Filter ” button Go to filter sceen

➢ Description: Allow user search by filter

1 Button Go to search screen

To navigate the product list screen, click each "Tag" button Adjust the "Price" slider to set your desired price range Then, click the "Filter" button to apply your selections and view the results If you wish to reset your filters, simply click the "Clear filter" button to remove all applied filters.

Click each“Category” button Go product list screen Click “Back” button Go to filter screen

Figure 84: Search Filter Screen UI n

➢ Description: Allow user search by filter

Click each“subcategory” checkbox Choose one or more subcategory

Adjust “Price” slider Choose the product price Click “Clear filter ” button Clear all filter

Click “Expand/Coolapse subcategory” button

Click “Expand/Coolapse tag” button

Click “Select ” button Apply filter & show product list scren

Figure 85: Search Filter Screen 2 UI n

➢ Description: Allow user sort product

Click each “Sort” button Show product list

Click “Cancel” button Go to product list screen

➢ Description: Display the wish list of the application

Wish List Screen Click “Shop Now” button Go to home sceen

Figure 87: Wish List Screen UI n

➢ Description: Display the favorite list

2 flatList Show the favorite list

3 Button Remove all favorite list

4 Button Add all favorite list to cart

Click each“Product” list Go to product detail screen

To manage your favorites efficiently, click the "Clean All" button to remove all items from your favorites list and navigate to the wish list screen To streamline your shopping experience, use the "Add All to Cart" button to quickly add all products to your cart For easy access to features, click the "Navigation" button to display the navigation panel.

Figure 88: Wish List Screen 2 UI n

➢ Description: Display the shopping cart of the application

Cart Screen Click “Shop Now” button Go to home sceen

➢ Description: Display all product after user added to cart

4 Button Remove product from cart

9 Button Go to delivery step

To navigate the ordering process, click the "Delivery" button to access the delivery screen, the "Payment" button to proceed to the payment screen, and the "Order" button to view your order screen To remove a product from your cart, simply click the "Remove" button, and to adjust the quantity of an item, use the "Picker" button to increase or decrease the amount as needed.

Click “Apply” button Apply code

Click “Back” button Go to home screen

Click “Next step” button Go to delivery screen

➢ Description: Display all field user need to enter for delivery step

15 Button Go to cart step

16 Button Go to payment step

Click “Cart” button Go to cart screen Click “Payment” button Go to payment screen Click “Order” button Go to order screen Click “Country” picker Choose country

Click “Back” button Go to cart screen Click “Next step” button Go to payment screen

➢ Description: Display payment method for user

5 Button Go to cart step

6 Button Go to order step

Click “Cart” button Go to cart screen Click “Delivery” button Go to delivery screen Click “Order” button Go to order screen Click “Payment method” Choose method

Click “Back” button Go to delivery screen Click “Next step” button Go to order screen

➢ Description: Display confirm message for user

4 Button Choose view my order

To navigate through the online shopping process, simply click the "Cart" button to access your cart screen From there, you can proceed by clicking the "Delivery" button to view the delivery options Next, select the "Payment" button to move to the payment screen for completing your purchase If you wish to review your previous purchases, click on the "View my orders" button to access the my orders screen.

➢ Description: Display order list of user

Click “Show detail ” button Go to order details screen

Figure 94: My Order Screen UI n

➢ Description: Display order detail for user

1 Button Back to my order screen

Click “Back” button Go to my order screen

Click “Refund ” button Refund the order Click “Cancel” button Cancel the order

Figure 95: Order Detail Screen UI n

➢ Description: The the user setting of the application

3 Button Choose wish list screen

6 switchButton Turn on/off notification

7 switchButton Turn on/off dark theme

8 Button Choose contact us screen

10 Button Choose term & condition screen

11 Button Choose about us screen

Figure 96: User Setting Screen UI n

To navigate the interface, click the "Navigation" button to access the navigation screen For login purposes, select the "Login" button to reach the login screen To view your saved items, click the "Wish list" button, and for currency options, select the "Currency" button To change the language, click the "Language" button, and to manage notifications, use the "Push notification" switch button to turn them on or off For a darker viewing experience, toggle the "Dark theme" switch button To get in touch, click the "Contact us" button, and for terms and conditions, select the "Policy" button to access the policy screen.

Click “Term & Condition” button Go to term and condition screen Click “About us” button Go to about us screen n

5.2.2.30 User setting after login screen

➢ Description: Display the user setting after login into the application

User Setting After Login Screen

To navigate the app, click the "Logout" button to exit, or select "My Orders" to view your order history For address management, tap the "Address" button, and to access your orders, use the "My Order" tab in the tab bar Additionally, click the "Navigation" button to display the navigation panel for further options.

Figure 97: User Setting After Login Screen UI n

➢ Description: Display address detail of user

1 Button Back to user setting screen

2 Button Choose add new address

Click “Back” button Go to user setting screen

Click “Remove ” button Remove address

Click “Add” button Go to add adress screen

➢ Description: Display all field user need to enter for add new address

Click “Country” picker Choose country

Click “Add to address ” button Add new address & go to address screen

Figure 99: Add Address Screen UI n

➢ Description: Allow user change currency to display

Click “Cancel” button Go to user setting screen

Click each“Currency” button Change currency

➢ Description: Allow user change language

3 Button Appy the new language

Click “Switch language ” button Apply the new language & restart the application Click each“Language” button Choose language

➢ Description: Display the google contact form for user

Figure 102: Contact Us Screen UI n

➢ Description: Display the policy information of the application

➢ Description: Display the term & condition information of the application

Figure 104: Term & Condition Screen UI n

➢ Description: Display the author information of the application

Figure 105: About Us Screen UI n

IMPLEMENTATION & TESTING

Implementation

• Visual Studio Code for coding

• MySQL Workbench to manage the database

• Bootstrap for CSS framework and templates

• Enterprise Architect for drawing diagram

• Adobe XD, Photoshop, Illustrator for designing the user interface

• ReactJS, React Native is used for the entire project

• JavaScript is the main programming language.

Installation

Open the command prompt and run the following command npm run setup

• Or run yarn, this is similar to Yarn but could be faster

• Install Yarn from https://yarnpkg.com yarn setup

• Open your simulator by using Genymotion or Android Studio

• To check the Android device is ready or not, run: adb devices react-native link react-native run-android n

Testing method and techniques

White box testing is a crucial verification method employed by software engineers to ensure that their code functions correctly This testing technique encompasses two primary activities: control flow testing, which evaluates the execution paths within the code, and data flow testing, which analyzes how data moves through the program.

Control flow testing is a white box testing technique that focuses on analyzing the execution order of a program's statements or instructions through its control structure By utilizing the program's control structure, testers can create effective test cases This method involves selecting specific sections of a larger program to establish the testing path, ensuring thorough evaluation of the program's functionality.

It is mostly used in unit testing Test cases are represented by the control graph of the program

Data flow testing is a strategy that involves selecting paths through a program's control flow to analyze the sequence of events concerning the status of variables or data objects This testing method emphasizes the moments when variables are assigned values and the instances when those values are utilized.

6.3.1.1 Step-by-step white box testing:

Step 1: Identify the feature, component, program to be tested

Step 2: Plot all possible paths in a flowgraph

Step 3: Identify all possible paths from the flowgraph

Step 4: Write Test Cases to cover every single path on the flowgraph

6.3.1.2 McCabe’s basis path testing steps:

Step 1: Draw a control flow graph n

Step 3: Choose a “basis set” of paths

Step 4: Generate test cases to exercise each path

Black box testing is a software testing technique that evaluates the functionality of an application without any knowledge of its internal workings Testers treat the software as a "black box," focusing solely on input and output, without accessing or understanding the internal code or structure.

• It is also known as the data direction test or in/out direction test

• The tester should build groups of input values that will fulfill all of the functional requirements of the program

• The testers' approach to the system is to not use any knowledge of the programming structure inside the system, see the system as a complete structure, can not interfere inside

6.3.2.1 Black box in function test and system test

The black box testing method derives its name from the perception of software programs as opaque entities, where the internal workings remain unseen to testers This approach focuses on identifying errors related to incorrect or missing functionalities within the software.

• Error in a data structure or external database access

• Error behavior or performance Initialization and termination of errors n

Using White Box Testing

The graph above has 1 binary node so the Cyclomatic complexity

2 independent linear execution paths are:

6.4.1.2 Design test cases for each path

Test case for the 1 st independent linear path:

Test case for the 2 nd independent linear path: const {discountType} = “percent"; const totalPrice = 60; const shippingPrice = 12; const existCoupon = 10; const discount = 10 * 60; totalPrice = 60 + 12 – 60; return 12;

Expected result: return 12 const {discountType} = “”; const totalPrice = 60; const shippingPrice = 12; const existCoupon = 10; const discount = 10; totalPrice = 60 + 12 – 10; return 62;

6.4.1.3 Perform lifecycle testing for each variable in the unit

The graph above has 2 binary nodes so the Cyclomatic complexity

Test case for the 2 nd independent linear path:

Test case for the 3 rd independent linear path: cartItems = [{variation: {color: vàng, price: 30}, product: áo, quality: 1}] price = 0 product = {color: vàng, price: 30} productPrice = 30 price = 30*1 = 30 return 30

Expected result: return 30 cartItems = [{product: balo, quality: 2}] price = 0 product = {product: balo} productPrice = 40 price = 40*2 = 80 return 80

Expected result: return 80 cartItems = {} currency = “USD” price = 0 return 0 Expected result: return 0 n

The graph above has 1 binary node so the Cyclomatic complexity

Test case for the 2 nd independent linear path: quantity stateQuantity = 2 limitAddToCart = 10 newQuantity = stateQuantity = 2 quantity = newQuantity =2 Expected result: quantity changed quantity stateQuantity = 10 limitAddToCart = 2 Expected result: nothing happened n

Bug Report

Name Admin system Header – Unable to click the Message button

Reporter Tran Thuan Tuong Vy

Summary Admin click message button on a header in Admin System got

URL https://hcmutee.me/wp-admin/edit-comments.php

Test message button in the header in Admin system

> Navigate to https://hcmutee.me/admin/wp-admin

> Click message button in Header

The application displays a chat box n

Name Admin system Header – Unable to click New button

Reporter Tran Thuan Tuong Vy

Summary Admin click message button on a header in Admin System got

URL https://hcmutee.me/wp-admin/post-new.php

Test login function with the wrong password

> Navigate to https://hcmutee.me/admin/wp-admin

> Click New button in Header

The application must display a new post Page

Name Login without email and password

Summary We didn’t enter email and password But the application didn’t show an error message

Test login function without email and password

The application must display validation error messages: "Invalid Email" and "Invalid Password"

The application did not show validation error messages

Name Login with special characters

Summary We enter emails and passwords with special characters But the application has not shown any error message

Test login function with email having special characters

The application must display validation error messages: "Invalid Email"

Name Login with operator characters

Summary We enter email and password with operator characters But the application has not shown any error message

Test login function with email having operator characters

The application must display validation error messages: "Invalid Email"

CONCLUSION

Achievement

Through the process of implementing the topic, the student group has accumulated extremely useful knowledge and experience:

• Know the software construction and design process

• Practicing interviewing and teamwork skills

• Train programming skills on ReactJS, React Native, especially use Docker and apply the MVC model

The program is built by the team to ensure all the basic functions that a formula viewer application puts out:

• Log in to the application

Advantages

The construction team program has the following advantages:

• The functions managed by the screen should help users have an easy operation n

• The application has many basic functions, fully meets the requirements of the user

• The function buttons are easy to touch and the beautiful UI attracts users

• The application supports advanced features: dark mode, change language, change currency

• The application can run cross-platform IOS and Android.

Disadvantages

• The program requires an internet connection to run

• The program uses lots of images so sometimes the form loads a bit slow

• The program is limited to delete, edit functions.

Future Development

Because the first time building applications on mobile phones and programming experience is still weak, the program cannot avoid mistakes

In the future, the team will try to perfect the program and update more features

• The next version of the application will run without connecting to the internet

• Support online payment (Paypal, Visa/Master Card)

• Support mobile version for management

• Improve User Interface and User Experience n

[1] “React (JavaScript library) - Wikipedia”, En.wikipedia.org, 2021 Available: https://en.wikipedia.org/wiki/React_(JavaScript_library) [Accessed: 04- Jul- 2021]

[2] “React Native – Wikipedia”, En.wikipedia.org, 2021 Available: https://en.wikipedia.org/wiki/React_Native [Accessed: 04- Jul- 2021]

[3] “Glassdoor Job Search”, Glassdoor, 2021 Available: https://www.glassdoor.com

[4] “Most Popular and Influential Programming Languages of 2018 | TechMeetups”,

Techmeetups.com, 2021 Available: https://techmeetups.com/most-popular-and-influential- programming-languages-of-2018/ [Accessed: 07- Jul- 2021]

[5] “Apple Vs Android - A comparative study 2017”, Medium, 2021 Available: https://android.jlelse.eu/apple-vs-android-a-comparative-study-2017- c5799a0a1683

[6] “Narayan A React Native vs Native iOS/Android”, 15th November 2017

Available: https://www.coursereport.com/blog/so-you-want-to-build-a-mobile-app-react- native-vs-native-mobile [Accessed: 07- Jul- 2021]

[7] “Bristowe J What is a hybrid mobile app”, 25th March 2015 Available: https://developer.telerik.com/featured/what-is-a-hybrid-mobile-app [Accessed: 07- Jul- 2021].

[8] “Flux, application architecture for building user interfaces” Available: https://facebook.github.io/flux/docs/in-depth-overview [Accessed: 07- Jul- 2021] n

[9] A Géron, “Chapter 14 Deep Computer Vision Using Convolutional Neural Networks,” in Hands-on machine learning with SCIKIT-LEARN, Keras, and TENSORFLOW:

Concepts, tools, and techniques to build intelligent systems, Beijing: O'Reilly, 2020.

[10] A Géron, “Chapter 15 Processing Sequences Using RNNs and CNNs,” in Hands-on machine learning with SCIKIT-LEARN, Keras, and TENSORFLOW: Concepts, tools, and techniques to build intelligent systems, Beijing: O'Reilly, 2020

In "Natural Language Processing with RNNs and Attention," A Géron explores the integration of recurrent neural networks (RNNs) and attention mechanisms in natural language processing (NLP) This chapter, part of the book "Hands-on Machine Learning with Scikit-Learn, Keras, and TensorFlow," offers essential concepts, tools, and techniques for developing intelligent systems Published by O'Reilly in 2020, it serves as a valuable resource for understanding advanced NLP methodologies.

Tiêu đề	Building An E-Commerce System Using ReactJS And React Native
Tác giả	Tran Thanh Hien, Mai Ngoc Anh Duy, Tran Thuan Tuong Vy
Người hướng dẫn	MSc Nguyen Tran Thi Van
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Software Engineering
Thể loại	Graduation Project
Năm xuất bản	2021
Thành phố	Ho Chi Minh City

Định dạng
Số trang	194
Dung lượng	9,18 MB