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

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 GRADUATION PROJECT BUILDING AN E-COMMERCE SYSTEM USING REACTJS AND REACT NATIVE TRAN THANH HIEN Student ID: 17110026 MAI NGOC ANH DUY Student ID: 17110013 TRAN THUAN TUONG VY Student ID: 17110093 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 1st, 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 Project title: Building an E-commerce system using ReactJS and React Native 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 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) THE SOCIALIST REPUBLIC OF VIETNAM 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 Content of the project: Strengths: Weaknesses: Approval for oral defense? (Approved or denied) Overall evaluation: (Excellent, Good, Fair, Poor) Mark:……………….(in words: ) Ho Chi Minh City, August 15, 2021 ADVISOR (Sign with full name) 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 Content and workload of the project Strengths: Weaknesses: Approval for oral defense? (Approved or denied) Overall evaluation: (Excellent, Good, Fair, Poor) 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 Content and workload of the project Strengths: Weaknesses: Overall evaluation: (Excellent, Good, Fair, Poor) Mark:……………….(in words: ) Ho Chi Minh City, August 20, 2021 COMMITTEE MEMBER (Sign with full name) Acknowledgment 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 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 Page viii Contents 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 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 THEORY FOUNDATION 22 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 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 React Native versus native development 35 2.3.1 Performance experiment 35 2.3.2 Disadvantages of React Native 36 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.1 2.2 2.3 2.4 Page ix Contents 2.4.4 Natural Language Processing CHAPTER USER REQUIREMENT 52 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 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 3.3 CHAPTER MODELING REQUIREMENTS 62 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 4.1 CHAPTER SYSTEM DESIGN 118 Database design 118 Logic diagram 118 5.1.2 Database table details 119 Entity relationship diagram 122 5.1.4 Class diagram 123 Interface & processing design 125 5.2.1 Screen flow 125 5.2.2 Screen details 126 5.1 5.1.1 5.1.3 5.2 CHAPTER IMPLEMENTATION & TESTING 166 Implementation 166 6.1.1 Tools 166 6.1.2 Technology 166 Installation 166 IOS setup (for macOS) 166 6.2.1 Android setup 166 6.1 6.2 6.2.1 Page x