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

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

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

Задача платформы — сделать отношения между преподавателями иностранных языков и их студентами максимально простыми, удобными и прозрачными.

Преподавателям теперь не нужно:

- самим через местные платформы искать себе учеников в каждой стране,

- договариваться об оплате в валюте конкретной страны,

- подключать перевод денег, следить за регулярностью выплат без долгов,

организовывать площадку для занятий,

- подбирать устойчиво работающие онлайн-инструменты для проведения уроков с каждым из учеников.

Ученику теперь не нужно:

- искать предложения от преподавателей в разных каналах;

- подстраиваться под систему оплаты и валюту преподавателя;

- настраивать каналы для онлайн-занятий.

Зато можно:

- выбрать из проверенных специалистов;

- подобрать подходящий по цене вариант;

- поменять преподавателя.

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

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

Мы разработали два веб-приложения — сайт и административную панель. Сайт написан на 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: труд разработчиков стоит дорого, и быстрее в плане разработки — значит дешевле. В ограниченные сроки необходимо было разработать идентичные приложения под 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

Мы с нуля разработали и запустили сайт и мобильные приложения для iOS и Android.

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

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

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