Luận văn a management system for a smart parking application

HO CHI MINH CITY UNIVERSITY OF TECHNOLOGYFACULTY OF COMPUTER SCIENCE AND ENGINEERING REPORT CAPSTONE PROJECT A MANAGEMENT SYSTEM FOR A SMART PARKING APPLICATION Major: COMPUTER ENGINEE

Overview

As the world’s population grows and personal transportation increases, more cars are on the road—even as vehicles become more fuel-efficient This expansion makes finding a parking space increasingly time-consuming, creating frustration for drivers and adding to fuel use and emissions The situation poses economic and environmental costs due to vehicles circling in search of spots To tackle these challenges, researchers and developers are turning to technology, especially cloud-based parking applications that provide real-time information on available parking spots and route guidance to those locations By helping drivers locate parking quickly, these apps reduce driving time, cut fuel consumption, and promote smarter urban mobility.

Problem statement

Parking, land use, and transportation are pivotal to urban mobility, with road transport holding a dominant role in Vietnam In 2019, road vehicles accounted for about 26.8% of goods and 63.1% of passengers, measured in ton-kilometers and passenger-kilometers In Ho Chi Minh City, the Planning and Architecture Department directed the Construction Planning Institute to review parking-lot plans across all 24 districts through 2025 The review covered 1,141 hectares designated for public parking, but none of these sites reportedly meet the Ministry of Construction’s standards.

Under current standards, parking facilities must be built in industrial parks, while urban areas may allow underground parking or multi-storey above-ground lots, with safety and coordination considerations for other constructions This framework limits available space and creates a citywide parking shortage, leaving drivers hunting for spots and wasting time The spillover of public transport and cars onto streets narrows roads and fuels traffic congestion, while many unauthorized parking sites reduce city revenue Therefore, deploying smart parking solutions is urgently needed to optimize space, reduce congestion, and curb revenue loss.

These are the main benefits provided by smart parking systems :

Searching for parking in dense urban areas during peak hours is both time-consuming and fuel-inefficient, as drivers waste valuable minutes circling for empty spots This endless parking hunt not only drains energy but also increases traffic congestion, since cars spend more time on the road looking for parking Adopting smarter parking strategies and real-time availability data can reduce search time, lower fuel consumption, and alleviate urban traffic.

• Environmental pollution: Increasing the volume of the vehicular exhaust as a result of searching for parking lots creates a negative impact on the environment.

• Traffic Safety: Drivers who are distracted while searching for parking lots without any guidance or intention are likely to cause accidents.

Smart parking system services streamline traffic flow, boosting urban mobility and expanding city capacity As streets move more efficiently, the area attracts more residents, higher economic activity, and new business opportunities.

Objective

The objectives of this project are:

• Storing data in cloud database: The data such as user information, parking lot details, and slot status will be sent to the Firebase and displayed in the mobile application These data can be used to identify the parking behavior of the users and provide solutions data.

To help drivers find a parking lot, cameras and hardware collect input data and continuously monitor the status of each parking slot This real-time data enables efficient space management and up-to-date availability Drivers can locate parking manually, or the mobile application can automatically identify and guide them to an open spot.

Project scope

Smart Parking helps users quickly find the most suitable parking area and can facilitate reservations as needed For parking administrators, the app provides tools to define and manage parking spaces Authenticated users can view and analyze their parking habits, manage them, and set optional preferences By leveraging cloud computing, the Smart Parking application enhances service delivery, ensuring scalable, reliable access to parking information, reservations, and management features.

2 STUDY OF SMART PARKING SOLUTIONS

Smart parking refers to the efficient management of parking spaces through the integration of cutting-edge technologies and intelligent systems, especially in densely populated urban areas where traditional parking methods waste time and space It leverages IoT sensors, real-time data, and automated guidance to optimize spot allocation, reduce circling, and improve occupancy This data-driven approach enables dynamic pricing, quicker navigation to available spots, and streamlined enforcement, helping cities cut congestion, lower emissions, and boost driver convenience In short, smart parking transforms a chaotic parking landscape into an organized, technology-enabled system.

Smart parking systems guide drivers to available spaces by using a real-time, data-driven approach that combines sensors, data analytics, and communication networks to broadcast parking availability By continuously monitoring occupancy and traffic flow, it directs motorists to open spots, reduces cruising for parking, and streamlines the overall parking experience This integrated solution improves space utilization, minimizes congestion, and delivers up-to-date information to users via apps and on-site displays.

Smart parking has long been a topic within the Internet of Things (IoT), with researchers and technology companies producing a wide range of studies and solutions, and several of these efforts have evolved into commercial products in recent years.

Some solutions of smart parking include:

• Users may get real-time info about free parking spots by sharing it with a cloud server that receives data from Internet of Things sensors.

• Using IoT sensors to precisely determine the quantity and location of open parking spots.

• By employing sensors to track parking space availability and guide cars to available spots, traffic congestion may be decreased and traffic flow can be improved.

• Make smart parking meters that can be paid with a credit card or a smartphone and that show the availability of spaces in real time.

• Tracking cars as they enter and leave a parking complex can help to improve security and optimize parking operations.

• To guarantee the safety of those who occupy parking garages, keep an eye on factors like temperature and air quality.

Compare smart parking using app with other parking solutions

In this project, we are making a smart parking system by developing a front-end application along with some operations on the car park using computer vision.

To evaluate efficiency in urban parking, this article compares the smart parking system with traditional parking solutions and examines the different methods it uses The accompanying image shows how distance and time affect searching for an available parking space, illustrating the potential savings offered by smart parking The system encompasses four types of parking approaches, each with unique features that impact automation, user experience, space utilization, and overall costs Understanding these types helps readers assess performance, scalability, and return on investment for smart parking deployments.

Blind parking is the traditional method for finding a parking space, where drivers rely on sight to spot an open spot, a process that can take a lot of time and require driving longer distances This approach often leads to conflicts when several drivers target the same slot, sometimes resulting in unexpected consequences In the accompanying graph, this method is depicted as the red line.

Parking Information System (PIS) publishes real-time parking availability to drivers within a defined area, typically via a display board or digital signage Drivers use this information to select a parking destination where spaces are available, guiding them to lots with open spaces The PIS helps drivers decide where to park based on current availability, and in the accompanying graph it is depicted as the green line.

BPIS, or Buffered Parking Information System, uses a buffering mechanism to reduce the conflict that occurs when multiple drivers chase a single parking space while broadcasting live availability data The system marks a parking spot as fully engaged whenever its open-slot count drops below a chosen threshold Selecting the right buffer threshold is challenging: too small a buffer leaves the multi-driver, single-space competition unresolved, while too large a buffer underutilizes parking spaces This trade-off is illustrated by the blue line in the graph.

An Internet of Things (IoT) smart parking system, also called a linked parking system, is a centralized parking management solution that lets drivers locate and book parking spaces using a mobile app By integrating real-time sensor data and wireless communication, it guides users to available spots, minimizes circling, and streamlines payment and reservation processes In diagrams illustrating the workflow, this method is often shown as a highlighted path, such as a yellow line, from search to reservation Implementing an IoT-powered smart parking system improves parking efficiency, enhances the user experience, and supports urban mobility by delivering accurate space availability, dynamic pricing, and seamless booking options.

Compared with other parking solutions, a smart parking system offers clear advantages such as optimized space usage, real-time occupancy data, automated billing, and smoother, faster experiences for drivers Inside the system, different entry and exit methods can be configured to serve distinct uses and goals For example, some setups prioritize driver throughput with license-plate recognition and barrier controls, others emphasize security through controlled access, while others enable flexible payments via mobile apps or contactless cards and leverage analytics for pricing and capacity planning By selecting and combining these methods, operators can tailor the system to the specific site and user needs while improving efficiency and revenue potential.

• Ground sensor technology at each slot to detect the availability of that slot.

• Overhead parking sensors or cameras, large parking areas or on-street parking can be viewed more efficiently from above.

• Camera for registration plate - enhancing security of the parking lot and is needed for processing parking lot cars information.

• Cloud platform - a web-based service platform that gathers and processes information of the car park and the traffic.

• Front-end - parking data is easily visible to the customer via website or app.

Our project research shows that smart parking systems typically use a mobile app together with simple sensors and cameras, a pattern common across leading providers That insight makes the development of a front-end application—the user-facing part of the smart parking solution—a straightforward choice The front-end concentrates on the affordable, high-impact elements available today, such as real-time parking availability, easy navigation, and reliable integration with sensors and cameras to optimize the parking experience.

• The availability of the technologies: The university can provide us the hardware needed for this project such as Jetson nano or Jetson Xavier.

• Training and using virtual data using computer vision.

• Experience in making front-end app using ReactJS.

• Creating a realtime database is doable.

• Having sensors in the project would be nice, but implementing them at the car park may be difficult and not allowed.

Deployment range of Smart Parking applications

