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

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

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

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

Росбанк обслуживает 5 млн частных клиентов, 78 тыс. клиентов малого бизнеса, 7350 корпоративных.

Почему Росбанк отказался от прежнего приложения

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

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

  • старая архитектура;

  • высокая стоимость содержания команды при разработке на нативе;

  • методология работы команды.

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

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

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

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

Подготовка нового концепта. Смещаем фокус с проекта на клиента

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

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

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

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

Что такое Смартбанк

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

Новое приложение «Росбанк Бизнес» гораздо удобнее для клиентов

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

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

Почему Росбанк выбрал Flutter

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

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

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

Flutter — мультиплатформенный фреймворк от Google. На нём можно написать единый код и собрать приложения сразу под несколько платформ: Android, iOS, веб и десктоп (последний — в экспериментальной фазе).

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

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

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

Алексей Ясаков, Глава центра развития цифровых решений Росбанка

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

  • Time-to-market короче.
  • Можно частично оптимизировать расходы: содержать штатную команду Flutter-разработчиков дешевле, чем две нативных команды.
  • Благодаря единой кодовой базе приложение проще тестировать и отлаживать, вероятность ошибок меньше.
  • Приложение удобно поддерживать, масштабировать и развивать.
  • Отличий от нативных приложений для пользователей практически нет: плавные анимации, характерные для операционной системы элементы интерфейса, работа с жестами.
  • Безопасность: Dart-код компилируется в нативный, не читаемый человеком. Это существенно усложняет процесс обратной обработки, которую делают, чтобы понять принципы работы приложения, и повышает безопасность по сравнению с проектами на Java, Kotlin или React Native.

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

Алексей Ясаков, Глава центра развития цифровых решений Росбанка

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

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

Делай раз, делай два — как Surf делал приложение для Росбанка

Дизайн

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

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

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

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

Бэкенд

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

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

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

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

Упрощённая схема взаимодействия через middleware

Бесшовная миграция пользователей

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

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

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

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

В стране Розовопонии, или бывает ли технология без багов

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

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

  • Подтормаживала анимация при первом запуске приложения. Мы придумали, как решить эту проблему. С помощью инструментов для профилирования производительности нашли несколько проблем в своём коде и переписали решения на более оптимальные в части потребления ресурсов устройства. В релизе Flutter 1.20, который вышел в августе 2020, команда Google добавила возможность пофиксить это «из коробки» — через «прогрев». А для iOS Google решили эту проблему только пару недель назад.
  • Была проблема со шрифтами в iOS: межбуквенные интервалы отображались некорректно. Мы завели issues на команду разработчиков Flutter в Google, и они этот вопрос достаточно быстро решили.
  • Столкнулись с падением Dart VM. Евгений Сатуров, Flutter-тимлид Surf, обратился к знакомому из Google, который занимается разработкой Dart VM. Google исправил ошибку, приводящую к сбою, и опубликовал в стабильном канале буквально за день. Так мы избавили от этой проблемы всё сообщество.

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

Если отбросить игры, то очень удобно (создавать приложения на Flutter). Большая часть разработки приложения заключается в создании внешнего вида приложения, его интерфейса. И на данный момент возможно субъективно, но работа с UI у Flutter самая удобная среди всей мобильной разработки (включая «натив»). iOS пытается приблизиться к этому за счет Swift UI, Android тоже идет к этому, но и там не реализовано то, что есть у Flutter. А в отличие от React Native, Flutter самостоятельно отрисовывает все элементы, поэтому экран полностью под контролем разработчика.

Андрей Давыдов, Владелец продукта мобильное приложение «РОСБАНК Бизнес»

Передача инхаус — переход проекта на новый уровень

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

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

Так поэтапно происходит передача проекта инхаус

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

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

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

Итоги проекта

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

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

В 2020 году мы уже полностью перевели клиентов со старого нативного приложения на новую версию.

Алексей Ясаков, Глава центра развития цифровых решений Росбанка

Оценка (приложения) исключительно позитивная. Чтоб выявить баги, мы перешли после внутреннего тестирования к бета-тестированию, а затем к ограниченной дистрибуции. Какое-то количество ошибок было обнаружено и исправлено. Но это была нормальная процедура раскатки нового приложения. При этом нельзя сказать, что плотность системных дефектов приложения на Flutter заметно отличалась бы в сравнении с аналогичным приложением, к примеру, на Swift.

Андрей Давыдов, Владелец продукта мобильное приложение «РОСБАНК Бизнес»

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

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

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

Чего?... Как это зависит от фс

Ответить
Развернуть ветку
Dmitry Semenikhin

Я думаю это уже журналисты немног переврали)

Ответить
Развернуть ветку
Anton Z.

лол, ну ок. ждем цикла статей, про то как они разочаровались и побежали искать нативщиков.

Ответить
Развернуть ветку
greg chudnoff

нифига, флаттер - сила

Ответить
Развернуть ветку
Михаил Царёв

Нативщики в любом случае будут нужны, ибо flutter - впервую очередь ui-framework, а не полноценная замена нативу. 
Я сейчас в одиночку пилю приложение e-commerce направленности, на flutter, но пока только под ios. С нативом всё равно приходится работать, ибо sdk под flutter многих сторонних сервисов не сущесвуют в природе, да и биндинги для платформозависимого кода есть далеко не на всё.

Ответить
Развернуть ветку
Панда Ву

Ща росбанк откушает говница с кроссплатформой в инхаусе и пойдет искать аутсорс нативщиков, чтобы переделать по-нормальному. Вообще не понимаю, почему банк экономит вообще на этом…

