Building an e commerce system using reactjs and react native

HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING Ho Chi Minh City, 2021 CAPSTONE PROJECT SOFTWARE ENGINEERING BUILDING AN E-COMMERCE SYSTEM USI

HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION

FACULTY FOR HIGH QUALITY TRAINING

Ho Chi Minh City, 2021

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

SKL 0 0 8 4 7 7

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

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 ReactJS

- Research and learn React Native

- Research and learn Docker

- Research and learn Terraform with AWS providers The services are being used: + Elastic Compute Cloud (EC2)

+ IAM Service

+ CloudWatch Service

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:

- An application on a mobile phone (user)

- A website (user)

- A website (admin)

CHAIR OF THE PROGRAM

(Sign with full name)

ADVISOR

(Sign with full name)

Independence – Freedom– Happiness

-

Ho Chi Minh City, August 15, 2021

ADVISOR’S 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

Advisor: Nguyen Tran Thi Van, MSc

EVALUATION

1 Content of the project:

2 Strengths:

3 Weaknesses:

4 Approval for oral defense? (Approved or denied)

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)

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!

Preface

Creating mobile apps often requires developers to create an app for Android, one for iOS, the top two mobile operating systems The two apps may have the same layout and logic, but some of the UI elements will be different, and the applications themselves need to be developed in two different languages This process is terrible because it takes a long 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 this problem but these hybrids cannot provide the original feel of the resulting applications

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

in universities The overall experience is that React Native is a very interesting framework 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, and one 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 of idea 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

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

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.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

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 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

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 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

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

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

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

NPM Node Package Manager A package manager for JavaScript

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

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 the world economy, especially the demand for exchanging goods of people is increasing both

in quantity and quality, the demand for Internet is more and more and the above forms of business The network is increasingly diversified and becomes an indispensable tool So many stores have applied the method of selling online (e-commerce) so that customers can easily 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 City University 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 customers choose a product like that is very difficult The problem posed in parallel with it is how customers can order selected products quickly and conveniently, without wasting time to pick up and pay From the above issues, with the consent and guidance of Nguyen Tran Thi Van MSc, we have chosen the topic: "Building an e-commerce system using ReactJS and React 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

• 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:

• Analyze the requirements and realize the system

• Analysis of requirements:

- System modeling

- Design handling

1.3 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

1.4 Object & scope

• Theoretical research method

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

• Methods of experimental research

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

1.6 Practical scientific significance

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

The introduction of this application and website not only solves the difficulties of the UTE Gift Shop but also gives students and lecturers a quick and convenient way They only need 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 completely confidential about personal information Also, the store will make it easier to promote its image to all students on many media

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 is maintained by Facebook and a community of individual developers and companies React can 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, so creating React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality

open-In [2], React Native is an extension of React, which was released in 2015 and designed for native mobile software development React Native is written with JavaScript,

a well-known programming language, and aims to allow for use of native mobile functionalities and integration

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

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

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

Most of the time, a project aimed to build a mobile application will require both a website and a native mobile application React and React Native can be written by the same developer and both applications can share code as the applications are both written in JavaScript With no requirement for a native platform expert, React Native development teams tend to be smaller and more manageable for a product owner or project manager

Amongst languages that are used for web development, JavaScript continues to be one of the most popular languages The community contribution to improving JavaScript

Figure 1: Comparison of JavaScript vs Native developer’s salaries [3]

is overwhelming, as can be seen in Figure 2, with over two million pull requests on GitHub

in 2017 Each pull request represents some form of a contribution to the code that is on GitHub

Part of this contribution went towards developing React Native even further This can be seen by the efforts of software engineer Leland Richardson at Airbnb, who has been working on developing a fully cross-platform version of React Native, which was named React Native Primitives This library attempts to reduce the React Native framework just down to components that do not use platform-specific APIs This library can be used to make code that is useable regardless of whether it is for a web or native application

With the ongoing efforts of JavaScript and React Native developers, the framework

is constantly improving and proving itself to be an increasingly popular option for software engineers who have experience with JavaScript or React, and wish to develop native mobile applications

Figure 2: Most pull requests 2017 [4]

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

Apple’s mobile devices use the iOS operating system, which during its conception was based on their existing MacOS This meant that many of the features that macOS had during the early 2000s were incorporated into iOS, then known as OS X, making them feel familiar to iPhone users Due to Apple manufacturing its own devices, Apple can create software that is targeted specifically for their devices Whereas, Android has a harder time fine-tuning their operating system and software updates to support multiple devices with different hardware capabilities

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