Smart parking applications typically focus deployment in major cities where traffic congestion and related parking challenges are most acute They can extend their coverage to additional cities and broader geographic areas, expanding the potential user base and improving urban mobility This expansion also attracts tourists and foreign visitors arriving in regions or countries where the app is deployed.

Commercial apps

Smart parking Peasy

Japan is renowned for its cutting-edge technology, and this brief study focuses on the Japanese app Peasy Peasy earns a solid rating of 4.6 out of 5 on the Japanese App Store, signaling strong user reception Analyzing its features and advantages can shed light on how Japanese apps excel in design, functionality, and user experience, making Peasy a useful case study for understanding technology trends in Japan.

Figure 2: The smart parking app Pease

When you launch the Peasy app, you land on the home page where the map of Minato City is displayed This behavior is expected since Peasy is a Japanese-based map app, not an international map app like Google Maps.

Figure 3 depicts the Peasy home screen, highlighting a convenient feature that allows users to search for parking lots without logging in Peasy requires login only once for actions like booking a slot or updating account information, reducing friction during parking searches and streamlining access to core features.

Outside the displayed map area, the app includes a small navigation button that, when clicked, reveals the user’s current location, helping both general users and researchers track their position The feature uses the device’s location services to accurately display a point on the map, and the accompanying image shows our current location in Vietnam.

Figure 4: Navigation button of Peasy makes it convenient for users to display their location

Peasy is a Japan-based mobile parking app, and to access its core features—such as booking a space or viewing parking lot details—you switch to the Japanese map The image below shows a parking lot I selected, with its details clearly displayed, including photos, operating hours, and pricing.

Figure 5 illustrates Peasy’s navigation button, which makes it easy for users to display their location and navigate efficiently However, the booking price is shown in the accompanying image, and it is clear that the cost rises as the booked time lengthens This demonstrates how Peasy pricing scales with duration, underscoring the importance of reviewing time estimates when planning a reservation.

Figure 6: Navigation button of Peasy makes it convenient for users to display their locationThis is in fact a good solution to let the user know the price before booking.

a Advantages

• Strong database storing a huge amount of parking lots data all over Japan, providing user lots of options.

• Besides parking lots owned by managers, parking lots on the street have code to be man- aged.

• Provides different ways of sign in/sign up such as Facebook, Line or Apple-ID.

• Search function can search places other than car parks.

• Parking lot is updated when driver scans the code on the on-street parking lot or when the manager updates the parking lot.

• Providing enough information for users and simple to use.

b Disadvantages

• Displaying a lot of parking lots at once in big cities like Tokyo causing lag in performance and inconvenience for users.

• Scanning the code to pay at outside parking lots requiring setting up equipment.

• User has to manually calculate the price based on hours when searching.

• Static interface makes it difficult for users to update information of the parking lot.

• The system does not seem to have cameras for car detecting and the management seems to be handle manually.

Figure 7: Too many data displayed causes extreme lags

Viettel My Parking

Viettel, the Vietnam Military Telecommunications Corporation, has developed a Smart Parking app for iOS and Android that operates exclusively in Ho Chi Minh City The application is presented alongside briefing images that showcase its interface and core features.

Figure 9: Fill in customer information for sign up and login page

Figure 10: Main screen and booking

Figure 11: Account management and notification

My Parking is a feature-rich Smart Parking app that includes secure login and sign-up with detailed customer information, along with account management features such as booking history, favorites, feedback, debt checks on parking fees, and access to support, plus logout and delete account options The main screen showcases an interactive map of Ho Chi Minh City with detailed places and roads, while the booking page provides parking-place data such as available slots, opening and closing times, guided routes, the ability to add car templates, save favorite parking spots, and the option to select parking periods and payment methods The app runs smoothly, though users may occasionally experience lag when booking slots update.

The downside of this app is payment issues Viettel forces users to use ViettelPay, a payment gateway developed by Viettel.

a Advantages

• App is developed by Viettel - a strong technology company in Vietnam giving the app reputaion and reliability.

• App even provides traditional parking lots besides smart parking areas.

• App has the auto-find nearest parking lot when searching.

Parking lot visualization outperforms Peasy by consolidating many on-screen nodes into a single aggregated node when the display is dense, which dramatically reduces rendering lag on mobile devices and prevents the screen from being overwhelmed with information This node merging delivers a smoother, more responsive experience on phones, improves readability in dense visualizations, and offers a scalable optimization for mobile users.

• App has a feature allowing user to extend the booking time.

• Paying is pre-paid and there are various ways of paying along with vouchers.

• App has the feature managing registration plate.

b Disadvantages

• No graphic diagram is shown, user may get confused when driving inside a complicated car park.

Capstone projects - AI-based assistant system for smart parking using edge com-

Front-end apps

Front-end applications aim to function reliably while delivering convenience and an excellent user experience Since the core features of the previous project have been thoroughly tested, we will shift our focus to enhancing UI/UX—prioritizing intuitive design, accessibility, and visually appealing interfaces that improve usability and overall customer satisfaction.

a Log in and sign up feature

Figure 13: Log in and sign up feature

b Booking and navigating feature

Figure 15: Routing feature Above are the images of the former project’s app Some implemented features or visually see in the images are:

• Get current location of user

• Display the list of parking lots

• Display the detals of the chosen parking lot such as price, status, address

c Other features

Figure 16 depicts the History feature, a UI component that presents the user’s past bookings in an interactive, touch-enabled list Users can quickly preview essential booking information and tap an entry to view full booking details, making it easy to review history and access detailed records with a single tap.

Figure 17: Add license plate and view user information

In the previous project, the license plate feature was incomplete and the system appeared to assume that each customer owns only one vehicle Additionally, the user information screen is not editable and lacks an edit option, making it difficult for users to update their personal details when needed.

d Admin site

In this part, we will focus on how well the management site of the project perform.

According to the previous project, the website's admin dashboard provides a tabular view of users, owners, bookings, and parking lots, with each row showing the object's essential information Admins can open detailed records and perform update or delete actions directly from the Action column using the corresponding buttons.

Database and APIs

Figure 23: Server machine specsAccording to them, their database can handle test dataset of 24 parking lots with 55 areas and 1000 users with good response time.

Figure 24 illustrates the API response times, showing that the APIs deliver very fast performance even when the database contains a huge amount of data This indicates excellent scalability and efficiency in handling large datasets.

Hardware

The hardware implementation focuses on running on an FPGA board with limited computational resources Consequently, the team developed algorithms that adapt input images to varying sizes and dimensions, enabling robust car detection in parking spaces with high performance and real-time capability, achieving high FPS.

a Advantages

• Mobile app is easy to use and realtime implemented.

• Admin site provides information of the parking lots such as statistics, charts, etc.

• APIs are high-performance with very fast response time.

• Huge amount of data in the database (more than 1000).

b Disadvantages

• Mobile app doesn’t have many features such as interactive diagram of a parking lot or managing multiple vehicles.

• Mobile app’s realtime implementation is poor and not optimised which can cause up to 5s delay in the worst case.

• Admin site provides information of the parking lots such as statistics, charts, etc.

3 BACKGROUND STUDY ON RELATED ISSUES

Edge computing

Edge computing is a distributed computing model that distributes the computing power and storage closer to data sources, with low delay in response time and saves bandwidth.

Edge computing traces its origins to Content Delivery Networks (CDNs), which were built in the late 1990s to deliver web and video content from edge servers located near users In the early 2000s, CDNs evolved to host applications and components at the edge, giving rise to early edge computing services such as real-time data aggregation.

Edge computing optimizes internet devices and web applications by bringing computing resources closer to data sources, reducing the need for long-distance communication between clients and servers, which lowers latency and bandwidth usage While this proximity boosts performance, implementing edge computing also introduces challenges in software infrastructure, security, privacy, efficiency, stability, and speed that must be addressed to realize its benefits.

Firebase

Introduction

Firebase is a Backend-as-a-Service (BaaS) platform that began as a Google-backed app development project created in 2011 by James Tamplin and Andrew Lee It was officially introduced in 2012, and Google acquired the platform about two years later.

Firebase originally started as a real-time database, and after its acquisition by Google it expanded into a comprehensive platform offering a suite of tools and services for developers Today, Firebase helps teams build high-quality apps, grow their user base, and monetize their work, all supported by Google's robust technical framework.

Firebase Authentication supports a range of sign-in options, including passwords, phone numbers, and social providers such as Google, Facebook, and Twitter You can manually integrate one or more of these methods into your app using the Firebase Authentication SDK, allowing you to tailor the authentication flow to your users.

• Real-time database: Data is instantly synced across all clients and is still accessible even when an app is not running.

• Hosting: A web app can be hosted quickly using Firebase Hosting thanks to content delivery networks all over the world being cached.

• Test lab: The application is tested on physical and virtual devices housed in Google’s data centers.

• Notifications: With Firebase, notifications can be sent without any additional coding.

This project will use the first two features: authentication for logging in and signing up and real-time database for storing user’s data.

