(Đồ án hcmute) building a smart website for selling clothes

INTRODUCTION

Why need to build a smart website?

The continuous advancement of technology is enhancing the quality of human life daily Alongside this development, customer care services on sales websites have become increasingly vital, requiring not just good service but also speed and convenience Therefore, creating a smart website is essential to meet these evolving consumer demands.

Build a smart website for selling clothes and integrate many new features to serve the request of customer:

- Improve UI/UX (User Interface/User Experience) website

- Research about machine learning, deep learning, and apply them into the website - add chatbot and buy product feature through voice recognition

- Add utility features for users - sort and search features

- Add graph statistics for admin

About machine learning & deep learning:

- Introducing machine learning, basic problems in machine learning and approaches

- Introduce deep learning & architecture models used in this application Implement chatbot to the system:

- Set environment variable called Google application credentials to private key

- Export Google application credentials key

Implement features of buying product through voice recognition into the system:

- Logged in to ALAN Studio

- Create voice assistant and chose type of project (empty)

- Create a command script for ALAN response

- Embedded ALAN AI to the website - code to handle event.

THEORETICAL BASIC

MERN Stack

The MERN Stack is a robust technology combination that enables the development of scalable online applications, encompassing front-end, back-end, and database elements As a full-stack JavaScript framework, it facilitates the creation of dynamic web pages and applications, making it the preferred choice for startups.

The set of incredible technologies includes MongoDB, ExpressJS, ReactJS and NodeJS

MongoDB is a cross-platform document database that stores data in flexible documents using a JSON-based query language Its documents can vary in content, size, and number of fields, allowing for dynamic data structures that can evolve over time Known for its scalability and versatility, MongoDB is a popular choice for modern applications.

- MongoDB may be shared over many servers The information is duplicated to stay the system up and keep its running condition just in case of hardware failure

- MongoDB setups are extremely scalable

- It allows for Master-Slave replication MongoDB uses native applications to keep up multiple copies of knowledge

- It supports MapReduce and versatile aggregation tools

- MongoDB JavaScript works well because the database uses the language rather than procedures

- MongoDB scales dynamically in data volume and throughput The solution allows for enough flexibility across several data centers while keeping high consistency

- The dynamic data model with changeable schema, as well as robust GUI and command line tools, allows developers to quickly construct and modify applications

- MongoDB stores data in JSON-like documents, making data persistence and combining simple

MongoDB significantly reduces costs by operating on commodity hardware, providing flexible pay-as-you-go pricing options alongside yearly subscriptions Additionally, it offers round-the-clock global support, ensuring assistance is available 24/7.

MongoDB differs from relational databases in that it does not natively support join operations While it is possible to implement join-like functionality through manual coding, this approach can result in slower execution times and negatively affect overall performance.

- MongoDB does not enable transactions in order to gain speed and scalability This makes MongoDB incredibly easy to expand horizontally, utilizing a lot of cheap hardware to balance the load

MongoDB utilizes key names for each value pair, which can lead to data redundancy due to its limited join functionality Consequently, this results in unnecessary memory usage.

- It makes indexing papers a breeze

- Ensure scalability by splitting huge amounts of data among several computers

- Schema-less as any form of data contained in a distinct document

- Setting up a MongoDB environment is straightforward

- It has a flexible document-model that is easy to build

ExpressJS is a powerful backend web application framework for Node.js that simplifies server code development It eliminates the need for developers to replicate code previously executed with the Node.js HTTP module, streamlining the coding process.

The Express framework is for developing robust and scalable online applications and APIs It is well-known for its high speed and easy architecture

- It is asynchronous and Single-threaded

- It is quick and scalable

- It aids in code reuse by utilizing the built-in router

ReactJS is a powerful library for building user interfaces, created by Facebook developers It facilitates the development of HTML views by using a comprehensive programming language instead of traditional templates for automating repetitive HTML elements This approach allows users to execute the same code seamlessly on both the server and the browser.

The latest version of ReactJS framework is ReactJS 17.0.2 It involves new features, bug fixes, and new deprecation warnings to assist steel onself for a future major release

- A virtual DOM is a lightweight replica of the original DOM In fact it contains all the attributes of the DOM

- One-way databinding is supported, which implies that data travels in just one direction throughout the program This gives us more power over it

ReactJS is a component-based framework that simplifies data transfer within applications by utilizing JavaScript for component logic instead of templates, allowing for efficient state management outside the DOM.

- ReactJS is the most popular web framework, with 74.5 percent of developers asked preferring to create with it The equivalent figure for Angular is 57.6 percent, putting it in ninth place

- According to the research, ReactJS has surpassed Angular in terms of popularity While ReactJS was favored by 31.3 percent of programmers, Angular was preferred by 30.7 percent

- Virtual DOM improves user experience and speeds up developer work

- It depends on a virtual-DOM and re-renders just what has changed, resulting in superior performance

- Aids in the tight binding of values or the management of local variables versus global variables

- One-way data flow ensures that the code is stable

- Integrating with some MVC frameworks will necessitate being aware of the configuration modifications that must be made

ReactJS technology is evolving quickly, making it challenging to keep documentation up to date To tackle this issue, developers are taking the initiative to create their own documentation tailored to the technologies they are actively using in their projects.

JSX (JavaScript XML) is a syntactic extension that integrates HTML with JavaScript, but its complexity has led to dissatisfaction among developers and designers due to the steep learning curve it presents.

- Because the learning curve for developers is fairly steep, ReactJS should not be the first one to be attempted by any new WEB developer

ReactJS offers components that serve as fundamental building blocks for user interfaces, each encapsulating its own logic These components enhance code reuse and simplify the development and understanding of web applications.

- It is significantly quicker than other frameworks because to features such as Virtual DOM, JSX, and Components

- Using JavaScript and ReactJS, React Native can simply write for Android and iOS apps

