Кейс: как Surf и Росбанк сделали первое в России банковское приложение на Flutter

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

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

Приложение «Росбанк для бизнеса» — первое банковское приложение в России и второе мире, написанное на кроссплатформенной технологии Flutter. В Surf мы сделали первую версию приложения, а затем помогли банку наладить Flutter-разработку инхаус. Теперь Росбанк развивает его самостоятельно.

У Росбанка уже было мобильное приложение «Росбанк для бизнеса». Клиенты им пользовались не слишком активно: они жаловались на скорость работы и неудобный интерфейс. Для простых операций — например, подпись документов — нужно было совершать много лишних движений.

Обновить приложение и внедрить новые фичи было сложно из-за нескольких особенностей:

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

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

Но главная проблема состояла в том, что приложение развивалось как проект, а не как продукт. В основе лежали не потребности и боли клиентов, а сроки, бюджеты и планы. Разработка велась по методологии «водопада» (Waterfall), которая при всех своих достоинствах имеет один серьезный недостаток — недостаточную гибкость и то, что формальное управление часто оказывалось важней сроков, стоимости и качества.

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

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

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

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

Все собранные данные легли в основу нового концепта — Смартбанка.

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

Смартбанк помогает клиенту во всём: не нужно думать, когда заплатить налоги, где найти реквизиты для платежа, который уже совершал, оперативно решить проблемы с контрагентами и счетами.

Одни клиенты Росбанка — 100% мобайл юзеры, а другим проще заполнять большие платежные документы в вебе. Поэтому параллельно с мобильным приложением банк разрабатывает интернет-клиент 2.0: веб-платформу для работы с юрлицами. Сама идея Смартбанка не связана с конкретной платформой. Платформа — это инструмент, который поможет реализовать концепцию.

«Росбанк Бизнес» — второе в мире и первое в России приложение, написанное на Flutter. Немного опередил его только бразильский Nubank. Выбор кроссплатформенного фреймворка Flutter для банковского приложения — очень смелое решение со стороны Росбанка.

Разработку любого мобильного приложения осложняет то, что оно должно корректно работать и на Android, и на iOS. У них совсем разные принципы построения файловых систем: закрытая, работающая по принципу «приложение — его данные» — на iOS, открытая к взаимодействию — на Android. Это означает, что нужны разные языки программирования, разные подходы к разработке и, как следствие, две команды разработчиков, которые будут пилить 2 нативных приложения.

В этой ситуации проще и выгодней для Росбанка оказалось использовать кроссплатформенную технологию — Flutter.

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

Flutter оказался хорошим решением всех болей разом:

Но за сжатые сроки трудно собрать штатную Flutter-команду с нужной квалификацией. Тогда Росбанк решил найти аутсорс-команду на Flutter. Мобильное приложение для банка — это серьёзный проект, поэтому в команде должны быть квалифицированные специалисты, причем не только Flutter-разработчики, но еще и аналитики, дизайнеры, QA. Должны быть развитые процессы: от CI/CD и контроля качества сборок до менеджмента.

Росбанк провел тендер на разработку Flutter-приложения. Выбрали Surf, так как у нас есть всё, что нужно для разработки мобильного приложения. Преимуществом стал и наш опыт в мобильном банкинге: мы уже сделали проекты с банками Зенит, Юникредит, Проомсвязьбанк, SBI. А ещё для тендера Росбанка мы предложили концепт дизайна, за пару дней собрали и показали демку одной из фич на Flutter. Так началась наша совместная работа над приложением.

Росбанк пришёл в проект со своим дизайном. Мы помогли его доработать: проанализировали бизнес-логику, формат и структуру серверных данных.

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

Прежний бэкенд был написан в начале нулевых на Burlap: теперь это устаревший xml-протокол. Малейшие доработки оборачивались огромными затратами.

Старое мобильное приложение Росбанка нормально взаимодействовало с бэкендом на Burlap. Но если создавать новое мобильное приложение, такого взаимодействия уже не получится, и оно просто повторит ошибки старого.

Новое мобильное приложение нужно было создавать на новой архитектуре с использованием Json, Flutter. Но переписывать весь бэкенд с нуля — задача на несколько лет работы, поэтому мы пришли к тому, что нужно «научить» новое приложение общаться как со старым бэкендом, так и с новым — на Json.

Решение нашлось: мы написали прослойку middleware — промежуточный сервер, который бы связывал новое мобильное приложение и с Burlap, и с Json. Middleware от лица мобильного приложения общался и со старым, и с новым бэкендом и отдавал им ответ на том языке, на котором они его ожидали получить. При этом для мобильного приложения ничего не менялось. Middleware сервер выступал как «переводчик» с языков бэкендов на язык мобильного приложения.

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

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

Задача усложнялась тем, что мигрировать данные нужно было с двух нативных приложений — для iOS и Android. А регистрация пользователей в них была реализована совершенно по-разному, данные хранились в разных местах, и нам эти данные надо было найти и корректно перенести в новое приложение.

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

На момент старта проекта Росбанка Flutter был в продакшене около года. И как у любой перспективной, но молодой технологии, в нём периодически проскакивали баги. Но команда Google регулярно выпускает новые версии и оперативно реагирует на issue, поэтому чем дальше — тем проще.

Приведём пару примеров недочётов, с которыми мы столкнулись в ходе проекта, и расскажем, как они устранялись:

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

Перед Surf стояла задача сделать MVP — минимально жизнеспособный продукт. Дальше Росбанк хотел забрать разработку инхаус, чтобы развивать приложение самостоятельно.

Процесс передачи проекта инхаус проходит в несколько этапов, описали их в статье в блоге.

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

Обучение инхаус команды и перенос продукта в проекте с Росбанком заняли примерно две недели. Сначала разработчики банка работали вместе с командой Surf. Команда Росбанка принимала участие в ревью, часть фич делали вместе. Показывали разработчикам, как работают код и простые сборки. Параллельно в банке настраивали CI/CD, чтобы с кодом было удобно работать.

После этих подготовительных этапов мы передали разработку новой команде Росбанка.

На этом для нас разработка мобильного приложения «Росбанк Бизнес» закончилась. Мы помогли банку наладить Flutter-разработку инхаус, и теперь он успешно развивает приложение самостоятельно.

23 апреля 2021 года приложение «Росбанк Бизнес» получило первое место среди мобильных приложений в категории «Банки, финансы и страхование» по версии Tagline Awards 2020-2021.

* Комментарии представителей Росбанка взяты из интервью для N + 1.

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