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

Sự phát triển mạnh mẽ của công nghệ thông tin và chuyển đổi số đã làm thay đổi đáng kể hành vi tiêu dùng và phương thức giao dịch của xã hội. Trong lĩnh vực giải trí, văn hóa và hội thảo, phương thức phân phối vé truyền thống (người tham dự phải đến trực tiếp địa điểm tổ chức hoặc thông qua các đại lý ủy quyền) bộc lộ nhiều bất cập như tốn kém thời gian, khó kiểm soát số lượng vé và thiếu tính linh hoạt khi có sự cố phát sinh. Do đó, nhu cầu xây dựng một nền tảng trực tuyến đóng vai trò trung gian kết nối giữa ban tổ chức sự kiện và khách hàng là yêu cầu cấp thiết.

Khóa luận tốt nghiệp chuyên ngành Kỹ thuật phần mềm tại Trường Đại học Sư phạm Kỹ thuật TP.HCM với đề tài "Xây Dựng Website Đặt Chỗ Sự Kiện Sử Dụng ReactJS và Spring Boot" (Building a Booking Event Website Applying to ReactJS and Spring Boot) do sinh viên Nguyễn Quốc Long và Chu Nguyễn Anh Tuấn thực hiện, dưới sự hướng dẫn của TS. Lê Văn Vinh, tập trung giải quyết các bài toán trên.

Mục tiêu nghiên cứu của đề tài bao gồm 3 nhiệm vụ cụ thể:

  1. Xây dựng nền tảng website cho phép người dùng tìm kiếm, xem thông tin chi tiết và thực hiện đặt mua vé sự kiện trực tuyến minh bạch, tiện lợi.
  2. Xây dựng hệ thống quản lý tập trung và thống kê số liệu bán vé, doanh thu đơn hàng cho đơn vị tổ chức sự kiện (Organizer) và quản trị viên hệ thống (Admin).
  3. Thiết kế giao diện thân thiện với người dùng và bảo đảm an toàn, bảo mật thông tin cá nhân thông qua các chuẩn xác thực hiện đại.

Đối tượng và phạm vi nghiên cứu:

  • Đối tượng nghiên cứu: Nhu cầu người dùng trong việc mua/bán vé sự kiện; kiến trúc ứng dụng web đa tầng; cơ chế xác thực phân quyền qua JSON Web Token (JWT); hệ quản trị cơ sở dữ liệu MongoDB; các cổng thanh toán trực tuyến (PayPal, VNPay); thư viện front-end ReactJS và framework back-end Spring Boot.
  • Phạm vi không gian: Nền tảng hướng đến thị trường và người dùng tại khu vực Việt Nam.
  • Phạm vi thời gian: Đề tài được triển khai thực hiện từ ngày 20/02/2023 đến ngày 28/05/2023.
  • Giới hạn hệ thống: Hệ thống thanh toán được tích hợp và thử nghiệm trên môi trường kiểm thử (sandbox platform); năng lực xử lý có thể đối mặt với độ trễ khi khối lượng dữ liệu phát sinh quá lớn.

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

Khung lý thuyết và công nghệ nền tảng

