Кейс-стади: как модернизировать систему из 15 сайтов с помощью DevOps и дизайн-системы на примере сайтов НЛМК
Article title

Кейс-стади: как модернизировать систему из 15 сайтов с помощью DevOps и дизайн-системы на примере сайтов НЛМК

1 сентября 2020
~ 10 минут на чтение
В середине 2018 года мы начали работу по редизайну корпоративных сайтов концерна НЛМК. Нам предстояло решить много задач технического плана, поскольку изначальные 15 сайтов не были объединены в единую систему. Из нашего нового кейс-стади вы узнаете о методах, которые мы использовали для эффективного обновления корпоративных веб-ресурсов.

Зачем корпорация обновляла сайты?

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

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

Визуально сайты выглядели устаревшими. Их создавали разные специалисты в разное время, поэтому дизайн веб-страниц имел заметные отличия. И поскольку доработка сайтов осуществлялась на протяжении длительного периода времени, в коде страниц накопился технический долг — часть кода, которая либо не использовалась, либо использовалась, но замедляла скорость загрузки страниц. Наконец, у некоторых сайтов были сложности с отображением контента в мобильной версии. Эту проблему следовало исправить, потому что официальные сайты для современных корпораций — это часть репутационного маркетинга.
человеко-часов
6200
14
месяцев работы
20
человек в команде
Единая система сайтов концерна НЛМК, разработанная Uplab
Результатом работы наших аналитиков, дизайнеров и программистов стала единая система сайтов, построенная на платформе Битрикс. Теперь администраторы веб-ресурса используют одну админку для доступа ко всем доменам. Информацию добавляют одновременно на любые необходимые сайты.

Как эффективно перенести сайты на новый движок: рецепт Uplab

Разработка Uplab: корпоративные сайты концерна НЛМК

Унифицируем визуальную составляющую

Наши специалисты разработали новый дизайн для сайтов и создали единую базу компонентов — набор шаблонов, которые автоматически применяются при создании новой веб-страницы с определенным содержанием. Администраторам сайтов не нужно собирать в конструкторе страницу из отдельных блоков. Такая автоматизация значительно сокращает время работы и избавляет от случайных ошибок. Функционал единой базы компонентов позволяет вносить глобальные правки на сайт (начертания шрифтов, изменение вида заголовков и т.д.) на всех опубликованных страницах.

Ускоряем загрузку контента

После перевода всех сайтов на Битрикс и создания единой админки значительно сократилось время публикации материалов. Ключевое нововведение — добавление панели «Площадки». При подготовке публикации администраторы отмечают галочками, на какие сайты NLMK Group добавить новый контент. Например, новость «Группа НЛМК подтвердила соответствие систем менеджмента международным стандартам устойчивого развития» является значимой для всех русских подразделений корпорации, поэтому добавлена на соответствующие сайты в разделы «Медиа-центр».
Разработка Uplab: медиа-центр сайта концерна НЛМК

Настраиваем автоматический перенос контента

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

Чтобы выполнить работу быстро и без ошибок, мы разработали модуль переноса контента (МПК). Он состоял из двух подмодулей. На новых сайтах установили ведущий подмодуль. Он импортировал контент со старых сайтов через обращение к дочерним подмодулям, которые, в свою очередь, были установлены на всех старых веб-доменах. Функционирование МПК осуществлялось по специально разработанному протоколу REST API.

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

Проводим гибридное тестирование новых релизов

В процессе разработки любого проекта важно настроить прозрачный механизм взаимодействия между заказчиком и исполнителем. Чтобы избежать «сломанного телефона», наши специалисты настроили так называемый «конвейер фич» на базе фреймворка DevOps. Методика DevOps обеспечила тесное взаимодействие между разработчиками Uplab с одной стороны и IT-специалистами концерна НЛМК — с другой.
Разработка Uplab: корпоративный сайт концерна НЛМК, раздел Эффективность
По конвейеру поступали запросы от заказчика и передавались выполненные задания. На каждом этапе задача проверялась автоматически и вручную. Таким образом, и заказчик, и исполнители были уверены в правильности выполняемых действий. С учетом сложности проекта, конвейер фич состоял из трех серверов, на них находились четырех версии сайта. Первый тестовый сервер использовали разработчики Uplab. Второй тестовый сервер — команда НЛМК. На третьем сервере, тоже в ведении НЛМК, находились две версии сайта: pre-prod и prod, то есть бета-версия и готовое веб-приложение. Только пройдя одобрение в три этапа новый функционал добавлялся на рабочую версию.
Наши специалисты активно использовали автоматическое многоуровневое тестирование новых элементов, чтобы обеспечить абсолютную правильность созданных страниц и элементов UI.
Например, автотест наличия разметки контролировал правильность визуальной составляющей для разных типов дисплеев в десктопной и мобильной версии сайта. Автоматические тесты контролировали наличие критически важного контента на сайте (например, документов о финансовой отчетности) и проверяли функционирование веб-форм.

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

Подведем итоги

Результатом 9-месячной работы стал комплекс из 15 сайтов, которые адаптированы для просмотра на компьютере и на смартфоне. Хотя теперь все 15 веб-ресурсов построены с единым UI, для заказчика главным результатом является не внешний вид, а содержание. Мы вложили значительные ресурсы, чтобы настроить удобное управление сайтами и импортировать старый контент на новые домены, внедрить DevOps. Но именно эти инструменты и методики ускорят и облегчат решение задач для нашего заказчика.
229
Оцените статью
(3.66)

Поделитесь материалом с друзьями и коллегами:

Комментарии к статье

Другие статьи в блоге
Статьи ~ 30 минут на чтение

Дорожная карта: подробное объяснение с примерами и шаблонами

116649
17 сентября 2020
Статьи ~ 30 минут на чтение

Как создавать и использовать лендинги: разбор с примерами

279359
20 августа 2020
Статьи ~ 10 минут на чтение

Кейс-стади: Как мы помогли мировому промышленному лидеру En+ Group сделать сайт, который соответствует статусу компании

566
18 августа 2020
Статьи ~ 25 минут на чтение

SWOT-анализ: определение, применение, примеры

805
11 августа 2020
Статьи ~ 35 минут на чтение

Как прокачать Digital Skills. Подборка ресурсов для самообразования

2102
05 июня 2020
Статьи ~ 20 минут на чтение

G Suite: 33 полезные функции для бизнеса

2836
24 апреля 2020
Статьи ~ 5 минут на чтение

Как работать из дома эффективно: лайфхаки от удаленщиков Uplab

2040
31 марта 2020
Статьи ~ 20 минут на чтение

Как продвинуть интернет-магазин с помощью коммерческих факторов

2214
27 марта 2020
Статьи ~ 15 минут на чтение

Work From Home: полезные сервисы для удаленной работы

2524
24 марта 2020
Статьи ~ 30 минут на чтение

Теория ограничений систем Голдратта: как повысить эффективность бизнеса

6059
16 марта 2020