25 сентября 2023

Помогаем развивать приложение для зарядки автомобилей: интересные кейсы в разработке

Классические приложения на Android и iOS имеют свои ограничения – требуют разработки и поддержки двух отдельных кодовых баз. В ситуациях, когда приложение нужно реализовать быстро на обе платформы, Flutter становится идеальным решением – он предлагает:

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

«Экономия ресурсов достигает 20–50%, при этом специалисты могут сосредоточиться на создании качественного пользовательского опыта, не тратя время на решение платформенных различий»

Ринат, руководитель направления мобильной разработки

В статье рассказываем про разработку Flutter-приложения для ElectroPoint – компания развивает стационарные и мобильные электрозаправочные станции и создает необходимые для этого цифровые продукты.

Задача

Реализация MVP ElectroPoint Мобил для быстрого выхода в продакшн.

Разработка и дизайн: сервис для вызова мобильной зарядной станции (МЗС). Автомобилист может в приложении выбрать удобное ему время и место зарядки.
Дизайн приложения для специалистов, обслуживающих мобильные зарядные станции - им доступны функции приема заказа и отчета о показателях зарядной сессии.
Дизайн внутреннего портала администратора. Функции - мониторинг заказов, обработка обращений, управление расписанием слотов зарядки.

Для проекта был выбран Flutter. Недавно подробно описывали его преимущества. Мы проектировали и полностью реализовали как Flutter-часть, так и backend для нее: от авторизации и профиля пользователя до непосредственной работы с заказом. Расскажем про наиболее интересные кейсы.

Разработка

Интеграция с геолокацией

Вызов МЗС работает как приложение такси – нам нужно было реализовать поиск адреса через текстовое поле, передвигание метки на карте и по координатам (геолокации). Для всего этого нужна интеграция с внешними коммерческими продуктами – онлайн-картами.

1536 888 (1).png

Нам нужно было решить не только каким образом осуществлять интеграцию, но и в каком объеме. Важными факторами были ограничения лицензий и стоимость услуг. В итоге функциональность, которая определяла входит ли адрес в допустимую географическую зону, мы реализовали самостоятельно, а отрисовку карт – с привлечением Яндекс.Карт. При этом наш разработчик адаптировал нативные карты Яндекса на Flutter.

Вся работа с адресами строится на отправлении запросов на SDK внешнего ресурса с картами. В процессе интеграции наш специалист нашел баг в SDK Яндекса – не поддерживался кастомный тип данных. Он исправил его с помощью JSON-метода и отправил мерж-реквест в техподдержку.

Добавление оплаты

Мы использовали Ю-кассу, которую также поддерживает Яндекс. Проблема была в том, что Flutter-пакет сервиса был завязан на Swift-пакете. Зависимость в последнем была прописана для iOS 10 – она устарела. Мы вручную подняли ее до 13 версии, предложили изменения Яндексу, и они внесли их в свой пакет.

1536 888 2.png

Дизайн

Мы разрабатывали интерфейс для всех продуктов ElectroPoint Мобил:

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

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

Особенность этого проекта – его многосторонняя функциональность:

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

1536 888 3.png

Некоторые сценарии менялись уже после проектирования прототипов, например, так было с заказом МЗС – несколько раз он пересматривался и редактировался. Тогда мы опирались на уже утвержденные элементы и отрисовывали дизайн в соответствии с ними.

Результаты

реализовали основную бизнес-логику приложения для владельцев электромобилей;
выполнили интеграцию с сервисами геолокации и оплаты, системой push- и СМС-уведомлений;
разработали комплект макетов и состояний приложений проекта – суммарно более 100 экранов;
сформировали библиотеку дизайн-компонентов проекта;
отрисовали визуалы для Google Play и App Store.

Приложение для Android и iOS уже доступны в сторах.