NodeJS, an open-source JavaScript runtime environment built on Google Chrome's JavaScript engine, enables the development of extensible network applications and the execution of JavaScript code outside of the browser It effectively wraps JavaScript in HTML pages without the need for modules.

NodeJS current release line is 14, which supersedes NodeJS 13 NodeJS 14 will be the current release for the next six months before being upgraded to Long-term Support (LTS) in October 2020

- Because it is built on Google Chrome's version 8 JavaScript Engine, the NodeJS library executes code quickly

- Data is never buffered in NodeJS applications These algorithms only generate data in pieces

- All NodeJS library APIs are asynchronous, or non-blocking This simply means that we don't have to wait for the NodeJS based server, API to return data

Node.js operates on a single-threaded architecture utilizing an event loop, which distinguishes it from traditional servers that rely on a fixed number of threads to manage requests This event-driven mechanism enhances the server's scalability by enabling it to handle requests in a non-blocking manner, allowing for greater efficiency and responsiveness.

- NodeJS is backed by the Google version 8 engine, which has the ability to run JavaScript in the frontend at the same time

- It is open-source, user-friendly, and simple to use

NodeJS simplifies the integration of web applications and servers by allowing the same code to operate on both the server-side and client-side, enhancing efficiency and streamlining development processes.

- NodeJS could be used to create powerful server-side applications

- The NodeJS API or application programming interface is constantly changing It is totally inconsistent

- With NodeJS we must create everything from scratch It can reduce productivity and slow down our work

- NodeJS does not yet support multithreaded programming It can provide much more complex applications than Ruby, but it is not suitable for performing long-running calculations

- It is compatible with the open-source JavaScript Runtime Environment

- It features a single-threaded design

- Because it is built on Google Chrome's JavaScript Engine, NodeJS provides rapid code execution

The MERN Stack architecture allows us to easily construct a 3-tier architecture (frontend, backend, database) entirely using JavaScript and JSON

- It covers the web development cycle from front-end to back-end development

- It supports the MVC (Model View Controller) architecture, which makes the web development process go smoothly

- MERN is considered a cost-effective stack because it offers the lowest development costs for open source support, easy setup, and faster learning times

- With the JavaScript stack, developers just need to be familiar with JavaScript and JSON

- The four powerful technologies are capable of producing full-fledged applications

Figure 1 How does MERN Stack work [8]

- The framework includes a comprehensive set of testing tools that are pre- built

- The MERN framework aids in the development of flexible and scalable websites

- The four technologies allow for seamless interaction with cloud systems

2.1.5 Business benefits to MERN Stack

An exceptional user experience is vital for the success of any digital product, and React Native apps excel in this area Their fully responsive design ensures an appealing and intuitive interface, enhancing user satisfaction and engagement.

- Stability and evolution: React Native is still evolving and is supported by a large community

- Shorter market launch time: React Native development boosts up the mobile development industry in comparison to the native apps It allows companies to enter the market more quickly

Figure 2 MERN's processing on Front end, Back end and database [9]

- Save money: Building a single cross-platform app is a far more cost- effective option than developing two distinct apps for iOS and Android

Machine Learning

Machine learning (ML) is the study of computer algorithms that learn and improve themselves automatically via experience and data It is regarded as a component of artificial intelligence

2.2.1 Basic problem in machine learning

Classification involves using machine learning algorithms to assign class labels to samples within a specific problem domain, such as identifying emails as "spam" or "not spam."

Regression is a technique for modeling a target value using independent predictors This approach is commonly used for predicting and determining the cause-and-effect connection between variables

The amount of independent variables and the nature of link between the independent and dependent variables are the main differences between regression approaches

Clustering is a Machine Learning technique that involves the grouping of data points into a specific group by a particular group

In principle, data points in the same group should have comparable qualities and/or features, whereas data points in separate groups should have very distinct properties and/or features

Supervised learning (SL) is a machine learning approach that involves learning a function to map inputs to outputs based on example input-output pairs This method utilizes labeled training data, which consists of a collection of training samples.

Unsupervised learning (UL) is an algorithmic approach that identifies patterns in unlabeled data, enabling machines to create a clear internal representation of their environment through mimicking.

Unlike supervised learning, where data is labeled by humans, unsupervised learning (UL) demonstrates self-organization by identifying patterns through neural preferences and probability densities.

Semi-supervised learning is a method of machine learning in which a little quantity of labeled data is combined with a large amount of unlabeled data during training

Semi-supervised learning bridges the gap between unsupervised and supervised learning by utilizing a combination of both labeled and unlabeled training data This approach represents an extreme form of limited supervision, enhancing the learning process even when labeled data is scarce.

Reinforcement learning is a subfield of machine learning concerned with how intelligent agents should behave in a given environment in order to maximize the concept of cumulative reward.

Deep Learning

Deep Learning is a branch of machine learning dealing with artificial neural networks, which are algorithms inspired by the structure and function of the brain

Deep Learning is a stark example of this: It involves - but is not interchangeable

Machine Learning encompasses a wide range of concepts, leading to potential misunderstandings It can be likened to a set of nested wooden dolls: Deep Learning is a subset of Machine Learning, which in turn is a part of Artificial Intelligence (AI).

Many reasons have contributed to the growth of deep learning:

- The availability of huge labeled datasets

- The GPU's high-speed parallel processing

Figure 3 Relationship between Artificial Intelligence, Machine Learning and Deep Learning [10]

- The introduction of ReLU and associated triggers has restricted the vanishing gradient problem

- Architecture enhancements such as GoogLeNet, VGG, ResNet, and transfer learning, as well as fine tuning methods

- A plethora of new regularization techniques, including dropout, batch normalization, and data augmentation

- Several new libraries enable deep network training with GPUs, including Theano, Caffe, Mxnet, Tensorflow, Pytorch, Keras, and more