Why Firebase ?

Below are the reasons why we chose Firebase as a cloud database for our project:

• Reliable and extensive database: Because Firebase is developed by Google, it offers powerful databases for creating online and mobile applications In this project, we are using Real-time Database.

With the Real-time Database, developers can build offline-capable apps that work without an internet connection Even when the app is offline, it can continue to operate and will synchronize data once connectivity is restored, while all changes are cached in the smartphone's memory for quick access.

Additionally, developers can specify the data permissions while utilizing a Real-time database, which is even another fantastic benefit of using Firebase.

Firebase offers a free start for new users by providing a no-cost free tier that lets developers build applications without spending money This beginner-friendly option makes it easy to kick off a project, giving newcomers a hands-on way to see how their app works in a real-world setting and learn core workflows without financial risk.

Free, cross-platform Firebase authentication helps maintain user identity to keep apps secure Backed by Google, Firebase Authentication is a standout feature in today’s security-conscious landscape, offering easy-to-integrate UI libraries, server-side APIs, and SDKs to verify users before they access a Firebase application.

Firebase authentication goes beyond traditional emails, passwords, and phone numbers by supporting federated identity providers This lets users sign into your app with Google, Twitter, GitHub, Facebook, and other popular services, delivering a streamlined login experience while maintaining security.

The Firebase SDK Authentication feature contains the following identity verifications:

– Email address and password authentication

– Verify users with federal identity provider integration

Firebase Realtime database

Firebase Realtime Database is a cloud-hosted NoSQL database offered by Google as part of the Firebase platform It is designed to store and synchronize data across users in real time, enabling instant updates and seamless collaboration This makes it especially suitable for applications requiring real-time interaction—such as chat apps, collaborative editing tools, and multiplayer games—where multiple users work with shared data simultaneously.

Key features of Firebase Realtime Database include:

• Real-time data synchronization: When data is updated, any connected client devices receive those updates in milliseconds, making it ideal for applications requiring real-time updates.

Firebase Realtime Database provides offline support that keeps your app usable even without an internet connection Users can continue to interact with data while offline, and any changes made locally are stored and queued for synchronization Once the device reconnects, those offline changes are automatically synchronized with the server, ensuring data consistency and a seamless user experience.

• JSON data model: It stores data in a JSON format, making it easy to work with for developers familiar with JavaScript.

• Serverless architecture: Developers can interact with the database directly from client- side code, eliminating the need for a separate backend server.

• Authentication and security: Firebase provides built-in authentication and security rules, allowing developers to control who has access to read or write data in the database.

Overall, Firebase Realtime Database simplifies the development of real-time applications by handling data synchronization and providing a scalable, serverless backend infrastructure.

Google Maps APIs

Introduction

Google Maps is an online mapping service that provides comprehensive data about locations worldwide In addition to standard road maps, it offers satellite and aerial imagery for many sites, giving users multiple perspectives of a place It also includes Street View, a collection of imagery captured from moving vehicles that allows ground-level exploration in numerous areas These features combine to make Google Maps a versatile tool for locating, researching, and navigating anywhere on the globe.

Google Maps, part of the broader online mapping platform, offers a range of features, including a route planner that provides directions for driving, walking, cycling, or using public transit to help you get from one place to another.

In this project, Google Maps APIs are implemented on the mobile app to help the costumers book, locate, navigate parking lots as well as searching any locations.

Advantages

• It is free to use.

• It is easy to use and navigate.

• It offers a variety of features such as turn-by-turn directions, street view, and public transit information.

• It is available on both desktop and mobile devices.

• It integrates with other Google products and services.

• It has high accuracy and reliability.

• It is constantly updated with new features and data.

• It is available in many languages.

• It has a wide user base.

• It is a powerful marketing tool for businesses.

Disadvantages

Google Maps can be data-intensive, especially when you frequently use features like Street View and real-time navigation This heavy data usage can quickly drain mobile data allowances, which may be a concern for users on limited data plans.

Constant use of GPS and navigation on smartphones can quickly drain the battery, especially during long trips To avoid outages, users should monitor how much battery navigation apps consume and adopt battery-saving strategies such as lowering screen brightness, using offline maps, and limiting continuous GPS tracking Effective battery management ensures reliable navigation and a smoother travel experience.

Privacy concerns arise when mapping systems collect location data, as users worry about who can access their movements and how that information may be used Although Google allows users to manage their location settings, many still fear potential repercussions from location data collection, such as data sharing or targeted use of personal information Clear, user-friendly privacy controls and transparent data practices can help ease these concerns and improve trust in location-based services.

Inaccurate or Incomplete Information: Although Google Maps strives to offer current and accurate data, occasional inaccuracies or gaps can occur, potentially causing misinformation and navigation errors.

Google Maps relies on a stable internet connection for essential features like searching for points of interest and receiving real-time traffic updates; in areas with poor connectivity, these functions may be unavailable or unreliable.

• Restricted Indoor Navigation: Although Google Maps is an excellent tool for outside nav- igation, it might not be as useful for huge indoor spaces like malls or airports.

• Competitive Pressure: Other mapping and navigation services compete with Google Maps.Users might discover more well-liked or feature-rich alternatives depending on where they are.

OpenStreetMap React Leaflet

Introduction

OpenStreetMap is a free, open map of the world built from volunteer-contributed data, making it a collaborative project that anyone can use, modify, and share under the Open Database License (ODbL) This open data approach enables diverse uses—from data visualization and navigation to humanitarian aid and disaster response—empowering developers, researchers, and organizations to access reliable geospatial information and contribute to a global, freely available map.

In this project, React Leaflet map is implemented on the admin web to assist the admins in locating and navigating parking lots.

Advantages

OpenStreetMap delivers accurate, comprehensive global mapping data, detailing highways, structures, landmarks, and other geographic features, with the map kept up to date and reliable thanks to a worldwide community of contributors who continuously update and improve the data.

OpenStreetMap provides map data under an open license that permits unrestricted access, download, and use, enabling anyone to tap into its geographic information This open licensing supports sharing, remixing, and collaborative work on map data, helping a global community contribute to and improve openly available geographic information.

OpenStreetMap offers worldwide coverage with mapping data for every nation and region, ensuring comprehensive mapping of both urban and rural areas Across the globe, users can rely on OpenStreetMap for their mapping needs, wherever they are.

OpenStreetMap thrives on community-driven updates powered by a dedicated group of volunteers who continually manage and improve the map Through crowdsourced contributions, users can add new features, revise existing data, and enhance map accuracy, keeping the dataset up to date This volunteer-led, collaborative approach guarantees ongoing evolution and enrichment of OpenStreetMap’s map data.

OpenStreetMap supports customizable map styles, allowing users to tailor the map’s appearance to their preferences By selecting color schemes, typefaces, and symbols, users can improve the map’s visual appeal and usability, making OpenStreetMap more flexible and easier to read.

Disadvantages

Integrating OpenStreetMap with React Leaflet can be complex, especially for beginners or developers who are new to React.js and Leaflet Achieving effective functionality requires a solid understanding of both technologies, including how React components interact with Leaflet maps, how to manage map state, and how to handle map events and layer configurations.

React Leaflet offers solid documentation, but it isn’t exhaustive and may not cover every use case or customization Practitioners often rely on community forums, GitHub issues, and hands-on experimentation to troubleshoot specific problems and implement more advanced features.

Rendering large datasets or complex overlays on maps can cause performance issues, especially on devices with limited resources like mobile phones or older computers To preserve a smooth user experience, careful performance optimization is often required.

Dependency management is a key aspect of working with React Leaflet, since it relies on external libraries like React and Leaflet Keeping track of these dependencies and ensuring compatibility across library versions can be challenging, especially when updating libraries This can lead to compatibility issues or version conflicts if updates are not managed carefully, so strategies such as pinning versions, following release notes, and performing compatibility tests help maintain smooth map functionality.

New developers may face a learning curve when integrating OpenStreetMap with React-Leaflet, particularly if they aren’t already proficient in React or Leaflet; that initial skill gap can slow development as teams learn the libraries’ APIs, map interaction patterns, and best practices needed to render and interact with maps effectively.

Although React Leaflet provides a solid starting point for building interactive maps, its feature set can be limited compared with other mapping libraries For projects that demand advanced capabilities, developers may need to extend React Leaflet or integrate additional libraries to meet specific requirements.

OpenStreetMap-based applications built with React Leaflet depend on an active internet connection to fetch map tiles, so their performance hinges on the uptime and reliability of OpenStreetMap servers When those servers are down or experience issues, tiles may fail to load or render slowly, which can degrade user experience and impact the overall functionality of the application.

While React Leaflet provides a reasonable level of customization, it may not offer the same flexibility as using Leaflet directly For more advanced customization, developers might need to bypass React Leaflet and interface directly with Leaflet to achieve complete control over maps, interactions, and custom layers.

REST API

Introduction

