О проекте

Проект представляет собой комплексный веб-портал, разработанный для фермерской и сельскохозяйственной промышленности. Портал был разработан для того, чтобы помочь фермерам эффективно управлять сельскохозяйственной деятельностью. Он предлагает широкий спектр функций, включая проектирование земельных участков, выбор культур, прогнозирование урожайности, оценку доходов и рекомендации по контролю за состоянием почвы. Проект разрабатывался в течение пяти лет командой из трех front-end разработчиков, которые отвечали за реализацию пользовательского интерфейса (UI) и интеграцию back-end сервисов. Основное внимание уделялось созданию полностью интерактивного интерфейса, который позволяет легко управлять несколькими культурами и эффективно планировать сельскохозяйственную деятельность.

Запрос клиента

Клиенту требовалось создать комплексный портал для фермеров с функциями, разработанными самим заказчиком. Наша команда занималась внедрением front-end и интеграцией библиотек Google в front-end. Мы также добавили данные со спутников для более точных прогнозов. HTML/CSS и логика портала были созданы на основе предоставленного клиентом дизайна, а также интеграции с back-end, разработанным заказчиком.

Проблемы 

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

Решение

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

1. Расширенный интерфейс дизайна и оптимизация интерфейса:
   • Динамическая функциональность Drag-and-Drop: Функция перетаскивания модуля планирования была крайне важна для взаимодействия с пользователем. Команда реализовала динамичный и быстро реагирующий интерфейс с использованием Angular (версии 8-12), обеспечив возможность обработки сложных пользовательских взаимодействий без потери производительности. Для этого были применены функции обнаружения изменений в Angular и RxJS для обновлений в режиме реального времени, что позволило системе эффективно обрабатывать множество действий пользователей одновременно.
   • Масштабируемая архитектура: Учитывая сложность управления различными видами сельскохозяйственных культур на нескольких участках, команда разработала архитектуру масштабируемого внешнего интерфейса. В это включалось модульное построение компонентов и оптимизация управления состоянием с помощью NgRx. Благодаря эффективному управлению состоянием интерфейс оставался быстро реагирующим, даже при работе с большими объемами данных или одновременном взаимодействии с несколькими элементами пользовательского интерфейса.
2. Улучшенная скорость реагирования и пользовательский опыт:
   • Пользовательские компоненты пользовательского интерфейса (UI): Команда разработала специальные компоненты пользовательского интерфейса с использованием HTML, SCSS и Angular Material, чтобы обеспечить последовательный и понятный пользовательский опыт на разных устройствах. Эти компоненты были спроектированы таким образом, чтобы обеспечить легкость и возможность многократного использования, что позволило повысить общую производительность и удобство обслуживания приложения.
   • Итерации дизайна, ориентированные на пользователя: Для улучшения комфорта пользователей команда провела несколько этапов пользовательского тестирования и сессий обратной связи. Эти сеансы предоставили информацию для итеративных улучшений интерфейса, включая оптимизацию опыта перезагрузки, доработку макета для повышения удобства использования и обеспечение соблюдения стандартов доступности.
3. Функциональная внутренняя интеграция:
   • Интеграция API и обработка данных: Интеграция фронтенда с серверными сервисами требовала от команды плотного сотрудничества с серверными разработчиками. Они реализовали асинхронные шаблоны связи с использованием RxJs для управления потоком данных между интерфейсом и сервером. Такой подход обеспечил отображение данных, полученных из API, в режиме реального времени без задержек и снижения производительности.
   • Обработка ошибок и проверка данных: команда также внедрила надежные механизмы обработки ошибок и проверки данных, чтобы гарантировать точность и согласованность данных, полученных из бэкэнда. Это предусматривало настройку пользовательских перехватчиков для HTTP-запросов для исправления ошибок содержимого и предоставления пользователям обратной связи.
4. Проактивная разработка функций:
   • Реализация панели управления:  Понимая необходимость в лучшем управлении пользователями, команда предложила и разработала панель администратора в качестве дополнительной функции. Эта панель администратора предоставила клиенту инструменты для мониторинга подписок пользователей, управления правами и создания отчетов. Команда использовала функции маршрутизации и ленивой загрузки Angular для интеграции этого модуля без влияния на производительность основного приложения.
   • Масштабируемость для будущего расширения:  Команда спроектировала архитектуру фронтэнда таким образом, чтобы ее можно было легко расширить, предвидя будущие расширения, такие как дополнительные модули для конкретных культур или инструменты управления фермой. Используя подход к разработке на основе компонентов, команда обеспечила беспрепятственную интеграцию новых функций по мере развития проекта.

Результат

В рамках проекта был успешно создан комплексный веб-портал для фермерских хозяйств и сельскохозяйственной отрасли, в котором особое внимание уделялось удобному интерфейсу и бесшовной интеграции с внутренними сервисами. Динамический модуль планирования, разработанный с использованием Angular и RxJs, позволил фермерам распределять культуры по земельным участкам с прогнозированием урожайности и оценкой доходов в режиме реального времени. Многочисленные итерации пользовательского тестирования привели к созданию улучшенного интерфейса, включающего пользовательские UI-компоненты, которые обеспечили согласованную работу на всех устройствах. Интеграция с внутренними сервисами была достигнута за счет надежной обработки ошибок и асинхронного управления данными, что обеспечило создание эффективного и надежного портала.

Кроме выполнения первоначальных требований заказчика, команда разработчиков предусмотрительно внедрила панель администратора, обеспечив инструменты для управления пользователями и создания отчетов без ущерба для производительности основного приложения. Архитектура фронтэнда была разработана с учетом масштабируемости, что позволило легко интегрировать в нее новые возможности и дополнения. Такой подход обеспечил долгосрочную работу и адаптивность портала, предлагая комплексное и устойчивое решение для эффективного управления сельскохозяйственной деятельностью.