- Numerous new optimization techniques: Adagrad, RMSProp, Adam, and so forth.

Common architecture used in application

The architecture used mostly in this application is Convolutional Neural Network (CNN)

CNN is a type of deep neural network that is commonly used to evaluate visual images

Image and video recognition, recommender systems, image classification, image segmentation, medical image analysis, natural language processing, brain- computer interfaces, and financial time series are all uses of CNN

The layer that does all the calculations CNN uses filters to apply to areas of the image These filter maps are a 3-dimensional matrix, which includes parameters

The pooling layer will be placed between the Convolutional layers to reduce the parameters if the input is too large

Pooling layers are classified into two types: max pooling and average pooling

Fully connected layers, akin to those found in a multi-layer perceptron (MLP), connect every neuron to the subsequent layer In image classification tasks, a flattened matrix is processed through these fully linked layers to achieve accurate categorization.

In a neural network, each neuron gathers input from multiple sources in the previous layer, while neurons in a convolutional layer focus on a limited area of this layer, referred to as the neuron's receptive field.

In most cases, the area is a square (e.g 5 by 5 neurons) Of contrast, the receptive field in a completely linked layer is the whole prior layer

In a neural network, neurons generate output values by applying specific functions to inputs from the previous layer's receptive field The output is influenced by a weight vector and a bias, which determine how the input data—usually real numbers—is processed Learning occurs through the iterative adjustment of these weights and biases.

Filters in Convolutional Neural Networks (CNNs) consist of weights and biases that capture specific features of the input data A key advantage of CNNs is that multiple neurons can utilize the same filter, which minimizes memory usage by applying a single bias and weight vector across all receptive fields sharing that filter, rather than assigning individual biases and weights to each receptive field.

CHATBOT IN DIALOGFLOW AND ALAN AI BOT

Chatbot

A chatbot for e-commerce gives us the ability to interact with new, existing, and potential customers in whenever they have, which doesn't need someone to control

Chatbots, like any discussion, are a two-way street with advantages for both companies and users

Customers (or prospective costumes) can find information quickly, without having to wait for a staff And shop can draw customers through the sales funnel, without interacting with them directly

Chatbots leverage artificial intelligence more than any other technology, and provide some benefits:

- Provide customer service and support

- Interact with previous customers, including shipping and return details

- Gather feedback on the customer experience

- Increase revenue by recommending similar goods

Simple chatbots operate using pre-programmed keywords, allowing developers to create commands based on commonly used terms When users pose questions that lack these specific keywords, the chatbot fails to comprehend the inquiry and typically responds with a message such as, "Sorry, I did not get your question."

A smart chatbot, also known as a contextual chatbot, utilizes Natural Language Processing, Artificial Intelligence, and Machine Learning to enhance customer interactions By remembering customer interests and the context of previous conversations, the chatbot continuously learns and evolves, enabling it to provide the most relevant responses to user commands.

An omnichannel ecosystem that incorporates AI bots, often referred to as mixed chatbots, represents a significant advancement in customer communication However, achieving the development of an AI bot is just the beginning; the real challenge lies in creating a seamless omnichannel experience for customers In this paradigm, conversations can effortlessly transition across various platforms—starting on Twitter, continuing with a chatbot, and concluding with a phone call to a tech support agent, followed by email correspondence.

Chatbot communicate with user base on a following process:

- Translator: User information/requests will be translated in programming language The computer can then understand the work that needs to be done

- Processor: AI technology handles user requests

- Respondent: The computer receives the output from the AI and returns the corresponding results to the user on the messenger platform.

Dialogflow

Dialogflow is a powerful natural language understanding platform that simplifies the creation of interactive user interfaces for integration into mobile apps, online applications, devices, robots, and voice response systems By utilizing Dialogflow, businesses can offer innovative and engaging interaction methods for users with their products.

Dialogflow effectively manages diverse client inputs, such as text and voice, including phone calls and voice recordings It offers responses to customers through both text and synthetic speech, enhancing the overall interaction experience.

The Dialogflow agent is a virtual agent that manages end-user interaction

Dialogflow is a natural language understanding module that effectively interprets human language, converting user text or voice into structured data for seamless interaction with apps and services By designing and configuring a Dialogflow agent, you can manage various types of system interactions, enhancing the overall conversational experience.

An intent classifies an end-intention user's for a certain dialogue turn For each agents defined, it would need some intents to define, where the

In Dialogflow, the relationship between intent and agent is crucial for managing conversations, as it allows for the handling of various combination intents When an end-user communicates through text or speech, Dialogflow effectively matches their expressions to the most relevant intent within the agent, a process known as intent categorization.

A basic intent contains the following:

Training phrases serve as examples of potential user expressions that can trigger intent recognition in Dialogflow When a user's input closely aligns with these phrases, Dialogflow effectively identifies the corresponding intent Thanks to its advanced machine learning capabilities, Dialogflow can also recognize additional, similar expressions, meaning it's not necessary to cover every possible variation of a phrase.

- Action: Action can be defined for each intent When the intents match,

Dialogflow can send an action to the system and use the action to activate a system-defined activity

When an intent is matched during runtime, Dialogflow returns the value derived from the user's expression as a parameter Each parameter is associated with an entity type that dictates the data extraction process Unlike unprocessed user input, parameters represent structured data, facilitating logic execution and response generation.

Responses are defined as text, speech, or visual outputs provided to the end-user They can serve various purposes, including delivering information, soliciting additional details from the user, or ending the interaction altogether.

Figure 5 Basic flow of how intent work [5]

Each intent parameter has a type, called an entity type, that tells us exactly how to extract the data from the end-user expression

Dialogflow integrates seamlessly with popular communication platforms such as Google Assistant, Slack, and Facebook Messenger, allowing businesses to create agents tailored for these services By selecting from various integration options, companies can effectively manage direct interactions with end-users, enabling them to concentrate on developing their agents without distraction.

