PropTech застосунок: карта, фільтри, віртуальні тури

PropTech застосунок: інтерактивна карта та фільтри нерухомості

Наша команда має понад 5 років досвіду в розробці PropTech-рішень та успішно реалізувала 50+ проєктів. При завантаженні карти з 5000 об'єктами в московських новобудовах застосунок зависав на 4 секунди — доки не впровадили viewport-based loading. Типова біль PropTech: сотні тисяч об'єктів у базі, карта гальмує, користувачі йдуть. Ми вирішуємо це кластеризацією та відкладеним завантаженням. Кластеризація маркерів знижує навантаження на GPU на 60% та економить до $2000 на місяць на серверних ресурсах. За даними Apple Docs, MKClusterAnnotation забезпечує ефективне групування маркерів. За 5 років ми зробили 50+ проєктів для нерухомості — від стартапів до девелоперів.

Технічно найскладніша частина — не UI, а робота з великими обсягами об'єктів на карті та синхронізація стану фільтрів з пошуковими запитами. Помилка в архітектурі призводить до гальмування, білих екранів та втрачених лідів. Ми вирішуємо це перевіреними патернами.

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

Карта — перший екран, а не вкладка. Це диктує архітектуру: не можна завантажувати всі об'єкти. Використовуємо viewport-based loading — завантажуємо лише об'єкти в поточній області видимості. Параметри bounds передаємо в API:

GET /properties?bounds=55.70,37.55,55.80,37.70&filters=... 

Дебаунс 500 мс на подію onCameraIdle — запит тільки після зупинки камери. На сервері — PostGIS з R-Tree індексом:

SELECT id, lat, lon, price, property_type FROM properties WHERE geom && ST_MakeEnvelope(:west, :south, :east, :north, 4326) AND price BETWEEN :min_price AND :max_price ORDER BY created_at DESC LIMIT 200; 

Кластеризація. При низькому зумі — кластери з числом об'єктів. На iOS — GMUMarkerClusterer, на Android — ClusterManager, у Flutter — flutter_map_marker_cluster. Перерахунок на кожен onCameraIdle. Приклад налаштування для Android:

clusterManager.setAlgorithm(NonHierarchicalDistanceBasedAlgorithm<ClusterItem>()) clusterManager.setRenderer(CustomClusterRenderer(this, map, clusterManager)) 

Що робить фільтри PropTech-застосунку складними?

Фільтр нерухомості — один з найкомплексніших UI-компонентів. Кількість кімнат, тип житла, ціновий діапазон (Range Slider), площа, поверх, рік побудови, тип договору, терміновість. Плюс специфічні поля для конкретного ринку.

Головна проблема: зберігання стану фільтра. Не в локальних змінних — користувач йде на картку та повертається. Стан повинен жити в ViewModel / StateHolder. На Android — data class FilterState у ViewModel, оновлюється через StateFlow:

filterState .debounce(300) .flatMapLatest { filters -> propertyRepository.search(filters) } .stateIn(viewModelScope, SharingStarted.WhileSubscribed(5000), emptyList()) 

На iOS — @Published var filterState: FilterState в ObservableObject, Combine debounce.

Збереження пошуку. Користувач зберігає набір фільтрів як «пошуковий агент» — отримує push-сповіщення про нові відповідні об'єкти. Реалізація: FCM + серверний cron-job, що проганяє збережені запити раз на годину.

Картка об'єкта та віртуальний тур

Фотогалерея з плавним scroll-driven переходом з карти. На iOS — кастомний UIViewControllerTransitioningDelegate для hero-анімації маркера у фото, на Android — Shared Element Transition.

Віртуальний тур. 360°-фото через VR Panorama або Matterport embed. На iOS — SceneKit зі сферичною геометрією для рендеру equirectangular-панорами, або WKWebView з Matterport iframe. На Android — GoogleVR SDK (застарілий, але працює) або WebView. Нативний рендер продуктивніший за WebView у 2-3 рази, WebView простіший та підтримує більше форматів. За нашими даними, впровадження віртуальних турів підвищує конверсію перегляду в лід на 25%, а середній час завантаження картки складає 1.5 секунди.

Іпотечний калькулятор у мобільному застосунку — проста математика на клієнті:

let monthlyRate = annualRate / 12 / 100 let n = Double(months) let payment = principal * monthlyRate * pow(1 + monthlyRate, n) / (pow(1 + monthlyRate, n) - 1) 

Ніяких API, працює офлайн.

Інтеграція з джерелами даних

Об'єкти нерухомості беруться з кількох джерел: власна CRM забудовника, IDX-фіди (західний ринок), парсинг порталів (з обережністю до ToS), ручне наповнення через CMS. Для CRM — REST API з мапінгом полів та синхронізація за webhook або раз на 15 хвилин. У мобільному застосунку — нормалізовані дані з власного API.

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

• Документація: архітектурний опис, API-специфікація (OpenAPI), керівництво користувача.
• Доступи: App Store Connect, Google Play Console, TestFlight, Firebase App Distribution.
• Навчання команди замовника роботі з панеллю адміністратора.
• Технічна підтримка 2 місяці після релізу (критичні баги).
• Гарантія на код — до 3 місяців на штатні сценарії.

Процес роботи

1. Аудит вимог: джерела даних, фільтри, обов'язкові інтеграції (CRM, іпотечний брокер).
2. Проектування схеми даних та API.
3. Розробка карти з viewport-loading та кластеризацією.
4. Розробка системи фільтрів.
5. Картка об'єкта з галереєю та віртуальним туром.
6. Система пошукових агентів.
7. Інтеграція з джерелами.
8. Навантажувальне тестування (моделюємо 10 000+ одночасних користувачів).
9. Деплой у магазини та супровід.

Оцінимо ваш проєкт за 1 день. Ви можете замовити розробку мобільного застосунку для нерухомості в нашій компанії. Зв'яжіться з нами для консультації. Замовте аудит вашого проєкту сьогодні.