Đồ án: Xây dựng ứng dụng tìm bãi đỗ xe ô tô Car Parking Finder - ĐH CNTT

Tải trọn bộ đồ án ứng dụng tìm kiếm bãi đỗ xe Car Parking Finder. Báo cáo gồm phân tích yêu cầu, thiết kế hệ thống, CSDL và công nghệ sử dụng.

• Tác giả: Huỳnh Quang Trung
• Người hướng dẫn: ThS. Nguyễn Công Hoàn
• Trường học: Trường Đại Học Công Nghệ Thông Tin, Đại Học Quốc Gia Tp. Hồ Chí Minh
• Chuyên ngành: Công Nghệ Phần Mềm
• Đề tài: Xây Dựng Ứng Dụng Tìm Kiếm Bãi Đỗ Xe Ô Tô (Car Parking Finder)
• Loại tài liệu: Đồ Án 2
• Năm xuất bản: 2022
• Địa điểm: Thành Phố Hồ Chí Minh

Tóm tắt

I. Tổng Quan Về Đồ Án App Tìm Kiếm Bãi Đỗ Xe Ô Tô

Đồ án ứng dụng tìm kiếm bãi đỗ xe là một giải pháp công nghệ tiên tiến nhằm giải quyết bài toán khó khăn của người lái xe hiện nay. Được phát triển tại Trường Đại Học Công Nghệ Thông Tin, TP.HCM, dự án này tập trung vào phân tích thực trạng và ứng dụng các công nghệ hiện đại để xây dựng ứng dụng mobile thực tế. Ứng dụng được thiết kế để hoạt động hiệu quả mà không yêu cầu quá nhiều về phần cứng hoặc phần mềm, đảp ứng nhu cầu cơ bản của người dùng trong việc tìm kiếm bãi đỗ xe hiệu quả. Dự án sử dụng mô hình V-model cho quá trình phát triển, đảm bảo chất lượng và độ tin cậy cao. Nhóm đã phân tích kỹ lưỡng các yêu cầu rõ ràng và lựa chọn công nghệ phù hợp để nâng cao trải nghiệm người dùng và tối ưu chi phí phát triển.

1.1. Nhu Cầu Thực Tế Của Dự Án

Thành phố Hồ Chí Minh đang đối mặt với vấn đề tắc đường do tìm kiếm bãi đỗ xe. Người lái xe thường mất nhiều thời gian lang thang tìm kiếm chỗ đỗ xe phù hợp, dẫn đến tăng lượng khí thải và ô nhiễm môi trường. Ứng dụng tìm kiếm bãi đỗ xe giúp giải quyết vấn đề này bằng cách cung cấp thông tin bãi đỗ xe thực time, tính năng đặt chỗ và chỉ dường tối ưu, từ đó tiết kiệm thời gian và chi phí cho người dùng.

1.2. Đối Tượng Sử Dụng Ứng Dụng

Đối tượng sử dụng chính của ứng dụng bao gồm: người lái xe ô tô cần tìm kiếm bãi đỗ xe, chủ sở hữu hoặc quản lý bãi đỗ xe muốn quản lý chỗ đỗ của họ, và các doanh nghiệp giao thông. Ứng dụng được thiết kế với giao diện thân thiện, dễ sử dụng cho tất cả người dùng có trình độ công nghệ khác nhau.

II. Công Nghệ Và Kiến Trúc Hệ Thống

Dự án car parking finder sử dụng các công nghệ tiên tiến và hiện đại để đảm bảo hiệu suất cao và trải nghiệm người dùng tốt. Phía client được phát triển bằng thư viện React, một framework JavaScript phổ biến cho phát triển ứng dụng mobile. Phía server được xây dựng trên nền tảng Node.js với Express framework, cho phép xử lý yêu cầu HTTP một cách hiệu quả. Toàn bộ quá trình phát triển sử dụng Visual Studio Code như công cụ chính, kết hợp với Notion để quản lý công việc. Cơ sở dữ liệu được thiết kế chi tiết với nhiều bảng dữ liệu liên kết nhau. Server được triển khai lên Heroku, cho phép truy cập API từ bất kỳ thiết bị nào.

2.1. Thuật Toán Và Bảo Mật Dữ Liệu

Ứng dụng sử dụng thuật toán Bcrypt để mã hóa mật khẩu người dùng, đảm bảo bảo mật cao cho tài khoản. JSON Web Token (JWT) được sử dụng để xác thực và phân quyền người dùng, cho phép kiểm soát truy cập chặt chẽ vào các API endpoint. Các thông tin nhạy cảm được mã hóa và truyền tải qua HTTPS để bảo vệ dữ liệu người dùng.

2.2. Kiến Trúc Hệ Thống Và API