Representational State Transfer, or REST, is an architectural style for building web services that manage resources such as files, objects, and media components exposed by a device or system A web service that follows RESTful principles is described as RESTful and typically communicates through a uniform interface using standard HTTP methods like GET, POST, PUT, and DELETE to manipulate those resources This approach enables scalable, interoperable clients and servers across diverse platforms.

PUT, and HTTP verbs of GET can be used by RESTful web services to interact with necessary components.

This request has two pieces of information, just like any other to a REST API:

• The HTTP method GET This outlines the requested action for the resource from the client There are four fundamental HTTP requests that a client can submit:

2 POST: To create a new resource.

3 PUT: To edit or update an existing resource.

• The URL is https:// The destination resource is specified by the uniform resource identi- fier, or URI, which is contained in the URL.

Since the URL in this instance is the place where the API really communicates with the client, it is sometimes referred to as an endpoint.

After the request is received and verified, the host provides detailed information about the target resource The data is typically returned in JSON (JavaScript Object Notation), a lightweight, human-readable format that presents the resource’s entire contents in a structured, easy-to-use way.

Advantages

• Because of its familiarity and simplicity, REST API is simple to learn and comprehend.

• Resources may be easily accessed and complex applications can be organized with REST API.

• The HTTP proxy server and cache can be used to assist handle the heavy traffic.

• It makes it easier for new users to work on other programs, whether or not they are made with a specific purpose in mind.

• Call-outs from normal HTTP procedures can be used to recover requests and data.

• REST API is code-based and may be used to easily synchronize data with a website.

• Unlike SOAP-based web services, users may access the same standard objects and data model.

• Allows for format flexibility by serializing data in JSON or XML forms.

Disadvantages

• Absence of state: stateful techniques are necessary for the majority of online apps.

REST lacks built-in security enforcement, unlike SOAP, so it is best suited for public URLs rather than transmitting sensitive data between a client and a server.

Firebase Cloud functions

Firebase Cloud Functions is Google's serverless compute service within Firebase that lets developers deploy small pieces of backend code to automatically respond to events triggered by Firebase features and HTTP requests These functions are written in JavaScript, TypeScript, or other supported languages and run in a managed environment, eliminating the need to provision or manage servers.

Here are some key points about Firebase Cloud Functions:

Cloud Functions are event-driven backend code that runs in response to events from Firebase services They can be triggered by changes in the Realtime Database, new user sign-ups via Firebase Authentication, file uploads to Firebase Storage, and other events, allowing developers to define functions that automatically respond with custom logic to each occurrence This setup enables real-time processing, automation, and scalable serverless workflows without managing servers.

Cloud Functions provide automatic scaling, increasing or decreasing capacity in real time in response to workload to ensure efficient resource utilization and cost efficiency This serverless approach means developers don’t have to handle server provisioning or infrastructure maintenance, letting them focus on code and features while the platform manages the underlying resources.

Serverless architecture lets developers pay only for the compute resources used by their functions during execution, avoiding costs for idle server time This pay-as-you-go model makes Cloud Functions cost-effective, particularly for applications with fluctuating workloads By eliminating idle capacity, teams can scale efficiently and optimize spend as demand changes.

Cloud Functions seamlessly integrate with Firebase services and Google Cloud Platform (GCP), enabling developers to build sophisticated applications with ease By leveraging authentication, databases, storage, analytics, and machine learning within this unified ecosystem, teams can accelerate development and scale more efficiently.

• Flexible: Cloud Functions can be written in JavaScript, TypeScript, Python, Go, Java, or other supported languages, giving developers flexibility in choosing the language they are most comfortable with.

Overall, Firebase Cloud Functions enable developers to add powerful backend functionality to their applications without managing servers, allowing them to focus on building features and delivering value to users.

It also enables the creation of RESTful APIs by allowing developers to define HTTP-triggered functions that execute custom logic in response to incoming requests These functions handle common HTTP methods—GET, POST, PUT, DELETE, and more—and route each request to the appropriate endpoint, enabling flexible, scalable API design.

React native

Overview

React Native is a popular JavaScript-based framework for building native mobile apps on iOS and Android It enables developers to use a single codebase to create cross-platform, natively rendered applications that run on multiple platforms, boosting development speed and consistency across devices.

Facebook released React Native as an open-source project in 2015, and it quickly established itself as a top option among mobile development solutions Today, some of the world’s most popular apps—Instagram, Facebook, and Skype—are powered by React Native, showcasing the framework’s ability to deliver cross-platform mobile experiences In this post, we explore these examples in more detail and examine additional React Native–powered apps to illustrate its impact on the development landscape.

Advantages

Code reuse is a core advantage of React Native's cross-platform development, allowing developers to share up to 90% of code between iOS and Android and eliminating the need to write separate platform-specific code This extensive code reuse boosts productivity, accelerates app delivery, and reduces ongoing maintenance.

By mapping native development components 1:1 to React Native components and using JavaScript with native UI building blocks, the app delivers a native-like appearance and feel Because these building blocks are the same across platforms, the app looks and behaves consistently on both iOS and Android.

React Native's Live Reload feature provides instant feedback by updating the app as soon as code changes are saved, with the application automatically reloading whenever you modify the code You can also selectively reload only the altered sections to speed up the build and compilation process.

The React JavaScript Library is UI-focused and powers fast, responsive app interfaces in React Native Its component-based architecture makes it easy to build complex user interfaces and create visually stunning images.

React Native enables cost-efficient cross-platform mobile development, with savings of up to 40% on development costs It eliminates the need for separate iOS and Android teams by using a single codebase for both platforms Its extensive library of pre-built components accelerates development, helping you ship high-quality apps faster and more economically.

React Native offers a broad ecosystem of third-party plugins, including native modules and JavaScript-based solutions These plugins enhance app functionality and performance, often reducing or replacing the need for certain web view features and accelerating development.

React Native was built with the needs of the developer community in mind, making it a community-driven framework With more than 50,000 active contributors, it benefits from broad collaboration and shared expertise Facebook engineers continuously develop and update the platform, keeping it current and reliable This active ecosystem ensures users have accessible, knowledgeable support.

Disadvantages

React Native is relatively young compared with established iOS and Android development frameworks, which means its lifecycle methods haven’t been exhaustively evaluated This immaturity can lead to unanticipated or detrimental effects on app performance, as certain lifecycle hooks may behave unpredictably or introduce inefficiencies across platforms.

React Native’s status as an open-source framework and a JavaScript library introduces security risks that developers must manage, especially in apps requiring strong protection The framework’s fragility and JavaScript’s inherent quirks can lead to lower safety levels, necessitating extra security layers for sensitive use cases such as banking or financial services If safeguards aren’t robust, harmful code fragments could seriously compromise the app’s security characteristics Consequently, some developers may choose not to use React Native for financial applications.

• Complex UI: Many engineers believe that React Native isn’t the best option for applications that require a lot of interactions, intricate movements, screen transitions, or animations.

Even with React Native’s gesture responder system, developers still struggle to design screens that handle complex touch movements The challenge arises from the need to support a single API across platforms, as iOS and Android have substantial differences in their touch subsystems that complicate cross‑platform gesture handling.

React Native initialization delay is a common issue where the framework requires extra time to initialize the runtime before the first render, causing longer startup times Even on modern devices, this startup latency persists and is likely related to the slower launch of JavaScript threads, which delays the initial rendering.

Memory management in React Native can be challenging because the framework runs on JavaScript, which is not ideal for computationally intensive applications In these workloads, React Native often exhibits slower performance and reduced speed, and floating-point computations are handled inefficiently, leading to difficulties with memory utilization and overall efficiency.

React.js

Overview

Facebook created React.js, an open-source JavaScript toolkit, to simplify the complex process of building dynamic user interfaces A React-based UI is composed of components, each producing a discrete, reusable piece of HTML code.

Advantages

React offers easy learning with abundant training materials, tutorials, and documentation, so a JavaScript developer can quickly grasp it in a few days and start building online applications Often described as the view layer in the MVC paradigm, React is an open-source JavaScript UI library designed to simplify UI development While it may lack some features out of the box, its component-based architecture and robust ecosystem help developers accomplish tasks more efficiently and build scalable web applications.

Building dynamic web applications used to be challenging when it relied on HTML strings, requiring intricate coding React JS simplifies development by delivering more functionality with less code It uses JSX, a JavaScript syntax extension that blends HTML-like markup with JavaScript, making it easy to create reusable subcomponents This approach also produces cleaner, machine-readable code, improving maintainability and performance.

ReactJS applications are built from reusable components, with each component encapsulating its own logic and controls to render brief, reusable chunks of HTML that can be used anywhere in the app These components provide simple building blocks that ease development and maintenance, and their nested structure lets you compose complex user interfaces from smaller parts React’s virtual DOM optimizes updates by only changing the specific DOM components that need updates, rather than re-rendering the entire DOM, delivering faster performance for dynamic web apps.

