{"id":13637,"url":"\/distributions\/13637\/click?bit=1&hash=6eb6f4cc0fd514248f67334eed9cf9b381eca4ced68925ecf0d4e37273ec5a7a","title":"Ozon \u0440\u0430\u0437\u0432\u0435\u043d\u0447\u0438\u0432\u0430\u0435\u0442 \u043c\u0438\u0444\u044b \u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0440\u0430\u0441\u043f\u0440\u043e\u0434\u0430\u0436\u0430\u0445","buttonText":"\u041f\u043e\u043a\u0430\u0436\u0438\u0442\u0435","imageUuid":"7d00f3f0-9073-5cd7-b901-ee3a06a62041","isPaidAndBannersEnabled":false}
Дизайн
Kirill Danchenko

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

Система, которую предстояло создать, состояла из трёх крупных частей, соответствующих ключевым ролям:

  • Для студента
  • Для преподавателя (он же наставник)
  • Для координатора (он же админ системы)
Общая структура LMS

Самые большие возможности — у координатора; он может заводить курсы, распределять преподавателей и студентов; поистине всесильный персонаж. Чуть меньше привилегий — у преподавателя; он работает в рамках своего курса, заводя задания и рецензируя присылаемые студентами работы. Ещё меньше прав — у студента; он покорно внимает и отправляет домашние задания на проверку.

На момент старта было отрисовано 106 макетов, включающих интерфейсы координатора, преподавателя и студента. Больше половины из них относились к координатору.

106 макетов на старте. Figma, масштаб 2%

Координатор — сотрудник BBE, поэтому ему не нужен красивый интерфейс. Главное — уложиться в сроки и запустить проект с более-менее удобоваримым дизайном и всем необходимым функционалом. Здесь мы договорились использовать стандартный material design.

Дэшборд координатора

Студенты и преподаватели — внешние для BBE люди, поэтому для них важно было сделать что-то более эстетское. Интерфейсы студента и преподавателя визуально довольно похожи, так как они видят один и тот же контент.

Дэшборд выглядит одинаково у студента и преподавателя

Страница курса

Мобильная версия

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

Работы студентов в интерфейсе преподавателя
Диплом, выдаваемый студенту после прохождения курса

Процесс

Мы усердно работали всю осень. Дела шли по плану, и в ноябре ещё оставалось ощущение, что LMS будет запущена до Нового года.

Но, конечно же, в декабре возник классический авральный режим, вызванный надвигающимися затяжными праздниками, когда нужно всё успеть. Количество макетов росло, по ходу работы возникали изменения; плюс, подпирали другие проекты, где временами невозможно было справиться без участия задействованных на BBE людей. Складывалась идеальная ситуация для того, чтобы спровоцировать у программиста нервый срыв, поэтому пришлось замедлиться и перенести запуск.

Первую версию решили запускать спокойно, после праздников, и 18 января она успешно ушла в продакшн.

Дальнейший процесс должен был занять от силы месяц, но недаром говорят, что дьявол кроется в деталях: мы продолжили дорабатывать систему до начала лета.

В процессе работы 106 стартовых макетов превратились в 484.

Если координатор был самой сложной ролью с точки зрения полномочий, то в плане интерфейсов самым навороченным кейсом вышел студент: 233 макета.

233 макета: экраны для студента. Figma, масштаб 2%

Следом шли 162 макета с интерфейсами преподавателя.

162 макета: экраны для преподавателя. Figma, масштаб 2%

И, наконец, для координатора осказалось достаточно 89 макетов.

89 макетов: экраны для координатора. Figma, масштаб 2%

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

Работа, отправленная на ревью преподавателю
Комментарии к работе студента

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

0
13 комментариев
Написать комментарий...
Game Topia

Выделить домашнюю работу красным цветом, тоже самое, что на звонок любимой поставить реквием! С чем у вас ассоциируется красный? Про остальное говорить не хочется. Но бэкгроунд, это дичь. Тематический мессенджер? Да, можно. Но у вас общественное приложение. Я знаю множество людей, которые стонут от темных интерфейсов. К тому же, вы напрочь лишаетесь возможности создавать грамотное обучающее видео, поскольку его можно будет рассмотреть только на огромной плазме и то ночью. И технологический стек - нубский.

Ответить
Развернуть ветку
Kirill Danchenko
Автор

Переименовываемся в Нубстрошок!

Ответить
Развернуть ветку
Game Topia

