СервикоАвто — мобильное приложение для логистики

1. Вводная задача от заказчика, проблематика, цели

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

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

Водителям приложение позволяет:

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

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

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

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

Аналитика

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

Это помогло нам спроектировать все экраны на этапе прототипирования, не упустив ни одной детали. По ходу работы были и нововведения. Благо, что методика scrum, по который мы работаем, позволяет внедрять что-то новое уже в процессе. Заказчику важно было видеть, как водитель движется по маршруту и успевает ли по графику.

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

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

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

Дизайн

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

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

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

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

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

Разработка

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

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

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

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

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

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

Вторая сложность возникла при создании функции отклонения от маршрута. Когда водитель отклонялся от намеченного пути (например, ему срочно понадобилось ТО или заправка, которая расположена не по маршруту) точка, отображающая самого водителя, стопорилась именно на том месте, где он свернул.

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

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

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

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

3. Результаты сотрудничества

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

Малышев Дмитрий Сергеевич

Менеджер проекта на стороне заказчика, СервикоАвто

Все хорошо по менеджменту, по работе команды, по их умениям. Изначально не ожидали, что все получится как нужно, переживали за конечный итог, но мысли сменить команду ни разу не появлялось: приятно видеть людей, которые полностью погружены в проект и делают все возможное для его реализации. Спасибо Pyrobyte за грамотный подход к разработке