ReactJS boosts performance by introducing a virtual DOM The DOM is a cross-platform programming API that works with HTML, XML, or XHTML The majority of developers encountered a performance lag when the DOM was modified, and ReactJS resolves this issue by adding the virtual DOM.

The complete React Virtual DOM lives in memory as a representation of the browser’s actual DOM Instead of writing directly to the DOM when building a component, React creates virtual components that map to the DOM and update it efficiently, delivering faster and smoother rendering performance.

React JS has gained popularity thanks to a robust collection of tools that simplify development and boost productivity Among these, React Developer Tools—browser extensions for Chrome and Firefox—enable developers to inspect the component hierarchies in the virtual DOM and to select individual components to review and edit their state and props.

Disadvantages

The rapid pace of development in technology brings benefits and drawbacks A key challenge is that the environment changes so quickly that many developers struggle to routinely pick up new skills Frequent upgrades require rapid adoption of new techniques, which can stretch resources and hinder implementation To stay competitive, professionals must embrace continuous learning, upskilling, and ongoing updates to keep their skill sets current.

ReactJS covers only the UI layer of an application, so to have a complete development toolkit for your project you’ll need to select additional technologies.

JSX as a barrier in ReactJS: JSX is a syntactic extension that allows mixing HTML and JavaScript inside React components Although it offers advantages such as declarative UI and streamlined component structure, many developers—especially beginners—find JSX difficult, citing a steep learning curve as a common obstacle.

Jetson Nano developer kit

For this project we chose the NVIDIA Jetson Nano Developer Kit—a compact yet powerful computer that can run multiple neural networks in parallel It supports on-device tasks such as image classification, object detection, segmentation, and speech processing, making it suitable for a range of AI applications We are using the 4GB Jetson Nano edition, whose specifications enable efficient edge AI performance.

• Processor: The Jetson Nano runs on a quad-core ARM Cortex-A57 64-bit @ 1.43 GHz.

• Display: The Jetson Nano supports HDMI 2.0 and DisplayPort (eDP 1.4).

• I/O: The Jetson Nano has four USB 3.0 ports, one USB 2.0 Micro-B port, two MIPI CSI-2 DPHY lanes, 40 GPIO pins, an HDMI 2.0 port, and a DisplayPort.

• Ethernet: The Jetson Nano supports Gigabit Ethernet and M.2 Key E for Wi-Fi support.

• Operating systems: The official operating system for the Jetson Nano is the Linux4Tegra, based on Ubuntu 18.04.

Why do we use the Jetson Nano developer kit for this project?

• We want to perform object detection in real-time, with low latency and high throughput.

• We have limited power consumption and budget constraints, and we need a small and cost- effective device.

• We have unreliable or no internet connectivity, and we need to run our models offline or on the edge.

• We have a simple and specific use case, such as monitoring an assembly line or counting objects, and we don’t need to detect many different classes of objects.

At first, we consider the two best options: Raspberry Pi 4 and Jetson Nano The table below shows the specifications of these computers :

Figure 25: Specifications of Raspberry Pi 4 and NVIDIA Jetson Nano

Both the NVIDIA Jetson Nano and the Raspberry Pi 4 are ARM-based single-board computers with 4GB of RAM and extensive peripheral connectivity, making them suitable for a range of embedded projects The main difference lies in GPU performance: the Jetson Nano uses a 128-core Maxwell GPU clocked at 921 MHz, which is more capable than the Broadcom VideoCore VI in the Raspberry Pi 4 This GPU edge translates into stronger AI vision performance, including image classification, image segmentation, and object detection, which are particularly valuable for smart parking applications such as detecting available parking spaces.

The whole system architecture

According to the factors needed for this project we listed above, we created a system archi- tecture below.

Figure 26: The smart parking app’s system architecture From the image above, we can divide the system into 3 parts: Hardware, software and mobile app.

• Database: Firebase, Firebase cloud functions, Realtime database

• Front-end application: ReactJS, React Leaflet and React Native

Setting up a Google Cloud project

Using Google Maps Platform begins with creating a dedicated project to manage services, credentials, billing, APIs, and SDKs This project is non-profit and intended solely for research purposes, and billing is not enabled.

To create a new project in Google Cloud Console, you must fill in essential fields such as the Project name, Project ID, Organization, and Location, as shown in Figure 2 After the project is successfully created, you can manage it in the project window shown in Figure 3.

Figure 27: Create project in Google Cloud Console

Figure 28: Project management window in Google Cloud Console

Firebase realtime database

In our project, the database plays a major role, and we chose Firebase, a Google-owned platform, to power it Firebase Realtime Database is a Backend-as-a-Service (BaaS) that differs from a traditional custom backend server by offering hosted, real-time data synchronization, built-in authentication, and scalable infrastructure out of the box This decision speeds up development, reduces maintenance, and enables seamless integration with other Firebase services to accelerate feature delivery.

Accelerates the development process Focus on the frontend business logic

Less control and flexibility More expensive than self-hosting Vendor lock in

More flexibility and control Lower infrastructure costs

Longer time to marketHigher engineering costsNeeds to manage the infrastructure

Setting up Firebase realtime database for Front-end applications and Firebase cloud functions are mostly identical to Google Maps with some configurations and adding API key.

To be able to read and write data in the Firebase realtime database, we must specify the rules.

Firebase Authentication, a service from Google's Firebase platform, makes it simple for developers to add user authentication to their apps It provides a range of SDKs and APIs that support signing in with passwords, phone numbers, and popular identity providers like Google, Facebook, and Twitter, among others.

Firebase Authentication handles the entire authentication process, including user sign-up, sign-in, and password resets, while securely managing user identities It provides features such as email verification, custom user attributes, and multi-factor authentication, and it integrates with other Firebase services like Firebase Realtime Database and Cloud Functions With Firebase Authentication, developers can quickly add secure authentication to apps without building complex authentication systems from scratch, saving time and effort while ensuring the security of user data.

This project uses two data types in the realtime database: user data and parking lot data Parking lot data is accessible to all users without authentication, while user data is sensitive and requires security, so we implement Firebase Authentication for user data To illustrate how Firebase Authentication creates and retrieves user data, two diagrams are provided below.

Figure 32: Sequence diagram for creating user data in Authentication and database

Figure 33: Sequence diagram for retrieving user data in Authentication and database

Implement REST API using Node.js and Firebase Cloud functions

How REST API works

REST APIs deliver a standardized representation of a resource's current state in response to client requests, providing all relevant details in a format chosen by the API In other words, REST APIs operate by processing requests for resources and returning clear, easily parsable information that clients can understand With a REST API, clients can add new resources to the server and modify existing ones, enabling straightforward creation and updates of data.

Implement Firebase Cloud functions as REST APIs

Response time is a critical metric that businesses must monitor closely, because delays can directly undermine the customer experience and, in turn, hurt the company’s performance When response times are fast, customers feel valued and confident, which boosts satisfaction, loyalty, and conversion; when they lag, frustration grows, engagement drops, and competitors seem more appealing Prioritizing latency reduction across channels—website, support, and product interactions—can deliver measurable gains in retention and revenue, making fast reaction time a strategic differentiator.

Here’s how we used Firebase Cloud Functions to create REST APIs:

HTTP-triggered Cloud Functions are serverless pieces of code that run in response to HTTP requests These functions receive incoming requests, process the provided data, and return appropriate responses to clients They can be configured to handle different HTTP methods and routes, enabling precise API behavior and routing By parsing request data, performing necessary operations, and signaling success or error states with meaningful status codes, developers can build scalable, event-driven APIs with minimal infrastructure management.

Handle HTTP requests inside Cloud Functions by using libraries like Express.js or the built-in HTTP features to parse incoming requests and extract parameters from the request body or URL query string Authenticate users if necessary, validating credentials before proceeding Then execute your custom business logic based on the parsed data and authentication status Finally, return the results to the client with appropriate responses.

After processing a request, Cloud Functions should return an HTTP response with the appropriate status code, headers, and payload This includes sending JSON or other data formats as required by the client, enabling clear, efficient communication between the serverless function and the client application.

• Deploy and configure: Deploy your Cloud Functions to Firebase and configure them to han- dle incoming HTTP requests Firebase provides tools and commands to deploy functions and set up routing.

By utilizing Firebase Cloud Functions in this way, we can create scalable and serverless REST APIs that integrate seamlessly with other Firebase services and Google Cloud Platform features. This approach allows us to focus on building the API’s functionality while Firebase handles the infrastructure management.

API performance is considered high-performing when the average response time falls between 0.1 and 1 second Delays become noticeable at around 2 seconds, and the application or website starts losing users at about 5 seconds due to the slowdown For example, when a client requests data from the API and the response arrives in 3 seconds, the total request-to-response time is 3 seconds If the delay is 500 milliseconds, the processing time would be 2.5 seconds, bringing the total time to 3 seconds.

In order to create effective APIs, in this part, we will be using Firebase Cloud functions 1 st generation to deploy functions that work as REST APIs.

