(Đồ án hcmute) xây dựng website thương mại điện tử sử dụng asp net core và react js

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ SỬ DỤNG ASP.NET CORE VÀ REACT JS GVHD: TS LÊ VĂN VINH SVTH: LÊ KHÁNH VINH NGUYỄN HỒNG HUY SKL010343 Tp.Hồ Chí Minh, Năm 2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM - - LÊ KHÁNH VINH - 18110395 NGUYỄN HOÀNG HUY - 18110293 Đề Tài: XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ SỬ DỤNG ASP.NET CORE VÀ REACT JS KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIẢNG VIÊN HƯỚNG DẪN TS LÊ VĂN VINH KHÓA 2018 – 2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN BỘ MƠN CƠNG NGHỆ PHẦN MỀM - - LÊ KHÁNH VINH - 18110395 NGUYỄN HOÀNG HUY - 18110293 Đề Tài: XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ SỬ DỤNG ASP.NET CORE VÀ REACT JS KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIẢNG VIÊN HƯỚNG DẪN TS LÊ VĂN VINH KHÓA 2018 – 2022 ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập – Tự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Lê Khánh Vinh MSSV 1: 18110395 Họ tên Sinh viên 2: Nguyễn Hoàng Huy MSSV 2: 18110293 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng website thương mại điện tử sử dụng ASP.NET Core React JS Họ tên Giáo viên hướng dẫn: TS Lê Văn Vinh NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không?: Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng Giáo viên hướng dẫn (Ký & ghi rõ họ tên) năm 2022 ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập – Tự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên 1: Lê Khánh Vinh MSSV 1: 18110395 Họ tên Sinh viên 2: Nguyễn Hoàng Huy MSSV 2: 18110293 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng website thương mại điện tử sử dụng ASP.NET Core React JS Họ tên Giáo viên phản biện: ThS Mai Anh Thơ NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không?: Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng Giáo viên phản biện (Ký & ghi rõ họ tên) năm 2022 LỜI CẢM ƠN Lời xin phép gửi lời cảm ơn chân thành sâu sắc đến với Khoa Công Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh nâng đỡ, tạo điều kiện để nhóm thực đề tài Lời xin gửi đến thầy Lê Văn Vinh, người trực tiếp hướng dẫn thực đề tài này, lời cảm ơn sâu sắc Thầy người tận tâm hướng dẫn nhóm từ khâu chọn đề tài, đến thiết kế triển khai đưa lời khuyên đắn, kịp thời giúp nhóm tích lũy thêm nhiều kiến thức hoàn thành đề tài Tuy nhiên giới hạn thời gian, kiến thức điều kiện khách quan khác, thiếu sót chúng tơi hồn tồn khơng tránh khỏi Chúng tơi mong nghe góp ý quý giá thầy, cô để cải thiện thân Xin chân thành cảm ơn Nhóm thực Lê Khánh Vinh – 18110395 Nguyễn Hoàng Huy – 18110293 Trường ĐH Sư Phạm Kỹ Thuật TP.HCM Khoa Công nghệ Thông tin ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP Họ tên sinh viên 1: Lê Khánh Vinh - MSSV 1: 18110395 Họ tên sinh viên 2: Nguyễn Hoàng Huy - MSSV 2: 18110293 Thời gian làm luận văn: Từ 13/03/2022 đến 26/6/2022 (15 tuần) Chuyên ngành: Công nghệ phần mềm Tên luận văn: Xây dựng website thương mại điện tử sử dụng ASP.NET Core React JS Giáo viên hướng dẫn: TS Lê Văn Vinh Nhiệm vụ luận văn: Lý thuyết: Tìm hiểu cơng nghệ: ASP.NET Core, React JS, Entity Framework Core, Redux Thực hành: Vận dụng cơng nghệ tìm hiểu để phát triển ứng dụng web, bao gồm công việc:  Sử dụng ASP.NET Core để triển khai phía server hệ thống  Sử dụng Entity Framework Core để thao tác với liệu hệ thống  Sử dụng React JS để xây dựng giao diện phía client hệ thống  Sử dụng Redux để làm công cụ quản lý lưu trữ cho phía client hệ thống Đề cương viết luận văn: Phần mở đầu Tính cấp thiết đề tài Mục đích đề tài Cách tiếp cận phương pháp nghiên cứu Ý nghĩa khoa học thực tiễn Phần nội dung Chương 1: Cơ sở lý thuyết ASP.NET Core React JS Entity Framework Core Redux Chương 2: Khảo sát trạng xác định yêu cầu Khảo sát trạng Xác định yêu cầu Chương 3: Thiết kế phần mềm Mơ hình hóa yêu cầu Lược đồ lớp Thiết kế sở liệu Thiết kế giao diện Chương 4: Cài đặt kiểm thử Cài đặt Kiểm thử Phần kết luận Kết đạt Ưu điểm 3 Nhược điểm Hướng phát triển Tài liệu tham khảo KẾ HOẠCH THỰC HIỆN Tuần Ngày Nhiệm vụ (Công việc dự kiến) - Khảo sát trạng - Thiết kế use case mơ hình hóa 1+2+3 13/3 – 2/4 yêu cầu - Thiết kế sơ đồ lớp Sản phẩm - Ghi Hiện trạng trang web thương mại điện tử, sơ đồ use case sơ đồ lớp - Tìm hiểu React JS 3/4 – 9/4 - Tìm hiểu ASP.NET Core - Tài liệu React JS ASP.NET Core - Tìm hiểu Entity Framework Core 10/4 – 16/4 - Tìm hiểu Redux - Tài liệu Entity Framework Core Redux - Tiến hành triển khai phía máy chủ 6+7+8+9+10 17/4 – 21/5 - Các trang giao dựa lược đồ use case diện cho yêu cầu chức có - Tiến hành xây dựng giao diện theo yêu cầu thể tương tác với máy chủ - Tích hợp dần giao diện API 11+12 13 22/5 – 5/6 6/6 – 12/6 - Tích hợp hồn thiện giao diện API - Tìm hiểu, sửa đổi, tối ưu hệ thống - Ứng dụng hoàn thành - Ứng dụng sửa lỗi - Kiểm thử chương trình tiến 14 13/6 – 19/6 - Ứng dụng kiểm thử hành sửa lỗi - Chỉnh sửa tổng hợp báo cáo sửa lỗi - Bản báo cáo 15 20/6 – 26/6 - Hồn tất chương trình hồn chỉnh để in nộp Giáo viên hướng dẫn (Ký ghi rõ họ tên) Tp Hồ Chí Minh, ngày tháng năm Người viết đề cương (Ký ghi rõ họ tên) Bảng 74: Mô tả giao diện giao hàng Ý nghĩa STT Trạng thái đơn hàng Thông tin người nhận hàng Mã đơn hàng Thông tin nơi giao hàng Ngày lấy hàng Tổng giá đơn hàng cần giao (số tiền cần thu) Nút kích hoạt giao đơn hàng 85 CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ CÀI ĐẶT 1.1 Các cơng cụ sử dụng Trong q trình phát triển ứng dụng, nhóm sử dụng cơng cụ đây: - IDE: Visual Studio, Visual Studio Code - Hệ quản trị sở liệu: Microsoft SQL Server Management Studio 18 - Quản lý mã nguồn: Git ,GitHub - Cơng cụ vẽ lược đồ: Draw.io - Trình duyệt: Chrome - Hệ điều hành: Windows 1.2 Các công nghệ sử dụng Trong q trình phát triển ứng dụng web, nhóm sử dụng công nghệ đây: - Giao diện người dùng: Html, Css, Js, React Js, Redux - Hệ thống máy chủ: ASP.NET Core, Entity Framework Core - Cơ sở liệu: Microsoft Sql Server 2019 - Dịch vụ bên thứ 3: Cloudinary (lưu ảnh), Giao hàng nhanh API (địa chỉ, tính tốn chi phí, thời gian giao hàng), Paypal (thanh toán) 1.3 Các bước cài đặt Yêu cầu: máy cài đặt node.js, Net 5, Microsoft Sql Server 2019 Các bước cài đặt: B1: Tải mã nguồn project từ link github sau:  Giao diện người dùng: https://github.com/lekhanhvinh8/diony-customer.git  Giao diện người bán: https://github.com/elviswinston/diony-seller.git 86  Giao diện admin: https://github.com/lekhanhvinh8/diony-admin.git  Hệ thống máy chủ: https://github.com/elviswinston/E-Commerce.git B2: Cài đặt hệ thống máy chủ:  Mở thư mục chứa project hệ thống máy chủ  Mở file snl visual studio  Vào file appsettings.json  Tùy chỉnh kết nối sở liệu mục ConnectionStrings, bỏ qua bước để chấp nhận thiết lập mặc định  Tùy chỉnh thiết đặt khác mã private để liên kết tới dịch vụ bên thứ  Mở file scripts/setup.sql thư mục chứa project hệ thống thực thi file SQLServer Nếu thực bước bỏ qua bước cuối Bước khởi tạo toàn cấu trúc sở liệu chèn số liệu mẫu để người dùng trải nghiệm  Mở nuget package manager console  Gõ “update-database” ấn enter B3: Cài đặt giao diện người dùng  Mở thư mục chứa project giao diện người dùng  Mở terminal command prompt project  Gõ “npm install” để cài đặt thư viện  Gõ “npm start” để chạy  Lặp lại bước với project giao diện người bán giao diện người quản trị Tài khoản đăng nhập: Người quản trị: Tài khoản: admin@gmail.com Mật khẩu: Admin1 87 Người mua 1: Tài khoản: vinhlekh@gmail.com Mật khẩu: User12 Người bán 1: Tài khoản: vinhlekh@gmail.com Mật khẩu: User12 Người bán 2: Tài khoản: upicosn@gmail.com Mật khẩu: User11 Shipper: Tài khoản: shipper4@gmail.com Mật khẩu: User11 Tài khoản toán paypal: Tài khoản: buyer-lekhanhvinh8@gmail.com Mật khẩu: A123456a Tài khoản paypal người bán: Tài khoản: seller2-lekhanhvinh8@gmail.com Mật khẩu: A123456a KIỂM THỬ 2.1 Kế hoạch kiểm thử Trong đề tài này, sử dụng phương pháp kiểm thử hộp đen để kiểm tra chức ứng dụng, việc kiểm thử hộp đen cho phép không quan tâm đến cấu trúc cụ thể mã nguồn, thuận tiện cho việc phát triển phần mềm nhanh Các chức kiểm thử là: Admin: Xác nhận đơn hàng Người bán: Chuẩn bị hàng Người mua: Đặt đơn hàng toán paypal 2.2 Kịch kiểm thử Bảng 75: Kịch kiểm thử STT Tác nhân Tính Mơ tả Admin Xác nhận đơn hàng Kiểm tra phản hồi trang web người quản trị xác nhận đơn hàng Người bán Chuẩn bị hàng Kiểm tra phản hồi trang web người bán chuẩn bị đơn hàng 88 Người mua Đặt hàng với hình thức Kiểm tra phản hồi trang web người toán paypal mua tiến hành đặt hàng toán paypal 2.3 Kết kiểm thử Bảng 76: Kết kiểm thử chức xác nhận đơn hàng STT Mô tả Các bước thực Dữ liệu thử B1: Chọn vào Mã Shipper: Cửa sổ xác nhận hồi web tab shipper đơn hàng đóng admin B2: Chọn lại thông chọn shipper đơn hàng báo: “Confirm thành công để B3: Nhập mã order xác nhận shipper ấn successfully” đơn hàng tìm kiếm Kết thực tế đợi TC_AD_01 Kiểm tra phản Kết mong Trạng thái Như mong đợi Qua Như mong đợi Qua lên B4: Ấn xác nhận TC_AD_02 Kiểm tra phản B1: Chọn vào Nút xác nhận bị hồi web tab shipper vơ hiệu hóa, admin B2: Chọn ấn không chọn đơn hàng vào shipper để xác B4: Ấn xác nhận đơn nhận hàng 89 Hình 47: Kết mong đợi thực tế test case TC_AD_01 Hình 48: Kết mong đợi thực tế test case TC_AD_02 Bảng 77: Kết kiểm thử chức chuẩn bị hàng STT TC_SE_01 Mô tả Các bước thực Dữ liệu thử Kết mong đợi Kiểm tra phản B1: Chọn vào Thông báo hồi web tab “Quản lý “Chuẩn bị hàng người bán đơn hàng” thành công chuẩn bị B2: Chọn tab lên” đơn hàng “Chờ lấy Kết thực tế Trạng thái Như mong đợi 90 Qua hàng”, chọn tab “Chưa xử lý” B3: Chọn nút chuẩn bị hàng từ đơn hàng B4: Chọn ngày hôm sau ấn xác nhận TC_SE_02 Kiểm tra phản B1: Chọn vào Thông báo hồi web tab “Quản lý “Ngày chuẩn bị người bán đơn hàng” phải lớn chuẩn bị B2: Chọn tab ngày tại” đơn hàng “Chờ lấy Như mong đợi hàng”, chọn tab “Chưa xử lý” B3: Chọn nút chuẩn bị hàng từ đơn hàng B4: Chọn ngày hôm ấn xác nhận 91 Qua Hình 49: Kết mong đợi thực tế test case TC_SE_01 Hình 50: Kết mong đợi thực tế testcase TC_SE_02 Bảng 78: Kết kiểm thử chức đặt hàng với hình thức tốn paypal STT Mơ tả Các bước thực Dữ liệu thử Kiểm tra phản B1: Chọn Hình thức Màn hình hồi web sản phẩm bất toán: chuyển sang người mua kỳ Paypal trang quản lý đặt đơn hàng Kết thực tế đợi TC_CS_01 Kết mong Trạng thái Như mong đợi đơn hàng 92 Qua với hình thức B2: Chọn thơng báo “Đặt toán “Thêm vào hàng thành paypal giỏ hàng” công” lên B3: Vào giỏ hàng B4: Chọn “Mua Hàng” B5: Chọn toán paypal B6: Chọn vào nút có biểu tượng tốn paypal B7: Nhập tài khoản mật paypal B8: Chọn “Pay Now” TC_CS_02 Kiểm tra phản B1: Chọn Hình thức Cửa sổ paypal bị Như mong đợi hồi web sản phẩm bất tốn: tắt hình người mua kỳ Paypal quay trở đặt đơn hàng B2: Chọn với hình thức “Thêm vào tốn giỏ hàng” paypal người dùng bỏ tốn hình Checkout B3: Vào giỏ hàng B4: Chọn “Mua Hàng” 93 Qua B5: Chọn toán paypal B6: Chọn vào nút có biểu tượng tốn paypal B7: Nhập tài khoản mật paypal B8: Thốt cửa sổ paypal Hình 51: Kết mong đợi thực tế test case TC_CS_01 94 Hình 52: Kết mong đợi thực tế test case TC_CS_02 95 PHẦN KẾT LUẬN KẾT QUẢ ĐẠT ĐƯỢC Các kết đạt đề tài là: - Hoàn thiện tất yêu cầu đặt - Code có cấu trúc dễ bảo trì, dễ nâng cấp - Hệ thống máy chủ thiết kế theo mơ hình lập trình hướng đối tượng - Giao diện người dùng bắt mắt, dễ sử dụng - Ứng dụng web có tính bám sát thực tế ƯU ĐIỂM Các ưu điểm đề tài: - Giao diện dễ nhìn, dễ sử dụng - Hệ thống dễ dàng bảo trì mở rộng - Tính bám sát thực tế - Hệ thống có tính bảo mật - Hệ thống hoạt động ổn định - Tích hợp nhóm tính tương tác với hình thức tốn trực tuyến Paypal, tính cần thiết thời đại chuyển đổi số NHƯỢC ĐIỂM Với giới hạn thời gian nguồn lực, đề tài chưa có tính phức tạp như: - Tính trả hàng / hồn tiền - Tính dùng trí tuệ nhân tạo để dự đốn sở thích người dùng, từ gợi ý sản phẩm phù hợp HƯỚNG PHÁT TRIỂN 96 Ngồi tính xây dựng, ứng dụng cải tiến việc sau: - Triển khai mơ hình máy học dự đốn sở thích mua sắm người tiêu dùng để tăng hiệu suất bán hàng - Xây dựng tính trả hàng / hoàn tiền để tăng cảm giác an toàn mua hàng người dùng 97 TÀI LIỆU THAM KHẢO [1] Microsoft (2021), Introduction to ASP.NET Core, https://docs.microsoft.com/enus/aspnet/core/introduction-to-aspnet-core?view=aspnetcore-6.0 (truy cập vào 5/4/2022) [2] Microsoft (2021), Create web APIs with ASP.NET Core, https://docs.microsoft.com/enus/aspnet/core/web-api/?view=aspnetcore-6.0 (truy cập vào 6/4/2022) [3] Wikipedia (2021), React (Javascript Library), https://en.wikipedia.org/wiki/React_(JavaScript_library) (truy cập vào 7/4/2022) [4] Microsoft (2021), Entity Framework Core, https://docs.microsoft.com/en-us/ef/core/ (truy cập vào 13/4/2021) [5] Redux (2021), Three Principles, https://redux.js.org/understanding/thinking-in-redux/threeprinciples (truy cập vào 14/4/2022) [6] Công ty TNHH Shopee, Trang chủ, https://shopee.vn/ (truy cập 25/3/2022) [7] Công ty Cổ phần Tiki, Trang chủ, https://tiki.vn/ (truy cập 25/3/2022) [8] Tập đoàn Lazada, Trang chủ, https://www.lazada.vn/ (truy cập 26/3/2022) [9] Công ty Cổ phần Công nghệ Sen Đỏ, Trang chủ, https://www.sendo.vn/ (truy cập 26/3/2022) [10] Công ty Cổ phần VNP Group, Trang chủ, https://vatgia.com/home/ (truy cập 26/3/2022) 98 S K L 0