Мобильный банк B2C

Банковское приложение на Flutter с автотестами и инфраструктурой для них
Содержание

Клиент

Банк входит в 30 крупнейших российских банков по размеру активов и занимает 20 место в финансовом рейтинге по методике Banki.ru. Работает с 2001 года. Называть его мы не можем по условиям NDA.

Задача

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

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

За 9 месяцев мы разработали для банка новое приложение на Flutter с автотестами и инфраструктурой для них. Есть версия для смартфона и планшета. Пользователи хвалят его за современный дизайн и удобную навигацию. 

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

Вызовы

Большое число задач для первого релиза

В первый релиз вышли с самым большим скоупом среди наших проектов мобильных банков:

  • 4 способа авторизации
  • 2 способа регистрации
  • Просмотр и управление продуктами
  • Открытие продуктов
  • Мои финансы для контроля финансового состояния
  • Платежи и переводы 
  • Автоплатежи 
  • Избранные платежи 
  • История операций и действий 
  • Аналитика расходов
  • Чат для поддержки пользователей
  • Просмотр офисов и банкоматов
  • Управление личными данными 

Ускорить проект позволила разработка на кроссплатформенном фреймворке — с Flutter можно сэкономить до 40% времени разработчиков. Важными слагаемыми успеха стали также слаженная работа всей команды и сокращение времени тестирования за счет автотестов. 

Первый Flutter-проект с автотестами и инфраструктурой для них

В этом проекте мы впервые внедрили во Flutter-приложение автотесты и инфраструктуру для них. Это сокращает время на тестирование и устранение багов и, в целом, повышает качество приложения. 

Один код для приложений 2 разных банков

Приложение второго банка группы мы реализуем на базе кода первого приложения. Но при этом они будут отличаться дизайном, набором функций и точкой доступа API. Переиспользование кода сократит сроки и стоимость проекта до 70%. 

Как мы это сделали

Обновили дизайн

Банк пришёл со списком требований для MVP-версии и дизайном старого приложения в miro. С продуктовой точки зрения дизайн был проработан хорошо, но выглядел устаревшим. Мы «осовременили» дизайн и адаптировали его под Flutter-разработку. Проработали и с точки зрения UX: проанализировали решения, которые предлагал банк, использовав свою десятилетнюю экспертизу в работе с банковскими приложениями. В результате предложили несколько более оптимальных вариантов, чтобы сделать приложение удобней для пользователей. Например, проработали вариант интерфейса для маленьких экранов: предложили варианты расположения элементов, при котором на экране нет ненужных скроллов.

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

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

Онбординг: клиент может пройти обучение работе с приложением или отказаться от него

Реализовали автотесты 

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

Сейчас примерно 65% кода приложения покрыто автотестами E2E. E2E (сквозное тестирование, End-to-end) — это процесс тестирования, при котором происходит подробная эмуляция пользовательской среды. Это означает, что имитируются разные действия пользователей: щелчки мышью, нажатия на кнопки, заполнение форм, переходы по экранам и т.д. Такое тестирование запускается перед релизными сборками, занимает много времени, но позволяет достаточно детально проконтролировать качество приложения.

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

Главный экран — визитная карточка приложения

На главном экране приложения пользователь видит все свои банковские продукты: карты, счета, вклады, кредиты. Чтобы пользователю не приходилось прокручивать длинный список, мы добавили возможность скрыть ненужные продукты: например, неиспользуемые карты. 

Главный экран и раздел «Скрытые продукты»

Открытие продуктов

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

Можно открыть разные виды карт

В некоторых регионах доступны не все банковские продукты. В приложении учли этот юзкейс: поле этого продукта будет неактивно и сместится в самый низ списка. 

Кредиты недоступны в регионе

История операций и действий

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

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

Чат

При реализации чата в приложении мы неожиданно столкнулись с одним из главных технических вызовов этого проекта. Чат реализовали на базе готового SDK от Webim. Но при интеграции его с приложением обнаружили, что версия Webim на Android  работает с ограниченными возможностями. У нас не получалось подключить на Android необходимую библиотеку, возникала проблема с сертификатами. 

В итоге, мы нашли выход: создали свою библиотеку и опубликовали ее в публичном репозитории GitHub. Чат в приложении заработал. 

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

Динамические формы для платежей и переводов

Для платежей и переводов банк использует динамические формы: они собираются по принципу мозаики из динамических компонентов. Это значит, что пользователь может в любой момент гибко менять любой из них — номер телефона, номер карты получателя, сумму. Например, если нужно, вернуться на экран назад и исправить сумму.

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

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

Он не может вернуться на предыдущий экран и исправить сумму.

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

В числе последних реализованных фич у пользователей появилась возможность использовать новый инструмент СБП — me2me. Он позволяет переводить между своими счетами в разных банках.

Реализация me2me

Контроль за своим финансовым состоянием

В блоке «Мои финансы» пользователь может проанализировать свое текущее финансовое положение: посмотреть, сколько у него свободных денег или обязательств по кредитам. Анализ можно настроить в разбивке по продуктам и валютам. При этом для объективности картины можно исключить из списка средства, находящиеся на кредитной карте. 

Оценка приложения в нативных диалогах

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

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

Развитие проекта

Проект продолжается. Планируем список фич для развития в 2022 году. Кроме того, стартовал проект с другим банком, входящим в эту же группу. На базе исходного кода мы реализуем ещё одно приложение. Они будут отличаться дизайном, набором функций и точкой доступа API. Но благодаря переиспользованию кода срок проекта существенно сократится.

Давайте создадим мобильное приложение под ваши задачи вместе
Обсудить проект
Обсудить проект