Đồ Án Tốt Nghiệp: Xây Dựng Hệ Thống Website Đặt Vé Xe Khách Sử Dụng ReactJS và ASP.NET

Đồ án tốt nghiệp công nghệ thông tin xây dựng hệ thống website đặt vé xe khách sử dụng ReactJS và ASP.NET, tối ưu trải nghiệm người dùng.

• Tác giả: Đỗ Minh Dũng
• Người hướng dẫn: TS. Lê Văn Vinh
• Trường học: Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
• Chuyên ngành: Công Nghệ Thông Tin
• Đề tài: Xây Dựng Hệ Thống Website Đặt Vé Xe Khách Sử Dụng ReactJS Và ASP.NET
• Loại tài liệu: Đồ Án Tốt Nghiệp
• Năm xuất bản: 2024
• Địa điểm: Tp. Hồ Chí Minh

Mục lục chi tiết

• LỜI CẢM ƠN
• ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP
• MỤC LỤC
• 1. CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
• 1.1. Khái niệm ReactJs
• 1.2. JSX
• 1.3. Component
• 1.4. React Lifecycle
• 1.5. Giới thiệu C#
• 1.6. Giới thiệu ASP.NET
• 1.7. Giới thiệu Microsoft SQL Server
• 2. CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG
• 2.1. Khảo sát hiện trạng
• 2.2. Xác định yêu cầu
• 2.3. Mô hình hóa yêu cầu
• 3. CHƯƠNG 3: THIẾT KẾ HỆ THỐNG
• 3.1. Thiết kế hệ thống
• 3.2. Thiết kế cơ sở dữ liệu (ERD)
• 3.3. Lược đồ tuần tự
• 3.4. Thiết kế giao diện
• 4. CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ
• 4.1. Kiểm thử
• PHẦN KẾT LUẬN
• 0.1. Kết quả đạt được
• 0.2. Ưu điểm, nhược điểm
• 0.3. Hướng phát triển
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Tổng Quan Về Xây Dựng Website Đặt Vé Xe Khách Sử Dụng ReactJS và ASP

Trong bối cảnh hiện đại, việc xây dựng một hệ thống website đặt vé xe khách trở nên cần thiết hơn bao giờ hết. Sự phát triển của công nghệ thông tin đã tạo điều kiện thuận lợi cho việc áp dụng các công nghệ mới như ReactJS và ASP.NET. Hệ thống này không chỉ giúp người dùng dễ dàng tìm kiếm và đặt vé mà còn tối ưu hóa quy trình quản lý cho các nhà xe.

1.1. Lợi Ích Của Việc Sử Dụng ReactJS Trong Website Đặt Vé

ReactJS mang lại hiệu suất cao và khả năng tương tác mượt mà cho người dùng. Với Virtual DOM, ReactJS giúp giảm thiểu thời gian tải trang và cải thiện trải nghiệm người dùng.

1.2. Tại Sao Chọn ASP.NET Cho Backend

ASP.NET cung cấp một nền tảng mạnh mẽ cho việc phát triển backend, hỗ trợ các tính năng bảo mật và khả năng mở rộng, giúp quản lý dữ liệu hiệu quả hơn.

II. Những Thách Thức Khi Xây Dựng Hệ Thống Đặt Vé Xe

Mặc dù có nhiều lợi ích, việc xây dựng hệ thống đặt vé xe cũng gặp phải nhiều thách thức. Các vấn đề như bảo mật thông tin, hiệu suất hệ thống và trải nghiệm người dùng cần được giải quyết triệt để.

2.1. Vấn Đề Bảo Mật Trong Hệ Thống Đặt Vé

Bảo mật thông tin cá nhân của người dùng là một trong những ưu tiên hàng đầu. Việc sử dụng các phương pháp mã hóa và xác thực là cần thiết để bảo vệ dữ liệu.

2.2. Tối Ưu Hóa Hiệu Suất Hệ Thống

Đảm bảo hệ thống hoạt động mượt mà dưới tải cao là một thách thức lớn. Cần có các biện pháp tối ưu hóa mã nguồn và cơ sở dữ liệu để cải thiện hiệu suất.

III. Phương Pháp Xây Dựng Hệ Thống Đặt Vé Xe Hiệu Quả

Để xây dựng một hệ thống đặt vé xe hiệu quả, cần áp dụng các phương pháp và công nghệ hiện đại. Việc kết hợp giữa ReactJS và ASP.NET sẽ mang lại nhiều lợi ích cho cả người dùng và nhà phát triển.

3.1. Thiết Kế Giao Diện Người Dùng Thân Thiện

Giao diện người dùng cần được thiết kế đơn giản và dễ sử dụng, giúp người dùng dễ dàng tìm kiếm và đặt vé mà không gặp khó khăn.

3.2. Tích Hợp Thanh Toán Trực Tuyến An Toàn

Hệ thống cần tích hợp các phương thức thanh toán trực tuyến an toàn, giúp người dùng thực hiện giao dịch một cách nhanh chóng và bảo mật.

IV. Ứng Dụng Thực Tiễn Của Hệ Thống Đặt Vé Xe

Hệ thống đặt vé xe không chỉ mang lại lợi ích cho người dùng mà còn giúp các nhà xe quản lý hiệu quả hơn. Việc theo dõi và phân tích dữ liệu sẽ giúp tối ưu hóa lịch trình và nguồn lực.

4.1. Quản Lý Dữ Liệu Hiệu Quả

Hệ thống cho phép các nhà xe theo dõi doanh thu, số lượng vé bán ra và các thông tin quan trọng khác, từ đó đưa ra quyết định kinh doanh chính xác.

4.2. Tăng Cường Trải Nghiệm Khách Hàng

Hệ thống giúp giảm thiểu thời gian chờ đợi và tăng cường sự hài lòng của khách hàng thông qua quy trình đặt vé nhanh chóng và dễ dàng.

V. Kết Luận Và Tương Lai Của Hệ Thống Đặt Vé Xe

