В продолжение нашего обзора Azure Open AI мы детально рассмотрим реализацию фронтенд-части проекта. Эта статья является логическим продолжением первого видео, где обсуждался бэкенд. Фронтенд – это «лицо» продукта, обеспечивающее удобство работы пользователей и корректность выполнения всех процессов. Рассмотрим основные цели, компоненты и технические решения, которые позволили создать гибкий и функциональный интерфейс.
А узнать больше об этом проекте можно в нашем видео:
Основные цели
Разработка фронтенда включала ряд ключевых задач:
Удобный интерфейс: пользователь должен легко взаимодействовать с системой.
Просмотр и замена файлов: добавлена возможность предварительного просмотра загружаемых файлов и их замены.
Обработка метаданных: обеспечение редактирования результатов, полученных от AI, так как алгоритмы не всегда работают идеально.
Гибкость: интеграция возможностей редактирования, чтобы пользователи могли корректировать данные перед их отправкой в систему.
Компоненты
Фронтенд построен на трех основных элементах:
Скрипт: отвечает за вызов функциональности.
Веб-ресурс: написан на React.js и является ядром визуализации и взаимодействия с пользователем.
Кнопка на ленте: триггер для запуска скрипта и загрузки веб-ресурса в виде всплывающего окна.
Такая структура позволяет организовать четкий и понятный рабочий процесс.
Обработка PDF-файлов
Для интеграции и обработки PDF-файлов используется библиотека ReactPDF. Основные преимущества этой библиотеки:
Простота использования и интеграции.
Поддержка функций загрузки и просмотра PDF-файлов непосредственно в браузере.
Навигация между страницами, масштабирование и возможность загрузки файлов как локально, так и через URL.
Также предусмотрена настройка пагинации для удобной работы с многостраничными документами. Это делает библиотеку идеальным выбором для проекта.
Обработка данных
Для рендера полей используется библиотека React Fluent UI, которая предлагает набор интерфейсных компонентов от Microsoft. Её особенности:
Интуитивный дизайн, соответствующий стилю Microsoft Office и Dynamics 365.
Готовые компоненты для текстовых полей, всплывающих окон, гридов, идентичных стандартным элементам Dynamics.
Простота настройки и поддержка адаптивных тем.
Обработка типов полей
Работа с полями включает несколько основных типов:
DateTime: используется компонент DatePicker, интегрированный со стандартами Dynamics.
Number: в зависимости от типа числа (decimal, int, float) применяются разные настройки и валидация.
Text: используется обычный input с соответствующим типом.
Этот подход обеспечивает точность и удобство работы с различными форматами данных.
OptionSet и Bool
Для работы с OptionSet и Bool используются метаданные, которые считываются напрямую из CRM. Это позволяет избежать хардкодинга, что особенно важно при изменении лейблов в системе. Использование ComboBox предоставляет пользователям возможность быстрого поиска нужных значений, что значительно повышает удобство.
Lookup
Работа с полями Lookup потребовала создания кастомного компонента. Наше решение включает:
Предварительный просмотр найденных элементов.
Кнопку Search in CRM, которая открывает стандартное всплывающее окно Dynamics для расширенного поиска.
Автоматическую интеграцию выбранных контактов в список с возможностью повторного выбора.
Валидация
Валидация выполняется на уровне фронтенда, что позволяет заранее проверять корректность введённых данных перед созданием записи в CRM. Если пользователь пропустил обязательные поля, система подсвечивает их красным и выводит всплывающее сообщение.
Заключение
Реализация фронтенда проекта с Azure Open AI демонстрирует, как правильно подобранные инструменты и библиотеки могут создать современный, удобный и гибкий интерфейс. От обработки PDF-файлов до работы с типами полей и валидации — каждый элемент направлен на обеспечение лучшего пользовательского опыта. Интеграция таких технологий, как React Fluent UI, ReactPDF и кастомных решений, позволяет сохранять стиль и функциональность, характерные для экосистемы Microsoft.
Comments