Đồ án ứng dụng shop bán quần áo online

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN ĐỀ TÀI: ỨNG DỤNG SHOP BÁN QUẦN ÁO ONLINE Giảng viên: Trần Anh Dũng Sinh viên thực hiện: Nguyễn Duy Phúc 19522038 Hoàng Quốc Trọng 19522408 Thành phố Hồ Chí Minh, năm 2022 ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN ĐỀ TÀI: ỨNG DỤNG SHOP BÁN QUẦN ÁO ONLINE Giảng viên: Trần Anh Dũng Sinh viên thực hiện: Nguyễn Duy Phúc 19522038 Hoàng Quốc Trọng 19522408 Thành phố Hồ Chí Minh, năm 2022 Báo cáo đồ án Mục lục DANH MỤC HÌNH ẢNH DANH MỤC BẢNG DANH MỤC TỪ VIẾT TẮT LỜI CẢM ƠN ĐỀ CƯƠNG CHI TIẾT CHƯƠNG 1: GIỚI THIỆU CHUNG 12 1.1 TỔNG QUAN ĐỀ TÀI 12 1.2 LÝ DO CHỌN ĐỀ TÀI 12 1.3 ĐỐI TƯỢNG SỬ DỤNG 12 1.4 PHẠM VI NGHIÊN CỨU: 12 CHƯƠNG 2: 2.1 2.2 2.3 2.4 CƠ SỞ LÝ THUYẾT 13 TÌM HIỂU VỀ REACTJS 13 2.1.1 Reactjs gì? 13 2.1.2 Giới thiệu JSX 13 2.1.3 Giới thiệu Components 14 2.1.4 Ưu Nhược 14 TÌM HIỂU VỀ ASP.NET CORE API 15 2.2.1 Giới thiệu 15 2.2.2 ASP.NET CORE 15 2.2.3 ASP.NET Core API 15 2.2.4 Các dịch vụ RESTful 16 2.2.5 Tại phải sử dụng ASP.NET WEB API? 17 TÌM HIỂU VỀ SQL SERVER 18 2.3.1 Giới thiệu Sql Server 18 2.3.2 Lịch sử hình thành 18 2.3.3 Các thành phần SQL Server 19 2.3.4 Tại phải sử dụng SQL Server? 20 TÌM HIỂU GITHUB 21 2.4.1 Khái niệm 21 2.4.2 Git 22 2.4.3 Chức 22 2.4.4 Lợi ích 22 CHƯƠNG 3: MACHINE LEARNING: ML.NET 23 ỨNG DỤNG SHOP BÁN HÀNG ONLINE HỖ TRỢ GỢI Ý VÀ DỰ BÁO Báo cáo đồ án Ứng dụng shop bán hàng 3.1 KHÁI NIỆM ML.NET 23 3.2 QUY TRÌNH HOẠT ĐỘNG 24 3.3 GỢI Ý SẢN PHẨM 25 3.4 3.3.1 Thuật toán Matrix Factorization 25 3.3.2 Ưu điểm 27 3.3.3 Nhược điểm 27 3.3.4 Model 28 DỰ BÁO DOANH THU 28 3.4.1 Thuật toán Singular Spectrum Analysis (SSA) 28 3.4.2 Model 29 CHƯƠNG 4: THIẾT KẾ HỆ THỐNG 29 4.1 KIẾN TRÚC HỆ THỐNG: MƠ HÌNH MVC 29 4.2 SƠ ĐỒ LỚP 31 4.3 SƠ ĐỒ USE CASE 32 4.4 4.3.1 Danh sách tác nhân 33 4.3.2 Danh sách Use Case 33 4.3.3 Mô tả chi tiết Use Case 34 SEQUENCE DIAGRAM 42 4.4.1 Đăng nhập 42 4.4.2 Đăng ký 43 4.4.3 Chỉnh sửa thông tin 44 4.4.4 Thêm sản phẩm 45 4.4.5 Chỉnh sửa sản phẩm 46 4.4.6 Tìm kiếm sản phẩm 47 4.4.7 Lập hóa đơn 48 CHƯƠNG 5: THIẾT KẾ CƠ SỞ DỮ LIỆU 49 5.1 SƠ ĐỒ ERD 49 5.2 CHI TIẾT CÁC BẢNG 49 5.2.1 Tài khoản: 49 5.2.2 Sản phẩm : 50 5.2.3 Ảnh : 50 5.2.4 Phân loại: 50 5.2.5 Nhãn hiệu: 51 5.2.6 Loại : 51 5.2.7 Giỏ hàng: 51 5.2.8 Đơn hàng: 52 5.2.9 Chi tiết đơn hàng: 52 5.2.10 Đánh giá: 52 Báo cáo đồ án CHƯƠNG 6: 6.1 6.2 THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 53 SCREEN FLOW 53 6.1.1 Người dùng Khách hàng 53 6.1.2 Người dùng Quản trị viên 53 MƠ TẢ CHI TIẾT TỪNG MÀN HÌNH 54 6.2.1 Dashboard: 54 6.2.2 Thêm thương hiệu: 55 6.2.3 Thêm màu: 56 6.2.4 Thêm sản phẩm: 57 6.2.5 Xem sản phẩm: 58 6.2.6 Sửa sản phẩm: 59 6.2.7 Thêm phân loại: 61 6.2.8 Xem phân loại: 62 6.2.9 Xem danh sách người dùng: 63 CHƯƠNG 7: CÀI ĐẶT VÀ KIỂM THỬ 63 7.1 MÔI TRƯỜNG CÀI ĐẶT VÀ KIỂM THỬ: 63 7.2 KẾT QUẢ KIỂM THỬ 64 CHƯƠNG 8: KẾT LUẬN 64 8.1 TỔNG KẾT 64 8.2 KHÓ KHĂN 64 8.3 KẾT QUẢ ĐẠT ĐƯỢC 65 8.4 HẠN CHẾ CỦA ĐỒ ÁN 65 8.5 HƯỚNG PHÁT TRIỂN 65 TÀI LIỆU THAM KHẢO 67 ỨNG DỤNG SHOP BÁN HÀNG ONLINE HỖ TRỢ GỢI Ý VÀ DỰ BÁO Báo cáo đồ án DANH MỤC HÌNH ẢNH Hình 2.1-1 Reactjs 13 Hình 2.2-1.NET Core API 15 Hình 2.3-1 SQL Server 18 Hình 2.4-1 Github 21 Hình 3.1-1 ML.Net 23 Hình 3.2-1 Quy trình hoạt động ML.Net 24 Hình 3.3-1 Kỹ thuật phân rã ma trận 26 Hình 3.3-2 Kỹ thuật phân rã ma trận 26 Hình 3.3-3 Kỹ thuật phân rã ma trận 27 Hình 3.3-4 Model gợi ý sản phẩm 28 Hình 3.4-1 Model dự báo doanh thu 29 Hình 4.1-1 Sơ đồ mô hình MVC 30 Hình 4.2-1 Sơ đồ lớp 31 Hình 4.3-1 Sơ đồ Use Case 32 Hình 4.4-1 Sequence diagram Đăng nhập 42 Hình 4.4-2 Sequence diagram Đăng ký 43 Hình 4.4-3 Sequence diagram Chỉnh sửa thông tin 44 Hình 4.4-4 Sequence diagram Thêm sản phẩm 45 Hình 4.4-5 Sequence diagram Chỉnh sửa sản phẩm 46 Hình 4.4-6 Sequence diagram Tìm kiếm sản phẩm 47 Hình 4.4-7 Sequence diagram Lập đơn hàng 48 Hình 5.1-1 Sơ đồ ERD 49 Hình 6.1-1 Screen Flow Khách hàng 53 Hình 6.1-2 Screen Flow Người dùng Quản lý 53 Hình 6.2-1 Màn hình Dashboard 54 Hình 6.2-2 Màn hình Thêm thương hiệu 55 Hình 6.2-3 Màn hình Thêm Màu 56 Hình 6.2-4 Màn hình Thêm sản phẩm 57 Hình 6.2-5 Màn hình Xem sản phẩm 58 Báo cáo đồ án Ứng dụng shop bán hàng Hình 6.2-6 Màn hình Sửa sản phẩm 59 Hình 6.2-7 Màn hình Thêm phân loại 61 Hình 6.2-8 Màn hình Xem phân loại 62 Hình 6.2-9 Màn hình Xem danh sách người dùng 63 Báo cáo đồ án DANH MỤC BẢNG Bảng 4.3-1 Danh sách tác nhân 33 Bảng 4.3-2 Danh sách use case 33 Bảng 4.3-3 Usecase Đăng nhập 34 Bảng 4.3-4 Usecase Đăng ký 34 Bảng 4.3-5 Usecase Quên mật 35 Bảng 4.3-6 Usecase Tìm kiếm sản phẩm 36 Bảng 4.3-7 Usecase Xem thông tin sản phẩm 36 Bảng 4.3-8 Usecase Đánh giá sản phẩm 37 Bảng 4.3-9 Usecase Thêm vào giỏ hàng 37 Bảng 4.3-10 Usecase xem giỏ hàng 38 Bảng 4.3-11 Usecase Tạo đơn hàng 39 Bảng 4.3-12 Usecase Xem thông tin đơn hàng 39 Bảng 4.3-13 Usecase Thống kê doanh thu 40 Bảng 4.3-14 Usecase Quản lý sản phẩm 40 Bảng 5.2-1 Table account 49 Bảng 5.2-2 Table Product 50 Bảng 5.2-3 Table Image 50 Bảng 5.2-4 Table Category 50 Bảng 5.2-5 Table Nhãn hiệu 51 Bảng 5.2-6 Table Variant 51 Bảng 5.2-7 Table Cart 51 Bảng 5.2-8 Table Order 52 Bảng 5.2-9 Table Order Detail 52 Bảng 5.2-10 Table Comment 52 Bảng 6.2-1 Chi tiết Màn hình Dashboard 54 Bảng 6.2-2 Chi tiết Màn hình Thêm thương hiệu 55 Bảng 6.2-3 Chi tiết Màn hình Thêm Màu 56 Bảng 6.2-4 Chi tiết Màn hình Thêm sản phẩm 57 Bảng 6.2-5 Chi tiết Màn hình Xem sản phẩm 58 Bảng 6.2-6 Chi tiết Màn hình Sửa sản phẩm 59 Báo cáo đồ án Ứng dụng shop bán hàng Bảng 6.2-7 Chi tiết Màn hình Thêm phân loại 61 Bảng 6.2-8 Chi tiết Màn hình Xem phân loại 62 Bảng 6.2-9 Chi tiết Màn hình Xem danh sách người dùng 63 Bảng 7.2-1 Bảng kiểm thử 64 Báo cáo đồ án CreatedAt DateTime Not Null Thời gian tạo Chương 6: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 6.1 Screen Flow 6.1.1 Người dùng Khách hàng Hình 6.1-1 Screen Flow Khách hàng 6.1.2 Người dùng Quản trị viên Hình 6.1-2 Screen Flow Người dùng Quản lý 53 Báo cáo đồ án 6.2 Ứng dụng shop bán hàng Mơ tả chi tiết hình 6.2.1 Dashboard: Hình 6.2-1 Màn hình Dashboard Bảng 6.2-1 Chi tiết Màn hình Dashboard Tên Loại Sự kiện Kiểm Mô tả tra Search InputText OnChange String Enter keyword to find Search Button OnClick Click Icon Revenue Find something by entered keyword Chart Report revenue chart 54 Status Báo cáo đồ án 6.2.2 Thêm thương hiệu: Hình 6.2-2 Màn hình Thêm thương hiệu Bảng 6.2-2 Chi tiết Màn hình Thêm thương hiệu Tên Name Loại Sự kiện Kiểm tra Mô tả Status InputText OnChange string, not Mô tả tên nhãn hiệu null URL InputText OnChange string, not URL nhãn hiệu sản null phẩm Search InputText OnChange String Enter keyword to find Search Button Find OnClick Click Icon Submit something by entered keyword Button OnClick Click Thêm nhãn hiệu vào cửa hàng 55 Báo cáo đồ án Ứng dụng shop bán hàng 6.2.3 Thêm màu: Hình 6.2-3 Màn hình Thêm Màu Bảng 6.2-3 Chi tiết Màn hình Thêm Màu Tên Loại Sự kiện Kiểm tra Tên InputText OnChange string, not null Mô tả tên màu Xem màu Button OnClick Click Xem bảng màu 56 Mô tả Status Báo cáo đồ án 6.2.4 Thêm sản phẩm: Hình 6.2-4 Màn hình Thêm sản phẩm Bảng 6.2-4 Chi tiết Màn hình Thêm sản phẩm Tên Loại Sự kiện Kiểm Mô tả Status tra Tiêu đề InputText OnChange string, Mô tả tên sản phẩm not null Giới RadioButton OnClick Click tính Phân Lựa chọn loại giới tính Select Chọn loại quần áo Select Chọn loại Nhãn hiệu nhãn hiệu quần áo Mô tả TextArea Ảnh LocalFolder Mô tả sản phẩm OnClick Click Upload hình ảnh sản phẩm 57 Báo cáo đồ án Gửi Ứng dụng shop bán hàng Button OnClick Click Thêm sản phẩm vào cửa hàng Tìm InputText OnChange String kiếm Sản Enter keyword to find CheckBox OnClick Click Xác định có phải phẩm sản phẩm hay mới, khơng? Có hiển thị Hiển thị sản phẩm khơng? Search Button OnClick Click Icon Find something by entered keyword 6.2.5 Xem sản phẩm: Hình 6.2-5 Màn hình Xem sản phẩm Bảng 6.2-5 Chi tiết Màn hình Xem sản phẩm Tên Loại Sự kiện Kiểm Mô tả tra Tên Text Tên sản phẩm Id Text Id sản phẩm 58 Status Báo cáo đồ án Mô tả Text Mô tả sản phẩm Giá bán Text Giá sản phẩm Ảnh Text Ảnh sản phẩm Sửa Button OnClick Click Chuyển qua trang chỉnh sửa thông tin sản phẩm Trạng Text Trạng thái sản phẩm thái 6.2.6 Sửa sản phẩm: Hình 6.2-6 Màn hình Sửa sản phẩm Bảng 6.2-6 Chi tiết Màn hình Sửa sản phẩm Tên Giá bán Loại InputText Sự kiện OnChange Kiểm tra string, not Nhập giá bán null Giá gốc InputText OnChange sản phẩm string, not Nhập giá gốc null 59 Mô tả sản phẩm Status Báo cáo đồ án Số lượng Ảnh Ứng dụng shop bán hàng InputText OnChange LocalFolder OnClick string, not Nhập số lượng null sản phẩm Click Tải lên ảnh sản phẩm Ảnh sản phẩm Image Ảnh sản phẩm Xóa ảnh Button OnClick Click Xóa ảnh sản phẩm Size InputText OnChange Nhập kích cỡ sản phẩm Sản phẩm mới, CheckBox OnClick Click Hiển thị Xác định có phải sản phẩm hay khơng? Có hiển sản thị phẩm không? Search Text Enter keyword to find Search Icon Button OnClick Click Find something by entered keyword 60 Báo cáo đồ án 6.2.7 Thêm phân loại: Hình 6.2-7 Màn hình Thêm phân loại Bảng 6.2-7 Chi tiết Màn hình Thêm phân loại Tên Loại Sự kiện Kiểm Mô tả tra Tên URL Giới tính InputText InputText RadioButton OnChange OnChange OnClick string, Mô tả tên loại not null sản phẩm string, URL loại not null sản phẩm Click Chọn loại giới tính Select Type Select Chọn loại sản phẩm Gửi Button OnClick Click Thêm loại vào cửa hàng 61 Status Báo cáo đồ án Ứng dụng shop bán hàng 6.2.8 Xem phân loại: Hình 6.2-8 Màn hình Xem phân loại Bảng 6.2-8 Chi tiết Màn hình Xem phân loại Tên Loại Sự kiện Kiểm Mô tả tra Tên Text Tên loại sản phẩm Id Text Id loại sản phẩm Giới Text Mô tả sản phẩm dành cho giới tính tính Loại Text Loại sản phẩm URL Text URL loại sản phẩm Sửa Button OnClick Click Chuyển qua trang chỉnh sửa loại sản phẩm Xóa Button OnClick Click Xóa loại sản phẩm 62 Status Báo cáo đồ án 6.2.9 Xem danh sách người dùng: Hình 6.2-9 Màn hình Xem danh sách người dùng Bảng 6.2-9 Chi tiết Màn hình Xem danh sách người dùng Tên Loại Sự kiện Kiểm Mô tả tra Tên Text Tên người dùng Id Text Id người dùng Vai trị Text Mơ tả vai trị user Admin hay Khách hàng Đổi SwitchButton OnClick Click vai trị Xóa Đổi vai trò user sang Admin Khách hàng Button OnClick Click Xóa tài khoản Chương 7: CÀI ĐẶT VÀ KIỂM THỬ 7.1 Môi trường cài đặt kiểm thử: Môi trường cài đặt: Internet Explorer 8.0 cao Thiết bị cài đặt: Laptop Asus 63 Status Báo cáo đồ án 7.2 Ứng dụng shop bán hàng Kết kiểm thử Bảng 7.2-1 Bảng kiểm thử STT Tính Mức độ hồn thiện Đăng nhập 100% Đăng ký 100% Xem, Đăng, Xóa, Cập nhật sản phẩm 100% Xem, Tạo, Xóa, Cập nhật phân loại 100% Xem, Tạo, Xóa, Cập nhật màu sắc 100% Xem, Tạo, Xóa, Cập nhật thương hiệu Ghi 100% Xem, Tạo, Xóa, Cập nhật giỏ hàng 100% Xem, Tạo, Xóa, Cập nhật đơn hàng 100% Đăng xuất 100% Chương 8: KẾT LUẬN 8.1 Tổng kết - Cần phải xếp lại thời gian code cho hợp lý phân chia công việc rõ ràng, có việc gì phải báo cáo xử lý kịp thời - Học cách thiết kế website cách sử dụng kết hợp ReactJS cho Front-end ASP.NET core cho Back-end Hiểu cách vận hành fix lại code có lỗi - Tăng khả đọc tài liệu tiếng anh vì hướng dẫn bản, hay tài liệu đa số viết tiếng Anh 8.2 Khó khăn - Việc làm đồ án theo nhóm gặp nhiều trở ngại cơng đoạn xác định tính ứng dụng, phần việc phân chia chưa thật hợp lý, cơng với thành viên nhóm 64 Báo cáo đồ án - Vì lần tiếp xúc với ASP.NET core nên nhóm em tốn nhiều thời gian cho việc tìm hiểu vận dụng, cộng với việc code nên khơng thời gian việc debug Nhưng nhờ hiểu khắc phục lỗi - Các thành viên có xung đột thiết kế giao diện logic ứng dụng 8.3 Kết đạt - Kết nhóm cố gắng để hồn thành chức đưa từ đầu - Biết cách phân tích thiết kế CSDL để giải yêu cầu thực tế - Biết cách sử dụng SQL Server để: o Tạo bảng, quan hệ ràng buộc toàn vẹn o Tạo trigger để thực ràng buộc bắt buộc o Tạo Stored Procedure - Biết cách vận hành thực việc lưu dự phòng, phục hồi liệu - Sinh viên hiểu thực trọn vẹn quy trình từ phân tích, thiết kế, triển khai hệ thống - Sử dụng công nghệ ASP.Net Core API, ReactJS, ML.NET - Sinh viên có kỹ viết kỹ trình bày xây dựng tài liệu hoàn chỉnh cho dự án trình bày trước hội đồng kết đạt 8.4 Hạn chế đồ án - Code chưa tối ưu tốt nên load ứng dụng chậm - Giao diện người dùng mức tạm - Còn nhiều tính chưa tối ưu, chưa tiện dụng người dùng 8.5 Hướng phát triển - Đầu tư, phát triển thiết kế giao diện - Website đáp ứng nhiều người dùng truy cập thời điểm 65 Báo cáo đồ án Ứng dụng shop bán hàng - Tìm cách tăng cường tốc độ thực thi Website - Tìm cách mở rộng phạm vi tốc độ truy cập, tốc độ xử lý hệ thống số lượng người dùng tăng lên - Nếu có thể, thêm chatbot vào Website hạn chế nhắn tin trực tiếp với Admin - Nâng cấp Machine Learning 66 Báo cáo đồ án TÀI LIỆU THAM KHẢO [1] A Zhigljavsky [Online] Available: https://ssa.cf.ac.uk/zhigljavsky/pdfs/SSA/SSA_encyclopedia.pdf [Accessed 27 December 2022] [2] "Stack Overflow," Stack Overflow, [Online] Available: https://stackoverflow.com/ [Accessed 27 December 2022] [3] Microsoft, "ML.Net Microsoft," Microsoft, [Online] Available: https://learn.microsoft.com/vi-vn/dotnet/machine-learning/ [Accessed October 2022] [4] "Youtube," Funda of Web IT, 20 June 2021 [Online] Available: https://www.youtube.com/watch?v=GL48t3lYtI&list=PLRheCL1cXHrtT6rOSlab8VzMKBlfLIEA&index=1&ab_channel=FundaOfWebIT [Accessed October 2022] [5] "Start Bootstrap," [Online] Available: https://startbootstrap.com/ [Accessed 01 October 2022] [6] "Viblo," [Online] Available: https://viblo.asia/newest [Accessed October 2022] 67 ... người dùng 29 Báo cáo đồ án Ứng dụng shop bán hàng Hình 4.1-1 Sơ đồ mô hình MVC 30 Báo cáo đồ án 4.2 Sơ đồ lớp Hình 4.2-1 Sơ đồ lớp 31 Báo cáo đồ án 4.3 Ứng dụng shop bán hàng Sơ đồ Use Case... 22 CHƯƠNG 3: MACHINE LEARNING: ML.NET 23 ỨNG DỤNG SHOP BÁN HÀNG ONLINE HỖ TRỢ GỢI Ý VÀ DỰ BÁO Báo cáo đồ án Ứng dụng shop bán hàng 3.1 KHÁI NIỆM ML.NET 23 3.2 QUY... Báo cáo đồ án 4.4 Ứng dụng shop bán hàng Sequence Diagram 4.4.1 Đăng nhập Hình 4.4-1 Sequence diagram Đăng nhập 42 Báo cáo đồ án 4.4.2 Đăng ký Hình 4.4-2 Sequence diagram Đăng ký 43 Báo cáo