Hệ thống website đặt vé xe khách sử dụng ReactJS và ASP.NET không chỉ đáp ứng nhu cầu hiện tại mà còn mở ra nhiều cơ hội phát triển trong tương lai. Việc áp dụng công nghệ mới sẽ giúp cải thiện hiệu suất và bảo mật cho hệ thống.

5.1. Hướng Phát Triển Trong Tương Lai

Cần tiếp tục nghiên cứu và phát triển các tính năng mới, như tích hợp AI để dự đoán nhu cầu và tối ưu hóa lịch trình.

5.2. Đảm Bảo An Toàn Thông Tin

Cần có các biện pháp bảo mật liên tục để bảo vệ thông tin người dùng và đảm bảo sự tin cậy của hệ thống.

Nội dung chính

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

Khóa luận tốt nghiệp kỹ sư ngành Công nghệ Thông tin, chuyên ngành Công nghệ Phần mềm tại Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh (mã đề tài: SKL013896) mang tên "Xây dựng hệ thống website đặt vé xe khách sử dụng ReactJS và ASP.NET", do sinh viên Đỗ Minh Dũng (MSSV: 20110620) và Nguyễn Thái Ngọc Tân (MSSV: 20110719) thực hiện dưới sự hướng dẫn của TS. Lê Văn Vinh trong thời gian từ ngày 01/09/2023 đến ngày 10/07/2024.

Lý do chọn đề tài xuất phát từ thực tế nhu cầu di chuyển của người dân ngày càng gia tăng, đặc biệt trong lĩnh vực vận tải hành khách đường bộ. Tuy nhiên, hành khách thường gặp nhiều khó khăn, tốn kém thời gian và công sức trong việc tiếp cận thông tin, lựa chọn chuyến xe có điểm dừng, đỗ phù hợp với lịch trình cá nhân. Về phía các đơn vị vận tải, việc quản lý thủ công các tuyến đường, chuyến xe, bảng giá và phân bổ ghế ngồi còn phân tán. Đề tài được triển khai nhằm giải quyết bài toán kết nối trực tuyến giữa hành khách và các nhà xe, mang lại công cụ đặt vé và quản trị vận tải đồng bộ.

Mục tiêu cụ thể của đề tài bao gồm 5 nội dung chính:

1. Xây dựng giao diện người dùng đơn giản, dễ thao tác và tối ưu trải nghiệm tương tác.
2. Thiết kế phân hệ quản trị dành cho Người quản trị hệ thống (Admin) để quản lý các bến bãi, điểm dừng và danh mục nhà xe.
3. Thiết kế phân hệ quản trị dành cho Nhà xe (Company) nhằm quản lý phương tiện, lộ trình di chuyển, bảng giá và chuyến đi.
4. Xây dựng chức năng tra cứu, tìm kiếm chuyến đi linh hoạt phục vụ khách hàng.
5. Thiết lập các cơ chế an toàn và bảo mật thông tin cho toàn bộ hệ thống website.

Đối tượng nghiên cứu của đồ án là quy trình quản lý và vận hành dịch vụ đặt vé xe trực tuyến, bao gồm ba chủ thể chính: các đơn vị quản lý vận tải hành khách, các doanh nghiệp cung cấp dịch vụ vận tải/bán vé trực tuyến, và người dùng cuối có nhu cầu di chuyển.

Phạm vi nghiên cứu tập trung vào việc xác định, mô hình hóa và hiện thực hóa các yêu cầu chức năng cùng yêu cầu phi chức năng của hệ thống web: thiết kế giao diện tương tác, bảo đảm hiệu suất vận hành, bảo mật thông tin người dùng, tối ưu hóa quy trình nghiệp vụ đặt vé trực tuyến và thu thập phản hồi của hành khách.

Về mặt ý nghĩa, đề tài đóng góp kiến thức thực nghiệm trong việc ứng dụng mô hình kiến trúc phân tách Client-Server hiện đại vào bài toán quản lý vận tải. Về mặt thực tiễn, hệ thống giúp rút ngắn thời gian giao dịch của hành khách, hỗ trợ doanh nghiệp vận tải theo dõi dữ liệu kinh doanh tập trung, tối ưu lịch trình phương tiện và kiểm soát an toàn dữ liệu khách hàng.

---

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

Khung lý thuyết và công nghệ được tác giả sử dụng trong công trình bao gồm các nền tảng sau:

• ReactJS: Thư viện JavaScript mã nguồn mở do Facebook phát triển để xây dựng giao diện người dùng (UI). Tác giả nghiên cứu cơ chế DOM thực tế và Virtual DOM (bản sao nhẹ của DOM thực tế trong bộ nhớ). Nguyên lý vận hành dựa trên cơ chế so sánh sai khác (diffing): khi state hoặc props thay đổi, React tạo cây Virtual DOM mới, so sánh với cây trước đó và chỉ cập nhật những phần tử thay đổi lên DOM thực tế, giúp tối ưu hiệu suất và đảm bảo tính nhất quán. Cú pháp JSX được dùng để kết hợp JavaScript và HTML. Kiến trúc mã nguồn phân chia thành Functional Components (dùng hàm, không có trạng thái hay vòng đời riêng, xử lý logic đơn giản) và Class Components (dùng ES6 class, quản lý trạng thái động và vòng đời). Hệ thống khai thác cơ chế truyền dữ liệu bất biến thông qua Props, lưu trữ dữ liệu thời gian chạy qua State, cùng các phương thức trong vòng đời (Lifecycle) gồm 4 giai đoạn:

  • Khởi tạo và lắp đặt (Mounting): constructor(), render(), componentDidMount().
  • Cập nhật (Updating): shouldComponentUpdate(), render(), componentDidUpdate().
  • Hủy bỏ (Unmounting): componentWillUnmount().
  • Xử lý ngoại lệ (Error Handling): static getDerivedStateFromError().

