CarCraft

351

9 ноя 2023 в 6:18

KapDEV Россия, Москва

Клиент

КарКрафт

Сфера

Авто/Мото

Регион

Россия, Москва

Сдано

Ноябрь 2023

Задача

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

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

Нам предстояло разработать новостной блок - по сути отдельный сайт с CMS, в котором на этапе MVP контент-менеджер в ручном режиме будет аккумулировать посты, статьи, новости и видео с разных площадок компании.

Помимо самого сайта, который можно вставлять, например, через iframe, необходимо было разработать API для получения контента, а так же JavaScript SDK, который бы позволял вставлять заранее заготовленные контент-блоки на другие сайты.

Решение

— Выбор стэка

CarCraft крайне технологичная компания с сильнейшей технической экспертностью in-house. Наше решение должно было быть не менее технологичным, чем общий уровень системы.

Мы не стали использовать Bitrix, Wordpress или другую шаблонную CMS. Нами было принято решение сделать кастомную разработку. Сроки и бюджет позволяли.

Нашей командой была выбрана связка Next.js + Strapi (headless CMS). Это решение позволило нам разработать технологичный front-end на React, а также в кратчайшие сроки реализовать стабильный API для получения контента с автогенерирующейся документацией.

1. Strapi

Это потрясающая headless (то есть без front-end'a) CMS, которая позволяет в кратчайшие сроки реализовать базовые CRUD операции для любого технологического стэка. На момент написания текста наш сайт работает на такой же связке - Next.js + Strapi.

Разработка и релиз всего back-end'a для этого проекта занял у нас примерно час-полтора, включая поиск и установку плагинов, настройку домена, обратного прокси, сертификатов, переименования полей на русский* и т.д.

Помимо GUI для управления контентом Strapi предоставил полноценный API для получения записей, которым пользовался front-end и другие сервисы CarCraft. Документация автоматически генерировалась в Swagger при помощи бесплатного плагина из магазина плагинов.

*Strapi переведён на русский язык, но поля, которые создаются при добавлении таблиц, необходимо в ручную перевести на русский.

2. Next.js

Наш основной React фреймворк, который позволяет быстро разрабатывать не только высокотехнологичные сервисы, но также хорошо оптимизированные ux-friendly сайты.

В рамках проекта новостного блока Next.js проект был необходим для предоставления команде CarCraft возможности просто интегрировать контент-хаб через iframe.

3. JavaScript SDK

Не очень большая, но одна из интереснейших частей системы, так как она достаточно нетривиальная. Как часто нам приходится вносить изменения в Webpack конфиг при работе с React, а тем более с Next.js поектами? В нашей практике достаточно редко.

Этот случай как раз тот самый редкий. В рамках проекта мы написали кастомный конфиг Webpack'a, который позволил не просто собрать функцию создания блоков в отдельный файл, но и преобразовал весь статичный меди контент в base64, чтобы не зависеть от сервера сайта и избежать проблем с CORS.

— Проверка контента

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