Мне кажется, современное приложение, должно быть реалтай по умолчанию. И питон точно не про это. Простота - go, архитектура - c#. Да даже та же nodejs и то в разы лучше. 

Ответить
Развернуть ветку
Kirill Danchenko
Автор

Смешно. :)

А если серьёзно, то:

1. У нас там вебсокеты на сетевом уровне — всё и так риалтайм.

2. Ничто не мешает писать риалтайм-приложения на Питоне. Отличный востребованный язык.

3. Опыт с Нодой у нас есть, спасибо. Как и многие другие, мы от неё отказались. Даже создатель от неё отрёкся. :)

4. Вообще, стек не так важен. Хорошо можно сделать на разных языках/технологиях. Ключевое слово — хорошо.

Ответить
Развернуть ветку
Game Topia

Что значит на сетевом уровне? Джанго уже Легаси. Если вы использовали vue, то приложение спа, а оно нуждается только в api. И вот вы Джанго для api выбрали?. Почему вы придрались к nodejs, когда я о ней написал, как о худшей из возможных альтернатив? И для подобных задач она лучше питона. 

Ответить
Развернуть ветку
Kirill Danchenko
Автор

Обмен данными по сети между клиентом и сервером реализован при помощи вебсокетов, которые позволяют передавать данные по инициативе сервера. То есть дополнительные запросы не нужны — за счёт этого достигается риалтайм.

Джанго мы выбрали для API, да. Прекрасный поддерживаемый фреймворк. Почему вы считаете, что это легаси? Почему Нода лучше?

Ответить
Развернуть ветку
Game Topia

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

Ответить
Развернуть ветку
Kirill Danchenko
Автор

Давайте мы закончим этот ненужный спор.

Я, конечно, могу сейчас начать кидать ссылки, где сравниваются Нода и Джанго. И вы можете. И читатели могут нагуглить и убедиться, что нигде чёрным по белому не написано, что Нода — это хорошо, а Джанго — плохо. Как не написано и обратного. Потому что существует множество нюансов. Так что давайте не будем.

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

Будут какие-то конкретные претензии или вопросы по проекту — welcome. А устраивать холивары по языкам и фреймворкам, честно, никакого желания нет. :)

Ответить
Развернуть ветку
Game Topia

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

Ответить
Развернуть ветку
Alex Mail

Понимаю какой объём работ выполнен, так как сам кручусь в этой теме. Но зашёл на сайт - и честно это какой то ад для эпилептика. Мерцающие максимально контрастные картинки в разных местах. Хаотично разлетающиеся буквы с отсутствием антиалиасинга. Все кромки мерцающие белые. Я думал что я не эпилептик - но меня что то начало подташнивать. Шучу. Такие свистоперделки начинают бесить любого уже через секунд 30.
Что касается тёмной темы - то никто не ставит абсолютно чёрный цвет. ОТ него глаза вытекают. Если посмотреть любую студию то там как правило ставят #444.

Пролистал сайт ниже - такое ощущение что проблемы с scale. У меня на 1920x1200 выглядит всё дико огромным. Да и вообще всё выглядит как какой то шаблон набросанный на коленке за 30 минут. Что бы было. Что бы потом сделать нормально.

Попробовал scale - не работает. Ради интереса посмотрел что у вас там например на размере font стоит. Вот что calc(var(--scale)*19); Вы лишаете возможность пользователя установить комфортный для него scale

Ответить
Развернуть ветку
Kirill Danchenko
Автор

Вы говорите о сайте https://bangbangeducation.ru/, который является скорее сайтом-витриной. В статье речь идёт о другом — об LMS, которая лежит по адресу https://lms.bangbangeducation.ru/ и доступна тем, кто проходит/проводит курсы. Впрочем, сайт https://bangbangeducation.ru/ тоже разрабатывали мы, правда лишь частично — только фронтэнд, и то не все страницы.

Ваша критика относится к решениям на уровне дизайна. Это не наши решения, а клиента, и, боюсь, я не смогу их обосновать. Поддерживать критику или оправдывать этот дизайн в целом мне тоже не хочется. Скажу лишь, что сам я воспринимаю эту работу как что-то на грани дизайна и искусства — в этом главное отличие BBE от других образовательных проектов, и в этом есть свой кайф.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Aram Mirzoyants

Боже, наконец таки!

Ответить
Развернуть ветку
Bruce Robertson
Ответить
Развернуть ветку
Читать все 13 комментариев
null