Спільне малювання в реальному часі в мобільному додатку

Реалізація колаборативного малювання в мобільному додатку

Зустрічається ситуація: два користувачі малюють на одному полотні, і через 200 мс штрихи накладаються не в тому порядку. Причина — відсутність чесного впорядкування. Ми вирішуємо це за допомогою CRDT (Conflict-free Replicated Data Type). Наш стек — Flutter 3.x, Kotlin Multiplatform, Swift 5.9. Синхронізація побудована на бінарному протоколі поверх WebSocket, що дає затримку менше 100 мс при 60 FPS.

Бінарний протокол замість JSON дає виграш у 3 рази за об'ємом даних. Типова помилка — відправляти кожну подію окремо. Ми використовуємо батчинг: групуємо точки за 50–80 мс і відправляємо одним повідомленням. Це знижує навантаження на канал і сервер, економлячи ресурси.

Як працює CRDT для малювання?

Конфлікти при одночасному малюванні в одній області — часта проблема. Ми застосовуємо CRDT з вектором годинників. Кожна дія (початок, точки, завершення штриха) отримує мітку часу. При отриманні конфліктуючих правок порядок відновлюється за вектором: відправник не чекає підтвердження, а просто застосовує локально і фоново синхронізує. Це гарантує відсутність втрати даних і чесний порядок.

Як забезпечується локальний відгук при віддаленій синхронізації?

Користувач повинен бачити свій штрих одразу, без очікування мережі. Для цього ми рендеримо локальний штрих негайно, а синхронізацію запускаємо паралельно.

// Flutter: локальний штрих
class DrawingBloc extends Bloc<DrawingEvent, DrawingState> {
  void onPointerDown(PointerDownEvent e) {
    currentStroke = Stroke(id: uuid(), points: [e.localPosition]);
    emit(state.copyWith(activeStroke: currentStroke));
    _syncService.beginStroke(currentStroke.id, color, brushSize);
  }

  void onPointerMove(PointerMoveEvent e) {
    currentStroke.points.add(e.localPosition);
    emit(state.copyWith(activeStroke: currentStroke));
    _syncService.appendPoints(currentStroke.id, [e.localPosition]);
  }

  void onPointerUp(PointerUpEvent e) {
    _syncService.finalizeStroke(currentStroke.id);
  }
}

Синхронізація йде незалежно — локальний рендер не блокується.

Чому важливий батчинг точок?

На мобільному пристрої 60 кадрів на секунду генерують до 60 подій pointerMove. Якщо відправляти кожну одразу, буде надлишковий трафік і затримка на серіалізацію. Ми збираємо точки в батчі по 10–15 штук і відправляємо кожні 50–80 мс. Це баланс між затримкою і трафіком.

Формат бінарного повідомлення (економія 3–5x порівняно з JSON):

[strokeId: 16 bytes][pointCount: uint8][x1:f32][y1:f32][p1:f16][x2:f32]...

Float16 для тиску (0.0–1.0 з точністю 0.001) достатньо. Координати — float32 для субпіксельної точності. Разом ~10 байт на точку проти ~30 в JSON.

На WebSocket передаємо бінарні кадри (ArrayBuffer в JS, Uint8List в Dart, ByteBuffer в Kotlin).

Алгоритм згладжування на стороні отримувача

Віддалені точки приходять батчами з затримкою і дискретно. Проста відмальовка ліній між точками дає східчасті лінії. Потрібне згладжування. Ми рекомендуємо два методи:

• Catmull-Rom Spline — проходить через всі контрольні точки, низька складність, середня якість.
• Perfect Freehand — симулює форму пензля з урахуванням тиску і швидкості, генерує SVG-path. Висока якість, середня складність.

Для віддаленого штриха застосовуємо Perfect Freehand до всього масиву точок при кожному оновленні. Path перемальовується повністю — це дорожче по CPU, але візуально правильно (згладжування враховує весь контекст).

Шари і порядок об'єктів

Базова модель: кожен штрих має z-index (timestamp створення). При конкурентному малюванні в одній області — хто намалював останнім, той зверху.

Шари (layers) — опціональна фіча. Кожен шар — окремий Y.Array об'єктів. Користувач вибирає активний шар. Видимість/блокування шару — поле в Y.Map шару.

При рендерингу: Canvas малює шари знизу вгору. Кожен шар — окремий offscreen canvas (iOS: UIGraphicsImageRenderer, Android: Bitmap з Canvas). Шари кешуються і перемальовуються тільки при зміні.

Ластик: спеціальний інструмент

Ластик не малює білим — він видаляє пікселі. Два варіанти:

