Текстовий пост — основа соціального застосунку. Але часто бачимо, як команди спрощують реалізацію до «TextField + кнопка Відправити», а потім отримують скарги: користувач написав довгий текст, згорнув застосунок — чернетка зникла. Або відправив пост при слабкому інтернеті — помилка, і все заново. Наш 5-річний досвід у розробці (30+ проєктів з публікацією контенту) показує: ці деталі критичні для утримання аудиторії. Інша проблема — конфлікт версій: користувач редагує пост, а інший клієнт уже змінює ту саму чернетку. Без версіонування дані втрачаються. Нижче — як ми вирішуємо ці задачі та що входить у реалізацію.
Як ми проєктуємо редактор тексту?
У мінімальному випадку використовуємо UITextView на iOS або BasicTextField на Android — якщо форматування не потрібне. Обов'язково включаємо автокорекцію, перевірку орфографії та автоматичне розширення висоти до 5–6 рядків. На iOS це налаштовується через NSLayoutConstraint з оновленням у textViewDidChange. Коли потрібне форматування (жирний, курсив, списки), вибір стека залежить від платформи:
| Платформа |
Інструмент |
Особливості |
| iOS |
UITextView + NSAttributedString або RichTextKit |
RichTextKit — open source, підтримка вставки, збільшення бінарника на ~800 КБ |
| Android |
SpannableStringBuilder + EditText або Markwon |
Markwon зручний для Markdown-прев'ю, легкий |
| Flutter |
flutter_quill |
Delta-формат, додає ~2 МБ, потребує конвертації на сервер |
Зберігати текст на бекенді рекомендується в HTML або Markdown — нейтральні формати, клієнт конвертує при завантаженні. Це спрощує інтеграцію з веб-версією. Докладніше про Markdown.
Чому чернетки обов'язкові?
Користувач часто залишає екран створення поста ненавмисно — дзвінок, сповіщення, згортання застосунку. Без збереження чернетки втрата контенту становить до 40% (наші тести на 30 проєктах). Ми реалізуємо автозбереження з дебаунсом 1–2 секунди: кожна зміна тексту записується в UserDefaults (iOS) або DataStore (Android). Ключ — draft_post або draft_post_{channel_id} для мультиканальних застосунків. При відкритті редактора перевіряємо наявність чернетки та пропонуємо відновити. Після публікації або скидання — очищаємо. На Flutter використовуємо SharedPreferences або Hive з debounceTime(Duration(seconds: 1)).
Одного разу ми впроваджували публікацію в застосунку для блогерів. Користувачі вставляли довгі тексти з форматуванням. Виявили, що при автозбереженні в UserDefaults на iOS, якщо застосунок вивантажують з пам'яті, чернетка не зберігається. Перейшли на CoreData з фоновим контекстом — надійність збереження зросла до 99%.
Приклад чек-листа для чернеток
- [ ] Автозбереження з debounce 1-2 сек
- [ ] Відновлення при відкритті редактора
- [ ] Очищення після публікації
- [ ] Підтримка мультиканальності
Як реалізувати публікацію з поганим інтернетом?
Стандартний підхід — оптимістичне оновлення + черга повторів. При натисканні «Опублікувати»:
- Генеруємо локальний
client_post_id (UUID).
- Одразу додаємо пост у стрічку зі статусом
pending (сірий індикатор).
- Відправляємо запит на сервер. При успіху — замінюємо ID, прибираємо індикатор.
- При помилці — показуємо статус «Не відправлено» з кнопкою «Повторити».
На Android для повторів при відновленні мережі використовуємо WorkManager з NetworkConstraint, на iOS — BGTaskScheduler або NWPathMonitor. Це скорочує кількість втрачених публікацій на 30–50% порівняно з синхронною відправкою. Порівняння підходів:
| Критерій |
Синхронна публікація |
Оптимістичне оновлення |
| Час відгуку для користувача |
2-5 секунд при слабкому інтернеті |
Миттєве (локальне) |
| Втрати даних при помилці |
100% |
0% (пост залишається в pending) |
| Повтор при відновленні мережі |
Вручну |
Автоматично через WorkManager/BGTask |
Перед деплоєм проводимо тестування офлайн-сценаріїв: відключення інтернету, перемикання режимів, симуляція тайм-ауту. Це дозволяє виявити гонки та покращити UX.
Валідація та обмеження
Ліміт символів відображаємо лічильником (підхід Twitter: червоний мінус після перевищення). Кнопка публікації активна лише при text.trimmingCharacters(in: .whitespacesAndNewlines).count > 0. Згадування (@username) та хештеги (#tag) парсимо regex з підсвіткою через NSAttributedString/AnnotatedString. Також підтримується вставка посилань з автоматичним розпізнаванням.
Що входить у роботу
- Проєктування структури поста та API (специфікація GraphQL або REST)
- Реалізація редактора з автозбереженням чернеток
- Логіка публікації з оптимістичним оновленням та retry
- Обробка помилок та повтор при відновленні мережі
- Валідація контенту та відображення лічильника
- Тестування офлайн-сценаріїв на реальних пристроях з різними версіями ОС
- Документація API та передача доступів (TestFlight, Google Play Console)
- Навчання команди замовника та підтримка 1 місяць
Терміни та вартість
Вартість розраховується індивідуально залежно від складності. Орієнтовний термін: простий редактор з чернеткою та retry — 2–3 дні, з форматуванням та згадуваннями — 5–7 днів. Для точної оцінки зв'яжіться з нами — ми проаналізуємо вимоги та запропонуємо оптимальне рішення. Отримайте консультацію: ми гарантуємо якість та досвід понад 5 років.
Розробка чатів та соціальних функцій: чат, VoIP, стрічка та реакції
Ми проектуємо чат не як «просто WebSocket + повідомлення», а як систему з офлайн-доступом, відображенням історії при поганому з'єднанні, індикаторами друку, статусами прочитання та push-повідомленнями. Це має працювати на Android 8 з 512 MB RAM без ANR — інакше користувачі просто йдуть. Ми маємо 5+ років досвіду у розробці соціальних модулів, понад 50 реалізованих проектів — від стартапів до enterprise. Розробка чатів — наш ключовий напрям.
Як ми підходимо до розробки чатів?
Вибір протоколу та сховища — перша точка, де помиляються. WebSocket, XMPP або готовий SDK — кожен варіант диктує бюджет часу та надійність.
Як обрати протокол для чату?
- Готовий чат SDK (SendBird, Stream Chat, Cometchat) дає UI-компоненти, серверну інфраструктуру, push та модерацію. Швидко, надійно, але vendor lock-in та recurrent costs. Для MVP — оптимально. Ліцензія SendBird для проекту з 10К користувачів — ~$400/міс.
- Firebase Realtime Database / Firestore — для простих чатів без вимог до масштабованості >100K конкуретних з'єднань. Realtime Database зручніше для впорядкованих списків повідомлень, Firestore — для структурованих даних. Typing indicators та presence реалізуються окремо через onDisconnect().
- Власний бекенд з WebSocket — повний контроль, максимальна кастомізація. Стек: Node.js +
socket.io або Phoenix Channels (Elixir), PostgreSQL + Redis для pub/sub. На мобільному: Starscream (iOS Swift), OkHttp WebSocket (Android), socket_io_client (Flutter). Час розробки в 2–3× більше, але zero vendor risk. Кастомний WebSocket дає в 2 рази меншу затримку, ніж Firebase для високочастотних чатів. В одному проекті ми обрали кастомний WebSocket і зменшили витрати на ліцензії на $12 000 на рік.
| Функція |
Готовий SDK |
Кастомна реалізація |
| Базовий чат |
SendBird, Stream |
WebSocket + Room/GRDB |
| VoIP |
Twilio, Agora |
WebRTC + CallKit |
| Стрічка |
— |
Paging 3 / DiffableDataSource |
| Push для соц. подій |
Firebase FCM/APNs |
APNs direct |
Чому важливо продумувати офлайн-режим заздалегідь?
Офлайн-режим — найтрудомісткіша частина чату. Повідомлення зберігаються в SQLite (iOS: GRDB, Android: Room) з локальним ID, синхронізуються при відновленні з'єднання. Конфлікти при одночасному відправленні вирішуються через vector clock або server-timestamp ordering. Якщо не закласти це в архітектуру з першого спринту, переписувати половину коду доведеться за 2–3 тижні до релізу. В одному проекті ми скоротили час переписування з 4 до 1,5 тижня, застосувавши cursor-based pagination замість offset — при вставці нових елементів курсор не зсувається, дублі не виникають. Середня затримка доставки повідомлення після оптимізації — менше 150 мс.
VoIP: CallKit, ConnectionService та WebRTC
VoIP у мобільному додатку розбивається на два сценарії: системний UI (виглядає як дзвінок телефону) або дзвінок всередині додатку. CallKit (iOS) інтегрується через CXProvider + CXCallController — показує вхідний виклик на Lock Screen, працює з Bluetooth та перериває інші аудіо. Додаток запускається через VoIP push (PKPushKit) навіть коли вбито.
На Android аналог — ConnectionService API. Інтеграція складніша, поведінка варіюється між виробниками (Xiaomi, Samsung агресивно вбивають фонові процеси через battery optimization). WebRTC — транспорт для P2P медіа. Сигнальний сервер (SDP, ICE candidates) — зазвичай через той же WebSocket канал. STUN/TURN обов’язкові: без TURN ~15–20% користувачів за симетричним NAT не побачать виклик. coturn — open source рішення, Twilio NTS та Metered TURN — managed.
Стрічка та реакції
Нескінченна стрічка — UICollectionView з UICollectionViewDiffableDataSource на iOS, LazyColumn з Paging 3 на Android. Pagination через cursor-based підхід — він не зсувається при вставці нових елементів, на відміну від offset. Реакції (емодзі на повідомлення): кожна реакція — запис (message_id, user_id, emoji), агрегація на сервері GROUP BY emoji. WebSocket-подія reaction_added оновлює лічильник у реальному часі. Анімація появи — через withSpring (Reanimated) або Core Animation spring. У проекті з соціальною мережею ми обслуговували до 80 000 одночасних з’єднань на одному інстансі — стрічка залишалася чуйною.
Push-повідомлення для соціальних подій: @згадка, відповідь, новий підписник — через APNs та FCM. Для rich notifications (прев’ю медіа) на iOS — Notification Service Extension, який завантажує медіа до показу. Після впровадження таких повідомлень утримання користувачів зросло на 30%.
Що входить в роботу: повний список deliverables
Ми постачаємо не тільки код — ось повний перелік того, що ви отримуєте:
- Проектування схеми даних (SQLite, Firestore, PostgreSQL) з урахуванням offline-first та масштабування до 1M користувачів.
- Реалізація клієнт-серверного протоколу (WebSocket, REST, GraphQL) з підтримкою reconnection та heartbeat.
- Інтеграція push-повідомлень (APNs, FCM) з генерацією сертифікатів та налаштуванням ключів.
- Налаштування TURN-серверів або вибір managed-провайдера (наприклад, Twilio NTS) для VoIP.
- Документація API та схема міграцій (включаючи rollback-план).
- Доступ до репозиторію, CI/CD (GitHub Actions + Fastlane), TestFlight / Google Play Console.
- Навчання команди (code review перших 2 спринтів) та передача знань.
- On-call підтримка протягом 2 тижнів після релізу.
Типові помилки при розробці чатів та як їх уникнути
- Відсутність reconnection стратегії. Клієнт просто відключається без черги невідправлених повідомлень. Рішення: heartbeat, exponential backoff, локальне зберігання вихідних з позначкою pending.
- Offset пагінація в стрічці. При вставці нових постів користувач бачить дублі. Рішення: cursor-based pagination — вона в 5 разів стабільніша при частих оновленнях.
- Ігнорування battery optimization на Android. ConnectionService не доживає до вхідного виклику. Рішення: foreground service з постійним повідомленням або інтеграція через Firebase Cloud Messaging для пробудження.
- Голий WebSocket без протоколу поверх. Це винахід велосипеда. Використовуйте platform-agnostic JSON або MessagePack з type-флагом.
Стек технологій, що використовується в типовому проекті:
- iOS: Swift 5.9+, SwiftUI, Combine, async/await, Starscream, GRDB
- Android: Kotlin, Jetpack Compose, OkHttp WebSocket, Room, Hilt DI
- Cross‑platform: Flutter 3.x (Dart) або React Native (TypeScript)
- Backend: Node.js + socket.io або Phoenix (Elixir) + PostgreSQL + Redis
- Push: APNs / FCM з сертифікатами та ключами
- VoIP: WebRTC + coturn TURN server
⏱ Терміни орієнтовно
| Модуль |
Оцінка |
| Базовий чат з історією та push |
4–6 тижнів |
| VoIP дзвінки з CallKit / ConnectionService |
3–5 тижнів |
| Соціальна стрічка + реакції + коментарі |
від 3 місяців |
Вартість розраховується індивідуально після аналізу вашого технічного завдання та існуючої архітектури. Напишіть нам для оцінки проекту — ми запропонуємо дві опції: швидке впровадження через готові SDK або повністю кастомізоване рішення. Отримайте консультацію та точний кошторис протягом 2 робочих днів. Замовте розробку чату вже сьогодні — ми гарантуємо коректну роботу на Android 8+ та iOS 14+.