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

MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITYUNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING CAPSTONE PROJECT SOFTWARE ENGINEERING BUILDING AN E-COMMERCE S

MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY

UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR

HIGH QUALITY TRAINING

CAPSTONE PROJECT SOFTWARE ENGINEERING

BUILDING AN E-COMMERCE SYSTEM USING

REACTJS AND REACT NATIVE

LECTURER: MSc NGUYEN TRAN THI VAN STUDENT: TRAN THANH HIEN

MAI NGOC DUY ANH

SKL008477

Ho Chi Minh City, 2021

HCMC UNIVERSITY OF TECHNOLOGY AND

EDUCATION FACULTY FOR HIGH QUALITY TRAINING

Major: SOFTWARE ENGINEERING Advisor: NGUYEN TRAN THI VAN, MSc.

Ho Chi Minh City, August 2021

THE SOCIALIST REPUBLIC OF VIETNAM

Independence – Freedom– Happiness

-Ho Chi Minh City, April 1 st , 2021

GRADUATION PROJECT ASSIGNMENT

Student name: Tran Thanh Hien Student ID: 17110026

Student name: Mai Ngoc Anh Duy Student ID: 17110013

Student name: Tran Thuan Tuong Vy Student ID: 17110093

Major: Software Engineering Class: 17110CLA

Advisor: Nguyen Tran Thi Van, MSc

Date of assignment: 01/04/2021 Date of submission: 15/08/2021

1 Project title: Building an E-commerce system using ReactJS and React Native

2 Implementation content:

Theory:

- Research and learn Terraform with AWS providers The services are being used:

Practice:

Build an E-commerce Platform:

- For user: register, login/out, purchase, search, add the item to cart and wishlist

- For admin: login/out, manage, create a specific event for discount

3 Final product:

THE SOCIALIST REPUBLIC OF VIETNAM

Independence – Freedom– Happiness

-Ho Chi Minh City, August 15, 2021

ADVISOR’S EVALUATION SHEET

Major: Software Engineering

Project title: Building an E-commerce system using ReactJS and React Native

Advisor: Nguyen Tran Thi Van, MSc

EVALUATION

1 Content of the project:

4 Approval for oral defense? (Approved or denied)

THE SOCIALIST REPUBLIC OF VIETNAM

Independence – Freedom– Happiness

-Ho Chi Minh City, August 16, 2021 PRE-DEFENSE EVALUATION SHEET Student name: Tran Thanh Hien Student ID: 17110026 Student name: Mai Ngoc Anh Duy Student ID: 17110013 Student name: Tran Thuan Tuong Vy Student ID: 17110093 Major: Software Engineering Project title: Building an E-commerce system using ReactJS and React Native Reviewer: Le Van Vinh Ph.D EVALUATION 1 Content and workload of the project

2 Strengths:

3 Weaknesses:

4 Approval for oral defense? (Approved or denied)

5 Overall evaluation: (Excellent, Good, Fair, Poor)

6 Mark:……….(in words: )

Ho Chi Minh City, August 16, 2021

REVIEWER

(Sign with full name)

THE SOCIALIST REPUBLIC OF VIETNAM

Independence – Freedom– Happiness

-EVALUATION SHEET OF DEFENSE COMMITTEE MEMBER Student name: Tran Thanh Hien Student ID: 17110026 Student name: Mai Ngoc Anh Duy Student ID: 17110013 Student name: Tran Thuan Tuong Vy Student ID: 17110093 Major: Software Engineering Project title: Building an E-commerce system using ReactJS and React Native Name of Defense Committee Member: EVALUATION 1 Content and workload of the project

2 Strengths:

3 Weaknesses:

4 Overall evaluation: (Excellent, Good, Fair, Poor)

5 Mark:……….(in words: )

Ho Chi Minh City, August 20, 2021

COMMITTEE MEMBER

(Sign with full name)

Acknowledgment

In the first words of this end-to-end "The Graduation Project" report, we would like to send our sincere thanks and gratitude to all those who have supported and provided us with knowledge and spirituality during project implementation.

We would like to express our faith in Mr Nguyen Tran Thi Van, a lecturer at

Ho Chi Minh City University of Technical and Education that helped us.