• C# và ASP.NET: Ngôn ngữ lập trình C# hướng đối tượng (OOP), kiểm soát kiểu dữ liệu an toàn tại thời điểm biên dịch (type-safe), hoạt động trên nền tảng .NET. Framework ASP.NET được nghiên cứu qua các mô hình tiến hóa: ASP.NET Web Forms, ASP.NET MVC, ASP.NET Web API (xây dựng dịch vụ RESTful) và .NET Core hỗ trợ đa nền tảng (cross-platform).

• Microsoft SQL Server: Hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) quản lý dữ liệu thông qua các bảng quan hệ và ngôn ngữ truy vấn SQL. Cơ chế tối ưu hóa dựa trên đánh chỉ mục (indexing), lập lịch tác vụ (job scheduling), kiểm soát truy cập phân quyền và mã hóa bảo mật.

• Thư viện và công nghệ phụ trợ: Entity Framework, Dapper (truy vấn dữ liệu), JSON Web Token (JWT) phục vụ xác thực và phân quyền, Ant Design, TailwindCSS (thiết kế giao diện), Background Service, NotificationService (truyền phát thông báo thời gian thực) và dịch vụ xác thực mã OTP, đăng nhập Google.

Phương pháp nghiên cứu được triển khai theo quy trình kỹ thuật phần mềm:

• Phương pháp khảo sát, phân tích hiện trạng các hệ thống thực tế đang hoạt động trên thị trường.
• Phương pháp mô hình hóa hướng đối tượng theo chuẩn UML (Unified Modeling Language) để đặc tả ca sử dụng (Use Case), mô hình hóa tuần tự (Sequence Diagram), thiết kế lớp (Class Diagram) và mô hình hóa dữ liệu quan hệ (ERD).
• Phương pháp kiểm thử phần mềm dựa trên kịch bản (Scenario Testing) và thiết kế ca kiểm thử (Test Case).

Nguồn dữ liệu nghiên cứu thu thập từ kết quả khảo sát đối chuẩn 3 hệ thống bán vé xe trực tuyến (VeXeRe, MegaBus, EasyBook) kết hợp với tài liệu kỹ thuật chuẩn của Microsoft và ReactJS.

---

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

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

Chương 1 hệ thống hóa toàn bộ nền tảng công nghệ phục vụ xây dựng hệ thống. Trọng tâm của chương là việc làm rõ bản chất hoạt động của ReactJS thông qua cơ chế Virtual DOM, cú pháp JSX, cấu trúc Component, vòng đời Component, cách thức phân biệt giữa Props và State. Tiếp đó, tác giả trình bày đặc tính của ngôn ngữ C#, các phiên bản kiến trúc của ASP.NET (Web Forms, MVC, Web API, .NET Core) và khả năng quản trị cơ sở dữ liệu quan hệ, bảo mật dữ liệu của Microsoft SQL Server.

Chương 2: Khảo sát hiện trạng

Chương 2 khảo sát thực trạng của 3 website đặt vé trực tuyến đang vận hành, từ đó rút ra các ưu điểm và hạn chế làm căn cứ xác định yêu cầu hệ thống:

Hệ thống khảo sát	Ưu điểm ghi nhận	Khuyết điểm và hạn chế
VeXeRe (vexere.com)	Hợp tác nhiều nhà xe, nhiều chương trình ưu đãi, bộ lọc chuyến đi đa dạng (giờ đi, điểm đón/trả, hàng ghế).	Phân trang chưa tối ưu (phải cuộn lên đầu trang để lọc); phần chân trang (footer) chiếm diện tích màn hình quá lớn.
MegaBus (megabus.com)	Tra cứu nhanh chóng, nhiều lựa chọn dịch vụ, áp dụng tốt cơ chế phân trang kết hợp bộ lọc.	Không hỗ trợ thanh toán trực tuyến (chỉ gửi thư xác nhận qua Gmail).
EasyBook (easybook.com)	Phạm vi đặt vé đa quốc gia (khu vực Đông Nam Á), hỗ trợ thanh toán trực tuyến với nhiều loại tiền tệ.	Số lượng chuyến đi bị hạn chế, người dùng phải thực hiện tra cứu nhiều lần.

Từ kết quả khảo sát, tác giả xác định 15 chức năng yêu cầu nghiệp vụ cho 3 nhóm tác nhân (Khách hàng, Nhà xe, Quản trị viên):

STT	Tên chức năng nghiệp vụ	Tác nhân sử dụng
1	Đăng ký tài khoản	Người dùng, Nhà xe
2	Đăng nhập hệ thống	Người dùng, Nhà xe, Quản trị viên (Admin)
3	Cập nhật mật khẩu	Người dùng, Nhà xe
4	Đăng xuất	Người dùng, Nhà xe, Quản trị viên (Admin)
5	Tìm kiếm chuyến đi	Người dùng
6	Mua vé xe	Người dùng
7	Đánh giá chất lượng xe/chuyến đi	Người dùng
8	Cập nhật thông tin hồ sơ (profile)	Người dùng
9	Quản lý phương tiện xe	Nhà xe
10	Chỉnh sửa thông tin chuyến đi	Nhà xe
11	Thống kê doanh thu theo năm	Nhà xe
12	Quản lý tài khoản người dùng	Quản trị viên (Admin)
13	Quản lý thông tin nhà xe	Quản trị viên (Admin)
14	Quản lý điểm dừng đỗ, bến bãi	Quản trị viên (Admin)
15	Gửi thông báo thời gian thực (realtime)	Người dùng, Nhà xe, Quản trị viên (Admin)

Hệ thống xác lập 3 yêu cầu hệ thống (phân quyền đa cấp bậc, xác thực tài khoản đơn nhất gắn với một vai trò, xử lý ngoại lệ/kiểm soát lỗi tập trung) và 4 yêu cầu phi chức năng (tính dễ sử dụng, tính đúng đắn theo quy định pháp luật đường bộ, khả năng mở rộng quy mô, tính an toàn thông tin không chia sẻ bên thứ ba).

Chương 2 mô hình hóa chi tiết 14 ca sử dụng (Use Case) điển hình:

