Bối cảnh và vấn đề nghiên cứu

Đồ án tốt nghiệp "Xây dựng website kinh doanh các mặt hàng thời trang thể thao" do sinh viên Nguyễn Thành Trọng (MSSV: 19110303, khóa 2019), ngành Công nghệ Thông tin, Khoa Đào tạo Chất lượng cao thuộc Trường Đại học Sư phạm Kỹ thuật TP. Hồ Chí Minh thực hiện dưới sự hướng dẫn của TS. Mai Anh Thơ vào tháng 09/2024 (giảng viên phản biện: TS. Lê Vĩnh Thịnh).

Về lý do chọn đề tài và bối cảnh thực tiễn, tác giả chỉ ra rằng sự phát triển mạnh mẽ của công nghệ thông tin đã thúc đẩy nhu cầu sử dụng các ứng dụng mua bán trực tuyến các mặt hàng thiết yếu, đặc biệt là thời trang thể thao. Trên thị trường đã xuất hiện nhiều nền tảng kinh doanh như Sport Shop, Minh Hải Sport Shop hay Coolmate, giúp người tiêu dùng mua sắm thuận tiện thông qua các tiện ích giao hàng tận nơi, thanh toán trực tuyến, chính sách đổi trả và cập nhật mẫu mã thường xuyên. Tuy nhiên, người tiêu dùng cũng đối mặt với các rủi ro như mua phải hàng giả, hàng kém chất lượng hoặc thiếu an toàn trong thanh toán trực tuyến. Về tính cấp thiết, tác giả khẳng định trong thời đại công nghệ 4.0, các cơ sở và công ty kinh doanh đều cần trang bị ứng dụng quản lý và bán hàng trực tuyến nhằm thúc đẩy doanh số và quản trị vận hành hiệu quả.

Mục tiêu và nhiệm vụ nghiên cứu của đồ án bao gồm:

  1. Nghiên cứu công nghệ lập trình Java Spring Web Application cùng các công nghệ liên quan gồm HTML5, CSS3, Spring Boot, Spring JPA/Hibernate, Thymeleaf, ReactJS, Tailwind CSS, MySQL và Vite.
  2. Xác định các yêu cầu và chức năng chính của website thương mại điện tử thời trang thể thao.
  3. Thiết kế kiến trúc và cấu trúc toàn diện cho website.
  4. Xây dựng giao diện người dùng (Frontend) sử dụng ReactJS và Tailwind CSS.
  5. Xây dựng hệ thống xử lý phía máy chủ (Backend) sử dụng ngôn ngữ Java và nền tảng Spring Boot.
  6. Xây dựng hệ thống cơ sở dữ liệu quan hệ (Relational Database) sử dụng hệ quản trị MySQL.

Đối tượng nghiên cứu của đề tài là công nghệ lập trình web ứng dụng Java Spring, kết hợp ngăn xếp công nghệ Frontend hiện đại cùng kiến trúc cơ sở dữ liệu quan hệ. Phạm vi nghiên cứu giới hạn trong phạm vi website kinh doanh và hệ thống quản lý website của các cửa hàng kinh doanh thời trang thể thao trên thị trường trong nhiều năm trở lại đây.

Cơ sở lý thuyết và phương pháp

