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 SKL 0 7 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 ADVISOR (Sign with full name) (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 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 Contents 2.4.4 Natural Language Processing .52 CHAPTER 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 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 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 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 Chapter Implementation & Testing Lifecycle of [newQuantity] variable - 1st scenario: ~ - 2nd scenario: ~ duuk Page 180 Chapter Implementation & Testing 6.4 Bug Report Test case 01 ID number Name Reporter Submit Date Summary URL HN_013 Admin system Header – Unable to click the Message button Tran Thuan Tuong Vy January 10, 2021 Admin click message button on a header in Admin System got 404 error https://hcmutee.me/wp-admin/edit-comments.php Screenshot Platform Operating System Browser Severity Assigned to Macintosh OS X 10.15.7 Chrome 87 Major / Priority High Description Test message button in the header in Admin system Steps to reproduce > Navigate to https://hcmutee.me/admin/wp-admin > Enter Username & Password > Click Login > Click message button in Header Expected result The application displays a chat box Page 181 Chapter Implementation & Testing Actual result The application shows a 404 error Notes Test case 02 ID number Name Reporter Submit Date Summary URL HN_014 Admin system Header – Unable to click New button Tran Thuan Tuong Vy January 10, 2021 Admin click message button on a header in Admin System got 404 error https://hcmutee.me/wp-admin/post-new.php Screenshot Platform Operating System Browser Severity Assigned to Priority Macintosh OS X 10.15.7 Chrome 87 Major / High Page 182 Chapter Implementation & Testing Description Test login function with the wrong password Steps to reproduce > Navigate to https://hcmutee.me/admin/wp-admin > Enter Username & Password > Click Login > Click New button in Header Expected result The application must display a new post Page Actual result The application shows a 404 error Notes Page 183 Chapter Implementation & Testing Test case 03 ID number Name TH_026 Login without email and password Reporter Tran Thanh Hien Submit Date January 10, 2021 Summary URL We didn’t enter email and password But the application didn’t show an error message N/A Screenshot Platform Operating System Browser Severity Assigned to Priority Android Android 8.0 N/A Medium / Medium Page 184 Chapter Implementation & Testing Description Test login function without email and password Steps to reproduce > Open the app > Navigate to Login screen > Skip email field > Skip password field > Press login button Expected result The application must display validation error messages: "Invalid Email" and "Invalid Password" Actual result The application did not show validation error messages Notes Page 185 Chapter Implementation & Testing Test case 04 ID number Name TH_029 Login with special characters Reporter Tran Thanh Hien Submit Date January 10, 2021 Summary URL We enter emails and passwords with special characters But the application has not shown any error message N/A Screenshot Platform Operating System Browser Severity Assigned to Priority Android Android 8.0 N/A Medium / Medium Page 186 Chapter Implementation & Testing Description Test login function with email having special characters Steps to reproduce > Open the app > Navigate to Login screen > Enter email field > Enter password field > Press login button Expected result The application must display validation error messages: "Invalid Email" Actual result The application did not show validation error messages Notes Page 187 Chapter Implementation & Testing Test case 05 ID number Name TH_030 Login with operator characters Reporter Tran Thanh Hien Submit Date January 10, 2021 Summary URL We enter email and password with operator characters But the application has not shown any error message N/A Screenshot Platform Operating System Browser Severity Assigned to Priority Android Android 8.0 N/A Medium / Medium Page 188 Chapter Implementation & Testing Description Test login function with email having operator characters Steps to reproduce > Open the app > Navigate to Login screen > Enter email field > Enter password field > Press login button Expected result The application must display validation error messages: "Invalid Email" Actual result The application did not show validation error messages Notes Page 189 Chapter Conclusion CHAPTER CONCLUSION 7.1 Achievement About knowledge and skills Through the process of implementing the topic, the student group has accumulated extremely useful knowledge and experience: • Know the software construction and design process • Practicing interviewing and teamwork skills • Train programming skills on ReactJS, React Native, especially use Docker and apply the MVC model About the topic The program is built by the team to ensure all the basic functions that a formula viewer application puts out: • Search the product • Register a new account • Log in to the application • See the product category • View the product details • Add to favorite list • Manage product types • Product management 7.2 Advantages The construction team program has the following advantages: • The functions managed by the screen should help users have an easy operation Page 190 Chapter Conclusion • The application has many basic functions, fully meets the requirements of the user • The function buttons are easy to touch and the beautiful UI attracts users • The application supports advanced features: dark mode, change language, change currency • The application can run cross-platform IOS and Android 7.3 Disadvantages • The program requires an internet connection to run • The program uses lots of images so sometimes the form loads a bit slow • The program is limited to delete, edit functions 7.4 Future Development Because the first time building applications on mobile phones and programming experience is still weak, the program cannot avoid mistakes In the future, the team will try to perfect the program and update more features • The next version of the application will run without connecting to the internet • Support online payment (Paypal, Visa/Master Card) • Support mobile version for management • Improve User Interface and User Experience Page 191 References REFERENCES [1] “React (JavaScript library) - Wikipedia”, En.wikipedia.org, 2021 Available: https://en.wikipedia.org/wiki/React_(JavaScript_library) [Accessed: 04- Jul- 2021] [2] “React Native – Wikipedia”, En.wikipedia.org, 2021 Available: https://en.wikipedia.org/wiki/React_Native [Accessed: 04- Jul- 2021] [3] “Glassdoor Job Search”, Glassdoor, 2021 Available: https://www.glassdoor.com [Accessed: 07- Jul- 2021] [4] “Most Popular and Influential Programming Languages of 2018 | TechMeetups”, Techmeetups.com, 2021 Available: https://techmeetups.com/most-popular-and-influentialprogramming-languages-of-2018/ [Accessed: 07- Jul- 2021] [5] “Apple Vs Android - A comparative study 2017”, Medium, 2021 Available: https://android.jlelse.eu/apple-vs-android-a-comparative-study-2017- c5799a0a1683 [Accessed: 07- Jul- 2021] [6] “Narayan A React Native vs Native iOS/Android”, 15th November 2017 Available: https://www.coursereport.com/blog/so-you-want-to-build-a-mobile-app-reactnative-vs-native-mobile [Accessed: 07- Jul- 2021] [7] “Bristowe J What is a hybrid mobile app”, 25th March 2015 Available: https://developer.telerik.com/featured/what-is-a-hybrid-mobile-app [Accessed: 07- Jul2021] [8] “Flux, application architecture for building user interfaces” Available: https://facebook.github.io/flux/docs/in-depth-overview [Accessed: 07- Jul- 2021] Page 192 References [9] A Géron, “Chapter 14 Deep Computer Vision Using Convolutional Neural Networks,” in Hands-on machine learning with SCIKIT-LEARN, Keras, and TENSORFLOW: Concepts, tools, and techniques to build intelligent systems, Beijing: O'Reilly, 2020 [10] A Géron, “Chapter 15 Processing Sequences Using RNNs and CNNs,” in Hands-on machine learning with SCIKIT-LEARN, Keras, and TENSORFLOW: Concepts, tools, and techniques to build intelligent systems, Beijing: O'Reilly, 2020 [11] A Géron, “Chapter 16 Natural Language Processing with RNNs and Attention,” in Hands-on machine learning with SCIKIT-LEARN, Keras, and TENSORFLOW: Concepts, tools, and techniques to build intelligent systems, Beijing: O'Reilly, 2020 Page 193 S K L 0