СервикоАвто

Сервико
Авто
СервикоАвто — крупнейшая дистрибьюторская и логистическая компания в восточно-сибирском регионе.
Tagline Awards 2022

Лучший проект для планшетов

Проблемы и задачи

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

Требовалось:

  • Создать функционал, который бы упростил взаимодействие между водителем и менеджером (диспетчером);
  • Разработать систему оповещений при отклонении водителя от маршрута;
  • Создать функционал, позволяющий собирать, хранить и редактировать данные о водителях и грузовике;
  • Интегрировать приложение с порталом топливных организаций и «Дорожной сетью»;
  • Оптимизировать время на построение маршрута от точек погрузки и разгрузки в приложении;
  • Уменьшить время ответа менеджера.

Как мы решили задачи клиента

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

  • Автоматизировать свой путь — внутри есть встроенный навигатор для крупнотоннажных авто, на экране отображаются заправки и опасные зоны;
  • Фотографировать документы по рейсу для отчета руководству — интегрированная система «‎дорожные сети»‎ избавляет водителя от ручного сбора документов, их можно отсканировать через камеру планшета;
  • Получать краткие сообщения о происшествиях на дороге, изменениях в работе или новых заявках с помощью админки и парсинга новостей с сайта ati.su;
  • Пользоваться шаблонами типовых документов и гайдом по работе с приложением, которые мы добавили.

Диспетчерам (менеджерам) приложение позволяет:

  • Каждые 8 часов получать информацию о том, опаздывает водитель или идет в графике, чтобы корректировать следующий маршрут;
  • Отправлять оповещения как конкретному человеку, так и всем водителям сразу;
  • При необходимости удаленно отключать водителя от системы.
Главный экран. Принять заявку
Главный экран. Принять заявку

Аналитика

Перед тем, как заняться разработкой, мы провели предпроектную аналитику. Проанализировали конкурентов, целевую аудиторию, подготовили свое видение проекта и продумали структуру будущего приложения.
Так как это приложение для внутреннего пользования, основной проблемой было найти и изучить прямых конкурентов. Было негде подсмотреть какие-то фишки и решения, ведь никто не публикует такие продукты в сторы. Приняли решение, что за основу работы возьмем смежных конкурентов. Брали автомобильные проекты и приложения со встроенными картами. Смотрели, что можно взять от них
Вячеслав Мауль
Аналитик Pyrobyte
Аналитика. Видение проекта
Аналитика. Видение проекта
Это помогло нам спроектировать все экраны на этапе прототипирования, не упустив ни одной детали.
После запуска MVP мы собрали обратную связь от водителей. Выяснилось, что во время движения им мешали всплывающие системные уведомления. В теории все было правильно, на практике оказалось по-другому. Этот момент пришлось дорабатывать
Николай Оноприенко
Аналитик Pyrobyte
По ходу работы были и нововведения. Благо, что методика scrum, по который мы работаем, позволяет внедрять что-то новое уже в процессе. Заказчику важно было видеть, как водитель движется по маршруту и успевает ли по графику.

Для этого мы составили формулу, которая позволяет рассчитать, сколько времени на преодоление маршрута есть, сколько прошло, высчитать среднюю скорость движения и спрогнозировать, успеет ли водитель вовремя доставить груз.
Аналитика. Структура
Аналитика. Структура

Прототипирование

Перед отрисовкой дизайна мы разработали прототип интерфейса в Figma. Это позволило оценить логику работы интерфейса и заранее внести корректировки.

Дизайн

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

При разработке интерфейса опирались на пользовательские паттерны поведения. Навигационную панель сдвинули вниз, логотип и меню оставили сверху, по центру разместили основное поле работ.
При проектировании дизайна мы опирались в первую очередь на удобство водителей. Иконки, навигационная панель, tab-bar и другие элементы получились достаточно крупными, чтобы водителю было удобно считывать элементы интерфейса в пути
Илья Ващенко
Дизайнер Pyrobyte
Шрифт выбрали крупный, легко читаемый, без засечек. Предусмотрели темную тему, чтобы было удобно пользоваться ночью. Сделали адаптивную верстку, а бонусом разработали новый логотип и фирменный стиль.
Удачно получился и блок новостей. Он содержит заголовок и уникальные иконки под каждый тип новостей.
Помимо функциональных экранов мы предложили клиенту сделать некое подобие скринсейвера, на котором воспроизводится покачивание фуры и имитируются движения линий. Делали эту функцию через Lottie-анимацию.

Lottie — это библиотека для веб-разработки iOS, Android и React Native, которая отображает анимацию After Effects в режиме реального времени, позволяя сайтам и приложениям использовать анимацию так же легко, как и статическое изображение.

