Розробка мобільного додатку для інтернет-магазину
Мобільний додаток інтернет-магазину конкурує не з вашим власним сайтом — він конкурує з додатками OZON, Wildberries та Rozetka. Користувачі знають, як повинна працювати корзина, пошук та checkout. Будь-яке відхилення від звичного паттерну — повишений процент брошених корзин.
Каталог та продуктивність
Найчастіше вузька місце — екран каталогу з зображеннями. UICollectionView / LazyVerticalGrid дергається при скролі, якщо декодування зображень відбувається синхронно. Рішення: SDWebImage (iOS) / Coil (Android) з кешуванням на диск та prefetch на UICollectionViewDataSourcePrefetching / PagingSource. На React Native — FlashList замість FlatList для великих списків: віртуалізація працює коректніше, немає проблем з keyExtractor та getItemLayout.
Зображення товарів — основна причина обсягу завантажуваних даних. Використовуємо WebP (на 25–30% компактніше JPEG при порівнюємій якості), lazy loading, розмір під реальний UIImageView — не грузимо 2000x2000 для превью 150x150.
Пошук та фільтри
Строка пошуку з дебаунсом 300ms → запит до search endpoint (Elasticsearch/Meilisearch на бекенді). Автодополнення за популярними запитами та назвами товарів. Історія пошуку в UserDefaults/DataStore Preferences.
Фільтри — окремий екран (bottom sheet або модал): категорія, ціна (RangeSlider), бренд, розмір, колір. Застосування фільтра не повинно перезаражати весь каталог — лише оновлюємо URL-параметри запиту та показуємо skeleton-loader поки грузяться нові результати.
Активні фільтри — чипи над каталогом з крестиком для швидкого знімання. Це стандарт, без якого користувач теряється.
Корзина та checkout
Корзина синхронізується з сервером — не лише в UserDefaults. Користувач додав товар на телефоні, відкрив додаток на планшеті — видит ту саму корзину. Механізм: при кожній зміні корзини (add/remove/quantity) — PATCH /cart в фоні. При відкриванні екрана корзини — GET /cart для sync.
Checkout — критичний флоу. Максимальне кількість кроків: адреса → доставка → оплата → підтвердження. Всі дані, які можна передзаповнити — передзаповнюємо (адреса з профілю, збережена карта). Apple Pay та Google Pay — додаємо обов'язково: конверсія checkout з ними на 15–20% вища в e-commerce (дані Stripe).
One-tap checkout для повертаючих користувачів: збережена адреса + saved card → один екран підтвердження.
Особистий кабінет та історія замовлень
Історія замовлень — пагінований список з фільтром за статусом. Детальна сторінка: товари, трекинг доставки, можливість скасувати або оформити повернення. Трекинг — либо через API служби доставки (СДЭК, Поста России, Nova Post), либо посилання на сайт служби.
Push-сповіщення за статусом замовлення — обов'язкові: «Ваше замовлення відправлено», «Замовлення прибуло в пункт видачи». FCM + APNs з rich notifications (фото товара в сповіщенні).
Відгуки та рейтинги
Відгук з фото: користувач грузить з галереї або камери. Upload через pre-signed S3 URL прямо з пристрою (економимо трафік та час). Рейтинг товара — зірки + кількість відгуків в карточці та на детальній сторінці.
Стек
Flutter — оптимальний вибір для e-commerce з однією кодовою базою під iOS та Android: Riverpod для стану, Dio для HTTP, Hive/Isar для локального кеша каталогу, cached_network_image для зображень. React Native як альтернатива при команді з JS-опитом. Нативний SwiftUI/Jetpack Compose — при необхідності максимальної продуктивності або специфічних hardware-інтеграцій.
Процес
Аудит backend API (або проектування з нуля) → UI/UX дизайн → розробка каталогу та пошуку → корзина та checkout → особистий кабінет → інтеграція оплати → push-сповіщення → тестування → публікація.
Ориентири по срокам
MVP (каталог, пошук, корзина, checkout з одним платіжним методом, історія замовлень): 4–8 недель. Полноценное приложение з відгуками, wishlists, програмою лояльності, трекінгом та push-кампаніями: 2–4 місяці. Вартість розраховується індивідуально.