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

Thị trường thể thao tại Việt Nam và toàn cầu chứng kiến nhu cầu mua sắm quần áo bóng đá ngày càng tăng cao, trong khi các kênh phân phối truyền thống đặt ra nhiều rào cản như giới hạn địa lý, thời gian di chuyển và sự thiếu đa dạng trong lựa chọn sản phẩm. Song song đó, làn sóng thương mại điện tử phát triển mạnh cùng sự phổ cập của Internet tạo ra cơ hội rõ ràng để số hóa hoạt động kinh doanh mặt hàng này.

Mục tiêu của đề tài được tác giả xác định gồm năm điểm chính:

  1. Hiển thị danh sách sản phẩm đa dạng, cung cấp thông tin chi tiết về từng sản phẩm để người dùng dễ tìm hiểu và lựa chọn.
  2. Tích hợp chatbot tự động, cho phép khách hàng tương tác trực tiếp để giải đáp thắc mắc liên quan đến sản phẩm và cửa hàng.
  3. Xây dựng quy trình mua hàng và thanh toán trực tuyến thuận tiện.
  4. Hỗ trợ quản trị viên quản lý sản phẩm (thêm, sửa, xóa) và duy trì danh mục nhanh chóng.
  5. Cung cấp chức năng quản lý hóa đơn và thông tin người dùng cho chủ doanh nghiệp.

Đối tượng nghiên cứu là công nghệ ReactJS, Spring Boot và vai trò của chúng trong lập trình hiện đại, được áp dụng vào xây dựng website thương mại điện tử chuyên ngành quần áo bóng đá.

Phạm vi thực hiện: Đề tài được nhận vào ngày 04/09/2023 và nộp ngày 29/12/2023, thực hiện trong khuôn khổ Khoa Công nghệ Thông tin, Trường Đại học Sư phạm Kỹ thuật TP. Hồ Chí Minh. Phạm vi nghiên cứu tập trung vào phân khúc người dùng cuối (khách hàng cá nhân) và quản trị viên doanh nghiệp vừa và nhỏ kinh doanh quần áo bóng đá tại thị trường trong nước, có tham khảo một số website quốc tế.

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

Khung công nghệ (Technical Stack)

Tác giả sử dụng khái niệm Technical Stack — tập hợp các công nghệ, ngôn ngữ lập trình, framework, thư viện và cơ sở dữ liệu — làm nền tảng tổ chức toàn bộ phần lý thuyết. Các công nghệ được lựa chọn gồm:

Thành phần Công nghệ sử dụng
Frontend React JS, Redux, Bootstrap CSS
Backend Java Spring Boot
Cơ sở dữ liệu MySQL

React JS được xác định là thư viện JavaScript front-end mã nguồn mở, hỗ trợ xây dựng các component UI tái sử dụng với hai tính năng cốt lõi là JSX và Virtual DOM. Tác giả trình bày thêm các khái niệm Hooks (bổ sung trong React 16, cho phép dùng state mà không cần viết class) và Component (Function Component và Class Component).

Redux được mô tả theo ba thành phần cơ bản: Actions (gửi dữ liệu từ ứng dụng tới store), Reducers (nhận state hiện tại, thực thi action, trả về state mới) và Store (lưu trữ toàn bộ state của ứng dụng). Redux được dùng kết hợp với React để quản lý state tập trung.

Spring Boot được giới thiệu là framework trong hệ sinh thái Spring của Java, nhúng sẵn Tomcat/Jetty/Undertow, hỗ trợ RESTful API, dependency injection, Spring Data JPA và Spring Security.

MySQL là RDBMS mã nguồn mở hoạt động theo mô hình client-server, được chọn để lưu trữ dữ liệu sản phẩm, đơn hàng và tài khoản người dùng.

Phương pháp nghiên cứu

