Разработка HR-портала для футбольного стадиона «Зенит-Арена»
Футбольный стадион «Зенит-Арена» является одним из лучших в России. Он стал местом проведения чемпионата мира по футболу (2018), а в 2021 году там проходили матчи чемпионата Европы. На стадионе проводятся встречи российских команд и концерты звезд.
За состоянием значимого объекта следят сотни людей. На стадионе работает порядка 500 человек: технический персонал (охранники, уборщицы, слесари, осветители), административный персонал (HR-менеджеры, руководство), маркетологи, волонтеры.
«Зенит-Арена» важно использовать максимально защищенные с точки зрения кибербезопасности IT-продукты. Бюджет на проведение мероприятий на стадионе исчисляется миллионами долларов. Нежелательный инцидент (например, получение хакерами доступа к экранам) или срыв работы может привести к крупным экономическим, политическим и репутационным рискам.
Для обеспечения безопасности на стадионе внимательно относятся к проверке сотрудников и болельщиков. Компания отказалась от использования коробочных решений и облачных сервисов. «Осьминожке» поручили разработать с нуля кастомную систему для персонала. Чувствительные данные будут храниться на внутренних серверах компании.
HR-отдел решил разработать с нуля портал, упрощающий взаимодействие с сотрудниками. Это существенно сократит трудозатраты HR-менеджеров, а техническому персоналу позволит просматривать документы и получать помощь.
Цель проекта
Заменить стандартные решения новой, защищенной от внешних воздействий системой. Онлайн-платформа, доступная с компьютеров и смартфонов, позволит пользователям быстро обмениваться информацией и использовать внутренние сервисы.
Мы решили
HR-отдел работает в условиях высокой текучки персонала. Каждый менеджер курирует порядка 50 сотрудников. Он решает десятки задач: от онбординга до анонсов событий, согласования больничных, отпусков, увольнений. Из-за этого трудно поддерживать порядок в документах и быстро помогать сотрудникам.
Стандартные коробочные решения, например, Bitrix 24, не закрывали боли HR-отдела и технического персонала. Часть команды не пользовалась таск-трекерами, считая их неудобными. Это неэффективно: важно, чтобы весь штат компании использовал единую систему постановки задач и создания обращений.
Новый портал с интуитивно понятным интерфейсом поможет лучше выстраивать HR-процессы. Он автоматизирует работу HR-отдела и высвободит много времени. Команде стадиона будет проще обращаться к менеджерам и узнавать статус по задачам.
Проект
Разработать удобный веб-портал на 1С-Bitrix с реализацией микросервисов на Node.js и PWA-приложение для Android и iOS,
Обеспечить возможность для пользователей с разным уровнем доступа работать с документами и обращениями в системе,
Сделать решение, помогающее быстрой безопасной работе стадиона.
На всех этапах работы мы активно сотрудничали с инхаус командой клиента. Еще на пресейле порекомендовали им, какие технологии выбрать с учетом аудитории проекта и особенностей работы стадиона.
“На предпроектном исследовании мы поняли, что у многих сотрудников доступа к компьютерам. Предложили клиенту разработать мобильное приложение. Однако это не вписывалось в бюджет и планы клиента, так что мы поискали альтернативное решение. PWA-приложение на iOS и Android дополнит веб-версию системы. В таком случае учитывается, что менеджеры могут работать на портале за компьютером, а рабочему персоналу удобно пользоваться системой с мобильного. Разработка PWA менее затратна, чем создание двух приложений».”
“На предпроектном исследовании мы поняли, что у многих сотрудников доступа к компьютерам. Предложили клиенту разработать мобильное приложение. Однако это не вписывалось в бюджет и планы клиента, так что мы поискали альтернативное решение.
PWA-приложение на iOS и Android дополнит веб-версию системы. В таком случае учитывается, что менеджеры могут работать на портале за компьютером, а рабочему персоналу удобно пользоваться системой с мобильного. Разработка PWA менее затратна, чем создание двух приложений».”
Михаил Шрайбман
CEO Осьминожка
передает полезную информацию (можно изучить анонсы событий, базу знаний, структуру компании и данные по сотрудникам)
позволяет вести внутреннюю коммуникацию (назначать и отслеживать задачи, обращаться за больничным, заказывать справки и пр.).
В работе мы вдохновлялись паттернами популярных сервисов, работающих с широкой аудиторией пользователей. Это «Госуслуги», «Мои субсидии» и другие полезные приложения. За основу мы взяли брендбук клиента.
Минималистичный дизайн системы позволяет быстро ориентироваться в ней. Учли, что порталом будут пользоваться люди с разным пользовательским опытом (от директора до электрика). Сделали крупные контрастные кнопки, простые выпадающие списки и подписи. Адаптировали интерфейс под разные типы устройств.
Стек: Nuxt.js (фронтенд), 1C-Bitrix (бэкенд), Node.js (микросервисы и push). Для создания веб-интерфейсов и логики взаимодействия мы использовали Nuxt.js. 1С-Bitrix выбрали для управления контентом в админке и как API для работы пользователей с порталом. Node.js использовали для реализации микросервисов в личном кабинете и push-уведомлений в PWA приложении.
Расскажем о решениях подробнее.
Команда решила выбрать подход МСА и обеспечить такие преимущества, как:
В схеме работы портала выделены такие крупные блоки, как задачи и обращения. МСА подход позволяет поддерживать актуальность данных при работе с задачами и обращениями, а также отказоустойчивость в период пиковой нагрузки.
На схеме вы можете увидеть сервисную архитектуру системы, в которой показана интеграция сайта с серверами клиента, а часть функционала реализована через микросервисы:
Клиент пришел к нам с запросом сделать сайт на 1С Bitrix. Такой выбор был связан с требованиями к защищенности портала. Работая с техническим заданием, мы поняли, что платформа не закроет часть функций. Не получится корректно настроить работу с обращениями и личным кабинетом. Для реализации планов клиента решение не подходило.
В итоге на Bitrix мы сделали только информационную часть. Сотрудники компании смогут удобно работать с контентом портала. Они будут подгружать документы, материалы по структуре, датам рождения и фотографии из базы данных компании. Для связи с БД мы сделали интеграцию.
В системе предполагаются разные роли и доступы к информации. Для администраторов разработан интерфейс, позволяющий публиковать обращения к сотрудникам от лица руководства. Отдельная админка позволит размещать контент другим менеджерам компании.
«Мы реализовали несколько микросервисов, работающих отдельно от системы на 1С Bitrix. Это оптимизирует нагрузку на систему и позволит обрабатывать данные независимо от общего взаимодействия сайта. Сотрудники смогут одновременно работать в системе с обращениями без сбоев. Обмен информацией будет происходить мгновенно, позволяя быстро обновлять список задач. Параллельное сохранение данных защитит от дублирования данных и возникновения различных ошибок. Наше решение позволит гибко работать с расширением функционала по задачам и обращениям. Система станет более отказоустойчивой».
Денис Нагаев
CTO Осьминожка
Изначально возникали сложности с реализацией уведомлений в системе и их отслеживанием. Мы искали решение, чтобы исполнители точно видели поставленные задачи, а менеджеры — реакцию на них. Для 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:
очистить все поля в этой области и повторите отправку
Заявка обратной связи принята!
