Scrapi

Как с помощью онлайн-сервиса заботиться об окружающей среде и зарабатывать деньги

РАЗРАБОТАТЬ АРХИТЕКТУРУ САЙТА

ПОСТРОИТЬ БЭКЕНД НА REST API

РАЗРАБОТАТЬ ПРИЛОЖЕНИЕ НА NEXT.JS

ИНТЕГРИРОВАТЬ САЙТ С CRM

НАСТРОИТЬ РАССЫЛКИ ЧЕРЕЗ SENDINBLUE

ИНТЕГРИРОВАТЬ С СЕРВИСАМИ

Хотите так же?

О клиенте

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

Задача

Клиент обратился к нам за разработкой изоморфного приложения на Next.js с нуля с серверной частью на REST API и управлением контентом через Drupal, а также с интеграцией со вспомогательными сервисами. Приложение должно успешно распознаваться поисковыми системами, а его админ-панель — удобным инструментом для менеджеров сайта.

Решение

Изоморфное приложение

Изначально Scrapi — это SPA-приложение, собранное из заранее скачанных на устройство пользователя JavaScript-файлов. Оно работает быстро, но плохо индексируется поисковыми службами. Чтобы сохранить скорость работы и не снижать показатели SEO, интерфейс сервиса частично отрисовывается на сервере с помощью фреймворка Next.js, построенного на технологии React.js. Такие приложения называются изоморфными.

Роль Drupal

Drupal CMS используется на проекте для хранения данных. В рамках подхода Headless Drupal эта CMS через API может подключаться к другим приложениям и сервисам. Scrapi — пример приложения с базой данных на Drupal, интерфейс которого выполнен не на Drupal-теме или профиле, а на фреймворке Next.js.

Возврат пользователя к заполнению формы

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

Подготовка сайта к высоким нагрузкам

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

хостинг — Amazon Web Services;
CMS — Drupal 8;
кэеширование — Memcached, Varnish;
бэкенд — REST API с использованием дистрибутива Drupal Contenta CMS.

планирование даты изъятия машины на сайте Scrapi

Как бизнес отражён в архитектуре сайта

Клиенты сервиса видят цены на металл, которые разнятся от региона к региону Великобритании. Для этого мы настроили импорт данных о ценах из .csv-файла. График изменения цен строит библиотека Recharts.

Для определения утилизируемой машины по её номеру, поиска адреса клиента по почтовому коду и т. д. мы интегрировали сервис с API различных служб.

Чтобы избежать ситуации, когда сервис принимает автомобиль с номером, повторяющим номер другого автомобиля, мы предусмотрели граничное условие в виде дополнительной проверки VIN-номера автомобиля.

Управление списками клиентов в CRM и автоматический запуск почтовых рассылок работает через сервис Sendinblue: среди конкурентов у него был более простой API и выгодная цена.