Введение

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

Возможности административной панели:

• Полное управление полями: Создание, редактирование и удаление полей различных типов: текст, число, выпадающий список, дата, чекбокс и умное поле с автозаполнением.

• Структурирование формы: Организация полей в логические разделы (например, «Информация о компании», «Детали заказа», «Технические параметры») с помощью специальных полей-заголовков.

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

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

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

1. Синхронизация данных в реальном времени: Поля с автозаполнением (например, «Название компании» или «Продукт») напрямую запрашивают данные из Bitrix24. Когда пользователь начинает вводить текст, система мгновенно предлагает релевантные варианты из базы данных компании. Это устраняет ошибки и дубликаты. Ключевой доработкой стала интеллектуальная система поиска: если пользователь вводит цифры, поиск идет по ID, если текст — по названию.

2. Автоматическое создание сделок: После того как пользователь отправляет заполненную форму, система автоматически создает новую сделку в Bitrix24 в нужной воронке, прикрепляя все введенные данные и корректно указывая ответственного менеджера. Это избавляет менеджеров от необходимости вручную переносить информацию.
3. Обновление статусов: Система синхронизирует статусы заявок между Beton-CRM и Bitrix24 с учетом категорий сделок, обеспечивая прозрачность процесса для всех участников. Это было достигнуто благодаря правильной передаче categoryId и формированию STAGE_ID с префиксом категории.

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

• Связанные поля (Linked Fields): Эта функция позволяет одним кликом копировать информацию между разными разделами формы (например, данные из раздела «Заказчик» в раздел «Получатель»). Это значительно ускоряет заполнение и минимизирует вероятность ошибок. Мы решили сложную проблему копирования значений в полях с автозаполнением, где система теперь корректно переносит как ID, так и отображаемое значение.

• Удобная навигация: Длинная форма разделена на сворачиваемые разделы (аккордеоны). Пользователь может сосредоточиться на текущем блоке, а не теряться в большом количестве полей. Изначально была проблема, когда поля без раздела не отображались, но мы это исправили, сделав такие группы всегда раскрытыми по умолчанию.

• Управление доступом на основе ролей:

• Пользователи: Могут создавать заявки и отслеживать статусы только своих заказов.

• Администраторы: Имеют полный доступ к системе — управляют структурой формы, пользователями, видят все заявки и могут настраивать интеграции.

Оптимизация производительности: фокус на 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 Bitrix24 и проблем с позиционированием элементов при Drag-and-Drop.

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

Итоги проекта

• Автоматизировала рутинные задачи менеджеров.

• Упростила и ускорила процесс заказа для клиентов.

• Обеспечила полную синхронизацию данных с основной корпоративной системой.

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