Перезапуск онлайн-школы
по подготовке к ЕГЭ
Вебиум
В 2021 году у Вебиума уже была рабочая система на Ruby, которую разрабатывали подрядчики-аутcорсеры. К нам они обратились с привычной проблемой — подрядчики медленно пилят фичи.
Посмотрев код и оценив возможности команды, мы поняли, что рефакторить существующий код — долго и дорого, и решили перезапустить систему своими руками на привычном стеке — Django и Nuxt.js. Справились за год: с сентября 2022 все ученики покупают и проходят курсы в новой системе.
Задачи
- Сделать так, чтобы фичи, которые хочет бизнес, создавались в предсказуемые сроки. Обострённый пример: «давайте добавим вот эту маленькую штуку; конечно, будет завтра (возвращаются через две недели), ой нет, это займет полгода» (и это ещё хорошо, если вернутся с таким честным ответом).
- Нанять технического директора и создать внутреннюю команду разработки, чтобы в будущем не зависеть от аутсорса.
- Сделать всё это «на лету», без остановки образовательного процесса, без потерь для бизнеса.
Главная страница Вебиума — онлайн-школы, которую ждал нескучный перезапуск
Главная страница Вебиума — онлайн-школы, которую ждал нескучный перезапуск
Разбили работу
на два больших этапа
Запуск нового магазина
Часть сайта, где школьники и родители покупают курсы
Запуск новой платформы обучения
(Learning Management System, LMS). В LMS школьники учатся: смотрят вебинары и учебные материалы, решают задания и общаются с наставниками.
Главная страница Вебиума — онлайн-школы, которую ждал нескучный перезапуск
Часть первая:
перезапуск магазина
6 месяцев
Перезапуск магазина давал бизнесу два ключевых профита: корзину и прозрачную аналитику. В старом Вебиуме было серьёзное ограничение: один курс = один чек. Это плохо и для бизнеса, и для учеников.
Вот что нам нужно было сделать:
- Удобную корзину с возможностью купить сразу пачку курсов со скидкой;
- Структуру данных, которая не вызывает желания постричься в монахи.
Архитектура
Для каждой системы создали отдельную базу данных. Это кусочек функциональной схемы добавления товара в корзину с учетом скидок.
Так выглядит корзина в новом магазине.
Для маршрутизации трафика мы использовали комбинацию из traefik и Express.js. Express.js выполняет роль BFF (Backend for Frontend). Так выглядит схема маршрутизации трафика с помощью прокси на Express.js.
На схеме показаны примеры 3 видов запросов:
- privacy-policy (желтый) — статичная страница нового магазина. Express.js обрабатывает запрос и отдает результат клиенту.
- api/v2/courses (синий) — запрос к новому бэкенду. Запрос проксируется в новый Python-бэкенд, результат отдается клиенту.
- certificates (красный) — страница из LMS. Express.js приложение ничего не знает про такой путь. Запрос проксируется в Ruby-приложение, результат отдается клиенту.
Запуск магазина
Заранее тщательно проработали план отката: заполнили все необходимые для продаж данные и в новом магазине, и в старой системе. Подготовили фиче-флаги — переменные окружения, переключение которых моментально вернёт старую систему в строй.
Ни один пользователь не столкнулся с проблемами непосредственно в процессе оплаты: все, кто хотели заплатить Вебиуму деньги, смогли это сделать. Мы этим гордимся.
Часть вторая:
Перезапуск LMS
7 месяцев
Задача: перезапустить LMS — платформу, где ученики смотрят вебинары, решают задания и общаются с наставниками.
Вместе с LMS нужно было перезапустить админку для сотрудников.
Вместе с LMS нужно было перезапустить админку для сотрудников.
Интерфейс общения учеников и наставников — для каждого решенного задания есть своё обсуждение. В админке LMS много разных людей: контент-менеджеры, наставники, управляющие домашними заданиями, преподаватели предметов и супер-админы. У всех свои права и ограничения.
Так выглядит страница курса у ученика. просмотр вебинаров и уроков, решение и проверка заданий. Вот так выглядит корзина в новом магазине:
Сценарии LMS можно разделить на 5 групп:
- Работа с курсами, расписанием занятий и календарём — отдельно для учеников и для наставников.
- Автоматическое и ручное распределение учеников по группам.
- Учебный контент: просмотр вебинаров и уроков, решение и проверка заданий.
- Просмотр и рассылка уведомлений на сайте и в VK для учеников и сотрудников.
- Чаты с обсуждением заданий: отдельно для учеников и наставников.
Высокоуровневая архитектура нового Вебиума из архитектурной документации, которую мы передали вместе с проектом
Сценарии LMS можно разделить на 5 групп:
- Аутентификация и авторизация учеников;
- Уведомления;
- Учебный контент;
- Чаты наставников и учеников;
- Курсы и их жизненный цикл;
- Распределение учеников по группам;
- Аутентификация и авторизация и управление ролями сотрудников.
Коммуникация между ключевыми элементами LMS. Стрелки в левой части ведут из магазина.
Для мониторинга и трекинга ошибок мы используем проверенные инструменты — Datadog и Sentry. Для CI/CD впервые использовали GitHub Actions вместо Circle.
Запуск LMS
7 месяцев
Как и в случае с магазином, нам нужно было интегрировать новую систему с существующей. На запуске магазина нужно было интегрироваться со старой LMS, на запуске LMS — с новым магазином.
В итоге систему запускали частями:
- webium.ru — сайт магазина;
- lms.webium.ru — сайт LMS. До запуска там была старая LMS, после запуска — новая;
- Админка LMS;
- Запасной домен, на который переедет старая LMS после запуска.
Мы настолько дотошно подготовились к продакшену, что запуск получился очень спокойным. Вот такую обратную связь оставляли ученики в чатах Вебиума.
Что дальше
За время перезапуска Вебиум с нашей помощью нанял технического директора и построил внутреннюю команду разработки. Ребята программировали платформу бок о бок с нами, теперь они будут развивать уже знакомую им систему дальше.
Сейчас у Вебиума есть не только классные руководители, маркетологи, продакты, проджекты, дизайнеры, наставники и преподаватели, но и классные программисты. А мы очень гордимся проделанной работой. И готовы двигаться дальше.
Команда
Федя и Самат
Фёдор Борщёв,
Самат Галимов
технические директора
Никита Алёшников,
бэкенд-разработчик
Андрей Бацунов,
фронтенд-разработчик
Алексей Богословский,
фулстек-разработчик
Михаил Бурмистров,
ведущий фронтенд-разработчик, руководитель проекта
Антон Давыдов,
архитектор
Николай Кирьянов
бекенд-разработчик
Никита Лазаренко,
бэкенд-разработчик
Вячеслав Набатчиков,
бэкенд-разработчик
Александр Нестеров,
фронтенд-разработчик
Ксения Сафронова,
менеджер проекта
Эдуард Степанов,
бэкенд-разработчик
Владимир Тарановский,
фронтенд-разработчик
Алексей Чудин,
ведущий бэкенд-разработчик
Вебиум
Роксана Боровик,
генеральный директор
Виктория Гармаш,
продакт-менеджер
Никита Савостин,
технический директор
Александр Евграфов,
арт-директор
Алина Тупикова,
продуктовый дизайнер
Богдан Пилявец,
ведущий аналитик
Aндрей Алейников,
аналитик
Михаил Герун,
менеджер проекта
Евгений Новиков,
менеджер проекта
Илья Конаныхин,
разработчик legacy-системы
Михаил Сахно,
бэкенд-разработчик
Кирилл Стариков,
фронтенд-разработчик
Сергей Волков,
фронтенд-разработчик
Елена Микиртумова,
верстальщица
Роман Ковалев,
ведущий
SEO-специалист
SEO-специалист
Ольга Рокоссовская,
техподдержка и
тестирование
тестирование
Катерина Климова,
техподдержка и
тестирование
тестирование
Павел Романов,
технический директор
на этапе подготовки
перезапуска
на этапе подготовки
перезапуска
Евгений Юрьев,
разработчик
legacy-системы
legacy-системы
Технологии
Проектирование и управление
Basecamp
FigJam
Figma
Разработка
Ruby
traefik
Express.js
Datadog
Другие проекты
Logistics SaaS
Platform
Platform
ERP система управления международными грузоперевозками
Разработали и внедрили личные кабинеты логиста, руководителя компании и клиента — автоматизировали ключевые операционные процессы, ускорили и повысили прозрачность бизнеса.
Перезапуск информационной системы для сети клиник «Чайка»
Разработали архитектуру медицинской информационной системы для премиальной сети клиник на основе международного протокола FHIR.