1. Object-level eraser — видаляє весь штрих при перетині. Простий у реалізації, добре синхронізується (delete(strokeId) — атомарна операція).
2. Pixel-level eraser — розрізає штрих на частини. Вимагає геометричних обчислень (clip polygon by path). У колаборативному контексті складніше — потрібно розрізати штрих і створити нові об'єкти, що проблема для CRDT.

Ми рекомендуємо object-level eraser для початку.

Apple Pencil та Android Stylus

Apple Pencil через UITouch.type == .pencil передає тиск (force 0.0–1.0), кут нахилу (altitudeAngle, azimuthAngle) та передбачені точки (predictedTouches). Flutter уніфікує: PointerEvent.pressure, PointerEvent.tilt, PointerEvent.orientation. Синхронізація pressure/tilt на віддалені клієнти дає реалістичне відображення пензля партнера.

Як інтегрувати колаборативне малювання: покрокова інструкція

1. Аналіз вимог — визначте кількість одночасно малюючих, необхідні інструменти, рівень згладжування.
2. Вибір стеку — Flutter, Kotlin Multiplatform або нативний Swift/Kotlin. Ми рекомендуємо Flutter для кроссплатформенності.
3. Інтеграція SDK — підключіть наш SDK, дотримуйтесь документації. Приклади коду для iOS, Android та Flutter включені.
4. Налаштування серверної частини — розгорніть WebSocket-сервер з підтримкою CRDT. Ми надаємо Docker-образ.
5. Тестування — перевірте синхронізацію при різних мережевих умовах, використовуйте TestFlight/Firebase Distribution.
6. Деплой — публікація в App Store / Google Play.

Терміни та що входить

Колаборативне малювання з базовими інструментами (пензель, ластик, колір) на Flutter — 8–14 тижнів. З підтримкою стилуса, шарами, pixel-level eraser та масштабованим полотном — 20–28 тижнів.

У розробку входить:

• Документація API та архітектури
• Доступ до репозиторію з прикладами
• Навчання команди замовника
• Підтримка протягом місяця після релізу

Для точної оцінки вашого сценарію зв'яжіться з нами — ми розрахуємо терміни та бюджет під конкретні вимоги. Отримайте консультацію наших інженерів з 10-річним досвідом.

Типові помилки при реалізації:

• Відправка кожної події окремим повідомленням замість батчингу
• Використання JSON для точок — високий overhead
• Ігнорування передбачення дотиків для стилуса
• Відсутність CRDT для конфліктів
• Рендеринг всіх шарів кожен фрейм без кешування

Зв'яжіться з нами, щоб обговорити вашу задачу. Отримайте оцінку проекту вже сьогодні.

Інтеграція API в мобільний додаток: з чого почати

Запит йде, відповідь не приходить, timeout — 30 секунд. Користувач дивиться на спінер. Мережі немає — мобільна карта в метро. Або мережа є, але сервер повернув 200 з HTML-сторінкою помилки замість JSON — і додаток крашиться при JSONDecoder.decode(). Ми бачимо такі кейси на кожному другому проєкті. Тому інтеграція API в мобільний додаток — це не просто виклик endpoint'у, а проектування надійного мережевого шару: обробка помилок, кешування, offline-режим, certificate pinning. Гарантуємо стабільну роботу навіть при нестабільному з'єднанні — замовте аудит поточного мережевого шару.

Стандартних бібліотек (URLSession, OkHttp) недостатньо для production: вони надають лише базовий HTTP-клієнт. Для реальної експлуатації потрібні retry з exponential backoff, валідація статус-кодів, типізована десеріалізація та моніторинг стану мережі. Без цього додаток втрачає дані та користувачів. Ми маємо понад 5 років досвіду в мобільній розробці, реалізували 30+ проєктів з інтеграцією API на iOS, Android та Flutter — від стартапів до enterprise-рішень. Сертифіковані iOS/Android розробники гарантують якість коду.

Як вибрати протокол для інтеграції API?

REST залишається стандартом для більшості проєктів. Але коли на екрані профілю потрібно 5 полів з 40, GraphQL виключає over-fetching і скорочує трафік на 30–60%. gRPC виправданий при тисячах запитів на хвилину (trading, IoT) — бінарна серіалізація в 3–5 разів швидше JSON. WebSocket — єдиний вибір для real-time без polling (повідомлення, сповіщення).

Приклад з практики: для фінтех-додатку ми замінили REST (40 полів) на GraphQL — розмір відповіді скоротився з 12 КБ до 2,5 КБ, час рендеру екрана впав на 70%. Економія трафіку була значною при 100 000 активних користувачів.

Як забезпечити надійність з'єднання та offline-first?

