An alarm map widget — development of an air alert map widget for the smartphone

The goal of the project, the Alarm Map widget, is to provide users with easy access to important information about different types of alarms right on their smartphone desktop.

The data is updated every minute. This widget lets users quickly and efficiently track five alarms: missile danger, shelling, street fighting, chemical, and radiation hazards.

Region mapping on the air alarm map uses color or markings to visualize danger zones. This helps users quickly identify areas with alerts. Icons with ballistics, such as missiles, are added to indicate the type of threat, giving a clear picture of the threat's nature. The alarm history feature allows you to view data on previous alarms in a specific region, which helps users assess threats based on experience and make informed decisions.

We added Telegram notification integration to the app. Notifications from the Ukrainian Armed Air Forces cover the main events and alarm history. You can turn these notifications on or off in the menu. The Telegram window has several states: off, fully minimized, half maximized, and full screen. When you enter the app, the Telegram window is minimized by default. You can expand and close the window in stages: for example, when you are in the second state, you can swipe up to the third state, and so on.

The Air Alert Map widget is designed for smartphones and provides quick access to information about current threats. It allows you to scroll through the list by choosing the optimal size, centering it on the screen, or moving it to a convenient location.

The main element of the widget is a map of Ukraine. Widgets respond to air alarms by highlighting the relevant regions in red, instantly showing where the threat is. The intuitive design ensures ease of use, allowing users to get crucial real-time information on their smartphones.

Intuitive design is critical for an alarm map widget, ensuring that threats are responded to quickly and efficiently. In the case of an airborne alarm, it is vital that users can instantly get information about the danger without having to spend time understanding the interface. A clear and simple design also helps reduce stress and panic, as a clear presentation of information allows users to act faster and more calmly.

The intuitive design makes it easy to customize and use the widget, making it convenient to move, resize, or adjust visibility without extra effort.

For the backend development of our widget, we utilized PostgreSQL as our primary database for reliable and efficient data storage. Centrifugo was implemented to enable real-time messaging and instant updates, while Redis handled caching and session management to boost performance.

ASP.NET powered our backend logic and API, providing secure and efficient RESTful services. We integrated the Telegram Client Library to facilitate communication with Telegram APIs, allowing direct user notifications. APNS delivered push notifications to iOS devices, and Firebase managed push notifications, real-time updates, and analytics. This combination of technologies ensured a responsive, real-time, and scalable backend infrastructure for the widget.

For our Android widget development, we used the following key technologies:

• Kotlin - Chosen for its concise syntax and strong Android support.

• ViewBinding - Simplified UI interactions with type-safe binding classes.

• Coroutines - Handle asynchronous tasks efficiently, ensuring smooth performance.

• Navigation Components - Manage navigation with ease.

• Centrifuge - Enabled real-time communication for instant updates.

• Firebase - Provide backend services like real-time updates, authentication, and analytics.

• OkHttp3 - Served as our efficient HTTP client for network requests.

• Retrofit2 - Manage API calls and integrate seamlessly with GSON.

• GSON - Handled JSON serialization and deserialization.

• Koin - Used for dependency injection, reducing boilerplate code.

This combination ensured a robust, efficient, and scalable Android widget.

To develop our iOS widget, we used a set of modern technologies designed to create a responsive, efficient, and visually appealing interface:

• SwiftUI - Built a responsive and dynamic user interface.

• WidgetKit - Managed widget creation and lifecycle.

• Combine - Handled asynchronous data updates smoothly.

• SwiftCentrifuge - Enabled real-time communication for instant updates.

• Firebase - Provided backend services, including analytics and push notifications.

• PocketSVG - Rendered scalable vector graphics for crisp visuals.

• Background Push Notifications - Keep the widget updated with the latest data.

This combination allowed us to create a visually appealing, high-performance iOS widget with real-time updates.

The Alarm Map Widget demonstrates a unified interface in dark colors using a deep charcoal background, allowing bright colors (red, orange, and yellow) to pop and immediately draw attention to critical regions. Clean, sans-serif typography, minimalist iconography, and strategic green accents for status indicators provide high contrast and clarity, creating a professional interface optimized for fast, real-time monitoring.