Разработка сайта логистической компании: low-code, мультиязычность в Jamstack и возможности масштабирования

Рассказываем, как команда AFFINAGE разработала корпоративный сайт для «Петровектора», почему предложила делать сайт без бэкенда и как адаптировала Open-Source-решения к стилистике компании

Petrovector — частная торговая компания, уже более 10 лет успешно работающая на международном нефтяном рынке
Занимается поставкой разного рода нефтепродуктов, логистикой, консалтингом, а также делает упор на экологию компании: поддерживает зелёный уровень мира и экологичные отношения с заказчиками и сотрудниками

Представители компании Petrovector хотели сделать свой сайт более стильным, аккуратным и направленным на своих клиентов
Перед нашей командой стояло три основные задачи:
Разработать сайт и предложить оптимальное техническое решение
Мы выбрали low-code* технологии
Интегрировать сторонние сервисы котировок
Сделать сайт мультиязычным

*Low-code — готовые инструменты, требующие минимального написания кода (разработки)
Инструменты low-code увеличивают скорость разработки типовых задач, так как требуют минимальной доработки под бизнес-требования

Со всеми задачами мы успешно справились, и вот краткая история нашего пути

Предпроектное обследование

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

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

Интеграция с виджетом котировок

Нам необходимо было сделать на сайте интеграцию с тремя разными виджетами котировок от компании TradingView и учесть одну особенность
SPA-сайты загружают подключенные JS-скрипты при каждом посещении страницы
Если пользователь откроет страницу несколько раз, скрипт тоже неоднократно «отработает», что приведет к долгой загрузке страницы или сбою в работе проекта
Мы учли эту особенность и настроили работу сайта таким образом, чтобы скрипты не запускались каждый раз
Такой подход позволяет страницам загружаться быстрее

И еще, данный сайт не привязан ни к какой CMS, поэтому для замены данных в этом графике требовалось периодически заходить и обновлять часть кода
Но наш отдел Frontend-разработки придумал специальный json, благодаря которому можно размещать свежие данные, не затрагивая основной код площадки
Такой подход позволяет клиенту быстрее редактировать данные: файл находится в корневой папке проекта, весь контент на странице статичен, поэтому информация обновляется быстро и без привязки к CMS

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

Верстка интерактивной карты с географией присутствия

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

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

Оптимизация черно-белой карты

Мы интегрировали не самую стандартную карту в блок контактов
Изначально хотели использовать Google Maps, но на этапе получения ключей отказались от нее из-за трудностей с оформлением подписки через Россию
Яндекс Карты тоже не подходили заказчику, поэтому было принято решение интегрировать Open-Source карту OpenLayers Map

У карты не было своей стилизации в черно-белом цвете, поэтому мы настроили карту так, чтобы она подходила сайту по стилистике, сделали ее черно-белой с маркером фирменного желтого цвета

Разработка иконографики

В процессе разработки концепта сайта перед нами также стояла задача создания уникальных иконок
Так, например, иконки на главной странице компании и в блоке About Us анимированные

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

Верстка таймлайна с историей компании

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

Наш таймлайн отличается от классического: на обычных таймлайнах точки идут снизу вверх, у нас же пункты идут в другую сторону

Еще одна трудность возникла с блоком Social Responsibility
На MacBook в браузере Firefox этот список преимуществ вообще не отображался

Поддержка мультиязычности

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

Итоги

Мы разработали онлайн-представительство международной логистической компании по гибридной модели
Обновленный petrovector
com сочетает лучшие практики заказной разработки с low-code технологиями, которые позволили запустить проект в оптимальные сроки
Правильно подобранный стек позволит интегрировать на сайт любые технологические решения, которые в будущем потребуются заказчику

#заказнаяразработка, #affinage #jamstack, #lowcode #nocode