Đề tài áp dụng hai phương pháp chính:

  • Nghiên cứu tài liệu: Đọc sách, tham khảo tài liệu kỹ thuật, theo dõi bài viết chuyên sâu và video liên quan đến Java Spring Boot và ReactJS.
  • Phương pháp chuyên gia: Tham vấn giảng viên hướng dẫn ThS. Nguyễn Minh Đạo và các giảng viên trong khoa CNTT, Trường Đại học Sư phạm Kỹ thuật TP.HCM.

Nguồn dữ liệu

Dữ liệu đầu vào của giai đoạn phân tích yêu cầu được thu thập thông qua khảo sát hiện trạng sáu website thực tế (ba website quốc tế: kitbag.com, footballkitarchive.com, classicfootballshirts.co.uk; ba website trong nước: aressport.vn, vuaaodau.vn, matasport.vn), sử dụng từ khóa tìm kiếm "website bán áo bóng đá" và "football kits website" trên Google, chọn ba kết quả đứng đầu mỗi từ khóa.

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

Chương 1: Tổng quan

Chương trình bày tính cấp thiết của đề tài dựa trên xu hướng phát triển thị trường thể thao và thương mại điện tử. Tác giả xác định năm mục tiêu cụ thể, ba nội dung nghiên cứu kỹ thuật (Spring Boot với RESTful API, dependency injection, Spring Data JPA, Spring Security; React JS với React Router và Redux; quản lý cơ sở dữ liệu trên MySQL) và hai phương pháp thực hiện đề tài.

Chương 2: Cơ sở lý thuyết

Chương trình bày toàn bộ nền tảng lý thuyết kỹ thuật. Đáng chú ý là bảng so sánh một số Technical Stack thông dụng (MERN, LAMP, WISA), giúp người đọc hiểu cơ sở lựa chọn công nghệ. Các mục về MySQL phân tích cả ưu điểm (dễ sử dụng, bảo mật cao, khả năng mở rộng, tốc độ) lẫn nhược điểm (giới hạn chức năng, độ tin cậy thấp hơn một số RDBMS khác, khó truy xuất khi dữ liệu lớn). Phần Redux đặc biệt mô tả chi tiết luồng hoạt động dựa vào ba thành phần Actions — Reducers — Store.

Chương 3: Khảo sát và xác định yêu cầu

Tác giả phân tích điểm mạnh và hạn chế của sáu website đối chiếu. Kết quả khảo sát cho thấy các website đều có chung các tính năng: tìm kiếm/lọc sản phẩm, gợi ý sản phẩm liên quan, quản lý giỏ hàng, thanh toán nhanh, theo dõi đơn hàng và quản lý thông tin cá nhân. Điểm khác biệt thường gặp bao gồm: phương thức đăng nhập đa dạng (Google, Facebook), chatbot hỗ trợ, bản đồ định vị, hệ thống đánh giá sao và đa dạng phương thức thanh toán (ZaloPay, Visa, Momo).

Từ kết quả khảo sát, tác giả xác định yêu cầu hệ thống cho ba nhóm tác nhân:

  • Guest (Khách): 7 chức năng, gồm đăng ký, lọc theo danh mục và giá, tìm kiếm theo từ khóa, xem danh sách và chi tiết sản phẩm, tương tác chatbot.
  • User (Người dùng): 12 chức năng, bổ sung thêm đăng nhập, cập nhật hồ sơ, quản lý giỏ hàng, đặt hàng, thanh toán, theo dõi đơn hàng và sử dụng mã giảm giá.
  • Admin (Quản trị viên): 10 chức năng, gồm quản lý danh mục sản phẩm (thêm/sửa/xóa), quản lý sản phẩm, quản lý mã giảm giá, quản lý đơn hàng, cập nhật trạng thái user và theo dõi thống kê doanh thu.

Yêu cầu phi chức năng được liệt kê 8 tiêu chí gồm tiến hóa, tiện dụng, tương thích, hiệu quả (tối đa 20 giây cho một lần thanh toán), bảo mật (mã hóa mật khẩu, xác thực đăng nhập), khả năng bảo trì và mở rộng, khả năng sử dụng (UI/UX thân thiện, hỗ trợ chat trực tuyến) và quản lý lỗi hiệu quả.

