Сервис по утилизации автомобилей

Клиент: Scrapi — британский онлайн-сервис по утилизации автомобилей.

Отрасль: Automotive, утилизация автомобилей, онлайн-сервисы, digital-платформы.

Услуги:

• разработка веб-сервиса;
• проектирование архитектуры веб-приложения;
• разработка на Headless Drupal;
• разработка фронтенда на Next.js и React;
• разработка и настройка REST API;
• интеграция со сторонними API;
• интеграция сайта с CRM;
• автоматизация email-рассылок;
• настройка инфраструктуры AWS;
• подготовка сайта к высоким нагрузкам;
• SEO-оптимизация архитектуры приложения.

Технологии: Drupal 8, Drupal Contenta CMS, Headless Drupal, Next.js, React, REST API, Amazon Web Services (AWS), Memcached, Varnish, Sendinblue, Recharts, CSV.

Scrapi — британский сервис по утилизации автомобилей. Он позволяет пройти весь путь от предварительной оценки машины до оформления её вывоза онлайн.

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

В назначенный день сотрудники компании забирают автомобиль и выплачивают согласованную сумму.

Нам предстояло разработать для Scrapi веб-приложение, которое автоматизирует этот процесс, интегрируется с внешними источниками данных и CRM, помогает возвращать пользователей к незавершённым заявкам и сохраняет стабильность при резких всплесках нагрузки.

Основная задача интерфейса Scrapi — провести пользователя по четырёхшаговой форме и получить заявку на утилизацию автомобиля.

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

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

Если предложение его устраивает, остаётся указать персональные данные, адрес и выбрать дату вывоза. После завершения формы заявка автоматически передаётся в CRM, а менеджеры получают уведомление по электронной почте.

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

После каждого завершённого шага форма получает уникальную короткую ссылку. Если пользователь покидает сайт, не завершив оформление, ссылка отправляется ему по электронной почте. Перейдя по ней, клиент возвращается к тому же этапу и может продолжить заполнение формы с сохранёнными данными.

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

Стоимость, которую клиент получает за автомобиль, зависит в том числе от актуальных цен на металлолом. При этом данные различаются в зависимости от региона Великобритании.
Чтобы сервис мог использовать актуальную информацию, мы реализовали импорт цен на металлолом из CSV-файлов. Динамика стоимости отображается на фронтенде в виде графиков с помощью библиотеки Recharts.

Другой важной частью проекта стали интеграции со сторонними API.
Scrapi обращается к внешним сервисам, чтобы:

• находить автомобиль по регистрационному номеру;
• получать его характеристики;
• определять адрес по почтовому индексу клиента;
• использовать полученные данные для расчёта и оформления заявки.

Для редких случаев, когда регистрационные номера автомобилей могут совпадать, мы предусмотрели дополнительную проверку по VIN.

Для работы с клиентской базой из CRM и автоматического запуска email-кампаний интегрировали Sendinblue. Его API позволил связать маркетинговые коммуникации с процессом обработки заявок на сайте.

Предыдущая версия Scrapi была построена как SPA (Single Page Application). Такой подход обеспечивал быстрый и отзывчивый интерфейс, но создавал проблемы для поискового продвижения: контент, формируемый преимущественно в браузере, сложнее корректно и стабильно отдавать поисковым роботам.

В новой версии мы использовали Next.js и серверный рендеринг.

При запросе браузер получает уже сформированную страницу, после чего управление интерфейсом переходит React. В результате пользователь получает преимущества SPA — быстрые переходы и взаимодействие с интерфейсом без полной перезагрузки страниц, — а поисковые системы получают доступный для индексации HTML-контент.

Такая архитектура позволила совместить требования к пользовательскому интерфейсу и SEO.

В качестве CMS используется Drupal 8, работающий в headless-режиме. Drupal отвечает за данные и взаимодействие с другими системами через API, а клиентскую часть приложения полностью обслуживает Next.js.

Разделение бэкенда и фронтенда позволяет независимо развивать компоненты системы и использовать Drupal как основу для сложного веб-сервиса, а не только как классическую CMS для управления страницами.

Для серверной части мы использовали дистрибутив Drupal Contenta CMS, предназначенный для построения API-first и headless-проектов.

Взаимодействие между Drupal, Next.js и другими компонентами сервиса организовано через REST API.

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

Для Scrapi это было особенно важно из-за большого количества интеграций: CRM, сервисов получения информации об автомобилях и адресах, email-платформы и других внешних источников данных.

До начала работ клиент уже сталкивался с ситуациями, когда резкий рост трафика или DDoS-атаки приводили к недоступности сервиса.

Поэтому инфраструктуру новой версии необходимо было подготовить к значительным и непредсказуемым нагрузкам.

Для проекта использовали следующий стек:

• Amazon Web Services (AWS) — облачная инфраструктура;
• Drupal 8 — CMS и серверная часть;
• Drupal Contenta CMS — основа REST API;
• Memcached — кеширование данных;
• Varnish — HTTP-кеширование;
• Next.js и React — клиентская часть приложения.

Многоуровневое кеширование позволяет уменьшить количество обращений к серверу и Drupal, быстрее отдавать пользователям уже подготовленные данные и снизить нагрузку на инфраструктуру при росте посещаемости.

Проект поддерживался новой командой до своего закрытия.