Реалізація Whiteboard (спільна дошка) в мобільному додатку

Реалізація Whiteboard (спільна дошка) в мобільному додатку

При одночасному малюванні кількох користувачів на одній дошці виникають конфлікти змін. Ми вирішуємо цю проблему за допомогою CRDT (Conflict-free Replicated Data Types) — синхронізація холста в реальному часі без блокувань. Розробляємо whiteboard під ключ на Flutter або React Native з нульовою затримкою. Оцінимо ваш проєкт за один день.

Спільна дошка — нескінченний холст з об'єктами: лінії, фігури, стікери, зображення, текст. Користувачі малюють пальцями або стилусом з підтримкою pressure sensitivity, бачать дії один одного в реальному часі. На мобілі ключові виклики — пальцеве введення, pinch-to-zoom та рендеринг під навантаженням. Ми гарантуємо стабільну роботу при 100+ одночасних користувачах.

Архітектура даних: об'єктна модель холста

Кожен об'єкт на дошці — документ у distributed state. Добре підходить Y.Map, де ключ — UUID об'єкта, значення — його властивості (тип, координати, розмір, колір, z-index). Для складених об'єктів (шлях з точок) — Y.Array точок всередині об'єкта.

const yobjects = ydoc.getMap('objects');

// Додаємо стрілку
yobjects.set(uuid(), {
  type: 'arrow',
  x1: 100, y1: 200,
  x2: 400, y2: 350,
  strokeColor: '#1a1a2e',
  strokeWidth: 2
});

Конкурентне переміщення одного об'єкта двома користувачами: Last-Write-Wins — прийнятно для координат. Конкурентне видалення об'єкта одним і зміна іншим — стандартна проблема CRDT: операція зміни застосовується до вже видаленого об'єкта і втрачається. Потрібна tombstones-логіка або тимчасове зберігання «примарних» об'єктів.

Малювання пензлем: стрімінг точок

Вільне малювання (freehand) генерує 60–120 точок на секунду на 60Hz дисплеї. Відправляти кожну точку через WebSocket — надмірно. Оптимізація:

1. Буферизація — надсилаємо batch точок кожні 50ms.
2. Алгоритм спрощення — Douglas-Peucker прибирає зайві точки з configurable epsilon. Крива з 500 точок стискається до 30–50 без видимої втрати якості.
3. Stroke prediction — на iOS з Apple Pencil UITouch.predictedTouches передбачають наступні точки, знижуючи сприйнятну затримку.

Stroke як CRDT-об'єкт: починаємо з тимчасового Y.Array точок в Awareness (не в документі — не потрібна повна історія кожної точки). При завершенні (touchEnd) — фіксуємо спрощений шлях в документ як єдиний об'єкт. Це скорочує трафік до 90%.

Як вибрати технологію рендерингу?

Вибір стеку рендерингу залежить від платформи та вимог до продуктивності:

React Native: react-native-skia (Skia graphics engine) — найкращий варіант для продуктивного 2D-рендерингу. @shopify/react-native-skia підтримує Path, Paint, Text, Image. react-native-svg — простіше, але повільніше для анімованих об'єктів.

Flutter: CustomPainter з Canvas API — нативний шлях. Для production використовуємо кастомний CustomPainter з dirty-region optimization (перемальовуємо лише змінену область через Canvas.clipRect).

iOS Native: Metal + MetalKit для максимальної продуктивності, UIBezierPath + CALayer для середнього рівня складності. Apple PencilKit — готовий компонент з підтримкою Pencil, але обмежена кастомізація.

Android Native: Canvas API з Path для простих випадків, OpenGL ES / Vulkan через GLSurfaceView для складних.

Віртуалізація нескінченного холста

При 1000+ об'єктах рендеринг всього холста в кожному кадрі — проблема. Потрібен spatial index (R-tree або простий grid-based) для визначення об'єктів у поточному viewport. Рендеримо лише видимі об'єкти + невеликий буфер за краями viewport. rbush — JavaScript R-tree бібліотека, працює в React Native.

Синхронізація: що відправляти і коли

Cursor/viewport awareness (позиція користувача на холсті) — через Y.js Awareness, не в документ, 10fps достатньо.

Об'єкти в процесі створення — два режими:

• Тимчасовий preview через Awareness (інші бачать незафіксований об'єкт).
• Тільки фінальний об'єкт після touchEnd (простіше, але немає real-time preview малювання).

Перший режим дає кращий UX, другий — менше трафіку та складності.

Чому CRDT, а не OT?

CRDT (Yjs) забезпечує автоматичне вирішення конфліктів без серверного координатора. OT вимагає центрального сервера для впорядкування операцій, що збільшує затримку при поганому з'єднанні. CRDT з Yjs вдвічі швидший за OT в умовах нестабільної мережі, що критично для мобільних додатків. Детальніше про CRDT та Yjs.

Як ми розробляємо whiteboard: покроково

1. Аналіз вимог — визначаємо стек, опрацьовуємо об'єктну модель та сценарії синхронізації.
2. Проектування архітектури — схема даних, вибір CRDT-бібліотеки (Yjs), налаштування WebSocket/WebRTC.
3. Реалізація інструментів — пензель, фігури, текст, зображення з оптимізацією рендерингу.
4. Інтеграція синхронізації — підключення Yjs, тестування конфліктів.
5. Оптимізація продуктивності — віртуалізація холста, стиснення даних (коефіцієнт до 95% для шляхів), зниження затримки до 50 мс.
6. Тестування на реальних пристроях — iOS/Android, різні версії ОС, навантаження 100+ користувачів.
7. Деплой та підтримка — публікація в App Store/Google Play, документація API.

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

• Нехтування стисненням шляхів — надсилання всіх точок призводить до перевантаження каналу. Використовуйте Douglas-Peucker.
• Синхронізація через OT — збільшує затримку та потребує сервер. Обирайте CRDT.
• Рендеринг всього холста — падіння FPS при 500+ об'єктах. Обов'язково впроваджуйте віртуалізацію.
• Ігнорування Apple Pencil prediction — зайва затримка на iOS.

Етапи та терміни

Базовий whiteboard (фігури, текст, стрілки, синхронізація) на Flutter або React Native — 10–16 тижнів. З малюванням пензлем, pressure sensitivity, розумним спрощенням шляхів та віртуалізацією холста — 20–32 тижні. Вартість розраховується індивідуально залежно від складності.

Що входить у розробку whiteboard

• Документація архітектури та API.
• Вихідний код у репозиторії з CI/CD.
• Інтеграція з вашою системою аутентифікації (опціонально).
• Навчання команди замовника.
• Гарантійна підтримка 3 місяці.

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

Інтеграція 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 день — зв'яжіться з нами для консультації. Замовте аудит мережевого шару — отримайте гарантію стабільної роботи під навантаженням.