2012 to 2016 However, the bar chart only represents a percentage of total smartphone users and does not account for the ever-increasing number of smartphone owners Therefore, although it seems that Apple’s market share percentage has decreased, the actual number of people that own Apple devices had risen within those four years

Figure 3: Smartphone OS Market Share [5]

Figure 4 highlights the different regions in which the majority of smartphone users either own an iOS or Android device Most of the First World countries tend to favor iOS devices, whereas developing countries prefer Android devices This may be mainly due to the price difference in the devices, with iOS devices being on average significantly more expensive

Figure 4 can also help explain the large difference between the total market share percentages, seen in Figure 3, as countries with extremely high populations including China, India, and Russia seem to have a larger portion of people using an Android device

With both Android and Apple devices becoming increasingly popular, it is more important for software developers to be able to support both types of devices However, it can be expensive and time-consuming for companies to try to create and maintain software applications that are individually coded for two different platforms

2.1.2 Considerations before development

As the goal of the project is to develop a well-designed mobile application using React Native this section of the thesis will focus on the basic concepts and knowledge requirements for developing mobile applications Mobile marketing has become one of the

Figure 4: Geographical Distribution of Smartphones 2017 [5]

most important, if not the most important, parts of just about any marketing strategy People rely on their mobile devices for just about any activity imaginable and any company that

is not part of this global trend seems to be out of touch

As the public relies more on their mobile devices, the industry continues to grow, and the demand for businesses to have well-functioning applications increases The mobile technology revolution has highlighted the importance of good usability in an application This involves ensuring that the user has a pleasant experience while using the applications User experience (UX) designers have become a core part of good application development, especially for mobile applications, as they are required to consider all the different possibilities in which a user may use the application most effectively

To overcome this hurdle of understanding what the user requirements are, the application should be developed using agile software development This technique provides the user and customer with an updated to date understanding of the development process of the application Agile as a development tool provides the programmers and designers with a lot of knowledge of what the user requirements are for the application

The user interface designers of the application should take into consideration a lot about ergonomics whilst designing, as there are many key aspects of how to improve the user’s experience of the application A well-designed user interface will position the most important, or most frequently used parts of the application towards the left side of the lower half of the screen as most users are right-handed and use their right thumb when holding their mobile devices

2.1.3 Mobile software development

As a developer, it is required to have a good channel of communication with the user interface designer as there may be times that the developer can become focused on one certain way of implementation and not be able to consider other designs However, the roles may be reversed and a developer could point out user experience improvements that could be made, as they are working with the application the most during development

Mobile software engineers were restricted to developing in certain languages, which made the entry requirements to become a native application developer rather limited The

two largest mobile platforms, iOS, and Android have been competing against one another since the late 2000s and developers have struggled to ensure that their applications receive visibility on both platforms With iOS applications programmed with Objective-C, and now Swift, and Android applications written in Java or Kotlin, it can take developers an inefficient amount of time to rewrite their application in an entirely different coding language that may behave significantly differently as well Ideally, a developer would want

to be able to write and maintain a single application for a universal platform [5]

For a solution, software engineers turned to web applications, as they could be created without the restriction of being limited to a single platform Many frameworks for developing multi-platform applications began to arise, promoting the use of hybrid applications Essentially a hybrid application is a web application that runs inside a chromeless browser window called WebView Developers were able to take web development another step further, allowing a hybrid application to look and act almost indistinguishable from a native application

Hybrid applications can be written with JavaScript, HTML5, and CSS which makes them appealing to create for web developers and entry-level developers Due to the availability of developers with this particular skill set, hybrid applications tend to appeal

to small and medium-sized businesses as multi-platform capabilities allow their applications to reach a wider audience

One of the main frameworks used for deploying hybrid web applications is Apache Cordova This tool is an open-source framework tool designed to aid in the deployment of

a web application directly onto a mobile device Using Cordova can benefit developers who wish to deploy their existing responsive web application directly onto a mobile device

to mimic the behavior of a native mobile application The developer does not need to rewrite any code or learn any additional languages or frameworks to achieve this as the deployment instructions are present on the Cordova website There are however limitations

to hybrid applications that are visible to a developer Some of these disadvantages can be observed when measuring the performance difference of a hybrid application against a native one, as hybrid applications add a layer between the source code and the target mobile platform via the mobile device’s browser Hybrid applications tend to be unable to compete