• Nhóm dùng chung: UC.001 (Đăng ký), UC.002 (Đăng nhập), UC.003 (Đăng xuất).
• Nhóm khách hàng: UC.004 (Tìm kiếm chuyến đi theo điểm đi, điểm đến, ngày khởi hành và bộ lọc), UC.005 (Quản lý chuyến đi: xem chuyến hoàn thành, sắp tới, hủy đơn đặt vé), UC.006 (Đặt vé xe: chọn ghế, chọn điểm đón/trả, nhập thông tin liên hệ, thanh toán), UC.007 (Đánh giá chất lượng chuyến đi: xếp hạng thang điểm 5 sao và bình luận).
• Nhóm nhà xe: UC.008 (Quản lý xe: thêm mới biển số, loại xe, ghế ngồi, cập nhật), UC.009 (Xem thống kê doanh thu theo năm), UC-010 (Quản lý trạng thái chuyến đi), UC-011 (Thêm mới chuyến đi gắn với lộ trình và bảng giá), UC-012 (Quản lý bảng giá: thêm bảng giá ở trạng thái Chờ duyệt), UC-013 (Quản lý loại giá: gắn tuyến đi, giá cước, phụ phí), UC-014 (Quản lý lộ trình: chọn danh sách xe buýt, các bến đón/trả, thiết lập thứ tự và mốc thời gian đến/đi).

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

Chương 3 trình bày các nội dung thiết kế kỹ thuật:

• Thiết kế hệ thống xử lý nền (Background Service) và hệ thống phát thông báo (NotificationService).
• Thiết kế mô hình dữ liệu quan hệ (ERD) đồng bộ các thực thể: Người dùng, Tài khoản, Nhà xe, Phương tiện, Loại xe, Loại ghế, Bến bãi/Trạm dừng, Tuyến đường, Lộ trình, Bảng giá, Loại giá, Chuyến đi, Đơn hàng/Vé xe và Đánh giá.
• Thiết kế lược đồ tuần tự (Sequence Diagram) chi tiết cho các luồng nghiệp vụ: đăng ký, đăng nhập, tìm kiếm chuyến đi, đặt vé, hủy đơn hàng, thêm/sửa xe, quản lý bến bãi, cập nhật lộ trình và thống kê doanh thu.
• Thiết kế chi tiết giao diện người dùng tương ứng cho từng nhóm tác nhân:
  • Giao diện Admin: Bảng điều khiển (Dashboard), trang quản lý nhà xe, trang thông tin chi tiết nhà xe, quản lý tài khoản người dùng, trang chi tiết người dùng, quản lý bến bãi, thêm mới/chi tiết bến bãi, quản lý loại xe, thêm/sửa loại xe, quản lý loại ghế, thêm/sửa loại ghế, quản lý tuyến đường, thêm mới tuyến đường, quản lý bảng giá, quản lý loại giá.
  • Giao diện Nhà xe: Trang quản lý xe, thêm mới/chỉnh sửa/chi tiết xe, quản lý lộ trình, thêm mới lộ trình, quản lý chuyến đi, tạo vé, quản lý bảng giá và loại giá của nhà xe, trang thống kê doanh thu.
  • Giao diện Khách hàng: Trang chủ, trang kết quả tìm kiếm, trang chọn vị trí ghế ngồi, trang chọn điểm đón/trả, trang điền thông tin đặt vé, trang thanh toán, trang hồ sơ cá nhân, trang lịch sử hóa đơn, trang vé chờ xuất bến, trang chuyến đi hoàn thành, trang chuyến đi đã hủy, trang đăng ký và modal xác thực mã OTP.

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

Chương 4 mô tả quá trình hiện thực hóa các mô-đun và thực hiện kiểm thử chức năng dựa trên các kịch bản thực tế: kịch bản đăng ký tài khoản, kịch bản đăng nhập, kịch bản tìm kiếm vé xe, kịch bản đặt vé xe và kịch bản tạo vé xe dành cho nhà xe. Mỗi kịch bản được cụ thể hóa bằng các bảng ca kiểm thử (Test Case) đánh giá tính đúng đắn của dữ liệu đầu vào, luồng chuyển hướng giao diện và khả năng bắt lỗi ngoại lệ của hệ thống.

Phần kết luận

Phần kết luận tổng hợp mức độ hoàn thành so với mục tiêu đề ra: hệ thống đã vận hành đầy đủ các chức năng quản lý vận tải và đặt vé xe trực tuyến theo đúng đặc tả; nêu rõ các ưu điểm về giao diện trực quan và khả năng kết nối dữ liệu; chỉ ra các hạn chế còn tồn đọng và định hướng nghiên cứu phát triển tiếp theo.

---

Thiết kế và triển khai

Hệ thống được thiết kế theo mô hình tách biệt giữa giao diện người dùng (Frontend) và dịch vụ xử lý nghiệp vụ/dữ liệu (Backend):

[Trình duyệt Khách hàng / Nhà xe / Admin]
       Giao thức HTTPS / RESTful API
       [ASP.NET Core Web API]
       [Microsoft SQL Server]

Quá trình triển khai kỹ thuật bao gồm các đặc điểm:

• Tầng giao diện (Frontend): Xây dựng bằng ReactJS, ứng dụng cơ chế chia nhỏ component tái sử dụng, đồng bộ trạng thái giao diện thông qua State và Props. Giao diện được định kiểu bằng Ant Design và TailwindCSS, tối ưu hóa các thành phần tương tác như bộ lọc tìm kiếm, sơ đồ chọn vị trí ghế trực quan, bảng điều khiển thống kê và modal xác thực OTP.
• Tầng máy chủ và dịch vụ (Backend): Xây dựng bằng C# trên nền tảng ASP.NET Web API cung cấp các điểm cuối RESTful. Cơ chế bảo mật và kiểm soát truy cập thực hiện thông qua chuẩn JSON Web Token (JWT), hỗ trợ tích hợp đăng nhập tài khoản bằng Google. Tầng dữ liệu tương tác với Microsoft SQL Server thông qua Entity Framework và Dapper.
• Dịch vụ nền và thông báo: Hệ thống cài đặt Background Service xử lý các tác vụ nền định kỳ và NotificationService nhằm gửi các thông báo trạng thái tức thời đến các nhóm tác nhân khi có thay đổi về đơn hàng hoặc chuyến đi.
• Công tác kiểm thử: Hệ thống thực hiện kiểm thử hộp đen thông qua các ca kiểm thử chức năng được định nghĩa trong Chương 4:

Nhóm chức năng kiểm thử	Nội dung kiểm thử chính	Điều kiện / Kết quả mong đợi
Đăng nhập	Nhập thông tin tài khoản, mật khẩu; kiểm tra trường để trống; kiểm tra sai mật khẩu.	Báo lỗi khi thiếu dữ liệu hoặc sai thông tin; xác thực thành công và điều hướng đúng phân hệ khi hợp lệ.
Tìm kiếm vé xe	Nhập điểm đi, điểm đến, ngày khởi hành; áp dụng bộ lọc theo nhà xe, giờ chạy, giá vé.	Hiển thị danh sách chuyến xe phù hợp kèm thông tin ghế trống; báo thông báo không tìm thấy nếu không có chuyến.
Đặt vé xe	Chọn vị trí ghế ngồi, chọn trạm đón, trạm trả, nhập thông tin liên hệ và chuyển hướng thanh toán.	Giữ chỗ thành công, chuyển hướng trang thanh toán; không cho phép chọn trùng ghế đã có người đặt.
Tạo vé xe (Nhà xe)	Chọn tuyến xe, ngày xuất bến, phương tiện xe, bảng giá và xác nhận lộ trình.	Tạo chuyến đi thành công với trạng thái sẵn sàng mở bán; báo lỗi nếu thông tin chuyến trùng lặp hoặc không hợp lệ.

---

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

Hệ thống đã hoàn thành việc xây dựng và tích hợp các phân hệ chức năng theo đúng đề cương nghiên cứu:

• Xây dựng hoàn chỉnh 15 chức năng nghiệp vụ vận hành xuyên suốt giữa 3 nhóm tác nhân: Quản trị viên (Admin), Doanh nghiệp vận tải (Nhà xe), và Khách hàng.
• Hoàn thiện đầy đủ cấu trúc giao diện bao gồm hệ thống bảng điều khiển của Admin (quản lý người dùng, nhà xe, bến bãi, tuyến đường, bảng giá), công cụ quản trị tác nghiệp của Nhà xe (quản lý xe, lộ trình, chuyến đi, giá vé, thống kê doanh thu theo năm) và cổng thông tin dành cho Khách hàng (tìm kiếm đa tiêu chí, chọn ghế trực quan, quản lý vé theo các trạng thái: chờ xuất bến, đã hoàn thành, đã hủy).
• Tích hợp thành công các cơ chế phụ trợ: xác thực bằng mã OTP, thông báo thời gian thực qua NotificationService, chạy tác vụ ngầm với Background Service, và liên kết đăng nhập thông qua Google.

Về mặt giải pháp, tác giả giải quyết được các hạn chế đã chỉ ra ở các hệ thống khảo sát thực tế:

• So với MegaBus, hệ thống bổ sung quy trình thanh toán trực tuyến đồng bộ gắn với đơn hàng thay vì chỉ gửi thư xác nhận qua email.
• So với VeXeRe, hệ thống cải tiến cấu trúc phân trang kết hợp bộ lọc linh hoạt, thu gọn diện tích phần chân trang để tăng diện tích hiển thị danh sách chuyến đi.
• So với EasyBook, hệ thống chuẩn hóa quy trình thiết lập lộ trình và trạm dừng chi tiết cho từng nhà xe, giúp khách hàng nắm bắt rõ các điểm đón trả trung gian trong chuyến hành trình.

---

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

Hạn chế của đề tài được xác định dựa trên phạm vi công việc và nội dung trình bày trong văn bản:

• Hệ thống mới dừng lại ở việc triển khai trên nền tảng ứng dụng web, chưa xây dựng ứng dụng di động chuyên biệt (mobile app) cho hành khách và tài xế/tiếp viên nhà xe.
• Quá trình thử nghiệm và đánh giá hệ thống chủ yếu thực hiện qua các ca kiểm thử kịch bản chức năng giả lập, chưa tiến hành đo kiểm tải thực tế với lưu lượng truy cập đồng thời lớn trên môi trường mạng diện rộng.
• Dữ liệu tuyến đường, bến bãi và thông tin chuyến xe còn mang tính chất thử nghiệm cục bộ, chưa liên kết trực tiếp với hệ sinh thái dữ liệu của các cơ quan quản lý giao thông vận tải.

Hướng phát triển tiếp theo mà đồ án có thể mở rộng bao gồm:

• Phát triển thêm phiên bản ứng dụng di động dành cho hệ điều hành Android và iOS để nâng cao tính tiện lợi cho người dùng và nhân viên nhà xe.
• Nghiên cứu tích hợp thêm các cổng thanh toán điện tử phổ biến tại Việt Nam và mở rộng các tiêu chí phân tích doanh thu chuyên sâu cho doanh nghiệp vận tải.
• Tối ưu hóa hiệu năng cơ sở dữ liệu và triển khai hệ thống lên hạ tầng điện toán đám mây để hỗ trợ mở rộng quy mô khi số lượng nhà xe và hành khách gia tăng.

---

Giá trị tham khảo

Báo cáo khóa luận là tài liệu tham khảo hữu ích cho sinh viên chuyên ngành Công nghệ phần mềm, Công nghệ thông tin và các lập trình viên đang nghiên cứu xây dựng các hệ thống thương mại điện tử hoặc quản lý đặt chỗ trực tuyến.

Các nội dung có giá trị tham khảo cụ thể bao gồm:

• Phương pháp khảo sát hiện trạng và xác định yêu cầu: Cung cấp cách tiếp cận đối chuẩn các hệ thống thực tế trên thị trường để tìm ra điểm hạn chế, từ đó xác lập bảng yêu cầu nghiệp vụ và yêu cầu hệ thống rõ ràng.
• Quy trình mô hình hóa Use Case chi tiết: Cung cấp mẫu đặc tả ca sử dụng hoàn chỉnh từ mã định danh, tác nhân, tiền điều kiện, hậu điều kiện đến luồng cơ bản, luồng thay thế và luồng ngoại lệ cho các bài toán phân quyền phức tạp.
• Kiến trúc kết hợp ReactJS và ASP.NET Web API: Cung cấp cách tổ chức giao diện tương tác phía người dùng kết hợp với dịch vụ Web API phía máy chủ, quản lý phiên làm việc qua JWT và quản trị dữ liệu quan hệ bằng Microsoft SQL Server.
• Thiết kế ca kiểm thử (Test Case): Cung cấp tài liệu mẫu về việc xây dựng kịch bản kiểm thử chức năng cho các quy trình cốt lõi trong hệ thống quản lý bán vé.

---

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

1. Khóa luận đã tiến hành khảo sát những website thực tế nào và phát hiện hạn chế gì ở các hệ thống đó?
Tác giả đã khảo sát 3 website: VeXeRe (vexere.com), MegaBus (megabus.com) và EasyBook (easybook.com). Hạn chế được chỉ ra là: VeXeRe có phân trang chưa tối ưu (phải cuộn lên đầu màn hình để lọc) và phần chân trang chiếm diện tích quá lớn; MegaBus không hỗ trợ thanh toán trực tuyến (chỉ gửi xác nhận qua Gmail); EasyBook có số lượng chuyến đi hạn chế khiến người dùng phải tra cứu nhiều lần.

2. Hệ thống phân chia quyền hạn người dùng thành những vai trò nào và nhiệm vụ chính của từng vai trò là gì?
Hệ thống phân chia thành 3 vai trò:

• Admin: Có quyền cao nhất, quản lý tài khoản người dùng, nhà xe, các vai trò, bến bãi, điểm dừng đỗ, tuyến đường và duyệt bảng giá.
• Nhà xe (Company): Quản lý danh sách phương tiện xe, quản lý lộ trình di chuyển, thiết lập bảng giá, loại giá, thêm mới/quản lý chuyến đi và xem thống kê doanh thu theo năm.
• Khách hàng: Tìm kiếm chuyến đi, chọn ghế, chọn điểm đón/trả, đặt vé, thanh toán trực tuyến, quản lý lịch sử chuyến đi và đánh giá chất lượng chuyến đi theo thang điểm 5 sao.

3. Quy trình thực hiện ca sử dụng Đặt vé xe (UC.006) của khách hàng diễn ra như thế nào?
Quy trình gồm 5 bước cơ bản: Khách hàng nhấn chọn chuyến đi -> Hệ thống hiển thị sơ đồ chỗ ngồi -> Khách hàng chọn vị trí ghế còn trống và nhấn "Tiếp tục" -> Khách hàng chọn trạm đón, trạm trả và nhấn "Tiếp tục" -> Khách hàng nhấn "Đặt vé" để hệ thống chuyển tiếp sang trang thanh toán. Nếu có lỗi phát sinh, hệ thống giữ nguyên giao diện để người dùng kiểm tra lại thông tin.

4. Khóa luận sử dụng các công nghệ chính nào để xây dựng phần Frontend và Backend?
Phần Frontend được xây dựng bằng thư viện ReactJS kết hợp với Ant Design và TailwindCSS để tạo giao diện người dùng và xử lý tương tác qua Virtual DOM. Phần Backend được phát triển bằng ngôn ngữ C# trên nền tảng ASP.NET Web API, sử dụng Entity Framework và Dapper để truy xuất cơ sở dữ liệu Microsoft SQL Server, kết hợp JSON Web Token (JWT) cho xác thực và phân quyền.

5. Những kịch bản và ca kiểm thử (Test Case) nào đã được thực hiện trong Chương 4 của khóa luận?
Chương 4 thực hiện kiểm thử trên 5 kịch bản chính: Kịch bản đăng ký tài khoản, kịch bản đăng nhập, kịch bản tìm kiếm vé xe, kịch bản đặt vé xe và kịch bản tạo vé xe của nhà xe. Đi kèm với các kịch bản này là các bộ ca kiểm thử chi tiết (Test case đăng nhập, Test case tìm kiếm vé xe, Test case đặt vé xe, Test case tạo vé xe) nhằm kiểm tra tính hợp lệ của dữ liệu và khả năng bắt lỗi ngoại lệ.

---

Kết luận

Đồ án tốt nghiệp "Xây dựng hệ thống website đặt vé xe khách sử dụng ReactJS và ASP.NET" của sinh viên Đỗ Minh Dũng và Nguyễn Thái Ngọc Tân đã hoàn thành mục tiêu thiết kế và cài đặt một hệ thống web bán vé xe khách trực tuyến đa tác nhân. Công trình đã chuẩn hóa quy trình nghiệp vụ vận tải từ khâu quản lý phương tiện, lộ trình, bảng giá của nhà xe đến khâu tìm kiếm, giữ chỗ, thanh toán trực tuyến của hành khách và phân quyền giám sát của quản trị viên. Toàn bộ giải pháp được xây dựng dựa trên sự kết hợp giữa ReactJS ở phía máy khách và ASP.NET Web API cùng Microsoft SQL Server ở phía máy chủ, mang lại tài liệu tham khảo có giá trị về phân tích thiết kế hệ thống và kiểm thử phần mềm.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. Khái niệm ReactJs ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook nhằm tạo ra các ứng dụng web nhanh và hiệu quả với mã nguồn. Mục đích chính của ReactJS là khiến cho website hoạt động mượt mà, khả năng mở rộng cao và đơn giản. DOM thực tế: Đây là biểu diễn của cấu trúc HTML thực sự trên trang web [3].

