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

Главное о кейсе

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

— Навигаторы не показывали маршруты и ограничения для грузового транспорта;
— Водитель не успевал приехать к месту погрузки/разгрузки к нужному времени;
— В рейсах терялись важные документы.

‎Сервико-Авто‎ нужно было навести порядок в документообороте, оптимизировать ресурсы и распустить лишний штат.

Перевод

Serviko-Auto is the largest distribution and logistics company in the East Siberian region. The client approached us to develop a corporate tablet application to address key issues:

— Navigation systems did not display routes and restrictions for freight transport;
— Drivers were unable to arrive at loading/unloading points at the required time;
— Important documents were lost during trips.

Serviko-Auto needed to streamline document management, optimize resources, and reduce excess staff.

Как проект изменил жизнь пользователей

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

Перевод

We developed a freight transportation app that made life easier for drivers and logistics staff. With this app, receipts and documents are no longer lost, the navigation works reliably, and drivers arrive at loading/unloading points on time.

Бизнес-задача и ее решение

Что требовалось:

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

Мы разработали приложение, которое закрывает потребности владельца, диспетчеров и водителей.

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

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

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

В 2024 дополнили приложение функцией по обновлению расхода топлива при выгрузке в 1С. Теперь водитель в любое время может посмотреть средний расход топлива.

Диспетчерам позволяет:

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

Перевод

What was required:

• Create functionality to simplify communication between the driver and the manager (dispatcher);
• Develop a notification system for when a driver deviates from the route;
• Create functionality to collect, store, and edit data about drivers and trucks;
• Integrate the application with fuel organizations' portals and the "Road Network" system;
• Optimize route building time between loading and unloading points within the app;
• Reduce response time for managers.

We developed an app that meets the needs of the owner, dispatchers, and drivers.

For drivers, the app allows:

• Automating their route with a built-in navigator for heavy-duty vehicles, displaying gas stations and hazardous zones on the screen;
• Taking photos of route-related documents for reporting to management—integrated with the "Road Network" system, eliminating manual document collection. Documents can be scanned via the tablet camera;
• Receiving notifications about incidents on the road, changes in path, or new requests through the admin panel and parsed news from the ati.su website;
• Using templates for standard documents and a guide for working with the app.

If there’s no connection at the unloading point, the driver can still attach documents and mark the stage change. Once the internet connection is restored, the information will be sent to the logistics manager.

In 2024, the app was updated with a feature to track fuel consumption during unloading in 1C. Now, the driver can check the average fuel consumption at any time.

For dispatchers, the app allows:

• Receiving updates every 8 hours about whether a driver is on time or delayed, allowing them to adjust upcoming routes if needed;
• Sending notifications to specific individuals or all drivers at once;
• Remotely disconnecting a driver from the system.

Крафт (мастерство), реализация, технические детали

• Технологический стек: JS, React Native, Yandex MapKit, PHP, Laravel, Mysql, ElasticSearch, Clickhouse, Redis, Nginx, Docker, Lottie.

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

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

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

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

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

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

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

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

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

Перевод

Technological Stack: JS, React Native, Yandex MapKit, PHP, Laravel, MySQL, ElasticSearch, Clickhouse, Redis, Nginx, Docker, Lottie.

To implement the functionality of receiving notifications about delays, ahead-of-schedule arrivals, and deviations from the route, we had to address a GPS issue.

In Yandex Maps, coordinates do not always match the actual location of the object. During GPS failures, the point can jump around the map, disappear, or move off the route. We solved this problem by creating an algorithm that filters the coordinates. As a result, the marker position on the map sticks to the route line.

The second challenge arose when implementing the route deviation function. When a driver deviated from the planned path (for maintenance or a fuel stop off-route), the driver’s marker would freeze at the exact point where they turned off.

We showed the driver’s real-time location by displaying a grey marker: when they’re on the planned route, the marker is blue; when they deviate, it turns grey. When they return to the route, the path is recalculated from the point where the driver deviated, and the marker becomes blue again.

The app can be centrally updated via the admin panel, allowing drivers to receive the latest updates during their trips.