Chương kết thúc bằng mô hình hóa yêu cầu gồm Use Case Diagram cho hai module End-User và Administrator, với danh sách đầy đủ các use case được mã hóa (ví dụ: <Guest> View Product List, <User> Add To Cart, <Administrator> View Statistic...).

Chương 4: Thiết kế hệ thống

Đây là chương trọng tâm về kỹ thuật. Tác giả xây dựng các tài liệu thiết kế gồm:

  • 13 lược đồ tuần tự (Sequence Diagram) được mã hóa từ SD002 đến SD0013, bao gồm các luồng: đăng nhập, tìm kiếm sản phẩm, xem thông tin sản phẩm, thêm vào giỏ hàng, thanh toán, xem thông tin đơn hàng, quản lý sản phẩm, quản lý đơn hàng, quản lý tài khoản, quản lý Club, quản lý League, quản lý Brand.
  • 11 biểu đồ hoạt động (Activity Diagram) từ AD0001 đến AD0011.
  • Thiết kế cơ sở dữ liệu: Mô hình dữ liệu với các bảng được mô tả chi tiết thuộc tính, trong đó văn bản nêu cụ thể cấu trúc bảng Product Image và bảng Order Detail.
  • Thiết kế giao diện Admin: 14 màn hình, gồm Dashboard, quản lý Club/League/Brand, danh sách và tạo mới sản phẩm, quản lý size sản phẩm, danh mục Voucher, quản lý đơn hàng, cập nhật trạng thái đơn hàng, quản lý tài khoản, cập nhật trạng thái tài khoản và thống kê.
  • Thiết kế giao diện User: 14 màn hình, gồm đăng ký, đăng nhập, Header, Footer, Sidebar, trang chủ, danh mục sản phẩm, chi tiết sản phẩm, giỏ hàng, thanh toán, xác nhận mua hàng thành công, đơn hàng, thông tin cá nhân và thay đổi mật khẩu.

Chương 5: Cài đặt và kiểm thử

Chương mô tả môi trường triển khai (công cụ và công nghệ sử dụng), kết quả kiểm thử hệ thống được trình bày dưới dạng bảng kiểm thử (Bảng kiểm thử hệ thống).

Chương 6: Kết luận

Chương tổng kết những nhược điểm còn tồn tại của hệ thống và nêu hướng phát triển trong tương lai.

Thiết kế và triển khai

Kiến trúc hệ thống

Hệ thống áp dụng kiến trúc phân lớp client-server với sự tách biệt rõ ràng giữa frontend và backend:

  • Frontend: ReactJS với React Router (điều hướng), Redux (quản lý state toàn cục) và Bootstrap CSS (giao diện responsive).
  • Backend: Java Spring Boot cung cấp RESTful API, sử dụng Spring Data JPA để tương tác cơ sở dữ liệu và Spring Security để xác thực phân quyền.
  • Cơ sở dữ liệu: MySQL, với cấu trúc quan hệ giữa các bảng bao gồm Product, Product Image, Order, Order Detail và Account.

Backend Spring Boot nhúng sẵn máy chủ web (Tomcat/Jetty/Undertow), chạy độc lập không cần web container bên ngoài.

Các chức năng kỹ thuật nổi bật

Hệ thống tích hợp chatbot tự động cho phép cả Guest và User đặt câu hỏi về sản phẩm và cửa hàng — đây là tính năng được xác định là điểm khác biệt so với các website đối chiếu trong khảo sát. Ngoài ra, hệ thống hỗ trợ mã giảm giá (Voucher) với đầy đủ vòng đời quản lý (tạo, cập nhật, xóa) từ phía Admin.

Kiểm thử

Kết quả kiểm thử được tổng hợp trong Bảng kiểm thử hệ thống (Chương 5). Phương pháp kiểm thử là kiểm thử hệ thống (system testing) dựa trên các use case đã đặc tả.

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

Kết quả xây dựng

