Phân công công việc% hoàn thành Đỗ Quang Anh Frontend Thiết kế giao diện và xây dựng các màn hình phía người dùng 100% Phạm Trọng Đại Frontend Thiết kế giao diện và xây dựng các màn hình
Trang 1Trường Đại học Công nghệ - ĐHQGHN
Khoa Công nghệ thông tin
BÀI TẬP LỚN: THỰC HÀNH PHÁT TRIỂN PHẦN MỀM
Giảng viên: Nguyễn Đức Anh
HỆ THỐNG BÁN VÉ XE KHÁCH
Ngày: 20/12/2021
Tình trạng tài liệu: Tài liệu báo cáo môn học
Chuẩn bị bởi: Nhóm 1
Thành viên:
1 Trần Quốc Cường 18020262
2 Nguyễn Tiến Đạt 18020281
Trang 2Mục lục
Trang 3Lời mở đầu
Hệ thống bán vé xe khách là một sản phẩm của tập thể Chúng em xin gửi lời cảm ơn tới thầy Nguyễn Đức Anh đã góp ý giúp sản phẩm hoàn thiện hơn về chức năng Sau đây là tài liệu báo cáo về hệ thống bán vé xe khách Chúng em đã tổng hợp và chỉnh sửa Mặc dù vậy nếu có điều gì thiếu sót, mong thầy thông cảm và góp ý cho chúng em
Chúng em xin trân trọng cảm ơn thầy!
Trang 4Phân công công việc
% hoàn thành
Đỗ Quang Anh Frontend Thiết kế giao diện và xây dựng
các màn hình phía người dùng
100%
Phạm Trọng Đại Frontend Thiết kế giao diện và xây dựng
các màn hình phía admin
100%
Nguyễn Tiến Đạt Backend Thiết kế server và cài đặt các
function phía admin
100%
Trần Quốc Cường Tài liệu,
requirement và data analytics
Phân tích các yêu cầu nghiệp vụ, lập ra báo cáo và các chức năng cần thực hiện; cài đặt các chức năng về machine learning cho admin
100%
Đinh Việt Anh Backend Thiết kế server và cài đặt các
function phía người dùng
100%
Trang 51 Giới thiệu
1.1 Mục đích
Tài liệu này là báo cáo về chủ đề Hệ thống bán vé xe khách online của nhóm 01 trong
khóa học Thực hành phát triển phần mềm
Báo cáo được viết dựa trên định dạng báo cáo của “IEEE Std 830-1998 IEEE Recommended Practice for Software Requirements Specifications” Báo cáo dựa trên các nội dung đã được nhóm chấp nhận và thống nhất
Mục đích của Báo cáo là giới thiệu về môi trường cài đặt hệ thống và các chức năng cung cấp trong phiên bản hiện tại
1.2 Bài toán giải quyết
Từ hiện trạng của hệ thống hiện thời, ta có thể thấy các hệ thống mua bán vé xe hiện nay gặp nhiều vấn đề cần phải để tâm chẳng hạn như:
● Các nhà xe được biết đến phần lớn là dựa vào lời giới thiệu của khách hàng và các trang review ở trên facebook, khó khăn trong việc tiếp cận các khách hàng mới
● Khách hàng khó khăn trong việc tìm được thông tin về các nhà xe để biết nhà
xe có chất lượng phục vụ như thế nào, giá cả ra sao, có nhồi nhét khách không
● Khách hàng khi muốn mua vé xe thì phải ra bến xe hoặc ra phòng vé của nhà
xe, đặc biệt là trong những dịp lễ lớn thì phải xếp hàng chờ mua vé, có đôi khi xếp hàng nhưng chưa chắc đã mua được vé
1.3 Phạm vi dự án
Hệ thống bán vé xe khách online được xây dựng như một phương tiện để kết nối trực
tiếp nhà xe và người mua vé xe
Hệ thống sẽ được phát triển dưới dạng một ứng dụng web, Người dùng cuối sẽ tương tác với hệ thống qua Internet thông qua các thiết bị thông minh (laptop, PC, máy tính bảng, điện thoại thông minh)
Trang 61.4 Phương pháp hoàn thành dự án
Quy trình phát triển phần mềm: Sử dụng mô hình Scrum họp 4 ngày 1 lần để cập nhật tiến độ, trao đổi về các vấn đề đang gặp phải và lên kế hoạch phát triển sản phẩm trong thời gian tiếp theo
Công cụ sử dụng:
● GitLab: Quản lý mã nguồn, hỗ trợ CI/CD
● Discord: Là một kênh trao đổi, cập nhật thông tin giữa các thành viên
Ngôn ngữ và công nghệ sử dụng:
● Backend: Node.js + MongoDB, FastAPI
● Frontend: React
● Infrastructure: Docker
● VCS: GitLab
1.5 Tài liệu tham khảo
[1] IEEE Std 830-1998 IEEE Recommended Practice for Software Requirements Specifications IEEE Computer Society, 1998
Trang 72 Các tác nhân
2.1 Người xem
Khách xem có thể tìm kiếm các chuyến xe dựa vào điểm đi, điểm đến, thời gian đi Người xem có thể đăng ký thành viên trên hệ thống để trở thành người dùng, để có nhiều tác vụ hơn
2.2 Quản trị hệ thống
Người có trách nhiệm giám sát và quản lý tài khoản hành khách, bến xe, nhà xe, thông tin về lịch trình chuyến đi, thông tin các vé đã đặt
2.3 Người dùng
Người dùng có thể là quản trị hệ thống, chủ nhà xe, và người tham gia Người dùng
có các ca sử dụng sau:
● Đăng nhập
● Quản lý thông tin cá nhân
● Tìm kiếm vé
● Đặt vé
● Quản lý vé đã đặt
● Đánh giá, bình luận về chuyến đi
Trang 83 Giới thiệu về môi trường cài đặt
3.1 Back-end
● NodeJS là một nền tảng được xây dựng dựa trên “V8 Javascript engine” và được viết bằng ngôn ngữ lập trình C++, Javascript NodeJS có thể chạy được trên nhiều hệ điều hành như Linux, Microsoft Windows, OS X
NodeJS tương tự một ngôn ngữ lập trình, nhưng chương trình được thiết kế bởi NodeJS sẽ chạy ở môi trường là máy chủ thay cho môi trường trình duyệt
● Express là một framework dành cho nodejs Nó cung cấp cho chúng ta rất nhiều tính năng mạnh mẽ trên nền tảng web cũng như trên các ứng dụng di động Express hỗ trợ các phương thức HTTP và middleware tạo ra một API vô cùng mạnh mẽ và dễ sử dụng Có thể tổng hợp một số chức năng chính của express như sau:
○ Thiết lập các lớp trung gian để trả về các HTTP request
○ Định nghĩa router 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
○ Cho phép trả về các trang HTML dựa vào các tham số
● FastAPI là 1 web framework của ngôn ngữ Python dùng để build API server có hiệu năng cao, code đơn giản nhưng cũng hỗ trợ tốt cho việc làm sản phẩm Đặc điểm:
○ Fast: Hiệu suất cao ngang với NodeJS và Go
○ Fast to code: Code nhanh hơn, tốc độ code các features tăng khoảng 200 đến 300 %
○ Fewer bugs: do đơn giản nên giảm số bugs của developer đến 40%
○ Intuitive: hỗ trợ code dễ hơn với tự động gợi ý, debug cần ít thời gian hơn so với trước
○ Easy: được thiết kế sao cho dễ dùng dễ học
○ Short: Tối thiểu việc lặp code Các tham số truyền vào có nhiều tính năng Ít bugs
○ Robust: hiệu năng mạnh mẽ, có thể tương tác API qua docs
Trang 93.2 Front-end
JavaScript và các thư viện đi kèm đã tạo nên một hệ thống mạnh mẽ Các thư viện thường xuyên được phát triển và thêm mới giúp người dùng thoải mái lựa chọn các tính năng
Trong số các framework của JavaScript, nổi bật lên trên tất cả là ReactJS ReactJS đã được nhiều công ty đưa vào sử dụng hiện nay như Facebook, Netflix, AirBNB, Dropbox, IMDb, Paypal, ReactJS được hỗ trợ mạnh mẽ với hàng triệu nhà phát triển và đặc biệt được sự hậu thuẫn của Facebook
Nhóm đã sử dụng ReactJS với các ưu điểm: Dễ dàng sử dụng, sử dụng components tiện lợi, dễ dàng tái sử dụng với JSX, các công cụ phát triển với một cộng đồng mạnh mẽ,
React hỗ trợ tạo các giao diện người dùng tương tác một cách dễ dàng Thiết kế các khung nhìn đơn giản cho từng trạng thái trong ứng dụng và React sẽ cập nhật và kết xuất đúng các thành phần phù hợp khi dữ liệu của bạn thay đổi Các khung nhìn được khai báo làm cho mã nguồn dễ hiểu và dễ gỡ lỗi hơn
React giúp xây dựng các thành phần đóng gói quản lý trạng thái của riêng chúng, sau
đó kết hợp chúng lại để tạo các UI phức tạp Vì logic thành phần được viết bằng JavaScript, ta có thể dễ dàng truyền dữ liệu qua ứng dụng và tránh trạng thái ra khỏi DOM
Yêu cầu môi trường:
● NodeJS >= 13.0.1
● npm >= 6.12.0
● ReactJS >= 16.8.0
3.3 Học máy (Machine Learning)
Nhóm sử dụng mô hình Exponential Smoothing - dự đoán xu hướng dựa trên chuỗi thời gian với một chuỗi các điểm dữ liệu, được đo theo từng khoảnh khắc thời gian liền nhau theo một tần suất thời gian thống nhất
Trang 114 Các chức năng đã cài đặt
4.1 Tìm kiếm, khám phá chuyến đi
Người dùng có thể tìm kiếm, khám phá các chuyến đi bằng cách nhập các từ khóa tại
ô “Search” Hệ thống sẽ hiển thị các chuyến đi có liên quan đến từ khóa mà người dùng đã nhập Từ đó người dùng có thể chọn xem các chuyến đi và đăng ký tham gia chuyến đi phù hợp
Giao diện tìm kiếm chuyến đi từ Hà Nội đến Đà Nẵng được hiển thị như hình dưới đây
Hình 1: Giao diện hệ thống “Tìm kiếm, khám phá chuyến đi”
4.2 Đăng ký tham gia chuyến đi
Người dùng có nhu cầu đăng ký tham gia chuyến đi Đầu tiên, người dùng chọn chuyến đi mình muốn đăng ký tham gia Ví dụ, người dùng chọn “chuyến đi từ Hà Tĩnh đến Trà Vinh”
Trang 12Hình 2: Giao diện hệ thống hiển thị các chuyến đi đã đăng tải trên hệ thống
Sau khi người dùng ấn chọn chuyến đi, hệ thống hiển thị giao diện các thông tin về chuyến đi Người dùng muốn tham gia chuyến đi thì cần điền các thông tin vào
Hình 3: Giao diện hệ thống đăng ký chuyến đi
Sau khi chọn xong, người dùng sẽ tiến hành xác nhận lại thông tin và sẽ được điều hướng đến trang thanh toán
Trang 13Hình 4: Giao diện trang thanh toán
Người dùng cũng có thể quản lý các chuyến đi đã đặt và có thể bình luận về các
chuyến đi
Hình 5: Giao diện quản lý chuyến đi của người dùng
4.3 Quản lý trên hệ thống
Đây là màn hình quản lý các tài khoản, bến xe, chuyến xe, vé và phân tích dữ liệu của admin Admin sẽ có các quyền xem chi tiết tài khoản, chỉnh sửa mật khẩu của tài khoản, và xóa các tài khoản, bến xe, chuyến xe và vé trên hệ thống
Trang 14Hình 6: Giao diện quản lý tài khoản trên hệ thống
Admin có thể quản lý các bến xe
Trang 15Hình 8: Quản lý chuyến xe
Ngoài ra, admin có thể xem các dữ liệu dự đoán cho các nhà xe để có chiến lược hiệu quả hơn
Trang 16Ngoài ra, tài liệu demo có đính kèm link video giới thiệu nhằm mô tả rõ hơn về các chức năng đã cài đặt
● Màn hình người dùng:https://www.youtube.com/watch?v=rHrnhwhKX_Q
● Màn hình admin:https://www.youtube.com/watch?v=vg1SflUZhCY&t=7s
Trang 17Phụ lục: Mục lục hình ảnh
Hình 1: Giao diện hệ thống “Tìm kiếm, khám phá chuyến đi” 8
Hình 2: Giao diện hệ thống hiển thị các chuyến đi đã đăng tải trên hệ thống 9
Hình 3: Giao diện hệ thống đăng ký chuyến đi 10
Hình 4: Giao diện trang thanh toán 11
Hình 5: Giao diện quản lý chuyến đi của người dùng 11
Hình 6: Giao diện quản lý tài khoản trên hệ thống 12
Hình 7: Quản lý bến xe 12
Hình 8: Quản lý chuyến xe 13
Hình 9: Phân tích dữ liệu hệ thống 13
