Reseach for building a multi platform phone e commerce system (mobile and website) mern stack and react native application faculty of high quality training graduations thesis of the information technology

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN RESEARCH FOR BUILDING A MULTI-PLATFORM PHONE E-COMMERCE SYSTEM (MOBILE AND WEBSITE) MERN STACK AND REACT-NATIVE APPLICATION GVHD:LE VINH THINH SVTH: NGUYEN THANH NHU NGO HOANG MINH TAM SKL008089 Tp Hồ Chí Minh, tháng 07/2021 HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING GRADUATION PROJECT RESEARCH FOR BUILDING A MULTI-PLATFORM PHONE E-COMMERCE SYSTEM (MOBILE AND WEBSITE) MERN STACK AND REACT-NATIVE APPLICATION NGUYEN THANH NHU Student ID: 17110202 NGO HOANG MINH TAM Student ID: 17110218 Major: INFORMATION TECHNOLOGY Advisor: LE VINH THINH PhD Ho Chi Minh City, July 2021 HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING GRADUATION PROJECT RESEARCH FOR BUILDING A MULTI-PLATFORM PHONE E-COMMERCE SYSTEM (MOBILE AND WEBSITE) MERN STACK AND REACT-NATIVE APPLICATION NGUYEN THANH NHU Student ID: 17110202 NGO HOANG MINH TAM Student ID: 17110218 Major: INFORMATION TECHNOLOGY Advisor: LE VINH THINH PhD Ho Chi Minh City, July 2021 THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -Ho Chi Minh City, July 23, 2021 GRADUATION PROJECT ASSIGNMENT Student name: Nguyen Thanh Nhu Student ID: 17110202 Student name: Ngo Hoang Minh Tam Student ID: 17110218 Major: Information technology Class: 2017 Advisor: Le Vinh Thinh PhD Date of assignment: March 15, 2021 Date of submission: July 20, 2021 Project title: Research for building a multi-platform phone e-commerce system (mobile and website) MERN Stack and React-Native application Initial materials provided by the advisor: None Content of the project: Building an E-commerce system to sell phones on Website and Mobile platforms: • Backend: Learn and build RESTful API based on non-relational database MongoDB based on NodeJS Express framework • Website frontend: Learn and connect API to create website interface through ReactJS library • Mobile frontend: Learn and connect API to create mobile application interface through React Native library Final product: Website and mobile app ensure the necessary functions CHAIR OF THE PROGRAM ADVISOR (Name and signature) (Name and signature) THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness ADVISOR’S EVALUATION SHEET Student name: Nguyen Thanh Nhu Student ID: 17110202 Student name: Ngo Hoang Minh Tam Student ID: 17110218 Major: Information technology Research for building a multi-platform phone e-commerce system (mobile and website) MERN Stack and React-Native application Advisor: Le Vinh Thinh PhD 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, ., 2021 ADVISOR (Name and signature) THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness PRE-DEFENSE EVALUATION SHEET Student name: Nguyen Thanh Nhu Student ID: 17110202 Student name: Ngo Hoang Minh Tam Student ID: 17110218 Major: Information technology Project title: Research for building a multi-platform phone e-commerce system (mobile and website) MERN Stack and React-Native application Name of Reviewer: 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, , 2021 REVIEWER (Name and signature) THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness EVALUATION SHEET OF DEFENSE COMMITTEE MEMBER Student name: Nguyen Thanh Nhu Student ID: 17110202 Student name: Ngo Hoang Minh Tam Student ID: 17110218 Major: Information technology Project title: Research for building a multi-platform phone e-commerce system (mobile and website) MERN Stack and React-Native application 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, , 2021 COMMITTEE MEMBER ACKNOWLEDGEMENTS Our whole group was very fortunate to receive guidance and help from teachers and friends during the implementation process Now, the group would like to send this sincere thanks to Mr Le Vinh Thinh, who directly supported the group during the process of choosing the topic, guiding, commenting, and giving suggestions as well as providing reference materials survey Without the guidance and practical experience of the teacher, we think that this topic will be difficult to complete and complete on time Once again, the whole team would like to thank Mr Le Vinh Thinh We would also like to thank the teachers in the Department of High-Quality Training for their help in supporting the group's knowledge and answering questions Along with that, the group would like to thank their classmates for providing a lot of useful information and knowledge to help the group complete the topic better The time is limited, along with limited knowledge and many other surprises, so the omission is inevitable, so the team is looking forward to receiving your valuable comments from the teachers to improve their knowledge group is to be improved later We sincerely thank you! i TABLE OF CONTENTS Acknowledgements i Table of contents ii Abstract v List of tables vi List of figures x Chapter INTRODUCTION .1 1.4.1 Functional requirements 1.4.2 Tools and techniques Chapter THEORETICAL BASIS Chapter REQUIREMENTS ANALYSIS .7 ii 3.1.1 Review the pros and cons of similar services: .7 3.1.2 Research roles and functions .10 3.1.3 Issue of records, books, and transaction documents 10 3.1.4 Assess the current situation and solutions 10 3.2.1 System Requirements 11 3.2.2 Functional and non-functional requirements .11 3.3.1 List of actors 12 3.3.2 Usecase Diagram .12 3.3.3 System Overview Usecase 12 3.3.4 Detailed Description of Usecase 15 Chapter SOFTWARE DESIGN 40 4.2.1 E-commerce modules 42 4.2.2 Administration modules .47 4.3.1 Database diagram .48 4.3.2 Database description 50 4.4.1 E-commerce Website 63 4.4.2 Administration Website .80 4.4.3 E-commerce Mobile App 92 iii Run the command line “npm run dev” to initialize - [TellMe] E-commerce page - [TellMe] Administration page 5.1.3 Run chatbot server Step 1: Open the application running Chatbot (Chatbot folder) After opening the project with Visual Studio Code, select "Terminal" on the taskbar, select "New Terminal" (Or simply press Ctrl + `) Step 2: After opening the Command Line window, run the command “rasa run action” and `rasa run enable-api debug –cors “*”` in two different Command-Line windows to run the program 5.1.4 Run mobile app Step 1: Open the application running Mobile App (mobileapp folder) After opening the project with Visual Studio Code, select "Terminal" on the taskbar, select "New Terminal" (Or simply press Ctrl + `) Step 2: After the integrated Command Line window appears, run the command "npm install" to update the missing libraries and packages on the machine that the Project needs Step 3: After opening the Command Line window, run the command “npx react-native run-android” to run the app Testing 5.2.1 Overview This section mainly describes the method for planning, organizing, and managing the test process of the TellMe e-commerce system Chapter 5: IMPLEMENTATION AND TESTING 109 System testing helps to provide all the necessary information through the testing phases to make an assessment of the system based on the criteria during testing From there, make improvements to make the sales system better - Purpose: Test the main functions of the system (important) - Method: Black-box testing 5.2.2 Test scenarios Test scenarios No Actor Function Description Guest Multi-denomination function Currency change successful, scrolling between screens is still correct in currency Guest Filter plan installment When you go to the installment page, you press the filter plan button immediately, the function will not execute because the error has not updated the price of the product Guest The function to When adding or calculate the total subtracting the quantity of amount in the cart a product or add another product type User The function calculates the shipping fee when changing the delivery address Guest Filter products by The user performs product parameters and brands filtering in the product Chapter 5: IMPLEMENTATION AND TESTING The user chooses another shipping address to check the system's shipping function 110 listing page combined by brand and parameter Chapter 5: IMPLEMENTATION AND TESTING 111 5.2.3 Test result Guest changes currency Guest change currency ID TC_M D_01 Description Test steps Click to change from + Open website VND to EUR on the + Click Change money home screen button, + Select value “EUR” TC_M D_02 Click to change from VND to USD on the home screen then click on the detail product screen to check if the currency has been changed + Open website + Click Change money button, + Select value “USD” Test data Expected result Actual result Currency is As expected converted to USD, product price is converted to EUR Currency is converted to USD, product price is converted to USD Status Pass Not as Pass expected, header bar not updating currency + Click open detail one product Chapter 5: IMPLEMENTATION AND TESTING 112 Result pages Guest filters installment information Guest filter installment information ID Description TC_FP _01 Click on the installment plan then press the "Filter plan" button when the page has finished loading the information Test steps + Open website + Click view detail product then select product color Test data Expected result Actual result Show installment As expected plan Status Pass + Wait for the website to finish loading the Chapter 5: IMPLEMENTATION AND TESTING 113 information then press the button “Filter plan” TC_FP _02 Click on the installment + Open website plan and then press the + Click view detail product "Filter plan" button as then select product color soon as you enter the page + Press the "Filter plan" button as soon as you enter the page Show installment Not as Fail plan expected Result pages Chapter 5: IMPLEMENTATION AND TESTING 114 Guest adds products to cart Guest add products to cart ID Description TC_CT Click on the cart and _01 proceed to increase the number of products already in the cart Test steps + Open website + Click the “Cart” button Test data Expected result Actual result Status The total amount As expected in the cart will be updated Pass The total amount As expected in the cart will be updated Pass + Click the "+" button to add product quantity TC_CT Add a new product to + Open website _02 the cart + Click view detail product then select product color + Press the "Add to cart" button Chapter 5: IMPLEMENTATION AND TESTING 115 Result pages User chooses another shipping address User chooses another shipping address ID Description TC_C S_01 Change the delivery address to a new one farther away Test steps + Open website + Click the “Checkout” button Test data Expected result Actual result The shipping As expected amount will update Status Pass + Click shipping to another address and adjust the shipping address further than the current address Chapter 5: IMPLEMENTATION AND TESTING 116 TC_C S_02 Change the shipping address to a new one closer + Open website The shipping As expected amount will update + Click the “Checkout” button Pass + Click shipping to another address and adjust the shipping address close to the current address Result pages Guest filters products by brand Guest filters products by brand ID TC_FP M_01 Description Test steps Click on + Open app brand and +Click on the phone screen tab then select Chapter 5: IMPLEMENTATION AND TESTING Test data Expected result Actual result Correctly display As expected the products in the filter Status Pass 117 add an + Select the brand "Samsung" attribute in + Swipe the slider on the left and the filter select the price 10 -15 million VND Result screens Chapter 5: IMPLEMENTATION AND TESTING 118 Chapter CONCLUSION Results Good teamwork skills, team communication skills, analytical work when working on short-term projects Skills in searching documents, skills in finding solutions on the internet for problems in the process of building projects Know how to apply a non-relational database (No-SQL) to build a database for a system, build a REST API web server that can serve web applications and application transformation, build web interface as Single Page Application using ReactJS Strengths and Drawbacks 6.2.1 Strengths - The website is designed with an easy-to-see and user-friendly interface - Simple ordering and payment - By effectively suggesting products (items) for each user, will help users feel more convenient and interested in the website And this will help increase the profit for the store 6.2.2 Drawbacks - Regarding the interface, there are still many shortcomings in the design, so the website is compatible with the computer interface and there are still many pages that are still not good in the design - In terms of functionality, due to the lack of expertise and experience, the processing is still quite slow, the interface loads for a long time - Regarding the data issue, the data is quite small, mainly used for testing, so there are some cases where the data is larger, leading to slow browsing or unreasonable display data Lesson learned - Learn how to manage basic source control, very good support in doing multiperson projects Chapter 6: CONCLUSION 119 - Learn the techniques of MERN Stack which are very popular nowadays - Learn the flow to verify users when they register, log in - Learn the connections between the Servers, the Python application runs machine learning algorithms to integrate into the MERN Stack project - Learn to deploy servers through Heroku Future works After building and developing features for about months, the team came up with some ideas to develop a strong system and overcome some limitations in the system However, because there was not enough time, the team saved this idea and implemented it when there was time - Integrate more payment gateways such as VNPAY, Ngan Luong, - Build more voice chatbot features - Image-based corresponding product search function - The function of issuing revenue slips of the day - Installment invoice issuance function Chapter 6: CONCLUSION 120 REFERENCES English: Blockchain Simplified (2020) “What is MERN Stack?” https://medium.com/@blockchain_simplified/what-is-mern-stack-9c867dbad302 O'Reilly Media, “What is React Native?” https://www.oreilly.com/library/view/learning-reactnative/9781491929049/ch01.html APPENDICES APPENDIX 1: (Task Distribution) Task Distribution Member Nguyen Thanh Nhu Tasks Done - Research React Native to build the e-commerce 100% application in mobile phone - Research and build test cases and test functions and interfaces on websites and mobile apps - Analyze and design Usecase diagram - Creating presentations - Report writing (together) Ngo Hoang Minh Tam - Plan weekly work - Research NodeJS, Express to build backend server - Research and deploy Chatbot server - Research MongoDB to build the database - Research React to build an e-commerce website and management website - Research machine learning in product recommendation application - Deploy the e-commerce website in the Heroku domain - Report writing (together) 100% S K L 0 ... UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING GRADUATION PROJECT RESEARCH FOR BUILDING A MULTI-PLATFORM PHONE E-COMMERCE SYSTEM (MOBILE AND WEBSITE) MERN STACK AND REACT-NATIVE. .. UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING GRADUATION PROJECT RESEARCH FOR BUILDING A MULTI-PLATFORM PHONE E-COMMERCE SYSTEM (MOBILE AND WEBSITE) MERN STACK AND REACT-NATIVE. .. building a multi-platform phone e-commerce system (mobile and website) MERN Stack and React-Native application Initial materials provided by the advisor: None Content of the project: Building an E-commerce