Bang Bang Education + Astroshock: как затащить слона на стол, сохранив в целостности хобот (и, по ситуации, свой хребет)
Мы в Астрошоке делаем сложные сайты и мобильные приложения. Наш конёк — это коллаборации с классными дизайнерами, поэтому мы не могли остаться в стороне, когда узнали о том, что Bang Bang Education страдают без единой системы управления учебным процессом. Вписались. Ну а как иначе, когда вокруг Бэнгов происходит, пожалуй, самая большая дизайн-движуха в России, мы с давних пор тепло дружим с основательницами — Наташей Климчук и Олей Морозовой, — а наше финансовое положение располагает к авантюрам? Такая ситуация выбора не оставляет.
Это история о том, как мы с нуля делали для BBE (Bang Bang Education) кастомную LMS (Learning Management System) — систему, через которую происходит онлайн-обучение: создаются курсы и уроки, задаются и проверяются домашние задания, а также администрируется весь учебный процесс. Это также история о том, как крупно мы попали, и о том, как же, всё-таки, классно всё получилось!
Пандемия
Итак, Bang Bang Education — это проект про онлайн-образование в сфере дизайна и иллюстрации, который появился в 2015 году в рамках иллюстраторского агентства Bang! Bang! — между прочим, крупнейшего в России.
Поначалу проект развивался неспеша: появлялись курсы, проходили вебинары и лекции, пополнялась библиотека. Лично меня больше всего радовали записи бесед с дизайнерами — на тот момент это был свежий формат и кладезь полезной информации. Ну и, конечно, большим событием был выход их документального фильма «100 лет дизайна», на который мы даже отправились большой астрошоковской компанией в кинотеатр.
Всё изменила пандемия. Весной 2020 года мир сошёл с ума, и Бэнги, улавливая направление ветра, решили временно организовать бесплатный доступ к своему продукту «Дизайн-библиотека». Ход оказался настолько удачным, что на волне возросшего внимания к онлайн-образованию новость распространили многие крупные медиа. От наплыва желающих провести самоизоляцию с пользой сайт Bang Bang Education рухнул.
Мы подняли лучшие силы Астрошока в лице Димы Гущина и, совместно с бессменным штатным бэнговским разработчиком Юрой Шишкиным, провели незабываемый вечер. Сайт заработал. Так началось наше погружение в беды BBE.
Первым делом занялись приведением в порядок серверной инфраструктуры — чтобы сайт был готов к высоким нагрузкам. Чек. Затем, словив синергию, обновили фасад сайта, редизайн которого выполнил смельчак из Electric Red Studio, Свят Вишняков. Чек. Оставалась глыба: система управления учебным процессом…
На подступах
Клубок, который нам предстояло распутать, включал себя, помимо неказистого (с точки зрения разработчиков) сайта BBE, всевозможные группы в Фэйсбуке, каналы и чаты в Слэке и Телеграме, графические редакторы для рецензирования работ и прочие инструменты, которые можно было использовать для организации и проведения онлайн-обучения. Чёткой системы не было, и процесс по прихоти отдельных людей хаотично плавал от курса к курсу.
Такое устройство неизбежно и вообще нормально на старте, но когда количество обучающихся стремительно растёт, а объём курсов увеличивается, то всё острее чувствуется необходимость в большой единой платформе, которая была бы понятной и удобной для всех: для координаторов курсов, для преподавателей и для учеников.
В целом мы, конечно, давно хотели иметь платформу для проведения онлайн-курсов, но не зашивались настолько, чтобы срочно бросаться её делать. Тем более что это была непростая задача — курсы сильно отличаются друг от друга, а для создания LMS важно понимать, какие возможности должны быть предусмотрены, с учётом будущего развития. Реально с проблемой отсутствия платформы мы столкнулись когда запустили годовые программы. Во-первых, резко выросло количество учебных материалов. Во-вторых, на годовой программе появились десятки преподавателей. Ну и в-третьих, увеличились наборы в группы. Мы поняли что всё это не влезает в прежние процессы, и нужна LMS.
Что мы в Астрошоке осознали сразу:
- дать точную оценку такому крупному проекту невозможно;
- с фиксированным бюджетом (о нём — ниже) мы останемся в минусе.
Нам не впервой браться за убыточные проекты. Собственно, мы с них и начинали. Когда об Астрошоке ещё никто не знал, мы брались за любую возможность себя проявить. Философия была простой: делать немыслимое, доставляя максимальное качество и забыв про убытки. Этот подход дал свои плоды: мы получили репутацию приятных и надёжных разработчиков среди топовых дизайнеров (сначала это были Sila, затем другие российские дизайнеры вроде Sulliwan Studio и White Russian, а затем и ребята из-за рубежа вроде Anton & Irene и Clay), нарисовались серьёзные и прибыльные проекты (вроде Spotify, World Chess и Zumtobel), и мы стали процветать.
Накануне старта работ по LMS ситуация была не такой, как десять лет назад. Нам уже не нужно было никому ничего доказывать — скорее возникла возможность сделать что-то важное и полезное, и наше положение это позволяло.
Если говорить о целях с точки зрения практичности, то они были простыми:
- Занять сотрудников. Летом 2020 года перенеслись два крупных проекта, которые у нас были изначально запланированы (новый сайт и билетная система для Большого театра и сайт огромного гонконгского музея современного искусства М+).
- Хотя бы частично окупить проект.
- Получить опыт в новом направлении (для нас это первая LMS).
- Получить огласку с учетом значимости проекта.
План
Оценить такой проект точно заранее невозможно, но это не значит, что не стоит даже пытаться выстраивать какой-то план. Мы определили команду участников, составили таймлайн и попробовали прикинуть трудозатраты.
Участники / Astroshock
- руководитель проекта: Дмитрий Алексашин
- менеджер проекта: Максим Козлов
- фронтэнд-разработчик: Илья Оболенский
- бэкэнд-разработчик: Дмитрий Гущин
Участники / BBE
- руководитель проекта: Маргарита Марянян
- дизайнер: Денис Валетин
- разработчик: Юрий Шишкин
Технологии
- Дизайн: Figma
- Фронтэнд: Vue.js
- Бэкэнд: Django/Python
- Общение с клиентом: Telegram
- Общение внутри Астрошока: Slack
Таймлайн
- 15 августа 2020 г.: старт обсуждения
- 7 сентября 2020 г.: начало разработки
- 28 декабря 2020 г.: запуск первой версии
- 1 февраля 2021 г.: окончание работ
Бюджет
Мы сразу сошлись на той скромной сумме, которую готовы были выделить BBE: 3 500 000 ₽. При нашей ставке на тот момент (2500 ₽/ч) проект должен был занять 176 рабочих дней. В минус мы должны были уйти примерно после 220 рабочих дней (себестоимость нашего часа тогда равнялась 2000 ₽). Было бы здорово уложиться в бюджет и вписаться в таймлайн, но всё указывало на то, что сделать этого не получится. Однако, нас не пугали лишние затраты и бодрило то, что у клиента были довольно строгие временные рамки — значит проект не растянется до бесконечности.
Старт
Роли распределили так: BBE придумывают и отрисовывают интерфейсы, а мы их смотрим и даём фидбэк. Общая структура должна быть определена заранее, но детали мы согласились придумывать и корректировать в процессе. Обычно такой подход расстраивает разработчиков, т.к. часть проделанного труда при этом отправляется в корзину, но клиент нас очаровал, и мы, в порядке исключения, согласились стартовать без финализированных вводных данных.
Система, которую предстояло создать, состояла из трёх крупных частей, соответствующих ключевым ролям:
- Для студента
- Для преподавателя (он же наставник)
- Для координатора (он же админ системы)
Самые большие возможности — у координатора; он может заводить курсы, распределять преподавателей и студентов; поистине всесильный персонаж. Чуть меньше привилегий — у преподавателя; он работает в рамках своего курса, заводя задания и рецензируя присылаемые студентами работы. Ещё меньше прав — у студента; он покорно внимает и отправляет домашние задания на проверку.
На момент старта было отрисовано 106 макетов, включающих интерфейсы координатора, преподавателя и студента. Больше половины из них относились к координатору.
Координатор — сотрудник BBE, поэтому ему не нужен красивый интерфейс. Главное — уложиться в сроки и запустить проект с более-менее удобоваримым дизайном и всем необходимым функционалом. Здесь мы договорились использовать стандартный material design.
Студенты и преподаватели — внешние для BBE люди, поэтому для них важно было сделать что-то более эстетское. Интерфейсы студента и преподавателя визуально довольно похожи, так как они видят один и тот же контент.
Страница курса
Мобильная версия
Отличия связаны в основном с доступным функционалом: студент взаимодействует с одним преподавателем и может отправлять домашние задания на проверку, а преподаватель может взаимодействовать с несколькими студентами и рецензировать присылаемые работы.
Процесс
Мы усердно работали всю осень. Дела шли по плану, и в ноябре ещё оставалось ощущение, что LMS будет запущена до Нового года.
Но, конечно же, в декабре возник классический авральный режим, вызванный надвигающимися затяжными праздниками, когда нужно всё успеть. Количество макетов росло, по ходу работы возникали изменения; плюс, подпирали другие проекты, где временами невозможно было справиться без участия задействованных на BBE людей. Складывалась идеальная ситуация для того, чтобы спровоцировать у программиста нервый срыв, поэтому пришлось замедлиться и перенести запуск.
Первую версию решили запускать спокойно, после праздников, и 18 января она успешно ушла в продакшн.
Дальнейший процесс должен был занять от силы месяц, но недаром говорят, что дьявол кроется в деталях: мы продолжили дорабатывать систему до начала лета.
В процессе работы 106 стартовых макетов превратились в 484.
Если координатор был самой сложной ролью с точки зрения полномочий, то в плане интерфейсов самым навороченным кейсом вышел студент: 233 макета.
Следом шли 162 макета с интерфейсами преподавателя.
И, наконец, для координатора осказалось достаточно 89 макетов.
Наверное, самой важной и самой сложной фичей всей системы стал редактор домашних заданий в интерфейсе наставника. Студенты чаще всего отправляют работы в виде изображений, а затем получают фидбэк от преподавателя в виде точек в произвольном месте поверх этих изображений с комментариями, которые раскрываются при нажатии на эти точки.
Студенты при этом могут загрузить к этому же заданию новые картинки, и нам потребовалось разработать целую систему для поддержки версионности загружаемых файлов со всеми комментариями. Сначала мы искали готовые решения, которые можно адаптировать для подобного редактора, но ничего подходящего не нашли и ограничились использованием отдельных noname-библиотек, чтобы хоть как-то упростить себе жизнь.
С точки зрения бэкэнда проект оказался одним из самых навороченных за всю историю нашей компании. Пришлось создать архитектуру с большим количеством взаимосвязей разных данных, которые перетекают из одного места в другое. Отдельным челленджем было совмещение Django ORM с внешними данными, с последующим кешированием этих данных. Например, аккаунты студентов, потоки студентов и курсы, хранятся вне LMS — на основном сайте bangbangeducation.ru, — откуда их нужно тянуть и следить за их своевременным обновлением.
Кайф
- Хороших разработчиков хлебом не корми — дай заняться чем-то новым. При этом клиенты из новых областей, с интересными запросами приходят редко. Сделаешь сайт отеля — приходят за сайтами отелей. Сделаешь сайт архитектурного бюро — приходят за сайтами архитектурных бюро. В случае с BBE LMS мы просто получали удовольствие от новизны, масштаба и сложности работы. Особенным кайфом была разработка редактора домашних заданий в интерфейсе преподавателя — самой непростой части проекта. Кажется, мы задроты. 👨💻
- На проекте с нашей стороны работали два разработчика. Один занимался фронтэндом, другой — бэкэндом. Связка именно этих ребят, Димы Гущина и Ильи Оболенского, получилась уникальной. Фронтэндер на очень хорошем уровне знает бэкэнд, а бэкэндер очень хорош во фронте. По сути работали два фуллстэк-программиста. Как результат, любые согласования между ними проходили гладко и быстро. Иногда они даже дописывали код друг за другом, что редко встречается при разработке клиентских проектов. 🛠
- Стоит отдаль должное клиенту. Уровень макетов, которые нам выдавались, был сильно выше среднего. Даже у крутых дизайн-студий из Европы и США при высоком уровне самого дизайна в макетах частенько обнаруживается полный бардак. Конечно, и у BBE были недоработки в плане адаптивных версий, но зато не было пляшущих расстояний между одинаковыми элементами, дробных пикселей, недоделанных интерфейсов или глобально непродуманных сценариев (а мы сталкиваемся с подобным в ¾ проектов). 🪄
- Разработчики — народ специфичный. Допускать прямого общения между ними и клиентами и даже дизайнерами — себе дороже. Клиент может решить, что мы не хотим досточно погружаться в его ситуацию, а разработчик нередко начинает считать клиента неспособным как следует всё объяснить. Здесь же всё вышло иначе. В какой-то момент наш менеджер, Максим Козлов, специально отошёл в сторону, чтобы не мешать взаимодействию разработчиков с клиентом. За кулисами мы по-прежнему решали свои проблемы и приоритизировали задачи, но функция менеджера как посредника в общении была выключена. Во многом мы позволили это благодаря профессионализму Маргариты Марянян, менеджера со стороны BBE. 🙏
Некайф
- Тяжело работать, когда на старте есть только блок-схема с функциями ролей в LMS и документ с очень ограниченными описаниями. В документе — 12 страниц, а должно быть как минимум 112. Кроме того, макеты были готовы примерно на 20%. Стояли жёсткие временные ограничения, поэтому мы не стали тратить время на составления подробного ТЗ и дорисовку макетов. В такой ситуации часть кода приходится отправлять в корзину, и программисты получают от этого лишний стресс. ⏳
- Как было сказано выше, из-за нехватки времени мы решили сделать интерфейс координатора в material’е. Мы пошли дальше и решили взять готовую библиотеку ui-элементов: кнопок, инпутов и т.д. Поскольку на фронте мы используем Vue.js, то по ключевым словам vue и material design мы нагуглили библиотеку vuematerial.io и решили сразу её использовать. По готовности трети интерфейсов координатора мы поняли, что библиотека напичкана багами и практически не поддерживается. Вместо того, чтобы тратить тонну времени на правки, стоило бы потратить несколько часов на изучение и выбрать в результате что-то другое. Мы остались с vuematerial.io, но пришлось как следует её дорабатывать. 🪲
- Apple любит гордиться тем, что их новые телефоны работают чуть дольше старых или аналогичных, и разработчики давно знают, в чём секрет: в искусственных ограничениях на производительность, количество которых постоянно растёт. На этом проекте мы столкнулись с тем, что iOS Safari падает с ошибкой на превышенный размер занятой оперативной памяти. Например, когда преподаватель открывает с Айфона большие картинки, загруженные студентами. Эту проблему можно бы было решить через очень сложную и долгую разработку на canvas’е, но мы сэкономили время и ограничили скейл картинки до тех пределов, когда оперативная память загружена на 10 Мб. 📱
- Мы гордимся кодом, который написали, но в паре мест из-за нехватки времени навели некоторый сумбур. Всё работает как надо, и сами мы в этом коде разберёмся, но если проект откроет сторонний разработчик, то местами ему придётся поломать голову. Чтобы код стал более читабельным, стоило бы вынести какие-то вещи в компоненты. Но это бы заняло ещё несколько дней, и мы скрепя сердце оставили кое-где на фронтэнде всё как есть. 😔
- Был промах с бэкэндом. По мере продвижения пришло понимание, что лучше кешировать данные не на уровне запросов к внешнему API, а прямо в моделях и кверисетах — чтобы избегать лишнего декодирования JSON’a. Для нас это был важный и полезный опыт — даже спустя 10 лет мы продолжаем учиться. 🤖
Ожидания и реальность
Окончание работ
Ожидание: 1 февраля 2021 г.
Реальность: 1 июня 2021 г.
Трудозатраты на разработку
Ожидание: 176 рабочих дней
Реальность: 324 рабочих дня
Бюджет на разработку
Реальность: 3 500 000 ₽
Ожидание (по итогам проекта): 6 500 000 ₽
Результат
Ожидание: ★★★★★
Реальность: ★★★★★
Приходите учиться в Bang Bang Education: bangbangeducation.ru
А за сложной разработкой приходите к нам: astroshock.ru