Перезапуск онлайн-школы
по подготовке к ЕГЭ

Онлайн школа Вебиум

Вебиум

В 2021 году у Вебиума уже была рабочая система на Ruby, которую разрабатывали подрядчики-аутcорсеры. К нам они обратились с привычной проблемой — подрядчики медленно пилят фичи.

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

Задачи

  1. Сделать так, чтобы фичи, которые хочет бизнес, создавались в предсказуемые сроки. Обострённый пример: «давайте добавим вот эту маленькую штуку; конечно, будет завтра (возвращаются через две недели), ой нет, это займет полгода» (и это ещё хорошо, если вернутся с таким честным ответом).
  2. Нанять технического директора и создать внутреннюю команду разработки, чтобы в будущем не зависеть от аутсорса.
  3. Сделать всё это «на лету», без остановки образовательного процесса, без потерь для бизнеса.
Задачи
Главная страница Вебиума — онлайн-школы, которую ждал нескучный перезапуск
Папки и счета
Главная страница Вебиума — онлайн-школы, которую ждал нескучный перезапуск

Разбили работу
на два больших этапа

Запуск нового магазина

Часть сайта, где школьники и родители покупают курсы

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

(Learning Management System, LMS). В LMS школьники учатся: смотрят вебинары и учебные материалы, решают задания и общаются с наставниками.

Интерфейс видео-уроков
Главная страница Вебиума — онлайн-школы, которую ждал нескучный перезапуск

Часть первая:
перезапуск магазина

6 месяцев
Перезапуск магазина давал бизнесу два ключевых профита: корзину и прозрачную аналитику. В старом Вебиуме было серьёзное ограничение: один курс = один чек. Это плохо и для бизнеса, и для учеников.

Вот что нам нужно было сделать:

  • Удобную корзину с возможностью купить сразу пачку курсов со скидкой;
  • Структуру данных, которая не вызывает желания постричься в монахи.
Архитектура
Для каждой системы создали отдельную базу данных. Это кусочек функциональной схемы добавления товара в корзину с учетом скидок.
Вебиум - Архитектура
Так выглядит корзина в новом магазине.
Вебиум - Корзина
Для маршрутизации трафика мы использовали  комбинацию из traefik и Express.js. Express.js выполняет роль BFF (Backend for Frontend). Так выглядит схема маршрутизации трафика с помощью прокси на Express.js.
Traefik и Express.js.

На схеме показаны примеры 3 видов запросов:

  1. privacy-policy (желтый) — статичная страница нового магазина. Express.js обрабатывает запрос и отдает результат клиенту.
  2. api/v2/courses (синий) — запрос к новому бэкенду. Запрос проксируется в новый Python-бэкенд, результат отдается клиенту.
  3. certificates  (красный) — страница из LMS. Express.js приложение ничего не знает про такой путь. Запрос проксируется в Ruby-приложение, результат отдается клиенту.

Запуск магазина

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

Вебиум-Чеклист

Ни один пользователь не столкнулся с проблемами непосредственно в процессе оплаты: все, кто хотели заплатить Вебиуму деньги, смогли это сделать. Мы этим гордимся.

Часть вторая:
Перезапуск LMS

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

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

Сценарии LMS можно разделить на 5 групп:

  1. Работа с курсами, расписанием занятий и календарём — отдельно для учеников и для наставников.
  2. Автоматическое и ручное распределение учеников по группам.
  3. Учебный контент: просмотр вебинаров и уроков, решение и проверка заданий.
  4. Просмотр и рассылка уведомлений на сайте и в VK для учеников и сотрудников.
  5. Чаты с обсуждением заданий: отдельно для учеников и наставников.
Высокоуровневая архитектура нового Вебиума из архитектурной документации, которую мы передали вместе с проектом
Вебиум-Новая архитектура

Сценарии LMS можно разделить на 5 групп:

  1. Аутентификация и авторизация учеников;
  2. Уведомления;
  3. Учебный контент;
  4. Чаты наставников и учеников;
  1. Курсы и их жизненный цикл;
  2. Распределение учеников по группам;
  3. Аутентификация и авторизация и управление ролями сотрудников.
