Сервико-АвтоКорпоративное приложение для планшетов крупной логистической компании Сервико

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

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

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

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

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

Это помогло нам спроектировать все экраны на этапе прототипирования, не упустив ни одной детали.

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

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

«После запуска MVP мы собрали обратную связь от водителей. Выяснилось, что во время движения им мешали всплывающие системные уведомления. В теории все было правильно, на практике оказалось по-другому. Этот момент пришлось дорабатывать»

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

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

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

«При проектировании дизайна мы опирались в первую очередь на удобство водителей. Иконки, навигационная панель, tab-bar и другие элементы получились достаточно крупными, чтобы водителю было удобно считывать элементы интерфейса в пути»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

«Это наша основная фича, и это было очень в тему. На планшете такое провернуть нельзя, поэтому мы и использовали эмулятор. Также проводили тесты на реальном устройстве — планшете от фирмы Samsung. У компании есть корпоративные устройства, и мы купили себе такие же»

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