Due to limited time, knowledge is still limited so the project implementation certainly does not avoid certain shortcomings We would like to receive feedback from you so that we could have more experience to implement to complete our project better.

Best regards!

Page vii

Preface

Creating mobile apps often requires developers to create an app for Android, onefor iOS, the top two mobile operating systems The two apps may have the same layoutand logic, but some of the UI elements will be different, and the applications themselvesneed to be developed in two different languages This process is terrible because it takes along time to create two applications and it requires two different sets of knowledge.There have been attempts to create techniques, services, or frameworks to address thisproblem but these hybrids cannot provide the original feel of the resulting applications

This project uses the newly released React Native framework that can create bothiOS and Android apps The resulting applications can share code and include UIcomponents unique to each platform The project focuses on Android and tries to build anAndroid e-commerce application to help students and lecturers easily buy products online

in universities The overall experience is that React Native is a very interestingframework that can simplify the development process for high-level mobile applications

As long as the app itself isn't too complicated, development isn't that complicated, andone can create an app in a very short time and be compiled for both Android and iOS

This paper will cover the process of implementing the topic from the moment ofidea creation, current status survey, requirements identification, system design analysis,interface design until the time of installation and testing, try and perfect the program.The report includes the following main sections:

Chapter 1: Introduction

Chapter 2: Theory Foundation

Chapter 3: User Requirements

Chapter 4: Modeling Requirements

Chapter 5: System Design

Chapter 6: Implementation & Testing

Chapter 7: Conclusion

Page viii

Contents

Project Assignment ii

Advisor's Evaluation Sheet iii

Pre-defense Evaluation Sheet iv

Acknowledgment vii

Preface viii

Contents ix

List of Tables xii

List of Figures xiv

List of Abbreviations xviii

CHAPTER 1 INTRODUCTION 19

1.1 Reason for choosing the topic 19

1.2 Project goals 19

1.3 Project mission 20

1.4 Object & scope 20

1.5 Research methodology 20

1.6 Practical scientific significance 21

CHAPTER 2 THEORY FOUNDATION 22

2.1 Fundamentals of mobile software development 25

2.1.1 Smartphone industry 25

2.1.2 Considerations before development 26

2.1.3 Mobile software development 27

2.2 Developing with React Native 29

2.2.1 React architecture 29

2.2.2 Virtual Dom 30

2.2.3 Setting up a development environment 30

2.2.4 Building projects with native code 31

2.2.5 A React Native application 31

2.2.6 Section summary 34

2.3 React Native versus native development 35

2.3.1 Performance experiment 35

2.3.2 Disadvantages of React Native 36

2.4 Machine learning and Deep learning theory 37

2.4.1 Convolutional neural networks 37

2.4.2 Object Detection 43

2.4.3 Recurrent Neural Networks 46

Page ix

2.4.4 Natural Language Processing 52

CHAPTER 3 USER REQUIREMENT 56

3.1 Current business status 56

3.2 Requirements analysis 58

3.2.1 Require features 58

3.2.2 Require non-features 59

3.3 Lists of requirements for the software 60

3.3.1 Functional business requirements 60

2.3.3 Functional System Requirements 61

3.3.3 Non - functional requirements 61

CHAPTER 4 MODELING REQUIREMENTS 62

4.1 Identify actor in the use case diagram 62

4.2 Identify description of each function and actor 62

4.2.1 Actor detail 62

4.2.2 Feature details 64

4.3 Use-case diagram 65

4.4 Use-case specification 66

4.5 Sequence diagram 92

4.14 Cash On Delivery Sequence Diagram 92

4.14 Cash On Delivery Sequence Diagram 93

4.14 Cash On Delivery Sequence Diagram 94

CHAPTER 5 SYSTEM DESIGN 118

5.1 Database design 118

5.1.1 Logic diagram 118

5.1.2 Database table details 119

5.1.3 Entity relationship diagram 122

5.1.4 Class diagram 123

5.2 Interface & processing design 125

5.2.1 Screen flow 125

5.2.2 Screen details 126

CHAPTER 6 IMPLEMENTATION & TESTING 166

6.1 Implementation 166

6.1.1 Tools 166

