Про проєкт

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

Запит клієнта

Клієнту необхідно було створити складний портал для фермерів. Наша команда відзначала реалізацію FE та інтеграцію бібліотек Google на FE. Крім того, ми також інтегрували супутникові дані для отримання більш точних прогнозів. HTML/CSS і логіка на основі дизайну, наданого клієнтом на FE, і інтегрували BE , наданого клієнта.

Проблеми

• Складність модуля планування: Модуль планування повинен повністю підтримувати інтерфейс що перетягує, дозволяючи користувачам розподіляти певні культури за різними частинами своїх земельних ділянок і отримувати найближчі прогнози. Управління кількома культурами одночасно додавало складності.
• Відгуки та зручності для користувача: забезпечення відгуків та зручність інтерфейсу, особливо при роботі з кількома культурами, було серйозною проблемою.
• Інтеграція з внутрішніми службами: узгодження реалізації інтерфейсу з внутрішніми службами та специфікаціями проєкту, наданими клієнтами, вимагало чіткою та послідовної комунікації.
• Обробка граничних випадків: інтерфейс повинен враховувати різні вимоги та граничні випадки, що вимагало ретельного планування та ретельного проєктування.

Рішення

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

1. Розширений інтерфейс дизайну та оптимізація
   • Динамічна функціональність Drag-and-Drop: функція Drag-and-Drop модуля Planning була критично важливою для взаємодії з користувачем. Команда реалізувала високодинамічний інтерфейс з використанням Angular (версії 8-12), гарантуючи, що він може обробляти складну взаємодію з користувачем без шкоди для продуктивності. Це включало використання виявлених змін Angular і RxJ для оновлення в реальному часі, що дозволило системі обробляти декілька дій користувача одночасно й ефективно.
   • Архітектура: враховуючи складність управління різними культурами на кількох ділянках, команда розробила масштабний інтерфейс. Це включало модуляцію компонентів і оптимізацію управління станом за допомогою NgRx. Завдяки ефективному управлінню станом інтерфейсу залишався відгук, навіть коли користувачі маніпулювали великими наборами даних або взаємодіяли з кількома елементами інтерфейсу користувача одночасно.
2. Покращена швидкість реагування та досвід користувача
   • Компоненти користувацького інтерфейсу (UI): команда розробила компоненти користувальницького інтерфейсу з використанням HTML, SCSS і Angular Material, щоб забезпечити послідовний та інтуїтивно зрозумілий інтерфейс користувача на різних пристроях. Ці компоненти були розроблені так, щоб бути легкими та зручними для повторного використання, що сприяло загальній продуктивності та зручності обслуговування додатків.
   • Ітерації дизайну, орієнтовані на користувача: для підвищення зручності команда провела кілька раундів тестування користувачів та сеансів зворотного зв’язку. Ці сеанси надали інформацію про ітеративні вдосконалення інтерфейсу, такі як оптимізація досвіду перезавантаження, доробка макета для кращого зручності використання та забезпечення дотримання стандартів доступності.
3. Повна внутрішня інтеграція
   • Інтеграція API та обробка даних: Інтеграція FE  з серверними сервісами вимагала від команди тісної співпраці. Вони реалізували асинхронні шаблони зв’язку з використанням RxJs для керування потоком даних між інтерфейсом і сервером. Такий підхід гарантував, що дані, отримані з API, будуть відображатися в режимі реального часу, не викликаючи затримок або вузьких місць продуктивності.
   • Обробка помилок і перевірка даних: команда також створила надійні механізми обробки помилок і перевірки даних, щоб гарантувати точність і узгодженість даних, отриманих з BE. Це включало налаштування користувацьких перехоплювачів HTTP-запитів для виправлення помилок вмісту та надання користувачам зворотного зв’язку.
4. Проактивна розробка функцій
   • Реалізація панелі адміністратора: Команда запропонувала та розробила панель адміністратора, в якості додаткової функції. Ця панель адміністратора надала клієнту інструменти для моніторингу підписок користувачів, управління ролями та створення звітів. Команда використовувала функції маршрутизації та завантаження Angular для інтеграції цього модуля без впливу на продуктивність основного додатка.
   • Масштаб для майбутнього розширення: команда розробила архітектуру інтерфейсу, яка легко розширюється, що передбачає майбутнє вдосконалення, такі як додаткові модулі для конкретної культури або інструменти управління фермою. Використовуючи підхід до розробки на основі компонентів, команда гарантувала, що нові функції можуть бути легко інтегровані в міру розвитку проєкту.

Результати

Проєкт успішно представив складний вебпортал для сільського господарства, зосереджений на просунутому, зручному для користувача інтерфейсі та бездоганній інтеграції з серверними службами. Модуль планування динамічного перетягування, розроблений за допомогою Angular і RxJs, дозволив фермерам розподіляти посіви на земельні ділянки з прогнозуванням врожайності та оцінкою доходу в реальному часі. Численні ітерації користувацького тестування призвели до покращеного інтерфейсу, що містить користувальницькі компоненти інтерфейсу, які забезпечували стабільну роботу на всіх пристроях. Інтеграція з серверними службами була досягнута завдяки надійній обробці помилок і асинхронному управлінню даними, що призвело до швидкого реагування та надійного порталу.

Окрім задоволення початкових вимог клієнта, команда розробників активно впровадила панель адміністратора, надавши інструменти для керування користувачами та звітності, не впливаючи на продуктивність основної програми. Інтерфейсна архітектура була розроблена з урахуванням масштабованості, що дозволяє легко інтегрувати майбутні вдосконалення та нові функції. Такий підхід забезпечив довгострокову життєздатність і адаптивність порталу, пропонуючи комплексне та стійке рішення для ефективного управління сільськогосподарською діяльністю.