Разработка с нуля платформы для изучения иностранных языков

Главное о кейсе

Арабский стартап решил выйти на рынок онлайн-образования с платформой для изучения иностранных языков, в которую входят сайт и мобильные приложения под iOS и Android.

На платформе регистрируются преподаватели, подтверждают свою квалификацию и предлагают услуги. Уроки проходят в виде аудио- и видеозвонков, можно заниматься индивидуально или в группе, а также участвовать в коллективных беседах. Ученики выбирают язык, цену, форму; занятия оплачиваются поурочно, допустимо поменять преподавателя.

За помощью в создании платформы заказчик обратился в Doubletapp.

Как проект изменил жизнь пользователей

Платформа предлагает пользователям-преподавателям и пользователям-ученикам удобный механизм для быстрой реализации их задач:
- преподавателям не нужно самим через местные платформы искать себе учеников в каждой стране, договариваться об оплате в валюте конкретной страны, подключать перевод денег, следить за регулярностью выплат без долгов, организовывать площадку для занятий, подбирать устойчиво работающие онлайн-инструменты для проведения уроков с каждым из учеников;
- ученикам не нужно изучать предложения преподавателей в разных каналах, подстраиваться под систему оплаты и инструменты связи, а можно сразу выбрать из проверенных специалистов, подобрать подходящий по цене вариант, поменять преподавателя при необходимости.

В целом обучение через разговорную практику с носителями и преподавателями помогает лучше понимать и закреплять теорию, чувствовать себя увереннее в общении, усваивать современные живые формы языка, интонационно верно говорить, лучше понимать разговорную речь и не бояться переспрашивать.

Для тренировки письменной коммуникации предусмотрены чаты, все участники платформы могут создавать их для учебных целей или неформального общения. Администратор сервиса следит за соблюдением этических норм на площадках, разбирает жалобы и закрывает доступ к платформе нарушителям спокойствия.

Бизнес-задача и ее решение

Команда Doubletapp с нуля разработала и запустила сайт для пользователей и административную панель для владельцев платформы, а также мобильные приложения под iOS и Android. Функциональность сайта и приложений одинаковы, личные настройки синхронизированы.

Так как заказчик ориентируется на международную аудиторию — его интересует и американский, и европейский, и ближневосточный рынок — для изучения доступны европейские языки (английский, арабский, французский, немецкий, итальянский и испанский), а также арабский. Доступна также локализация и адаптация интерфейса платформы под эти языки.

Пользователям сайта доступны две роли — преподавателей и учеников. Преподаватель регистрируется на портале, предоставляет документы об образовании, их изучает и одобряет администратор сайта. После этого он может начинать вести уроки и получать за это деньги.

Онлайн-уроки идут в форме Chat room — групповых занятий по предварительно согласованному расписанию и Exchange room — индивидуальных встреч. Дополнительно студенты и преподаватели могут общаться в чатах, куда помимо текста можно загрузить медиаконтент или PDF-файлы.

Владелец сервиса и члены его команды взаимодействуют с преподавателями и учениками через административную панель: мониторят поведение участников, размещают и редактируют статьи и новости.

Крафт (мастерство), реализация, технические детали

Мы разработали два веб-приложения — сайт и административную панель. Сайт написан на React, с ним использовали Next.js для SEO-оптимизации. Язык программирования для веба — TypeScript.

ВСТРЕЧИ
Уроки на платформе — по сути видеозвонки, и заказчик вначале предлагал сделать интеграцию через Zoom. Но в этом случае нужно было решать вопрос с владельцами Zoom, заказчику это не подошло, и он предложил взять опенсорсную систему интернет-телефонии Jitsi. Сервис Jitsi для видеосвязи всех устроил, потому что он работал и с веб-приложениями на React, и с мобильными приложениями на Flutter.

Опенсорсное решение пришлось дорабатывать под нужды проекта, например, вводить ограничение времени урока. Технически пользователи Jitsi могут вести общение часами, из коробки ограничения нет, а на учебной платформе нужно ограничить время урока, так как оно оплачивается. Создатель Chat room сам указывает продолжительность встречи и выбирает время в диапазоне от 15 минут до двух часов. Для решения задачи доработали плагин Time restricted plugin: он обращался на наш бэкенд по ID встречи, а в ответе запроса приходит длительность встречи. Jitsi внутри себя обращается к нашему бэкенду, получает информацию о встрече, и, соответственно, заканчивает встречу в заданное время.

Следующая задача — отслеживать, когда человек вошел на встречу и покинул ее. Плюс нужно убрать возможность для пользователя заходить одновременно на несколько встреч. В Jitsi из коробки этого также нет. Здесь использовали плагин Event Sync, он нужен, чтобы вебхук получал события от Jitsi. То есть на бэкэнд приходит событие — встреча создалась, человек вошел на встречу, человек вышел из встречи, встреча завершилась. И мы на уровне бэкэнда можем отслеживать, что человек, например, находится на другой встрече, поэтому он не сможет войти на вторую встречу. Или, допустим, человек уже находится на встрече, и он не сможет дважды подключиться на одну и ту же встречу. Благодаря этому плагину мы получаем эту информацию и сохраняем ее в базе данных.

Однако вебхук работает по протоколу HTTP, а события по протоколу HTTP обрабатываются не по порядку: могла возникнуть ситуация, что сначала человек вошел на встречу, а потом встреча создалась. Для решения нужно, чтобы все запросы, которые отправлял Jitsi, были синхронными. Целостности данных добились следующим образом: использовали доработанный плагин Event Sync, добавили очередь RabbitMQ: Jitsi отправляет HTTP-запрос очередь в RabbitMQ, и события обрабатываются по порядку.

