Розробка мобільного додатку для онлайн-школи
Онлайн-школа у мобільному вигляді — це не просто «веб-сайт у WebView». Як тільки додаємо офлайн-доступ до курсів, відео з адаптивним бітрейтом та прогрес учня, що синхронізується між пристроями, складність проекту піднімається на рівень повноцінного edtech-продукту. Розбираємо, що під капотом.
Відео — найдорожча частина архітектури
Навчальне відео в онлайн-школі — це не YouTube-embed. Потрібна:
-
DRM-захист від скачування: на iOS —
FairPlay Streaming, на Android —Widevine. Flutter пакетbetter_playerпідтримує обох через DRM-конфіги, але налаштування ліцензійного сервера (KSM для FairPlay або Widevine License Server) — окрема інфраструктурна задача - Адаптивний стрімінг: HLS для iOS, DASH для Android, трансcodинг через AWS Elemental MediaConvert або Cloudflare Stream
-
Офлайн-перегляд: зашифрована завантаження через
flutter_downloader+ AES-256 ключі, привязані до deviceId — щоб скачане не працювало на іншому пристрою
Типічна помилка: використовувати video_player пакет без DRM. App Store не відхилить, але перший скрипт для запису екрану знімет весь ваш контент.
Прогрес, геймифікація та адаптивність
Прогрес уроку — не просто «watched: true». Потрібна гранульярність: відсоток перегляду (користувач дошел до 73%), остання позиція для resume, результати тестів. Зберігати локально в Hive або drift (SQLite), синхронізувати з сервером при відновленні мережі — паттерн offline-first з connectivity_plus та чергою подій.
Геймифікація (бали, бейджі, стрики) добре працює в edtech та утримує MAU. Реалізація: серверний gamification-service з евент-шиною, клієнт підписується на achievement_unlocked події через WebSocket або Firebase Cloud Firestore snapshots(). Анімація отримання нагороди — Lottie файл через lottie пакет Flutter.
Адаптивне навчання — більш складна історія. Якщо школа хоче рекомендувати наступний урок на основі результатів тестів, потрібна проста ML-модель або rule-based логіка на бекенді. На Flutter-клієнті — лише відображення рекомендацій, вся логіка серверна.
Архітектура додатку
Clean Architecture обов'язкова при такій складності:
lib/
core/ # DI (GetIt), Network (Dio), Storage (Hive)
features/
courses/ # domain / data / presentation
player/ # domain / data / presentation
profile/ # domain / data / presentation
auth/ # JWT + refresh token rotation
Стан — BLoC (flutter_bloc 8.x): передбачуваний, тестовий, добре масштабується при команді 3+ розробників. Навігація — go_router з deep linking (відкрити конкретний урок за посиланням із email-розсилки).
Інтеграції:
| Функція | Інструмент |
|---|---|
| Відео стрімінг | Cloudflare Stream / AWS MediaConvert |
| DRM | FairPlay + Widevine |
| Push-сповіщення | Firebase Cloud Messaging |
| Аналітика прогресу | Amplitude / Mixpanel |
| Платежи | Stripe / YooKassa |
| Живі вебінари | Agora / Zoom SDK |
| Сертифікати | PDF generation на сервері, share через share_plus |
Публікація та ASO
Додатки онлайн-шкіл проходять ревю App Store за гайдлайном 3.1.1 — якщо продаєте курси всередині додатку, Apple вимагає In-App Purchase. Обхідний шлях — «цифрові послуги, споживані поза додатком» — працює, але вимагає ретельного опису в метаданих. Google Play у цьому плані м'якший, але теж має обмеження на зовнішні платіжні посилання для певних категорій.
Процес та часова шкала
Етапи: аудит контентної моделі → проектування схеми даних → UI/UX Figma → розробка → QA → бета-тест із реальними учнями → публікація → підтримка.
MVP (курси, відео без DRM, тести, прогрес): 12–16 тижнів. Повноцінна платформа з DRM, офлайном, геймифікацією, вебінарами: 24–32 тижні. Вартість розраховується індивідуально після аналізу контентної моделі та вимог масштабування.
Що часто недооцінюють
Підтримка різних ролей (учень / вчитель / адміністратор / куратор) вимагає RBAC на рівні API — не «перевірка ролі в if-else на клієнті». Клієнтський код завжди можна реверс-інжинірити. Кожен endpoint повинен перевіряти розрешення незалежно від того, що показує UI.