Building an cosmetics e commerce web application using net react

MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING CAPSTONE PROJECT INFORMATION TECHNOLOGY BUILDING AN COSMETICS E-COMMERCE WEB APPLICATION USING NET & REACT LECTURER: LE VINH THINH STUDENT: TRUONG THI CAM TRAN DANG TAM SKL009622 Ho Chi Minh City, July, 2022 HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF INFORMATION TECHNOLOGY - - BỘ GIÁO DỤC VÀ ĐÀO TẠOBỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THÔNG TIN - - CAPSTONE PROJECT BUILDING AN COSMETICS E-COMMERCE WEB APPLICATION USING NET & REACT INSTRUCTOR: Mr Lê Vĩnh Thịnh STUDENTS: Trương Thị Cam 18110256 Trần Đăng Tâm 18110359 Ho Chi Minh City, July 2022 HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF INFORMATION TECHNOLOGY - - BỘ GIÁO DỤC VÀ ĐÀO TẠOBỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THÔNG TIN - - CAPSTONE PROJECT BUILDING AN COSMETICS E-COMMERCE WEB APPLICATION USING NET & REACT INSTRUCTOR: Mr Lê Vĩnh Thịnh STUDENTS: Trương Thị Cam 18110256 Trần Đăng Tâm 18110359 Ho Chi Minh City, July 2022 SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness _ Ho Chi Minh City, … July 2022 CAPSTONE PROJECT OBJECTIVES Full name of student: Trương Thị Cam Student Id: 18110256 Full name of student: Trần Đăng Tâm Student Id: 18110359 Major: Information Technology Project’s name: Building an cosmetics e-commerce web application using Net & React Objectives: Theory: • • • • • Research NET, React, SQL server Research about Styled Component, Styled System, Pure React Carousel, Chart.Js, Formik, Typescript… Research React framework: NextJS Research about Azure, Swagger UI, Deploy project to Azure Web Service Practice: • Build website with the following main features: o Allow customers to browse products, add products to their shopping carts, checkout and pay for their purchases o Customer can read real product reviews and wite review products that they bought o Admin manage users, products, product categories, orders • • Deploy the database to Azure SQL Server Deploy frontend and backend to Azure Web Service Execute time : 15 weeks (Start date from 7/3/2022 to 27/06/2022) Ho Chi Minh City,… July 2022 Head of industry Instructor’s name (Signed with full name) (Signed with full name) SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness _ Ho Chi Minh City, … July 2022 ASSESSMENT FORM FOR INSTRUCTOR Full name of student 1: Trương Thị Cam Student Id:18110256 Full name of student 2: Trần Đăng Tâm Student Id:18110359 Major: Information Technology Project’s name: Building an cosmetics e-commerce web application using Net & React Instructor’s full name: Mr Lê Vĩnh Thịnh COMMENTARY Project’s contents and workload: Theory: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Implementation: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Results: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Advantages: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Disadvantages: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Approving for dissertation defence or not? ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Achievement level: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Ho Chi Minh City, … July 2022 Instructor’s name (Signed with full name) SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom – Happiness _ Ho Chi Minh City, … July 2022 ASSESSMENT FORM FOR INSTRUCTOR Full name of student 1: Trương Thị Cam Student Id:18110256 Full name of student 2: Trần Đăng Tâm Student Id:18110359 Major: Information Technology Project’s name: Building an cosmetics e-commerce web application using Net & React Reviewer’s full name: Mr Huỳnh Xuân Phụng COMMENTARY Project’s contents and workload: Theory: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Implementation: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Results: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Advantages: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Disadvantages: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Approving for dissertation defence or not? ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Achievement level: ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Ho Chi Minh City, … July 2022 Reviewer’s name (Signed with full name) ACKNOWLEDGEMENTS First of all, we would like to thank 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 Overall, Mr, Thinh is really enthusiastic about guiding theories as well as programming skills, especially how to solve Once again, we would like to thank Mr Le Vinh Thinh Secondly, we really appreciate the Faculty of Information Technology – Ho Chi Minh City University of Technology and Education’s support FIT HCMUTE creates all the most favorable conditions for us to reach the new technical knowledge and skills We also would like to thank the teachers and classmates in the Department of Information Technology for their help in supporting us and providing a lot of useful information and knowledge to help us complete the project With the conditions of time and limited experience of students, this report cannot avoid defects We look forward to receiving valuable comments from the teachers so that the group can improve the project in the future We are sincerely grateful! i CHAPTER 4: SYSTEM ANALYSIS AND DESIGN Figure 51: Modal Create Product (UI_13) Table 42: Modal Create Product (UI_13) No NAME TYPE Title Label List product Button Product info TextBox Upload Image Button Description of Textbox product 80 NOTE CHAPTER 4: SYSTEM ANALYSIS AND DESIGN Save Button 4.5.15.Modal Create Address (UI_14) Figure 52: Modal Create Address (UI_14) Table 43: Modal Create Address (UI_14) No NAME TYPE Title Label Information of Address Textbox Button Back Button Button Save Button 4.5.16.User Info Page (UI_15) Figure 53: User Info Page (UI_15) 81 NOTE CHAPTER 4: SYSTEM ANALYSIS AND DESIGN Table 44: User Info Page (UI_15) No NAME TYPE Title Label Edit Button Name and rank Label Orders Label User Information Label NOTE 4.5.17 Manage Order Page (UI_16) Figure 54: Manage Order Page (UI_16) Table 45: Manage Order Page (UI_16) No NAME TYPE Title Label Name of field Label Order Info Label See detail Button 82 NOTE CHAPTER 4: SYSTEM ANALYSIS AND DESIGN 4.5.18 Stats (UI_17) Figure 55: Stats (UI_17) Table 46: Stats (UI_17) No NAME TYPE Title Label Statistics Label Sales statistics Chart 4.5.19 Manage Address page (UI_18) 83 NOTE CHAPTER 4: SYSTEM ANALYSIS AND DESIGN Figure 56: Manage Address page (UI_18) Table 47: Manage Address page (UI_18) No NAME TYPE Title Label Add address Button Address Info Label Edit/Delete Button 4.5.20 Setting account (UI_19) 84 NOTE CHAPTER 4: SYSTEM ANALYSIS AND DESIGN Figure 57: Setting account (UI_19) Table 48: Setting account (UI_19) No NAME TYPE Title Label Avatar Image User Info Textbox Save Button 4.5.21.Order Tracking (UI_20) Figure 58: Order Tracking (UI_20) 85 NOTE CHAPTER 4: SYSTEM ANALYSIS AND DESIGN Table 49: Order Tracking (UI_20) No NAME TYPE Status Icon Day Expected Label NOTE 4.5.22.Detail of Order (UI_21) Figure 59: Detail of Order (UI_21) Table 50: Detail of Order (UI_21) No NAME TYPE NOTE Order Infor Label Id, day order, day send order Image of product Image Product name Label Calculate price Label Type Label 86 CHAPTER 4: SYSTEM ANALYSIS AND DESIGN Evaluate Button Address Label Total order Label 4.5.23.Modal Add comment & rating (UI_22) Figure 60: Modal Add comment & rating (UI_22) Table 51: Modal Add comment & rating (UI_22) No NAME TYPE Avatar user Image Name of user Label Stars Icon Time Label NOTE Time that user post Evaluation Content Label 87 User commented CHAPTER 4: SYSTEM ANALYSIS AND DESIGN Title Label Name of field Label Star Icon Name of field Label 10 Write content of Textbox comment 11 Send Button 4.5.24.Footer (UI_23) Figure 61: Footer (UI_23) Table 52: Footer (UI_23) No NAME TYPE Introduce about store Label Info Label Social Media Icon 4.5.25.Chatbot (UI_24) 88 NOTE Link to page CHAPTER 4: SYSTEM ANALYSIS AND DESIGN Figure 62: Chatbot (UI_24) Table 53: Chatbot (UI_24) No NAME TYPE Close Button Button Message Text File attached Icon Chat box Textbox Send message Button 89 NOTE CHAPTER 5: CONCLUSION CHAPTER 5: CONCLUSION 5.1 Results 5.1.1 Knowledge During the implementation of the project, the group has achieved the following objectives: - Learn and exchange knowledge about React, NextJS, NET along with SQL Server - Apply the knowledge learned and the guidance of the lecturer to complete the functions as well as the application of the topic 5.1.2 Topic - Completing the report with basic content and finishing the e -commerce site - Apply the content that has been learned and guided in the process of implementing the topic and report 5.2 Pros - Identify the functions of the topic - Analyze the database - Program function design ensures appropriate requirements: Easy to use - Friendly interface - Integrated automatic Chat Bot 5.3 Cons - Notification feature not yet available - Customer care and support functions are not yet available - Data for Chat Bot is not rich - Promotion page not yet available - Score&Rank for user is not yet available 90 CHAPTER 5: CONCLUSION 5.4 Development direction In the future, the group has the orientation of developing e -commerce site to add superior functions: - Develop for mobile applications - Develop function score&rank - Integrate API of transport company to follow order easier - Add payment method such as VNPAY, Zalo Pay,… - Integrate API Google Map to calculate shipping charges 91 REFERENCES REFERENCES [1] What is NextJS, NextJS.org, https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs [2] React (JavaScript library), Wikipedia, https://en.wikipedia.org/wiki/React_(JavaScript_library) [3] Video Next.js Tutorial For Beginners, Coding with Basir, https://www.youtube.com/watch?v=3kYkEVIZNZY [4] .Net 6, Microsoft, https://docs.microsoft.com/en-us/dotnet/core/whats-new/dotnet-6 [5] What is SQL Server, https://www.sqlservertutorial.net/getting-started/what-is-sql-server/ 92 93 S K L 0