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, всевозможные группы в Фэйсбуке, каналы и чаты в Слэке и Телеграме, графические редакторы для рецензирования работ и прочие инструменты, которые можно было использовать для организации и проведения онлайн-обучения. Чёткой системы не было, и процесс по прихоти отдельных людей хаотично плавал от курса к курсу.

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

Что мы в Астрошоке осознали сразу:

• дать точную оценку такому крупному проекту невозможно;
• с фиксированным бюджетом (о нём — ниже) мы останемся в минусе.

Нам не впервой браться за убыточные проекты. Собственно, мы с них и начинали. Когда об Астрошоке ещё никто не знал, мы брались за любую возможность себя проявить. Философия была простой: делать немыслимое, доставляя максимальное качество и забыв про убытки. Этот подход дал свои плоды: мы получили репутацию приятных и надёжных разработчиков среди топовых дизайнеров (сначала это были Sila, затем другие российские дизайнеры вроде Sulliwan Studio и White Russian, а затем и ребята из-за рубежа вроде Anton & Irene и Clay), нарисовались серьёзные и прибыльные проекты (вроде Spotify, World Chess и Zumtobel), и мы стали процветать.

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

Если говорить о целях с точки зрения практичности, то они были простыми:

• Занять сотрудников. Летом 2020 года перенеслись два крупных проекта, которые у нас были изначально запланированы (новый сайт и билетная система для Большого театра и сайт огромного гонконгского музея современного искусства М+).
• Хотя бы частично окупить проект.
• Получить опыт в новом направлении (для нас это первая LMS).
• Получить огласку с учетом значимости проекта.

Оценить такой проект точно заранее невозможно, но это не значит, что не стоит даже пытаться выстраивать какой-то план. Мы определили команду участников, составили таймлайн и попробовали прикинуть трудозатраты.

• руководитель проекта: Дмитрий Алексашин
• менеджер проекта: Максим Козлов
  
• фронтэнд-разработчик: Илья Оболенский
  
• бэкэнд-разработчик: Дмитрий Гущин
  

• руководитель проекта: Маргарита Марянян
• дизайнер: Денис Валетин
  
• разработчик: Юрий Шишкин
  

• Дизайн: 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