Введение

Beton-CRM — это специализированная веб-система, разработанная для оптимизации и автоматизации процесса приёма и обработки заказов в компании по производству бетона. Проект был создан с нуля для решения уникальных задач бизнеса, требующих гибкости и высокой производительности, недоступных в стандартных “коробочных” решениях.

 
Основная цель проекта — предоставить интуитивно понятный инструмент для клиентов и мощную административную панель для менеджеров. Система построена на современном технологическом стеке: React и TypeScript на фронтенде, Node.js и Express на бэкенде, с базой данных MongoDB и глубокой интеграцией с корпоративной CRM Битрикс24.

 
Ключевая особенность: Динамический конструктор форм

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

• Полное управление полями: Создание, редактирование и удаление полей различных типов: текст, число, выпадающий список, дата, чекбокс и умное поле с автозаполнением.
• Структурирование формы: Организация полей в логические разделы (например, “Информация о компании”, “Детали заказа”, “Технические параметры”) с помощью специальных полей-заголовков.
• Интуитивное управление порядком: Удобный Drag-and-Drop интерфейс для изменения порядка полей и целых разделов, позволяющий быстро адаптировать форму под меняющиеся бизнес-требования. Система автоматически пересчитывает порядок всех затронутых элементов, поддерживая целостность данных.

Глубокая интеграция с Битрикс24

Одной из важнейших задач была бесшовная интеграция с существующей в компании CRM-системой — Битрикс24. Beton-CRM не заменяет её, а расширяет, автоматизируя поток данных. 

Как это работает:

1. Синхронизация данных в реальном времени: Поля с автозаполнением (например, “Название компании” или “Продукт”) напрямую запрашивают данные из Битрикс24. Когда пользователь начинает вводить текст, система мгновенно предлагает релевантные варианты из базы данных компании. Это устраняет ошибки и дубликаты. Ключевой доработкой стала интеллектуальная система поиска: если пользователь вводит цифры, поиск идет по ID, если текст — по названию.
2. Автоматическое создание сделок: После того как пользователь отправляет заполненную форму, система автоматически создает новую сделку в Битрикс24 в нужной воронке, прикрепляя все введенные данные и корректно указывая ответственного менеджера. Это избавляет менеджеров от необходимости вручную переносить информацию.
3. Обновление статусов: Система синхронизирует статусы заявок между Beton-CRM и Битрикс24 с учетом категорий сделок, обеспечивая прозрачность процесса для всех участников. Это было достигнуто благодаря правильной передаче categoryId и формированию STAGE_ID с префиксом категории. 

Интеллектуальные функции и пользовательский опыт (UX)

Мы уделили особое внимание тому, чтобы сделать работу с формой максимально удобной.

• Связанные поля (Linked Fields): Эта функция позволяет одним кликом копировать информацию между разными разделами формы (например, данные из раздела “Заказчик” в раздел “Получатель”). Это значительно ускоряет заполнение и минимизирует вероятность ошибок. Мы решили сложную проблему копирования значений в полях с автозаполнением, где система теперь корректно переносит как ID, так и отображаемое значение.
• Удобная навигация: Длинная форма разделена на сворачиваемые разделы (аккордеоны). Пользователь может сосредоточиться на текущем блоке, а не теряться в большом количестве полей. Изначально была проблема, когда поля без раздела не отображались, но мы это исправили, сделав такие группы всегда раскрытыми по умолчанию.
• Управление доступом на основе ролей:
• Пользователи: могут создавать заявки и отслеживать статусы только своих заказов.
• Администраторы: имеют полный доступ к системе — управляют структурой формы, пользователями, видят все заявки и могут настраивать интеграции. 

Оптимизация производительности: фокус на Android и мобильных устройствах

Одной из самых сложных и интересных задач была оптимизация производительности. Первоначальные тесты показали, что на мобильных устройствах (особенно на Android) форма работала медленно, с заметными задержками при вводе текста. 

Принятые меры:

• Миграция с Formik на React Hook Form: Этот стратегический шаг позволил избавиться от проблемы “лишних” перерисовок компонентов (re-renders) и значительно повысить отзывчивость интерфейса. Это решило критическую ошибку Maximum update depth exceeded.
• Адаптивная оптимизация ввода: Была внедрена “умная” система с использованием техник debounce и throttle. Запросы на поиск в полях с автозаполнением отправляются не при каждом нажатии клавиши, а с задержкой (например, 1000 мс), что кардинально снизило нагрузку.
• Создание легковесных компонентов: Разработан специальный компонент FastAutocompleteInput, оптимизированный для быстрой работы на медленных устройствах. Вся система оптимизации была вынесена в отдельный хук useAndroidOptimization.

Проведенное профилирование показало впечатляющие улучшения:

• INP (Interaction to Next Paint) снизился на 51%: с 3,720 мс до 1,824 мс.
• Отклик на ввод с клавиатуры ускорился до 75%.

Техническая архитектура и процесс разработки

Проект построен на надежном и масштабируемом стеке технологий.

• Frontend: React, TypeScript, React Hook Form, Axios.
• Backend: Node.js, Express, Mongoose (для работы с MongoDB), JWT (для аутентификации).
• База данных: MongoDB.
• Инфраструктура: Nginx для проксирования запросов, PM2 для управления процессами Node.js.

• Целостность данных: С самого начала был сделан акцент на надежности. Была разработана система автоматической валидации базы данных при старте сервера, которая проверяет целостность связей между сущностями (например, что у каждого поля есть форма) и может автоматически исправлять некоторые проблемы. Это предотвратило множество трудноуловимых багов, таких как “исчезающие” поля.
• Итеративное решение проблем: В ходе разработки было решено множество нетривиальных задач: от исправления ошибок рендеринга в React до отладки сложных сценариев взаимодействия с API Битрикс24 и проблем с позиционированием элементов при Drag-and-Drop.
• Строгая типизация: Использование TypeScript на всех уровнях проекта позволило минимизировать количество ошибок во время выполнения и сделало кодовую базу более понятной и поддерживаемой.

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

• Автоматизировала рутинные задачи менеджеров.
• Упростила и ускорила процесс заказа для клиентов.
• Обеспечила полную синхронизацию данных с основной корпоративной системой.
• Продемонстрировала возможность достижения высокой производительности на сложных формах даже на мобильных устройствах.