Ответить
Развернуть ветку
Андрей Давыдов

какого конкретно говнища?)

Ответить
Развернуть ветку
Панда Ву

Вы имеете опыт в мобильной разработке?

Ответить
Развернуть ветку
Здорово бандиты

Добрый день. Имею опыт в моб разработке. Хочу сказать что в том же NFL digital стафф делается на кроссплатформе RN.  как вы выразились, гавница тоже приходится покушать, но в целом плюсы перевешивают и мигрировать обратно на нативку никто не планирует🏈🏈 :) 

P. S. Я сам нативщик и за нативку)) 

Ответить
Развернуть ветку
Панда Ву

Согласен. Есть проекты, которым кроссплатформа - серебряная пуля. Дешево и быстро. В топике фигурирует банк 🤔

Ответить
Развернуть ветку
Здорово бандиты

да, тоже подумал об этом немного после своего коммента :) хотя блин, не вижу  где можно споткнуться на клиентской стороне в банк-клиенте. кмк по требованиям отказоустойчивости их решение должно проходить, не может быть чтобы флаттер был так ужасен...если они грамотно обработали все ошибки на своем этом миддлваре, то возможно не все так уж страшно, и не хлебнут они лиха. По крайней мере у них нет зае*ной работы со сторонним видеоплеером и видеопотоками в стеке RN-android, вот там проблем с той же плавностью анимаций и плейбэком хватает, я полысел за два года натурально хаха

Ответить
Развернуть ветку
Name

Press F

Ответить
Развернуть ветку
Тот самый партизан

Ждем описания удобства и скорости работы от клиентов на старых устройствах (6s, 7, SE).

Ответить
Развернуть ветку
Стас Сажаев

Интересно, какой процент таких устройств среди пользователей Росбанк Бизнес 🤔

Ответить
Развернуть ветку
юзер

Нормально написанное приложение на React Native работает на 6s отлично. Думаю Flutter в этом плане тоже поведет себя хорошо. 

Ответить
Развернуть ветку
greg chudnoff
 Нормально написанное
Ответить
Развернуть ветку
M J

 А вот недавно была статья о том как Wrike отказалась от этого

Ответить
Развернуть ветку
ЯжПрограммист

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

Ответить
Развернуть ветку
Евгений Сатуров

Ну не от этого Wrike отказались, не надо мешать все в кучу. Отказались они от Dart. Flutter у них нет и никогда не было.

Ответить
Развернуть ветку
M J

 Я про Dart и написал вообще-то. 

Ответить
Развернуть ветку
Leonidos Makolkin

Кроссплатформа для игр или когда хочется по-быстрому, то что надо было ещё вчера.

Ответить
Развернуть ветку
Вы в федеральном розыске
"второе в мире и первое в России приложение,"

Эээ... Как это?
Я написал пять приложений на Flutter. Так что этот банк на шестом месте как минимум

Ответить
Развернуть ветку
Стас Сажаев

Вроде пишут именно про банковское приложение, а не любое вообще )

Ответить
Развернуть ветку
Вова Кропивко

Все забыли про приват который уже 2 года на флаттере

Ответить
Развернуть ветку
Surf
Автор

Интересно... Не смогли найти об этом информацию в открытом доступе.

Ответить
Развернуть ветку
greg chudnoff

что за приват?

Ответить
Развернуть ветку
Вова Кропивко

Приватбанк в Украине

Ответить
Развернуть ветку
greg chudnoff

"все забыли" ))) никто и не знал вообще
че за банк? где это? Украина - это в Африке?

Ответить
Развернуть ветку
Вова Кропивко

Сказочный..

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Вова Кропивко

Отлично, закусили русскими младенцами и изнасиловали пенсионерок, все как у вас по телеку

Ответить
Развернуть ветку
Phil Balita

Росбанку, нужно не новое приложение на Флатерре,  а  новые прорывные  фичи.   
Ой, забыл? что я в разделе \dev

Ответить
Развернуть ветку
Gabriel

ну разработали и разработали...

Ответить
Развернуть ветку
Alex Teplo
 Подтормаживала анимация при первом запуске приложения

Анимация. Подтормаживала. В банковском приложении. Дожили...

Ответить
Развернуть ветку
Alex Teplo

Похоже, к платформочке Flutter пора присмотреться. Что-то её во всех медиа форсируют не по-детски 🤷🏼‍♂️

Ответить
Развернуть ветку
AFM

А может подскажете кто, можно ли на flutter сделать Гугл календарь, скопировать приложение, и если можно, то очень ли это сложно?) Ps я чайник, желающий заиметь свое первое приложение с помощью фрилансера за недорого :-)

Ответить
Развернуть ветку
S K

Если рассматривать разработчиков как каменщиков, а дизайнеров как конструкторов-архитекторов, то каменщики молодцы. Но это не спасает — неудобно и уныло (судя по скриншотам)

Ответить
Развернуть ветку
Dmitry Volod'ko

Мы в Sfera.ru например пошли по пути гибридных приложений ещё в 2018.
Вопрос даже не в экономии а в консистентность клиентского опыта.

Главный плюс - нет варианта не сделать фичу для мобилки. Все что ты делаешь будет и на десктопе и на мобилке.

А это частая боль в банках. Тут у нас это доступно только в строй версии дбо, это только в десктопе.

и эти различия только растут с развитием продукта. 

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Харламка

Опять эти анонимные посты от непонятно кого. 

Ответить
Развернуть ветку
hakhagmon

Cordova пизже

Ответить
Развернуть ветку
Кещик Щепещек

Ну да ну да

Ответить
Развернуть ветку
37 комментариев
Раскрывать всегда