Кейсы | #РАКУРС

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

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

При этом решение должно было соответствовать нескольким требованиям:

Полноценная работа каталога в офлайн-режиме.
Быстрый поиск препаратов по культурам и вредным объектам.
Доступ к подробным карточкам и регламентам применения.
Возможность просмотра PDF-документов без подключения к сети.
Регулярное обновление информации без переустановки приложения.
Поддержка PWA и мобильных платформ.
Удобный интерфейс для использования непосредственно в полевых условиях.

Какие цели ставились перед разработкой

Гибкость

Обеспечить единую технологическую основу для PWA, Android и iOS, позволяющую развивать продукт, добавлять новые разделы каталога и совершенствовать функциональность без переработки всей архитектуры.

Актуальность данных

Разработать механизм автоматического обновления каталога на основе актуальных выгрузок из информационных систем, чтобы пользователям не приходилось переустанавливать приложение при изменении справочных данных.

Удобство

Создать удобный мобильный интерфейс для аграриев с возможностью быстрого поиска препаратов по названию, культурам и вредным объектам, а также доступа к регламентам применения.

Офлайн-доступность

Реализовать полноценную работу каталога без подключения к интернету: поиск препаратов, фильтрацию, просмотр карточек и предварительно загруженных PDF-документов.

React и Progressive Web App (PWA) как основа разработки

Мы разработали приложение на React с использованием подхода Progressive Web App (PWA), ориентированное на полноценную работу без постоянного подключения к интернету.

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

Такой подход позволил упростить сопровождение продукта, ускорить выпуск обновлений и обеспечить согласованный пользовательский опыт на разных устройствах.

Офлайн-режим и локальное хранение данных

Вместо того чтобы ограничиваться отображением ранее открытых страниц, мы реализовали механизм локального хранения данных каталога.

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

Для локального хранения используется IndexedDB, а система кэширования обеспечивает доступность данных и ресурсов приложения.

При восстановлении интернет-соединения приложение может получать актуальные данные каталога.

Подготовка и интеграция данных

Одной из ключевых технических задач стала подготовка данных.

Исходная информация поступала из нескольких файлов и источников. Чтобы обеспечить стабильную работу каталога, необходимо было привести её к единой структуре и обеспечить корректные связи между препаратами, культурами и регламентами.

Мы выстроили процесс обработки данных:

Консолидация информации из разных выгрузок.
Нормализация форматов и структур.
Сопоставление препаратов между источниками.
Очистка HTML-контента и исключение неподдерживаемых элементов.
Формирование оптимизированных JSON-файлов для использования в приложении.

Это позволило отделить обновление справочной информации от обновлений самого приложения и подготовить архитектуру к дальнейшему переходу на API.

Галерея

Ключевые выводы и опыт

Признание проекта: лучшая цифровая инициатива Syngenta 2025

В 2025 году мобильное приложение Syngenta было отмечено внутренней маркетинговой премией компании в регионе «Россия–Казбек» в номинации «Лучшая цифровая инициатива».

Награда стала признанием ценности цифрового решения для сельскохозяйственной отрасли и его практического применения.

Развитие продукта: постоянное совершенствование функциональности

После создания первоначального решения работа над приложением продолжилась. В рамках третьего релиза мы провели комплексное обновление Android, iOS и PWA-версий.

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

Также актуализировали взаимодействие с API, подготовили Android App Bundle (AAB) и развернули обновлённую PWA-версию в production.

Работа с данными: от разрозненных выгрузок к единому каталогу

Одной из ключевых технических задач стала подготовка информации, поступающей из нескольких файлов и источников.

Мы реализовали процесс консолидации данных, нормализации форматов, сопоставления препаратов, очистки HTML-контента и формирования оптимизированных JSON-файлов.

Это позволило привести информацию к единой структуре, обеспечить корректные связи между препаратами, культурами и регламентами, а также отделить обновление справочной информации от обновлений самого приложения.

Единая технологическая основа: PWA, Android и iOS

Для реализации проекта мы использовали React и подход Progressive Web App (PWA). На общей технологической основе создали веб-версию и мобильные приложения, сохранив единые пользовательские сценарии и функциональность.

Такой подход позволил упростить сопровождение продукта, ускорить выпуск обновлений и обеспечить согласованный пользовательский опыт на разных устройствах.

Офлайн-режим: доступ к информации независимо от качества связи

Одной из главных задач проекта стала реализация полноценной работы каталога в условиях нестабильного или полностью отсутствующего интернет-соединения.

Мы реализовали механизм локального хранения данных и ресурсов приложения с использованием IndexedDB. После первоначальной загрузки пользователи получили возможность искать препараты, применять фильтры, изучать карточки и просматривать предварительно загруженные PDF-документы без подключения к сети.

Это позволило превратить существующий онлайн-каталог в самостоятельный цифровой справочник для использования непосредственно на сельскохозяйственных объектах.