Trang 1 TECHNOLOGY AND EDUCATIONMINISTRY OF EDUCATION AND TRAININGHO CHI MINH CITY UNIVERSITY OF GRADUATION PROJECT INFORMATION TECHNOLOGY LECTURER: LE VINH THINH PHDSTUDENTS: TRAN NGUY
MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION GRADUATION PROJECT INFORMATION TECHNOLOGY RESEARCH FOR BUILDING A MULTI- PLATFORMPHONE E-COMMERCE SYSTEM (WEBSITE) MERN STACK APPLICATION LECTURER: LE VINH THINH PHD STUDENTS: TRAN NGUYEN TAI NGUYEN VAN TAY SKL 009885 Ho Chi Minh City, June 2022 HCMC UNIVERSITY OF TECHNOLOG Y AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING GRADUATION PROJECT RESEARCH FOR BUILDING A MULTIPLATFORM PHONE E-COMMERCE SYSTEM (WEBSITE) MERN STACK APPLICATION TRAN NGUYEN TAI Student ID: 17110217 NGUYEN VAN TAY Student ID: 17110220 Major: INFORMATION TECHNOLOGY Advisor: LE VINH THINH PhD Ho Chi Minh City, June 2022 THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness Ho Chi Minh City,……………, 2022 GRADUATION PROJECT ASSIGNMENT Student Name Student Id Nguyen Van Tay 17110220 Tran Nguyen Tai 17110217 Major: Information technology Advisor: Le Vinh Thinh PhD Class: 2017 Date of assignment:…………, 2022 Date of submission:………., 2022 Project title: Research for building a multi-platform phone e-commerce system (website) MERN Stack application Initial materials provided by the advisor: None Content of the project: Building an E-commerce system to sell phones on Website 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 Final product: Website ensure the necessary functions CHAIR OF THE PROGRAM ADVISIOR (Name and signature) (Name and signature) THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness Ho Chi Minh City,………,……….,2022 ADVISOR’S EVALUATION SHEET Student Name Student Id Nguyen Van Tay 17110220 Tran Nguyen Tai 17110217 Major: Information technology Class: 2017 Research for building a multi-platform phone e-commerce system (website) MERN Stack application Advisor: Le Vinh Thinh PhD Date of assignment:…………, 2022 Date of submission:………., 2022 EVALUATION Content of the project: 2.Strengths: 3.Weaknesses: Approval for oral defense? (Approved or denied) Overall evaluation: (Excellent, Good, Fair, Poor) Mark: …… (in words: ) Ho Chi Minh City, , 2022 ADVISOR (Name and signature) THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness PRE-DEFENSE EVALUATION SHEET Student Name Student Id Nguyen Van Tay 17110220 Tran Nguyen Tai 17110217 Major: Information technology Class: 2017 Research for building a multi-platform phone e-commerce system (website) MERN Stack application Advisor: Le Vinh Thinh PhD Date of assignment:…………, 2022 Date of submission:………., 2022 EVALUATION Content 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,………………… … , 2022 REVIEWER (Name and signature) THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness EVALUATION SHEET OF DEFENSE COMMITTEEMEMBER Student Name Student Id Nguyen Van Tay 17110220 Tran Nguyen Tai 17110217 Major: Information technology Class: 2017 Research for building a multi-platform phone e-commerce system (website) MERN Stack application Advisor: Le Vinh Thinh PhD Date of assignment:…………, 2022 Date of submission:………., 2022 EVALUATION Content of the project: 2.Strengths: 3.Weaknesses: 4.Approval for oral defense? (Approved or denied) 5.Overall evaluation: (Excellent, Good, Fair, Poor) Mark: …… (in words: ) Ho Chi Minh City, ,2022 COMMITTEE MEMBER (Name and signature) 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! TABLE OF CONTENTS Contents ACKNOWLEDGEMENTS ii TABLE OF CONTENTS iii LIST OF FIGURE v LIST OF TABLES vi ABSTRACT viii Chapter INTRODUCTION 1.1 Subject name 1.2 The urgency of tbe subject 1.3 Purpose of the topic 1.4 Object and scope of study 1.4.1 1.5 Functional requirements Expected results achieved Chapter THEORETICAL BASIC 2.1 What is MERN STACK ? 2.2 MongoDB 2.3 Express JS 2.4 ReactJS 2.5 NodeJS 2.6 NextJS 2.7 Loop Back 2.8 The Avantages of MERN Stack 2.9 Recommend system 2.9.1 Content base 2.9.2 Singular Value Decomposition Chapter REQUIREMENTS ANALYSIS 3.1 Situation survey 3.1.1 Review the pros and cons of similar services 3.1.2 Research roles and functions 11 3.1.3 Issue of records, books, and transaction documents 12 3.1.4 Assess the current situation and solutions 12 3.2 Define Requirements 13 3.2.1 System requirements 13 3.2.2 3.3 Functional and non-functional requirements 13 Requirements modeling 13 3.3.1 List of actors 13 3.3.2 Systems overview usecase 13 3.3.3 Detail description of usecase 16 Chapter SOFTWARE DESIGN 31 4.1 Architecture Diagram 31 4.2 Sequence diagram 32 4.2.1 4.3 E-commerce modules 32 Database design 35 4.3.1 Database diagram 35 4.3.2 Database description 37 4.4 User interface design 47 4.4.1 E-commerce website 47 4.4.2 Admin website 70 Chapter IMPLEMENTATION AND TESTING 80 5.1 Implemention 80 5.1.1 Run back end server 80 5.1.2 Run front end server 80 5.2 Testing 81 5.2.1 Overview 81 5.2.2 Test scenarios 81 5.2.3 Test Result 82 Chapter CONCLUSION 90 6.1 Results 90 6.2 Strengths and Drawbacks 90 6.2.1 Strength 90 6.2.2 Drawbacks 90 6.3 Lesson learned 90 6.4 Future works 91 REFERENCES 92 APPENDICES 93 LIST OF FIGURE Figure Cellphones Logo Figure Thegioididong logo Figure PhongVu Logo 10 Figure Systems overview usecase 14 Figure < Guest > overview use case 16 Figure < User > Overview use case 22 Figure < Admin > Overview use case 28 Figure Architecture Diagram 31 Figure Sequence diagram User Login 33 Figure 10 Sequence diagram Add product to cart 34 Figure 11 Sequence diagram Request an order for the COD payment method 35 Figure 12 Database diagram 36 Figure 13 E-commerce website Screen flow diagram 47 Figure 14 Header specification 49 Figure 15 Home Page 50 Figure 16 Cart Popover 50 Figure 17 Search Popover 51 Figure 18 Login Page 52 Figure 19 Cart Page 53 Figure 20 Product list page 54 Figure 21 Detail Page 55 Figure 22 Detail Page 56 Figure 23 Checkout Pgae 57 Figure 24 Modal Address Shipping 59 Figure 25 Modal Edit Address shipping 60 Figure 26 Modal Create Address Shipping 61 Figure 27 User Info Page 62 Figure 28 Order Page 64 Figure 29 Manage Address Page 65 Figure 30 Popover order delivery 66 Figure 31 Popover Detail Order 67 Figure 32 Add coment modal 69 Figure 33 Screen Flow description for Administration Website 70 Figure 34 Dasboard page 72 Figure 35 Header page 73 Figure 36 Login page 74 Figure 37 Order management page 75 Figure 38 User management page 76 Figure 39 Product List page 77 Figure 40 Edit Product page 78 Figure 41 Edit Product page 78 Figure 42 < Test Scenario1 > Log in By local acount 83 Figure 43 < Test Scenario1 > Log in By local acount 83 Figure 44 < Test Scenario1 > Total amount to cart 85 Figure 45 < Test Scenario1 > Total amount to cart 85 Figure 46 < Test Scenario1 > Caculate the shipping fee 87 Figure 47 < Test Scenario1 > Caculate the shipping fee 87 Figure 48 < Test Scenario1 > filter product 88 Figure 49 < Test Scenario1 > filter product 89 Chapter IMPLEMENTATION AND TESTING 5.1 Implemention In this tutorial, the team uses Visual Studio Code 5.1.1 Run back end server 5.1.1.1 Step Clone or download the project from the Github link: https://github.com/TNT1999/ps-server.git 5.1.1.2 Step A folder named “ps-server” will appear after cloning the project from Github or extracting the report attachment Proceed to the folder “ps-server” 5.1.1.3 Step Open the application running backend (ps-server folder) After opening the project with Visual Studio Code, select "Terminal" on the taskbar, select "New Terminal" (Or simply press Ctrl + `) 5.1.1.4 Step 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 5.1.1.5 Step Run the command line “npm run dev” to initialize the backend server with PORT of 3000 5.1.2 Run front end server 5.1.2.1 Step Clone or download the project from the Github link: https://github.com/TNT1999/ps-client.git 5.1.2.2 Step A folder named “ps-client” will appear after cloning the project from Github or extracting the report attachment Proceed to the folder “ps-client” 5.1.2.3 Step Open the application running backend (ps-client folder) After opening the project with Visual Studio Code, select "Terminal" on the taskbar, select "New Terminal" (Or simply press Ctrl + `) 5.1.2.4 Step 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 5.1.2.5 Step Run the command line “npm run dev” to initialize 5.2 Testing 5.2.1 Overview This section mainly describes the method for planning, organizing, and managing the test process of the Cellphones e-commerce system 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 Table 59 Test Scenarios No Actor Function Description Guest Login by local acount Check the cases of logging into the system with a local account Successful login when accessing the system User The function to calculate the total amount in the cart When adding or subtracting the quantity ofa product or add another product type 81 User The function calculates the shipping fee when changing the delivery address The user chooses another shipping address to check the system's shipping function Guest Filter product by parameters and brands The user performs product filtering is the product listing page combined by brand and parameter 5.2.3 Test Result 5.2.3.1 < Test Scenario1 > Log in By local acount Table 60 < Test Scenario1 > Log in By local acount ID Description Test steps Test data TC_M D_01 access the system's home page and select the login function + open website + email trannguye ntai1999 @gmail.c om Enter the account you want to test and proceed with the test + click button login + enter username (email) + enter password + click button login + password: 123456 Expected result Actual result successful As access to expected the system returns the homepage Status pass Figure 42 < Test Scenario1 > Log in By local acount Figure 43 < Test Scenario1 > Log in By local acount 5.2.3.2 < Test Scenario1 > Total amount to cart 83 Table 61 < Test Scenario1 > Total amount to cart ID Descriptio n Test steps TC_CT _01 Click on the cart and proceed to increase the number of products already in the cart + Open website Add a new product to the cart + Open website TC_CT _02 + Click the “Cart” button Test data Expected result Actual result Status The total amount in the cart will be updated As expected Pass The total amount in the cart will be updated As expected Pass + Click the "+" button to add product quantity + Click view detail product then select product color Figure 44 < Test Scenario1 > Total amount to cart Figure 45 < Test Scenario1 > Total amount to cart 5.2.3.3 < Test Scenario1 > Caculate the shipping fee Table 62 < Test Scenario1 > Caculate the shipping fee ID TC_C S_01 Descriptio n Change the Test steps + Open website Test data Expected result Actual result The shipping As expected Status Pass 85 delivery address to a new one farther away TC_C S_02 Change the shipping address to anew one closer + Click the “Checkou t” button amount will update + Click shipping to another address and adjust the shipping address further than the current address + Open website + Click the “Checkou t” button + Click shipping to another address and adjust the shipping address close to the The shipping amount will update As expected Pass current address Figure 46 < Test Scenario1 > Caculate the shipping fee Figure 47 < Test Scenario1 > Caculate the shipping fee 5.2.3.4 < Test Scenario1 > filter product 87 Table 63 < Test Scenario1 > filter product ID Descriptio n Test steps TC_FP M_01 Click on brand and the select add an attribute in the filter + Select the brand "Apple" + Swipe the slider on the left and select the price 10 -15 million VND Test data Expected result Actual result Correctly display the products in the filter As expected Figure 48 < Test Scenario1 > filter product Status Pass Figure 49 < Test Scenario1 > filter product 89 Chapter CONCLUSION 6.1 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 6.2 Strengths and Drawbacks 6.2.1 Strength The website is designed with an easy-to-see and user-friendly interface Simple ordering and payment The website allows users to search for products by name and filter products by many different attributes to help users find exactly what they need to increase sales 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 6.3 Lesson learned Learn how to manage basic source control, very good support in doing multiperson projects 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 Docker 6.4 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 91 REFERENCES English: Blockchain Simplified (2020) “What is MERN Stack?” https://medium.com/@blockchain_simplified/what-is-mern-stack-9c867dbad302 APPENDICES APPENDIX 1: (Task Distribution) Table 64 Task Distribution Member Tran Nguyen Tai Tasks - Research NodeJS, Express to build backend server Done 100% - Research MongoDB to build the database - Research machine learning in product recommendation application - Deploy the e-commerce website in the docker - Research React to build an e-commerce website and management website - Research machine learning in product recommendation application - Report writing (together) Nguyen Van Tay - Plan weekly work 100% - Research and build test cases and test functions and interfaces on websites - Research MongoDB to build the database - Research React to build an e-commerce website and management website - Creating presentations - Analyze and design Usecase diagram - Report writing (together) 93