Зенит арена
Разработка HR-портала для футбольного стадиона «Зенит-Арена»
Описание
Футбольный стадион «Зенит-Арена» является одним из лучших в России. Он стал местом проведения чемпионата мира по футболу (2018), а в 2021 году там проходили матчи чемпионата Европы. На стадионе проводятся встречи российских команд и концерты звезд.
За состоянием значимого объекта следят сотни людей. На стадионе работает порядка 500 человек: технический персонал (охранники, уборщицы, слесари, осветители), административный персонал (HR-менеджеры, руководство), маркетологи, волонтеры.
«Зенит-Арена» важно использовать максимально защищенные с точки зрения кибербезопасности IT-продукты. Бюджет на проведение мероприятий на стадионе исчисляется миллионами долларов. Нежелательный инцидент (например, получение хакерами доступа к экранам) или срыв работы может привести к крупным экономическим, политическим и репутационным рискам.
Для обеспечения безопасности на стадионе внимательно относятся к проверке сотрудников и болельщиков. Компания отказалась от использования коробочных решений и облачных сервисов. «Осьминожке» поручили разработать с нуля кастомную систему для персонала. Чувствительные данные будут храниться на внутренних серверах компании.
HR-отдел решил разработать с нуля портал, упрощающий взаимодействие с сотрудниками. Это существенно сократит трудозатраты HR-менеджеров, а техническому персоналу позволит просматривать документы и получать помощь.
Цель
Цель проекта
Заменить стандартные решения новой, защищенной от внешних воздействий системой. Онлайн-платформа, доступная с компьютеров и смартфонов, позволит пользователям быстро обмениваться информацией и использовать внутренние сервисы.
Проблема
Мы решили
HR-отдел работает в условиях высокой текучки персонала. Каждый менеджер курирует порядка 50 сотрудников. Он решает десятки задач: от онбординга до анонсов событий, согласования больничных, отпусков, увольнений. Из-за этого трудно поддерживать порядок в документах и быстро помогать сотрудникам.
Стандартные коробочные решения, например, Bitrix 24, не закрывали боли HR-отдела и технического персонала. Часть команды не пользовалась таск-трекерами, считая их неудобными. Это неэффективно: важно, чтобы весь штат компании использовал единую систему постановки задач и создания обращений.
Новый портал с интуитивно понятным интерфейсом поможет лучше выстраивать HR-процессы. Он автоматизирует работу HR-отдела и высвободит много времени. Команде стадиона будет проще обращаться к менеджерам и узнавать статус по задачам.
Проект
Задачи
-
Разработать удобный веб-портал на 1С-Bitrix с реализацией микросервисов на Node.js и PWA-приложение для Android и iOS,
-
Обеспечить возможность для пользователей с разным уровнем доступа работать с документами и обращениями в системе,
-
Сделать решение, помогающее быстрой безопасной работе стадиона.
Бизнес-аналитика
На всех этапах работы мы активно сотрудничали с инхаус командой клиента. Еще на пресейле порекомендовали им, какие технологии выбрать с учетом аудитории проекта и особенностей работы стадиона.
-
Команда детально изучила требования стейкхолдеров и провела с ними ряд встреч. Мы проанализировали информацию о пользователях и о бизнес-задачах клиента. Сделали roadmap и провели системную аналитику по интеграциям.
-
По проекту планировалось два этапа разработки. Также клиент намерен продолжать автоматизацию процессов. С этим учетом мы поняли, что выбранный стек не подходит под стоящие задачи.
-
Для быстрой и корректной обработки данных по задачам и обращениям нужно реализовать микросервисы. Они обеспечат автономность и параллельность работы с заявками и обращениями.
“На предпроектном исследовании мы поняли, что у многих сотрудников доступа к компьютерам. Предложили клиенту разработать мобильное приложение. Однако это не вписывалось в бюджет и планы клиента, так что мы поискали альтернативное решение.
PWA-приложение на iOS и Android дополнит веб-версию системы. В таком случае учитывается, что менеджеры могут работать на портале за компьютером, а рабочему персоналу удобно пользоваться системой с мобильного. Разработка PWA менее затратна, чем создание двух приложений».”
Система выполняет две основные функции для пользователей:
передает полезную информацию (можно изучить анонсы событий, базу знаний, структуру компании и данные по сотрудникам)
позволяет вести внутреннюю коммуникацию (назначать и отслеживать задачи, обращаться за больничным, заказывать справки и пр.).
В зависимости от роли в системе отличаются
уровни доступа к
информации.
HR в системе:
- отправляет массовые обращения персоналу (по зарплатам, премиям, выходным, поощрениям)
- согласует заявки и другие документы
- оповещает о датах тех или иных событий
- публикует вакансии
- выкладывает информацию о мероприятиях для сотрудников
- делится информацией от лица руководства
- проводит онбординг в цифровой базе знаний
- поддерживает актуальную структуру команды
- ведет документы в единой системе (акты, договора и пр.).
Сотрудник:
- видит в системе свои задачи
- пишет, если нужно посетить врача и получить медицинское обслуживание
- смотрит входящие обращения
- подписывает документы, показав, что ознакомился с ними
- смотрит анонсы и вакансии «Зенит-Арена»
- читает информацию о компании и ее структуре
- может получить контакты других сотрудников.
Дизайн
В работе мы вдохновлялись паттернами популярных сервисов, работающих с широкой аудиторией пользователей. Это «Госуслуги», «Мои субсидии» и другие полезные приложения. За основу мы взяли брендбук клиента.
Минималистичный дизайн системы позволяет быстро ориентироваться в ней. Учли, что порталом будут пользоваться люди с разным пользовательским опытом (от директора до электрика). Сделали крупные контрастные кнопки, простые выпадающие списки и подписи. Адаптировали интерфейс под разные типы устройств.
Mobile
Технологии
Стек: Nuxt.js (фронтенд), 1C-Bitrix (бэкенд), Node.js (микросервисы и push).
Для создания веб-интерфейсов и логики взаимодействия мы использовали Nuxt.js. 1С-Bitrix выбрали для управления контентом в админке и как API для работы пользователей с порталом. Node.js использовали для реализации микросервисов в личном кабинете и push-уведомлений в PWA приложении.
Расскажем о решениях подробнее.
МСА подход и схема работы портала
Команда решила выбрать подход МСА и обеспечить такие преимущества, как:
- повышение независимости и автономности портала,
- гибкую масштабируемость,
- поддержку концепции о децентрализации управления данными.
В схеме работы портала выделены такие крупные блоки, как задачи и обращения. МСА подход позволяет поддерживать актуальность данных при работе с задачами и обращениями, а также отказоустойчивость в период пиковой нагрузки.
На схеме вы можете увидеть сервисную архитектуру системы, в которой показана интеграция сайта с серверами клиента, а часть функционала реализована через микросервисы:
1С Bitrix
Клиент пришел к нам с запросом сделать сайт на 1С Bitrix. Такой выбор был связан с требованиями к защищенности портала. Работая с техническим заданием, мы поняли, что платформа не закроет часть функций. Не получится корректно настроить работу с обращениями и личным кабинетом. Для реализации планов клиента решение не подходило.
В итоге на Bitrix мы сделали только информационную часть. Сотрудники компании смогут удобно работать с контентом портала. Они будут подгружать документы, материалы по структуре, датам рождения и фотографии из базы данных компании. Для связи с БД мы сделали интеграцию.
В системе предполагаются разные роли и доступы к информации. Для администраторов разработан интерфейс, позволяющий публиковать обращения к сотрудникам от лица руководства. Отдельная админка позволит размещать контент другим менеджерам компании.
Микросервисы, особенности и задачи
«Мы реализовали несколько микросервисов, работающих отдельно от системы на 1С Bitrix. Это оптимизирует нагрузку на систему и позволит обрабатывать данные независимо от общего взаимодействия сайта. Сотрудники смогут одновременно работать в системе с обращениями без сбоев.
Обмен информацией будет происходить мгновенно, позволяя быстро обновлять список задач. Параллельное сохранение данных защитит от дублирования данных и возникновения различных ошибок.
Наше решение позволит гибко работать с расширением функционала по задачам и обращениям. Система станет более отказоустойчивой».
Реализация PWA и push-уведомления
Изначально возникали сложности с реализацией
уведомлений в системе и их отслеживанием. Мы искали решение, чтобы исполнители точно видели поставленные задачи, а менеджеры — реакцию на них.
Для Android и iOS команде нужно было разработать PWA приложение, прежде всего, для отправки push уведомлений. Если в Android подобный функционал реализован давно, для iOS это стало возможным с выходом Safari 16.4. (После обновления удалось корректно реализовать уведомления на iOS).
Мы создали функционал отправки уведомлений по задачам и обращениям на Express.js. Для этого использовали библиотеку для Node.js под названием web-push. Она хорошо сочетается с Firebase Cloud Messaging (системой от Google). Для фонового отслеживания уведомлений в приложении использовали две технологии: скрипт сервис-воркер и Push API. Сервис-воркер работает независимо от основного потока веб-приложения. Он обрабатывает сетевые запросы, кэширует данные и прослушивает входящие push.
Push API позволяет серверам отправлять данные напрямую к браузеру пользователя. На схеме цветом выделены части, отвечающие за работу push:
Проект