Разработка сайта логистической компании: low-code, мультиязычность в Jamstack и возможности масштабирования
Рассказываем, как команда AFFINAGE разработала корпоративный сайт для «Петровектора», почему предложила делать сайт без бэкенда и как адаптировала Open-Source-решения к стилистике компании.
Petrovector — частная торговая компания, уже более 10 лет успешно работающая на международном нефтяном рынке. Занимается поставкой разного рода нефтепродуктов, логистикой, консалтингом, а также делает упор на экологию компании: поддерживает зелёный уровень мира и экологичные отношения с заказчиками и сотрудниками.
Представители компании Petrovector хотели сделать свой сайт более стильным, аккуратным и направленным на своих клиентов. Перед нашей командой стояло три основные задачи:
- Разработать сайт и предложить оптимальное техническое решение. Мы выбрали low-code* технологии.
- Интегрировать сторонние сервисы котировок.
- Сделать сайт мультиязычным.
*Low-code — готовые инструменты, требующие минимального написания кода (разработки). Инструменты low-code увеличивают скорость разработки типовых задач, так как требуют минимальной доработки под бизнес-требования.
Со всеми задачами мы успешно справились, и вот краткая история нашего пути.
Предпроектное обследование
На предпроектном обследовании выявили, что нужно сделать репутационный сайт для зарубежных банков, и при этом уложиться в ограниченный бюджет и сроки. Наша команда придумала простое, но эффективное решение.
Мы предложили развернуть проект на low-code-технологиях и сделать акцент на Frontend-технологиях. Сайт получился красивый, статичный и готовый к дальнейшему развитию и доработке, если возникнет такая необходимость. Такой подход обеспечивал ускорение релиза проекта в два раза и гарантировал готовность сайта в срок.
Для работы над проектом выбрали Jamstack — статичную верстку, которая при необходимости забирает данные из внешних API, чтобы страницы и сайты грузились быстрее. Это одна из причин, почему мы отказались от бэкенда, — статичные сайты грузятся быстрее. А еще такой сайт можно разместить на любом хостинге, потому что все поддерживают статичные файлы.
При этом, сайт на low-code технологиях не представляет собой «консерву», в которой уже ничего не поменяешь. Например, в процессе работы появилось требование интеграции котировок, и благодаря правильному выбору технологий мы реализовали сложную функциональность, на которую всегда подключают бэкенд. Но обо всем по порядку.
Интеграция с виджетом котировок
Нам необходимо было сделать на сайте интеграцию с тремя разными виджетами котировок от компании TradingView и учесть одну особенность. SPA-сайты загружают подключенные JS-скрипты при каждом посещении страницы. Если пользователь откроет страницу несколько раз, скрипт тоже неоднократно «отработает», что приведет к долгой загрузке страницы или сбою в работе проекта. Мы учли эту особенность и настроили работу сайта таким образом, чтобы скрипты не запускались каждый раз. Такой подход позволяет страницам загружаться быстрее.
И еще, данный сайт не привязан ни к какой CMS, поэтому для замены данных в этом графике требовалось периодически заходить и обновлять часть кода. Но наш отдел Frontend-разработки придумал специальный json, благодаря которому можно размещать свежие данные, не затрагивая основной код площадки. Такой подход позволяет клиенту быстрее редактировать данные: файл находится в корневой папке проекта, весь контент на странице статичен, поэтому информация обновляется быстро и без привязки к CMS.
Именно поэтому на сайте можно смотреть нефтяные, газойлевые и валютные котировки в режиме реального времени. Котировку сопровождает набор данных, который помогает понять, как ведет себя актив в текущий момент и в течение определенного времени. Такие данные помогают ограничить убытки и помочь совершить выгодные сделки.
Верстка интерактивной карты с географией присутствия
В блоке присутствия отмечены все страны, в которых у компании Petrovector есть официальное представительство. Изначально не был указан полный набор стран, которые должны были там размещаться, поэтому большая часть точек выставлялась вручную.
Все точки интерактивные, при наведении высвечивается название страны на любой из языковых версий. То есть, когда на сайте включен английский язык, названия написаны на этом языке, если переключиться на французский, названия автоматически переводятся на французский. Все переключения происходят налету без перезагрузки страницы.
Оптимизация черно-белой карты
Мы интегрировали не самую стандартную карту в блок контактов. Изначально хотели использовать Google Maps, но на этапе получения ключей отказались от нее из-за трудностей с оформлением подписки через Россию. Яндекс Карты тоже не подходили заказчику, поэтому было принято решение интегрировать Open-Source карту OpenLayers Map.
У карты не было своей стилизации в черно-белом цвете, поэтому мы настроили карту так, чтобы она подходила сайту по стилистике, сделали ее черно-белой с маркером фирменного желтого цвета.
Разработка иконографики
В процессе разработки концепта сайта перед нами также стояла задача создания уникальных иконок. Так, например, иконки на главной странице компании и в блоке About Us анимированные.
Иконки реагируют при наведении на блок. Мы сделали несколько вариантов и в результате выбрали вариант со слайдером и Parallax-эффектом. Из выбранных нами референсов заказчик показал понравившиеся примеры. Отталкиваясь от этих примеров, мы создали уникальную иконографику.
Верстка таймлайна с историей компании
Изначально блок таймлайна должен был включать в себя пять пунктов и быть горизонтальным, но в процессе работы над ним мы решили добавить подробную историю развития компании.
Наш таймлайн отличается от классического: на обычных таймлайнах точки идут снизу вверх, у нас же пункты идут в другую сторону.
Блок со скроллом был одной из самых непростых задач на проекте. Мы рассматривали три варианта реализации и в результате остановились на реализации через стиль `position: fixed`. Этот элемент блокирует фон относительно окна, создавая тем самым эффект фиксированного скролла в блоке.
Еще одна трудность возникла с блоком Social Responsibility. На MacBook в браузере Firefox этот список преимуществ вообще не отображался.
Во время тестирования обнаружили, что блок Social Responsibility отображался не на всех устройствах. Проблема была в ключевых словах: AdBlock plus воспринимал их как рекламу и не показывал пользователям. Мы адаптировали тексты, сделав их «нерекламными», и сохранили репутацию компании, потому что блок с историей компании начал отображаться во всех браузерах.
Поддержка мультиязычности
В сайт интегрировано три языка: русский, английский и французский. На данный момент доступны только английский и французский. Благодаря правильно выбранным технологиям, в дальнейшем на сайт можно добавлять еще больше языков.
Итоги
Мы разработали онлайн-представительство международной логистической компании по гибридной модели. Обновленный petrovector.com сочетает лучшие практики заказной разработки с low-code технологиями, которые позволили запустить проект в оптимальные сроки. Правильно подобранный стек позволит интегрировать на сайт любые технологические решения, которые в будущем потребуются заказчику.
В перспективе на сайт можно будет добавить любой динамичный контент, новости, статьи, делать SEO-раскрутку, интегрировать формы для заявок, еще больше языков. У нас получился сайт, который выглядит солидно на всех устройствах, включая мобильные, потому что мы применяем резиновую верстку и слышим потребности заказчика. Благодаря новому сайту репутация Petrovector многократно повысилась и позволила компании заключить новые сделки, даже в условиях санкций.