When utilizing integration options, it's essential to implement "fulfillment for integrations." By enabling fulfillment for an intent in Dialogflow, the system can respond effectively by invoking the designated service For instance, if a user inquires about haircut availability on Friday, the service can access the database and provide information on available time slots.

Each user intent operates within a specific context that facilitates its fulfillment When an intent necessitates a system action or dynamic response, it should trigger a corresponding fulfillment Conversely, if an intent does not have an enabled fulfillment, Dialogflow will respond with a predefined static answer associated with that intent.

When Dialogflow identifies a fulfillment-enabled intent, it sends a detailed request to the webhook service associated with that intent This allows the system to perform required actions and respond to Dialogflow with further instructions on the next steps The sequence of fulfillment processing is illustrated in the accompanying diagram.

1 The end-user types or speaks a phrase

2 Dialogflow associates the end-user expression with an intent and extracts parameters

3 Dialogflow sends a webhook request message to the webhook service This message provides details about the matched intent, the action, the parameters, and the answer specified for the intent

4 The service performs actions as needed, like database queries or external API calls

5 The service sends a webhook response message to Dialogflow The response that should be provided to the end-user is contained in that message

6 Dialogflow sends the response to the end-user

7 The end-user sees or hears the response

3.2.3.2 User interactions with the API

When sending end-user expressions and receiving intent matches without utilizing any integration options, it is essential to utilize "User Interaction with API." The accompanying figure illustrates the sequence of processing that occurs during API interaction.

Figure 6 Basic flow of fulfillment [5]

1 The end-user types or speaks an expression

2 The service sends this end-user expression to Dialogflow in a detect intent request message

3 Dialogflow sends a detect intent response message to the service This message contains information about the matched intent, the action, the parameters, and the response defined for the intent

4 The service performs actions as needed, like database queries or external API calls

5 The service sends a response to the end-user

6 The end-user sees or hears the response

The application’s structure and flow are depicted in Figure 8 When a user inputs text, the bot transmits this information to the server, which features two routes: the text query route and the event query route Depending on the client's action, the server selects the appropriate route In this case, the text query route processes the action and sends requests to the Dialogflow API The API handles these requests and subsequently returns a response to the server, which is then relayed back to the client.

Figure 7 Basic flow of User interaction with the API [5]

In another scenario, without typing anything, something can be trigger with pre-defined event by using the Event query route The flow is the same as above

This is what the routes should look like in code

Figure 8 Entire Data strucutre and flow in chatbot

ALAN AI

Alan is an advanced Voice AI Platform that allows adding a voice interface to an application without the overhead

Alan provides a robust serverless platform for creating reliable in-app voice assistants and chatbots, streamlining the development process With the Alan AI backend managing the complexities of spoken language models and speech recognition, developers can focus on building applications without needing extensive expertise in Machine Learning or DevOps This enables a single developer to efficiently create and enhance voice-driven experiences independently.

Alan empowers websites to surpass traditional touch and type interfaces by enabling voice functionality for complex workflows With voice scripts developed in JavaScript, this technology offers high levels of customization and flexibility.

Voice interfaces created with Alan are built once and deployed anywhere — there will be no need to rebuild them for specific platforms Alan provides simple SDKs for integration with:

With Alan's serverless architecture, modifications to the voice interface can be implemented instantly, allowing users to access updates without the need for a new application version.

Alan provides a comprehensive AI voice platform that eliminates the need for configuring speech components for voice processing Users can effortlessly deploy the infrastructure and train speech recognition software, as Alan handles all voice processing, maintenance, and implementation tasks, significantly reducing the workload for users.

Alan acts as an AI backend, enabling the application to comprehend human language and allowing users to interact with it via voice commands To create a voice interface utilizing Alan, several essential tasks must be accomplished.

- Design a dialog for our voice assistant in Alan Studio

- Using the Alan SDKs, we may integrate the Alan voice into our program

To create an effective voice assistant, the initial step is to develop a dialog voice script in Alan Studio This script outlines the anticipated conversation scenarios, addressing various topics, questions, and phrases users may express during their interaction Written in JavaScript, these voice scripts offer unparalleled flexibility for constructing engaging dialogues.

Before writing a voice script, it's helpful to outline the various branches users may explore and prototype different conversational pathways Utilizing the "navigation flow" of these conversations simplifies the process of creating effective voice scripts.

The following are the primary building pieces for the voice script:

Voice commands enable interaction with voice assistants by allowing users to perform tasks and receive answers to their queries By incorporating specific instructions into the voice script, we facilitate these user requests effectively Examples of common voice commands illustrate this functionality.

- Can you tell me about this phone model?

A voice command is activated by a specific phrase spoken by the user, referred to as a pattern in Alan For instance, the command "Order a coffee" can be triggered by various phrases.

- Give me a cup of coffee

In addition to the pattern, it describes what this command should do when called with a voice command

Figure 11 Alan - Example of a pattern in user command [4]

With Alan, we can enhance our voice command capabilities by incorporating slots, which are parameters in user utterances that enable Alan to identify and extract crucial information This functionality allows Alan to effectively fulfill user requests by utilizing the data gathered from their input.

Voice commands can be enhanced using the following sorts of slots:

- User-defined slots to list custom values that the user can say when giving a voice command

- Predefined slots to get specific types of information from the user utterance, for example, location, time, numbers and so on

Dynamic entities resemble user-defined slots by offering a list of parameters that users can specify in their commands, which are crucial for guiding future conversations However, unlike traditional slots, the values of dynamic entities are not predetermined, allowing for adjustments to be made in real-time as the conversation evolves.

Figure 12 Alan - Type of Slots [4]

In voice scripts, user commands often carry specific meanings that depend on the context, allowing Alan to accurately understand the user's intended situation.

Alan integrates with client apps through Alan's SDKs To integrate an application with Alan, embedded the code is needed for the Alan button in the app project

