Travel start xây dựng hệ thống quản lý bến xe

ĐẠI HỌC QUỐC GIA TP.HCM TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA KHOA HỌC VÀ KỸ THUẬT MÁY TÍNH LUẬN VĂN TỐT NGHIỆP ĐẠI HỌC TRAVEL START - XÂY DỰNG HỆ THỐNG QUẢN LÝ BẾN XE Ngành : KHOA HỌC MÁY TÍNH HỘI ĐỒNG : KHOA HỌC MÁY TÍNH GVHD : Ths Trương Quỳnh Chi GVPB : Ths Nguyễn Đình Thành -o0o SVTH : Cao Văn Tín 1814334 TP HỒ CHÍ MINH, 01/2023 ĐẠI HỌC QUỐC GIA TP.HCM -TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA:KH & KT Máy tính BỘ MƠN: HTTT CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập - Tự - Hạnh phúc NHIỆM VỤ LUẬN ÁN TỐT NGHIỆP Chú ý: Sinh viên phải dán tờ vào trang thuyết trình HỌ VÀ TÊN: Cao Văn Tín _ MSSV: 1814334 NGÀNH: Khoa học Máy tính LỚP: MT18KH06 Đầu đề luận án: Xây dựng hệ thống quản lý bến xe Nhiệm vụ (yêu cầu nội dung số liệu ban đầu): Luận văn yêu cầu việc phân tích, thiết kế, xây dựng, kiểm thử triển khai hệ thống hỗ trợ quản lý bến xe Đề tài yêu cầu thiết kế chức giúp người dùng đặt vé xe, người quản lý bến xe quản lý tốt hơn, nhà xe xếp chuyến giá vé hiệu Ngồi cịn giúp tài xế quản lý danh sách chuyến tốt Đề tài chia làm giai đoạn sau: Giai đoạn ĐCLV: - Tìm hiểu phân tích chức cần thiết cho việc vận hành, quản lý bến xe khách liên tỉnh - Tìm hiểu ứng dụng liên quan - Tìm hiểu cơng nghệ liên quan - Phân tích thiết kế thực hệ thống Giai đoạn LVTN: - Hiện thực hệ thống, đánh giá triển khai Ngày giao nhiệm vụ luận án: 10/01/2022 Ngày hoàn thành nhiệm vụ: 10/01/2023 Họ tên giảng viên hướng dẫn: Phần hướng dẫn: Ths Trương Quỳnh Chi Nội dung yêu cầu LVTN thông qua Bộ môn Ngày tháng năm CHỦ NHIỆM BỘ MƠN GIẢNG VIÊN HƯỚNG DẪN CHÍNH (Ký ghi rõ họ tên) (Ký ghi rõ họ tên) PHẦN DÀNH CHO KHOA, BỘ MÔN: Người duyệt (chấm sơ bộ): Đơn vị: _ Ngày bảo vệ: Điểm tổng kết: _ Nơi lưu trữ luận án: _ LỜI CAM ĐOAN Chúng xin cam đoan tảng nhóm tự nghiên cứu phát triển hướng dẫn Ths Trương Quỳnh Chi Các nội dung nghiên cứu, kết đề tài trung thực chưa cơng bố hình thức trước Nếu có phát gian lận nào, chúng tơi xin hồn tồn chịu trách nhiệm nội dung chấp nhận hình thức kỷ luật trước Ban chủ nhiệm Khoa Khoa Học Và Kỹ Thuật Máy Tính Ban Giám Hiệu Trường Đại Học Bách Khoa, ĐHQG Thành Phố Hồ Chí Minh LỜI CẢM ƠN Lời đầu tiên, em xin gửi lời cảm ơn chân thành đến cô Trương Quỳnh Chi hỗ trợ tơi suốt q trình thực Luận văn tốt nghiệp Cô Trương Quỳnh Chi giúp em phương hướng, bàn bạc, đưa góp ý cho hệ thống em ngày hồn thiện Em xin gửi lời cảm ơn đến quý thầy cô trường ĐH Bách Khoa, đặc biệt thầy cô Khoa Khoa học Kỹ thuật Máy tính tận tình dạy cho chúng em nhiều kiến thức, học bổ ích Những kiến thức, học khơng em áp dụng để hồn thành đề tài mà hành trang đồng hành với em suốt quãng đường lại Cuối cùng, em xin gửi lời cảm ơn tới quý thầy cô hội đồng luận văn dành thời gian đánh giá đề tài em Trong trình thực đề tài, thân em nhiều hạn chế kiến thức, thời gian kinh nghiệm thực tiến nên em khó lịng tránh khỏi sau sót đáng tiếc trình thực Đề cương Luận văn, em mong nhận được đánh giá đóng góp từ q thầy Một lần xin gửi lời cảm ơn chân thành Trân Trọng Nhóm thực đề tài TÓM TẮT ĐỀ TÀI “Travel Start - Hệ thống quản lý bến xe” hệ thống cung cấp dịch vụ để quản lý bến xe Hệ thống hướng đến phục vụ lợi ích hành khách, quản lý bến xe, tài xế nhà xe để nâng cao chất lượng dịch vụ Nhằm hướng đến lợi ích bến xe, hệ thống cung cấp chức thông qua giao diện web Qua đó, người quản lý hệ thống quản lý thông tin tài xế, nhà xe Nhà xe quản lý thời gian vào bến xe từ điều chỉnh tuyến đường, khuyến mãi, giá tuyến xe Hệ thống hỗ trợ tài xế quản lý thời gian hiệu nhờ vào lịch trình vào bến xe Nhằm hướng đến lợi ích hành khách, hệ thống cung cấp chức thông qua giao diện web Người dùng qua dễ dàng chọn xem tuyến xe, chỗ ngồi phù hợp, đặt chỗ hủy vé Để hồn thành đề tài này, tơi tiến hành thực hiện: • Nghiên cứu nghiệp vụ có liên quan đến quản lý bến xe khảo sát hệ thống liên quan đến quản lý bến xe • Lên danh sách đặc tả chức cần thiết hệ thống • Tìm hiểu việc mơ tả hệ thống thơng qau sơ đồ usecase • Mơ tả giao diện hệ thống Figma • Tìm hiểu cơng nghệ tiến hành thực hệ thống: - Website biết ReactJs, NodeJs, MySQL • Triển khai, kiểm thử đánh giá hệ thống • Viết báo cáo TĨM TẮT CHƯƠNG Chương 1: Tổng quan đề tài Giới thiệu tổng quan, trình bày ý nghĩa mục tiêu đề tài, nội dung thực đồng thời giới hạn khuôn khổ đề tài Chương 2: Kiến thức tảng Giới thiệu kiến thức tảng, công nghệ dùng để thực hệ thống như: framework, thư viện, dịch vụ triển khai hệ thống áp dụng để thực triển khai hệ thống Chương 3: Phân tích hệ thống Trình bày đánh giá hệ thống, ứng dụng tương tự có thị trường từ đưa đặc tả, phân tích tính có hệ thống Chương 4: Thiết kế hệ thống Mô tả thiết kế hệ thống kiến trúc tổng thể, sở liệu Chương 5: Hiện thực hệ thống: Giới thiệu thư viện, framework có sử dụng hệ thống, cách thức thực luồng thực thi thông qua việc mô tả giao diện hệ thống Đồng thời trình bày giao diện hệ thống dạng hình ảnh tiêu đề giúp có nhìn tồn diện hệ thống Chương 6: Kiểm thử: Trong chương này, tơi trình bày khía cạnh kiểm thử trình phát triển ứng dụng đồng thời giới thiệu Katalon Stuidio Chương 7: Triển khai đánh giá hệ thống Triển khai hệ thống thông qua thông qua tảng, sau đánh giá hệ thống tìm cách nâng cao hiệu suất hệ thống Chương 8: Tổng kết, đánh giá hướng phát triển đề tài Tổng kết lại kết đạt suốt trình thực đề tài từ đánh giá hệ thống thông qua ưu điểm khuyết điểm, đưa hướng phát triển hệ thống tương lai MỤC LỤC LỜI CAM ĐOAN LỜI CẢM ƠN TÓM TẮT ĐỀ TÀI TÓM TẮT CHƯƠNG MỤC LỤC DANH SÁCH HÌNH ẢNH 12 DANH SÁCH BẢNG 14 Chương 1: Giới thiệu đề tài 16 1.1 Tổng quan 16 1.2 Ý nghĩa đề tài 16 1.2.1 Ý nghĩa thực tiễn .16 1.2.2 Ý nghĩa học thuật 17 1.3 Mục tiêu 17 1.4 Giới hạn đề tài 17 Chương 2: Kiến thức tảng 18 2.1 Front-end 18 2.1.1 ReactJs .18 2.1.2 Redux 19 2.2 Back-end 21 2.2.1 Nodejs 21 2.2.2 Expressjs 21 2.3 Database 21 Chương 3: Phân tích hệ thống 23 3.1 Khảo sát hệ thống 23 3.1.1 Hệ thống School Bus Management Platform [4] 23 3.1.2 Hệ thống Vexere[5] 23 3.1.3 Phần mềm quản lý bến xe – Bến xe điện tử AN VUI .24 3.1.4 So sánh hệ thống khảo sát 25 3.2 Đặc tả hệ thống 26 3.3 Usecase Diagram .29 Chương 4: Thiết kế hệ thống 53 4.1 Cơ sở liệu 53 4.1.1 ERD quan hệ .53 4.1.2 ERD thực thể .54 4.1.3 Mô tả ERD chi tiết 55 Chương 5: Hiện thực hệ thống 63 5.1 Kiến trúc hệ thống 63 5.2 Quản lý mã nguồn Github 63 5.3 Công nghệ, thư viện sử dụng 64 5.4 Cấu trúc mã nguồn 66 5.4.1 Ứng dụng web 66 5.4.2 Back-end 67 5.5 Giao diện hệ thống 68 5.5.1 Giao diện trang chủ Hành khách 68 5.5.2 Giao diện người quản lý bến xe 80 5.5.3 Giao diện chủ nhà xe 90 5.5.4 Giao diện tài xế 96 Chương 6: Kiểm thử 98 Chương 7: triển khai đánh giá hệ thống 101 7.1 Triển khai .101 10 Chương 5: Hiện thực hệ thống Tại trang lịch sử chạy, ta chọn “Quay lại trang quản lý tài xế” để trở lại trang trước, trang quản lý tài xế, nhà xe nhấn vào “Thêm tài xế” để thêm tài xế, giao diện thêm tài xế hình 61 Hình 61: Giao diện trang tạo tài xế Để quản lý phương tiện nhà xe, chọn mục “Tài nguyên”, sau chọn “Quản lý phương tiện” Giao diện quản lý phương tiện hình 62 Hình 62: Giao diện trang quản lý phương tiện 92 Chương 5: Hiện thực hệ thống Tiếp theo, nhà xe vào mục “Tuyến đường” chọn “Quản lý tuyến đường” danh sách chuyến có nhà xe Giao diện quản lý tuyến đường hình 63 Hình 63: Giao diện trang quản lý tuyến đường Để thêm chuyến đi, nhà xe chọn “Thêm” lên giao diện trang thêm chuyến Giao diện trang thêm tuyến hình 64 Hình 64: Giao diện trang tạo chuyến 93 Chương 5: Hiện thực hệ thống Để quản lý danh sách hành khách, nhà xe vào mục “Hành khách” chọn “Quản lý vé” Giao diện quản lý hành khách hình 65 Hình 65: Giao diện trang quản lý hành khách Tại trang quản lý hành khách, ta chọn ngày khởi hành, chọn tài xế danh sách chuyến danh sách hành khách chuyến Để gửi vé cho hành khách, nhà xe chọn mục “Gửi vé” Giao diện trang gửi vé cho hành khách hình 66 Hình 66: Giao diện trang gửi vé cho hành khách 94 Chương 5: Hiện thực hệ thống Ngồi ra, nhà xe tạo mã giảm giá để cạnh tranh với nhà xe khác hệ thống Để tạo mã giảm giá, nhà xe chọn mục “Mã giảm giá” để thêm mã giảm giá Giao diện trang quản lý mã giảm giá nhà xe hình 67 Hình 67: Giao diện trang quản lý mã giảm giá nhà xe Để thêm mã giảm giá, nhấn vào mục “Thêm mã giảm giá” Giao diện trang thêm mã giảm hình 68 Hình 68: Giao diện trang thêm mã giảm giá nhà xe 95 Chương 5: Hiện thực hệ thống 5.5.4 Giao diện tài xế Tại trang đăng nhập, tài xế dùng tài khoản có quyền chủ nhà xe cung cấp để đăng nhập vào hệ thống quyền tài xế Sau đăng nhập thành công, ta giao diện hình 69 Hình 69: Giao diện trang chủ tài xế sau đăng nhập Tại trang này, tài xế chọn “Xuất phát” / “Về bến” mục trạng thái để thơng báo tình trạng cảu chuyến Ngồi ra, tài xế cịn chọn “Danh sách” mục Danh sách hành khách để quán lý thông tin hành khách Giao diện quản lý hành khách hình 70 Hình 70: Giao diện trang quản lý hành khách tài xế 96 Chương 5: Hiện thực hệ thống Để xem lại lịch sử chạy tài xế, chọn mục “Lịch sử chạy” Giao diện trang lịch sử chạy hình 71 Hình 71: Giao diện trang lịch sử chạy tài xế Hình 72: Giao diện trang thông tin cá nhân tài xế Để xem thông tin cá nhân tài xế, ta chọn mục “Thơng tin tài khoản” bên phía góc bên phải hình Giao diện trang thơng tin cá nhân tài xế hình 72 97 Chương 6: Kiểm thử Chương 6: Kiểm thử Kiểm thử trình quan trọng cần thiết hình thực phát triển hệ thống nhằm đảm bảo chức hoạt động xác phát hiện, sửa lỗi q trình phát triển ứng dụng Với mục đích tìm hiểu cơng nghệ kiểm thử thực tế sử dụng Tơi hướng đến việc tìm kiếm sử dụng công cụ kiểm thử tự động sử dụng nhiều Và tơi tìm hiểu Katalon Studion để thực việc kiểm thử tự động Katalon Studio công cụ kiểm thử tự động phát triển bới Katalon LLC Phần mềm xây dựng dựa khung tự động hóa nguồn mở Selenium, Appium với giao diện IDE chuyên dùng để kiểm thử ứng dụng web, api, Cung cấp cho người dùng có giao diện hốn đổi tạo nên trường hợp thủ nghiệm khác Tạo kiểm thử tự động để đánh dấu cú cú pháp hoàn thành mã Katalon Studio theo mơ hình đối tượng trang với thành phần GUI ứng dụng để ghi lại tiện ích lưu trữ kho đối tượng Các đối tượng làm việc thường xun Katalon Studio gồm có: • Test Cases: đặc điểm kỹ thuật đầu vào, điều kiện thực thi, quy trình thử nghiệm kết mong đợi xác định thử nghiệm thực để đạt mục tiêu thử nghiệm phần mềm cụ thể Katalon hỗ trợ thư mục “Test Cases”, nơi lưu trữ tất test cases kiểm thử • Test Suites: tập hợp test cases nhằm mục đích sử dụng để kiểm tra tính năng/ chương trình để thấy chương trình có số hành vi định Katalon hỗ trợ thư mục “Test Suites”, nơi lưu trữ tất test suite kiểm thử • “Object Respository” thư mục mà Katalon cấp để lưu trữ đối tượng trang Các đối tượng tổ chức hình 73 98 Chương 6: Kiểm thử Hình 73: Cấu trúc thư mục kiểm thử Katalon Đối với việc kiểm thử ứng dụng web, Katalon hỗ trợ bắt DOM thông qua WebRecoder, giúp tạo quy trình audomation đơn giản Đầu tiên chọn “Record Web”, sau nhập URL, nhấn Record , thực thao tác với web đối tượng cần bắt, cuối nhấn Save Script Hình 74: Record Web để tạo nhanh Test Case 99 Chương 6: Kiểm thử Các đối tượng bắt lưu “Object Repository” Katalon Studio hỗ trợ đổi tên đối tượng web để dễ theo dõi, bên cạnh cịn cho phép thêm bước giao diện Katalon Studio Code Hình 75: Đổi tên Object bắt Hình 76: Kết testcase 100 Chương 7: Triển khai đánh giá hệ thống Chương 7: triển khai đánh giá hệ thống 7.1 Triển khai 7.1.1 Nền tảng đám mây Sau xem xét nhiều tảng Azure, Vercel, Amazon Web Service, Tôi định lựa chọn Heroku làm mơi trường triển khai vì: • Hỗ trợ nhiều ngơn ngữ khác • Có nhiều tài liệu hướng dẫn • Triển khai đơn giản , tốn thời gian 7.1.2 DNS Server Namecheap nhà cung cấp tên miền lớn uy tín, cung cấp dịch vụ đăng ký chuyển đổi tên miền, ẩn thơng tin miền, chứng số (SSL Certificate), Vì định sử dụng Namecheap Tên miền hệ thống https://travelstart.space/home 7.2 Đánh giá hệ thống 7.2.1 Đánh giá Google PageSpeed Insignts Lighthouse Hiệu suất tải trang web vấn đề quan trọng liên quan đến trải nghiệm người dùng ứng dụng web Từ tơi tiến hành đánh giá hệ thống thơng qua trang web Google PageSpeed Insights Lighthouse dev tools trình duyệt Chrome Đầu tiên Google PageSpeed Insights Nó nhóm cơng cụ Google Inc Và thiết kế giúp tối ưu hiệu suất trang web Google PageSpeed Insights không đánh giá hiệu suất trang web mà đưa đề nghị để cải thiện tốc độ tải ứng dụng web Ngoài ra, tơi cịn sử dụng thêm Lighthouse hạn chế Google PageSpeed Insights Google PageSpeed Insights đánh giá trang web chưa đăng nhập Bên cạnh đó, Google pageSpeed Insights tạo đánh giá dựa dev tools Lighthouse trình duyệt chorme Sau tơi xin trình bày đánh giá ứng dụng web triển khai thông qua Google PageSpeed Insights 101 Chương 7: Triển khai đánh giá hệ thống Hình 77: Điểm đánh giá PageSpeed Insignts trang đăng nhập Hình 78: Điểm đánh giá PageSpeed Insignts trang chủ 102 Chương 7: Triển khai đánh giá hệ thống 7.2.2 Cải thiện hiệu suất hệ thống Một nguyên nhân gây giảm hiệu suất hệ thống việc component bị render nhiều lần props, state không đổi Để tránh bị render nhiều lần, tơi tiếp cận theo hướng như: • Tối ưu hàm state • Sử dụng hàm callback • Chia nhỏ file mã nguồn build React cách import lazy thay import thơng thường • Sử dụng kỹ thuật loading lazy hình ảnh không hiển thị view để giảm thời gian tải hình ảnh 103 Chương 8: Tổng kết, đánh giá hướng phát triển đề tài Chương 8: Tổng kết, đánh giá hướng phát triển đề tài 8.1 Đánh giá kết đạt 8.1.1 Đối với nhiệm vụ đề tài • Tìm hiểu nghiệp vụ tìm kiếm tính hữu ích để xây dựng hệ thống quản lý bến xe • Tìm hiểu vận dụng kỹ lập trình front-end website để tạo giao diện đẹp mắt, dễ sử dụng • Tìm hiểu vận dụng kỹ lập trình back-end để xây dựng kiến trúc có tính hiệu cao • Ứng dụng API cung cấp bên thứ gửi mail • Áp dụng kỹ thuật để triển khai nhanh hệ thống tảng heroku Bên cạnh cịn cấu hình tên miền • Thực đánh giá cải thiện hiệu suất ứng dụng web, đạt yêu cầu 50 điểm đánh giá Google PageSpeed Insights 8.1.2 Đối với sở lý thuyết công nghệ Để thực hệ thống, chúng em tìm hiểu cơng nghệ liên quan xem xét chọn công nghệ phù hợp để phát triển tảng Qua trình đó, chúng em có hội tìm tịi, học hỏi công nghệ phát triển web server cụ thể nhau: • Đối với web, chúng tơi sử dụng ReactJS kèm theo Redux cho việc quản lý state, cách triển khai ứng dụng React • Đối với server thực Node.js Express, sử dụng MySQL làm database lưu trữ thông tin, kèm theo tích hợp dịch vụ hỗ trợ để triển khai hệ thống : - Dịch vụ cung cấp tên miền NameCheap - Dịch vụ xác thực SSL đến từ Let’s Encrypt - Dịch vụ từ bên thứ 3: dịch vụ mail 8.1.3 Đối với quy trình phát triển phần mềm Từ tảng công nghệ, tiến hành thực bước để phát triển hệ thống: • Tìm hiểu ứng dụng khác vexere, The School Bus Management Platform, • Thiết kế giao diện người dùng figma • Thiết kế sở liệu 104 Chương 8: Tổng kết , đánh giá hướng phát triển đề tài • Hiện thực hệ thống thông qua tảng: - Ứng dụng web thực ReactJs - Database thực Node.js Express 8.2 Đánh giá ưu điểm, nhược điểm hệ thống 8.2.1 Ưu điểm • • • • Hành khách xem thông tin nhà xe, tuyến đường, đặt vé, hủy vé dễ dàng Cung cấp tính cho phép quản lý tốt Việc phân quyền hệ thống giúp quản lý nhân viên dễ dàng Thiết kế giao diện dễ nhìn, dễ sử dụng 8.2.2 Nhược điểm: Hệ thống nhiều khuyết điểm cần khắc phục với mục đích nâng cao chất lượng như: Các tính hệ thống cần có hiệu suất tốt hơn, chạy mượt Qua việc thực hệ thống, rút nhiều kinh nghiệm Trong tương lai nhóm chúng em muốn phát triển mở rộng hệ thống theo hướng sau: • Tích hợp nhiều API bên thứ ba tốn, nhắn tin, • Mở rộng thêm số tính khác: - Tính tuyển dụng: tổ chức, quản lý kế hoạch tuyển dụng quản lý ứng viên tốt - Tính đào tạo: tố chức, quản lý kể hoạch đào tạo bến xe - Thêm nhiều tiện ích đặt vé máy bay, - Mở rộng hệ thống nhiều tỉnh thành - Thêm trạm dừng chân cho tuyến đường để hành khách thõa mái việc chọn chuyến 105 TÀI LIỆU THAM KHẢO [1] Facebook React – A JavaScript library for building user interfaces URL: https://reactjs.org/ [2] Facebook Introducing JSX URL: https://reactjs.org/docs/introducing-jsx.html [3] mySQL URL: https://mauwebsite.vn/mysql-la-gi/ [4] School Bus Management Platform URL: https://schoolbus.educationapps.vic.gov.au/ [5] Hệ thống Verexe URL: https://vexere.com/ 106