Распределение ролей на платформе происходит с помощью JWT-токенов. Плагин, с помощью которого выдаются права модератора, называется Token Moderation. Бэкенд генерирует JWT-токен, передает этот токен на фронтенд, фронтенд передает этот токен в SDK Jitsi. Если это Flutter (мобильная версия) — то во Flutter SDK, если это React (веб-версия) — то в React SDK. И на уровне вот этого JWT-токена прописывается в пейлоаде информация о том, что конкретный пользователь — модератор, и ему даются модераторские права: удалять или добавлять пользователей на встречу.

ЧАТЫ
Чаты могут создавать и писать и в них все пользователи сервиса. Для загрузки текста и вложений используется открытый протокол WebSocket. Он позволяет установить прямое соединение и «слушать» события, которые приходят с сервера. То есть по умолчанию мы не можем узнать, что на сервере что-то изменилось. А благодаря WebSocket у нас идет двусторонняя связь: один пользователь отправил сообщение, оно улетело улетело на сервер, сервер уже второму клиенту спустил событие, что у нас новое сообщение, и оно отобразилось.

ОПЛАТЫ
Заказчик планировал использовать PayPal, но проект задумывался как международный, и есть сложности с прохождением оплат в разных странах. В итоге выбрали сервис Stripe, который агрегирует несколько способов оплаты, и ими удобно управлять. Сценарий реализации: события с вебхука Stripe поступают в очередь RabbitMQ и обрабатываются.

Выплаты преподавателям происходят 1-го числа каждого месяца: создается задача, проходит по всем преподавателям и выплачивается гонорар за прошедший месяц за вычетом услуг платформы. У преподавателей есть страничка, где они могут посмотреть список транзакций, а у владельцев платформы в Stripe — дашборд, где можно смотреть все выплаты, формировать отчет и экспортировать его в Excel.

Ученики регистрировались на платформе и оплачивали уроки через подписную модель. Мы проверили, удобно ли пользователям взаимодействовать с платформой, и для этого создали тестовые стенды. Например, мы регистрировали Stripe Customer, клиента Stripe, и проводили с помощью реальных банковских карт все финансовые операции типа оплаты и подписки: человек оформил подписку, нужно, чтобы через месяц деньги списались. Приходит ли на почту ссылка для перехода и подтверждения платежа? Работает ли автоматическая отписка, если платеж не поступил в оговоренный срок? В самом Stripe есть инструментарий, который позволяет перематывать время подписки, чтобы можно было протестировать все операции.

АДМИНПАНЕЛЬ
В блог на сайте через текстовый редактор можно загружать новости и статьи, форматировать и редактировать их, добавлять иллюстрации. Мы использовали коробочное решение, но оно не позволяло полностью реализовать ТЗ, поэтому дописали собственный плагин и подобрали библиотеку, которая могла поддерживать дополнительные самописные плагины для реализации кастомных решений внутри текстового редактора.

Модерация на платформе — это не только удаление нарушителей порядка, но также и прием и рассмотрение заявок от преподавателей. Соискатель при регистрации указывает, что он хотел бы давать уроки, у него открывается форма для загрузки подтверждающих документов. Администратор просматривает новые заявки, выдает апрув или отказывает. В случае подтверждения заявки у преподавателя меняется статус и права доступа.

МОБИЛЬНЫЕ ПРИЛОЖЕНИЯ НА FLUTTER
Для разработки мобильных приложений мы выбрали быстрые экономичные решения — Flutter: труд разработчиков стоит дорого, и быстрее в плане разработки — значит дешевле. В ограниченные сроки необходимо было разработать идентичные приложения под iOS и Android, и технология идеально подходила под эту задачу.
Начиная разработку мобильного приложения всегда надо держать в уме требования Google Play и App Store и учитывать их при планировании будущего функционала. Например, при добавлении в приложение чата между пользователями нужно обязательно добавлять возможность блокировки. Учитывая все эти требования и спланировав заранее возможные вопросы от ревьюеров, мы минимизировали время, затраченное на ревью сложного по функционалу приложения.

МЕНЕДЖМЕНТ
В целом работы велись по гибкой системе взаимодействия между разработчиками, зачастую одновременно и параллельно. Например, бэкенд только закончил фичу авторизации, и тут же фронтенд и мобильщики берут ее в работу.
У проекта был фиксированный бюджет, и мы, не выходя за его рамки, смогли действовать максимально гибко, чтобы в итоге зарелизить готовый продукт, которым можно пользоваться.

ТЕХНОЛОГИИ
Фронтенд: React, Next.js, TypeScript, Jitsi, Stripe, Tanstack Query, CSS Modules, Storybook, Material UI
Бэкенд: Python, FastAPI, Nginx, PostgreSQL, RabbitMQ, Redis, Jitsi, Lua, Stripe
Мобильная разработка: Dart, Flutter, BLoC, Retrofit, GetIt + injectable, Jitsi, Stripe

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Для заказчика это был дебютный проект. Он пришел к нам с идеей и набросками дизайна, и перед началом работ мы вместе переводили его идею в ТЗ, придумывали, что именно мы хотим сделать, как оно будет работать, как это можно реализовать в принципе, корректировали дизайн. По итогу совместной работы стартап получил готовый проект, в котором появились пользователи, а также новый раунд инвестиций на развитие платформы.

Видео