Virtual DOM Là một bản sao nhẹ của DOM thực sự được lưu trữ trong bộ nhớ của máy tính. Nó là một cây DOM được tạo và duyệt bởi React để theo dõi sự thay đổi của component [3]. Quy trình làm việc: Khi state hoặc props của một component thay đổi, React tạo ra một cây Virtual DOM mới. Sau đó, React so sánh cây Virtual DOM mới với cây Virtual DOM trước đó (trước khi thay đổi state hoặc props).

React xác định ra những thay đổi (diffing) giữa hai cây và tạo ra một danh sách các thao tác cần thực hiện để đồng bộ hóa DOM thực tế với cây Virtual DOM mới. Cuối cùng, React chỉ cập nhật DOM thực tế trong những vị trí cần thay đổi thay vì cập nhật toàn bộ DOM [3]. Lợi ích: Hiệu suất: Thay vì cập nhật toàn bộ DOM, React chỉ cập nhật những phần thay đổi, giảm thiểu tác động đến hiệu suất. Tính nhất quán: Sử dụng Virtual DOM giúp đảm bảo rằng trạng thái của ứng dụng được bảo toàn mà không cần cập nhật toàn bộ trang.

JSX JSX (JavaScript XML) là một phần quan trọng của React, một thư viện JavaScript phổ biến được phát triển bởi Facebook để xây dựng giao diện người dùng (UI) cho ứng dụng web. JSX giúp bạn mô tả giao diện người dùng một cách dễ đọc và dễ hiểu bằng cách kết hợp cú pháp giống HTML với JavaScript [3]. Component: Một "component" là một khối xây dựng độc lập và tái sử dụng trong phát triển ứng dụng web. Components là một cách để bạn chia giao diện người dùng thành các phần nhỏ và độc lập để quản lý chúng dễ dàng hơn.

Functional Components: - Được định nghĩa thông qua các hàm JavaScript. - Không có trạng thái (state) và các phương thức vòng đời của riêng chúng. - Thường được sử dụng cho các components đơn giản, không có logic phức tạp. Class Components: - Được định nghĩa thông qua các lớp ES6.

- Có thể chứa trạng thái (state) và các phương thức vòng đời của riêng chúng. - Thường được sử dụng cho các components có độ phức tạp cao, chứa nhiều logic. Props: Props là viết tắt của "properties" (thuộc tính) và là một cách để truyền dữ liệu từ một component cha xuống các component con. Props là không thay đổi (immutable), có nghĩa là một component con không thể thay đổi giá trị của props mà nó nhận được.

Được truyền dưới dạng các thuộc tính của các thẻ React trong JSX. State: 4 State là dữ liệu mà một component có thể giữ và theo dõi trong quá trình thời gian chạy. State chỉ tồn tại trong các component lớp (class components), và có thể được khởi tạo trong hàm constructor. Khi state thay đổi, React sẽ tự động render lại component để hiển thị thông tin mới 1.

React Lifecycle: Lifecycle (vòng đời) là chuỗi các phương thức mà một component đi qua từ khi được tạo ra đến khi bị hủy. Các phương thức này cho phép bạn thực hiện các hành động cụ thể tại các điểm khác nhau trong vòng đời của một component. Điều này giúp bạn quản lý các tác vụ như khởi tạo trạng thái, lấy dữ liệu từ máy chủ, cập nhật giao diện người dùng, và nhiều hơn nữa [3]. Mounting Constructor(): Được gọi khi component được khởi tạo.

Bạn có thể khởi tạo state và bind các phương thức ở đây. Render(): Trả về JSX để hiển thị giao diện người dùng. ComponentDidMount(): Được gọi sau khi component đã được lắp đặt vào DOM. Thường được sử dụng để thực hiện các tác vụ sau khi component đã xuất hiện trên trang.

Updating ShouldComponentUpdate(nextProps, nextState): Cho phép bạn kiểm soát việc cập nhật component bằng cách trả về true hoặc false. Mặc định là true. Render(): Được gọi khi state hoặc props thay đổi. ComponentDidUpdate(prevProps, prevState): Được gọi sau khi component đã cập nhật.

Thường được sử dụng để thực hiện các tác vụ sau khi cập nhật. Unmounting ComponentWillUnmount(): Được gọi trước khi component bị hủy bỏ khỏi DOM. Thường được sử dụng để dọn dẹp tài nguyên không còn cần thiết. Error Handling Static GetDerivedStateFromError(error): Được sử dụng để cập nhật state khi có lỗi trong các phương thức con của component [3].

Giới thiệu C# C# là một ngôn ngữ lập trình đa năng được phát triển bởi Microsoft. Nó được thiết kế để chạy trên nền tảng .NET Framework và. C# chủ yếu được sử dụng cho phát triển ứng dụng dựa trên Windows, từ ứng dụng máy tính đến ứng dụng di động và web [6]. Đặc điểm: Ngôn ngữ lập trình hướng đối tượng (OOP): C# hỗ trợ các khái niệm của lập trình hướng đối tượng như lớp, đối tượng, kế thừa, và đa hình.

An toàn với kiểu (Type-safe): Có kiểm soát kiểu dữ liệu tại thời điểm biên dịch, giảm lỗi runtime. Thu gọn (Modern): C# được cập nhật liên tục để hỗ trợ các tính năng mới của ngôn ngữ lập trình và công nghệ. C# được sử dụng rộng rãi trong phát triển ứng dụng Windows, ứng dụng di động (sử dụng Xamarin), và phát triển trò chơi (sử dụng Unity) [6]. Giới thiệu ASP.NET là một framework phát triển ứng dụng web được phát triển bởi Microsoft [4].

Nó cung cấp một cách mạnh mẽ để xây dựng các ứng dụng web và dịch vụ web chất lượng cao. Các phiên bản ASP.NET Web Forms: Mô hình lập trình sự kiện và kiểm soát cho phát triển nhanh chóng.NET MVC (Model-View-Controller): Mô hình này tách biệt ứng dụng thành các phần khác nhau, dễ dàng kiểm soát và kiểm thử.NET Web API: Cho phép xây dựng các dịch vụ web RESTful.NET Core: Phiên bản dành cho cross-platform và open-source [1]. Giới thiệu Microsoft SQL Server là một hệ quản trị cơ sở dữ liệu quan hệ (Relational Database Management System - RDBMS) do Microsoft phát triển. Nó cung cấp một loạt các tính năng và công cụ mạnh mẽ để quản lý và tương tác với dữ liệu trong môi trường doanh nghiệp [6].