In a typical life-cycle, a Firebase Realtime Database function does the following:

• Waits for changes to a particular database location.

• Triggers when an event occurs and performs its tasks.

• Receives a data object that contains a snapshot of the data stored in the specified document.

Figure 36 illustrates the lifecycle of how Firebase Cloud Functions handles a write request To interact with the Realtime Database, REST APIs must be granted permissions before publication, and the necessary permissions are configured using the JSON code provided below.

5 " p r i v a t e _ k e y ": " - - - B E G I N P R I V A T E KEY - - - - -\ n M I I E v Q I B A D A N B g k q h k i G 9 w 0 B A Q E F A A S C B K c w g g S j A g E A A o I B A Q C 6 r 0 Z c X B r x r E Q Q \ n 4 2 j Q 1 h 2 4 3 j h a l K 9 C w k B 4 T 7 Z z a 2 8 y j z 7 K n v 9 f g E + T R U 3 J w + w 1 U K C Z 0 0 H e m R 6 N / QjV \ n E Q J E u g r U q x k c Q p 4 O I C E w d y c t g o 6 7 D t 7 X q e 8 G s H E g Z s Y h O U d 7 P 1 r 6 z h y /+7 G Z D y 5 v \ n 5 j l V c Q 1 s 2 r h U b Z c I g Y 6 1 h P 9 k F Z l W R W f t p o 2 O r v I h R u 7 V F Y A M k u x p / D 4 X 2 T m P D V a Z \ n 8 Z w f x c d e P L b x y i J k K r 8 b + l 2 k W V q C 5 i a 2 8 W f T i f t B 6 F U x Q L j E G c m /4 D n i A P Q O P P 4 Z \ n b 0 G H d k D c J M f c e E l B l y s B T X A Z W C l a V T N r P M s q q G N 3 b b y c e d V M P 8 s s J S c 5 r G Z y s G U I \ n l J w 8 b z 8 X A g M B A A E C g g E A U w y U b Z Q f / H F Z W n Y A d B 8 8 2 7 g o M 8 u / a C C I k 7 1 K e n B J 6 K E n \ n G v a + v t q T C /4 hy + e Y F m P G / o e n 3 w I Z Q K t X m Y n W i 4 K E P P X c 1 u C f 9 c K / Y R M w 3 6 M c I g V M \ n h 3 6 2 s j A e M 3 7 l F 3 S m 4 y J d N A Q r c B D l g i T p 0 K g H y 4 X e p h V r O U w D i 6 o v N X t 0 L i 8 Z p v G 3 \ n O S O O m f z W E M M S q 4 v f G q m B A c x 8 8 w 4 Y C p F 7 y a v c K F Q s I R Z y X 2 8 d T n 6 e O M q X o + p F 9 b l v \ n x J A s E v j d h e d 7 a W Y H t w m g u U i z 8 T k C p t z h d D x z Y 0 9 a v y k W E 9 s h B R l e U b H X B P H D 5 g v J \ n 8 z n m z 1 T R k 9 c z 3 T 2 S W p G b E 8 T 5 F 2 1 q b N Y s 5 u w h I q f q g Q K B g Q D 5 5 r V B N m F a D m W W X V Q R \ n B M r + s 1 b x 4 1 R H 2 V t 3 R d O R U X e 3 L h 2 h v w /8 s y 1 R q s x 0 z O H 0 s W P I B D / P v u t i k o H 4 8 8 0 Z \ n J H S o 9 R p a 4 E J 0 N 3 c m n E E Y N X N h P O m P p / J / Z c H R D l / E 6 4 a j L O 3 p u F z + o H A 9 l I M S M C v a \ n 3 6 Y W o U B t M Y n a Q r 2 E c t 4 w o x x + V w K B g Q C / P Z z k X l B i x R m Z d O 6 o O 0 8 u D j F 5 a X d e U h U b \ ns / h W 7 r h g G T L n z Z 9 V W P A u E 8 o 4 D m h g C C 7 T k Y w a l g 5 B c 4 0 E z a c I h E g Q Y /3 a x n L j 5 4 f J \ n P K k w w n n i 0 o n E 6 m l 9 U x R / h 5 M g B C o 4 C j s c y R l v V M r U Y y j 5 0 F j 5 p D n p U d z X x v F i 0 c V c \ n V G k b K 4 V N Q Q K B g D D B N A e f B m s 9 d 9 B Y M P i J C N m c P 5 A 9 m 8 n Q v C m O 8 / H c B R E 1 7 A 4 M a q A Q \ n j P z r 5 6 u 5 9 T N 6 E E + LlK + B P g c j M j x R x G f t V t 1 H x H a K X i y y T Y q 4 3 X J N q 0 8 D R U Y D r C n y \ n v l d 9 C G 4 w z T m 0 o E 4 C 7 B G 5 V 2 y M N u 4 r e 8 L d 8 1 d i 6 m D j U 1 P D x Z m 7 l 2 H B 0 O N N A o G B A J F z \ n V g G m 7 f L B Q A A k H G Q d f 9 J i f y R 9 n 4 l A W s e Q M O B F f j u w z r P Z A 0 d R d p N E // d 0 l d P 8 R U k q \ n m O m b m U o U j X v K w j D L E 1 h M B M Z B S x 6 l e P Q I T B J G x 5 d J U / l N 5 F + q M Z v x T G f 8 Y v P u b B k v \ n p k W z s v S o W o D u A s 4 U J u u b F K G U s Q D c 1 Q O t O 6 e r i R 5 B A o G A B 0 q H u j 7 c d O / X j B 1 F w 3 N +\ n 9 o i K I g Q p F v p t y j p h p E W f q d 4 t y 5 7 G n h o e + j Z h 4 Z J x g M + D x P x B n Z C w C N Z s G l Q u / RNO \ n d 0 8 U W U 7 w j l X O N P X 9 A A 8 N h P B 3 y 1 V + a t 3 l d V j F l j M 6 u D + I E i 9 h + r 0 Y P 7 A h + Z s W x S L W \ n h C Q x k D o b V F D r r F w 1 9 D O 0 6 q Q =\ n - - - END P R I V A T E KEY - - - - -\ n " ,

11 " c l i e n t _ x 5 0 9 _ c e r t _ u r l ": " h t t p s :// www g o o g l e a p i s com / r o b o t / v1 / m e t a d a t a / x 5 0 9 / f i r e b a s e - a d m i n s d k - c a m 7 1 %40 smart - parking - 3 6 9 0 1 5 iam g s e r v i c e a c c o u n t com " ,

After having permissions, to interact with the Firebase Realtime database, Firebase Functions provides 2 ways that are reading and writing data for user to develop RESTful APIs.

Here are the RESTful APIs’ endpoint we need to implement:

3 Finding user by email/findUserByEmail

4 Displaying list of users/displayUsersList

5 Displaying list of parking lots/displayParkingList

6 Retrieve specific park information/getParkingLot

7 Read the status of slot/validateStatus

8 Retrieve user data timeline/getUserCount

9 Retrieve park data timeline/getCarCount

9 Update park data timeline/updateCarCount

10 Update user data timeline/updateUserCount

It is important to keep track of API usage to help us understand how our APIs are being used, identify issues, maintain database and make improvements.

Figure 37: Firebase Cloud functions usage

Front-end apps

To interact with the Firebase Realtime Database, both front-end applications must be configured with the appropriate Firebase project settings The apiKey is the API key for your Google Cloud Console project, while other properties such as authDomain and databaseURL are linked to your Firebase project configuration.

9 d a t a b a s e U R L : " h t t p s :// smart - parking - 3 6 9 0 1 5 - default - r t d b asia - s o u t h e a s t 1 f i r e b a s e d a t a b a s e app " ,

9 // For F i r e b a s e JS SDK v7 2 0 0 and later , m e a s u r e m e n t I d is o p t i o n a l

13 d a t a b a s e U R L : " h t t p s :// smart - parking - 3 6 9 0 1 5 - default - r t d b asia - s o u t h e a s t 1 f i r e b a s e d a t a b a s e app " ,

The use-case diagram for Register scenario: The user needs to fill in information such as username, email, phone and password.

Figure 38: The use-case diagram for registering userThe sequence diagram for Register scenario: The sequence diagram focuses on the process after the user clicks the Register button.

Figure 39 presents the registration sequence diagram, while the Register activity diagram outlines the user flow: entering account information, verifying the password, and sending the data to the database If the database responds with success, the user is redirected to the login screen; if the server responds with failure, an informative error message is displayed This registration workflow emphasizes input collection, password validation, server communication, and clear user feedback to ensure a smooth account creation experience.

Figure 40: The activity diagram for registering

Use-case diagram for Login scenario: Customer can enter their account username and pass- word and log in with the confirmation of server.