Figure 15 Alan - How to integrate [4]

SURVEY

Chatbot survey

- Easy to use, user friendly

- Cannot response when the chat bot did not get the keyword

- Easy to use, user friendly

- Alternate between automated chat and online chat

- Can attach file, image, or icon

Website survey

Link: https://www.lazada.vn/

- Can login by using Facebook, google mail, phone number

- List of popular events, notification about voucher, promotion, shop brand, hot products

- Can search by many options

- Post general detail seller information

- The layout is quite confusing

- Small font size (some area is too hard to read)

- Need to login before buying any product

- Can login by using Facebook, google mail, phone number, Apple

- List of popular events, notification about voucher, promotion, shop brand, hot products

- Have notification bar to see up to date information

- Can bargain with the seller

- Do not have multiple language choice

- Need to login before buying any product

Link: https://www.lazada.vn/

- Customers do not need to login to buy product; they just need to choose what they like and then the customer service will call to confirm

ANALYZE REQUIREMENTS AND APPLICATION DESCRIPTION

Analyze requirements

+ View user opinion + Edit personal profile

No Content Standard Detail describes

1 Search product fast Efficient Max load time 3 seconds

2 User friendly Efficient User interface must be clear and easy to use Do not need too much detail instruction Suitable for user in all ages

3 Easy to interact Convenient Every command must be simplified, easy to manage, and user friendly

Application description

Figure 25 Guest Functions Figure 24 User Function

Brief description User/Guest log in into the system

Actor(s) User, Staff and Admin

Pre-conditions - Users have account in the system

Post-conditions If login successfully: User been identified, and system render user to website homepage

If login unsuccessfully: User cannot log in into the system

Use case start when user click on [Log In] button in homepage

1 System show login form to input username and password

2 User input username and password

3 System check user request valid

4 System redirect to homepage screen

User input wrong username/password => System show error alert and request to login again

Extension point System show error alert

Table 4 Use case Sign up

Brief description Guests create a new account in the system

Pre-conditions Have internet connection

Post-conditions If register successfully: Input valid, and system render user to website homepage

If login unsuccessfully: Guest cannot create a new account

Use case start when user click on [Register] in login form

1 System show register form to input username, password, re-password, address, phone number

4 System redirect to homepage screen

User input data is not valid=> System show error alert and request to register again

Table 5 Use case Product Management Name Product Management

Brief description View, Add, Update, Disable Product

Actor(s) User (View, Buy functions), Admin, Staff

Post-conditions Success: Product information change due to admin perform

Unsuccessfully: Product information does not change

Use case start when user click on Add, Disable, Edit figure Input data into form template

Table 6 Use case Cart Management Name Cart Management

Brief description View, Add, Edit, Delete Cart

Post-conditions Success: Cart information change due to staff or admin perform Unsuccessfully: Cart information does not change

Use case start when user start shopping

1 Admin or staff go to admin order status page

Table 7 Use case Order Management Name Order Management

Brief description User/Guest buy the product

Pre-conditions - Have internet connection

- Have account in the system (User)

Post-conditions Success: customer bought product successfully

Unsuccessfully: customer bought product unsuccessfully

Use case start when user click on [Add to cart] button:

1 User finish shopping → go to cart

2 User check/update cart information

5 Guest input personal information (User - auto fill by user information)

6 Change any delivering information (optional)

On the 2nd step user empty the cart

Table 8 Use case User Management Name User Management

Brief description Admin mange user in the system

- Have account in the system (Admin)

Post-conditions Success: User information change due to admin perform

Unsuccessfully: User information does not change

Use case start when admin click on Add, Delete, Edit figure Input into form template

Table 9 User case Staff Management Name Staff Management

Brief description Admin mange staff in the system

- Have account in the system (Admin)

Post-conditions Success: Staff information change due to admin perform

Unsuccessfully: Staff information does not change

Use case start when admin click on Add, Delete, Edit figure Input into form template

Table 10 Use case Buy Product Name Buy Product

Brief description User/Guest buy product on the website

Post-conditions Success: User receive successful message

Unsuccessfully: User receive unsuccessful message

Use case start when there are products in cart and delivery method have already been choose, then user press [Proceed to Checkout] button

2 User input their personal information into the form and press [Continue] button

4 System shows confirm bill page

6 System check again and send successful request to user

- Users cancel process on step 2nd and 4th

- User input invalid data in step 2

Figure 32 Sequence Diagram User View Product

Figure 33 Sequence Diagram Admin View Product

Figure 34 Sequence Diagram Add Product

Figure 35 Sequence Diagram Edit Product

Figure 36 Sequence Diagram Disable Product

Figure 37 Sequence Diagram View Cart

5.2.4.7 Sequence Diagram [View Product Detail]

Figure 38 Sequence Diagram View Product Detail

5.2.4.8 Sequence Diagram [Add Product to Cart]

Figure 39 Sequence Diagram Add Product to Cart

Figure 40 Sequence Diagram Edit Cart

Figure 41 Sequence Diagram Buy Product

No Field Describe Type Note

2 email Email String - Allow null: none

3 password Password String - Allow null: none

4 displayName Username String - Allow null: none

5 address Address String - Allow null: none

6 phoneNumber Phone number String - Allow null: none

7 description A brief describes about themselves

8 type Type of admin: staff or super admin

2 email Email String - Allow null: none

3 password Password String - Allow null: none

4 displayName Username String - Allow null: none

5 address Address String - Allow null: none

6 phoneNumber Phone number String - Allow null: none

2 product Products that user bought

4 Name Username of user who

String - Allow null: none make this order

5 address User address String - Allow null: none

8 status Order status String - Allow null: none

9 date Order date String - Allow null: none

10 time Order time String - Allow null: none

11 editedBy Admin or staff username modified this order information last