Khung lý thuyết và công nghệ được tác giả phân tích và áp dụng trong đồ án bao gồm:

  • ReactJS: Thư viện JavaScript mã nguồn mở do Facebook phát triển (ra mắt năm 2013), phục vụ xây dựng giao diện người dùng động và ứng dụng đơn trang (SPA). Nền tảng dựa trên hai khái niệm cốt lõi là JSX (JavaScript Extension) và Virtual DOM (bản sao của DOM thật giúp tối ưu cập nhật giao diện). Điểm mạnh được tác giả ghi nhận là khả năng tái sử dụng component, thân thiện với SEO, hỗ trợ debug bằng Chrome extension; hạn chế là chỉ đóng vai trò View Library (không phải khung MVC hoàn chỉnh), dung lượng khoảng 35KB (tương đương Angular 39KB) và đòi hỏi cấu hình bổ sung khi tích hợp hệ thống truyền thống.
  • Redux: Thư viện quản lý trạng thái (state) dựa trên luồng dữ liệu một chiều (unidirectional data flow) với ba thành phần chính: Store (nơi lưu trữ trạng thái), Action (mô tả sự kiện xảy ra) và Reducer (hàm tính toán trạng thái mới). Ưu điểm là quản lý luồng dữ liệu dự đoán được, phù hợp cho trạng thái phức tạp; nhược điểm là đòi hỏi nhiều mã soạn sẵn (boilerplate code) và tăng độ phức tạp trong các dự án nhỏ.
  • Tailwind CSS: Khung giao diện CSS theo định hướng tiện ích (utility-first), cho phép tạo giao diện nhanh thông qua việc kết hợp các lớp tiện ích được định nghĩa sẵn trực tiếp trong mã HTML, tối ưu hiệu suất build bằng cách loại bỏ các lớp không sử dụng. Hạn chế là làm mã HTML dài và giảm sự tách biệt giữa cấu trúc HTML và định dạng kiểu dáng.
  • Java và Spring Boot: Nền tảng backend cung cấp cơ chế cấu hình tự động (auto-configuration), máy chủ nhúng (embedded servers như Tomcat, Jetty, Undertow), quản lý phụ thuộc qua Maven/Gradle và công cụ giám sát Spring Boot Actuator. Nhược điểm được đề cập là dung lượng tệp triển khai lớn do chứa các phụ thuộc không dùng tới và khó kiểm soát sâu cấu hình mặc định.
  • RESTful API: Kiến trúc dịch vụ web truyền tải dữ liệu qua HTTP sử dụng các phương thức chuẩn (GET, POST, PUT, DELETE) với định dạng dữ liệu nhẹ JSON/XML, đảm bảo nguyên tắc phi trạng thái (stateless) và phân tách độc lập giữa máy khách và máy chủ.
  • MySQL: Hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở sử dụng ngôn ngữ truy vấn SQL, hỗ trợ lập chỉ mục tối ưu, phân quyền truy cập, mã hóa SSL và quản trị trực quan qua MySQL Workbench.

Phương pháp nghiên cứu thực tế bao gồm:

  • Khảo sát thực trạng và phân tích đối chuẩn (benchmarking) 5 website kinh doanh thời trang thể thao thực tế: Coolmate, YOLO Sport, Sporter, Minh Hải Sport và SportShop.
  • Phân tích và tổng hợp yêu cầu người dùng, đúc kết các ưu điểm và thiếu sót từ hệ thống thực tế để đề xuất giải pháp.
  • Thiết kế hệ thống theo mô hình hướng đối tượng: xây dựng biểu đồ trường hợp sử dụng (Use Case Diagram), biểu đồ lớp (Class Diagram), biểu đồ tuần tự (Sequence Diagram) và biểu đồ quan hệ thực thể (ERD).
  • Lập kế hoạch phân chia công việc theo mốc thời gian, cài đặt thử nghiệm và triển khai ứng dụng.

Nguồn dữ liệu của đề tài được thu thập từ việc trải nghiệm, phân tích giao diện và chức năng của các website thương mại điện tử thể thao tại Việt Nam.

Thiết kế và triển khai

Hệ thống được thiết kế theo kiến trúc phân tầng tách biệt giữa tầng giao diện máy khách (Client/Frontend) và tầng dịch vụ phía sau (Backend/Server), trao đổi dữ liệu thông qua RESTful API định dạng JSON.

Hệ thống yêu cầu các tiêu chí phi chức năng gồm: bảo mật mật khẩu người dùng dưới dạng mã băm (hash) trong cơ sở dữ liệu; đảm bảo tính khả dụng với thời gian hoạt động thường xuyên; đảm bảo tính nhất quán dữ liệu theo cấu hình chuẩn hóa; và duy trì khả năng sử dụng với giao diện thân thiện.

Tác giả mô hình hóa yêu cầu hệ thống thành 3 nhóm tác nhân chính, tổng hợp trong bảng chức năng dưới đây:

Nhóm tác nhân Số lượng chức năng Danh sách chức năng chi tiết
Người dùng chưa có tài khoản 08 chức năng 1. Đăng ký tài khoản
2. Đăng nhập hệ thống
3. Xem chi tiết sản phẩm
4. Tìm kiếm sản phẩm theo loại
5. Tìm kiếm sản phẩm theo giá
6. Thêm sản phẩm vào giỏ hàng
7. Xem chi tiết giỏ hàng
8. Cập nhật thông tin giỏ hàng (tăng/giảm số lượng, xóa)
Người dùng đã xác thực 08 chức năng 1. Đăng nhập
2. Đăng xuất
3. Quên mật khẩu
4. Đổi mật khẩu
5. Chỉnh sửa avatar
6. Chỉnh sửa thông tin cá nhân
7. Thanh toán sản phẩm trong giỏ hàng
8. Xem lịch sử các đơn hàng đã thanh toán
Người quản lý (Admin) 32 chức năng - Quản lý người dùng: Xem danh sách, xóa, kích hoạt, hủy kích hoạt (4 chức năng).
- Quản lý sản phẩm chính: Xem danh sách, thêm, chỉnh sửa, xóa (4 chức năng).
- Quản lý sản phẩm con: Xem danh sách, thêm, chỉnh sửa, xóa (4 chức năng).
- Quản lý danh mục/loại sản phẩm: Xem danh sách, thêm, chỉnh sửa, xóa (4 chức năng).
- Quản lý danh mục con: Xem danh sách, thêm, chỉnh sửa, xóa (4 chức năng).
- Quản lý màu sắc: Xem danh sách, thêm, chỉnh sửa, xóa (4 chức năng).
- Quản lý khuyến mãi (sale): Xem danh sách, thêm, chỉnh sửa, xóa (4 chức năng).
- Quản lý mã giảm giá: Xem danh sách, thêm, chỉnh sửa, xóa (4 chức năng).
- Quản lý đơn hàng: Xem danh sách, xem chi tiết, xóa đơn hàng (3 chức năng).

Về thiết kế chi tiết, đồ án xây dựng lược đồ lớp tổng thể hệ thống, lược đồ quan hệ thực thể cơ sở dữ liệu (ERD) và hệ thống lược đồ tuần tự (Sequence Diagram) cho các luồng xử lý: Đăng ký tài khoản, Xem chi tiết sản phẩm, Tìm kiếm sản phẩm theo loại, Đăng nhập, Đăng xuất, Quên mật khẩu, Thanh toán sản phẩm, Xem lịch sử thanh toán, Xóa người dùng, Kích hoạt/Hủy kích hoạt người dùng, Thao tác CRUD (Thêm, Sửa, Xóa) cho Sản phẩm, Sản phẩm con, Danh mục, Màu sắc, Khuyến mãi và Mã giảm giá.

Về triển khai và cài đặt (Deployment):

  • Frontend xây dựng bằng ReactJS, Tailwind CSS và Vite, quản lý mã nguồn trên kho lưu trữ GitHub.
  • Backend cấu trúc theo các package chuẩn của Spring Boot để xử lý logic nghiệp vụ và ánh xạ dữ liệu qua JPA/Hibernate.
  • Triển khai ứng dụng (Deploy) bằng nền tảng đám mây Railway, kết nối trực tiếp với kho lưu trữ GitHub (chọn repository, thiết lập dịch vụ, nạp các biến môi trường cấu hình và kích hoạt tiến trình triển khai tự động).

Về kiểm thử chương trình: Đồ án xác lập mục tiêu kiểm thử nhằm đảm bảo các luồng chức năng hoạt động đúng logic thiết kế, kiểm tra tính tương thích giao diện và xác minh các tiêu chí kiểm thử về tính toàn vẹn dữ liệu trong cơ sở dữ liệu quan hệ.

Nội dung chính theo từng chương

CHƯƠNG 1: MỞ ĐẦU

Chương này trình bày lý do chọn đề tài, tính cấp thiết trong bối cảnh thương mại điện tử 4.0, xác định đối tượng nghiên cứu là các công nghệ Spring Boot, ReactJS, Tailwind CSS, MySQL. Tác giả phân tích các công trình kinh doanh thể thao liên quan trên thị trường, đồng thời đặt ra mục tiêu đạt được: xây dựng nền tảng mua sắm hoàn chỉnh có giao diện tối ưu, quản lý sản phẩm chi tiết, thanh toán trực tuyến an toàn, tích hợp khuyến mãi và quản lý tài khoản khách hàng.

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG

Tác giả tiến hành khảo sát thực nghiệm 5 nền tảng kinh doanh trực tuyến:

  • Coolmate: Thương hiệu thời trang nam tối giản, định hướng thời trang bền vững (Sustainable Fashion), sở hữu trang chủ có banner khuyến mãi, trang danh mục hỗ trợ thêm trực tiếp vào giỏ hàng, trang thanh toán tích hợp mã giảm giá và trang đăng nhập hỗ trợ tài khoản hệ thống hoặc liên kết Google, Facebook.
  • YOLO Sport: Thành lập năm 2016, tập trung đồ tập gym, yoga, bóng đá nam nữ, sở hữu hệ thống bộ lọc sản phẩm theo điều kiện, trang giỏ hàng cho phép điều chỉnh số lượng và nút chuyển tiếp thanh toán (process to checkout).
  • Sporter: Chuyên về áo bóng đá, giao diện đơn giản, đề cao nội dung lịch sử thành tựu các câu lạc bộ; công cụ tìm kiếm yêu cầu người dùng phải nắm chính xác tên sản phẩm; thiếu sót về mặt giới thiệu thương hiệu.
  • Minh Hải Sport: Cung cấp trang phục, giày, balo, phụ kiện thể thao chính hãng; điểm đáng chú ý là cho phép người mua thanh toán đơn hàng mà không bắt buộc phải đăng nhập tài khoản.
  • SportShop: Cung cấp thông tin sản phẩm cụ thể, hướng dẫn sử dụng và gắn liên kết liên hệ đa nền tảng; tuy nhiên hệ thống khảo sát ghi nhận nhược điểm là không tìm thấy giỏ hàng để thanh toán sản phẩm.

Từ kết quả khảo sát, tác giả rút ra các giải pháp: tạo không gian hồ sơ thương hiệu cửa hàng, tích hợp bảo mật giao dịch tài chính, tối ưu hóa công cụ tìm kiếm và lọc sản phẩm. Chương 2 khép lại bằng bảng đặc tả 8 yêu cầu chức năng cho khách vãng lai, 8 yêu cầu cho người dùng đăng nhập và 32 yêu cầu cho người quản trị.

CHƯƠNG 3: KIẾN TRÚC HỆ THỐNG

Nội dung chương tập trung làm rõ kiến trúc cơ bản của hệ thống và đánh giá chi tiết lý thuyết, ưu điểm, nhược điểm cùng khả năng vận dụng thực tiễn của từng công nghệ lựa chọn: thư viện ReactJS, thư viện quản lý trạng thái Redux, khung giao diện Tailwind CSS, nền tảng Java kết hợp Spring Boot, mô hình kiến trúc giao tiếp RESTful API và hệ quản trị cơ sở dữ liệu quan hệ MySQL.

CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

Chương 4 là phần trọng tâm về kỹ thuật phần mềm, trình bày chi tiết từng Use Case cụ thể. Điểm đặc trưng trong mô hình dữ liệu của hệ thống là việc phân tách cấu trúc giữa "sản phẩm" (sản phẩm cha mang thông tin tổng quát) và "sản phẩm con" (các biến thể cụ thể của sản phẩm), cũng như "danh mục" và "danh mục con", đi kèm các thực thể quản lý độc lập như màu sắc, chương trình khuyến mãi (sale), mã giảm giá và đơn hàng. Tác giả xây dựng biểu đồ lớp hệ thống, mô tả lược đồ quan hệ thực thể (ERD) và chi tiết hóa 29 lược đồ tuần tự cho tất cả các kịch bản tương tác người dùng và quản trị viên.

CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ

Chương này minh họa trực quan kết quả cài đặt hệ thống thông qua các giao diện thực tế: giao diện xác thực tài khoản (đăng ký, đăng nhập, quên mật khẩu, đăng nhập admin), giao diện phía Client (trang chủ, danh sách sản phẩm, chi tiết sản phẩm, giỏ hàng, thanh toán đơn hàng) và hệ thống màn hình quản trị Admin (quản lý người dùng, sản phẩm, sản phẩm con, danh mục, khuyến mãi, mã giảm giá, màu sắc). Bên cạnh đó, chương mô tả cấu trúc các gói (packages) trong mã nguồn back-end Spring Boot, hướng dẫn các bước triển khai (deploy) hệ thống lên nền tảng Railway thông qua kho mã nguồn GitHub và thiết lập biến môi trường, kết thúc bằng việc xác định mục tiêu và tiêu chí kiểm thử chương trình.

CHƯƠNG 6: KẾT LUẬN

Tác giả tổng kết lại các mục tiêu đã hoàn thành của đồ án, chỉ ra những mặt nhược điểm còn tồn tại của hệ thống và đề xuất các định hướng phát triển nhằm nâng cấp hoàn thiện ứng dụng trong tương lai.

Kết quả và đóng góp

Về kết quả xây dựng hệ thống:

  • Xây dựng hoàn chỉnh một ứng dụng web thương mại điện tử chuyên ngành thời trang thể thao với đầy đủ hai phân hệ độc lập: Phân hệ khách hàng (Client) và Phân hệ quản trị (Admin).
  • Phân hệ Client cung cấp trải nghiệm mua sắm trực tuyến gồm: tìm kiếm và lọc sản phẩm theo loại và giá; quản lý giỏ hàng; cập nhật thông tin cá nhân, thay đổi ảnh đại diện (avatar); quy trình thanh toán đơn hàng và tra cứu lịch sử mua hàng.
  • Phân hệ Admin cung cấp bảng điều khiển quản trị toàn diện gồm 32 chức năng, nổi bật là khả năng quản lý danh mục đa cấp (danh mục cha và danh mục con), quản lý sản phẩm phân cấp (sản phẩm cha và các sản phẩm con theo thuộc tính biến thể màu sắc), kiểm soát người dùng (kích hoạt/hủy kích hoạt tài khoản), quản lý mã giảm giá, chiến dịch khuyến mãi và xử lý đơn đặt hàng.
  • Đảm bảo an toàn cơ sở dữ liệu thông qua cơ chế mã băm (hash) mật khẩu người dùng trước khi lưu trữ trong MySQL.
  • Đóng gói và triển khai thành công ứng dụng thực tế trên môi trường máy chủ đám mây Railway thông qua liên kết kho mã nguồn GitHub.

Về giải pháp và đóng góp của đề tài:

  • Từ việc khảo sát thực tế các hạn chế của các website trên thị trường (như Sporter tìm kiếm khó khăn, SportShop thiếu giỏ hàng thanh toán rõ ràng, Coolmate và Minh Hải có chính sách thanh toán linh hoạt), tác giả đã tổng hợp và thiết kế một luồng mua sắm tinh gọn, kết hợp cơ chế quản lý biến thể sản phẩm chi tiết nhằm giải quyết bài toán đặc thù của ngành thời trang thể thao.

Hạn chế và hướng nghiên cứu tiếp

Về hạn chế:

  • Kiến thức của sinh viên thực hiện còn những giới hạn nhất định dẫn đến các thiếu sót trong quá trình hoàn thiện đồ án.
  • Về mặt công nghệ, hệ thống backend sử dụng Spring Boot mặc định có thể tạo ra các phụ thuộc không dùng đến, làm tăng kích thước gói triển khai; việc quản lý trạng thái bằng Redux tạo thêm khối lượng mã soạn sẵn; đồng thời cơ sở dữ liệu MySQL có thể đối mặt với thách thức hiệu năng khi mở rộng quy mô dữ liệu và người dùng đồng thời ở mức độ rất lớn.

Về hướng nghiên cứu tiếp:

  • Tiếp tục nâng cấp và tối ưu hóa các module chức năng theo các hướng phát triển được vạch ra tại Chương 6 của đồ án, hoàn thiện trải nghiệm giao diện người dùng và mở rộng khả năng xử lý nghiệp vụ bán hàng nâng cao.

Giá trị tham khảo