Figure 41 shows the use case diagram for logging in, while the detailed login sequence describes the authentication flow: after a user enters their username and password, they must click the login button before the database responds with either a success or failure message A successful login takes the user to the home screen of the mobile application, whereas if an issue occurs, the user must log in again This sequence illustrates how the login process validates credentials against the database and guides users to the appropriate screen based on the outcome.

Figure 42: The sequence diagram for logging in Activity diagram for Login scenario: There are 3 swim lanes in the diagram below describing

Three main factors drive the login scenario: users enter their email and password, Firebase authentication verifies those credentials, and a successful verification redirects the mobile app to the home screen If any step fails or something goes wrong during authentication, the user must log in again to regain access.

Figure 43: The activity diagram for logging in

A use case diagram for the Booking scenario shows that the user first selects a booking method, choosing between manual booking and automatic booking, and the app then displays information tailored to that choice; once the user agrees to the bill, the mobile device starts the booking timer to initiate the reservation.

Figure 44 shows the use case diagram for booking a parking slot The booking sequence starts when the user views and selects a parking lot from a list and checks it on the map The application then displays parking area details corresponding to the chosen lot Once the user approves the bill, the system starts the booking time and reserves the selected parking slot.

Figure 45 illustrates the sequence diagram for booking a parking slot The activity diagram for the Booking scenario depicts the interaction among the user, the mobile app, and Firebase The process comprises two distinct flows: a manual selection flow and an automated flow, each with its own set of activities These diagrams together show how user actions are translated into app operations and cloud data interactions for efficient parking slot reservation.

Figure 46: The activity diagram for booking a parking slot

Three diagrams illustrate the navigation feature: when a user taps a parking lot marker, the app retrieves the marker’s latitude and longitude and passes it to the Google Maps API to locate the parking lot and provide the data needed to display directions The Google Maps API returns the route information, enabling the app to show turn-by-turn directions to the user For the search feature, as the user types a keyword, the app sends the query to the Google Maps API, which returns relevant results and provides real-time suggestions If the user clicks a suggested result, the app displays the directions to that location.

Figure 47: The use case diagram for navigating feature

Figure 48: The sequence diagram for navigating feature

Figure 49: The activity diagram for navigating feature

Hardware

Program architecture

The program flow is as follows:

Detection model

Object detection is a crucial task in computer vision that involves identifying and localizing objects within images or video frames Among the various algorithms developed for this purpose, the You Only Look Once (YOLO) algorithm stands out for its remarkable speed and accuracy Introduced by Joseph Redmon and collaborators in 2016, YOLO revolutionized object detection by reframing it as a single regression problem rather than a classification task, enabling near real-time performance This article explores the principles behind YOLO, its evolution through successive versions, its wide range of applications, and the overall impact of the YOLO algorithm on the field of computer vision.

YOLO’s key advancement in object detection is its single-pass, end-to-end approach that predicts bounding boxes and class probabilities in one go Traditional methods, such as Region-based Convolutional Neural Networks (R-CNNs), rely on a two-stage pipeline: first generating potential bounding boxes (regions of interest) and then classifying these regions Although effective, this multi-step process is computationally intensive and slow, which impedes real-time performance.

YOLO revolutionizes object detection by treating it as a single regression problem It divides the image into a grid and predicts bounding boxes and class probabilities directly from the full image in one evaluation Each grid cell is responsible for predicting a fixed number of bounding boxes and their confidence scores, which indicate both the presence of an object and the accuracy of the bounding boxes This single-step, one-pass approach enables real-time processing and high-speed detection.

Figure 51: Overview of YOLO architecture [13]

Ultralytics YOLOv8 builds on the success of its predecessors by introducing new features and improvements that boost performance and flexibility Fast, accurate, and easy to use, YOLOv8 is designed to excel across a wide range of tasks, including object detection and tracking, instance segmentation, image classification, and pose estimation.

YOLOv8 has Detect, Segment and Pose models are pretrained on COCO dataset Here are five YOLOv8 models with statistics:

In this study, we utilize a YOLOv8 nano model trained with proprietary datasets to auto- matically detect parking spaces and monitor their occupancy status.

a Parking Datasets Acquisition

This study trains the YOLOv8 Nano model for parking space detection using two distinct datasets to improve robustness and accuracy in identifying and monitoring parking spaces By leveraging multiple datasets, the approach enables the model to generalize across diverse parking scenarios, resulting in more reliable and precise parking-space detection outcomes.

The parking slots detection model is trained on a dataset created by Muhammad Syi-hab, consisting of 7,801 images of varied parking lots annotated in YOLOv8 format The dataset is available for download in multiple formats, making it compatible with different training pipelines Its structured annotations, including bounding boxes and class labels, enable efficient learning for object detection A model trained on this dataset, Roboflow 3.0 Object Detection (Fast), achieved impressive metrics: precision 0.973, recall 0.957, and a mean average precision (mAP) of 0.984.

To prepare the dataset for model training, the author used Roboflow’s preprocessing options to standardize the dataset format and ensure all images are uniformly sized This preprocessing step is essential for maintaining dataset consistency, improving data quality, and enabling more reliable and efficient model training.

Auto-Orient removes EXIF data from images to ensure consistent display the way they are stored on disk EXIF orientation metadata can affect how an image is rotated, so removing this data helps computer vision models focus on the objects in the picture rather than orientation cues, reducing inconsistencies and improving model performance during image preprocessing.

Resize (Stretch to 640x640) stretches images to a fixed 640x640 pixel size, with annotations scaled proportionally Although the resized images become square and may appear distorted, no source image data is lost in the process This standardization ensures compatibility with the YOLOv8 model architecture and supports efficient data processing during training.

The dataset underwent image augmentation to boost the model's generalization and performance on unseen images Three distinct random augmentation techniques were applied to generate three additional augmented versions of each image This broader data variability helps expose the model to diverse scenarios, enhancing robustness and driving better results in real-world applications.

• Random Crop (0% Minimum Zoom, 20% Maximum Zoom): Randomly create a subset of an image.

• Random Rotation (Between -20° and +20°): Randomly rotate an image clockwise or counter clockwise up to the degree amount the user selects.

• Random Brightness Adjustment (Between -25% and +25%): Adjust the bright- ness of an image.

• Exposure (Between -10% and +10%): Adjust the gamma exposure of an image to be brighter or darker.

• Blur (Up to 1px): Apply a Gaussian blur filter with randomly size on an image.

• Random Noise (Up to 2% of pixels): Injects random salt and pepper noise to an image.

Data preprocessing was applied to the Train, Validation, and Test sets, while image augmentation was applied exclusively to the Train set The dataset follows a train–validation–test split: the Train set contains 7,017 images (90%), the Validation set contains 558 images (7%), and the Test set contains the remaining images This configuration enables robust model training with augmented data during training to enhance generalization and reliable performance evaluation on unseen data.

This parking lot dataset comprises 12,416 images taken from diverse angles to ensure variety across scenarios and enhance model generalization and detection performance All images include bounding boxes and labeled annotations in the YOLOv8 format, providing the structured data essential for efficient and accurate training of object-detection models.

These are pre-processing options that were applied in this dataset:

Auto-Orient removes EXIF data from images to ensure they display exactly as stored on disk EXIF metadata contains orientation information that can cause misalignment across devices and viewers By stripping this data, the model focuses on the actual objects in the image, reducing orientation-related inconsistencies and improving robustness in image analysis.

Stretching to 640x640 is the resize option that forcefully adjusts images to a fixed pixel grid while scaling annotations proportionally to keep them in sync Although the resulting images become square and may appear distorted, no source image data is lost, preserving the original content for training This standardization aligns with the YOLOv8 model architecture and enables more efficient processing during the training phase, boosting consistency and speed in model development.

There were no augmentation methods used in this dataset Following pre-processing, the dataset is divided into Training, Validation, and Testing sets They comprise 8691 images (70%), 2483 images (20%), 1242 images (10%) respectively.

b Training Model

We trained the YOLOv8 model on a local machine powered by an RTX 3070 Ti To maximize performance when training with two datasets, we tested four different approaches and evaluated their effectiveness to identify the best strategy.

• Train with the Parking Space Dataset only.

• Train with the PKLot Dataset only.

• Train with the Parking Space Dataset first, followed by the PKLot Dataset to enhance performance.

• Train with the PKLot Dataset first, followed by the Parking Space Dataset to enhance performance.

These varied training strategies were designed to determine the most effective method for opti- mizing the model’s performance.

Train with the Parking Space Dataset only

When training the YOLOv8 model, several parameters can be configured to achieve optimal results After extensive testing, we adjusted the following key parameters from their default settings:

• Epochs (100): Initially, we experimented with 20 and 50 epochs, but the results were suboptimal Therefore, we selected 100 epochs to achieve a better outcome.

• Image Size (640x640): Input images were standardized to 640x640 pixels to ensure better compatibility with the YOLOv8 model This standardization retained essential information while reducing training time.

• Batch Size (46): The batch size was 16 as default setting.

The result of the training is shown in pictures below:

Figure 53: Confusion Matrix of YOLOv8n with Parking Space Dataset