Quản lý cơ sở dữ liệu quan hệ SQL Server được thiết kế để lưu trữ và quản lý dữ liệu trong các bảng quan hệ (tables) theo mô hình quan hệ. Hỗ trợ ngôn ngữ truy vấn SQL (Structured Query Language) để thực hiện các thao tác như truy vấn, chèn, cập nhật, và xóa dữ liệu [6]. Hiệu suất và tính dự trữ Cung cấp các công cụ và cơ chế tối ưu hóa để đảm bảo hiệu suất cao khi thao tác với cơ sở dữ liệu. Hỗ trợ các kỹ thuật như chỉ mục (indexing), lập lịch nhiệm vụ (job scheduling), và xử lý đồng thời để tối ưu hóa tương tác với dữ liệu.

Bảo mật SQL Server có các tính năng bảo mật mạnh mẽ để bảo vệ dữ liệu, bao gồm quản lý quyền (permissions), mã hóa dữ liệu, và kiểm soát truy cập. Dịch vụ đám mây SQL Server có sẵn trên các nền tảng đám mây như Microsoft Azure SQL Database, cung cấp linh hoạt trong triển khai và quản lý cơ sở dữ liệu [6]. 8 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 2. Khảo sát hiện trạng 2.

Website VeXeRe - Website VeXeRe (https://vexere. Website Vexere - Giới thiệu chung: vexere.com là hệ thống cho phép người dùng có thể tìm kiếm, đặt vé xe khách máy bay hoặc thuê xe, ngoài ra còn phục vụ nhu cầu mở bán vé xe của các nhà xe lớn nhỏ trên toàn quốc. - Các chức năng chính: +Tìm kiếm chuyến đi + Đặt vé xe + Quản lý đơn hàng + Thuê xe - Ưu điểm: Là hệ thống hợp tác với nhiều nhà xe nên khách hàng có nhiều sự lựa chọn để tìm kiếm chuyến đi và tiến hành đặt mua vé, có nhiều sự kiện giảm giá nhân các dịp lễ hoặc ưu đãi từ các nhà xe nên thu hút được lượng lớn khách hàng. Có bộ lọc chuyến đi bao gồm theo giờ đi, điểm đón, điểm trả, hàng ghế… nên tối ưu hóa việc tìm kiếm chuyến đi cho khách hàng.

- Khuyết điểm: 9 + Hệ thống chưa sử dụng việc phân trang một cách tối ưu nhất, nên khi lọc chuyến đi phải kéo lên trên màn hình chính để thực hiện lọc, làm giảm cảm giác tương tác của người dùng. + Phần chân trang chiếm quá lớn kích thước màn hình làm cho hệ thống không được đẹp mắt. Footer của Vexere 10 2. Website MeGaBus - Website MeGaBus (https://megabus.

Website Megabus - Giới thiệu chung: megabus.com là hệ thống cho phép khách hàng tìm kiếm đặt xe khách, đặt phòng hoặc taxi trên toàn quốc. - Các chức năng chính: + Tìm kiếm chuyến đi + Đặt vé xe / phòng / thuê taxi + Kiểm tra đặt xe - Ưu điểm: Tra cứu chuyến đi hoặc phòng một cách nhanh chóng và có nhiều sự lựa chọn cho khách hàng. Áp dụng tốt việc phân trang cùng với lọc chuyến đi tăng trải nghiệm người dùng - Khuyết điểm: Không hỗ trợ hình thức thanh toán online mà chỉ gửi xác nhận qua gmail. Website EasyBook Hình 2.

Website EasyBook - Giới thiệu chung: EasyBook.com là hệ thống đặt xe, phà, tàu lửa không chỉ trong nước mà còn các nước ở Đông Nam Á. - Các chức năng chính + Tìm kiếm, đặt vé xe buýt, tàu hỏa trong nước + Tìm kiếm, đặt vé phà các nước trong khu vực Đông Nam Á - Ưu điểm: Là hệ thống cho cả các nước trong khu vực Đông Nam Á nên phù hợp cho khách hàng tìm kiếm phương án di chuyển đến các điểm du lịch. Hỗ trợ phương thức thanh toán trực tuyến, chấp nhận nhiều đơn vị tiền tệ. - Khuyết điểm: Tuy có thể tìm kiếm các chuyến đi đa quốc gia nhưng lại rất hạn chế chuyến đi, nên ảnh hưởng đến trải nghiệm người dùng khi thực hiện tra cứu nhiều lần mới tìm được chuyến đi phù hợp 12 2.

Xác định yêu cầu 2. Các chức năng yêu cầu nghiệp vụ Bảng 2. Các chức năng nghiệp vụ STT Tên Chức Năng Người Sử Dụng 1 Đăng ký Người dùng, nhà xe. 2 Đăng nhập Người dùng, nhà xe, admin 3 Cập nhật mật khẩu Người dùng, nhà xe.

4 Đăng xuất Người dùng, nhà xe, admin 5 Tìm kiếm chuyến đi Người dùng 6 Mua vé xe Người dùng 7 Đánh giá xe Người dùng 8 Cập nhật thông tin profile Người dùng 9 Quản lý xe của nhà xe Nhà xe 10 Chỉnh sửa thông tin chuyến đi Nhà xe 11 Thống kê doanh thu Nhà xe 12 Quản lý tài khoản Admin 13 Quản lý nhà xe Admin 14 Quản lý các điểm dừng đỗ, bến xe Admin 15 Gửi thông báo realtime Người dùng, nhà xe, admin 13 2. Các chức năng yêu cầu hệ thống Bảng 2.