Đồ án hoàn thành một website thương mại điện tử chuyên về quần áo bóng đá với đầy đủ ba lớp người dùng và tổng cộng 29 chức năng chính được đặc tả use case (7 chức năng Guest, 12 chức năng User, 10 chức năng Admin). Hệ thống bao gồm 28 màn hình giao diện được thiết kế đặc tả chi tiết (14 màn hình Admin và 14 màn hình User).

Các chức năng cốt lõi được triển khai thực tế gồm:

  • Tìm kiếm, lọc và xem chi tiết sản phẩm.
  • Thêm, cập nhật sản phẩm trong giỏ hàng.
  • Thanh toán đơn hàng và theo dõi trạng thái.
  • Quản lý hóa đơn, sản phẩm, tài khoản và thống kê doanh thu (phía Admin).
  • Chatbot tự động hỗ trợ khách hàng.

Giải pháp và kiến nghị

Tác giả đề xuất hướng phát triển bổ sung các tính năng còn thiếu so với các website đối chiếu, bao gồm hệ thống đánh giá sản phẩm, đăng nhập qua tài khoản mạng xã hội (Google, Facebook), đa dạng phương thức thanh toán (ZaloPay, Visa, Momo) và tích hợp bản đồ định vị cửa hàng.

Đóng góp

Đồ án đóng góp một hệ thống hoàn chỉnh theo mô hình full-stack (ReactJS + Spring Boot + MySQL) cho lĩnh vực thương mại điện tử sản phẩm thể thao tại Việt Nam, với đặc điểm danh mục sản phẩm được phân loại theo Club (câu lạc bộ), League (giải đấu) và Brand (thương hiệu) — cấu trúc danh mục phù hợp với đặc thù ngành hàng bóng đá.

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

Tác giả thừa nhận trong lời cảm ơn rằng thời gian thực hiện đề tài không dài và kiến thức kỹ thuật còn hạn chế, dẫn đến một số nhược điểm được nêu trong Chương 6 (văn bản không liệt kê cụ thể tại phần trích dẫn được cung cấp).

Dựa trên phạm vi khảo sát, một số hạn chế có thể nhận thấy qua quá trình so sánh:

  • Chưa tích hợp đăng nhập qua tài khoản Google hoặc Facebook — điểm yếu chung được ghi nhận ở cả ba website nước ngoài đối chiếu.
  • Chưa có hệ thống đánh giá và nhận xét sản phẩm của người dùng.
  • Phương thức thanh toán chưa được mô tả chi tiết trong văn bản cung cấp.

Hướng phát triển được tác giả đề cập trong Chương 6 (nội dung cụ thể nằm ở phần chưa được trích dẫn đầy đủ), theo mục lục gồm hai mục: Nhược điểm và Hướng phát triển.

Giá trị tham khảo

Đồ án phù hợp để tham khảo cho:

  • Sinh viên ngành Công nghệ Thông tin đang tìm hiểu hoặc chuẩn bị thực hiện đồ án tốt nghiệp theo hướng xây dựng website thương mại điện tử với kiến trúc full-stack ReactJS — Spring Boot.
  • Người học React JS và Redux có thể tham khảo phần Chương 2 về cơ sở lý thuyết và phần Chương 4 về cách tổ chức Component, quản lý state với Redux trong bối cảnh ứng dụng thực tế.
  • Người học Java Spring Boot có thể tham khảo cách tổ chức RESTful API, phân quyền Spring Security và tích hợp Spring Data JPA trong dự án thương mại điện tử.
  • Sinh viên đang thực hiện đề tài phân tích và thiết kế hệ thống có thể tham khảo cách xây dựng Use Case Diagram, Sequence Diagram, Activity Diagram và đặc tả yêu cầu chức năng/phi chức năng theo cấu trúc bảng rõ ràng ở Chương 3 và Chương 4.
  • Người nghiên cứu về UX/UI cho thương mại điện tử ngành thể thao có thể tham khảo phần khảo sát hệ thống (Chương 3) với phân tích ưu/nhược điểm của sáu website thực tế.

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

1. Website được xây dựng sử dụng những công nghệ cụ thể nào?