Figure 54: Result Graph of YOLOv8n with Parking Space Dataset

Figure 55: F1 curve of YOLOv8n with Parking Space Dataset

Train with the PKLot Dataset only

Similar to train YOLOv8 with Parking Space Dataset, we also adjusted following parameters:

• Epochs (50): We decided to run only 50 epochs to ensure the model is not overfitting.

• Image Size (640x640): Input images were also standardized to 640x640 pixels.

• Batch Size (16): The batch size was 16 as default setting.

The result of the training is shown in pictures below:

Figure 56: Confusion Matrix of YOLOv8n with PKLot Dataset

Figure 57: Result Graph of YOLOv8n with PKLot Dataset

Figure 58: F1 curve of YOLOv8n with PKLot Dataset

Train with the Parking Space Dataset first, followed by the PKLot Dataset to enhance performance

After training the YOLOv8 model on the Parking Space Dataset, we selected the best-performing variant from the initial run and continued training using the PKLot Dataset During this phase, we also adjusted the relevant training parameters to optimize convergence and detection accuracy across varying parking scenarios, ensuring better generalization on PKLot.

• Epochs (100): 100 is the amount of epochs we chose in this approach.

• Image Size (640x640): Input images were resized to 640x640 pixels.

• Batch Size (16): The batch size was 16 as default setting.

The result of the training is shown in pictures below:

Figure 59: Confusion Matrix of YOLOv8n with PKLot Dataset after Parking Space Dataset

Figure 60: Result Graph of YOLOv8n with PKLot Dataset after Parking Space Dataset

Figure 61: F1 curve of YOLOv8n with PKLot Dataset after Parking Space Dataset

Train with the PKLot Dataset first, followed by the Parking Space Dataset to enhance performance

After training the YOLOv8 model with the PKLot dataset, we selected the top-performing versions and continued training on the Parking Space Dataset to further refine detection accuracy During this phase, we adjusted key training parameters, including learning rate, batch size, and data augmentation settings, to improve convergence and robustness of parking space recognition under varying lighting and occlusions This iterative training and parameter tuning enhanced the model's ability to accurately detect parking spaces across diverse scenarios.

• Epochs (50): We decided to run only 50 epochs to ensure the model is not overfitting.

• Image Size (640x640): Input images were standardized to 640x640 pixels to ensure better compatibility with the YOLOv8 model This standardization retained essential information while reducing training time.

• Batch Size (16): The batch size was 16 as default setting.

The result of the training is shown in pictures below:

Figure 62: Confusion Matrix of YOLOv8n with Parking Space Dataset Dataset after PKLotDataset

Figure 63: Result Graph of YOLOv8n with Parking Space Dataset Dataset after PKLot Dataset

Figure 64: F1 curve of YOLOv8n with Parking Space Dataset Dataset after PKLot Dataset Model testing

After training with four approaches, we evaluated our models on real-life video footage to determine the best option for a smart parking system The footage was captured on our university campus, where the parking lot was fully occupied The procedure was straightforward: each model detected empty and occupied parking spaces and recorded their coordinates To refine the results, overlapping detections were eliminated by applying a threshold.

Figure 65: Detection Result with Parking Space dataset only PKLot dataset only

Figure 66: Detection Result with PKLot dataset only

Parking Space dataset first and PKLot dataset

Figure 67: Detection Result with Parking Space dataset first and PKLot dataset PKLot dataset first and Parking Space dataset

Figure 68: Detection Result with PKLot dataset first and Parking Space dataset

Our testing phase demonstrates that the model trained on the Parking Space dataset in combination with the PKLot dataset outperforms all competing models, confirming that this dataset pairing and our approach yield the most effective results.

a Datasets Acquisition

The Vietnamese License Plate Dataset, used to train the YOLOv8 model, contains diverse images of Vietnamese license plates This dataset enables the model to accurately detect and read plates under a range of conditions, enhancing performance and reliability for real-world applications in vehicle identification and traffic management.

To leverage the YOLOv4-trained dataset with the latest YOLOv8 framework, we reformatted the data into a YOLOv8-compatible structure using Roboflow After reformatting, we applied preprocessing and augmentation to the images to improve detection performance and model robustness.

Auto-Orient removes EXIF data from images, ensuring they are displayed exactly as stored on disk Because EXIF metadata determines image orientation, removing it reduces orientation-related inconsistencies and helps the model focus on the objects in the pictures, improving robustness for object recognition and image processing tasks.

Resize (Stretch to 640x640) standardizes images by stretching them to a pixel-perfect 640x640 dimension, producing square images with annotations scaled proportionally to the new size Although the images may appear distorted, no source image data is lost in this process This approach ensures compatibility with the YOLOv8 model architecture and streamlines data processing, improving efficiency during model training.

• Auto-contrast: Enhances an image with low contrast.

• Adaptive Equalization: Contrast Limited Adaptive Histogram Equalization (CLAHE).

An algorithm for local contrast enhancement uses histograms computed over multiple tile regions of an image, enabling selective amplification of local details By processing each tile separately, the method preserves tonal variations and boosts details in areas that are darker or lighter than most of the image, delivering a more balanced, vibrant, and sharper result.

• Random Rotation (Between -15° and +15°): Randomly rotate an image clockwise or counter clockwise up to the degree amount the user selects.

b Training model

Similar settings were applied when training the YOLOv8 model with the Vietnamese License Plate Dataset.

• Epochs (50): 50 is number of epochs we chose in this approach.

• Image Size (640x640): Input images were resized to 640x640 pixels.

These adjustments allowed the model to effectively learn and generalize the unique characteris- tics of Vietnamese license plates, improving its detection capabilities in real-world scenarios. Result after training:

Figure 69: Confusion Matrix for YOLOv8n with Vietnamese License Plate Dataset

Figure 70: Result Graph for YOLOv8n with Vietnamese License Plate Dataset Model testing:

Similar to training the model with the Parking Dataset, we also used several real-world videos to test the model and verify whether it could detect license plates.

Figure 72: Testing model resultThe model we trained successfully detected Vietnamese license plates as expected.

License plate recognition

License plate recognition (LPR) is a technology that automatically reads vehicle license plates from images or video footage, encompassing image acquisition, license plate detection, character segmentation, and optical character recognition (OCR) LPR systems enable efficient and accurate vehicle identification and are widely used in traffic management, law enforcement, toll collection, and parking management.

In this research, we are going to use EasyOCR, an open-source Optical Character Recognition (OCR) tool EasyOCR supports multiple languages and is designed for simplicity and efficiency.

Our approach leverages deep learning-based text recognition to accurately extract text from images, enabling reliable license plate recognition and other image-to-text applications EasyOCR offers a user-friendly interface, high performance, and robust accuracy, making it a strong fit for our project's OCR requirements.

Understanding Vietnamese license plates is essential before using EasyOCR for plate recognition Vietnamese plates typically display white characters on a black background and combine letters and numbers The standard format usually begins with a two-digit province code, followed by a series of digits and, in some cases, letters that may indicate vehicle type or registration details This structured layout helps ensure accurate recognition and classification in license plate detection systems.

Figure 73: License plate for motorbikes

Figure 74: License plate for cars Our smart parking system is designed to monitor car parking lots, so we focus on license plates; plates registered from 2020 onward have 8 characters, while those registered before 2020 have 7, with the first two digits representing the province code, followed by a letter indicating the registered series, and the final four or five digits Based on this structure, EasyOCR can be configured to read plates containing 7 or 8 characters, thereby minimizing incorrect outputs in license plate recognition for parking facilities.

To read license plates with EasyOCR, you should preprocess the license plate images to make it easier for the tool to detect and read the characters Start by locating and cropping the plate region, then resize the image to an appropriate resolution Enhance visibility by improving contrast, reducing noise, and correcting any tilt so the plate sits horizontally Convert to grayscale or binarize the image to boost character separation, and consider adaptive thresholding for uneven lighting Finally, feed the preprocessed image into EasyOCR for more accurate license plate recognition.

1 Crop the image of license plate so the Easy OCR can focus on the plate only, ensure the accuracy we need.

2 Convert the image to gray version using cv2.cvtColor() provide by OpenCV.

3 Apply threshold to the image using cv2.threshold() with cv2.THRESH_BINARY + cv2.THRESH_OTSU

These steps will produce a clearer image for the Easy OCR tool.

After that we use Easy OCR to read the license plate using processed image The result is shown below:

Figure 76: Different pre-processing images

Database Connection

To connect Python to Firebase using the requests library, leverage Firebase's REST API to perform database operations Start by installing the requests library with pip install requests Once installed, you can interact with the Firebase Realtime Database by making HTTP requests Use GET to retrieve data, POST to add data, PUT to update data, and DELETE to remove data Each request should target the correct REST endpoint and send the data in JSON format.

REST APIs

Mobile app

Admin site

Testing and evaluating the system

Comparing with another smart parking solution and evaluating the improvement 118