For the interface design, we relied on user behavior patterns. The navigation panel was moved to the bottom, the logo and menu stayed at the top, and the main working area was placed in the center. We chose a large, easy-to-read sans-serif font. A dark mode was included for easier use at night. We also ensured the layout was responsive and, as a bonus, developed a new logo and brand style.

In addition to functional screens, we suggested creating a sort of screensaver displaying the truck swaying and simulating the movement of lines. This feature was created using Lottie animation.

Lottie is a library for web development on iOS, Android, and React Native that displays After Effects animations in real-time, allowing websites and apps to use animations as easily as static images.

For implementing the driver’s route navigation functionality, we used Yandex Maps as a React Native package, which was built using Yandex MapKit. The package didn’t have full navigation or route-following features, so we implemented them in native Java and successfully integrated them into the core part of the app (in React Native).

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

Провели функциональное и регресс-тестирование, тесты на эмуляторе Android Studio. В нем встроен GPS-навигатор; можно «проехать» по маршруту. Если бы мы проверяли приложение сразу на технике, не смогли бы исправить один нюанс.

Если водитель отклоняется более, чем на 20 км, маршрут перестраивается, и логисту приходит уведомление. Но сложность в том, что это не всегда работает. Трудно отследить именно эти 20 км. Приходилось сверяться с гугл-картами, после чего в эмуляторе выверять все до пикселя.

Когда обкатали навигатор по виртуальным дорогам, протестировали и на реальных :) Компания пользуется планшетами Samsung на Android. Мы купили такие же и проверяли все функции прямо в пути.

Перевод

The app contains a lot of interactive logic, so every time a new feature was developed, we tested the entire project from start to finish, rather than testing just the new features individually.

We conducted functional and regression testing, as well as tests on the Android Studio emulator. It has a built-in GPS navigator, allowing us to "drive" along the route. If we had tested the app directly on the hardware, we wouldn’t have been able to fix one particular issue.

If the driver deviates by more than 20 km, the route is recalculated, and the logistics manager receives a notification. However, the problem is that it doesn't always work. It's hard to track when driver deviates exactly by 20 km. We had to cross-check with Google Maps and then fine-tune everything in the emulator down to the pixel.

After testing the navigator on virtual roads, we also tested it in real conditions. The company uses Samsung Android tablets, so we purchased the same devices and tested all the features while driving.

Прочая информация о кейсе

• Сейчас сотрудники работают только в приложении для планшетов, для них оно стало основным инструментом. А у компании появилась возможность оптимизировать их работу.
• Корпоративным приложением ежедневно пользуются около 40% сотрудников.
• Благодаря оповещениям водители контролируют дорожную обстановку и могут планировать объезды. А менеджеры сразу знают обо всех отклонениях от маршрута.
• Диспетчеры видят, где находится их водитель, и могут вовремя скорректировать задачу при отставании от графика, внезапной аварии или перекрытии дороги.
• Документы перестали копиться в бардачках и теряться по пути: водители сразу фотографируют их, загружают в ЛК и передают менеджерам.
• Водителям стало проще следовать по маршрутам: теперь все координаты GPS отображаются корректно, без отставаний и отскоков от дороги.
• Благодаря встроенной формуле прогноза оптимизировали время на построение маршрута от точек погрузки и разгрузки в приложении.
• Приложение создали 7 человек команды Пиробайта за 1900 часов, отрисовав 439 макетов и проведя 1405 коммитов.

Перевод

• Currently, employees work exclusively through the tablet app, which has become their main tool. This has enabled the company to optimize their workflow.
• Around 40% of employees use the corporate app daily.
• Thanks to the notifications, drivers can monitor road conditions and plan detours, while managers are instantly know about any deviations from the route.
• Dispatchers can see where their drivers are and can promptly adjust tasks in case of delays, unexpected accidents, or road closures.
• Documents are no longer accumulating in glove compartments or getting lost along the way. Drivers now photograph them, upload them to their personal account, and pass them on to managers.
• Drivers find it easier to follow their routes now that all GPS coordinates are displayed accurately, with no delays or detours from the road.
• The built-in forecasting formula has optimized route building time between loading and unloading points in the app.
• The app was created by a 7-person team from Pyrobyte, taking 1,900 hours to develop, drawing 439 layouts, and making 1,405 commits.

Скриншоты

Комментарий заказчика

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