Frontend sử dụng React JS Framework kết hợp Redux để quản lý state và Bootstrap CSS cho giao diện. Backend được xây dựng bằng Java Spring Boot Framework. Cơ sở dữ liệu là MySQL. Backend Spring Boot nhúng sẵn máy chủ web Tomcat/Jetty/Undertow, chạy độc lập không cần web container bên ngoài.

2. Hệ thống phân quyền người dùng được thiết kế như thế nào?

Hệ thống có ba nhóm tác nhân: Guest (khách chưa đăng nhập, có 7 chức năng chủ yếu để xem và tìm kiếm sản phẩm), User (người dùng đã đăng ký, có 12 chức năng bao gồm mua hàng, quản lý giỏ hàng và theo dõi đơn hàng) và Admin (quản trị viên, có 10 chức năng quản lý toàn bộ hệ thống bao gồm thống kê doanh thu).

3. Chatbot trong hệ thống hoạt động như thế nào và ai có thể sử dụng?

Chatbot tự động được tích hợp cho phép cả Guest và User đặt câu hỏi liên quan đến sản phẩm và cửa hàng. Đây là chức năng được xác định trong yêu cầu chức năng của cả hai nhóm tác nhân (mục số 7 trong bảng chức năng Guest và User). Tính năng này cũng được nhận diện là một điểm khác biệt quan trọng khi so sánh với các website đối chiếu, vì cả ba website nước ngoài (kitbag.com, footballkitarchive.com, classicfootballshirts.co.uk) đều bị ghi nhận là "không có chatbot để tương tác, yêu cầu hỗ trợ với shop."

4. Danh mục sản phẩm trên website được tổ chức theo cấu trúc nào?

Sản phẩm được phân loại theo ba chiều danh mục đặc thù của ngành bóng đá: Club (câu lạc bộ), League (giải đấu) và Brand (thương hiệu). Admin có quyền tạo mới, cập nhật và xóa từng loại danh mục này (các chức năng Create/Update/Delete Club, League, Brand được liệt kê trong use case module Administrator). Người dùng có thể lọc sản phẩm theo các danh mục này từ phía giao diện.

5. Đề tài khảo sát những website nào trước khi xác định yêu cầu, và phương pháp khảo sát ra sao?

Tác giả khảo sát sáu website thực tế bằng cách tìm kiếm với từ khóa "website bán áo bóng đá" và "football kits website" trên Google, chọn ba kết quả đứng đầu mỗi từ khóa. Ba website quốc tế được khảo sát là kitbag.com (đứng đầu kết quả tìm kiếm quốc tế), footballkitarchive.com và classicfootballshirts.co.uk. Ba website trong nước là aressport.vn, vuaaodau.vn và matasport.vn. Mỗi website được phân tích theo ưu điểm và nhược điểm về giao diện, tính năng và trải nghiệm người dùng, làm cơ sở xác định yêu cầu cho hệ thống mới.

Kết luận

Đồ án tốt nghiệp của sinh viên Nguyễn Ngọc Thuyên, Trường Đại học Sư phạm Kỹ thuật TP.HCM, trình bày quá trình phân tích, thiết kế và xây dựng một website thương mại điện tử chuyên về quần áo bóng đá sử dụng kiến trúc full-stack ReactJS — Spring Boot — MySQL. Qua khảo sát sáu website thực tế và phân tích yêu cầu có hệ thống cho ba nhóm tác nhân (Guest, User, Admin), đề tài xây dựng được hệ thống với 29 chức năng được đặc tả use case, 13 lược đồ tuần tự, 11 biểu đồ hoạt động và 28 màn hình giao diện đầy đủ. Điểm đáng chú ý là cấu trúc danh mục sản phẩm theo Club/League/Brand phù hợp với đặc thù ngành hàng, cùng với tích hợp chatbot tự động — tính năng còn thiếu ở nhiều website đối chiếu. Đây là tài liệu kỹ thuật tham khảo cho sinh viên CNTT học React JS, Spring Boot hoặc thực hiện đồ án thương mại điện tử.