Đồ án là tài liệu tham khảo phù hợp cho:

  • Sinh viên chuyên ngành Công nghệ Thông tin, Kỹ thuật Phần mềm và Hệ thống Thông tin đang thực hiện đồ án tốt nghiệp, khóa luận hoặc môn học chuyên đề về phát triển ứng dụng web full-stack.
  • Người nghiên cứu có nhu cầu tham khảo mô hình kết hợp giữa kiến trúc backend Java Spring Boot (RESTful API, Spring JPA) và frontend ReactJS (Vite, Redux, Tailwind CSS).
  • Tài liệu có giá trị đặc biệt ở phần khảo sát đối chuẩn hệ thống thực tế (Chương 2) và bộ tài liệu phân tích thiết kế chi tiết tại Chương 4 với hệ thống 32 chức năng quản trị, lược đồ cơ sở dữ liệu phân cấp biến thể sản phẩm và danh mục 29 biểu đồ tuần tự chi tiết.

Câu hỏi thường gặp

1. Đồ án khảo sát cụ thể những nền tảng thương mại điện tử nào trước khi xây dựng hệ thống?
Tác giả đã trực tiếp khảo sát và đánh giá ưu - nhược điểm của 5 website: Coolmate (thời trang nam tối giản), YOLO Sport (thời trang thể thao gym, yoga, bóng đá), Sporter (chuyên áo bóng đá), Minh Hải Sport (trang phục và phụ kiện thể thao) và SportShop.

2. Điểm đặc thù trong cấu trúc dữ liệu quản lý sản phẩm của hệ thống này là gì?
Thay vì lưu trữ sản phẩm đơn lẻ, hệ thống tách biệt thành hai cấp: "sản phẩm" chính (chứa các thông tin chung) và "sản phẩm con" (đại diện cho các biến thể cụ thể của sản phẩm), đồng thời kết hợp với các thực thể quản lý riêng biệt gồm danh mục - danh mục con, màu sắc, chương trình khuyến mãi (sale) và mã giảm giá.

3. Khung công nghệ chính được tác giả lựa chọn để xây dựng hệ thống bao gồm những gì?
Hệ thống sử dụng ReactJS, Redux, Vite và Tailwind CSS cho tầng Frontend; Java và Spring Boot (Spring JPA/Hibernate) cho tầng Backend cung cấp dịch vụ RESTful API; hệ quản trị cơ sở dữ liệu quan hệ MySQL; mật khẩu người dùng được băm (hash) trước khi lưu trữ.

4. Phân hệ quản trị (Admin) của hệ thống bao gồm bao nhiêu chức năng?
Phân hệ Admin gồm đúng 32 chức năng, bao phủ toàn bộ các tác vụ: quản lý tài khoản người dùng (4 chức năng), quản lý sản phẩm (4 chức năng), quản lý sản phẩm con (4 chức năng), quản lý danh mục (4 chức năng), quản lý danh mục con (4 chức năng), quản lý màu sắc (4 chức năng), quản lý khuyến mãi (4 chức năng), quản lý mã giảm giá (4 chức năng) và quản lý đơn hàng (3 chức năng).

5. Ứng dụng được triển khai (deploy) thực tế bằng công cụ và nền tảng nào?
Đồ án sử dụng nền tảng đám mây Railway để cấu hình dịch vụ, thiết lập các biến môi trường và liên kết trực tiếp với kho lưu trữ mã nguồn GitHub để thực hiện quá trình triển khai tự động.

Kết luận

Đồ án tốt nghiệp "Xây dựng website kinh doanh các mặt hàng thời trang thể thao" của sinh viên Nguyễn Thành Trọng là một công trình kỹ thuật phần mềm hoàn chỉnh, giải quyết bài toán thương mại điện tử thực tế dựa trên quy trình phân tích và thiết kế bài bản. Đề tài đã ứng dụng hiệu quả ngăn xếp công nghệ hiện đại gồm Spring Boot, ReactJS, Tailwind CSS và MySQL, hiện thực hóa đầy đủ các phân hệ từ giao diện mua sắm của khách hàng đến hệ thống 32 chức năng quản trị nghiệp vụ chuyên sâu. Kết quả của đồ án cung cấp một tài liệu tham khảo có giá trị học thuật và ứng dụng cao cho sinh viên ngành Công nghệ Thông tin trong việc thiết kế và triển khai các hệ thống web thương mại điện tử phân tầng.