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).
- Получить огласку с учетом значимости проекта.
План
Оценить такой проект точно заранее невозможно, но это не значит, что не стоит даже пытаться выстраивать какой-то план. Мы определили команду участников, составили таймлайн и попробовали прикинуть трудозатраты.
Участники / 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
Выделить домашнюю работу красным цветом, тоже самое, что на звонок любимой поставить реквием! С чем у вас ассоциируется красный? Про остальное говорить не хочется. Но бэкгроунд, это дичь. Тематический мессенджер? Да, можно. Но у вас общественное приложение. Я знаю множество людей, которые стонут от темных интерфейсов. К тому же, вы напрочь лишаетесь возможности создавать грамотное обучающее видео, поскольку его можно будет рассмотреть только на огромной плазме и то ночью. И технологический стек - нубский.
Переименовываемся в Нубстрошок!
Мне кажется, современное приложение, должно быть реалтай по умолчанию. И питон точно не про это. Простота - go, архитектура - c#. Да даже та же nodejs и то в разы лучше.
Смешно. :)
А если серьёзно, то:
1. У нас там вебсокеты на сетевом уровне — всё и так риалтайм.
2. Ничто не мешает писать риалтайм-приложения на Питоне. Отличный востребованный язык.
3. Опыт с Нодой у нас есть, спасибо. Как и многие другие, мы от неё отказались. Даже создатель от неё отрёкся. :)
4. Вообще, стек не так важен. Хорошо можно сделать на разных языках/технологиях. Ключевое слово — хорошо.
Что значит на сетевом уровне? Джанго уже Легаси. Если вы использовали vue, то приложение спа, а оно нуждается только в api. И вот вы Джанго для api выбрали?. Почему вы придрались к nodejs, когда я о ней написал, как о худшей из возможных альтернатив? И для подобных задач она лучше питона.
Обмен данными по сети между клиентом и сервером реализован при помощи вебсокетов, которые позволяют передавать данные по инициативе сервера. То есть дополнительные запросы не нужны — за счёт этого достигается риалтайм.
Джанго мы выбрали для API, да. Прекрасный поддерживаемый фреймворк. Почему вы считаете, что это легаси? Почему Нода лучше?
Вы написали, что соккеты у вас на программном уровне, и отдельно упомянули о питоне. Меня это насторожило, так как подобное описание отделяет их использование от питона, который, как минимум раз в несколько медленнее той же ноды, и в добавок, его сегодняшняя актуальность держится только благодаря изначальной академической направленности, простоту которой очень удобно выпаривать аналитикам для взаимодействия с данными.
Давайте мы закончим этот ненужный спор.
Я, конечно, могу сейчас начать кидать ссылки, где сравниваются Нода и Джанго. И вы можете. И читатели могут нагуглить и убедиться, что нигде чёрным по белому не написано, что Нода — это хорошо, а Джанго — плохо. Как не написано и обратного. Потому что существует множество нюансов. Так что давайте не будем.
Я считаю, что мы выбрали отличный фреймворк и сделали прекрасную работу. Повторю: вопрос не в том, на чём ты делаешь, а в том, как делаешь. И если подобный проект работает медленно или глючит, то это происходит не из-за того, что он написан на Ноде или на Джанго, а из-за того, что он написан плохо. Наш проект написан хорошо, и мы им гордимся — это главное.
Будут какие-то конкретные претензии или вопросы по проекту — welcome. А устраивать холивары по языкам и фреймворкам, честно, никакого желания нет. :)
Про нубский стек должно было звучать как задирательство, а не оскорбление. Просто я не понимаю, как тут смайлы вставлять. И без всяких обид, для текущего года, этот не дизайн. Про функционал вообще сложно что-либо говорить.
Понимаю какой объём работ выполнен, так как сам кручусь в этой теме. Но зашёл на сайт - и честно это какой то ад для эпилептика. Мерцающие максимально контрастные картинки в разных местах. Хаотично разлетающиеся буквы с отсутствием антиалиасинга. Все кромки мерцающие белые. Я думал что я не эпилептик - но меня что то начало подташнивать. Шучу. Такие свистоперделки начинают бесить любого уже через секунд 30.
Что касается тёмной темы - то никто не ставит абсолютно чёрный цвет. ОТ него глаза вытекают. Если посмотреть любую студию то там как правило ставят #444.
Пролистал сайт ниже - такое ощущение что проблемы с scale. У меня на 1920x1200 выглядит всё дико огромным. Да и вообще всё выглядит как какой то шаблон набросанный на коленке за 30 минут. Что бы было. Что бы потом сделать нормально.
Попробовал scale - не работает. Ради интереса посмотрел что у вас там например на размере font стоит. Вот что calc(var(--scale)*19); Вы лишаете возможность пользователя установить комфортный для него scale
Вы говорите о сайте https://bangbangeducation.ru/, который является скорее сайтом-витриной. В статье речь идёт о другом — об LMS, которая лежит по адресу https://lms.bangbangeducation.ru/ и доступна тем, кто проходит/проводит курсы. Впрочем, сайт https://bangbangeducation.ru/ тоже разрабатывали мы, правда лишь частично — только фронтэнд, и то не все страницы.
Ваша критика относится к решениям на уровне дизайна. Это не наши решения, а клиента, и, боюсь, я не смогу их обосновать. Поддерживать критику или оправдывать этот дизайн в целом мне тоже не хочется. Скажу лишь, что сам я воспринимаю эту работу как что-то на грани дизайна и искусства — в этом главное отличие BBE от других образовательных проектов, и в этом есть свой кайф.
Комментарий удален модератором
Боже, наконец таки!