Đồ án xây dựng ứng dụng bán cafe online

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN Đồ án – SE122.L11 Đồ án: Xây dựng ứng dụng bán cafe online Sinh viên thực hiện: HUỲNH TRẦM BẢO CHẤN – 17520035 Giảng viên hướng dẫn: Thái Thụy Hàn Uyển MỤC LỤC DANH MỤC HÌNH VẼ DANH MỤC BẢNG DANH MỤC TỪ VIẾT TẮT Chương MỞ ĐẦU 1.1 Giới thiệu đề tài 1.2 Lý chọn đề tài Chương GIỚI THIỆU TỔNG QUAN 10 2.1 Mục tiêu 10 2.2 Phạm vi 10 2.3 Phương pháp 10 2.4 Ý nghĩa thực tiễn 11 2.5 Kết dự kiến 11 Chương CÔNG NGHỆ SỬ DỤNG 12 3.1 12 ASP.NET Core 3.1.1 Tại chọn ASP.NET Core [5] 12 3.1.2 ASP.NET Core web APIs 13 3.2 Hệ quản trị sở liệu MySQL/MariaDb 15 3.2.1 Vì chọn sử dụng MySQL [9] 15 3.2.2 MariaDB 16 3.2.3 Sự lựa chọn cá nhân 16 3.3 ReactJs framework [10] [11] 17 3.4 Apache2 web server [12] 19 3.4.1 Web server 19 3.4.2 Apache 19 3.4.3 Một số vấn đề khác 20 Chương XÂY DỰNG ỨNG DỤNG 21 4.1 21 User stories 4.1.1 Danh sách User stories 21 4.1.2 Mô tả chi tiết User stories 22 4.2 Thiết kế sở liệu 37 4.2.1 Sơ đồ thực thể kết hợp ERD 37 4.2.2 Danh sách Table 37 4.2.3 Chi tiết table MySQL 38 4.3 Thiết kế kiến trúc phần mềm 42 4.3.1 Kiến trúc phía backend 42 4.3.2 Kiến trúc phía frontend 43 Chương ĐÁNH GIÁ KẾT QUẢ 46 Chương KẾT LUẬN 47 6.1 Ưu điểm: 47 6.2 Nhược điểm 47 Chương HƯỚNG PHÁT TRIỂN 48 TÀI LIỆU THAM KHẢO 49 DANH MỤC HÌNH VẼ Hình 4-1: Sơ đồ thực thể kết hợp ERD 41 Hình 4-2: Mơ hình kiến trúc phía backend 46 Hình 4-3: Mơ hình kiến trúc phía frontend 48 DANH MỤC BẢNG Bảng 4-1: Danh sách User Stories 25 Bảng 4-2: US-03: Visitor: Xem danh sách sản phẩm 26 Bảng 4-3: US-05: Visitor: Xem chi tiết sản phẩm 26 Bảng 4-4: US-06: Visitor: Thêm sản phẩm vào giỏ hàng 27 Bảng 4-5: US-07: Visitor: Quản lý giỏ hàng 28 Bảng 4-6: US-08: Visitor: Xác nhận đặt hàng 29 Bảng 4-7: US-09: Visitor: Đăng nhập & Admin: Đăng xuất 31 Bảng 4-8: US-14: Admin: Quản lý danh sách sản phẩm 32 Bảng 4-9: US-14-1: Admin: Tìm kiếm sản phẩm 33 Bảng 4-10: US-14-2: Admin: Xóa sản phẩm 34 Bảng 4-11: US-14-3: Admin: Thêm sản phẩm 34 Bảng 4-12: US-14-4: Admin: Cập nhật sản phẩm 36 Bảng 4-13: US-18: Admin: Quản lý danh sách đơn hàng 37 Bảng 4-14: US-18-1: Admin: Tìm kiếm đơn hàng 38 Bảng 4-15: US-18-2: Admin: Cập nhật trạng thái đơn hàng 39 Bảng 4-16: US-18-3: Admin: Xem chi tiết đơn hàng 39 Bảng 4-17: Danh sách table MySQL 41 Bảng 4-18: Chi tiết category table MySQL 42 Bảng 4-19: Chi tiết product table MySQL 42 Bảng 4-20: Chi tiết account table MySQL 43 Bảng 4-21: Chi tiết administrative_division table MySQL 43 Bảng 4-22: Chi tiết order_status table MySQL 44 Bảng 4-23: Chi tiết cart table MySQL 44 Bảng 4-24: Chi tiết cart_detail table MySQL 44 Bảng 4-25: Chi tiết order table MySQL 45 DANH MỤC TỪ VIẾT TẮT Từ viết tắt Từ viết đầy đủ Diễn giải DBMS Database Management System Hệ quản trị sở liệu RDBMS Relational Database Hệ quản trị sở liệu kiểu Management System quan hệ Chương MỞ ĐẦU 1.1 Giới thiệu đề tài Ngày nay, với phát triển mạnh mẽ khoa học công nghệ, đặc biệt phát triển nhanh chóng lĩnh vực cơng nghệ thơng tin, cơng nghệ thông tin ngày vào đời sống người khai thác cách hiệu biến thành cơng cụ lao động hữu ích đóng vai trị quan trọng đời sống xã hội công cụ lao động Và đặt biệt phát triển cùa internet, ngày phổ biến tiện dụng, tính linh động mang lại khả kết nối lúc nơi Đối với cửa hàng nhỏ nho cá nhân kinh doanh, đơi họ muốn cửa hàng nhiều người biết tới Có thể, xuất phát từ việc họ muốn nhiều người biết tới để họ bán nhiều Hay đơn họ muốn cửa hàng yêu quý biết đến Cá nhân hay nhóm nhỏ quản lý cửa hàng cho riêng mình, họ xuất phát khơng đơn lợi nhuận mà cịn sở thích, niềm đam mê Và caffee nói riêng hay sản phẩm liên quan nói chung có giá trị đặc biệt riêng người thích chúng Chúng ta nghĩ làm chủ cửa hàng nhỏ khơng có khó khăn Nhưng thực tế có nhiều vấn đề xoay quanh Từ việc quản lý sản phẩm cửa hàng, cách mà cửa hàng hoạt động mua hàng, bán hàng, Đặc biệt thời buổi thương mại điện tử giao hàng phát triển, nhiều người khơng thích đường mua Vì cần phương pháp mua bán “hợp thời” Ứng dụng web/website cho cửa hàng giải pháp thích hợp để giải toàn phần/một phần vấn đề nêu Website công cụ hữu dụng nhằm quảng bá thương hiệu/cửa hàng, xem hình ảnh đại diện cho cửa hàng Ngoài ra, chức quản lý hỗ trợ quản lý mà đem lại giúp ích khơng nhỏ cho chủ cửa hàng Qua trình tìm hiểu, nghiên cứu thực nghiệm, cá nhân em trau dồi thêm kiến thức, kỹ phát triển ứng dụng web nói chung cơng nghệ áp dựng đồ án nói riêng 1.2 Lý chọn đề tài Sự phát triển thương mại điện tử ngày tăng lên với tốc độ cao Đặt biệt tình hình dịch bên COVID19 xảy toàn cầu Nhu cầu lại giảm sút, khiến cho nhiều người đường giảm mạnh Nắm bắt điều đó, em định chọn lựa đề tài “Xây dựng ứng dụng bán hàng” tảng web Đề tài kết hợp thời sở thích cá nhân em Và để giúp đỡ cho việc phát triển lĩnh vực với kiến thức, hiểu biết công nghệ mà em học tìm hiểu Em định chọn đề tài “Xây dựng ứng dụng bán hàng với ReactJs ASP.NET Core” nhằm áp dụng toàn kỹ năng, kiến thức có để đem sản phẩm hoàn chỉnh Với mong muốn làm chủ tiệm cafe nhỏ cho riêng Bản thân em chọn lựa đề tài cố gắng để hoàn thiện sản phẩm Chương GIỚI THIỆU TỔNG QUAN 2.1 Mục tiêu Để xây dựng hệ thống mong muốn em cần đạt mục tiêu sau: - Xây dựng hệ thống website cửa hàng cafe ổn định - Tìm hiểu nghiệp vụ bán hàng online mức để thực chức - Tìm hiểu quy trình nghiệp vụ tốn, mua bán sản phẩm thức uống nói chung cafe nói riêng - Tìm hiểu cách thực web api cơng nghệ ASP.NET Core - Tìm hiểu cách thực web front-end công nghệ ReactJS - Nâng cao kĩ chuyên môn phát triển ứng dụng web (front-end back-end) 2.2 Phạm vi Như vậy, để đạt mục tiêu nghiên cứu, em cần xác định rõ phạm vi đề tài Đề tài em xây dựng trang web bán hàng (cafe) ReactJS ASP.NET Core, có tính sau: - Quản lý sản phẩm cửa hàng hệ thống - Cung cấp tính mua sắm đặt hàng - Quản lý đơn hàng để hỗ trợ mua bán hàng hóa - Và vài tính khác phân quyền, xác thực người dùng 2.3 - Phương pháp Quy trình: o Phân tích đề tài o Liên hệ người có kiến thức bán hàng / bán hàng online o Tham khảo trang web/hệ thống tương tự có Việt Nam o Thu thập yêu cầu cho hệ thống o Nghiên cứu công nghệ để áp dụng 10 4.1.2.15 US-18-3: Admin: Xem chi tiết đơn hàng Bảng 4-16: US-18-3: Admin: Xem chi tiết đơn hàng Title Admin: Xem chi tiết đơn hàng Value Statement Là Admin, tơi xem chi tiết sản phẩm đơn hàng để chuẩn bị cho khách Acceptance Criteria Thông tin ĐƠN HÀNG bao gồm: Mã đơn; Firstname khách đặt hàng; Lastname khách đặt hàng; Tỉnh thành; Quận/Huyện/Thị xã; Phường/Xã; Số địa chỉ; Ghi chú; Số điện thoại; Giỏ hàng; Scenario: Admin xem chi tiết đơn hàng thành công Given: Tôi page quản lý đơn hàng When: Tôi nhấp chọn xem chi tiết đơn hàng danh sách đơn hàng Then: Tơi thấy chi tiết đơn hàng chọn Definition Done of - Đạt Acceptance Criteria Implement thành code Hoàn thành Unit test Build 34 4.2 Thiết kế sở liệu 4.2.1 Sơ đồ thực thể kết hợp ERD Hình 4-1: Sơ đồ thực thể kết hợp ERD 4.2.2 Danh sách Table Bảng 4-17: Danh sách table MySQL S T T Tên ERD Tên DB Ghi chú/Ý nghĩa Category category Danh mục phân loại sản phẩm Product product Danh phẩm Account account Danh mục tài khoản người dùng AdministrativeDi administrative_di Danh mục đơn vị 35 mục sản vision vision hành Nam chánh OrderStatus order_status Danh mục trạng thái đơn hàng Cart cart Danh mục giỏ hàng CartDetail cart_detail Danh mục chi tiết giỏ hàng Order order Danh hàng mục Việt đơn 4.2.3 Chi tiết table MySQL 4.2.3.1 Category Table Bảng 4-18: Chi tiết category table MySQL S T T Tên thuộc tính ID Title 4.2.3.2 KDL DB INT (AI, PK) VARCHAR(32) (NN, UQ) Product Table Ghi chú/Ý nghĩa Khóa chính, tự động tăng Không null, Bảng 4-19: Chi tiết product table MySQL S T T Tên thuộc tính KDL DB Ghi chú/Ý nghĩa ID INT (AI, PK) Khóa chính, tự động tăng Code VARCHAR(8) (NN, UQ) Mã sản phẩm người dùng tự nhập Không null, Title VARCHAR(32) (NN, UQ) Không null, Descriptio n VARCHAR(1024) (NN) Không null, giá trị mặc định: “No Description” CategoryI INT (NN, FK) 36 Khóa ngoại Category D Price INT (NN) Khơng null ImageURL VARCHAR(256) (NN) Không null, giá trị mặc định: “default.png” RecordStat us 4.2.3.3 TINYINT (NN) Không RecordStatus: - 0: Đã xóa - 1: Khơng xóa null Account Table Bảng 4-20: Chi tiết account table MySQL S T T Tên thuộc tính KDL DB Ghi chú/Ý nghĩa ID INT (AI, PK) Khóa chính, tự động tăng Username VARCHAR(32) (NN, UQ) Không null, Password BINARY(20) (NN) Không null, lưu dạng SHA1 4.2.3.4 AdministrativeDivision Table Bảng 4-21: Chi tiết administrative_division table MySQL S T T Tên thuộc tính KDL DB Ghi chú/Ý nghĩa ID INT (AI, PK) Khóa chính, tự động tăng FatherId INT Khóa ngoại, đơn vị cha Name VARCHAR(32) (NN, UQ) Không null, Type VARCHAR(32) (NN) Không null, loại đơn vị Level VARCHAR(32) Không null, phân cấp đơn 37 (NN) 4.2.3.5 vị: - “Tỉnh/Thành” - “Quận/Huyện” - “Phường/Xã” OrderStatus Table Bảng 4-22: Chi tiết order_status table MySQL S T T Tên thuộc tính KDL DB Ghi chú/Ý nghĩa ID INT (AI, PK) Khóa chính, tự động tăng Status VARCHAR(32) (NN, UQ) Cart Table 4.2.3.6 Không null, Bảng 4-23: Chi tiết cart table MySQL S T T Tên thuộc tính KDL DB Ghi chú/Ý nghĩa OrderID INT (PK, FK) Khóa chính, khóa ngoại Order Subtotal INT (NN) Khơng null Giá tạm tính Delivery INT (NN) Không null Discount INT (NN) Không null INT (NN) CartDetail Table Không null Total 4.2.3.7 Bảng 4-24: Chi tiết cart_detail table MySQL S T T Tên thuộc tính KDL DB Ghi chú/Ý nghĩa OrderID INT (PK, FK) Khóa chính, khóa ngoại Cart ProductID INT (PK, FK) Khóa chính, khóa ngoại Product 38 Price INT (NN) Không null Giá thời điểm mua Quantity INT (NN) Không null INT (NN) Order Table Không null Total 4.2.3.8 Bảng 4-25: Chi tiết order table MySQL S T T Tên thuộc tính KDL DB Ghi chú/Ý nghĩa ID INT (PK, AI) Khóa chính, tự động tăng Firstname VARCHAR(32) (NN) Không null Lastname VARCHAR(32) (NN) Không null StatusID INT (NN, FK) Khóa ngoại OrderStatus Phone VARCHAR(16) (NN) Khơng null ProvinceI D INT (NN) Khóa ngoại AdministrativeDivision DistrictID INT (NN) Khóa ngoại AdministrativeDivision Commune ID INT (NN) Khóa ngoại AdministrativeDivision Address VARCHAR(256 ) (NN) Không null Số nhà đường 10 Note VARCHAR(256 ) (NN) Không null Ghi thêm 39 4.3 Thiết kế kiến trúc phần mềm Hệ thống web site bán hàng em bao gồm phần tách biệt frontend backend Trong frontend xây dựng công nghệ ReactJS backend xây dựng công nghệ ASP.NET Core 4.3.1 Kiến trúc phía backend Phía backend thiết kế theo mơ hình Layer Trong có layer Controler, Services Repositories; bên cạnh có module Helper Chi tiết thành phần sau: Hình 4-2: Mơ hình kiến trúc phía backend - Controllers: dùng để cấu hình xử lý request, response frontend backend Controller nơi định nghĩa xử lý web api 40 Trong đó, Resources nơi định nghĩa loại data nằm request response, với số phương thức chuyển đổi resources models - Services: dùng để định nghĩa class để thực xử lý nghiệp vụ bao gồm repository giúp thao tác database Service sử dụng interface để thực thao tác database cần thiết Các xử lý nghiệp vụ khác thực Ví dụ lưu file vào nhớ Mặc dù việc lưu file khơng phải service, nơi để định việc lưu file - Repositories: Trong Repositories có ProcedureHelper nhiệm vụ gọi stored procedure để thao tác với database ProcedureHelper sử dụng thư viện Dapper giúp cho việc thao tác với database thông qua store procedure trả DTO Các DTO class định nghĩa tương đồng với kết trả từ procedure - Helpers: Nơi định nghĩa class có nhiệm vụ hỗ trợ, xử lý, thực công việc nhỏ lẻ Chẳng hạng xử lý kết trả về, xử lý thao tác với tập tin 4.3.2 Kiến trúc phía frontend Phía frontend xây dựng dựa quy chuẩn ReactJS Trong có thành phẩn gồm có: Components, Assets, Redux, Utils chi tiết sau: 41 Hình 4-3: Mơ hình kiến trúc phía frontend - Components/Layouts/Views: thành phần gồm nhiều thư mục source code Nhưng thực nhiệm vụ định nghĩa React component cho trang web - Assets: Thư mục chứa vấn đề liên quan đề styles, font, image 42 - Redux: Thư viện React Redux quen thuộc cần thiết cho việc quản lý state React Và nơi triển khai source code cho Redux - Utils: Giống với Helper backend, module dùng để chứa hàm hỗ trợ xử lý cho phía frontend Nó việc gọi API, xử lý lỗi, 43 Chương ĐÁNH GIÁ KẾT QUẢ 44 Chương KẾT LUẬN 6.1 Ưu điểm: - Trang web đáp ứng nhu cầu cho việc đặt hàng, Giao diện đẹp, rõ ràng, dễ dàng sử dụng - Tốc độ phản hồi nhanh 6.2 Nhược điểm - Độ bảo mật chưa cao - Chưa tích hợp chức giao hàng 6.3 45 Chương HƯỚNG PHÁT TRIỂN - Mở rộng hoàn thiện trang web - Tăng tính bảo mật người dùng 46 TÀI LIỆU THAM KHẢO [ 1] R Lander, "Announcing NET Core 1.0," Microsoft Blog, 27 June 2016 [Online] Available: https://devblogs.microsoft.com/dotnet/announcing-netcore-1-0/ [Accessed 24 May 2020] [ 2] R Lander, ".NET Core intro and overview," Microsoft Docs, 26 March 2020 [Online] Available: https://docs.microsoft.com/en- us/dotnet/core/introduction [Accessed 24 May 2020] [ 3] ".NET Core," Wikipedia, 23 May 2020 [Online] Available: https://en.wikipedia.org/wiki/.NET_Core [Accessed 24 May 2020] [ 4] "What is ASP.NET Core," Microsoft NET, [Online] Available: https://dotnet.microsoft.com/learn/aspnet/what-is-aspnet-core [Accessed 24 May 2020] [ 5] R Daniel, A Rick and L Shaun, "Introduction to ASP.NET Core," Microsoft Docs, 17 April 2020 [Online] Available: https://docs.microsoft.com/vi-vn/aspnet/core/introduction-to-aspnet-core? view=aspnetcore-3.1 [Accessed 24 May 2020] [ 6] "API gì? Những đặc điểm bật API," TopDev, [Online] Available: https://topdev.vn/blog/api-la-gi/ [Accessed 24 May 2020] [ 7] "ASP.NET Web APIs," Microsoft NET, [Online] Available: https://dotnet.microsoft.com/apps/aspnet/apis [Accessed 24 May 2020] [ 8] Đ Đạt, "MySQL gì? Hướng dẫn toàn tập MySQL," MatBao, 22 May 2020 [Online] Available: https://wiki.matbao.net/mysql-la-gi-huongdan-toan-tap-ve-mysql/ [Accessed 24 May 2020] [ 9] G Hai, "MySQL gì: giải thích tường tận MySQL cho người bắt đầu," Hostinger, 07 May 2019 [Online] Available: https://www.hostinger.vn/huong-dan/mysql-la-gi/ [Accessed 24 May 2020] 47 [ "React (web framework)," Wikipedia, 23 May 2020 [Online] 10 Available: https://en.wikipedia.org/wiki/React_(web_framework) [Accessed ] 24 May 2020] [ Đ K Toàn, "Giới thiệu ReactJS - Phần I (Các khái niệm bản)," 11 Viblo, 30 May 2017 [Online] Available: https://viblo.asia/p/gioi-thieu-ve] reactjs-phan-i-cac-khai-niem-co-ban-V3m5WzjblO7 [Accessed 24 May 2020] [ G Hai, "Apache gì? Giải thích cho người bắt đầu hiểu kỹ 12 Apache Web Server," Hostinger, 22 Jan 2019 [Online] Available: ] https://www.hostinger.vn/huong-dan/apache-la-gi-giai-thich-cho-nguoi-moibat-dau-hieu-ve-apache-web-server/ [Accessed 24 May 2020] 48 ... phục vụ cho việc xây dựng ứng dụng đại, cho phép kết nối cloud internet Với ASP.NET Core, có thể: - Xây dựng ứng dụng web dịch vụ, ứng dụng IoT, backend cho mobile app - Có thể sử dụng chung với... phạm vi xây dựng ứng dụng web đồ án này, em chọn lựa cách thức dùng ASP.NET Core web APIs để xây dựng phần backend cho hệ thống 3.1.2.1 API Web API [6] API phương thức/giao thức kết nối ứng dụng. .. viện /ứng dụng khác Nó viết tắt từ tiếng anh Application Programming Interface API cung cấp khả truy xuất đến một tài hàm mà ứng dụng muốn cung cấp API cho ứng dụng khác sử dụng Nhờ ứng dụng trao