UX/UI

Разработка системы мониторинга грузов для
IoT-трекера iTraq Butterfly

itraq case study
itraq butterfly logo
Аспирити / Проекты и кейсы / Разработка системы мониторинга
  • отрасль
    ОТРАСЛЬ
    IoT
  • технологии
    ТЕХНОЛОГИИ
    React
    Amcharts
    Express.js
  • команда
    КОМАНДА
    6 человек

О ПРОЕКТЕ СИСТЕМА ОТСЛЕЖИВАНИЯ ГРУЗОВ ITRAQ BUTTERFLY

iTraq Butterfly — очень маленькое, мощное, но недорогое устройство, которое помогает отслеживать перемещение множества ценных грузов по земному шару.

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

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

О КОМПАНИИ ITRAQ И IoT-ТРЕКЕРЕ BUTTERFLY

Наш клиент — американская компания из Сиэтла — iTraq. Они занимаются устройствами для отслеживания людей, животных, грузов и многого другого.

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

ЗАДАЧИ РАЗРАБОТКИ СИСТЕМЫ МОНИТОРИНГА ГРУЗОВ

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

ПРОЕКТИРОВАНИЕ И РАЗРАБОТКА ИНТЕРФЕЙСА IoT-СИСТЕМЫ

Работу над проектом мы начали с разработки дизайна, а после переключились на вёрстку интерфейса.

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

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

Регистрация и подключение IoT-трекера

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

Мониторинг местоположения
и маршрута груза

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

На странице отмечены: местоположение трекера, внешняя температура, а также записи о срабатывании датчиков света и движения.

Для этой страницы мы использовали настраиваемую версию Google Maps. Добавили на неё специальные маркеры с разными цветами и иконками для каждого события.

Мониторинг температуры груза во время перевозки

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

По наведению курсора на диаграмме отображается информация со всеми данными.

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

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

Динамическая загрузка данных
IoT-трекера

данные с трекера

РЕЗУЛЬТАТЫ РАЗРАБОТКИ СИСТЕМЫ ОТСЛЕЖИВАНИЯ ГРУЗОВ

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

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

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

ОТЗЫВ ITRAQ
О РАЗРАБОТКЕ СИСТЕМЫ МОНИТОРИНГА

КОМАНДА ПРОЕКТА
iTraq Butterfly

  • Алексей Носов
    Менеджер проекта
  • Жанна Фирчук
    Тех.лидер
  • Владимир Кабоскин
    Frontend Разработчик
  • Баяман Касымбаев
    Backend Разработчик
  • Сергей Красков
    Инженер по качеству
  • Анна Кузнецова
    UX/UI Дизайнер

ТЕХНОЛОГИИ РАЗРАБОТКИ ИНТЕРФЕЙСА
IoT-СИСТЕМЫ

Backend
бэкенд иконка
Amcharts
React-virtualized
Node.js Express
Frontend
фронтенд иконка
React
Redux
UX/UI
UX/UI иконка
Figma
Adobe Illustrator
Другое
Другое иконка
Bitbucket
Jira
Разработка IoT-систем
и решений для мониторинга грузов
Назначьте встречу
Просто нажмите кнопку ниже и...

Частые вопросы