Khóa luận được xây dựng dựa trên việc nghiên cứu và ứng dụng các nền tảng kỹ thuật phần mềm hiện đại:

  • Phát triển Front-end:
    • ReactJS: Thư viện JavaScript xây dựng giao diện theo kiến trúc thành phần (Component-based), sử dụng JSX và DOM ảo (Virtual DOM) để tối ưu hóa hiệu năng render giao diện theo luồng dữ liệu một chiều (Unidirectional Data Flow).
    • Redux & Redux Toolkit: Quản lý trạng thái tập trung (State Management) với luồng dữ liệu một chiều gồm Actions, Reducers và Store, cho phép trạng thái ứng dụng có thể dự đoán và dễ dàng gỡ lỗi.
    • React-Query: Thư viện hỗ trợ quản lý server-state, tối ưu hóa việc tìm nạp dữ liệu (caching, invalidation, stale-while-revalidate) thông qua hai hook chính là useQuery (truy vấn dữ liệu) và useMutation (thực hiện thêm/sửa/xóa).
    • Thư viện hỗ trợ: Ant Design (Antd), Material UI (MUI), Bootstrap cho hệ thống UI components; Axios quản lý HTTP requests; Formik và Yup xử lý biểu mẫu và kiểm thực dữ liệu; Moment.js xử lý thời gian; Swiper tạo carousel; SweetAlert2 thông báo; React-i18next hỗ trợ đa ngôn ngữ; WOW.js và react-draft-wysiwyg.
  • Phát triển Back-end:
    • Spring Boot: Framework nền tảng Java cung cấp giải pháp xây dựng các RESTful API độc lập, tích hợp sẵn các web server như Apache Tomcat, cấu hình tự động thông qua các Starter dependencies và tích hợp Spring Security để bảo mật hệ thống.
  • Bảo mật và xác thực:
    • JSON Web Token (JWT): Chuẩn mở truyền tải thông tin an toàn qua token kỹ thuật số, gồm 3 phần: Header (loại token và thuật toán ký HMAC SHA256/RSA), Payload (chứa dữ liệu claims) và Signature (chữ ký xác thực tính toàn vẹn dữ liệu).
  • Cơ sở dữ liệu NoSQL:
    • MongoDB: Hệ quản trị cơ sở dữ liệu phi quan hệ (NoSQL) lưu trữ dữ liệu dưới dạng Document (BSON), gom nhóm theo Collections. Cung cấp các tính năng đánh chỉ mục (Indexing), sao lưu tự động (Replication), cân bằng tải (Load balancing), phân mảnh dữ liệu (Sharding) và xử lý tập hợp (Aggregation pipeline).
  • Cổng thanh toán điện tử: Tích hợp giao thức API của VNPay và PayPal.

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

  • Phương pháp khảo sát hiện trạng và đối chuẩn (Benchmarking): Khảo sát thực tế 3 hệ thống bán vé trực tuyến đang vận hành tại Việt Nam (Ticketbox, TicketGo, IntroArt) nhằm rút ra ưu điểm, hạn chế và xác định các tiêu chí cốt lõi cần hiện thực cho hệ thống mới.
  • Phương pháp phân tích và thiết kế phần mềm:
    • Phân tích yêu cầu chức năng (Functional Requirements) và yêu cầu phi chức năng (Non-functional Requirements).
    • Mô hình hóa chức năng bằng sơ đồ Use Case cho hai phân hệ Client-side và Administration-side; xây dựng bảng đặc tả Use Case chi tiết (luồng chính, luồng phụ, ngoại lệ).
    • Thiết kế kiến trúc phân tầng kết nối Client - Server thông qua chuẩn RESTful API.
    • Thiết kế cấu trúc cơ sở dữ liệu trên MongoDB và thiết kế hệ thống giao diện người dùng (UI) cho 4 nhóm vai trò.
  • Phương pháp kiểm thử phần mềm: Thực hiện kiểm thử tính năng từng phân hệ, luồng xử lý dữ liệu và kiểm thử xác thực giao dịch trên các môi trường giả lập.

Khảo sát hiện trạng các nền tảng bán vé sự kiện

Khóa luận đã tiến hành khảo sát thực tiễn 3 nền tảng thương mại vé sự kiện phổ biến tại Việt Nam nhằm làm cơ sở thiết kế hệ thống:

Nền tảng khảo sát Chức năng chính Ưu điểm ghi nhận Hạn chế / Vấn đề tồn tại
Ticketbox Xem sự kiện nổi bật; mua vé trực tuyến; tổ chức sự kiện; tìm kiếm theo địa chỉ, ngày tháng, giá vé; quản lý vé đã mua. Sự kiện đa dạng; thông tin minh bạch sau khi mua vé; hỗ trợ nhiều phương thức thanh toán; gửi email xác nhận tức thì. Giao diện tương đối phức tạp đối với người dùng mới; phụ thuộc nhiều vào đội ngũ hỗ trợ để kiểm duyệt sự kiện; chưa hiển thị trực quan số lượng vé thực tế khi đặt.
TicketGo Hiển thị danh sách sự kiện nổi bật; phân loại sự kiện theo tuần; hỗ trợ đặt vé qua hotline liên kết với đơn vị tổ chức. Thông tin sự kiện rõ ràng, minh bạch; sự kiện đa dạng; hỗ trợ thanh toán nhiều kênh. Phông chữ hiển thị mờ; khoảng cách bố cục giao diện chưa tối ưu; còn tồn tại một số lỗi phản hồi từ máy chủ.
IntroArt Xem danh sách sự kiện theo tuần/tháng; xem chi tiết sự kiện nghệ thuật; hỗ trợ đặt vé qua hotline của đơn vị tổ chức. Giao diện được thiết kế tương đối tốt; bố cục các khối nội dung phân bổ hợp lý. Hiệu năng render giao diện người dùng còn thấp, tốc độ tải trang chưa tối ưu.