against native applications that are using newer device features like the hybrid applications cannot access all the variety of features that native applications can utilize during development This is due to the dependency on the frameworks that the hybrid applications are built in

In conclusion, hybrid applications have gained popularity with developers or businesses that wish to develop an application for multiple platforms Hybrid applications provide a great alternative to native applications as they are cost and time-efficient to create and maintain They are however limited and may be unable to compete against the newer native applications, due to the hybrid application’s reliance on a third-party framework

Facebook founder Mark Zuckerberg, stated in an interview in 2012 “Our biggest mistake was betting too much on HTML5” when discussing Facebook’s mobile strategy and they moved over to using a native application It was clear that Facebook felt restricted

by the capabilities of a hybrid application so they instead began development on their native framework that allowed them to fully utilize all the functionalities of the mobile device This native framework was later to be known as React Native

2.2 Developing with React Native

2.2.1 React architecture

React and React Native both use Flux architecture to handle the data flow within the application This was created by Facebook as an alternative to the traditional MVC model, during the development of React Flux varies from MVC by following the concept

of a unidirectional data flow making it easier to locate any errors

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

The Flux data flow reduces the complexity of the MVC data flow by not using way bindings and requiring all actions to be passed to the centralized dispatcher (See Figure 5) Flux prevents cascading updates which often occur in the MVC model Flux shares similarities with functional relative programming and flow-based programming The single dispatcher handles all the changes to the different stores, within the data layer of the application No extra actions are triggered until the store has finished updating the data values The View of the application is re-rendered according to changes

two-2.2.2 Virtual Dom

Within React and React Native, the UI is expressed as a function of the data within the application Therefore, the developer does not need to be concerned with how the content of the UI will be rendered to the DOM This is achieved by having an intermediate DOM within the React framework that is known as the Virtual DOM By batching any required changes together, the Virtual DOM can compare the before and after states of the Virtual DOM and determine the minimum number of real DOM manipulations that need

to be made Developers at Facebook then took this concept another step further by applying the same principle to a native mobile platform to create React Native

2.2.3 Setting up a development environment

To get started with React Native, the developer may choose any IDE of their choice and then download Node, package management software, that allows the user to download additional software development tools and libraries Once Node is installed, the developer

should navigate to where they wish to create their application and use the following

create-react-native-app command-line utility:

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

That is essentially all that is required to create the application and then it can be

started with npm start from the command line, which will provide the developer with a QR

code The QR code can be scanned with the Expo client application on an iOS or Android phone as long as both the computer and phone are on the same wireless network

2.2.4 Building projects with native code

React Native has the option to extend and advance the codebase from an existing native application This is beneficial to exist native projects that wish to take advantage of the features React Native can offer

To do this, however, requires the use of a native development IDE, which in the case of an Android application is Android Studio A few extra steps must be taken to configure this correctly, which are dependent on the operating system of the developer’s computer A full list of the different installation processes can be found in the official React Native documentation on Facebook’s website

Another benefit to building the project this way is the additional use of an emulator, provided by the IDE, which can prove useful when developing without the need for a physical device

2.2.5 A React Native application

This section of the project will demonstrate how to create a simple example application using React Native If all the prerequisites have been followed, the application will now be running on the mobile phone The following instructions will guide a developer

on how to create a simple component for the application that can demonstrate the fundamentals of React

Firstly, the developer should create a new file and according to correct naming conventions, name the file the same as the component class name Afterward, the developer should import React and Component from the react library, and then inherit from the Component class

The code shown above demonstrates clearly how to structure a JavaScript file when writing React code The render method on the fourth line is the main function that is called that will display the View component on the UI visually

React components often have parameters by which they can be customized, these parameters are known as props These props are set by the parent and are fixed throughout the lifetime of the component However, these props allow for the reusability of the same component in many ways It is important to check the documentation of React Native components that are being used in an application to know what props they contain and how

to customize the component properly

React Native, unlike React, does not use existing standard HTML element tags, instead, it has specifically built components that render similarly The “View” component

is very similar to the “<div>” tag as they both act essentially as containers for their content React Native also does not use individual CSS files for element styling, instead, it uses a class called “StyleSheet” This class can be imported from React Native and creates an object, which looks similar to a JSON object, that can be passed to the style prop of the element components as seen below in the renderFormItem function

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

