Мобильное приложение на iOS и Android для доставки дизеля
Весной 2022 года мы приняли участие в реализации стартапа киевской сети заправочных станций DiDiDo – создании мобильного приложения для доставки дизеля оптом. Продукт уникален и пока не имеет аналогов в Украине. Все, что у нас было в начале — идея заказчика и логотип. Поэтому перед нами встала задача с нуля разработать iOS- и Android-приложение для потребителей горючего и подготовить продукт к релизу.
В рамках этого проекта было также создано приложение для водителей топливовозов, о котором мы отдельно рассказываем в этом кейсе:
Задача
Цель стартапа – создать мобильные приложения, позволяющие быстро и удобно заказать доставку дизеля в Киеве и Киевской области. Для ее достижения нам было нужно:
- Спроектировать дизайн интерфейса и понятную логику приложения.
- Реализовать приложение для пользователей iPhone и Android-устройств.
- Интегрировать сервисы для идентификации клиентов.
- Настроить функцию безналичной оплаты.
- Осуществить возможность автоматического формирования документов.
- Протестировать и скачать приложения на маркетплейсы.
UX / UI дизайн приложения
Веб-дизайнер в связке с UX-райтером и проджект-менеджером продумали механику заказа и спроектировали страницы на разных этапах взаимодействия с пользователем.
Регистрация / Авторизация
Загрузив приложение в Google Play или App Store, пользователя встречает экран регистрации или авторизации с функциями восстановления пароля:
Регистрация возможна по трем сценариям в зависимости от статуса клиента:
- физическое лицо,
- физическое лицо-предприниматель,
- юридическое лицо.
Это связано с правилами осуществления безналичных расчетов, что влияет на вид формы, содержание и перечень накладных, которые автоматически формируются приложением после каждого заказа (товарно-транспортная, расходная и акцизная). Заметим, что перед каждым выездом на точку заправки водитель должен распечатать товарно-транспортную накладную, сформированную на основе заявки клиента. Кроме того, заказчик заключает договоры с физическими лицами-предпринимателями и юридическими лицами. Конечно, все эти тонкости мы предусмотрели в разработке приложений.
1) Регистрация физического лица предполагает регистрацию с помощью индивидуального налогового номера. Эта информация нужна для идентификации клиента и формирования товарно-транспортной и расходной накладной. Пока что ожидаем разрешения на реализацию технологии BankID, которая в дальнейшем облегчит процесс регистрации и авторизации и освободит пользователей от необходимости ручного ввода налогового номера.
Для физических лиц оплата осуществляется с помощью личной банковской карты.
2) Регистрация физического лица-предпринимателя, кроме налогового номера РНУКПН, требует дополнительной информации: названия банка и номера счета IBAN. Это нужно для автоматического формирования договора, товарно-транспортной, расходной и акцизной накладной. Идентификация клиента осуществляется через сервис мониторинга регистрационных данных украинских компаний OpenData. Оплата услуг осуществляется с текущего счета физического лица-предпринимателя.
3) Регистрация юридического лица также требует информацию о налоговом номере, названии банка и банковском счете IBAN — опять же верификация происходит через OpenData. Интегрировав эту технологию, мы облегчили клиенту заполнение и без того длинной регистрационной формы, ведь при введении ЕГРПОУ автоматически подтягивается название, адрес компании и ФИО руководителя. В дальнейшем после заполнения формы приложение автоматически формирует необходимый перечень документов (договор и накладные) по каждому заказу.
Юридические лица оплачивают доставку горючего с текущего бизнес-счета.
Мы заботимся о защите личных данных пользователей, поэтому каждый этап регистрации предусматривает проверку почты, мобильного и налогового номера клиента через специальный код подтверждения:
Профиль пользователя достаточно минималистичен и содержит несколько разделов: «Профиль», «Личный счет», «Архив заказов» и «Инструкция». Несмотря на то, что приложение автоматизировано, у него есть «Служба поддержки» и функция «Позвонить нам»:
Оформление заявки
Заказать горючее можно двумя способами: доставка или самовывоз.
Доставка
Предусматривает доставку топлива в пределах Киева и Киевской области. Более того, доставку можно запланировать на определенный день и время:
При оформлении заявки клиент, кроме адреса, указывает количество точек слива и требуемый литраж горючего, а также может оплатить заказ онлайн и оставить отзыв.
1) Заказ:
2) Ожидание водителя:
3) Процесс заправки:
Более того: приложение также предлагает возможность ввода координат. Удобное решение неудобных ситуаций, когда у клиента-водителя нет ни горючего, ни представления о своем местонахождении:
Доставку горючего на дальние расстояния можно решить индивидуально через дополнительную заявку:
Самовывоз
Второй способ заказа горючего — самовывоз, — происходит по принципу размещения заявки и бронирования ближайшего топливовоза на карте в режиме реального времени.
1) Заказ:
2) Самовывоз и заправка:
iOS-разработка приложения
iOS-приложение было создано для клиентов автозаправочных станций DiDiDo с помощью языка Swift.
Функциональность приложения спроектирована на основе архитектурного шаблона MVC, который составляют 3 компонента:
- Model — отвечает за хранение, обновление и удаление данных;
- View — отвечает за отображение этих данных на экране пользователя;
- Controller — отвечает за логику программы и коммуникацию между двумя другими компонентами.
Для передачи и получения данных был использован фреймворк Alamofire, позволяющий выполнять запросы в фоновом режиме, не препятствуя работе приложения.
Дизайн был воспроизведен с помощью графической программы Figma с точностью до пикселя, что обеспечило высокое качество макетов в реальном приложении.
Пользовательский интерфейс разработан с помощью фреймворка UIKit, который содержит в себе набор элементов (иконок, кнопок, таблиц, списков и т. п.), соответствующий стилистике Apple.
Для отображения анимаций в режиме реального времени была использована библиотека Lottie. В создании динамического и плавного интерфейса помог еще один фреймворк – Core Animation, который оптимизирует процесс воспроизведения визуальных эффектов и, соответственно, улучшает опыт пользователей.
В разработке iOS-приложения также были использованы такие фреймворки, как:
- CoreData — для сохранения и управления данными на айфонах пользователей, что означает удобный доступ к ним и более высокую производительность приложения в фоновом режиме.
- CoreLocation — для получения и обработки в приложении геоданных, а именно определение точного местонахождение и мониторинг движения устройства пользователя.
- SocketIO — для двусторонней связи между браузером и сервером в режиме реального времени.
- PushNotification — для отправки Push-сообщений о новых заказах, дозаправке и т. д.
При разработке приложения пригодились Google-сервисы:
- Maps — для геолокации устройств пользователей, использующих приложение;
- Firebase — для реализации пуш-сообщений в режиме реального времени.
Разработка приложения на Android
В разработке приложений мы использовали язык Kotlin, известный своей кроссплатформенностью, то есть возможностью работать на различных операционных системах: Android, iOS, macOS, Windows, Linux и т. д.
Проектируя архитектуру приложения для Android, мы использовали шаблон MVVM (Model-View-ViewModel), который, подобно вышеупомянутому MVC, делит программу на 3 функциональные части. Разница в том, что MVVM имеет более гибкую логику и более широкие возможности структурирования программы.
Интерактивный пользовательский интерфейс создан с помощью фреймворка Jetpack Compose, который «дружит» с Kotlin и позволяет легко изменять стили и темы приложения.
Фреймворки Retrofit 2 и библиотека Socket.IO обеспечивают надежную связь между клиентом и сервером без большой задержки и нагрузки на приложение.
Анимационные эффекты воспроизведены благодаря библиотеке Lottie. Кроме нее были использованы и другие библиотеки:
- AndroidX — для повышения функциональности приложения на Android-устройствах последних версий;
- Coil — для загрузки и кэширования изображений;
- Work Manager — для планирования и выполнения задач в случае сбоя приложения или устройства;
- Room — для эффективного взаимодействия приложения с базой данных.
Оплата за доставку горючего осуществляется через интеграцию приложения с сервисом LiqPay.
Кроме уже упомянутых Google-сервисов Maps и Firebase был также использован инструмент Places API. Он значительно расширяет возможности взаимодействия приложения с геопространственными данными, а именно позволяет находить локации по адресу, координатам или имени и получать о них дополнительную информацию.
Результат
Мы много уже «наговорили», поэтому предлагаем своими глазами увидеть результат. Вернее, два результата. Загружайте приложения в Google Play и Apple Store и юзайте на здоровье:
Комментарии