Từ kết quả khảo sát trên, nhóm tác giả xác định các tiêu chí cốt lõi cần tối ưu hóa cho hệ thống mới: hỗ trợ thanh toán tự động, tối ưu giao diện trực quan, minh bạch trạng thái vé, bảo đảm hiệu năng xử lý và xây dựng quy trình kiểm duyệt tổ chức chặt chẽ.

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

Chương 1: Cơ sở lý thuyết (Theory)

Chương này trình bày chi tiết về các công nghệ, framework và thư viện được lựa chọn sử dụng. Về phía Front-end, tác giả làm rõ cơ chế hoạt động của ReactJS (luồng dữ liệu một chiều, Virtual DOM), cấu trúc quản lý trạng thái của Redux (Action - Reducer - Store) và giải pháp tối ưu server-state của React-Query thông qua useQuery và useMutation. Về phía Back-end, chương giới thiệu kiến trúc Spring Boot, cơ chế bảo mật xác thực của JSON Web Token (JWT) và cấu trúc lưu trữ phi quan hệ Document-oriented của MongoDB cùng các đặc tính Sharding, Replication, Indexing.

Chương 2: Khảo sát và phân tích yêu cầu (Survey and User Requirements)

Nội dung chương tập trung vào kết quả khảo sát các website Ticketbox, TicketGo, IntroArt; từ đó xác định bảng yêu cầu chức năng (lưu trữ thông tin, quản lý hồ sơ và sự kiện, tìm kiếm, thống kê, phân quyền, xác thực và thanh toán) cùng các yêu cầu phi chức năng về tốc độ, tính bảo mật và khả năng mở rộng. Tác giả xây dựng sơ đồ Use Case tổng thể cho Client-side và Administration-side, đồng thời lập bảng đặc tả chi tiết cho từng Use Case (bao gồm tiền điều kiện, hậu điều kiện, luồng xử lý chính và các luồng ngoại lệ).

Chương 3: Thiết kế hệ thống (System Design)

Chương 3 trình bày các thiết kế chi tiết về cấu trúc dữ liệu trên MongoDB và thiết kế giao diện người dùng (User Interface Design) cho 4 nhóm đối tượng:

  • Khách vãng lai (Guest): Trang danh sách sự kiện, trang chi tiết sự kiện, trang đăng ký/đăng nhập, trang nộp đơn ứng tuyển Organizer.
  • Khách hàng (Customer): Quản lý tài khoản cá nhân, danh sách sự kiện yêu thích (Wishlist), lịch sử đơn hàng, danh sách vé đã mua, đổi mật khẩu.
  • Ban tổ chức (Organizer): Trang quản lý sự kiện (tạo mới/cập nhật), quản lý vé, quản lý đơn hàng theo sự kiện, quản lý thông tin tổ chức, dashboard thống kê doanh số.
  • Quản trị viên (Admin): Bảng điều khiển quản trị tổng thể (Dashboard), quản lý tài khoản người dùng, xét duyệt hồ sơ Organizer đang chờ (Pending Organizer Accounts), quản lý danh mục sự kiện (Categories) và xuất báo cáo dữ liệu.

Chương 4: Hiện thực và kiểm thử (Implementation and Testing)

Chương này tổng kết quá trình hiện thực hóa các chức năng trên mã nguồn thực tế, tích hợp các RESTful API giữa Spring Boot và ReactJS, cấu hình cơ chế bảo mật JWT, kết nối cổng thanh toán sandbox VNPay, PayPal và tiến hành kiểm thử các trường hợp sử dụng (test cases) của toàn bộ hệ thống.

Thiết kế và triển khai

Kiến trúc và công nghệ phần mềm

Hệ thống được xây dựng theo mô hình Client-Server phân tầng rõ rệt, kết nối đồng bộ thông qua các RESTful API:

Thành phần Công nghệ / Thư viện sử dụng Vai trò kỹ thuật trong hệ thống
Giao diện (Front-end) ReactJS, Redux Toolkit, React-Query Xây dựng giao diện đơn trang (SPA), quản lý trạng thái cục bộ và trạng thái máy chủ, render giao diện người dùng.
UI Frameworks Ant Design, MUI, Bootstrap, Swiper Chuẩn hóa hệ thống UI component, hỗ trợ responsive, carousel trình diễn sự kiện và modal thông báo.
Biểu mẫu & Kiểm thực Formik, Yup Xử lý dữ liệu nhập liệu biểu mẫu, kiểm tra tính hợp lệ dữ liệu đăng ký/đăng nhập/tạo sự kiện.
Xử lý HTTP & Data Axios, Moment.js, react-i18next Gửi nhận HTTP request, định dạng thời gian sự kiện, hỗ trợ chuyển đổi ngôn ngữ hiển thị.
Máy chủ (Back-end) Spring Boot, Spring Security Xây dựng hệ thống RESTful API nghiệp vụ, quản lý phiên làm việc, nhúng sẵn Tomcat server.
Cơ chế Bảo mật JSON Web Token (JWT) Mã hóa dữ liệu xác thực, cấp phát token kiểm soát quyền truy cập tài nguyên cho từng request.
Cơ sở dữ liệu MongoDB Lưu trữ dữ liệu sự kiện, tài khoản, vé, đơn hàng dưới dạng NoSQL Document.
Cổng thanh toán PayPal API, VNPay Sandbox Xử lý thanh toán trực tuyến đa kênh cho các đơn hàng đặt vé.
Báo cáo dữ liệu Module Export Excel Xuất báo cáo dữ liệu danh sách đơn hàng, sự kiện và tài khoản ra định dạng bảng tính Excel.

Phân quyền và các nhóm chức năng chính

Hệ thống thiết lập 4 nhóm vai trò với các quyền hạn và chức năng cụ thể:

[Khách vãng lai (Guest)]

[Khách hàng (Customer)]

[Ban tổ chức (Organizer)]

[Quản trị viên (Admin)]

Luồng nghiệp vụ đặc thù

  1. Luồng xác thực và khôi phục mật khẩu: Hệ thống hỗ trợ đăng nhập qua tài khoản Google hoặc tài khoản hệ thống. Với chức năng Quên mật khẩu (Forgot Password), hệ thống gửi mã OTP xác thực qua email; mã này có hiệu lực trong vòng 5 phút (nếu quá thời gian hoặc nhập sai, hệ thống sẽ từ chối và yêu cầu thao tác lại).
  2. Luồng kiểm duyệt ban tổ chức: Người dùng gửi đơn đăng ký gồm tên tổ chức, email và số điện thoại. Hồ sơ được lưu vào danh sách chờ (Pending Organizer Accounts). Quản trị viên xem xét và đưa ra quyết định duyệt (Approve) hoặc từ chối (Refuse).
  3. Luồng đặt vé và thanh toán: Khách hàng chọn loại vé, số lượng và chọn cổng thanh toán VNPay hoặc PayPal. Hệ thống kiểm tra số dư và tính hợp lệ của giao dịch, nếu thành công sẽ lưu đơn hàng và chuyển hướng người dùng về trang Lịch sử đơn hàng (Order History).

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

Kết quả đạt được

  • Hiện thực hóa thành công website thương mại vé sự kiện trực tuyến hoàn chỉnh với đầy đủ các phân hệ giao diện cho 4 nhóm đối tượng: Guest, Customer, Organizer và Admin.
  • Xây dựng hệ thống tìm kiếm linh hoạt cho phép lọc sự kiện theo danh mục, địa điểm, thời gian tổ chức và tình trạng vé có sẵn.
  • Thiết lập hoàn chỉnh cơ chế bảo mật phân quyền đa cấp sử dụng JSON Web Token và mã hóa dữ liệu người dùng.
  • Tích hợp thành công 2 cổng thanh toán điện tử phổ biến là VNPay và PayPal trên môi trường thử nghiệm.
  • Xây dựng các module quản trị, cho phép đơn vị tổ chức theo dõi số liệu bán vé, hỗ trợ tính năng trích xuất báo cáo ra định dạng Excel cho cả Organizer và Admin.

Đóng góp thực tiễn

  • Cung cấp giải pháp nền tảng trung gian giúp giải quyết các rào cản của phương thức bán vé sự kiện truyền thống tại Việt Nam.
  • Khắc phục một số nhược điểm từ các nền tảng đi trước (đã phân tích trong khảo sát) như tối ưu hóa bố cục giao diện, minh bạch thông tin sự kiện và chuẩn hóa quy trình kiểm duyệt ban tổ chức nhằm tăng độ tin cậy cho người mua vé.

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