Kiến trúc hệ thống được chia thành ba tầng chính: presentation layer (giao diện), business logic layer (xử lý nghiệp vụ), và data layer (lưu trữ dữ liệu). API được thiết kế theo RESTful style, cho phép client giao tiếp với server một cách đơn giản và hiệu quả. Mỗi endpoint yêu cầu xác thực dữ liệu hợp lệ trước khi trả về thông tin bãi đỗ xe.

III. Phân Tích Thiết Kế Và Hiện Thực

Giai đoạn phân tích thiết kế của dự án app tìm kiếm bãi đỗ xe bao gồm việc xây dựng sơ đồ use case, lược đồ hoạt động chi tiết cho từng chức năng, và thiết kế cơ sở dữ liệu toàn diện. Nhóm đã tạo sơ đồ người dùng (actor diagram) để xác định tất cả người dùng và vai trò trong hệ thống. Các use case chính bao gồm: đăng nhập/đăng ký, tìm kiếm bãi đỗ xe, đặt chỗ, quản lý thông tin xe, check-in/check-out, và quản lý bãi đỗ. Thiết kế giao diện được thực hiện bằng công cụ Figma, tạo ra mockup chi tiết cho mỗi màn hình ứng dụng, đảm bảo trải nghiệm người dùng nhất quán và trực quan.

3.1. Danh Sách Chức Năng Chính Của Hệ Thống

Hệ thống car parking finder cung cấp các chức năng chính như: tìm kiếm bãi đỗ theo vị trí hiện tại, lọc kết quả theo giá cả và loại bãi, đặt chỗ trực tuyến, chỉ dường tối ưu đến bãi đỗ, quản lý danh sách xe, lưu bãi yêu thích, gia hạn thời gian giữ xe, và xem báo cáo thống kê. Mỗi chức năng được thiết kế để hoạt động độc lập nhưng vẫn tích hợp với nhau.

3.2. Thiết Kế Cơ Sở Dữ Liệu Và Giao Diện

Cơ sở dữ liệu được thiết kế với nhiều bảng dữ liệu bao gồm: Users, Vehicles, Parking Lots, Bookings, Reviews. Các bảng liên kết với nhau thông qua foreign key để đảm bảo tính toàn vẹn dữ liệu. Giao diện ứng dụng được thiết kế thân thiện, với bố cục logic giúp người dùng dễ dàng điều hướng và sử dụng các tính năng chính.

IV. Kết Quả Thử Nghiệm Và Hướng Phát Triển

Sau khi hoàn thành phát triển ứng dụng tìm kiếm bãi đỗ xe, nhóm đã tiến hành kiểm thử đầy đủ với unit test và kiểm thử tích hợp để đảm bảo chất lượng phần mềm. Server đã được triển khai thành công lên Heroku, cho phép truy cập dữ liệu thông qua API từ bất kỳ thiết bị nào. Ứng dụng mobile hoạt động ổn định trên các thiết bị Android với hiệu suất tốt. Dù đã đạt được những kết quả tích cực, dự án vẫn có những hạn chế như: chưa tích hợp thanh toán trực tuyến, tính năng đánh giá bãi đỗ còn cơ bản, và chưa có phiên bản iOS. Hướng phát triển tương lai bao gồm: thêm tính năng thanh toán, cải thiện thuật toán tìm kiếm bãi đỗ gần nhất, mở rộng trên nhiều thành phố, và phát triển phiên bản iOS.

4.1. Ưu Điểm Và Thành Tựu Của Dự Án

Ứng dụng car parking finder mang lại nhiều ưu điểm như: giao diện thân thiện, tìm kiếm nhanh chóng, tiết kiệm thời gian người dùng, quản lý dễ dàng cho chủ bãi đỗ. Dự án đã thành công trong việc tích hợp công nghệ hiện đại, sử dụng mô hình phát triển chuyên nghiệp, và triển khai lên production một cách an toàn.

4.2. Hạn Chế Và Định Hướng Phát Triển Tương Lai

Hạn chế hiện tại bao gồm: chưa tích hợp payment gateway, tính năng thống kê còn đơn giản, chưa hỗ trợ iOS. Hướng phát triển gồm: thêm thanh toán online, cải thiện thuật toán tìm bãi, mở rộng sang các thành phố khác, phát triển web version, và tối ưu hiệu suất ứng dụng.

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

CHƯƠNG 1. Khảo sát hiện trạng 1. Nhu cầu thực tế đề tài Hiện nay, quá trình đô thị hóa, hiện đại hóa diễn ra dẫn đến việc sử dụng các phương tiện cá nhân tăng cao. Từ đó nhu cầu về tìm kiếm bãi đỗ xe khi đi ra ngoài là điều cần thiết của mọi người.