12 shippingFee Shipping fee Float - Allow null: none

14 allTotal Order total cost (including shipping fee)

3 sex Clothes for man or woman

5 size Product size Array - Allow null: none

6 name Product name String - Allow null: none

7 color Product color Array - Allow null: none

8 colorHex Product color in hex

10 S Quantity of product S size int - Allow null: none

11 M Quantity of product M size int - Allow null: none

12 L Quantity of product L size int - Allow null: none

13 XL Quantity of product XL size int - Allow null: none

14 XXL Quantity of product XXL size int - Allow null: none

15 price Product price float - Allow null: none

Table 15 Database Table Disable Products

3 sex Clothes for man or woman

5 size Product size Array - Allow null: none

6 name Product name String - Allow null: none

7 color Product color Array - Allow null: none

8 colorHex Product color in hex

10 S Quantity of product S size int - Allow null: none

11 M Quantity of product M size int - Allow null: none

12 L Quantity of product L size int - Allow null: none

13 XL Quantity of product XL size int - Allow null: none

14 XXL Quantity of product XXL size int - Allow null: none

15 price Product price float - Allow null: none

2 username Username String - Allow null: none

3 email User email String - Allow null: none

4 address User address String - Allow null: none

5 opinion User opinion String - Allow null: none

- Use MERN technology (MERN stand for - MongoDB, Express, ReactJS, NodeJS)

Client side: HTML, CSS, Bootstrap, Material UI, and some available library

- And run-on multiple website platform like Google, Firefox, etc

Figure 45 Google Chrome, Firefox, etc [11]

IMPLEMENTING DIALOGFLOW AND ALAN AI TO THE E-

Dialogflow

To begin, we must establish a Google Project, which serves as a compilation of settings, credentials, and metadata related to the applications utilizing Google APIs and Google Cloud Platform resources.

After creating a project, the next step is to establish a Service Account to access the Dialogflow API and other Google APIs A Service Account is designed for applications or virtual machine (VM) instances, rather than individual users, allowing these applications to make authorized API calls effectively.

Below is step-by-step how to set up the Dialogflow configuration

Figure 47 Create Google project and link to Dialogflow step-by-step

Figure 48 Data flow of Dialogflow

Then we go to Dialogflow, create a new agent with new intents for the website chatbot Go to setting and assign the new Google service account to the chatbot

Service account after created successfully

Figure 49 Dialogflow - Agent setting page

After creating Google project and service account, Google will then generate secret information We need to put that information inside dev.js file in our code

After that, set google credential in command prompt to set environment for the Dialogflow API recognize the request from the client

Figure 52 Google credentail for setting environment

Figure 53 Private json key generated by Google service

These are step to create a fulfillment integration in Dialogflow:

- Step 1: Go to Dialogflow and login to the account at the previous section

- Step 2: Open Fulfillment section and click enable Inline Editor to add these codes:

Figure 54 Dialogflow Fulfillment const nodemailer = require("nodemailer"); const transporter = nodemailer.createTransport({ service: 'gmail', auth: { user: 'khanhdanquan@gmail.com', pass: 'Khanh02091999'

//function get opinion from user function GetOpinionHandler(agent) { const {email, name} = agent.parameters; const mailOptions = { from: "K&Q webiste", to: email, subject: "Email from chatbot", html: `

Hello ${name}

}; transporter.sendMail(mailOptions, function (err, info){ if(err) { console.log(err);

} //function check product is out of stock or not function getJacketData(){ return axios.get('http://myauthapi1.herokuapp.com/product');

To determine the appropriate jacket size, the handler function retrieves the user's name and size parameters It then fetches jacket data and checks each product to find a match based on the user's input If a jacket with the specified name and size is found, relevant details are returned.

== "S" && Number(product.S) > 0) agent.add(`Size ${size} of product ${name} is still available`); if(product.name.toLowerCase() == name.toLowerCase() && size

== "S" && Number(product.S) == 0) agent.add(`Size ${size} of product ${name} is out of stock`); if(product.name.toLowerCase() == name.toLowerCase() && size

== "M" && Number(product.M) > 0) agent.add(`Size ${size} of product ${name} is still available`); if(product.name.toLowerCase() == name.toLowerCase() && size

== "M" && Number(product.M) == 0) agent.add(`Size ${size} of product ${name} is out of stock`); if(product.name.toLowerCase() == name.toLowerCase() && size

== "L" && Number(product.L) > 0) agent.add(`Size ${size} of product ${name} is still available`); if(product.name.toLowerCase() == name.toLowerCase() && size

== "L" && Number(product.L) == 0) agent.add(`Size ${size} of product ${name} is out of stock`); if(product.name.toLowerCase() == name.toLowerCase() && size

== "XL" && Number(product.XL) > 0) agent.add(`Size ${size} of product ${name} is still available`); if(product.name.toLowerCase() == name.toLowerCase() && size

== "XL" && Number(product.XL) == 0) agent.add(`Size ${size} of product ${name} is out of stock`); if(product.name.toLowerCase() == name.toLowerCase() && size

== "XXL" && Number(product.XXL) > 0) agent.add(`Size ${size} of product ${name} is still available`); if(product.PID.toLowerCase() == name.toLowerCase() && size ==

"S" && Number(product.S) > 0) agent.add(`Size ${size} of product ${name} is still available`);

- Step 3: Click Deploy button if(product.PID.toLowerCase() == name.toLowerCase() && size ==

"S" && Number(product.S) == 0) agent.add(`Size ${size} of product ${name} is out of stock`); if(product.PID.toLowerCase() == name.toLowerCase() && size ==

"M" && Number(product.M) > 0) agent.add(`Size ${size} of product ${name} is still available`); if(product.PID.toLowerCase() == name.toLowerCase() && size ==

"M" && Number(product.M) == 0) agent.add(`Size ${size} of product ${name} is out of stock`); if(product.PID.toLowerCase() == name.toLowerCase() && size ==

"L" && Number(product.L) > 0) agent.add(`Size ${size} of product ${name} is still available`); if(product.PID.toLowerCase() == name.toLowerCase() && size ==

"L" && Number(product.L) == 0) agent.add(`Size ${size} of product ${name} is out of stock`); if(product.PID.toLowerCase() == name.toLowerCase() && size ==

"XL" && Number(product.XL) > 0) agent.add(`Size ${size} of product ${name} is still available`); if(product.PID.toLowerCase() == name.toLowerCase() && size ==

"XL" && Number(product.XL) == 0) agent.add(`Size ${size} of product ${name} is out of stock`); if(product.PID.toLowerCase() == name.toLowerCase() && size ==

"XXL" && Number(product.XXL) > 0) agent.add(`Size ${size} of product ${name} is still available`); if(product.PID.toLowerCase() == name.toLowerCase() && size ==

"XXL" && Number(product.XXL) == 0) agent.add(`Size ${size} of product ${name} is out of stock`); });

And here are some common commands result from chatbot

Ask for store location The chat bot will response our location to the user

Ask for type of selling product

The chat bot will response what type of clothes the website is selling to the user

Ask for opening hour The chat bot will response our working hour to the user

Figure 55 Chatbot response - store location

Ask product available The chat bot will response whether the product is out of stock to the user

Ask for contact The chat bot will response our contact to the user

The chat bot will response our delivery information to the user

Figure 57 Chatbot response - open hour

Figure 58 Chatbot response - product available

Ask for order information The chat bot will response user to login and then go check their order status on the navbar for more detail information

Ask for shipping fee The chat bot will response our shipping fee detail to the user

ALAN AI

For basic command, answer a corresponding question:

Figure 60 Chatbot response - delivery information

Figure 61 Chatbot response - order information

Figure 62 Chatbot response - shipping fee

To create a script that processes user commands, utilize the "|" character to allow Alan to filter data by matching any of the separated inputs Alternatively, employ the "()" character to indicate that the statement may include any of the specified words or phrases within a sentence.

- Step 2: Embedded this code into the project This code will give user a button to send request to ALAN

'hello', 'hi (there|)', 'what\'s up', reply(

'Hello', 'Hi (there|)', 'Hi, what can I do for you?', ),

- Step 1: Write a script for action for ALAN to perform

- Step 2: Add a middleware useAlan.js to handle ALAN action

In the example of a custom action using Alan AI, the intent "help (me)" triggers a command that displays help information The command is defined in a variable as "show-help." The AlanTrigger component utilizes React hooks, including useHistory and useState, to manage the Alan instance and associated data effectively.

//action we want to perform on the website //when user said help me const showHelp = useCallback(() => { alanInstance.playText("Showing our FAQ"); history.push("/orderhelp");

} useEffect(() => { //add event listener window.addEventListener(COMMANDS.SHOW_HELP, showHelp); return () => { window.removeEventListener(COMMANDS.SHOW_HELP, showHelp); };

- Step 3: Like step 2 in basic command

- Step 1: write a script to handle a dialog from user

- Step 2 &3: Like step 2 & 3 in custom action section const SizeSlot = "$(SIZE_NAME S|M|L|XL|XXL)" intent(`add $(QUANTITY NUMBER) $(name* (.*)) (item|) to (the|) cart`, p => {

// intent(`add $(name* ${regIce}) to cart`, p => { let state = {name:p.name.value, quantity:p.QUANTITY.number}; p.play("What size would you like to choose?") p.then(sizeContext1, {state: state});

}) const sizeContext1 = context(() => { follow(SizeSlot, p =>{ p.state.size = p.SIZE_NAME.value; p.play({ command: 'add-item', payload: { quantity: p.state.quantity, name: p.state.name, size: p.state.size}}) p.resolve()

}) fallback("Please state what size you want to add") })

ADDITONAL TASK

Send order confirmation email

- An email is sent to user’s email to confirm their order

7.1.1 Create a new service and email template on emailjs

- Go to https://www.emailjs.com/ and create a new account

- Create a new service account, choose Gmail for the service

Figure 64 Create a new service account

- Create an email template, that template will then be used to send to the user want to reset their password after transmitting the information in

- Create a form to pour user data

- And a function to emailjs server

- Because we do not have the submit trigger, so we create an event listener to trigger the sendEmail function as soon as the user complete the transaction

Figure 65 Create an email template

// get the form id const sendTrigger = document.getElementById('emailForm'); // trigger the sendEmail function sendTrigger.querySelector('input[type="submit"]').click();

Forgot password

- This function is used to reset user’s password when the user forgets his/her password

- Go to https://sendgrid.com/ and create a new account

- Open dashboard, and on API key section create a new API key for the project

- After creating the API key save it for later use

- Add the key to send the request to SendGrid

Figure 68 Create an API Key on SendGrid

- Add code to handle user request.

Setup HTTPS locally

- In package.json, update the start script to include https:

"start": "HTTPS=true react-scripts start",

Figure 70 Route handle user request

- The easiest way to obtain a certificate is through mkcert

- After running the above commands, we will have built a certificate authority on the system, allowing us to generate certificates for any future projects

- From the client side of the project, run the following code This will store our generated certificates in the cert directory

To establish a secure connection in our project, we create a env file on the client side and include the paths for the certificate and key files This ensures that when we restart the project, the certificate and key are automatically configured in the project environment, enabling secure connectivity.

# Install mkcert tool brew install mkcert

# Install nss (only needed if use

# Setup mkcert on our machine (creates a CA) mkcert -install

# Create cert directory if it would not exist mkdir -p cert

# Generate the certificate (ran from the root of this project) mkcert -key-file /.cert/key.pem -cert-file /.cert/cert.pem "localhost"

SSL_CRT_FILE=./.cert/cert.pem //path of the certificate

SSL_KEY_FILE=./.cert/key.pem //path of the key

Run automation testing and some appearance testing

- In this section, we are being recommended to used OWASP ZAP Tool

- After running the attack, we got some warning but those are just some minor warnings

- These warning can be easy be remove by simply setup HTTPs locally in out project

7.4.2.1 Test case for chatbot screen

Table 17 Table Chatbot Test Case

1 Test open chatbot Login to website

Choose chatbot icon on the bottom-right corner to start chatting with chatbot

Figure 73 Alerts after run attack

2 Test input data into chatbot

Type something in the chatbot’s input

Text is sent to server

3 Test chatbot context Test case 2

In the chat content display area, the text just entered must be seen

7.4.2.2 Test case for log in screen

Table 18 Table Log In Test Case

5 Test login page Open website

Click on profile icon on the header at the most right

6 Test validation Input text in the input field

If input contain special character or the input has not been entered, then the system will render error

Else it will send the data to the server

7 Test user data System check user input data match with data in the database

If it right, then render successful message and redirect to homepage Else render error message

7.4.3 Test case for sign up screen

Table 19 Table Sign Up Test Case

8 Test sign up page Test case 5

Click on Create an Account button

9 Test validation Input text in the input field

If input contain special character or the input has not been entered, then the system will render error

Else it will send the data to the server

7.4.3.1 Test case for buy product screen

Table 20 Table Buy Product Test Case

10 Test open product detail page

11 Test add product to cart

Choose size, color, quantity want to buy Click Add to cart button

Product is added to cart

12 Test open cart Test case 11

On header, click on cart icon

On header, click on profile icon and choose order status section

FINAL INTERFACE

User

Admin

CONCLUSION AND DEVELOPMENT

Summary

Creating a smart vending shop website is essential for enhancing user experience and gaining insights into customer behavior, ultimately leading to increased customer engagement and higher sales.

Compare with original target

- Improve UI/UX (User Interface/User Experience) website

- Research about machine learning, deep learning, and apply them into the website - add chatbot and buy product feature through voice recognition

- Add utility features for users - sort and search features

- Add graph statistics for admin

- All tasks have been accomplished except implement Deep Learning model into the system

To enhance website security, it is essential to switch from HTTP to HTTPS and obtain an SSL certificate Additionally, conducting automation tests will ensure the website's functionality and performance are optimized Implementing Artificial Intelligence can further improve user experience by providing personalized interactions Finally, ensuring that comprehensive information is available on the website will help users access the content they need effectively.

Limit

- We have not implemented Deep Learning model into the website yet.

Topic development

With the limitation above, to increase customer satisfaction in the future, the topic

“Build a smart website for selling clothes” must have the following development directions:

- Apply deep learning model into the website - an application used to change clothes base on how consumer appearance

- Generate statistic report for Admin

- More flexible in admin functions

The team is confident that as the application evolves and enters the user market, its features will enhance the user experience, aiding individuals in their journey of self-discovery.

[2] Redux document https://redux.js.org/

[3] Material UI https://material-ui.com/

[4] Alan AI https://alan.app/

[5] Dialogflow https://cloud.google.com/dialogflow/es/docs

[6] Axios document https://www.npmjs.com/package/axios

[7] Token https://www.npmjs.com/package/jsonwebtoken

[8] MongoDB https://www.mongodb.com/

[9] https://www.classicinformatics.com/blog/why-is-mern-stack-our-preferred- platform-for-startups-apps

[10] https://blogs.nvidia.com/blog/2016/07/29/whats-difference-artificial-intelligence- machine-learning-deep-learning-ai/

[11] https://marketingtrips.com/brand-story/cach-cac-trinh-duyet-web-nhu-chrome- firefox-kiem-tien/

Date Task Member in charge

Expected result Date compl eted

All member Requirement analyzed; system has necessary functions

1 High-level design, detail design, implementation of the website is updated

2 Report progress status in the report

1 Research about chatbot in Dialogflow

2 Implement Dialogflow into the website

2 Achieve knowledge about chatbot in Dialogflow and how to implement it into the website

1 Implement Dialogflow into the website

2 Chatbot is implement into the website

2 Program the logical functions of the chat bot into the website

2 Coding chat bot using Dialogflow API

1 Achieve knowledge about deep learning and how it works

“Virtual clothes fitting room” in Deep learning and test available project

1 Testing available project about deep learning model

1 Able to run the available project that satisfied the requirements

2 Testing available project about deep learning model

1 Research about “face- swap” in deep learning

1 Train the Dialogflow to handle more complex command from users

“face-swap” in deep learning

4 Train and test “face- swap” model

1 Train and test “face- swap” model

2 Research how to implement deep learning model into the REACT app

2 Know how to integrate the deep learning model inside the REACT app

2 Implement ALAN into the website

3 Coding ALAN voice assistance functions

1 Achieve knowledge about ALAN AI and how does it work; to implement it into the website

2 Script handle user commands/request s in ALAN AI

1 ALAN run without crash the website

1 Fixed the program to satisfy the teacher additional request

2 Program both bots to handle new request

2 Bot can handle new request

3 Report status in the report

1 Fixed the program to satisfy the teacher additional request

2 Fixed alert report in automation tool

2 Run automation test and fix important error alert

1 Add certificate into the website

1 Find bugs and fixed them

All member 1 Find many bugs as much as possible and fixed them

All member Website is ready to use

All member Document is ready to release

Create PowerPoint and a script for the capstone project

All member A presentation about the website

Tiêu đề	Building a smart website for selling clothes
Tác giả	Đỗ Quốc Khánh, Nguyễn Hữu Quyền
Người hướng dẫn	MSc Lê Thị Minh Châu
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Software Engineering
Thể loại	Đồ án
Năm xuất bản	2021
Thành phố	Ho Chi Minh City

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