Xây dựng ứng dụng tìm kiếm bãi đỗ xe ô tô (car parking finder)

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM HUỲNH QUANG TRUNG PHAN NGỌC QUANG ĐỒ ÁN XÂY DỰNG ỨNG DỤNG TÌM KIẾM BÃI ĐỖ XE Ơ TƠ (Car parking finder) TP HỒ CHÍ MINH, THÁNG 12 NĂM 2022 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM HUỲNH QUANG TRUNG – 19520317 PHAN NGỌC QUANG - 19522100 ĐỒ ÁN XÂY DỰNG ỨNG DỤNG TÌM KIẾM BÃI ĐỖ XE Ô TÔ (Car parking finder) GIẢNG VIÊN HƯỚNG DẪN ThS NGUYỄN CƠNG HOAN TP HỒ CHÍ MINH, THÁNG 12 NĂM 2022 LỜI CẢM ƠN Nhóm chúng em xin gửi lời cảm ơn chân thành tri ân sâu sắc đến cô hướng dẫn, tạo điều kiện cho nhóm chúng em hồn thành đồ án mơn Đồ án Trong vòng 11 tuần, qua buổi học, nhờ dẫn nhiệt tình cơ, chúng em tiếp thu kiến thức quan trọng, bổ ích góp ý chân thành để làm đồ án hoàn chỉnh Trong khoảng thời gian thực đồ án, chúng em học hỏi thêm nhiều kiến thức, kinh nghiệm, biết quy trình để tạo sản phẩm phần mềm Bên cạnh đó, chúng em xin cảm ơn bạn bè lớp động viên, thảo luận góp ý cho nhóm đồng thời khơi thêm nguồn động lực cho nhóm suốt q trình đầy khó khăn Mặc dù cố gắng hoàn thành báo cáo với tất nỗ lực song báo cáo nhóm chúng em chắn khơng tránh khỏi thiếu sót, chúng em mong nhận thơng cảm góp ý chân thành từ Nhóm em xin chân thành cảm ơn Thành phố Hồ Chí Minh, tháng 12 năm 2022 Nhóm gồm Huỳnh Quang Trung, Phan Ngọc Quang TĨM TẮT Đồ án với đề tài “Xây dựng ứng dụng tìm kiếm bãi đỗ xe” tập trung vào phân tích thực trạng ứng dụng công nghệ để từ xây dụng ứng dụng ứng dụng mobile sử dụng mà không yêu cầu nhiều phần cứng, phần mềm Đáp ứng nhu cầu ứng dụng tìm kiếm bãi đỗ xe Đề tài việc tìm hiểu thực trạng, đưa vấn đề cịn tồn đọng cải thiện Xác định mục tiêu, phạm vi đề tài chức cần có hệ thống Ngoài việc xử lý nghiệp vụ cho hệ thống, nhóm tìm hiểu, so sánh lựa chọn công nghệ phù hợp giúp nâng cao trải nghiệm người dùng, tối ưu chi phí phát triển triển khai Nhờ việc phân tích yêu cầu rõ ràng, thời gian phát triển ngắn yêu cầu, tính thay đổi, trình phát triển đề tài sử dụng mơ hình Vmodel cho việc xây dựng hệ thống Kết thu giai đoạn thiết kế kiến trúc hệ thống, sở liệu, giao diện thể sơ đồ người dùng, sơ đồ thiết kế sử dụng công cụ Figma Draw.io Trong giai đoạn thực hiện, client server phát triển song song sử dụng thư viện React cho client Node.js với Express framework cho server, công cụ phát triển Visual Studio Code công cụ quản lý công việc Notion Công việc kiểm thử unit test thực xuyên suốt trình phát triển kiểm thử tích hợp cuối giai đoạn Trong giai đoạn vận hành, server triển khai lên máy chủ Heroku, hồn tồn truy cập liệu thơng qua api từ thiết bị gửi yêu cầu có chứa trường xác thực liệu hợp lệ Phần cuối đồ án trình bày kết thực lên báo cáo, đưa kết luận hướng phát triển cho hệ thống tương lai Nội dung đồ án trình bày chương: - Chương 01: Tổng quan Trình bày sơ thực trạng, nhu cầu thực tế Xác định mục tiêu phạm vi đề tài - Chương 02: Cơ sở lý thuyết, tổng quan công nghệ Giớ thiệu giải thuật, công nghệ, tảng sử dụng đồ án - Chương 03: Phân tích thiết kế ứng dụng Phân tích yêu cầu, thiết kế, thực triển khai ứng dụng - Chương 04: Kết luận - Chương 05: Cài đặt thử nghiệm Những kết đạt sau kết thúc đồ án Những hạn chế, khó khăn q trình phát triển đồ án nêu hướng phát triển tương lai MỤC LỤC Chương 1.1 TỔNG QUAN Khảo sát trạng 1.1.1 Nhu cầu thực tế đề tài 1.1.2 Khảo sát số ứng dụng có 1.2 Mục tiêu .3 1.2.1 Đối tượng sử dụng 1.2.2 Yêu cầu Chương CƠ SỞ LÝ THUYẾT, TỔNG QUAN CÔNG NGHỆ 2.1 Thuật toán sử dụng 2.1.1 2.2 Thuật toán Bcrypt Công nghệ sử dụng 2.2.1 React .8 2.2.2 React Redux 10 2.2.3 Ant Design 12 2.2.1 Tailwindcss 13 2.2.2 Express.js 14 2.2.3 Firebase Storage 15 2.2.4 JSON Web Token .16 2.2.5 Vercel 18 2.2.6 Render 19 Chương PHÂN TÍCH THIẾT KẾ ỨNG DỤNG 21 3.1 Use case .21 3.1.1 Sơ đồ Use case 21 3.1.2 Danh sách Actors 23 3.1.3 Danh sách Use case 23 3.1.4 Đặc tả Use case 24 3.2 Activity diagram 41 3.2.1 Lược đồ hoạt động đăng nhập 41 3.2.2 Lượt đồ hoạt động đăng ký 42 3.2.3 Lược đồ hoạt động khôi phục mật .43 3.2.4 Lược đồ hoạt động cập nhật thông tin 44 3.2.5 Lược đồ hoạt động lưu bãi đỗ yêu thích .45 3.2.6 Lược đồ hoạt động quản lý danh sách xe 46 3.2.7 Lược đồ hoạt động tìm bãi đỗ .47 3.2.8 Lược đồ hoạt động đường đến bãi đỗ 48 3.2.9 Lược đồ hoạt động đặt chỗ 49 3.2.10 Lược đồ hoạt động Gia hạn thời gian giữ xe 50 3.2.11 Lược đồ hoạt động quản lý bãi đỗ 51 3.2.12 Lược đồ hoạt động check in, check out 52 3.2.13 Lược đồ hoạt động Xem báo cáo thống kê .53 3.2.14 Lược đồ hoạt động Cài đặt chung 53 3.3 Thiết kế sở liệu 54 3.3.1 Sơ đồ ERD 54 3.3.2 Mô tả chi tiết .54 3.4 Thiết kế giao diện 60 3.4.1 Sơ đồ liên kết hình 60 3.4.2 Danh sách hình .61 3.4.3 Mơ tả chi tiết hình 63 Chương KẾT LUẬN 100 4.1 Kết đạt 100 4.2 Những ưu điểm hạn chế 101 4.2.1 Ưu điểm 101 4.2.2 Hạn chế .101 4.3 Hướng phát triển 102 Chương CÀI ĐẶT VÀ THỬ NGHIỆM 103 5.1 Môi trường cài đặt 103 5.2 Các thư viện, framework liên quan 103 5.3 Kiểm thử phần mềm 103 5.4 Hướng dẫn cài đặt 103 BẢNG PHÂN CÔNG CÔNG VIỆC 104 TÀI LIỆU THAM KHẢO 105 DANH MỤC HÌNH Hình 2.1 Tốc độ băm số thuật toán phổ biến Hình 2.2 Mã giải thuật toán băm Bcrypt Hình 2.3 Kết qủa cuối trình băm Hình 2.6 Các thành phần Redux .11 Hình 2.12 Logo Firebase Storage 15 Hình 2.13 Logo JSON Web Token (JWT) .16 Hình 2.14 Nội dung header JWT 17 Hình 2.15 Nội dung Reserved claims .18 Hình 2.16 Nguyên tắc chuỗi bí mật 18 Hình 3.1 Sơ đồ use case 22 Hình 3.2 Lược đồ hoạt động đăng nhập 41 Hình 3.3 Lược đồ hoạt động đăng ký .42 Hình 3.4 Lược đồ hoạt động khôi phục mật 43 Hình 3.5 Lược đồ hoạt động cập nhật thông tin .44 Hình 3.6 Lược đồ hoạt động lưu bãi đỗ xe yêu thích .45 Hình 3.7 Lược đồ hoạt động quản lý danh sách xe 46 Hình 3.8 Lược đồ hoạt động tìm bãi đỗ 47 Hình 3.9 Lược đồ hoạt động đường đến bãi đỗ 48 Hình 3.10 Lược đồ hoạt động đặt chỗ 49 Hình 3.11 Lược đồ hoạt động quản lý bãi đỗ 51 Hình 3.12 Lược đồ hoạt động check in, check out 52 Hình 3.13 Lược đồ quan hệ ERD 54 Hình 3.14 Sơ đồ liên kết hình dành cho chủ xe 60 Hình 3.15 Sơ đồ liên kết hình dành cho doanh nghiệp - chủ bãi đỗ xe 60 Hình 3.16 Sơ đồ liên kết hình dành cho nhân viên bãi đỗ 61 Hình 3.17 Màn hình splash .63 Hình 3.18 hình onboarding .64 Hình 3.19 Màn hinh đăng nhập .65 Hình 3.20 Màn hình đăng ký 67 Hình 3.21 Màn hình 68 Hình 3.22 Màn hình chi tiết bãi đỗ 70 Hình 3.23 Màn hình chọn xe 71 Hình 3.24 Màn hình chọn vị trí .72 Hình 3.25 Màn hình chọn thời gian 73 Hình 3.26 Màn hình chọn phương thức tốn 75 Hình 3.27 Màn hình xem lại thông tin đặt chỗ .76 Hình 3.28 Màn hình chi tiết vé đặt 77 Hình 3.29 Màn hình lịch sử đặt 78 Hình 3.30 Màn hình cá nhân 79 Hình 3.31 Màn hình đổi thơng tin cá nhân .81 Hình 3.32 Màn hình danh sách bãi xe u thích .82 Hình 3.33 Màn hình danh sách xe 83 Hình 3.34 Màn hình thêm xe 84 Hình 3.35 Màn hình đổi mật 85 Hình 3.36 Màn hình đăng nhập - doanh nghiệp 86 Hình 3.37 Màn hình đăng ký - doanh nghiệp 87 Hình 3.38 Màn hình danh sách bãi đỗ - doanh nghiệp 88 Hình 3.39 Màn hình dánh sách vé bãi đỗ - doanh nghiệp 90 Hình 3.40 Màn hình chi tiết bãi đỗ - doanh nghiệp .91 Hình 3.41 Màn hình thêm bãi đỗ - doanh nghiệp 93 Hình 3.42 Màn hình thơng tin – doanh nghiệp 94 Hình 3.43 Màn hình đổi mật – doanh nghiệp 95 Hình 3.44 Màn hình đăng nhập - nhân viên 96 Hình 3.45 Màn hình - nhân viên 97 Hình 3.46 Màn hình scan QR - nhân viên 98 Hình 3.47 Màn hình xem vé - nhân viên 99 ... tài ? ?Xây dựng ứng dụng tìm kiếm bãi đỗ xe? ?? tập trung vào phân tích thực trạng ứng dụng cơng nghệ để từ xây dụng ứng dụng ứng dụng mobile sử dụng mà không yêu cầu nhiều phần cứng, phần mềm Đáp ứng. .. cầu không thỏa mãn, dẫn đến việc khó khăn tìm kiếm bãi đỗ xe Do đó, nhóm định xây dựng phần mềm Tìm kiếm bãi đỗ xe 1.1.2 Khảo sát số ứng dụng có 1.1.2.1 Parking Map - Bản đồ Offline bãi đỗ xe Tổng... TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM HUỲNH QUANG TRUNG – 19520317 PHAN NGỌC QUANG - 19522100 ĐỒ ÁN XÂY DỰNG ỨNG DỤNG TÌM KIẾM BÃI ĐỖ XE Ô TÔ (Car parking finder) GIẢNG VIÊN