Các thành phố lớn phát triển hạ tầng chưa đồng đều, chưa xem trong hạ tầng bãi đỗ. Từ đó, ta thấy cơ sở hạ tầng và nhu cầu không thỏa mãn, dẫn đến việc khó khăn khi tìm kiếm bãi đỗ xe. Do đó, nhóm quyết định xây dựng phần mềm Tìm kiếm bãi đỗ xe. Khảo sát một số ứng dụng hiện có 1.

Parking Map - Bản đồ Offline bãi đỗ xe 1. Tổng quan Parking Map là một bản đồ về vị trí các bãi đỗ xe Ô tô tại địa bàn Thành phố Hồ Chí Minh và Thủ đô Hà Nội. Đặc biệt Parking Map có thể sử dung Offline mà không cần kết nối internet. Parking Map khởi động nhanh và gọn nhẹ rất thích hợp để các lái xe sử dụng để tra cứu bãi đỗ xe xung quanh khi cần thiết một cách nhanh chóng nhất.

Chức năng chính Xem bản đồ về vị trí các bãi đỗ xe 1 1. Tổng quan My Parking là dịch vụ được Viettel phát triển nhằm mục đích cung cấp cho người dùng thông tin về hiện trạng của các bãi đỗ xe theo thời gian thực; đồng thời cho phép người dùng dễ dàng đặt chỗ và thanh toán phí đỗ xe cho bãi đỗ xe mong muốn. Chức năng chính - Cung cấp thông tin thời gian thực về hiện trạng các bãi đỗ xe. - Cho phép người dùng dễ dàng tìm kiếm và thực hiện đặt chỗ.

- Hỗ trợ thanh toán với nhiều phương thức như Viettel Pay, SMS. - Giúp người dùng dễ dàng xem lịch sử đặt chỗ. - Tìm đường đi ngắn nhất đến bãi đỗ mong muốn một cách dễ dàng. Mục tiêu - Giúp chủ xe dễ dàng tìm kiếm và đặt chỗ giữ xe nhanh nhất, thuận tiện nhất.

- Chủ xe có thể dễ dàng thay đổi các thông tin về xe, cá nhân. - Chủ xe có thể theo dõi được lịch sử đặt chỗ cũng như những chỗ đã được đặt trước. - Chủ bãi đỗ xe dễ dàng kiểm soát được tình trạng đặt chỗ của bãi đỗ xe. - Giúp chủ bãi đỗ xe quản lý các bãi đỗ xe một cách thuận tiện nhất.

Đối tượng sử dụng - Chủ xe - Chủ bãi đỗ xe - Nhân viên bãi đỗ 3 1. Yêu cầu chức năng • Đối với chủ xe o Quản lý tài khoản (đăng nhập, đăng ký, xác thực số điện thoại bằng OTP, khôi phục mật khẩu, đổi mật khẩu) o Tìm kiếm bãi đỗ xe. o Chỉ đường đi đến bãi đỗ o Đặt chỗ o Quản lý danh sách xe o Kiểm tra lịch sử đặt chỗ. o Thêm bãi đỗ xe yêu thích o Gia hạn thời gian giữ xe o Đặt chỗ dài hạn • Đối với chủ bãi đỗ o Quản lý bãi đỗ xe (Thêm bãi đỗ bằng cách chọn trên Map) o Quản lý đặt chỗ o Quản lý tài khoản (đăng nhập, đăng ký, đổi mật khẩu, khôi phục mật khẩu).

o Xem báo cáo • Đối với nhân viên bãi đỗ o Quét mã QR kiểm tra thông tin o Kiểm tra lịch sử đặt xe. Yêu cầu phi chức năng • Yêu cầu về giao diện: - Giao diện thân thiện, bố cục hợp lý, dễ sử dụng. 4 - Giao diện thống nhất, đồng bộ, không gây bất ngờ cho người sử dụng. - Màu sắc, vị trí, hiển thị của các component có tính đồng bộ.

• Yêu cầu về độ tin cậy, bảo mật: - Có sử dụng phân quyền cho từng loại người dùng. - Dữ liệu tài khoản người dùng được bảo mật. - Dữ liệu không bị xóa hoàn toàn, có thể khôi phục lại. • Yêu cầu về độ tương thích: o Đối với web - IE11 / Edge - Firefox: 2 version gần nhất - Chrome: 2 version gần nhất - Safari: 2 version gần nhất - Opera: 2 version gần nhất - Electron: 2 version gần nhất o Đối với Mobile - Tương thích cả trên IOS và Android • Yêu cầu về khả năng phát triển: - Dễ dàng nâng cấp tính năng đã có nhờ vào sự hệ thống hóa trong khâu xử lý.

