Кейс: как мы сделали ещё один мобильный банк на Flutter — для «СМП Банка»

В этой статье расскажем про разработку банковского b2c-приложения на Flutter — для «СМП Банка».

Первый банковский проект на Flutter мы реализовали в 2020 году — это был мобильный b2b банк для Росбанка. Подробнее о проекте можно почитать в статье.

В этом кейсе:

Почему отказались от старого приложения. Путь СМП Банка к нам и разработке на Flutter был долог и показателен. У банка уже было нативное b2c приложение. Его главное преимущество было в том, что оно не требовало больших затрат. Но был один важный нюанс: приложение тестировал на одном аппарате разработчик вендора, который хорошо знал особенности системы дистанционного банковского обслуживания и мог добиться корректной отработки почти любого юзкейса обходными путями. Иногда подсматривая в web-версию интернет-банка, он дорабатывал нужные кнопки — так работала, например, регистрация. После его демонстраций банк считал, что приложение работает корректно. Но сказать уверенно, что остальные 99,9% клиентов удовлетворены работой приложения, банк не мог.

В 2020 году СМП решил, что нужно что-то менять в работе сервиса и делать его более клиентоориентированным. Банк создал рабочую группу, которая проанализировала актуальные запросы пользователей и попыталась применить эти требования к текущему приложению. В итоге, пришлось признать, что одним редизайном обойтись невозможно. Менять нужно было всё: от UX и стека до процессов разработки и внедрения. Версии Java и Objective-C/SWIFT, на которых было написано приложение, устарели, и было проще создать новое, чем обновлять и рефакторить.

Как выбрали технологию. Следующим этапом стал выбор технологии для нового приложения. С одной стороны, банк понимал, что широко используемые кроссплатформенные технологии дают значительную экономию и сокращают time-to-market, но опасался того, что они проигрывают нативным в возможностях и производительности. Чтобы оценить все нюансы кроссплатформы, СМП Банк провёл исследование, в котором посмотрел шире — в том числе, на проекты за пределами банковского сектора. Так команда убедилась, что Flutter сейчас используют повсеместно и проблем с производительностью не возникает. Одним из решающих аргументов в пользу Flutter для команды СМП Банка стало то, что он разрабатывается и поддерживается Google. Важным было и то, что эта технология имеет широкие возможности для масштабирования и гибкости.

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

Как выбрали Surf. На тот момент в банковском секторе единственным референсом с уже работающим приложением на Flutter был Росбанк. Приложение разработала команда Surf. Это и стало основным фактором выбора подрядчика. Помимо разработки решения для СМП Банка, в проект включили создание приложения для Мособлбанка, входящего в ту же финансовую группу.

Для команды Surf этот проект — с самым большим скоупом фич среди наших проектов для банков, вошедших в первый релиз:

Остановимся чуть подробнее на некоторых из них.

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

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

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

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

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

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

Например, пользователь не может вернуться на предыдущий шаг и исправить сумму.

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

Также мы реализовали ещё один инструмент СБП — me2me. Он позволяет переводить между своими счетами в разных банках. Кроме того, предусмотрена возможность оплаты по QR-кодам.

Интерактивная карта отделений и банкоматов. В приложении можно выбрать формат отображения: посмотреть отдельно офисы или банкоматы. Краткая информация отображается на карте. Если в одной локации несколько банкоматов, высвечивается общее число на карте, чтобы клиент банка мог выбрать наиболее подходящее.

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

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

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

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

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

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

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

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

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

Приложение для второго банка группы на том же коде. Мы разработали приложение для Мособлбанка — ещё одного банка, входящего в группу «СМП Банк». Реализовали его на исходном коде головного проекта, что позволило до 50% ускорить разработку и ещё раз доказало актуальность использования кроссплатформы Flutter в сложных финтех-задачах.

СМП Банк одним из первых столкнулся с блокировкой аккаунтов в сторах со стороны Google и Apple. И если для пользователей Android есть возможность устанавливать APK с сайта банка или с отечественных магазинов RuStore или NashStore, то для пользователей iOS ситуация выглядит печальнее. Однако Flutter позволяет обойти и эти ограничения. Так, начиная с версии 3.0, есть возможность создавать приложения для web и десктопа. Кроме того, на Flutter можно создать полноценное PWA приложение, которое будет запускаться на любом смартфоне. Поэтому сейчас банк смотрит в сторону разработки PWA, также с использованием Flutter.

Лидеры российской банковской отрасли диктуют свои правила и вкладывают в мобильную разработку баснословные бюджеты. Flutter же помогает остальным банкам с хорошими финансовыми продуктами не отставать и доносить для своих клиентов свои решения в удобном формате мобильного приложения. На Flutter можно разработать приложение быстрее и дешевле в среднем на 40%, так как такое приложение создаётся на единой кодовой базе сразу для двух платформ: iOS и Android. При этом для пользователя нет никакой разницы между нативным и приложением на Flutter, так как UX-элементы, переходы и анимации между экранами работают идентично нативу. Такое приложение легко поддерживать и развивать благодаря микросервисной архитектуре.

Мобильное приложение для банка на Flutter — уже давно не эксперимент, а «золотой стандарт» финтех-разработки. Это доказывают как зарубежные проекты, так и отечественные — Росбанк (для бизнеса) и СМП Банк (для физических лиц).

Подробный кейс СМП Банка читайте на нашем сайте.