Khóa luận đã nêu rõ một số giới hạn kỹ thuật và phạm vi thực tế:

  • Phạm vi triển khai: Hệ thống mới được định hướng áp dụng cho thị trường nội địa Việt Nam.
  • Môi trường thanh toán: Việc tích hợp thanh toán qua VNPay và PayPal mới dừng lại ở các tài khoản môi trường thử nghiệm (testing/sandbox platforms).
  • Năng lực cơ sở dữ liệu: Khi xử lý các tập dữ liệu có quy mô đặc biệt lớn (exceptionally large data sets), hệ thống cơ sở dữ liệu NoSQL có thể gặp phải thách thức trong việc tối ưu hóa quản lý dữ liệu; đồng thời độ trễ truy xuất cơ sở dữ liệu có thể gây ảnh hưởng nhất định đến tốc độ xử lý đơn hàng.

Hướng mở rộng: Tác giả định hướng tiếp tục tối ưu hóa hiệu năng truy vấn dữ liệu, triển khai tích hợp cổng thanh toán trên môi trường production thực tế và mở rộng thêm các tính năng tương tác chuyên sâu cho sự kiện.

Giá trị tham khảo

Tài liệu khóa luận có giá trị tham khảo hữu ích cho:

  • Sinh viên ngành Kỹ thuật phần mềm, Công nghệ thông tin: Là tài liệu tham khảo chi tiết về quy trình xây dựng đồ án tốt nghiệp ứng dụng web full-stack, từ khâu khảo sát hiện trạng, phân tích đặc tả Use Case, thiết kế cơ sở dữ liệu NoSQL đến lập trình và kiểm thử.
  • Lập trình viên phát triển web: Cung cấp tài liệu tham khảo thực tế về việc áp dụng ReactJS (kết hợp Redux Toolkit và React-Query) tại Front-end và xây dựng RESTful API bảo mật với Spring Boot & JWT tại Back-end.

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

1. Kiến trúc công nghệ chủ đạo được lựa chọn để xây dựng hệ thống là gì?

Hệ thống sử dụng kiến trúc Client-Server với các RESTful API. Phía Front-end sử dụng thư viện ReactJS kết hợp Redux Toolkit (quản lý state) và React-Query (quản lý server-state). Phía Back-end xây dựng trên nền tảng Spring Boot, bảo mật bằng JSON Web Token (JWT) và lưu trữ dữ liệu bằng cơ sở dữ liệu NoSQL MongoDB.

2. Khóa luận đã khảo sát những nền tảng bán vé nào trước khi thiết kế hệ thống?

Đề tài đã tiến hành khảo sát, đánh giá ưu điểm và hạn chế của 3 website bán vé sự kiện thực tế gồm: Ticketbox (ticketbox.vn), TicketGo (ticketgo.vn) và IntroArt (introart.vn).

3. Hệ thống hỗ trợ những vai trò người dùng nào và phân quyền ra sao?

Hệ thống phân quyền cho 4 nhóm đối tượng: Khách vãng lai (Guest), Khách hàng (Customer), Ban tổ chức sự kiện (Organizer) và Quản trị viên (Admin). Quyền truy cập các URL và API được kiểm soát thông qua chữ ký số và vai trò đính kèm trong mã JSON Web Token (JWT).

4. Quy trình khôi phục mật khẩu khi người dùng quên mật khẩu được thiết kế như thế nào?

Người dùng nhập email đăng ký để nhận một mã xác thực OTP từ hệ thống. Mã OTP này có thời hạn sử dụng trong vòng 5 phút. Nếu người dùng nhập đúng mã OTP trong thời gian quy định, hệ thống sẽ cho phép nhập mật khẩu mới và xác nhận để hoàn tất khôi phục.

5. Hệ thống hỗ trợ các phương thức thanh toán trực tuyến nào?

Hệ thống tích hợp 2 cổng thanh toán điện tử là VNPay và PayPal. Hiện tại, các giao dịch thanh toán được cấu hình và vận hành trên nền tảng môi trường thử nghiệm (testing platforms / sandbox).

Kết luận

Khóa luận tốt nghiệp của sinh viên Nguyễn Quốc Long và Chu Nguyễn Anh Tuấn đã hoàn thành toàn diện các mục tiêu đề ra trong việc xây dựng website đặt chỗ sự kiện trực tuyến sử dụng ReactJS và Spring Boot. Đề tài đã phân tích kỹ lưỡng các yêu cầu thực tiễn, khảo sát các hệ thống đang hoạt động để đưa ra thiết kế phần mềm hợp lý với 4 nhóm vai trò người dùng riêng biệt. Hệ thống thể hiện khả năng ứng dụng hiệu quả các công nghệ hiện đại như React-Query, Redux Toolkit, JWT, MongoDB và các cổng thanh toán điện tử, tạo nền tảng vững chắc cho việc phát triển và triển khai thương mại hóa trong tương lai.