Користувачі втрачають мережу в метро, ліфті, тунелі. Мобільний додаток зобов'язаний працювати без інтернету — хоча б у read-only режимі. Ми впроваджуємо патерн offline-first:

1. При відкритті екрану спочатку показуємо дані з локального кешу (Core Data / Room).
2. Паралельно виконуємо мережевий запит, оновлюємо UI після відповіді.
3. Якщо мережа недоступна — показуємо кешовані дані та позначку «немає з'єднання».
4. При відновленні мережі автоматично синхронізуємо зміни.

Для кешування HTTP-відповідей використовуємо URLCache (iOS) та OkHttp Cache (Android) з підтримкою Cache-Control. Для структурованих даних — SwiftData / Room. NWPathMonitor / ConnectivityManager.NetworkCallback відстежують стан мережі та тригерять оновлення. Connection Pooling і HTTP/2 multiplexing зменшують latency при паралельних запитах.

REST та вибір клієнтської бібліотеки

Alamofire (iOS) — де-факто стандарт для Swift-проєктів. Поверх URLSession додає request chaining, response validation, automatic retry, certificate pinning через ServerTrustManager. AF.request() з .validate() повертає помилку для будь-якого статус-коду поза 200–299. Без .validate() Alamofire вважає 404 та 500 успішними відповідями. З Swift Concurrency — async-версія через serializingDecodable.

Retrofit (Android) — анотаційний HTTP-клієнт поверх OkHttp. Інтерфейс з анотаціями компілюється в реалізацію. @GET, @POST, @Path, @Query, @Body — декларативний опис API. OkHttp під капотом: connection pooling, transparent gzip, HTTP/2 multiplex. HttpLoggingInterceptor — логування в debug-збірці. Authenticator — автоматичний refresh токена при 401. Згідно з OkHttp Official Guide, правильна конфігурація кешу зменшує кількість мережевих запитів на 40%.

Ktor (KMM/Flutter) — мультиплатформний HTTP-клієнт. На iOS працює через Darwin engine (URLSession), на Android — через OkHttp. Єдиний код для обох платформ при KMM-архітектурі.

GraphQL: коли REST не справляється

REST повертає фіксовану структуру. Екран профілю вимагає name, avatar, email — сервер віддає 40 полів. Over-fetching. GraphQL вирішує це: клієнт запитує рівно потрібні поля. Це критично для мобайлу, де трафік і час парсингу — реальні обмеження. Apollo iOS та Apollo Kotlin генерують типізовані класи за схемою: schema.graphql + query-файли → строгі типи на етапі компіляції. Subscriptions через WebSocket — real-time без polling. Обмеження: GraphQL складніше кешувати на рівні HTTP. Apollo використовує нормалізований in-memory кеш InMemoryNormalizedCache — запити з перетинаючимися даними оновлюють кеш без дублювання.

WebSocket: real-time без зайвого трафіку

Polling (setInterval кожні 5 секунд) — витрата батареї та трафіку. WebSocket — постійне двоспрямоване з'єднання. iOS: URLSessionWebSocketTask (нативний, iOS 13+). Android: OkHttp WebSocket. Обов'язкова обробка reconnect: при onFailure — експоненційний backoff (1с → 2с → 4с → 8с → максимум 60с). Socket.IO — надбудова з автоматичним reconnect, але для нових проєктів краще нативний WebSocket (менше залежностей). TLS 1.3 забезпечує безпеку з'єднання.

Чому важливий certificate pinning?

Корпоративний проксі може перехопити HTTPS через підміну сертифіката. Certificate pinning запобігає цьому: додаток приймає тільки конкретний сертифікат або публічний ключ. Alamofire: ServerTrustManager з PinnedCertificatesTrustEvaluator. OkHttp: CertificatePinner з SHA-256 хешем. Операційна складність: при ротації сертифіката старі версії додатку перестають працювати. Рішення — pinning на публічний ключ CA або підтримка кількох пінів з grace period. Правильне впровадження pinning гарантує захист від MITM-атак.

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

Ми передаємо: вихідний код мережевого шару, документацію по використовуваних бібліотеках, інструкцію з ротації сертифікатів, підтримку протягом 2 тижнів після здачі.

Терміни та вартість

Реалізація мережевого шару з REST, retry, кешуванням та offline-режимом — 1–2 тижні. Додавання GraphQL або WebSocket — ще 1–2 тижні. gRPC — 2–3 тижні, включаючи кодогенерацію. Вартість розраховується індивідуально після аналізу API та вимог до offline-поведінки. Оцінимо проєкт за 1 день — зв'яжіться з нами для консультації. Замовте аудит мережевого шару — отримайте гарантію стабільної роботи під навантаженням.