6.1.2 Technology 166

6.2 Installation 166

6.2.1 IOS setup (for macOS) 166

6.2.1 Android setup 166

Page x

6.3 Testing method and techniques 167

6.3.1 White Box 167

6.3.2 Black Box 168

6.4 Using White Box Testing 169

6.4.1 getTotalPrice() 169

6.4.2 getSubTotal() 173

6.4 Bug Report 181

Test case 01 181

Test case 02 182

Test case 03 184

Test case 04 186

Test case 05 188

CHAPTER 7 CONCLUSION 190

7.1 Achievement 190

7.2 Advantages 190

7.3 Disadvantages 191

7.4 Future Development 191

REFERENCES 192

Page xi

List of tables

List of Tables

Table 1: Manage Category Division 60

Table 2: Manage Product Division 60

Table 3: Manage Feedback Division 61

Table 4: Make Statistic Division 61

Table 5: Functional System Requirements 61

Table 6: Non-functional Requirements 61

Table 7: Actor Identify 62

Table 8: Actor Detail 62

Table 9: Feature Details 64

Table 10: Register Use-case Specification 66

Table 11: Login Use-case Specification 67

Table 12: Logout Use-case Specification 68

Table 13: Add New Category Use-case Specification 69

Table 14: Update Category Use-case Specification 70

Table 15: Delete Category Use-case Specification 71

Table 16: Add New Product Use-case Specification 72

Table 17: Update Product Use-case Specification 73

Table 18: Delete Product Use-case Specification 74

Table 19: View Category Use-case Specification 75

Table 20: View Product Detail Use-case Specification 76

Table 21: Add Favorite Product Use-case Specification 77

Table 22: Search Product Information Use-case Specification 78

Table 23: Add New Feedback Use-case Specification 79

Table 24: Update Feedback Use-case Specification 80

Table 25: Delete Feedback Use-case Specification 81

Table 26: Chat Use-case Specification 82

Table 27:Add Product To Cart Use-case Specification 83

Table 28: Change Quantity Use-case Specification 84

Table 29: Remove Product From Cart 85

Table 30: Cash On Delivery Use-case Specification 86

Table 31: Make Online Payment Use-case Specification 87

Page xii

List of tables

Table 32: Delete Account Use-case Specification 88

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

Table 34: Make Statistic Use-case Specification 90

Table 35: Check Customer Order Use-case Specification 91

Table 36: User Details 119

Table 37: Product Details 119

Table 38: Category Details 120

Table 39: Feedback Details 120

Table 40: Order Details 121

Page xiii

List of Figures

List of Figures

Figure 1: Comparison of JavaScript vs Native developer’s salaries 23

Figure 2: Most pull requests 2017 24

Figure 3: Smartphone OS Market Share 25

Figure 4: Geographical Distribution of Smartphones 2017 26

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

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

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

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

32 Figure 9: Code block to demonstrate how to style components in React Native 33

Figure 10: React-redux flow diagram 34

Figure 11: Swift vs React-Native Memory Usage 35

Figure 12 Biological neurons in the visual cortex respond to specific patterns in small regions of the visual field called receptive fields; as the visual signal makes its way through consecutive brain modules, neurons respond to more complex patterns in larger receptive fields 37

Figure 13 CNN layers with rectangular local receptive fields 38

Figure 14 Connections between layers and zero padding 39

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

Figure 16 Applying two different filters to get two feature maps 40

Figure 17 Convolutional layers with multiple feature maps, and images with three color channels 41

Figure 18 Max pooling layer (2 × 2 pooling kernel, stride 2, no padding) 41

Figure 19 Invariance to small translations 42

Figure 20 Typical CNN architecture 43

Figure 21 The same fully convolutional network processing a small image (left) and a large one 45

Figure 22 Recurrent neuron 47

Figure 23 Recurrent neuron (left) unrolled through time (right) 47

Figure 24 A layer of recurrent neurons (left) unrolled through time (right) 47

Figure 25 A cell’s hidden state and its output may be different 48

Page xiv

List of Figures

Figure 26 Seq-to-seq 49

Figure 27 Seq-to-vector 49

Figure 28 Vector-to-seq 49

Figure 29 Encoder-Decoder networks 50