- Dễ dàng mở rộng khi có nhu cầu phát triển. • Yêu cầu về tính hiệu quả: - Hệ thống quản lý dữ liệu một cách logic. - Hiệu năng ổn định tránh gây khó chịu cho người dùng. CƠ SỞ LÝ THUYẾT, TỔNG QUAN CÔNG NGHỆ 2.

Thuật toán sử dụng 2. Thuật toán Bcrypt Để mật khẩu được an toàn ngay cả khi cơ sở dữ liệu của hệ thống bị rò rỉ, chúng ta cần băm mật khẩu trước khi sử dụng. Vì tính chất của hàm băm là cùng 1 đầu vào thì kết quả sẽ luôn cho ra 1 giá trị không đổi, việc sử dụng các thuật toán băm thông thường dễ bị kẻ tấn công suy ra bằng các phương pháp như Dictionary Attack, Rainbrow Table Attack, … Bcrypt là một thuật toán mã hoá mật khẩu đã được tạo ra bởi Niels Provos và David Mazières vào năm 1999, nó hoạt động dựa trên các thuật toán mã hóa Blowfish. Nhằm tạo ra sự khó khăn, giảm tốc độ khi giải mã để tìm ra mật khẩu của các cuộc tấn công, Bcrypt sẽ tạo ra các chuỗi mã hoá ngẫu nhiên sau mỗi lần tạo ra.

Bcrypt là sự kết hợp của cơ chế băm, yếu tố salt và stretching, cụ thể như sau: Cơ chế băm: - Giá trị băm không thể dịch ngược lại giá trị ban đầu. - Với cùng giá trị đầu vào, hàm băm luôn cho 1 kết quả đầu ra. - Đầu vào khác nhau sẽ cho các giá trị đầu ra khác nhau. Yếu tố salt: Giá trị đầu vào được thêm bởi 1 chuỗi ngẫu nhiên, giúp giảm bớt khả năng kẻ tấn công có dữ liệu được tính toán từ trước hoặc tốn nhiều thời gian để tìm ra hơn.

Stretching: Các máy tính hiện nay có tốc độ xử lý rất nhanh, vì thế cơ chế này sẽ giúp làm chậm quá trình băm dữ liệu hay còn gọi là tăng tải, khiến kẻ tấn công tốn nhiều thời gian để có được dữ liệu băm.1 Tốc độ băm của 1 số thuật toán phổ biến1 Bcrypt được chạy trên 2 pha: - Pha 1: Hàm EksBlowfishSetup được gọi để chuẩn bị cho quá trình băm với chi phí mong muốn, salt và mật khẩu dùng cho khởi tạo trạng thái của eksblowfish. Trong trường hợp mật khẩu không đủ tốt hoặc quá ngắn, nó sẽ được xử lý và tạo ra mật khẩu có độ dài lớn hơn. Mục đích chính của bước này là tăng cường sức mạnh của key để làm chậm tốc độ tính toán từ đó giảm tốc độ của kẻ tấn công.2 Mã giải thuật toán băm Bcrypt2 - Pha 2: Giá trị 192 bits OrpheanBeholderScryDoubt được mã hoá 64 lần sử dụng eksblowfish với chế độ ECB3. Đầu ra của pha này là giá trị cost và 128 bits salt được ghéo với kết quả vòng lặp mã hoá.

1 Nguồn: https://asecuritysite.com/encryption/bcrypt 2 Nguồn: https://auth0.com 3 ECB là viết tắt của: Block cipher mode of operation 7 Hình 2.3 Kết qủa cuối cùng của quá trình băm4 2. Công nghệ sử dụng 2. React Hình 2-4 Logo thư viện React5 ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website. Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client.

Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau. 4 Nguồn: https://asecuritysite.com 5 Nguồn https://reactjs.org/ 8 React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM. Trước khi đến cài đặt và cấu hình, chúng ta sẽ đi đến một số khái niệm cơ bản: - Virtual DOM: công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý.

React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật. React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều. Dữ liệu được truyền từ parent đến child thông qua props. Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi.

Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian. Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi về giao diện. Ví dụ như Facebook: trên Newsfeed của bạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share, comment liên tục thay đổi. Khi đó React sẽ rất hữu ích để sử dụng.

- Giới thiệu về JSX: JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Đặc điểm: Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript.

Safer: an toàn hơn. Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++. Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch. Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt.

Easier: Dễ dàng hơn. JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng (tham khảo tại https://jsx.io/) 9 - Giới thiệu về Components: React được xây dựng xung quanh các component, chứ không dùng template như các framework khác. Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác.

Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái. Mọi thứ React đều là component. Chúng giúp bảo trì mã code khi làm việc với các dự án lớn. Một react component đơn giản chỉ cần một method render.