СервикоАвто — крупнейшая дистрибьюторская и логистическая компания в восточно-сибирском регионе.
Заказчик столкнулся с проблемой того, что некоторые навигаторы не показывали грузовые маршруты, в рейсах часто терялись важные документы, а руководство беспокоилось, что водитель не успеет приехать к месту погрузки/разгрузки к назначенному времени.
Требовалось:
Создать функционал, который бы упростил взаимодействие между водителем и менеджером (диспетчером);
Разработать систему оповещений при отклонении водителя от маршрута;
Создать функционал, позволяющий собирать, хранить и редактировать данные о водителях и грузовике;
Интегрировать приложение с порталом топливных организаций и «Дорожной сетью»;
Оптимизировать время на построение маршрута от точек погрузки и разгрузки в приложении;
Уменьшить время ответа менеджера.
Разработали приложение, которое закрывает потребности всех участников: и заказчика, и менеджеров, и самих водителей.
Автоматизировать свой путь — внутри есть встроенный навигатор для крупнотоннажных авто, на экране отображаются заправки и опасные зоны;
Фотографировать документы по рейсу для отчета руководству — интегрированная система «дорожные сети» избавляет водителя от ручного сбора документов, их можно отсканировать через камеру планшета;
Получать краткие сообщения о происшествиях на дороге, изменениях в работе или новых заявках с помощью админки и парсинга новостей с сайта ati.su;
Пользоваться шаблонами типовых документов и гайдом по работе с приложением, которые мы добавили.
Каждые 8 часов получать информацию о том, опаздывает водитель или идет в графике, чтобы корректировать следующий маршрут;
Отправлять оповещения как конкретному человеку, так и всем водителям сразу;
При необходимости удаленно отключать водителя от системы.
Перед тем, как заняться разработкой, мы провели предпроектную аналитику. Проанализировали конкурентов, целевую аудиторию, подготовили свое видение проекта и продумали структуру будущего приложения.
«Так как это приложение для внутреннего пользования, основной проблемой было найти и изучить прямых конкурентов. Было негде подсмотреть какие-то фишки и решения, ведь никто не публикует такие продукты в сторы. Приняли решение, что за основу работы возьмем смежных конкурентов. Брали автомобильные проекты и приложения со встроенными картами. Смотрели, что можно взять от них»
Вячеслав
Аналитик
Это помогло нам спроектировать все экраны на этапе прототипирования, не упустив ни одной детали.
По ходу работы были и нововведения. Благо, что методика scrum, по который мы работаем, позволяет внедрять что-то новое уже в процессе. Заказчику важно было видеть, как водитель движется по маршруту и успевает ли по графику.
Для этого мы составили формулу, которая позволяет рассчитать, сколько времени на преодоление маршрута есть, сколько прошло, высчитать среднюю скорость движения и спрогнозировать, успеет ли водитель вовремя доставить груз.
«После запуска MVP мы собрали обратную связь от водителей. Выяснилось, что во время движения им мешали всплывающие системные уведомления. В теории все было правильно, на практике оказалось по-другому. Этот момент пришлось дорабатывать»
Николай
Аналитик
Перед отрисовкой дизайна мы разработали прототип интерфейса в Figma. Это позволило оценить логику работы интерфейса и заранее внести корректировки.
Перед дизайнерами стояла задача подготовить лаконичный дизайн с понятным интерфейсом. Особенностью приложения было множество поп-апов (всплывающих окон), в которых выводилась вся нужная информация.
При разработке интерфейса опирались на пользовательские паттерны поведения. Навигационную панель сдвинули вниз, логотип и меню оставили сверху, по центру разместили основное поле работ.
«При проектировании дизайна мы опирались в первую очередь на удобство водителей. Иконки, навигационная панель, tab-bar и другие элементы получились достаточно крупными, чтобы водителю было удобно считывать элементы интерфейса в пути»
Илья
Дизайнер
Шрифт выбрали крупный, легко читаемый, без засечек. Предусмотрели темную тему, чтобы было удобно пользоваться ночью. Сделали адаптивную верстку, а бонусом разработали новый логотип и фирменный стиль.
Удачно получился и блок новостей. Он содержит заголовок и уникальные иконки под каждый тип новостей.
Помимо функциональных экранов мы предложили клиенту сделать некое подобие скринсейвера, на котором воспроизводится покачивание фуры и имитируются движения линий. Делали эту функцию через Lottie-анимацию.
Lottie — это библиотека для веб-разработки iOS, Android и React Native, которая отображает анимацию After Effects в режиме реального времени, позволяя сайтам и приложениям использовать анимацию так же легко, как и статическое изображение.
От скорости грузовика зависит интенсивность движения анимации. Когда он стоит, анимация не движется. Как только водитель тронулся с места, она «оживает».
Для реализации функционала навигации водителя по маршрутам мы использовали Яндекс.Карты в виде пакета для React Native, который написан с использованием Yandex MapKit. В пакете не были реализованы полноценные функции навигации и движения по маршруту. Их мы воплотили на нативном языке Java и успешно использовали в основной части приложения (в React Native).
«Передача новой заявки и сообщений водителям происходит посредством протокола связи WebSocket. Он устанавливает постоянное соединение между клиентом (в данном случае приложение) и сервером, и если серверу есть что сообщить клиенту, то он отправляет сообщение, которое обрабатывается приложением мгновенно, без задержек»
Алексей
Fullstack-разработчик
Отличительной возможностью приложения является то, что его можно обновлять централизованно из административной панели, благодаря чему водители могут получить последние обновления прямо во время рейса.
Заказчику была критически важна функция получения уведомлений об опоздании/опережении водителем графика и отклонении от маршрута. Для этого нужно было решить проблему с координатами, полученными от GPS.
В Яндекс. Картах они не всегда соответствуют реальному положению объекта. При сбоях GPS происходит отклонение: точка может прыгать по карте, исчезать или отображаться за пределами маршрута.
Эту проблему решили за счет создания алгоритма, который выполняет фильтрацию координат пользователя. В результате положение метки на карте прилепляется к самой линии маршрута.
«Если водитель отклоняется более, чем на 20 км, то маршрут перестраивается, и диспетчеру приходит уведомление. Сложность была в том, что не всегда это корректно работало. Трудно было отследить именно эти 20 км. Приходилось сверять по гугл-картам, после чего в эмуляторе выверять все до пикселя»
Владимир
Тестировщик
В приложении много взаимодействующей логики, поэтому каждый раз после разработки нового функционала проект тестировался полностью. Проект проверялся от и до. Проводилось функциональное и регресс-тестирование. Смотрели, чтобы нигде ничего не поехало, а новые фичи работали корректно.
Проводились тесты на эмуляторе Android Studio. В чем плюсы этой программы? В ней есть встроенный GPS-навигатор, в котором можно задавать начальную и конечную точку, и как бы двигаться по маршруту.
«Это наша основная фича, и это было очень в тему. На планшете такое провернуть нельзя, поэтому мы и использовали эмулятор. Также проводили тесты на реальном устройстве — планшете от фирмы Samsung. У компании есть корпоративные устройства, и мы купили себе такие же»
Владимир
Тестировщик
Мы создали удобное и ненавязчивое приложение, которое позволило бизнесу улучшить качество работы и автоматизировать документооборот, а для водителей оно стало главным помощником в долгих рейсах. Простой интерфейс дал возможность легко пользоваться приложением, не отвлекаясь от дороги.
«С основной задачей, суть которой — продумать удобный механизм документооборота, организации и контроля за грузоперевозками, мы успешно справились. Получилось качественное приложение, которое упрощает жизнь и логистам, и водителям»
Александр
CEO Pyrobyte
В дальнейшем мы планируем создать форму обратной связи для сбора отзывов водителей по приложению, чтобы на ее основе подготовить улучшения.
Все кейсы
![Пиробайт [Pyrobyte]](https://assets-global.website-files.com/655d9f72b952a7dd4b815c27/655d9f72b952a7dd4b815dcd_telegram.svg){kind=icon}