Figure 30 Backpropagation through time 50

Figure 31 Preparing a dataset of shuffled windows 52

Figure 32 Preparing a dataset of consecutive sequence fragments for a stateful RNN 53

Figure 33 A simple machine translation model 54

Figure 34 A bidirectional recurrent layer 55

Figure 35: Lazada Application 56

Figure 36: Shopee Application 57

Figure 37: Use-case Diagram 65

Figure 38: Register Sequence Diagram 92

Figure 39: Login Sequence Diagram 93

Figure 40: Logout Sequence Diagram 94

Figure 41: Add New Category Sequence Diagram 95

Figure 42: Update Category Sequence Diagram 96

Figure 43: Delete Category Sequence Diagram 97

Figure 44: Add New Product Sequence Diagram 98

Figure 45: Update Product Sequence Diagram 99

Figure 46: Delete Product Sequence Diagram 100

Figure 47: View Category Sequence Diagram 101

Figure 48: View Product Detail Sequence Diagram 102

Figure 49: Add Favorite Product Sequence Diagram 103

Figure 50: Search Product Information Sequence Diagram 104

Figure 51: Add New Feedback Sequence Diagram 105

Figure 52: Update Feedback Sequence Diagram 106

Figure 53: Delete Feedback Sequence Diagram 107

Figure 54: Chat Sequence Diagram 108

Figure 55: Add Product To Cart Sequence Diagram 109

Figure 56: Change Quantity Sequence Diagram 110

Figure 57: Remove Product From Cart Sequence Diagram 111

Page xv

List of Figures

Figure 58: Cash On Delivery Sequence Diagram 112

Figure 59: Make Online Payment Sequence Diagram 113

Figure 60: Delete Account Sequence Diagram 114

Figure 61: Update User’s Information Sequence Diagram 115

Figure 62: Make Statistic Sequence Diagram 116

Figure 63: Check Customer Order Sequence Diagram 117

Figure 64: Logic Diagram 118

Figure 65: Entity Relationship Diagram 122

Figure 66: Class Diagram 123

Figure 67: Screen Flow Diagram 125

Figure 68: Splash Screen UI 126

Figure 69: Walk Through Screen 1 UI 127

Figure 70: Walk Through Screen 2 UI 128

Figure 71: Walk Through Screen 3 UI 129

Figure 72: Home Screen UI 130

Figure 73: Layout Screen UI 131

Figure 74: Tab Bar Screen UI 132

Figure 75: Navigation Screen UI 133

Figure 76: Register Screen UI 134

Figure 77: Login Screen UI 135

Figure 78: SMS Login Screen UI 136

Figure 79: SMS Code Proivde Screen UI 137

Figure 80: Category Screen UI 138

Figure 81: Product List Screen UI 139

Figure 82: Product Detail Screen UI 140

Figure 83: Search Screen UI 142

Figure 84: Search Filter Screen UI 143

Figure 85: Search Filter Screen 2 UI 144

Figure 86: Sort Screen UI 145

Figure 87: Wish List Screen UI 146

Figure 88: Wish List Screen 2 UI 147

Figure 89: Cart Screen UI 148

Page xvi

List of Figures

Figure 90: Cart Screen 2 UI 149

Figure 91: Delivery Screen UI 150

Figure 92: Payment Screen UI 151

Figure 93: Order Screen UI 152

Figure 94: My Order Screen UI 153

Figure 95: Order Detail Screen UI 154

Figure 96: User Setting Screen UI 155

Figure 97: User Setting After Login Screen UI 157

Figure 98: Address Screen UI 158

Figure 99: Add Address Screen UI 159

Figure 100: Currency Screen UI 160

Figure 101: Language Screen UI 161

Figure 102: Contact Us Screen UI 162

Figure 103: Policies Screen UI 163

Figure 104: Term & Condition Screen UI 164

Figure 105: About Us Screen UI 165

Page xvii

List of abbreviations

List of Abbreviations

MVC Model-View-Controller An architectural pattern commonly used for developing

user interfaces that divides an application into three interconnected parts.

DOM Document Object Model A cross-platform and language-independent application

programming interface that treats an HTML document as a tree structure wherein each node is an object representing a part of the document.

