Мобильное приложение на Flutter для АЗС за 2 месяца
Hola, Amigos! На связи агентство продуктовой разработки Amiga. Сегодня расскажем, как мы перенесли мобильное приложение с Битрикс на Flutter за 2 месяца, сохранив позиции в сторах и многотысячную базу клиентов.
О клиенте
Хакасская топливная компания (ХТК) — это сеть АЗС в республике Хакасия, где проживает 536 тыс.чел. Городам с небольшим населением присущ паттерн поведения пользователей — заправляться на одной и той же заправке годами.
У компании уже было приложение на Битрикс, в котором зарегистрировано более 70 000 пользователей. Им доступны следующие функции:
- личный кабинет;
- история транзакций;
- программа лояльности;
- информация об акциях;
- форма обратной связи.
Бизнес-задачи мобильного приложения АЗС:
- Рост прибыли из приложения за счет повторных покупок и программы лояльности. Прямой контакт с конечным потребителем через пуш-уведомления о новых акциях.
- Повышение лояльности пользователей благодаря оперативной обратной связи и внедрению улучшений в приложение.
- Быстрое тестирование гипотез для управления бизнес-показателями.
В 2023 году Битрикс прекратил поддержку мобильного модуля, и для ХТК это грозило следующими последствиями:
- Приложение может исчезнуть из магазинов App Store и Google Play.
- Клиенты потеряют связь с компанией и свои данные: бонусы, баллы, историю покупок, которые они копили годами.
- Минус один канал коммуникации с клиентами, утрата доверия.
Мы оперативно погрузились в проект. Запустили параллельно процессы по разработке технического задания, отрисовки дизайна, backend, frontend и тестирование, чтобы как можно скорее помочь нашему заказчику и восстановить коммуникацию с его клиентами.
Наши задачи
- Сделать приложение на Flutter без потери базы клиентов. Важно, чтобы при обновлении приложения не потребовалась повторная регистрация и все данные пользователей сохранились в новой версии сервиса.
- Разработать приложение как можно быстрее, чтобы не потерять доверие клиентов.
- Улучшить дизайн приложения, сделав приложение более понятным для пользователей.
Сложности проекта
Ранее у ХТК не было полноценного приложения. С помощью специального модуля Битрикс была создана «мобильная платформа» с контентом, который подгружался с сайта на Битрикс. Нам нужно было передать этот контент с Битрикс в новое приложение на Flutter. Для этого необходимо создать специальный «мост» — в мире IT это называется внешним интерфейсом. Этот мост позволяет данным легко перемещаться между сайтом и мобильным приложением.
Вызов заключался в отсутствии возможности создания внешнего интерфейса для обмена данными с мобильным приложением в рамках Битрикс CRM. Нам пришлось создать свой собственный «переводчик», т.е. промежуточный сервер, который помогал нашему новому приложению понимать и общаться с данными компании.
Кроме этого, нам нужно было обеспечить красивый дизайн мобильного приложения, настроить его взаимодействие с бонусной программой и обеспечить работу сервера, который поддерживает стабильную работу приложения.
Решение
Учитывая сроки, бюджет и необходимость двух платформ (iOS и Android), использование нативных решений можно исключать. Разработка нативных приложений обычно занимает больше времени, чем кроссплатформенная разработка, из-за необходимости создания и поддержки отдельного кода для каждой платформы. Это также относится к процессу отладки, развертывания и публикации приложения в магазинах приложений, который может потребовать дополнительных шагов и времени.
Реализацию нового приложения на Flutter мы начали с упрощения логики его функционала. Для этого разработали пользовательские сценарии, описывающие типичные пути использования прилож��ния различными категориями пользователей. Каждый сценарий содержал последовательность шагов, которые пользователь выполняет для достижения определенной цели. Например, сценарии регистрации нового пользователя в бонусной программе, получение бонусов и т.д.
Мы провели комплексную переработку пользовательского опыта и дизайна интерфейса приложения. Проанализировали обратную связь пользователей, учли современные тренды в дизайне, UX и лучшие практики индустрии. В итоге не только преобразился внешний вид интерфейса, но и стало удобнее в плане навигации и функциональности.
Подготовили документацию, где описывается, как мобильное приложение интегрируется с бонусной программой.
Таким образом мы определили эндпоинты, форматы запросов и ответов, а также протоколов аутентификации и безопасности. Благодаря этому разработчики могли приступить к работе с уже задокументированным API. Это позволило начать создание интерфейса быстрее — до того, как бэкенд был готов к использованию.
Разработка backend с опережением frontend на неделю представляла собой стратегическое решение, направленное на оптимизацию и ускорение процесса разработки всего приложения.
Тестирование функционала проводилось каждые 3 дня для оперативного выявления и устранения технических ошибок.
Почему именно Flutter:
- стандартизация UI-кита позволила экономить время на верстку до 30%;
- использование готовых решений;
- одновременный релиз на обе платформы iOS и Android;
- экономия на коммуникациях между командами (одна команда на Flutter вместо 2-х нативных команд).
Первый релиз (MVP) включал в себя следующие функции:
- Авторизация/регистрация пользователей.
- Главная страница с программой лояльности.
- Интеграция с бонусным центром для начисления бонусов пользователям за покупки.
- Страница акций.
- Обратная связь.
- Профиль пользователя.
- История операций.
- Пуш-уведомления.
- Offline режим для возможности начислить бонусы при отсутствии интернет соединения.
Результат
От старта работ до выпуска первой версии приложения в App Store и Google Play прошло 2 месяца. Мы разработали полноценное мобильное приложение с полностью обновленным дизайном, сохранив данные уже зарегистрированных пользователей: доступы в приложение, бонусные баллы, транзакции.
Команда Amiga оперативно подключилась к задачам и помогла нашей компании в короткие сроки реабилитировать мобильное приложение. Для нас это основной канал связи с клиентами. Они регулярно им пользуются, и если случаются сбои, то конечно все начинают нервничать, мы переживаем, что доставляем неудобства нашим ценным пользователям. Нам было очень важно как можно быстрее и безболезненнее восстановить эту коммуникацию, чтобы сохранить доверительные отношения с аудиторией.
Команда разработчиков отлично справилась с этой задачей. Они предлагали конкретные оперативные решения, благодаря которым первый релиз случился уже спустя 2 мес. К тому же, они потрудились и над дизайном, теперь наше приложение выглядит современно и свежо.
Я рад сотрудничать с такой командой профессионалов. Проектная команда постоянно стремится улучшить наш сервис и предлагает интересные идеи. Мы обязательно будем их реализовывать вместе с Amiga!
Планы по развитию проекта
Мы продолжаем работать с заказчиком и вместе определили будущую бизнес-задачу — это оптимизация расходов на персонал и топливо, прозрачность и прогнозируемость бизнеса для сокращения остатков.
Как мы видим дальнейшее развитие функционала приложения:
- Добавление сервиса оплаты заправки через приложение (пример – Яндекс заправки), в том числе возможность оплаты через СБП.
- Добавление категоризации затрат (мойка, покупки, заправки) и начислений бонусов в приложении с возможностью просмотреть статистику за выбранный период.
- Регистрация пользователя по номеру телефона. Сейчас регистрация пользователя происходит по номеру бонусной карты, которую пользователь может приобрести только офлайн на заправке ХТК.
- Добавление AppMetrica для возможности сбора статистики использования приложения: количество пользователей за период (как часто пользователи возвращаются в приложение чтобы совершить заправку), наиболее загруженные колонки, кол-во литров на пользователя в месяц, средний чек с каждого пользователя, выручка с пользователей, которые использовали приложение для заправки.
Технологии
Административная панель: Битрикс.
Серверная часть: PHP 8, Laravel 10, БД MySQL. Мобильное приложение: Flutter, Dart.
Команда
Ярослав Ясаков — руководитель проекта
Алена Ерофеева — руководитель проекта
Тимур Моисеев — руководитель мобильной разработки
Артем Салеев — руководитель backend направления
Антон Горохов — PHP Team Lead
Евгений Шмулевский — PHP разработчик
Ася Васильева — системный аналитик