Разработка интернет-магазина билетов футбольного клуба "Зенит"

Цели и задачи проекта

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

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

Выполненные работы

Взаимодействие с пользователем

Первая версия проекта была реализована еще в далеком 2013 году. Дизайн соответствовал корпоративному стилю того времени и отвечал тогдашним требованиям к дизайну современного сайта. Он предоставлял удобный интерфейс для пользователя, основной задачей которого было провести болельщика сквозь основную воронку, начиная от ознакомления с действующими мероприятиями через выбор сектора и места до корзины и процедуры оплаты. 

За время нашего сотрудничества проект успешно пережил уже два редизайна, постепенно переживая третий. Было принято и обработано свыше 2000 задач от заказчика суммарными трудозатратами более 10000 человекочасов по состоянию на март 2020 года.

9f507ef79e328443633cfd841d127045.png

Билетная система

Нашей главной задачей тогда было продумать и реализовать тесную интеграцию проекта с билетной системой TicketNet — основной системой для управления кассами, мероприятиями и продажей билетов, используемой на стадионе «Петровский», где футбольный клуб базировался на тот момент и проводил домашние матчи. 

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

С момента запуска данная интеграция претерпела огромное множество изменений. Со временем увеличилось количество обрабатываемых данных. Увеличилась частота обращения к сервису. Появились и проблемы, которые нужно было решать. Возможности TicketNet по масштабированию ограничены, поэтому пришлось думать о перестройке всего процесса взаимодействия с системой. Было введено несколько слоев кеширования данных, который актуализировался как по времени, так и по бизнес-сценариям. Были реализованы механизмы контроля за доступностью веб-сервиса, которые автоматически блокируют процесс продажи билетов в тех ситуациях, когда веб-сервис по неизвестным причинам перестал работать. У администраторов есть возможности управления перечнем подключений. Логирование всех процессов обмена позволило мониторить жизнеспособность работы сервиса и принимать оперативные решения в экстренных ситуациях.

Единый центр авторизации

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

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

1549059876174b9f1d61558f4597d527.png

Карта места проведения

Одной из наиболее технологичных публичных страниц является карта места проведения. На момент старта проекта уникальная карта места проведения существовала только для одного места проведения — Стадиона «Петровский». На сегодняшний момент проект может похвастать поддержкой шести уникальных мест проведения — «Газпром Арена», Паркинг Газпром Арены, СК «Юбилейный», КСК «Сибур Арена», СК «Петровский», «Малая арена» СК Петровский. У некоторых из карт есть дополнительные вариации, позволяющие проводить онлайн-продажу мероприятий различной направленности — онлайн-трансляции выездных матчей, концерты, международные форумы. Количество поддерживаемых конфигураций растет с каждым годом и будет увеличиваться, что позволит руководству клуба использовать свои площадки в различных целях. 

Каждая карта по своему уникальна. У каждой площадки есть свои собственные правила проведения мероприятий. Более того, у каждого мероприятия на каждой площадке также могут быть свои собственные правила проведения, которые должны отражаться в том числе и на карте в веб-интерфейсе, чтобы улучшить пользовательский опыт.

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

ca7decc8782f02b0538afa964136f260.png

Карта сектора

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

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

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

86f9ad906e3ec2dd56e65c7da1822b61.png

Оформление заказа

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

Для оплаты заказа пользователь может воспользоваться эквайрингом Газпромбанка или платежным агрегатором Яндекс.Касса, с которыми интегрирован проект.

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

8caf4d17010683092e94e5cf0a4da5c0.png

Программа лояльности и привилегии

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

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

4579bd10dfaeb0b00da4c404e2fd5b89.png

Административная панель

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

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

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

02ed5ff72cb7fe027f23960ce4e72d31.png

Технологическая платформа

  • Бекенд проекта построен на php, в основе системы управления содержимым лежит CMS 1С-Битрикс, которая предоставляет базовый административный интерфейс. С момента запуска MVP в 2013 году, принципы построения исходного кода пересматривались в соответствии с современными тенденциями. Изначально продукт был построен по тем принципам, которые заложены в CMS 1С-Битрикс, но на сегодняшний момент из-за ее ограничений мы уходим от этих принципов и двигаемся в сторону построения REST API для Single Page Application. Код стараемся приводить в соответствие с паттернами стратегического проектирования Domain Driven Design. 
  • Сборка frontend кода проекта производится с помощью webpack. Основная часть логики написана на jquery, в процессе редизайна смещаемся в сторону React/Redux, постепенно заменяя старый код на более новый, совершенствуя технологическую платформу. Весь сайт полностью адаптивен в диапазоне разрешений от 320 до 1200 px и использует разную разметку для мобильных и десктопных устройств.
  • Практически каждый сервис на проекте снабжен механизмом логирования. Ежедневно проект записывает гигабайты логов, собирая информацию о состоянии системы, которые агрегируются в Zabbix и Kibana. 
  • Проект обладает настроенными политиками оповещения о критических ситуациях, а также в некоторых случаях имеет возможности по самовосстановлению и непрерывной работе даже в случае очень критичных сбоев.
  • Инфраструктура проекта включает в себя следующие технические средства — nginx, php-fpm, mariadb, redis, memcached, rabbitmq, docker, elasticsearch, logstash, kibana, zabbix.

f31729c29d88260372348486d85503b3.png

Интеграции

  • Для успешной работы сайт должен обмениваться информацией со множеством систем, поддерживая множество сценариев. Наиболее тесная интеграция выполнена с системой TicketNet. Практически любые манипуляции пользователя в процессе прохождения по воронке продажи так или иначе связаны с этой интеграцией. 
  • Интеграция с веб-сервисом Единого Центра Авторизации позволяет осуществлять механизмы ручной и автоматической аутентификации на всех сайтах клуба. Данные профилей пользователей регулярно синхронизируются между проектами клуба.
  • Практически любое значимое действие посетителя на сайте фиксируется аналитической системой на основе SAP CRM. Выполненная нами интеграция гарантирует 100% доставку события до CRM.
  • Для оплаты на сайте используются официальные шлюзы эквайринга Газпромбанка и Яндекс.Кассы, с которыми налажена тесная интеграция как в плане оплаты, так и полностью автоматизированный возврат средств.
  • Для обеспечения соответствия с ФЗ-54 сразу после оплаты платежа производится печать электронного чека с помощью интеграции с Атол.Онлайн.
  • Интеграция с дисконтной программой позволяет пользователям пользоваться привилегиями своих дисконтных карт при покупке билетов.
  • Интеграция с Google Analytics и Yandex Metrika позволяет вести дополнительный трекинг активности посетителей и ecommerce составляющей проекта.
  • Интеграция с Sendsay позволила гарантировать доставку транзакционных писем о создании заказа и вести аналитический учет по ним.

Итоги разработки проекта

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

Перейти на сайт

Полный текст статьи читайте на CMS Magazine