Within React and React Native applications each component has two types of data that control it, props and state The state of the component is known as the internal state, and it is initialized in the constructor of the component and then modified via the setState function call

However, with the addition of the React-Redux library, it is possible to have a global state contained in the redux store This redux store is accessible from all parts of the application and provides good visibility on how the data within the application is structured

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

When a change in the View (User interface) occurs, an action is dispatched When actions have been dispatched the values within the redux store will change (See Figure 10) Actions contain a payload object which is handled by the reducer to determine how to update the state accordingly This alteration to the state is then reflected in the view, usually with a visual change to the components

React-Redux functions the same in both React and React Native which makes it an ideal choice when designing the architecture of an application that requires both a website and a mobile application as the actions, reducers and redux store can all be identical, further increasing the speed of the application’s development

2.2.6 Section summary

To summarize, React Native allows a developer to set up a simple working application with ease It is a time-efficient way of creating an application that can be shown directly onto the screen of a mobile device This allows the developer to see their changes update in real-time on the mobile device, which infers that the user interface and user experience improvements can be tested effectively with other people

A developer may also use React Native as an extension of an existing native project making it easy to support multiple platforms with a single code base The tools within

Figure 10: React-redux flow diagram [7]

Within the first three views of the application, the difference between the two coding languages was of a minimum percentage that would not be noticeable by a user However, when moving onto the high memory demanding view of the Maps it was clear that React-Native outshone Swift by using 61MB less memory than Swift

React-Native has shown to be able to outperform Swift when it comes to memory usage with demanding processes as seen in Figure 6 The tests were performed fairly with repeated results provided and the average has been represented as on the bar chart in Figure

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]

as JavaScript can be used to develop efficient applications for mobile devices that can even outperform native coding languages

2.3.2 Disadvantages of React Native

Although React Native has many benefits, the framework is not without its shortcomings The framework contains clear flaws that can make React Native difficult for some developers to use Firstly, there is currently only a small amount of documentation available for the framework, with the majority of it being provided by Facebook via the framework’s release notes

Another issue that React Native has is that the tool is always adapting and changing

to newer versions meaning that it is a high maintenance framework A developer must be ensuring that they can know how to use the current version of React Native that is required

When writing a React Native application it is not always truly cross-platform as the same application cannot make use of both native functionalities and act as a standalone web application simultaneously React also has a steep learning curve to it, with it being structured and written differently from a usual HTML and JavaScript web application This learning curve may hinder the production of the application

As React Native can utilize native components and functionality, to use it to its full potential, a developer must have pre-existing knowledge of native development on that platform However, these disadvantages are all able be overcome by a developer who is committed to the application that they are developing

2.4 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

In the last few years, thanks to the increase in computational power, the amount

of available training data, CNNs have managed to achieve superhuman performance on some complex visual tasks They power image search services, self-driving cars, automatic 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 Convolutional neural networks

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

In particular, they showed that many neurons in the visual cortex have a small local receptive field, meaning they react only to visual stimuli located in a limited region of the visual field The receptive fields of different neurons may overlap, and together they tile the whole visual field

Moreover, the authors showed that some neurons react only to images of horizontal lines, while others react only to lines with different orientations (two neurons may have the same receptive field but react to different line orientations) They also noticed that some

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 [9]

2.4.1.2 Convolutional layer

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]

It is also possible to connect a large input layer to a much smaller layer by spacing out the receptive fields, as shown in Figure 14 This dramatically reduces the model’s computational complexity The shift from one receptive field to the next is called the stride

2.4.1.3 Stride

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

For example:

Convolutional layer 1: dimension of 5x7 neurons

Vertical stride = 1, horizontal stride = 2

=> Dimension of convolutional layer 2: 3x2

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]

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

- If set to "valid", the convolutional layer does not use zero paddings and may ignore some rows and columns at the bottom and right of the input image, depending on the stride,

as shown in Figure 15

2.4.1.4 Filter

The weight of each convolutional layer is a 2D array

This 2D array is called a filter

Size of filter = receptive rectangle

2.4.1.5 Feature maps

1 filter => 1 feature map

Feature map is the output of previous image convoluted with filter

The size of feature map = size of convolutional layer

Note: A filter => weight

We do not have to define the filters manually: instead, during training, the convolutional layer will automatically learn the most useful filters for its task, and the layers above will learn to combine them into more complex patterns

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