Chương 1: Giới thiệu đề tài 1.2 Ý nghĩa học thuật Việc thực hiện và triển khai hệ thống TravelStart giúp cho chúng em áp dụng và củng cố những kiến thức, kinh nghiệm về cơ sở dữ liệu, kiến trúc hệ thống, các kỹ thuật lập trình đã có được trong suốt quá trình học tập. Hơn nữa, chúng em còn phân tích thiết kế, tự mình chọn và áp dụng những công nghệ được sử dụng phổ biến hiện nay như thư viện Front-end ReactJs, Back-end NodeJs, framework ExpressJs,. Đây cũng là dịp để chúng em nâng cao khả năng tự học, tự tìm hiểu nghiên cứu và giải quyết các vấn đề phát sinh trong quá trình tìm hiểu, hiện thực, đánh giá hệ thống.3 Mục tiêu Hệ thống TravelStart được xây dựng nhằm hướng đến những mục tiêu cho người quản lý bến xe, công ty vận chuyển và Hành khách: Ứng dụng web với các chức năng quản lý các bến xe cho phép người quản lý cấu hình thông tin bến xe, tuyến đường, các sự kiện kèm các mã giảm giá, thời gian ra vào bến của xe, tài xế, đồng thời quản lý các bài viết trên hệ thống. Đối với nhà xe thì có thể quản lý được thời gian ra vào của tài xế, phương tiện, cấu hình các thông tin như giá vé, tuyến đường cho phù hợp với từng nhà xe.
Và quan trọng nhất vẫn là hành khách, hệ thống giúp cho hành khách có thể chọn các tuyến đường, nhà xe, chỗ ngồi thích hợp và hủy vé nếu có lý do riêng mà không cần phải đến trực tiếp nhà xe hay bến xe.4 Giới hạn đề tài Trong quá trình phát triển hệ thống TravelStart, tôi không đi sâu vào việc quản lý tài nguyên của bến xe, nhà xe mà chỉ tập trung vào việc cung cấp các thông tin cơ bản về bến xe, cung cấp tiện ích cho hành khách thông qua quá trình tìm chuyến, đặt vé, hủy vé online. Ngoài ra còn cung cấp các tiện ích cho bến xe, nhà xe và tài xế như quản lý hành khách, tuyến đường, khuyến mãi. Bởi vì giới hạn về nhân lực và thời gian hiện thực, tôi sẽ phát triển thêm nhiều chức năng trong tương lai. 17 Chương 2: Kiến thức nền tảng Chương 2: Kiến thức nền tảng 2.1 ReactJs Một trong những yêu cầu quan trọng của hệ thống là xây dựng giao diện chức năng quản lý của bến xe, nhà xe và các chức năng hồ trợ Hành khách đặt vé.
Với xu thế hiện nay, xây dựng ứng dụng web có khá nhiều ưu điểm so với các ứng dụng desktop vì tính linh hoạt, hỗ trợ đa nền tảng của nó. Trong quá trình tìm hiểu các công nghệ liên quan để phát triển ứng dụng web như VueJs, ReactJ, Angular,. tôi thấy rằng ReactJ có những ưu điểm phù hợp để phát triển ứng dụng và có cộng đồng người sử dụng khá lớn. Do đó ReactJs được tôi chọn để xây dựng hệ thống.
ReactJs là 1 opensource được phát triển bởi Facebook, bản thân nó là 1 thư viện JavaScript được tạo ra để xây dựng giao diện người dùng [1]. ReactJs được xây dựng dựa trên khái niệm component. Một component đại diện cho một thành phần giao diện người dùng có khả năng tái sử dụng, các component được lồng nhau tạo nên cấu trúc phân cấp, từ các component nhỏ có thể xây dựng nên các component lớn hơn. Chính vì vậy mà những website sử dụng ReactJs thường chạy mượt, nhanh và có khả năng mở rộng cao.
ReactJs triển khai luồng dữ liệu một chiều, được truyền từ cha đến con thông qua thuộc tính props, giúp cho chúng ta dễ kiểm soát luồng logic tốt hơn so với truyền thống. Còn giúp cho quá trình phát hiện lỗi, bảo trì và nâng cấp một cách hiệu quả. Hình 1: Dòng dữ liệu trong React 18 Chương 2: Kiến thức nền tảng Ngoài ra, ReactJs cho phép nhúng code HTML, CSS trong code JavaScript nhờ vào JSX1 giúp cho lập trình viên lồng ghép code HTML, CSS vào trong JavaScript một cách tự nhiên hơn. Hiệu suất tốt hơn với Virtual DOM.
ReactJs cho phép xây dựng Virtual DOM, khi đó sự thay đổi trong DOM thực tế thì Virtual DOM sẽ thay đổi ngay lập tức.2 Redux Trong quá trình xây dựng hệ thống bằng ReactJs, các component sẽ tăng lên lúc đó đòi hỏi sự trao đổi dữ liệu ngày càng nhiều. Việc giao tiếp giữa các component cha và con ở nhiều lớp bên trong ngày càng phức tạp. Do đó hệ thống cần một công cụ quản lý trạng thái dữ liệu. Để giải quyết vấn đề đó, vì vậy tôi quyết định sử dụng Redux để giải quyết những vấn đề này.
Hình 2: Quản lý state với Redux Redux là một thư viện JavaScript giúp tạo thành một lớp quản lý trạng thái của ứng dụng, từ đo quản lý trạng thái dễ dàng hơn. Redux được xây dựng từ 3 thành phần chính: • Action: có thể hiểu là các sự kiện của chương trình. Đây là cách duy nhất để người dùng truyền tải data từ ứng dụng đến Store trong Redux, dữ liệu được 1 JSX (JavaScript Systax Extension) là 1 cú pháp mở rộng của JavaScript[2] , là sự kết hợp giữa JavaScript và XML. 19 Chương 2: Kiến thức nền tảng truyền có thể là yêu cầu từ người dùng, ứng dụng, API call hoặc form submission.
• Reducer: là các function nguyên thủy, chúng lấy state hiện tại của app, thực hiện một action trả về một state mới. Những state này được lưu như những objects và chúng xác định trạng thái của ứng dụng thay đổi như thế nào để đáp ứng các Action được gửi đến Store. • Store: lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứng dụng redux nào. Store cho phép người dùng có thể tiếp tục truy cập những chương trình đã được lưu và có thể can thiệp chúng thông qua những phương pháp hỗ trợ gồm cập nhập, đăng ký hoặc hủy.
Để kích hoạt các Action được thực hiện phải sử dụng đến các phần tử dispatcher sau đó gửi đến reducer. Dòng dữ liệu của Redux được miêu tả bởi hình 3: Hình 3: Sơ đồ kiến trúc của Redux 20 Chương 2: Kiến thức nền tảng 2.1 Nodejs Nodejs là một nền tảng được xây dựng trên V8 JavaScript Engine – trình thông dịch thực thi mã JavaSript, giúp xây dựng các ứng dụng web một cách đơn giản và dễ dàng mở rộng. Một số ưu điểm có thể thấy rõ khi sử dụng Node.js được xây dựng dựa vào nền tảng v7 JavaScript Engine nên thực thi chương trình rất nhanh.js nhận và xử lý đơn luồng nên giúp hệ thống ít tốn RAM hơn.js được viết bằng javaScript với cộng đồng người dùng lớn mạnh. Nếu cần hỗ trợ gì về Node.js thì dễ tìm ra người hỗ trợ.
• Tốc độ xử lý nhanh: Nhờ cơ chế bất đồng bộ (non-blocking) nên Node.js có thể xử lý nhiều kết nối cùng lúc và không gặp bất cứ khó khăn nào. • Sở hữu trình quản lý thư viện riêng – npm. Bên cạnh đó, Node.js có một số nhược điểm như: • Nếu không biết rõ JavaScript thì sẽ gặp khó khăn với Node.js không thể tận dụng lợi thế của nhiều lõi thường có trong phần cứng hiện nay. • Tuổi đời còn khá nhỏ khi so với các ngôn ngữ phía máy chủ khác như PHP, Ruby, Python, C#,.
nên không phù hợp với các dự án quan trọng.2 Expressjs Expressjs là một framework được xây dựng trên nền tảng NodeJs. Express cung cấp các hàm HTTP và middleware để tạo ra một API đơn giản. Một số chức năng chính của Expressjs: • Thiết lập các lớp trung gian để trả về các HTTP request. • Cho phép trả về các trang HTML dựa vào các tham số.
• Define route cho phép sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL.3 Database MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (gọi tắt là RDBMS) hoạt động theo mô hình client-server. Đây là hệ quản trị cơ sở dữ liệu rất được ưu chuộng trong quá trình xây dựng, phát triển ứng dụng. Và một số ưu điểm phải kể đến của MySQL: 21 Chương 2: Kiến thức nền tảng • Dễ sử dụng: mySQL là cơ sở dữ liệu tốc độ cao và ổn định, công cụ này dễ sử dụng và hoạt động trên nhiều hệ điều hành khác nhau. • Tính bảo mật cao: rất thích hợp cho các ứng dụng truy cập cơ sở dữ liệu trên internet.
• Tính đa năng: MySQL hỗ trợ nhiều chức năng SQL từ hệ quản trị cơ sở dữ liệu trực tiếp lẫn gián tiếp. • Khả năng mở rộng mạnh mẽ : MySQL có thể xử lý rất nhiều dữ liệu và có thể mở rộng nếu cần thiết. • Mã nguồn mở: cho phép người dùng tự do sửa chữa, thay đổi theo yêu cầu. [3] 22 Chương 3: Phân tích hệ thống Chương 3: Phân tích hệ thống 3.1 Khảo sát hệ thống hiện tại Để hiểu rõ hơn mục đích tại sao xây dựng hệ thống TravelStart, chúng tôi đã tiến hành khảo sát một số trang web có cùng lĩnh vực để tìm ra hướng giải quyết cho hệ thống của mình.
Một số hệ thống chúng tôi lựa chọn để khảo sát là The School Bus Management Platform, Vexere, phần mềm quản lý bến xe – Bến xe điện tử ANVUI.1 Hệ thống School Bus Management Platform [4] Hệ thống này có tên miền là https://schoolbus.au/ , hệ thống có nhiều chức năng khác nhau nhưng chúng tôi chỉ tập trung vào những tính năng chính như: • Theo dõi lên xuống xe của học sinh: tài khoản của học sinh sẽ sử dụng mã QR code hoặc RFID. • Quản lý thông tin học sinh. • Quản lý tài xế: Nhận được thông báo quãng đường đi, thời gian dừng, đang ở vị trí nào,. • Quản lý tuyến đường: có thời gian dự kiến rõ ràng cho từng trạm dừng của từng tuyến đường đồng thời có cả map để quan sát trực quan hơn.
Ưu điểm: • Quản lý được tuyến đường, thời gian đi của tài xế. • Quản lý được danh sách học sinh cùng với thời gian lên xe, xuống xe.2 Hệ thống Vexere[5] Hệ thống Vexere là môt hệ thống dùng để đặt vé xe trực tuyến, ngoài tính năng chính là đặt vé thì còn nhiều tính năng khác nữa. Nhưng chúng tôi chỉ khảo sát, tìm hiểu những tính năng chính sau: • Tính năng đặt vé: - Hành khách đặt vé online thông qua hệ thống từ đó lựa chọn chỗ ngồi, lộ trình, thời gian thích hợp. - Hành khách đặt vé trực tiếp với nhà xa thông qua số điện thoại của hệ thống khi chọn tuyến.
- Hành khách tự chọn điểm đón, trả khách phù hợp với bản thân thông qua điểm đón, trả khách đề xuất hay Hành khách có thể tự nhập. 23 Chương 3: Phân tích hệ thống • Tính năng thanh toán: - Khi Hành khách đặt vé online thì sẽ có nhiều hình thức thanh toán khác nhau như ShopeePay, ZaloPay, Ví MoMo,.