Разработка
Surf

Кейс: как 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 — загляните в наш блог, ведь мы разрабатываем бизнес-приложения на этом фреймворке больше двух лет.

{ "author_name": "Surf", "author_type": "self", "tags": [], "comments": 40, "likes": 50, "favorites": 68, "is_advertisement": false, "subsite_label": "dev", "id": 239455, "is_wide": true, "is_ugc": true, "date": "Tue, 27 Apr 2021 17:46:40 +0300", "is_special": false }
0
40 комментариев
Популярные
По порядку
Написать комментарий...
8

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

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

Ответить
2

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

Ответить
3

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

Ответить
5

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

Ответить
0

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

Ответить
2

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

Ответить
1

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

Ответить
–3

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

Ответить
1

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

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

Ответить
0

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

Ответить
1

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

Ответить
3

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

Ответить
2

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

Ответить

Идеологический мангал

Тот
1

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

Ответить
2

 Нормально написанное

Ответить
1

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

Ответить
4

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

Ответить
3

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

Ответить
0

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

Ответить
2

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

Ответить
0

"второе в мире и первое в России приложение,"

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

Ответить
3

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
–2

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

Ответить
0

Сказочный..

Ответить

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

0

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

Ответить
1

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

Ответить
1

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

Ответить
0

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

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

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

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

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

Ответить

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

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

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

Молчаливый клуб

–1

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

Ответить
–3

Cordova пизже

Ответить
0

Ну да ну да

Ответить
Читать все 40 комментариев
Чайник

Я купил чайник недавно. Вот такой как на картинке. С одной стороны это я сейчас хвастаюсь.С другой стороны, интересно почему я купил его? Начнем с того, что он стоит почти 100€ и это в целом для электрического чайника дофига. При этом в нем нельзя даже посмотреть сколько там воды. Не говоря уже о настройке температуры. Внутри совершенно обычный…

Ключевое слово в Yoast SEO обязательно использовать в 2021 году? Читал старые материалы, что это вредит и только для англоязычных сайтов.

Не знаю как сейчас. Но заметил, когда начал вписывать месяц назад ключевое слово, переходы из Google Новости исчезли совсем. А ранее, когда не вписывал, то было 15 кликов из GNews.

«22 тысячи в год на домашнюю гигиену — и вы не пациент стоматолога»: сколько стоит уход за зубами и что нужно делать

Подробный гид от основателя «Белой Радуги» о том, какие гаджеты для домашней гигиены нужны всем, а что — маркетинг и вообще опасно.

На работе
Как превратить юристов из бюрократов в опору компании

Бывает, что корпоративные юристы — люди, которые не показываются из кабинета и иногда вставляют палки в колёса другим отделам. Но в «Фоксфорде» они сами ходят к бизнес-заказчикам и предлагают идеи. Юрист онлайн-школы «Фоксфорд» Катя Кулакова рассказывает, как работает юридический отдел, который живёт интересами компании.

Катя Кулакова, юрист онлайн-школы "Фоксфорд"
Понимание причин, по которым люди покупают люксовые продукты, полностью изменит вашу маркетинговую стратегию

И неважно, работаете ли вы в этом сегменте или нет.

Как подготовиться к жизни без cookies: рекомендации маркетологам

О технологии Federated Learning of Cohorts (FLoC), которая заменит cookies, Google объявил еще в начале года. Недавно компания анонсировала перенос запуска технологии на 2023 год, и теперь у рынка интернет-маркетинга есть 2 года, чтобы найти альтернативу работе с данными. Как выглядит ситуация сейчас и что делать маркетологам — в обзоре от AiData.

31 июля завершается приём заявок в 1-й этап отбора программы B2C Future Solutions
Альфа банк самовольно закрыл зарплатный счет

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

Сказ о том, как Авито собакенов обижает и на деньги кидает
С фокусом проблемы, сорян. @alpajessica

Если не интересно читать про мошенников, а хочется поднять себе настроение, то вам в конец статьи - там милейшие фотокарточки чудесных пёселей.

Как малому бизнесу понять свою «зону смерти»

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

Платёжная система Square Джека Дорси купит австралийский сервис рассрочки Afterpay за $29 млрд Статьи редакции

Сделка может стать одной из крупнейших в истории Австралии.

null