Đề tài xây dựng website bán đồ công nghệ với microservices

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ VỚI MICROSERVICES Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Phạm Tấn Khang 19521670 Bùi Minh Huy 19521597 TP HCM, 24 tháng 12 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 BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ VỚI MICROSERVICES Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Phạm Tấn Khang 19521670 Bùi Minh Huy 19521597 TP HCM, 24 tháng 12 năm 2022 LỜI CẢM ƠN Đầu tiên, nhóm xin gửi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM quý Thầy Cô khoa Công nghệ phần mềm giúp cho em có kiến thức làm tảng để thực đề tài Đặc biệt, em xin gửi lời cảm ơn lòng biết ơn sâu sắc tới cô Trần Thị Hồng Yến (Giảng viên khoa Công Nghệ Phần Mềm) Cô trực tiếp hướng dẫn tận tình, sửa chữa đóng góp nhiều ý kiến quý báu giúp em hoàn thành tốt báo cáo mơn học Trong thời gian học đề tài, em vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu kiến thức Từ đó, em vận dụng tối đa thu thập để hồn thành báo cáo đồ án tốt Tuy nhiên, trình thực hiện, em khơng tránh khỏi thiếu sót Chính vậy, em mong nhận góp ý từ phía Cơ nhằm hồn thiện kiến thức mà em học tập hành trang để em thực tiếp đề tài khác tương lai Xin chân thành cảm ơn quý Thầy Cô! Nhóm sinh viên thực Phạm Tấn Khang Bùi Minh Huy ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ VỚI MICROSERVICES TÊN ĐỀ TÀI TIẾNG ANH: BUILDING TECHNOLOGY SHOP WEBSITE WITH MICROSERVICES Cán hướng dẫn: ThS Trần Thị Hồng Yến Thời gian thực hiện: Từ ngày: 05/09/2022 đến ngày: 31/12/2022 Sinh viên thực hiện: Phạm Tấn Khang – 19521670 Bùi Minh Huy – 19521597 Nội dung đề tài: Giới thiệu đề tài: Trong thời đại chuyển giao công nghệ cộng với tác động đại dịch mà người tiêu dùng chuyển thói quen mua hàng cửa hàng siêu thị sang mua sắm online Bởi tiện lợi, giá rõ ràng, vận chuyển đơn hàng ngày nhanh chóng hơn, cửa hàng kinh doanh ln nhận thấy tiềm việc tiếp thị bán hàng online.Đặc biệt cửa hàng bán đồ công nghệ cần phải mở rộng việc quảng bá mặt hàng tới khách hàng Nhận thấy nhu cầu cửa hàng tiềm việc kinh doanh online, nhóm chúng em tiến hành xây dựng "Website bán hàng công nghệ" nhằm thúc đẩy doanh thu cửa hàng thông qua việc bán hàng online Phần mềm nơi cấp cho người dùng thơng tin xác giá trực quan sản phẩm, góp phần làm cho việc mua bán thiết bị công nghệ thời kì dịch bệnh trở nên dễ dàng Ngồi cịn giúp hàng quản lý kho hàng, đơn xuất nhập hàng doanh thu 2 Mục tiêu đề tài: - Nắm bắt áp dụng kiến trúc microservices để xây dựng sản phẩm đề tài - Xây dựng website bán đồ công nghệ với nội dung phong phú, giao diện thân thiện, màu sắc hài hòa, bố cục hợp lý, đáp ứng chức cần thiết website thương mại điện tử - Xây dựng website quản trị cho nhân viên hàng với chức quản lý thông tin đa dạng tiện dụng Phạm vi đề tài: • Phạm vi mơi trường: o Triển khai sản phẩm mơi trường web • Phạm vi chức năng: o Đối với phía admin: ▪ Quản lý sản phẩm, biến thể sản phẩm ▪ Quản lý thương hiệu, loại sản phẩm ▪ Quản lý đơn hàng ▪ Quản lý khuyến ▪ Quản lý tài khoản nhân viên ▪ Thống kê o Đối với phía website: ▪ Đăng nhập, đăng ký tài khoản ▪ Quản lý thông tin tài khoản ▪ Hiển thị danh sách sản phẩm, chi tiết sản phẩm ▪ Tìm kiếm sản phẩm ▪ Bộ lọc chi tiết sản phẩm ▪ Chức giỏ hàng ▪ Chức đặt hàng ▪ Chức toán online Đối tượng sử dụng: - Tất người dùng có nhu cầu mua đồ cơng nghệ cửa hàng - Nhân viên cửa hàng Phương pháp thực hiện: - Tìm hiểu kiến trúc microservices - Tham khảo website liên quan để hiểu rõ nghiệp vụ - Tiến hành phân tích thiết kế hệ thống - Xây dựng module theo kiến trúc microservices - Tích hợp API vào website người dùng website nhân viên - Tiến hành triển khai kiểm thử Công nghệ sử dụng: - Backend: Spring Boot - Front-end: ReactJS, VueJS - Database: PostgreSQL - Source Control: GitHub - Deploy: Docker Kết mong đợi: - Nắm bắt áp dụng công nghệ mới, kiến trúc để xây dựng sản phẩm đề tài - Hiểu rõ nghiệp vụ, chức website thương mại điện tử - Áp dụng kiến thức học phân tích thiết kế hệ thống phần mềm, quy trình phát triển phần mềm, quản lý triển khai dự án phần mềm để xây dựng website sản phẩm đề tài - Giao diện website đẹp mắt, dễ sử dụng người dùng - Có thể thay đổi giao diện cách linh động mở rộng thêm chức cho website sản phẩm đề tài để phù hợp với nhu cầu thực tiễn tương lai Kế hoạch thực hiện: Giai đoạn Thời gian Công việc Chuẩn bị 05/09/2022 – 18/09/2022 - Tìm hiểu kiến trúc microservices 19/09/2022 – 02/10/2022 - Phân tích, xác định, chức - Phân tích, thiết kế database cho phù hợp với kiến thức cơng nghệ Phân tích, thiết kế hệ thống Xây dựng kiến trúc 03/10/2022 – 27/11/2022 ứng dụng - Phân tích, xác định module - Xây dựng base source - Phát triển giao diện admin với ReactJS - Phát triển giao diện website với VueJS - Xây dựng RESTful API cho chức module - Tích hợp API để hồn thiện giao diện admin website - Deploy ứng dụng docker kiểm thử - Thực kiểm thử luồng chức sửa lỗi - Tiến hành sửa lỗi phát sinh có - Cải thiện giao diện hồn thành ứng dụng - Viết báo cáo khóa luận - Làm slide thuyết trình Deploy, Hồn thiện 28/11/2022 – 11/12/2022 12/12/2022 – 31/12/2022 báo cáo slide thuyết trình - Phân công công việc: Công việc Mô tả công việc Cơng việc chung - Tìm hiểu cơng nghệ, kiến trúc microservice - Phân tích, xác định, chức yêu cầu cho module - Thiết kế sở liệu - Kiểm thử - Chuẩn bị tài liệu, viết báo cáo - Xây dựng giao diện website Phạm Tấn Khang Công việc cá nhân Bùi Minh Huy - Xây dựng base source - Tích hợp API với website - Triển khai module Product, - Deploy ứng dụng docker Import, Mail - Triển khai module - Tích hợp API với website Admin Authentication, User, Order TP HCM, ngày 11 tháng 09 năm 2022 Xác nhận CBHD Sinh viên (Ký tên ghi rõ họ tên) (Ký tên ghi rõ họ tên) ThS Trần Thị Hồng Yến Phạm Tấn Khang | Bùi Minh Huy MỤC LỤC LỜI CẢM ƠN MỤC LỤC DANH MỤC BẢNG 11 DANH MỤC HÌNH ẢNH 15 Chương GIỚI THIỆU ĐỀ TÀI 17 1.1 Tên đề tài 17 1.2 Mô tả đề tài 17 1.3 Lý chọn thiết kế Website kiến trúc microservices 17 1.4 Công nghệ sử dụng .19 Chương CƠ SỞ LÝ THUYẾT 20 2.1 Tổng quan Microservices 20 2.2 Docker 22 2.3 Tổng quan Spring Boot 23 2.4 Tổng quan Postgres SQL 24 2.5 Tổng quan Json Web Token (JWT) 25 Chương PHÂN TÍCH ĐẶC TẢ YÊU CẦU 27 3.1 Mô tả yêu cầu 27 3.1.1 Yêu cầu chức 27 3.1.2 Yêu cầu phi chức 29 3.2 Phân tích Use case 30 3.2.1 Use case quản lý .30 3.2.1.1 Sơ đồ Use case 30 3.2.1.2 Danh sách Actor 31 3.2.1.3 Danh sách Use-case 31 3.2.1.4 Đặc tả Use-case 32 3.2.2 Use case website 50 3.2.2.1 Sơ đồ Use case 50 3.2.2.2 Danh sách Actor 50 3.2.2.3 Danh sách Use case 51 3.2.2.4 Đặc tả Use Case .52 Chương THIẾT KẾ HỆ THỐNG 63 4.1 Kiến trúc hệ thống BackEnd 63 4.1.1 Mô tả kiến trúc hệ thống microservices 63 4.1.2 Mô tả kiến trúc hệ thống services .64 4.1.3 Mô tả thành phần hệ thống 66 4.2 Mô tả kiến trúc FrontEnd 68 4.2.1 Phía hệ thống quản lý .68 4.2.2 Phía website 69 Chương THIẾT KẾ CƠ SỞ DỮ LIỆU 70 5.1 Sơ đồ liệu Product Service 70 5.1.1 Danh sách bảng liệu 71 5.1.2 Mô tả bảng liệu 71 5.1.2.1 Bảng BRAND 71 5.1.2.2 Bảng CATEGORY 72 5.1.2.3 Bảng ATTRIBUTE 72 5.1.2.4 Bảng TAG 73 5.1.2.5 Bảng CATEGORY_ATTRIBUTE 73 5.1.2.6 Bảng PRODUCT .73 5.1.2.7 Bảng VARIANT 74 5.1.2.8 Bảng VARIANT_ATTRIBUTE 74 5.2 Sơ đồ liệu Import Service 75 5.2.1 Danh sách bảng liệu 75 5.2.2 Mô tả bảng liệu 75 5.2.2.1 Bảng IMPORT 75 5.2.2.2 Bảng IMPORT_DETAIL 76 5.3 Sơ đồ liệu Order Service 77 5.3.1 Danh sách bảng liệu 77 5.3.2 Mô tả bảng liệu 77 5.3.2.1 Bảng VOUCHER 77 5.3.2.2 Bảng ORDERS 78 6.2.3.2 Xem sản phẩm theo thương hiệu Hình 6.19 Màn hình xem sản phẩm theo thương hiệu Bảng 6.28 Bảng mơ tả chi tiết hình xem sản phẩm theo thương hiệu STT Tên Kiểu Ý nghĩa brandItem Button Chuyển tới trang xem sản phẩm thương hiệu chọn filterBtn Button Bật, Tắt chế độ filter rangePrice RangeSlide Lựa chọn vùng giá sản phẩm searchProduct TextField Tìm kiếm sản phẩm rdSort Radio Sắp xếp sản phẩm productCard Custom Chuyển tới trang xem chi tiết sản phẩm 113 Ghi 6.2.3.3 Xem sản phẩm theo phân loại Hình 6.20 Màn hình xem sản phẩm theo thương hiệu Bảng 6.29 Bảng mô tả chi tiết hình xem sản phẩm theo thương hiệu STT Tên Kiểu Ý nghĩa categoryBtn Button Mở tắt danh sách phân loại categoryItem Button Chuyển tới trang xem sản phẩm phân loại chọn filterBtn Button Bật, Tắt chế độ filter rangePrice RangeSlide Lựa chọn vùng giá sản phẩm openTag Button Tắt mở thuộc tính Tag Chip Lựa chọn tag searchProduct TextField Tìm kiếm sản phẩm rdSort Sắp xếp sản phẩm Radio 114 Ghi productCard Chuyển tới trang xem chi tiết sản phẩm Custom 6.2.3.4 Xem giỏ hàng Hình 6.21 Màn hình giỏ hàng Bảng 6.30 Bảng mơ tả chi tiết hình giỏ hàng STT Tên Kiểu Ý nghĩa minusBtn Button Giảm số lượng sản phẩm plusBtn Button Tăng số lượng sản phảm delBtn Button Xóa sản phẩm khỏi giỏ hàng voucher TextField Nhập mã voucher chkBtrn Button Chuyển tới trang đặt hàng 115 Ghi 6.2.3.5 Thơng tin đặt hàng Hình 6.22 Màn hình thơng tin đặt hàng Bảng 6.31 Bảng mơ tả chi tiết hình thơng tin đặt hàng STT Tên Kiểu Ý nghĩa Name TextField Điền tên người nhận phoneNo TextField Điền số điện thoại người nhận address Select Nhập địa người nhận checkoutBtn Button Hòan tất đặt hàng 116 Ghi 6.2.3.6 Chi tiết sản phẩm Hình 6.23 Màn hình chi tiết sản phẩm Bảng 6.32 Bảng mô tả chi tiết hình chi tiết sản phẩm Kiểu Ý nghĩa STT Tên nextBtn Button Chuyển tới xem hình ảnh radioVariant Radio Chọn phiên minusBtn Button Giảm số lượng plusBtn Button Tăng số lượng addCartBtn Button Thêm sản phẩm vào giỏ 117 Ghi 6.2.3.7 Lịch sử mua hàng Hình 6.24 Màn hình lịch sử mua hàng Tại thông tin tất đơn hàng hiển thị, người đùng chọn đơn hàng để xem chi tiết 6.2.3.8 Thay đổi thông tin cá nhân Hình 6.25 Màn hình thay đổi thơng tin cá nhân 118 Bảng 6.33 Bảng mô tả chi tiết hình thơng tin cá nhân STT Kiểu Tên Ý nghĩa name TextField Điền tên người dùng phoneNo TextField Điền số điện thoại người dùng email TextField Địa Email birthday TextField Ngày sinh người dùng province TextField Tỉnh district TextField Huyện ward TextField Xã address TextField Địa saveBtn Button Lưu thay đổi Ghi Chỉ xem 6.2.3.9 Thay đổi mật Hình 6.26 Màn hình thay đổi mật Bảng 6.34 Bảng mơ tả chi tiết hình thay đổi mật STT Tên Kiểu Ý nghĩa oldPass TextField Mật cũ newPass TextField Mật saveBtn Button Lưu thay đổi 119 Ghi 6.2.3.10 Đăng nhập Hình 6.27 Màn hình đăng nhập Bảng 6.35 Bảng mơ tả chi tiết hình đăng nhập STT Tên Kiểu Ý nghĩa email TextField Email người dùng password TextField Mật login Button Thực đăng nhập register Label Chuyển qua tab đăng ký forgotPassword Label Chuyển qua tab quên mật 120 Ghi 6.2.3.11 Đăng ký Hình 6.28 Màn hình đăng ký Bảng 6.36 Bảng mô tả chi tiết hình đăng ký STT Tên Kiểu Ý nghĩa email TextField Email người dùng password TextField Mật confirmPassword TextField Nhập lại mật register Button Thực đăng ký login Label Chuyển qua tab đăng nhập 121 Ghi 6.2.3.12 Quên mật Hình 6.29 Màn hình qn mật Bảng 6.37 Bảng mơ tả chi tiết hình quên mật STT Tên Kiểu Ý nghĩa email TextField Email người dùng sendMail Button Thực gửi mail login Label Chuyển tới tab đăng nhập 122 Ghi 6.2.3.13 Đặt lại mật Hình 6.30 Màn hình đặt lại mật Bảng 6.38 Bảng mơ tả chi tiết hình đặt lại mật STT Tên Kiểu TextField Ý nghĩa Mật password confirmPassword TextField Nhập lại mật saveBtn Thực thay đổi mật Button Ghi 123 Phải giống mật (1) 6.2.3.14 Thanh toán online thẻ Hình 6.31 Màn hình tốn online thẻ Tại người dùng điền thông tin thẻ để tiến hành tốn 6.2.3.15 Thơng tin đơn hàng điện tử Hình 6.32 Thơng tin đơn hàng qua mail Sau đặt hàng thông tin đơn hàng gửi qua mail người mua 124 KẾT LUẬN ❖ Đánh giá - Thuận lợi: • Giảng viên hướng dẫn tận tình, hỗ trợ định hướng nhóm nghiên cứu thực đề tài • Vận dụng kiến thức học để áp dụng vào đồ án • Các tài liệu hướng dẫn phong phú giúp giải vấn đề thực đồ án - Khó khăn: • Gặp nhiều rắc rối việc thiết kế sở liệu cho phù hợp • Phức tạp chuyển đổi từ monolith sang microservices • Data sharing service gặp nhiều bất cập • Khó khăn việc trả liệu cho phía front-end theo u cầu • Cấu hình source code phức tạp ❖ Kết đạt - Ưu điểm: • Chuyển đổi hết chức từ kiến trúc monolith sang microservices • Sinh viên nắm kiến trúc microservices • Hỗ trợ tốn online - Nhược điểm: • Chưa có tài liệu hướng dẫn sử dụng phía hệ thống quản lý • Website chưa tương tích với hình nhỏ • Bảo mật hệ thống cịn nhiều thiếu sót ❖ Hướng phát triển - Cải thiện UI/UX - Thêm tính cho phép so sánh sản phẩm thể loại - Thêm tính cho phép người dùng bình luận, đánh giá sản phẩm - Xây dựng mở rộng thêm chức gợi ý sản phẩm, chatbot hỗ trợ tư vấn 125 - Hoàn thiện chức có 126 TÀI LIỆU THAM KHẢO [1] Spring Cloud Docs https://spring.io/projects/spring-cloud [2] Learn Spring Boot https://www.baeldung.com/spring-boot [3] Spring Data JPA https://vladmihalcea.com/ [4] Vuetify Web Docs: https://vuetifyjs.com/en/ [5] Vue Web Docs: https://vuejs.org/ [6] Ant Design Web Docs: https://ant.design/ [7] W3Schools Online Web Tutorials: https://www.w3schools.com/ [8] Playlist Microservices By Amigoscode: https://www.youtube.com/watch?v=p485kUNpPvE&list=PLwvrYc43l1Mwqpf9i1B1gXfMeHOm6DeY 127 ... 124 16 Chương GIỚI THIỆU ĐỀ TÀI 1.1 Tên đề tài Tên đề tài ? ?Xây dựng website bán đồ công nghệ với Microservices? ?? 1.2 Mô tả đề tài Tên gọi website đề tài GearShop GearShop website hỗ trợ quản lý... tiếp đề tài khác tương lai Xin chân thành cảm ơn q Thầy Cơ! Nhóm sinh viên thực Phạm Tấn Khang Bùi Minh Huy ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ VỚI MICROSERVICES TÊN ĐỀ... đề tài - Xây dựng website bán đồ công nghệ với nội dung phong phú, giao diện thân thiện, màu sắc hài hòa, bố cục hợp lý, đáp ứng chức cần thiết website thương mại điện tử - Xây dựng website quản