IDE Integrated Development Environment A software application that provides

programmers comprehensive facilities for software development.

UI User Interface Space where interactions between humans and machines occur.

API Application Programming Interface A set of subroutine definitions, protocols, and

tools for building application software.

CPU Central Processing Unit the electronic circuitry within a computer that carries out

the instructions of a computer program by performing the basic arithmetic, logical, control, and input/output (I/O) operations specified by the instructions.

Page xviii

Chapter 1 Introduction

CHAPTER 1 INTRODUCTION

1.1 Reason for choosing the topic

Nowadays, information technology is constantly developing strongly and modernly.The applications of information technology increasingly deepening into human life become

an indispensable part of the civilized world With the trend of math and demand for theworld economy, especially the demand for exchanging goods of people is increasing both inquantity and quality, the demand for Internet is more and more and the above forms ofbusiness The network is increasingly diversified and becomes an indispensable tool Somany stores have applied the method of selling online (e-commerce) so that customers caneasily find information and do not need to spend a lot of time and costs

Gift Shop UTE was born to serve students and lecturers at the Ho Chi Minh CityUniversity of Technical Education through products such as school uniforms, textbooks,and products branded HCMUTE

For such a large-scale store, promoting and providing information to help customerschoose a product like that is very difficult The problem posed in parallel with it is howcustomers can order selected products quickly and conveniently, without wasting time topick up and pay From the above issues, with the consent and guidance of Nguyen Tran ThiVan MSc, we have chosen the topic: "Building an e-commerce system using ReactJS andReact Native" With our dream that the topic will be put into application for HCMUTE, so

we will try and look forward to receiving comments and direction from the teachers

1.2 Project goals

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

Page 20

Chapter 1 Introduction

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

1.6 Practical scientific significance

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

The introduction of this application and website not only solves the difficulties of theUTE Gift Shop but also gives students and lecturers a quick and convenient way They onlyneed to stay at home and perform a few small steps to get the product they want

With this application and website, students and teachers will be completelyconfidential about personal information Also, the store will make it easier to promote itsimage to all students on many media

Page 21

Chapter 2 Theory Foundation

CHAPTER 2 THEORY FOUNDATION

“Learn once, write anywhere.”

According to [1], React (also known as React.js or ReactJS) is a free and source front-end JavaScript library for building user interfaces or UI components It ismaintained by Facebook and a community of individual developers and companies Reactcan be used as a base in the development of single-page or mobile applications However,React is only concerned with state management and rendering that state to the DOM, socreating React applications usually requires the use of additional libraries for routing, aswell as certain client-side functionality

open-In [2], React Native is an extension of React, which was released in 2015 anddesigned for native mobile software development React Native is written withJavaScript, a well-known programming language, and aims to allow for use of nativemobile functionalities and integration

However, at its core React is essentially a library framework for the programminglanguage JavaScript, which is used in web development Facebook initially releasedReact for general availability in 2013 Facebook developed React as an alternative to thestandard MVC frameworks that were available at the time Facebook set out to make alibrary that would be scalable and work more responsively to traditional directive-drivenprogramming languages Pete Hunt states that React is designed to encourage thereusability of components that the developer creates React utilizes JavaScript, as it is aflexible and powerful programming language, which is important when buildinglargescale applications

Each component in React works separately from one another, allowing forminimal and efficient changes to the DOM Another feature that Facebook developed forReact is the use of JSX, an alternative to standard JavaScript Syntax when creatingcomponents JSX shares similarities with HTML and HTML5, making it readable tosoftware developers who are familiar with those coding languages

Since 2013, React has been gaining popularity amongst software developers for itsflexibility, reusability, and scalability These factors make it ideal for developing newer

Page 22

Chapter 2 Theory Foundation

software that is future proof and the code base is not wasted when developing newerprojects Facebook then went onto develop React further and released React Native in2015

React Native proves beneficial to developers or teams who are on a budget as theapplication can support both major platforms with the same code base Kociecki writesthat in his latest React Native project, the development time took 33% less than if theyhad been developing iOS and Android separately The development of a React Nativeapplication also does not require the need for native developers, who have a higher salary

on average (See Figure 1)