(Đồ án hcmute) building a smart website for selling clothes

MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF INFORMATION TECHNOLOGY CAPSTONE PROJECT INFORMATION TECHNOLOGY BUILDING A SMART WEBSITE FOR SELLING CLOTHES INSTRUCTOR: MSc LÊ THỊ MINH CHÂU STUDENT: ĐỖ QUỐC KHÁNH NGUYỄN HỮU QUYỀN SKL009168 Ho Chi Minh City, August, 2021 MINISTRY OF EDUCATION AND TRAINING HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF INFORMATION TECHNOLOGY  CAPSTONE PROJECT “Building a smart website for selling clothes” STUDENT1: Đỗ Quốc Khánh ID: 17110041 STUDENT2: Nguyễn Hữu Quyền ID: 17110071 ACADEMIC YEAR: K17 INSTRUCTOR: MSc Lê Thị Minh Châu Ho Chi Minh City, August 2021 i THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -Ho Chi Minh City, January 8, 2021 GRADUATION PROJECT ASSIGNMENT Student name: Nguyễn Hữu Quyền Student ID: 17110071 Student name: Đỗ Quốc Khánh Student ID: 17110041 Major: Software Engineering Class: 171100CLA1 Advisor: MSc Lê Thị Minh Châu Phone number: 0902200557 Date of assignment: 15/03/2021 Date of submission: xx/xx/2021 Project title: Building a smart website for selling clothes Initial materials provided by the advisor: Content of the project: Integrate deep learning into the website Final product: A smart e-commerce website CHAIR OF THE PROGRAM ADVISOR (Sign with full name) (Sign with full name) ii THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -Ho Chi Minh City, January 8, 2021 ADVISOR’S EVALUATION SHEET Student name: Nguyễn Hữu Quyền Student ID: 17110071 Student name: Đỗ Quốc Khánh Student ID: 17110041 Major: Software Engineering Project title: Building a smart website for selling clothes Advisor: Lê Thị Minh Châu, 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, January 8, 2021 ADVISOR (Sign with full name) iii THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -Ho Chi Minh City, January 8, 2021 PRE-DEFENSE EVALUATION SHEET Student name: Nguyễn Hữu Quyền Student ID: 17110071 Student name: Đỗ Quốc Khánh Student ID: 17110041 Major: Software Engineering Project title: Building a smart website for selling clothes 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, January 8, 2021 REVIEWER (Sign with full name) iv THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness EVALUATION SHEET OF DEFENSE COMMITTEE MEMBER Student name: Nguyễn Hữu Quyền Student ID: 17110071 Student name: Đỗ Quốc Khánh Student ID: 17110041 Major: Software Engineering Project title: Building a smart website for selling clothes Name of Defense Committee Member: • Lê Thị Minh Châu, MSc • Lê Vĩnh Thịnh, PhD EVALUATION Content and workload of the project Strengths: Weaknesses: Overall evaluation: (Excellent, Good, Fair, Poor) Mark:………….(in words: ) Ho Chi Minh City, month day, 2021 COMMITTEE MEMBER (Sign with full name) v THANK YOU! In the first words of this end-to-end "The Final 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 to Ms Minh Chau, 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 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! Ho Chi Minh city, January 8, 2021 vi TABLE OF CONTENTS GRADUATION PROJECT ASSIGNMENT i PRE-DEFENSE EVALUATION SHEET iii EVALUATION SHEET OF DEFENSE COMMITTEE MEMBER iv TABLE OF CONTENTS vi LIST OF TABLES x LIST OF FIGURES xi CHAPTER INTRODUCTION 1.1 Why need to build a smart website? 1.1.1 Purpose of this topic 1.1.2 Main content CHAPTER THEORETICAL BASIC 2.1 MERN Stack 2.1.1 Definition 2.1.2 Components 2.1.3 Workflow 10 2.1.4 Advantages of MERN Stack 10 2.1.5 Business benefits to MERN Stack 11 2.2 Machine Learning 12 2.2.1 Basic problem in machine learning 12 2.2.2 Approaches 13 2.3 Deep Learning 14 2.4 Common architecture used in application 15 2.4.1 Definition 15 2.4.2 Architecture 15 CHAPTER CHATBOT IN DIALOGFLOW AND ALAN AI BOT 18 3.1 Chatbot 18 3.1.1 Definition 18 vii 3.1.2 Types of chatbots 18 3.1.3 How does it work 19 3.2 Dialogflow 20 3.2.1 Definition 20 3.2.2 Components 20 3.2.3 User interactions with integrations 22 3.2.4 Data structure and flow 24 3.3 ALAN AI 26 3.3.1 About ALAN 26 3.3.2 Voice platform 27 3.3.3 Dialog design 27 3.3.4 Integration 30 CHAPTER SURVEY 31 4.1 Chatbot survey 31 4.1.1 Chatbot GearVN 31 4.1.2 Chatbot Shopee 31 4.2 Website survey 32 4.2.1 Website Lazada 32 4.2.2 Website Shopee 33 4.2.3 Website GearVN 34 CHAPTER ANALYZE REQUIREMENTS AND APPLICATION DESCRIPTION … 36 5.1 Analyze requirements 36 5.1.1 System function requirements 36 5.1.2 Non-functional requirements 37 5.1.3 Functions 38 5.2 Application description 40 5.2.1 Use case diagram 40 5.2.2 System structure 40 viii 5.2.3 Use case specifications 45 5.2.4 Sequence Diagram 53 5.2.5 Database 64 5.2.6 Implementation system 71 CHAPTER IMPLEMENTING DIALOGFLOW AND ALAN AI TO THE ECOMMERCE WEBSITE 73 6.1 Dialogflow 73 6.2 ALAN AI 83 CHAPTER ADDITONAL TASK 87 7.1 Send order confirmation email 87 7.1.1 7.2 Create a new service and email template on emailjs 87 Forgot password 89 7.2.1 Create an API Key 89 7.2.2 Integrate 89 7.3 Setup HTTPS locally 90 7.3.1 Adding https 90 7.3.2 Create an SSL Certificate 91 7.4 Run automation testing and some appearance testing 92 7.4.1 Automation testing 92 7.4.2 Appearance Testing 93 7.4.3 Test case for sign up screen 95 CHAPTER FINAL INTERFACE 97 8.1 User 97 8.1.1 Homepage 97 8.1.2 Product page 97 8.1.3 Order status page 98 8.2 Admin 98 8.2.1 Homepage 98 8.2.2 Order history page 99 E-commerce website 95 Else it will send the data to the server Test user data System check user input If it right, then PASS data match with data in render the database successful message and redirect to homepage Else render error message 7.4.3 Test case for sign up screen Table 19 Table Sign Up Test Case ID Test case Test steps description Test sign up page Expected Result Output Test case Click on Open Create Register PASS an page Account button Test validation Input text in the input If input contain PASS field special character Press enter or the input has not been entered, then the system will render error E-commerce website 96 Else it will send the data to the server 7.4.3.1 Test case for buy product screen Table 20 Table Buy Product Test Case Test case ID Test steps Expected description 10 Result Output Test open product Open website Open detail page detail page Go to product page product PASS Click one product 11 Test add product to Test case 10 cart Choose Product is added PASS size, color, to cart quantity want to buy Click Add to cart button 12 Test open cart Test case 11 Open cart page PASS On header, click on cart icon 13 Test status open order Test case 5,6,7 On header, Open click on status page profile icon and choose order status section order PASS E-commerce website 97 CHAPTER FINAL INTERFACE 8.1 User 8.1.1 Homepage Figure 74 User Homepage 8.1.2 Product page Figure 75 Product page E-commerce website 98 8.1.3 Order status page Figure 76 Order status page 8.2 Admin 8.2.1 Homepage E-commerce website 99 Figure 78 Admin Homepage 8.2.2 Order history page Figure 77 Order history page 8.2.3 Product page E-commerce website 100 Figure 79 Admin product page E-commerce website 101 CHAPTER CONCLUSION AND DEVELOPMENT 9.1 Summary Programming a smart vending shop website is a necessity It helps to improve user experience as well as better understand customer psychology The result it brings is the success in attracting customers to use the website and increase sales 9.2 Compare with original target 9.2.1 Target - Improve UI/UX (User Interface/User Experience) website - Research about machine learning, deep learning, and apply them into the website - add chatbot and buy product feature through voice recognition - Add utility features for users - sort and search features - Add graph statistics for admin 9.2.2 Task accomplished - All tasks have been accomplished except implement Deep Learning model into the system - Additional task: o Change http to https protocol and add certificate for the website o Run automation test on the website o Implement Artificial Intelligence into the website o Complete website information for users to read 9.3 Limit - We have not implemented Deep Learning model into the website yet E-commerce website 102 9.4 Topic development With the limitation above, to increase customer satisfaction in the future, the topic “Build a smart website for selling clothes” must have the following development directions: - Apply deep learning model into the website - an application used to change clothes base on how consumer appearance - Improve more user interface - Generate statistic report for Admin - More flexible in admin functions With the above development directions, the team believes that in the future when the application develops into the user market, the application's features will help users have a better experience in attempting to find themselves E-commerce website 103 REFERENCES [1] Stackoverflow https://stackoverflow.com/ [2] Redux document https://redux.js.org/ [3] Material UI https://material-ui.com/ [4] Alan AI https://alan.app/ [5] Dialogflow https://cloud.google.com/dialogflow/es/docs [6] Axios document https://www.npmjs.com/package/axios [7] Token https://www.npmjs.com/package/jsonwebtoken [8] MongoDB https://www.mongodb.com/ [9] https://www.classicinformatics.com/blog/why-is-mern-stack-our-preferredplatform-for-startups-apps [10] https://blogs.nvidia.com/blog/2016/07/29/whats-difference-artificial-intelligencemachine-learning-deep-learning-ai/ [11] https://marketingtrips.com/brand-story/cach-cac-trinh-duyet-web-nhu-chromefirefox-kiem-tien/ E-commerce website 104 WORK ASSIGNMENT We Date ek Task 22/3- Brainstorm 28/3 System survey Make plan 29/3- Modified 4/4 system structure Update UI Write weekly report 5/41 Research 11/4 about chatbot in Dialogflow Implement Dialogflow into the website 12/418/4 19/425/4 Update UI Write weekly report Implement Dialogflow into the website Update UI Write weekly report Coding Chatbot using Member in Expected result charge All member Requirement analyzed; system has necessary functions All member Nguyễn Hữu Quyền All member Đỗ Quốc Khánh Date compl eted 28/3 Rate 100 % High-level design, 4/4 detail design, implementation of the website is updated Report progress status in the report UI is updated 11/4 Achieve knowledge about chatbot in Dialogflow and how to implement it into the website Report progress status in the report 100 % UI is updated 18/4 Chatbot is implement into the website Report progress status in the report 97% UI is updated 70% 70% Nguyễn Hữu Quyền Đỗ Quốc Khánh Nguyễn Hữu Quyền Đỗ Quốc Khánh 25/4 E-commerce website 26/4- 2/5 105 Dialogflow API Update UI Nguyễn Write weekly Hữu report Quyền Research All about Deep member Learning Đỗ Coding chat Quốc bot using Khánh Dialogflow API Research about “Virtual clothes fitting room” in Deep learning and test available project Write weekly report 3/5- Testing 9/5 available project about deep learning model Coding chat bot using Dialogflow API Write weekly report 10/5- Coding chat 16/5 bot using Dialogflow API Nguyễn Hữu Quyền Program the logical functions of the chat bot into the website Report progress status in the report Achieve 2/5 knowledge about deep learning and how it works Program the logical functions of the chat bot into the website Report progress status in the report 55% All Able to run the 9/5 member available project Đỗ that satisfied the Quốc requirements Khánh Program the Nguyễn logical functions Hữu of the chat bot into Quyền the website Report progress status in the report 70% Đỗ Quốc Able to run the Khánh available project All that satisfied the member requirements 80% 16/5 E-commerce website 10 Testing available project about deep learning model Update UI Write weekly report 17/5- Research 23/5 about “faceswap” in deep learning Train Dialogflow chat bot Write weekly report Train and test “faceswap” model 24/5- Train and 30/5 test “faceswap” model Research how to implement deep learning model into the REACT app Write weekly report 106 Nguyễn Hữu Quyền All member Nguyễn Hữu Quyền Program the logical functions of the chat bot into the website UI is updated Report progress status in the report Train the 23/5 Dialogflow to handle more complex command from users Achieve knowledge about “face-swap” in deep learning Able to run the “face-swap” model Đỗ Quốc Report progress Khánh status in the report Đỗ Able to run the 30/5 Quốc “face-swap” Khánh model Nguyễn Know how to Hữu integrate the deep Quyền learning model inside the REACT app Report progress status in the report 85% 70% E-commerce website 11 12 13 31/5- Research 6/6 about ALAN AI Implement ALAN into the website Coding ALAN voice assistance functions Write ALAN script Write weekly report 7/6- Coding 13/6 ALAN voice assistance functions Coding ALAN voice assistance functions Write weekly report 14/6- Fixed the 20/6 program to satisfy the teacher additional request Program both bots to handle new request Update UI Write weekly report 107 Đỗ Quốc Achieve 6/6 Khánh knowledge about ALAN AI and how does it work; to implement it into the website Script handle user commands/request s in ALAN AI Report progress status in the report All member Nguyễn Hữu Quyền Đỗ ALAN run 13/6 Quốc without crash the Khánh website All Report progress member status in the report Nguyễn Hữu Quyền All member System updated Bot can handle new request Report status in the report 20/6 90% 100 % 70% E-commerce website 14 15 16 17 18 16 21/6- Fixed the 27/6 program to satisfy the teacher additional request Run automation test and fix important error alert Write weekly report 28/6- Add SSL 4/7 certificate Write weekly report 5/7- Find bugs 11/7 and fixed them Write weekly report 12/7- Complete the 18/7 website 19/7- Complete the 25/7 document 26/7- Create End PowerPoint and a script for the capstone project 108 Đỗ Quốc System updated Khánh Fixed alert report in automation tool Report status in the report 27/6 100 % Đỗ Quốc Add certificate 4/7 Khánh into the website Nguyễn Report status in Hữu the report Quyền All member Find many bugs as 11/7 much as possible and fixed them Report status in the report 100 % All member Nguyễn Hữu Quyền All member Website is ready to use All member Document is ready to release All member A presentation about the website 18/7 25/7 Till now 100 % 100 % 100 % Pend -ing