Адаптировали платформу интерактивного обучения для международной аудитории

Учи.ру предлагает образовательные продукты, востребованные детьми в возрасте от 6 до 17 лет, в различных форматах: цифровые сервисы для самостоятельного обучения, онлайн-занятия с репетиторами, дополнительные занятия в офлайне. Платформа невероятно популярна и входит в десятку наиболее посещаемых EdTech-сайтов мира (по данным SimilarWeb).

С 2014 года Учи.ру развивает продукты на зарубежных рынках. Были запущены образовательные онлайн-курсы для детей в Бразилии, США, Канаде, Китае, Южной Африке и других странах мира. В начале ноября 2020 года в Индии запустили версию продукта с новым технологическим подходом — сервис по обучению математике и программированию DinoLab.

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

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

В начале октября 2020 года вместе с командой Учи.ру мы завершили создание новой онлайн-платформы для интерактивного обучения и образования DinoLab, а в начале 2021 года перешли к сопровождению проекта.

Сложность проекта

Сотрудничество с Учи.ру началось летом 2020 года. В течение двух месяцев мы усиливали собственную команду клиента: поддерживали существующую базу международных локализованных версий, исправляли ошибки, разрабатывали минорные фичи. В этот же период совместно с Леонидом Башлыковым, руководителем департамента международного развития Учи.ру, мы начали обсуждать расширение платформы онлайн-обучения и перестройки продукта под индийский рынок.

Клиент хотел, чтобы масштабируемый гибкий MVP был выпущен за три месяца, без технического долга. Но главный вопрос заключался в том, разрабатывать ли его как монолит, как два отдельных приложения, или просто привести в порядок существующую систему. В итоге вместе с Учи.ру мы решили пойти на технический эксперимент — сделать всё на основе микросервисов Ruby.

Поскольку сейчас глобальный рынок онлайн-образования «горячее», чем когда-либо, сроки были сжатые, а нам нужно было разобраться со множеством нюансов, особенно технических.

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

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

Мы разработали архитектуру микросервисов на Ruby, используя специальные фреймворки Rails и Roda, а также Karafka (фреймворк Ruby для работы с Kafka). Кроме того, создали несколько бэкенд-сервисов, например, сервис аутентификации и авторизации. Также реализовали сервис управления премиум-подпиской, биллинговый сервис и сервис триггерной рассылки.

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

Локализация платформы для интерактивного обучения

Некоторые готовые приложения Учи.ру нам пришлось адаптировать для интеграции в международную версию. Как правило, для этого использовали элементы iFrame, которые интегрировались в основной SPA. Поэтому пришлось разобраться, как наладить взаимодействие и синхронизацию основного приложения с содержимым iFrame’ов.

Потребовалось достаточно много времени, чтобы отделить существующий код сторонних приложений от тех, которые будут использоваться исключительно в международной версии DinoLab. Мы также переработали существующие компоненты в зависимости от режима работы (русская или международная версия).

В результате работы по адаптации интерактивной учебной платформы для международной версии 80% курсов работают внутри DinoLab, через плеер заданий в элементах iFrame. Остальная часть перенаправляется в сторонние приложения с последующим возвращением в DinoLab.

Фронтенд для EdTech-приложения

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

Мы создали довольно нестандартную модель, в которой функциональность интерфейса родителя на 90% совпадает с функциональностью интерфейса ребёнка, но в то же время родители могут переключаться между аккаунтами детей, не выходя из приложения. Они могут просматривать статистику и давать (если им так удобнее) задания конкретному ребенку без необходимости вводить логин/пароль для каждого.

Наш коллега из Учи.ру предложил разделить приложение на домены, а не на страницы/сервисы/хранилища, как обычно. В результате стало гораздо проще ориентироваться в коде проекта при поиске как бизнес-логики, так и компонентов, относящихся к интересующему домену (например, домену авторизации, дашборду, задачам и т. д.).

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

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

Платёжные решения для EdTech

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

Сначала мы пользовались PayU. Объект, полученный из корзины пользователя, отправлялся с помощью Kafka в платёжный сервис, где цена, информация о пользователе и сведения о продуктах собирались и отправлялись в платёжную систему через API. Однако потом приходилось дожидаться положительного ответа и сообщать через Kafka всем нашим сервисам, что платёж прошёл успешно. Также возникли трудности с интеграцией сервисов триггерных рассылок (уведомлений пользователя об успешном платеже) и управления подпиской (включая доступ пользователей к премиальному контенту).

В конечном итоге нас не удовлетворило качество PayU, и мы перешли к другому провайдеру — Cashfree. Благодаря гибкости и масштабируемости проекта переключиться было несложно, нам пришлось изменить всего лишь один сервис. Теперь сервис работает стабильно, отлично справляется с нагрузками и поддерживает несколько способов оплаты.

Инструменты фронтенд-разработки

• React.js — основной фронтенд-фреймворк.
• Redux — библиотека, которую мы использовали для создания хранилища данных приложения. Она позволяет нам очень быстро писать качественный код, делая все компактным, простым и удобным в обслуживании.
• Redux-Toolkit — используется для упрощения повторяющегося и «многословного» кода.
• RTK-Query — значительно упрощает взаимодействие с бэкенд API и хранение данных API в. Redux.
• Jest + react-testing-library — обеспечивает юнит-тестирование как бизнес-логики, так и визуальных компонентов приложения.
• Fullscreen API — API браузера, который решает проблему маленького экрана.
• React-Table — настраиваемая таблица со статистическими данными учащихся.
• React-Datepicker — пикер для выбора формата даты.

Мы также использовали Sentry, который позволяет нам отлавливать ошибки клиентских приложений в продакшене и предоставляет полезную трассировку стека для воспроизведения и исправления, а также ClickStream, который использует аналитику фронтенда для определения успешности проделанной работы.

Процессы работы

Ещё на начальном этапе клиент попросил нас помочь так организовать процессы и расширить возможности собственной команды Учи.ру, чтобы проект не был навсегда завязан на проект-менеджера компании Evrone.

Мы подготовили обширную документацию:

составили описания основных согласованных правил работы, а также описание процессов;

описали роли и ответственности, инструменты и процедуры для облегчения онбординга новых специалистов;

описали, как работать с Jira, проводить оценку и код-ревью.

В результате создана подробная база знаний о функциональности проекта, которая позволит передать проект собственной команде клиента без каких-либо проблем.

Заключение

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

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

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