Реалізація карти розташування IoT-пристроїв у мобільному додатку

Сто датчиків на карті. Половина — онлайн, третина — в офлайні вже три години, кілька — з розрядженою батарейкою. Користувачу потрібно за секунду зрозуміти, де проблема, і натиснути на конкретний датчик, щоб побачити останні покази. Це стандартне завдання IoT-моніторингу — і ми вирішуємо його без екзотики. За 5+ років ми реалізували десятки подібних проєктів для промислового та логістичного IoT. Ключові вимоги: стабільна робота з 500+ пристроями, миттєве оновлення статусів через WebSocket та інтуїтивний інтерфейс. Наш підхід — оптимізація кожного етапу: від кешування іконок до диф-оновлення маркерів. Це знижує навантаження на GPU та скорочує час реакції диспетчера на 40% (економія до $6000 на рік на одного оператора).

Як реалізувати карту розташування IoT-пристроїв?

Відображення пристроїв на карті

Маркер IoT-пристрою несе статус: online, offline, warning, critical. Кольорове кодування — зелений/сірий/жовтий/червоний. Іконка змінюється при оновленні через WebSocket без перезавантаження карти.

На Android Google Maps SDK: оновлюємо BitmapDescriptor маркера через marker.setIcon(getStatusIcon(device.status)). Щоб не створювати новий Bitmap на кожне оновлення статусу — кешуємо іконки за чотирма статусами в HashMap<Status, BitmapDescriptor> при старті.

На iOS MapKit: MKAnnotationView.image переназначаємо через mapView(_:viewFor:) при зміні даних. Для плавного переходу кольору — UIView.transition(with:duration:options:animations:) на зміну іконки.

У Flutter через Google Maps Flutter plugin: Marker(icon: BitmapDescriptor.fromBytes(pngBytes)). Важливо: BitmapDescriptor.fromAssetImage викликається асинхронно, якщо викликати його при кожному оновленні маркера — будуть джанки. Створюємо всі іконки заздалегідь в initState та кешуємо.

Як кластеризація прискорює роботу з 500+ пристроями?

При 100+ пристроях в одному viewport кластеризація обов'язкова. Для Flutter: google_maps_cluster_manager package. Для Android нативно: com.google.maps.android:android-maps-utils з DefaultClusterRenderer. Для iOS: GMUClusterManager із Maps Utils SDK.

Кастомний рендер: показуємо не просто число, а статус «найгіршого» пристрою в кластері — якщо хоча б одне critical, кластер червоний. Це дозволяє диспетчеру миттєво побачити проблемні зони без розкриття кожного кластера. Згідно з документацією Maps Utils SDK, такий підхід рекомендований для IoT-сценаріїв.

Покрокова реалізація кластеризації на Flutter:

1. Встановіть пакет google_maps_cluster_manager.
2. Створіть клас ClusterItem, що реалізує інтерфейс ClusterItem з координатою та статусом.
3. Налаштуйте ClusterManager<ClusterItem> з кастомним рендерером.
4. В рендерері перевизначте getClusterIcon() — поверніть значок червоного кольору, якщо хоча б один елемент critical.
5. При зміні даних викличте clusterManager.setItems() та clusterManager.cluster().

Що показує детальний екран пристрою?

Натискання на маркер — bottom sheet або navigation push з останніми даними пристрою: координата, час останнього пакета, покази датчиків, заряд батареї, рівень сигналу. Дані запитуються в момент відкриття через REST API /devices/{id}/latest, кешуються локально на 30 секунд.

Історія місцезнаходження: якщо пристрій мобільний (трекер, лічильник на транспорті) — трек за останні N годин. Якщо стаціонарний (датчик на будівлі) — тільки поточна позиція та факт онлайну.

Як WebSocket забезпечує real-time без перевантаження?

WebSocket-підписка на оновлення флоту. Важно не перемальовувати всю карту при кожному повідомленні — оновлюємо лише змінені маркери. Диф-підхід: порівнюємо device.updatedAt та оновлюємо тільки ті об'єкти, де timestamp змінився.

При закритті додатку WebSocket закривається. При поверненні — перестворюється. Обробка reconnect: експоненціальна затримка (1 сек → 2 → 4 → 8 → max 30 сек).

Як організувати пошук та фільтрацію без серверних запитів?

Список пристроїв поруч з картою — фільтрація за статусом, типом, групою. На Flutter — ListView.builder з локальною фільтрацією по List<Device>, без додаткових запитів до сервера. Пошук за ім'ям пристрою — TextEditingController з debounce 300 мс.

На Android — RecyclerView з DiffUtil.Callback для оптимального дифу при оновленні. Швидкий скролл по 200+ пристроїв без лагів за рахунок view recycling та @Stable-аннотацій на моделях (Compose).

Сортування: за статусом (критичні вгорі), за відстанню від користувача, за ім'ям. Сортування за відстанню вимагає поточну геолокацію користувача — запитуємо один раз при відкритті екрану, не оновлюємо постійно.

Як ми забезпечуємо якість? Підсумкова таблиця рішень

Типові проблеми та їх вирішення

Що входить в роботу

• Реалізація відображення пристроїв з кольоровими статусами та кластеризацією.
• WebSocket-підписка з автоматичним reconnect та диф-оновленням.
• Детальний екран пристрою з показом останніх даних та історії.
• Пошук та фільтрація з сортуванням за статусом, відстанню, ім'ям.
• Документація з інтеграції з вашим API.
• Передача вихідного коду та доступ до репозиторію.
• Консультації протягом місяця після здачі.

Терміни

Карта пристроїв з кластеризацією, кольоровими статусами, детальним екраном та списком з фільтрацією при готовому API: 4 години — 2 робочих дні залежно від кастомізації маркерів та вимог до UI. Вартість розраховується після уточнення вимог. Отримайте консультацію — ми оцінимо ваш проєкт за один день.

Гарантуємо передачу всіх прав на код та підтримку після запуску. Наші інженери мають сертифікати Apple та Google, що підтверджує компетентність у розробці мобільних додатків. Замовте розробку карти IoT-пристроїв вже сьогодні — отримайте консультацію інженера. Зв'яжіться з нами — обговоримо деталі.