Коммуникация между ключевыми элементами LMS. Стрелки в левой части ведут из магазина.
Коммуникация между ключевыми элементами LMS
Для мониторинга и трекинга ошибок мы используем проверенные инструменты — Datadog и Sentry. Для CI/CD впервые использовали GitHub Actions вместо Circle.
Datadog

Запуск LMS

7 месяцев
Как и в случае с магазином, нам нужно было интегрировать новую систему с существующей. На запуске магазина нужно было интегрироваться со старой LMS, на запуске LMS — с новым магазином.

В итоге систему запускали частями:

  • webium.ru — сайт магазина;
  • lms.webium.ru — сайт LMS. До запуска там была старая LMS, после запуска — новая;
  • Админка LMS;
  • Запасной домен, на который переедет старая LMS после запуска.
Вебиум - Отзывы
Мы настолько дотошно подготовились к продакшену, что запуск получился очень спокойным. Вот такую обратную связь оставляли ученики в чатах Вебиума.

Что дальше

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

Сейчас у Вебиума есть не только классные руководители, маркетологи, продакты, проджекты, дизайнеры, наставники и преподаватели, но и классные программисты. А мы очень гордимся проделанной работой. И готовы двигаться дальше.

Команда

ФАНС

Фёдор Борщёв,
Самат Галимов

технические директора

Никита Алёшников,

бэкенд-разработчик

Андрей Бацунов,

фронтенд-разработчик

Алексей Богословский,

фулстек-разработчик

Михаил Бурмистров,

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

Антон Давыдов,

архитектор

Николай Кирьянов

бекенд-разработчик

Никита Лазаренко,

бэкенд-разработчик

Вячеслав Набатчиков,

бэкенд-разработчик

Александр Нестеров,

фронтенд-разработчик

Ксения Сафронова,

менеджер проекта

Эдуард Степанов,

бэкенд-разработчик

Владимир Тарановский,

фронтенд-разработчик

Алексей Чудин,

ведущий бэкенд-разработчик

Вебиум

Роксана Боровик,

генеральный директор

Виктория Гармаш,

продакт-менеджер

Никита Савостин,

технический директор

Александр Евграфов,

арт-директор

Алина Тупикова,

продуктовый дизайнер

Богдан Пилявец,

ведущий аналитик

Aндрей Алейников,

аналитик

Михаил Герун,

менеджер проекта

Евгений Новиков,

менеджер проекта

Илья Конаныхин,

разработчик legacy-системы

Михаил Сахно,

бэкенд-разработчик

Кирилл Стариков,

фронтенд-разработчик

Сергей Волков,

фронтенд-разработчик

Елена Микиртумова,

верстальщица

Роман Ковалев,

ведущий
SEO-специалист

Ольга Рокоссовская,

техподдержка и
тестирование

Катерина Климова,

техподдержка и
тестирование

Павел Романов,

технический директор
на этапе подготовки
перезапуска

Евгений Юрьев,

разработчик
legacy-системы

Технологии

Проектирование и управление

Basecamp
FigJam
Figma

Разработка

Ruby
traefik
Express.js
Datadog

Другие проекты

Перезапуск культурной платформы «Синхронизация»

Резидент Сколково
Поэтапный запуск
Бесшовная миграция
Edtech
Пересобрали архитектуру и интерфейс личного кабинета, чтобы команда смогла полноценно развиваться как образовательный стриминг
Читать кейс

ERP система управления международными грузоперевозками

Защита данных
Электронный документооборот
Автоматизация бизнеса
Интеграция с государством
Прогнозирование ИИ
Разработали и внедрили личные кабинеты логиста, руководителя компании и клиента — автоматизировали ключевые операционные процессы, ускорили и повысили прозрачность бизнеса.
Читать кейс

Перезапуск информационной системы для сети клиник «Чайка»

Healthtech
Защита данных
Сервисная архитектура
Разработали архитектуру медицинской информационной системы для премиальной сети клиник на основе международного протокола FHIR.
Читать кейс