(Đồ án hcmute) build a website that sale electronics using angular net technology

MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING GRADUATION PROJECT SOFTWARE ENGINEERING BUILD A WEBSITE THAT SALE ELECTRONICS USING ANGULAR NET TECHNOLOGY ADVISOR: PhD LE VAN VINH STUDENT: PHAM TIEN THAO HOANG MANH TIEN SKL Ho Chi Minh City, Febuary, 2023 HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING -🙞🙜🕮🙞🙜 - GRADUATION PROJECT BUILD A WEBSITE THAT SALE ELECTRONICS USING ANGULAR NET TECHNOLOGY PHAM TIEN THAO Student ID: 18110200 HOANG MANH TIEN Student ID: 18110212 Major: SOFTWARE ENGINEERING Advisor: PhD LE VAN VINH Ho Chi Minh City, December, 2022 HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING -🙞🙜🕮🙞🙜 - GRADUATION PROJECT BUILD A WEBSITE THAT SALE ELECTRONICS USING ANGULAR NET TECHNOLOGY PHAM TIEN THAO Student ID: 18110200 HOANG MANH TIEN Student ID: 18110212 Major: SOFTWARE ENGINEERING Advisor: PhD LE VAN VINH Ho Chi Minh City, December, 2022 THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -Ho Chi Minh City, December, 2022 GRADUATION PROJECT ASSIGNMENT Student name: Pham Tien Thao Student ID: 18110200 Student name: Hoang Manh Tien Student ID: 18110212 Major: Information Technology Class: 18110CLST1 Advisor: Ph.D Lê Văn Vinh Phone number: ……………………………… Date of assignment: ……………………… Date of submission: ………………………… Project title: Build a website that sells electronics using Angular Net technology Initial materials provided by the advisor: Provide report templates for groups of students with exact wording orientation Documentation of new technologies and the instructor will guide if the authors want to integrate that technology into the project Content of the project: The author team will make an electronic sales website using Angular Net technology, including many basic functions of a sales website such as users can go to search for products, view product information, place orders, order tracking, online payment Besides, administrators can make detailed statistics of data over time, management operations are also guaranteed such as product management, customer management, order management, and many other necessary functions Final product: After researching further study and creating a website We have accomplished the following: • Acquire a wealth of knowledge about the internet sales process • More solid understanding of systems design and analysis • Effortlessly incorporate the most recent technologies into the project • Understand more about interface design so that it is friendly and easy to use for users The final product can meet most of the functions of a basic e-commerce website, and the i interface is also easy to use and user-friendly 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, December, 2022 ADVISOR’S EVALUATION SHEET Student name: Pham Tien Thao Student ID: 18110200 Student name: Hoang Manh Tien Student ID: 18110212 Major: Information Technology Project title: Build a website that sells electronics using Angular Net technology Advisor: Ph.D Lê Văn Vinh 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, December, 2022 ADVISOR (Sign with full name) iii THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -Ho Chi Minh City, December, 2022 PRE-DEFENSE EVALUATION SHEET Student name: Pham Tien Thao Student ID: 18110200 Student name: Hoang Manh Tien Student ID: 18110212 Major: Information Technology Project title: Build a website that sells electronics using Angular Net technology 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, December, 2022 REVIEWER (Sign with full name) iv THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness EVALUATION SHEET OF DEFENSE COMMITTEE MEMBER Student name: Pham Tien Thao Student ID: 18110200 Student name: Hoang Manh Tien Student ID: 18110212 Major: Information Technology Project title: Build a website that sells electronics using Angular Net technology 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, December, 2022 COMMITTEE MEMBER (Sign with full name) v ASSURANCE We are sure that this project is our own We not copy or use any other people's materials or source code without identifying the source We take full responsibility for any violation Ho Chi Minh City, December, 2022 Student group made Pham Tien Thao Hoang Manh Tien ACKNOWLEDGEMENTS First of all, I would like to express my love and gratitude to Mr Le Van Vinh – a lecturer from the Faculty of Information Technology - Ho Chi Minh City University of Technology and Education, who has given me a lot of precious time, direct guidance, dedicated help, and guidance throughout the process of making specialized essays The authors also sincerely thank all the teachers in the Faculty of Information Technology - Ho Chi Minh City University of Technology and Education, sincerely thank the teachers and teachers who participated in teaching and imparting knowledge During our time at school, reading and reviewing our essay helped us better understand the issues we researched, so that we could complete this essay I would like to thank the University Board of Directors, the Faculty of Information Technology and Faculty for High Quality Training, as other Functional Departments for creating the best conditions for my study and graduation In spite of great efforts we made in the learning process, during the internship period as well as in the process of writing the essay, shortcomings are inevitable Our group is looking forward to valuable comments from teachers as well as all friends so that we can improve the project results Thanks again! Ho Chi Minh City, December, 2022 Student group made Pham Tien Thao Hoang Manh Tien Chapter IMPLEMENTATION AND TESTING 5.1 System Architecture Figure 5.1 Overview of architectural design for system 5.2 Tools in Project Table 5.1 Tool using for develop project Tool Enviroment Name Net Core Visual Studio 2019 IDE Visual Studio Code DBMS SQL Server 2019 Source control Github Modelling tools Enterprise Architect 5.3 Technologies in Project Table 5.2 Technologies using for project REST API Transmission Protocol JSON Web Token User Interface Angular 14.2.1 121 Ant Design Design ASP.NET Core API 5.0 System Technologies Entity Framework Core Databases Microsoft SQL Server 2019 Paypal checkout (Payment gateway) Services Cloudinary (Uploading image to cloud) 5.4 Implement code 5.4.1 Clone Project - Get source code of project from github: • Fontend: https://github.com/PhamTienThao/BamBooShop-Theme • Backend: https://github.com/sakifire/BamBoo-Shop_Backend - Run the following command to get source code: git clone 5.4.2 Install Frontend - After cloning the source code, open it with Visual Studio Code: Picture 5.1 Folder project Frontend 122 - Start project by running the following command: • npm i • npm start 5.4.3 Install Backend - After cloning the source code, open it with Microsoft Visual Studio 2019: Picture 5.2 Folder project Backend - Press Ctrl + F5 or the BamBooShop button to start the program 5.5 Test Plan In this project, the primary application functionality is tested using the Black Box Testing methodology Black Test Box's greatest benefit is its suitability for testing a significant portion of code or the system's core functionality, which makes it ideal for quick software development The following features will be tested: - User: • Order • Log in • Order tracking - Guest: • Search products 123 • View product detail • Filter products - Administrators: • Order processing • View customer list • Add product • Change product information 5.5.1 Test Scenarios Table 5.3 Test Scenarios No Actor Function Description Test how the website behaves when the User Order user performs the "Order" function according to the available data and see the results Test how the website behaves when the User Login user performs the "Login" function according to the available data and see the results Test how the website behaves when the User Order tracking user performs the “Order tracking" function according to the available data and see the results Test how the website behaves when the Guest Search product user performs the "Search product" function according to the available data and see the results Guest View product detail Test how the website behaves when the user performs the “View product 124 detail" function according to the available data and see the results Test how the website behaves when the Guest Filter products user performs the “Filter products" function according to the available data and see the results Test how the website behaves when the Admin Order processing user performs the “Order processing" function according to the available data and see the results Test how the website behaves when the Admin View customer list user performs the “View customer list" function according to the available data and see the results Test how the website behaves when the Admin Add product user performs the "Add product" function according to the available data and see the results Test how the website behaves when the 10 Admin Change product user performs the "Change product information information" function according to the available data and see the results 5.5.2 Test Results 125 5.5.2.1 Testcase “Order” Table 5.4 Testcase Order Test Case ID USER_01 Test Case Description Check the function order any product Created By Pham T ien T hao Reviewed By Hoang Manh T ien Version Pham T ien T hao Date Tested October 21, 2022 Test Case (Pass/Fail/Not 1.0 Q A Tester’s Log Tester's Name S# Prerequisites: S# Pass Test Data Access to Bamboo Shop's official website T hành phố = "T hành phố Hồ Chí Minh" Login with User rights Quận/Huyện = "T hành phố T hủ Đức" 3 Địa cụ thể = "30/2 Long T hạnh Mỹ" 4 Test Scenario Step # Customers choose any product, then add it to the cart, fill in the delivery information and buy it Step Details Expected Results Actual Results Pass / Fail / Not executed / Suspended Customer clicks on "Add to cart" button Show message added to cart successfully As expected Pass Go to the shopping cart page to proceed with the purchase Go to the shopping cart page and display the information of the cart As expected Pass T he user fills in the delivery information in the "T hông tin mua hàng" (T hành phố, Quận/Huyện, Địa cụ thể) T he program does not report input data errors As expected Pass User selects "T hanh toán nhận hàng" and clicks purchase T he program displays the message "Successful purchase" and moves to the "T hank you" page As expected Pass 5.5.2.2 Testcase “Login” Table 5.5 Testcase Login Test Case ID USER_02 Test Case Description Check customer login function Created By Pham T ien T hao Reviewed By Hoang Manh T ien Version Pham T ien T hao Date Tested October 27, 2022 Test Case (Pass/Fail/Not 1.0 Q A Tester’s Log Tester's Name S# Prerequisites: S# Test Data Email = "phamtienthao88@gmail.com" 2 Password = "123123" 3 4 Test Scenario Step # Access to Bamboo Shop's official website Pass User logs into the account by entering email and password into the program Step Details Expected Results Customer clicks on "Login" button Switch to account login page User enters login information (Email, T he program does not report an error password) that the input data is corrupted Customer clicks on "Đăng nhập" button to proceed with the login process T he program displays a successful login message and switches to the homepage with the account phamtienthao88@gmail.com Actual Results Pass / Fail / Not executed / Suspended As expected Pass As expected Pass As expected Pass 126 5.5.2.3 Testcase “Order Tracking” Table 5.6 Testcase Order Tracking Test Case ID USER_03 Test Case Description Check order tracking function Created By Pham T ien T hao Reviewed By Hoang Manh T ien Version Pham T ien T hao Date Tested October 29, 2022 Test Case (Pass/Fail/Not 1.0 Q A Tester’s Log Tester's Name S# Prerequisites: S# Access to Bamboo Shop's official website Login with User rights Successfully purchased on the website Pass Test Data Test Scenario Step # Users test their order tracking and see the current status of their orders Step Details Expected Results Switch to accouT he program switches to a screen showing all orders that customers have placednt login page Customer clicks on "Đơn hàng tôi" button Customer clicks "Xem" button on any A screen displays the details of that order order Actual Results Pass / Fail / Not executed / Suspended As expected Pass As expected Pass 5.5.2.4 Testcase “Search Product” Table 5.7 Testcase Search Product Test Case ID GUEST _01 Test Case Description Check the website's product search function Created By Pham T ien T hao Reviewed By Hoang Manh T ien Version Pham T ien T hao Date Tested November 5, 2022 Test Case (Pass/Fail/Not 1.0 Q A Tester’s Log Tester's Name S# Prerequisites: S# Access to Bamboo Shop's official website 2 3 4 Test Scenario Step # Pass Test Data Search = "Mackbook pro" T he user enters the search keyword and presses the search button then waits for the results Step Details Expected Results Actual Results Pass / Fail / Not executed / Suspended T he user enters a keyword in the search bar T he program suggests the corresponding results under the search bar As expected Pass Customer press Enter button Switch to the search results page and display the results corresponding to the keyword that the user entered As expected Pass 127 5.5.2.5 Testcase “View Product Detail” Table 5.8 Testcase View Product Detail Test Case ID GUEST _02 Test Case Description Check the website's view product detail function Created By Pham T ien T hao Reviewed By Hoang Manh T ien Version Pham T ien T hao Date Tested November 9, 2022 Test Case (Pass/Fail/Not 1.0 Q A Tester’s Log Tester's Name S# Prerequisites: S# Access to Bamboo Shop's official website 3 4 Step # Test Data Test Scenario Pass User selects any product and clicks to view its details Step Details Expected Results Actual Results Pass / Fail / Not executed / Suspended Users access the homepage of Bamboo Shop Display the homepage of the website As expected Pass User selects favorite product category Displays a list of products that match the category the user has selected As expected Pass Users click on any product to see details T he program switches to a page displaying product details As expected Pass 5.5.2.6 Testcase “Filter Products” Table 5.9 Testcase Filter Products Test Case ID GUEST _03 Test Case Description Check the website's filter product function Created By Pham T ien T hao Reviewed By Hoang Manh T ien Version Pham T ien T hao Date Tested November 14, 2022 Test Case (Pass/Fail/Not 1.0 Q A Tester’s Log Tester's Name S# Prerequisites: S# Access to Bamboo Shop's official website 3 4 Step # Test Data Test Scenario Pass User selects any option to filter products by those choices Step Details Expected Results Actual Results Pass / Fail / Not executed / Suspended Users access the homepage of Bamboo Shop Display the homepage of the website As expected Pass User selects favorite product category Displays a list of products that match the category the user has selected As expected Pass User selects any option to filter products Displays a list of products that match the option the user has selected As expected Pass 128 5.5.2.7 Testcase “Order Processing” Table 5.10 Testcase Order Processing Test Case ID+A1:K21 ADMIN_01 Test Case Description Check the website's order processing function Created By Hoang Manh T ien Reviewed By Pham T ien T hao Version Hoang Manh T ien Date Tested November 5, 2022 Test Case (Pass/Fail/Not 1.0 Q A Tester’s Log Tester's Name S# Prerequisites: S# Access to Bamboo Shop's official website Login to your account with Administrator rights 3 4 Test Scenario Step # Pass Test Data User updates the status for any order in the system Step Details Expected Results Actual Results Pass / Fail / Not executed / Suspended User selects "Đơn hàng" in the navigation bar of the admin page Displays options: "Đơn hàng cần xử lý" and "Danh sách đơn hàng" As expected Pass User selects "Đơn hàng cần xử lý" to process orders T he program displays the entire list of orders currently in the system As expected Pass User clicks on "Xem chi tiết" of any order to change order status T he system displays detailed information of that order As expected Pass User clicks the corresponding button to update the status for the order Show successful update notification and show new status in order list As expected Pass 5.5.2.8 Testcase “View Customer List” Table 5.11 Testcase View Customer List Test Case ID ADMIN_02 Test Case Description Check the website's view customer list function Created By Hoang Manh T ien Reviewed By Pham T ien T hao Version Hoang Manh T ien Date Tested November 15, 2022 Test Case (Pass/Fail/Not 1.0 Q A Tester’s Log Tester's Name S# Prerequisites: S# Access to Bamboo Shop's official website Login to your account with Administrator rights 3 4 Test Scenario Step # Pass Test Data T he user chooses to view the list of all customers Step Details Expected Results Actual Results Pass / Fail / Not executed / Suspended User selects "Khách hàng" in the navigation bar of the admin page T he program displays the entire list of orders currently in the system As expected Pass User clicks on "Xem chi tiết" of any customer T he system displays detailed information of that customer As expected Pass 129 5.5.2.9 Testcase “Add Product” Table 5.12 Testcase Add Product Test Case ID ADMIN_03 Test Case Description Check the website's add product function Created By Hoang Manh T ien Reviewed By Pham T ien T hao Version Hoang Manh T ien Date Tested November 20, 2022 Test Case (Pass/Fail/Not 1.0 Q A Tester’s Log Tester's Name S# Prerequisites: S# Pass Test Data Access to Bamboo Shop's official website T ên sản phẩm = "Macbook Pro M2 2022" Login to your account with Administrator rights Giá niêm yết = "25300000" 3 Giá bán = "23990000" 4 Số lượng = "500" Mô tả ngắn = "Apple vừa cho mắt phiên MacBook Air M1 2020tả(MGND3SA/A) mớiApple cực kìAir ấn M1 tượng với có conthiết chipkếM1 làm Mô chi tiết = "Laptop 2020 đẹp, sang trọng với CPU M1 độc quyền từ Apple cho hiệu đồ họa cao, Test Scenario Step # Users choose to view all products and add new products to the system Step Details Expected Results Actual Results Pass / Fail / Not executed / Suspended As expected Pass User selects "Sản phẩm" in the navigation bar of the admin page User selects "Danh sách sản phẩm" in T he program displays the entire list of the navigation bar of the admin page products currently in the system As expected Pass User clicks on "T hêm mới" button to T he system displays add information add product for new product As expected Pass Enter all information for new product T he system does not report input data (Avatar, hình ảnh, tên sản phẩm, giá errors niêm yết,…) As expected Pass Press "Lưu" button to proceed with the process of adding products As expected Pass Displays options: "Danh sách sản phẩm" and "T huộc tính sản phẩm" Show successful add notification and show new product in product list 130 5.5.2.10 Testcase “Change Product Information” Table 5.13 Testcase Change Product Information Test Case ID+A1:K23D25A1:K24A1:K25A1:K26A1:K24D25A1:K24A1:K25 ADMIN_04 Test Case Description Check the website's change product information function Created By Hoang Manh T ien Reviewed By Pham T ien T hao Version Hoang Manh T ien Date Tested November 27, 2022 Test Case (Pass/Fail/Not 1.0 Q A Tester’s Log Tester's Name S# Prerequisites: S# Pass Test Data Access to Bamboo Shop's official website T ên sản phẩm = "Macbook Air 2022" Login to your account with Administrator rights Giá niêm yết = "25300000" 3 Giá bán = "23990000" 4 Số lượng = "200" Mô tả ngắn = "Apple vừa cho mắt phiên MacBook Air M1 2020tả(MGND3SA/A) mớiApple cực kìAir ấn M1 tượng với có conthiết chipkếM1 làm Mơ chi tiết = "Laptop 2020 đẹp, sang trọng với CPU M1 độc quyền từ Apple cho hiệu đồ họa cao, Test Scenario Step # Users choose to view all products and add new products to the system Step Details Expected Results Displays options: "Danh sách sản phẩm" and "T huộc tính sản phẩm" Actual Results Pass / Fail / Not executed / Suspended As expected Pass User selects "Sản phẩm" in the navigation bar of the admin page User selects "Danh sách sản phẩm" in T he program displays the entire list of the navigation bar of the admin page products currently in the system As expected Pass User clicks on "Edit" icon of any product to edit information T he system displays edit information for that product As expected Pass Edit all information of product (Avatar, hình ảnh, tên sản phẩm, giá niêm yết,…) T he system does not report input data errors As expected Pass Press "Lưu" button to proceed with the process of editing products Show successful update notification and show new product in product list As expected Pass 131 Chapter CONCLUSION 6.1 Results - After researching further study and creating a website We have accomplished the following: • Acquire a wealth of knowledge about the internet sales process • More solid understanding of systems design and analysis • Effortlessly incorporate the most recent technologies into the project • Understand more about interface design so that it is friendly and easy to use for users - The group discovered that by generating and defending the graduation thesis topic, they were better able to grasp the information, abilities, and ability to handle and analyze situations However, due to a lack of time, skills, and information Consequently, the product still has a few minor drawbacks - In order to further develop their topic, our crew is eager to hear teachers' comments and recommendations 6.2 Advantages and disadvantages of the program - Advantages: • User-friendly interface, easy to use • Easy to repair and upgrade in the future • Provide full product information when users want to buy • Customers can track their orders after purchasing • Detailed analysis and statistics of sales figures for administrators - Disadvantages: • There is no chat feature with the seller for advice or feedback on product quality after receiving it • There are few online payment functions, currently only paying by Paypal 132 • Have not deployed the project to the host so that real users can enter the experience 6.3 Future works - The author team intends to develop more features in the future, such as the following: • Pay for orders with Momo • Compare prices of products in the same segment • Build a section for shippers and they can update the customer's order status directly • Build a Chatbot using AI to consult sales for users when the consultant is not there or outside office hours • Optimize the code to run with higher performance • Deploy the program onto the hosts and run tests with a few products and evaluate the actual results 133 REFERENCES [1] Angular (n.d) Angular developer guides Link: https://angular.io/guide/developerguide-overview (Accessed on 17/09/2022) [2] ASP.NET (n.d) ASP.NET documentation Link: https://learn.microsoft.com/enus/aspnet/core/ (Accessed on 22/09/2022) [3] NG-ZORRO (n.d) Ant Design of Angular Link: https://ng.ant.design/docs/introduce/en (Accessed on 20/09/2022) [4] Angular (n.d) Introduction to Angular concepts Link: https://angular.io/guide/architecture (Accessed on 29/05/2021) [5] Microsoft (n.d) EndPoint Class Link: https://learn.microsoft.com/enus/dotnet/api/system.net.endpoint (Accessed on 25/09/2021) [6] Cloudianry (n.d) Documentation Link: https://cloudinary.com/documentation (Accessed on 05/11/2021) [7] Gmail for Developer (n.d) Sending Email Link: https://developers.google.com/gmail/api/guides/sending (Accessed on 24/10/2021) [8] Sparx System (n.d) Sequence Diagram Link: https://sparxsystems.com/enterprise_architect_user_guide/15.2/guidebooks/tools_ba_seq uence_diagram.html (Accessed on 28/10/2021) [9] Super Tokens (n.d) What is a JWT? Understanding JSON Web Tokens Link: https://supertokens.com/blog/what-is-jwt (Accessed on 10/11/2021) 134 S K L 0