От скорости грузовика зависит интенсивность движения анимации. Когда он стоит, анимация не движется. Как только водитель тронулся с места, она «оживает».

Разработка

Для реализации функционала навигации водителя по маршрутам мы использовали Яндекс.Карты в виде пакета для React Native, который написан с использованием Yandex MapKit. В пакете не были реализованы полноценные функции навигации и движения по маршруту. Их мы воплотили на нативном языке Java и успешно использовали в основной части приложения (в React Native).
Передача новой заявки и сообщений водителям происходит посредством протокола связи WebSocket. Он устанавливает постоянное соединение между клиентом (в данном случае приложение) и сервером, и если серверу есть что сообщить клиенту, то он отправляет сообщение, которое обрабатывается приложением мгновенно, без задержек
Алексей Фебенчуков
Fullstack-разработчик
Отличительной возможностью приложения является то, что его можно обновлять централизованно из административной панели, благодаря чему водители могут получить последние обновления прямо во время рейса.

Интеграция с Яндекс.Картами и настройка геолокации

Заказчику была критически важна функция получения уведомлений об опоздании/опережении водителем графика и отклонении от маршрута. Для этого нужно было решить проблему с координатами, полученными от GPS.

В Яндекс. Картах они не всегда соответствуют реальному положению объекта. При сбоях GPS происходит отклонение: точка может прыгать по карте, исчезать или отображаться за пределами маршрута.

Эту проблему решили за счет создания алгоритма, который выполняет фильтрацию координат пользователя. В результате положение метки на карте прилепляется к самой линии маршрута.
Основным моментом стала интеграция с Яндекс.Картами и возможность построения маршрутов как по заявке, так и без нее, в свободном режиме. Необычное приложение, до этого студия не занималась решением подобных задач, нетиповая разработка
Евгений Ловкий
Project-менеджер Pyrobyte
Вторая сложность возникла при создании функции отклонения от маршрута. Когда водитель отклонялся от намеченного пути (например, ему срочно понадобилось ТО или заправка, которая расположена не по маршруту) точка, отображающая самого водителя, стопорилась именно на том месте, где он свернул.

Мы доработали этот момент, сделав отображение реального местоположения водителя посредством показа серой метки: когда он едет по выстроенному маршруту — метка синяя, когда отклоняется — становится серой. В тот момент, когда он возвращается на маршрут, маршрут перестраивается, учитывая то, откуда выехал водитель, и маркер становится синим.
Если водитель отклоняется более, чем на 20 км, то маршрут перестраивается, и диспетчеру приходит уведомление. Сложность была в том, что не всегда это корректно работало. Трудно было отследить именно эти 20 км. Приходилось сверять по гугл-картам, после чего в эмуляторе выверять все до пикселя
Владимир Вернигора
Тестировщик Pyrobyte

Тестирование

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

Проводились тесты на эмуляторе Android Studio. В чем плюсы этой программы? В ней есть встроенный GPS-навигатор, в котором можно задавать начальную и конечную точку, и как бы двигаться по маршруту.
Это наша основная фича, и это было очень в тему. На планшете такое провернуть нельзя, поэтому мы и использовали эмулятор. Также проводили тесты на реальном устройстве — планшете от фирмы Samsung. У компании есть корпоративные устройства, и мы купили себе такие же
Владимир Вернигора
Тестировщик Pyrobyte

Резюме

Мы создали удобное и ненавязчивое приложение, которое позволило бизнесу улучшить качество работы и автоматизировать документооборот, а для водителей оно стало главным помощником в долгих рейсах. Простой интерфейс дал возможность легко пользоваться приложением, не отвлекаясь от дороги.
С основной задачей, суть которой — продумать удобный механизм документооборота, организации и контроля за грузоперевозками, мы успешно справились. Получилось качественное приложение, которое упрощает жизнь и логистам, и водителям
Александр Комбаров
Руководитель отдела разработки
В дальнейшем мы планируем создать форму обратной связи для сбора отзывов водителей по приложению, чтобы на ее основе подготовить улучшения.

Отзыв клиента

Смотрите также

Сервис онлайн аукциона новых авто
Мобильное приложение для сети кинотеатров
Мобильное приложение для логистики
Интернет-магазин морских продуктов
Мобильное приложения поиска сервисов самообслуживания
Сервис доставки с интернет-магазинов
Напишите нам для оценки разработки сайта или мобильного приложения
Сделаем это бесплатно и отправим вам подробную смету и красивое коммерческое предложение
Напишите нам для оценки разработки сайта или мобильного приложения
Сделаем это бесплатно и отправим вам подробную смету и красивое коммерческое предложение