С проектом EdCrunch мы работали и раньше — но это всегда были какие-то небольшие, локальные задачи. В этот раз нас попросили написать полноценную платформу для проведения онлайн-конференции EdCrunch on Demand.
Как это всё начиналось
Сроки оказались крайне сжатыми — когда мы приступили к работе до начала конференции оставалось менее трёх месяцев.
На старте была примерная структура сайта, частично реализованный дизайн, прототипы нескольких страниц и огромное желание сделать лучшую в Европе онлайн-конференцию по образованию. Энтузиазм команды EdCrunch искренне подкупал, и он стал тем фактором, который повлиял на наше решение взяться за проект.
У клиента работала отдельная сильная команда дизайнеров, они же занимались и проектированием всех интерфейсов. Мы подключились к этому процессу со своей экспертизой в технической части, чтобы интерфейсы были не только привлекательными, но и реализуемыми.
Почему Битрикс?
Битрикс в качестве основы для проведения конференции был выбран по нескольким причинам:
- Крайне сжатые сроки, в которые мы вписывались только работая с готовой CMS-системой.
- Сайт предыдущей конференции также был написан на Битриксе. Мы решили использовать его в качестве основы, ибо часть сущностей там была реализована.
- Менеджеры клиента умели работать с Битриксом, что минимизировало время на обучение.
Проект разместили на облачном сервере. Непосредственно перед конференцией мы планировали увеличить количество ядер процессора и ОЗУ чтобы выдержать пиковую нагрузку в дни проведения конференции.
Ещё до старта Битрикс-сайта отделом маркетинга клиента было сделано несколько лендингов на Тильде через которые пошли первые продажи билетов. Билеты оформлялись через сервис Таймпад — мы оставили эту схему покупки билетов и на новом сайте.
Тысяча и один лендинг
Первое время клиент был сфокусирован только на маркетинге — и это понятно, нужно было привлекать клиентов на конференцию и договариваться со спикерами.
В результате, большая часть нашей работы в первый месяц крутилась вокруг создания и переработки многочисленных лендингов и публичных страниц сайта (которые тоже были построены как лендинги).
Кроме главной было свёрстано 10 лендингов, большая часть из которых была интегрирована максимально тщательно, с возможностью менять текст и отдельные элементы в режиме правки и выводом динамического контента.
Главной странице было посвящено традиционно много внимания.
Сделали несколько форм, интегрированных с AmoCRM, Таймпадом или с отправкой уведомлений на email, причём данные каждой формы для надёжности сохранялись и в инфоблоках сайта.
Многократно меняли дизайн и вёрстку практически каждого блока на странице, чтобы в итоге получить инструмент, который максимально соответствует задачам маркетинга и отдела продаж.
Оптимизировали скорость работы главной страницы, в т.ч. работу многочисленных анимаций, добавили LazyLoad для картинок и отдельных блоков. В итоге получили приемлемые, но не фантастические показатели скорости загрузки главной страницы. Задачи глубокой SEO-оптимизации не было, поэтому на дальнейшее ускорение главной время тратить не стали.
Платформа: закрытая пользовательская часть конференции
Самая интересная часть проекта — то, что в команде называли Платформой, разделы, доступные только авторизованным пользователям. В этом личном кабинете и будет происходить основная «магия» — трансляция 8-ми параллельных видеопотоков, общение посетителей друг с другом в различных чатах и ещё много всего специфичного.
Мы решили отказаться от свободной регистрации чтобы оставить пользователям только один путь создания аккаунта — через покупку билета на Таймпаде. Покупатель оформлял билет, мы забирали через API его данные и проверяли по email, есть ли уже такой пользователь.
Если пользователь не находился — создавали его и отправляли письмо с автоматически сгенерированными логином и паролем. Если находился — делали привязку оформленного билета к найденному пользователю. Таким образом, один пользователь мог оформить на себя несколько билетов.
Каждый билет давал пользователю права доступа к определённым дням конференции. Мы также отслеживали возвраты билетов и их удаление из Таймпада и корректировали права доступа соответствующих пользователей на Платформе.
После авторизации пользователь попадал на главную страницу своего личного кабинета — дешборд. Там мы выводили информацию о купленных билетах, о добавленных в свою программу мероприятиях посетителя конференции, показывали рекомендации других мероприятий и пользователей с совпадающими интересами, а также несколько других виджетов, о которых будет рассказано ниже.
Систему рекомендаций сделали достаточно простой — на основе совпадения тегов-интересов, набор которых был заранее определён на старте. Теги проставлялись как у мероприятий, так и у пользователей. Пользователи выбирали свои интересы при первой авторизации на платформе, проходя анкету-онбординг либо при редактировании своего профиля.
Для каждого пользователя формировалась анкета, видимостью данных в которой пользователь мог управлять. Можно было скрыть или показать отдельную контактную информацию, так и сделать эту информацию видимой только для тех людей, которых пользователь добавил в избранные контакты.
Большая часть часть интерфейсов проекта была двуязычной — на русском и английском языках, так что и англоязычным гостям было легко ориентироваться в интерфейсах.
Программа и мероприятия
Основной сущностью, вокруг которой была построена онлайн-конференция, было мероприятие — отдельное выступление одного или нескольких спикеров. Карточка мероприятия содержало всю информацию о конкретном выступлении и была связана со многими другими сущностями: карточками спикеров, компаниями, которых представляли выступающие, тегами по интересам и т.д.
В основе программы лежала жесткая временная сетка, в которую встраивались конкретные мероприятия. Сетка была одинакова для каждого дня и каждого потока трансляции. Это решение было компромиссом, который позволил с одной стороны уложиться в жёсткие сроки, а с другой — создать систему, которая не позволяла контент-менеджерам серьёзно ошибаться при публикации мероприятий.
Механика программы позволяла не только видеть расписание мероприятий, но и гибко фильтровать их по 5-ти разным характеристикам, а также добавлять мероприятия в «Мою программу», персональное расписание каждого пользователя.
Для карточки мероприятия было разработано три вида, которые показывались в зависимости от того, кто её просматривает и завершилось данное мероприятие или нет.
Для неавторизованных пользователей (или тех, у кого не было доступа к конкретному дню конференции) карточка содержала основную информацию, а при попытке добавить его в свою программу показывался поп-ап, который призывал к авторизации или покупке билета.
Если пользователь был авторизован и имел доступ к дню, в который проходило мероприятие, ему показывался расширенный вид карточки с таймером до начала мероприятия и несколькими виджетами с рекомендациями схожих по интересам событий.
Третий вид карточка принимала после завершения трансляции мероприятия. В течение нескольких секунд после прямого эфира мы выгружали в карточку видеозапись, а также запись группового чата и вопросов спикерам.
Магию с мгновенным появлением записи после эфира помогли сделать ребята из компании, которая организовывала съемки и весь видеострим прямой трансляции. Мы заранее договорились с ними о формате URL записей, которые подставляли в карточку завершенного мероприятия, а саму запись они формировали на своих серверах.
Каналы и групповые чаты в них
Онлайн-трансляция конференции шла в 8 параллельных потоков, которые мы, по аналогии с телевидением, назвали «каналами». В момент, когда начиналась трансляция каждого мероприятия, мы обновляли его описание без перезагрузки страницы, таким образом у зрителей всегда была актуальная информация.
На странице каждого канала разместили по два чата в табах — общий чат канала и чат вопросов спикерам. Плюс на отдельной странице Платформы разместили общий чат конференции. Таким образом, во время трансляции у нас работало 17 групповых чатов.
Общие чаты работали с постмодерацией. Сообщение появлялось сразу, а модератор мог заблокировать или разблокировать его, а также отправить в бан любого пользователя на ограниченное время или навсегда.
Чат вопросов спикерам отличался от общего только премодерацией. Каждое сообщение должно было проходить одобрение модератора. Таким образом, до спикеров доходили только актуальные вопросы.
Нетворкинг и тет-а-тет чаты
Общение с коллегами и новые знакомства во время оффлайн-конференций — это то, ради чего люди едут в другие города, порой за тысячи километров. Нетворкинг является важнейшей частью любой конференции, но в онлайн-варианте нетворкинг всегда был ущербным.
Организация полноценного общения между посетителями онлайн-конференции изначально была одной из самых приоритетных задач. Групповые чаты в каналах уже являлись частью нетворкинга, но нужно было познакомить пользователей друг с другом более тесно.
Для поиска близких по духу и интересам коллег мы сделали список участников конференции с гибким фильтром. Интересных участников можно было добавить в список Избранное, чтобы связаться с ними позднее.
В отдельной вкладке для каждого пользователя сформировали список рекомендованных пользователей. Рекомендации строили на основе совпадения списка интересов — чем больше совпадений, тем выше по рангу была рекомендация.
Любому пользователю можно было написать личное сообщение в тет-а-тет чат — чтобы познакомиться или обсудить профессиональные вопросы.
Для организации чата мы использовали модули Битрикса «Веб месседжер» и «Push and Pull» — они максимально хорошо подошли под нашу задачу.. К сожалению, в интерфейсе чата гибкая кастомизация была невозможна, так что мы ограничились косметическими правками и адаптацией чата под мобильный интерфейс.
Данные модули позволили нам реализовать всплывающие уведомления и онлайн-статус пользователей. А «вишенкой на торте» оказалась возможность любым пользователям создавать групповые чаты и приглашать туда коллег.
Если честно, мы сами до конца не верили в полноценную замену оффлайн-нетворкинга, но за три дня конференции (с 8 по 10 декабря 2020 г.) 12 тысяч участников написали 6465 сообщений в групповые чаты и больше 49 тысяч сообщений в личные чаты друг другу!
Геймификация
Ещё одной идеей организаторов было внедрение в конференцию элементов геймификации. Эта часть вызвала максимальное количество обсуждений с организаторами конференции, было решено пригласить отдельную команду геймификаторов с опытом разработки онлайн-игр для разработки системы геймификации EdCrunch и написания технического задания на неё.
Итоговый вариант системы геймификации состоял из трёх частей:
EdCrunch Power в виде батарейки. Пользователь заряжал её просмотром трансляции на любом из каналов. Причём, мы учитывали нахождение пользователя только на активной вкладке, так что ускорить скорость заряда за счёт открытия нескольких вкладок с каналами было невозможно.
Батарейка заряжалась на 1% за каждые 10 минут просмотра. Мы физически не могли определить, запущен плеер у пользователя или нет, ибо выводили плеер во фрейме. Поэтому мы учитывали нахождение пользователя на одном из каналов с 10:00 до 18:00 (время трансляции).
Бейджи, которые выдавались за действия или достижения пользователя. Например, за 10 вопросов спикерам в одном из каналов, за 6 часов просмотра видео или за заполнение всех слотов в Моей Программе. Всего было реализовано 26 бейджей.
Система номинаций — мы считали кто из пользователей первым собрал тот или иной набор бейджей и формировали для модераторов конференции отчёт по таким пользователям. В последний день конференции в прямом эфире были определены победители и вручены призы.
Техподдержка во время конференции
На конференцию EdCrunch on Demand зарегистрировалось больше 12 тысяч участников. Мы ждали проблем в самом начале конференции из-за пиковой нагрузки, когда за короткое время подключатся большое количество пользователей.
К 10 утра количество пользователей онлайн превысило 2 тысячи, а около 10:30, когда онлайн-пользователей было около 2,5 тысячи человек, начались проблемы с сервером.
За 2 минуты число коннектов выросло в 5 раз, а по данным Яндекс Метрики в это же время был зафиксирован резкий всплеск просмотра страниц с 400 до 1200 просмотров в минуту. Среднее число одновременно обрабатываем процессов подскочило до 93 при наших 40 ядрах. Сервер не справлялся.
Было очень похоже на DDoS атаку, которую провели в момент пиковой нагрузки на проект. В течение 15-ти минут страницы проекта практически не открывались. Мы экстренно отключили скрипты геймификации, уведомления и ряд других сервисов, чтобы минимизировать нагрузку на сервер.
Через двадцать очень нервных минут нагрузка на сервер стабилизировалась и мы вновь подключили все сервисы, включая геймификацию и уведомления. Ближе к 12 часам количество онлайн-пользователей выросло до 3,5 тысяч, но подобных проблем с нагрузкой больше не повторилось.
Остальные два дня нашей основной задачей была помощь пользователям с восстановлением доступов, настройками и т.д.
