Кейс: как Surf и Росбанк сделали первое в России банковское приложение на Flutter
Сегодня хотим рассказать, как мы делали мобильное приложение для Росбанка, почему банк выбрал для него относительно новую технологию Flutter и какие трудности были в процессе перехода с двух нативных приложений на одно кроссплатформенное.
На нашем сайте есть кейс по проекту, но в этой статье мы поделимся многими дополнительными деталями.
Приложение «Росбанк для бизнеса» — первое банковское приложение в России и второе мире, написанное на кроссплатформенной технологии Flutter. В Surf мы сделали первую версию приложения, а затем помогли банку наладить Flutter-разработку инхаус. Теперь Росбанк развивает его самостоятельно.
Почему Росбанк отказался от прежнего приложения
У Росбанка уже было мобильное приложение «Росбанк для бизнеса». Клиенты им пользовались не слишком активно: они жаловались на скорость работы и неудобный интерфейс. Для простых операций — например, подпись документов — нужно было совершать много лишних движений.
Обновить приложение и внедрить новые фичи было сложно из-за нескольких особенностей:
старая архитектура;
высокая стоимость содержания команды при разработке на нативе;
- методология работы команды.
Бэкенд не позволял масштабировать приложение. Старое приложение сложно было поддерживать и развивать — архитектура изначально не предусматривала таких изменений. Сделать новое приложение на старом бэкенде тоже было невозможно: изменился бы только дизайн, а баги, раздражающие пользователей, никуда бы не делись. Переписывать бэкенд с нуля не позволяли сроки.
От нативной разработки отказались из-за долгих сроков и высокой стоимости. Концепт хотели перезапустить очень быстро. Когда в Росбанке посчитали расходы на поддержание двух команд на аутсорсе, которые будут поддерживать два нативных приложения для iOS и Android, оказалось, что это в любом случае будет дорого и долго, даже для приложения с небольшой функциональностью.
Но главная проблема состояла в том, что приложение развивалось как проект, а не как продукт. В основе лежали не потребности и боли клиентов, а сроки, бюджеты и планы. Разработка велась по методологии «водопада» (Waterfall), которая при всех своих достоинствах имеет один серьезный недостаток — недостаточную гибкость и то, что формальное управление часто оказывалось важней сроков, стоимости и качества.
В итоге Росбанк пришёл к тому, что нужно менять приложение и методы работы команды. Решили посмотреть в сторону кроссплатформы — тогда одна команда будет делать приложение сразу под две мобильные операционные системы. В качестве кроссплатформенной технологии выбрали Flutter.
Подготовка нового концепта. Смещаем фокус с проекта на клиента
Сперва Росбанк провёл большую подготовительную работу. Чтобы понять, что нужно людям от мобильного банковского приложения, в июне 2019 банк внедрил аналитику, инструменты сбора и обработки обратной связи. Следили, сколько времени занимает создание платежки, в какой момент возникают проблемы при подписании документов, какие оценки ставят пользователи.
Также Росбанк разделил пользователей на несколько групп и опрашивал их случайным образом. Первая группа — это корпорации. В рамках этой группы общались с С-level сотрудниками: CEO, CXO, главными казначеями, финансовыми директорами. Вторая группа — малый и средний бизнес: предприниматели и бухгалтеры, как штатные, так и обслуживающие компании на аутсорсе.
По результатам интервью, цифр и обратной связи от реальных пользователей делали выводы: чем пользуются, что нужно в первую очередь, а что можно сделать позже или не делать вообще.
Все собранные данные легли в основу нового концепта — Смартбанка.
Что такое Смартбанк
Росбанк сформировал концепт современного банка — это центр решения клиентских задач, связанных с банкингом.
Смартбанк помогает клиенту во всём: не нужно думать, когда заплатить налоги, где найти реквизиты для платежа, который уже совершал, оперативно решить проблемы с контрагентами и счетами.
Одни клиенты Росбанка — 100% мобайл юзеры, а другим проще заполнять большие платежные документы в вебе. Поэтому параллельно с мобильным приложением банк разрабатывает интернет-клиент 2.0: веб-платформу для работы с юрлицами. Сама идея Смартбанка не связана с конкретной платформой. Платформа — это инструмент, который поможет реализовать концепцию.
Почему Росбанк выбрал Flutter
«Росбанк Бизнес» — второе в мире и первое в России приложение, написанное на Flutter. Немного опередил его только бразильский Nubank. Выбор кроссплатформенного фреймворка Flutter для банковского приложения — очень смелое решение со стороны Росбанка.
Разработку любого мобильного приложения осложняет то, что оно должно корректно работать и на Android, и на iOS. У них совсем разные принципы построения файловых систем: закрытая, работающая по принципу «приложение — его данные» — на iOS, открытая к взаимодействию — на Android. Это означает, что нужны разные языки программирования, разные подходы к разработке и, как следствие, две команды разработчиков, которые будут пилить 2 нативных приложения.
В этой ситуации проще и выгодней для Росбанка оказалось использовать кроссплатформенную технологию — Flutter.
Узнать больше про Flutter можно в этой статье. О том, почему фреймворк — отличное решение для любого бизнеса, мы рассказываем здесь.
Flutter оказался хорошим решением всех болей разом:
- Time-to-market короче.
- Можно частично оптимизировать расходы: содержать штатную команду Flutter-разработчиков дешевле, чем две нативных команды.
- Благодаря единой кодовой базе приложение проще тестировать и отлаживать, вероятность ошибок меньше.
- Приложение удобно поддерживать, масштабировать и развивать.
- Отличий от нативных приложений для пользователей практически нет: плавные анимации, характерные для операционной системы элементы интерфейса, работа с жестами.
- Безопасность: Dart-код компилируется в нативный, не читаемый человеком. Это существенно усложняет процесс обратной обработки, которую делают, чтобы понять принципы работы приложения, и повышает безопасность по сравнению с проектами на Java, Kotlin или React Native.
Но за сжатые сроки трудно собрать штатную Flutter-команду с нужной квалификацией. Тогда Росбанк решил найти аутсорс-команду на Flutter. Мобильное приложение для банка — это серьёзный проект, поэтому в команде должны быть квалифицированные специалисты, причем не только Flutter-разработчики, но еще и аналитики, дизайнеры, QA. Должны быть развитые процессы: от CI/CD и контроля качества сборок до менеджмента.
Росбанк провел тендер на разработку Flutter-приложения. Выбрали Surf, так как у нас есть всё, что нужно для разработки мобильного приложения. Преимуществом стал и наш опыт в мобильном банкинге: мы уже сделали проекты с банками Зенит, Юникредит, Проомсвязьбанк, SBI. А ещё для тендера Росбанка мы предложили концепт дизайна, за пару дней собрали и показали демку одной из фич на Flutter. Так началась наша совместная работа над приложением.
Делай раз, делай два — как Surf делал приложение для Росбанка
Дизайн
Росбанк пришёл в проект со своим дизайном. Мы помогли его доработать: проанализировали бизнес-логику, формат и структуру серверных данных.
Дорабатывать дизайн продолжали параллельно с разработкой: что-то меняли по ходу, когда понимали, что пользователям не очень удобен текущий вариант, что-то менялось из-за технических ограничений. В итоге пришли к дизайну, который учитывает и видение команды банка, и технические нюансы мобильной разработки.
Бэкенд
Прежний бэкенд был написан в начале нулевых на Burlap: теперь это устаревший xml-протокол. Малейшие доработки оборачивались огромными затратами.
Старое мобильное приложение Росбанка нормально взаимодействовало с бэкендом на Burlap. Но если создавать новое мобильное приложение, такого взаимодействия уже не получится, и оно просто повторит ошибки старого.
Новое мобильное приложение нужно было создавать на новой архитектуре с использованием Json, Flutter. Но переписывать весь бэкенд с нуля — задача на несколько лет работы, поэтому мы пришли к тому, что нужно «научить» новое приложение общаться как со старым бэкендом, так и с новым — на Json.
Решение нашлось: мы написали прослойку middleware — промежуточный сервер, который бы связывал новое мобильное приложение и с Burlap, и с Json. 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 стал намного взрослее: стабильность, производительность и качество уже на высоком уровне.
Передача инхаус — переход проекта на новый уровень
Перед Surf стояла задача сделать MVP — минимально жизнеспособный продукт. Дальше Росбанк хотел забрать разработку инхаус, чтобы развивать приложение самостоятельно.
Процесс передачи проекта инхаус проходит в несколько этапов, описали их в статье в блоге.
Пока Surf работал над первой версией приложения, мобильный отдел Росбанка собирал свою команду Flutter-разработчиков, для которых Surf помогал провести технические собеседования.
Обучение инхаус команды и перенос продукта в проекте с Росбанком заняли примерно две недели. Сначала разработчики банка работали вместе с командой Surf. Команда Росбанка принимала участие в ревью, часть фич делали вместе. Показывали разработчикам, как работают код и простые сборки. Параллельно в банке настраивали CI/CD, чтобы с кодом было удобно работать.
После этих подготовительных этапов мы передали разработку новой команде Росбанка.
Итоги проекта
На этом для нас разработка мобильного приложения «Росбанк Бизнес» закончилась. Мы помогли банку наладить Flutter-разработку инхаус, и теперь он успешно развивает приложение самостоятельно.
23 апреля 2021 года приложение «Росбанк Бизнес» получило первое место среди мобильных приложений в категории «Банки, финансы и страхование» по версии Tagline Awards 2020-2021.
* Комментарии представителей Росбанка взяты из интервью для N + 1.
Если у вас появились вопросы по этому проекту или по разработке на Flutter в целом, задавайте их в комментариях, будем рады ответить. Если хотите узнать больше о конкретных проектах на Flutter — загляните в наш блог, ведь мы разрабатываем бизнес-приложения на этом фреймворке больше двух лет.
Чего?... Как это зависит от фс
Я думаю это уже журналисты немног переврали)
лол, ну ок. ждем цикла статей, про то как они разочаровались и побежали искать нативщиков.
нифига, флаттер - сила
Нативщики в любом случае будут нужны, ибо flutter - впервую очередь ui-framework, а не полноценная замена нативу.
Я сейчас в одиночку пилю приложение e-commerce направленности, на flutter, но пока только под ios. С нативом всё равно приходится работать, ибо sdk под flutter многих сторонних сервисов не сущесвуют в природе, да и биндинги для платформозависимого кода есть далеко не на всё.
Ща росбанк откушает говница с кроссплатформой в инхаусе и пойдет искать аутсорс нативщиков, чтобы переделать по-нормальному. Вообще не понимаю, почему банк экономит вообще на этом…
какого конкретно говнища?)
Вы имеете опыт в мобильной разработке?
Добрый день. Имею опыт в моб разработке. Хочу сказать что в том же NFL digital стафф делается на кроссплатформе RN. как вы выразились, гавница тоже приходится покушать, но в целом плюсы перевешивают и мигрировать обратно на нативку никто не планирует🏈🏈 :)
P. S. Я сам нативщик и за нативку))
Согласен. Есть проекты, которым кроссплатформа - серебряная пуля. Дешево и быстро. В топике фигурирует банк 🤔
да, тоже подумал об этом немного после своего коммента :) хотя блин, не вижу где можно споткнуться на клиентской стороне в банк-клиенте. кмк по требованиям отказоустойчивости их решение должно проходить, не может быть чтобы флаттер был так ужасен...если они грамотно обработали все ошибки на своем этом миддлваре, то возможно не все так уж страшно, и не хлебнут они лиха. По крайней мере у них нет зае*ной работы со сторонним видеоплеером и видеопотоками в стеке RN-android, вот там проблем с той же плавностью анимаций и плейбэком хватает, я полысел за два года натурально хаха
Press F
Ждем описания удобства и скорости работы от клиентов на старых устройствах (6s, 7, SE).
Интересно, какой процент таких устройств среди пользователей Росбанк Бизнес 🤔
Нормально написанное приложение на React Native работает на 6s отлично. Думаю Flutter в этом плане тоже поведет себя хорошо.
А вот недавно была статья о том как Wrike отказалась от этого
Росбанку это ещё предстоит, чтобы от чего-то отказать, на это нужно сначала перейти. Но аргументы местами звучат как лапша на ушах заказчика.
Ну не от этого Wrike отказались, не надо мешать все в кучу. Отказались они от Dart. Flutter у них нет и никогда не было.
Я про Dart и написал вообще-то.
Кроссплатформа для игр или когда хочется по-быстрому, то что надо было ещё вчера.
Эээ... Как это?
Я написал пять приложений на Flutter. Так что этот банк на шестом месте как минимум
Вроде пишут именно про банковское приложение, а не любое вообще )
Все забыли про приват который уже 2 года на флаттере
Интересно... Не смогли найти об этом информацию в открытом доступе.
что за приват?
Приватбанк в Украине
"все забыли" ))) никто и не знал вообще
че за банк? где это? Украина - это в Африке?
Сказочный..
Комментарий удален модератором
Отлично, закусили русскими младенцами и изнасиловали пенсионерок, все как у вас по телеку
Росбанку, нужно не новое приложение на Флатерре, а новые прорывные фичи.
Ой, забыл? что я в разделе \dev
ну разработали и разработали...
Анимация. Подтормаживала. В банковском приложении. Дожили...
Похоже, к платформочке Flutter пора присмотреться. Что-то её во всех медиа форсируют не по-детски 🤷🏼♂️
А может подскажете кто, можно ли на flutter сделать Гугл календарь, скопировать приложение, и если можно, то очень ли это сложно?) Ps я чайник, желающий заиметь свое первое приложение с помощью фрилансера за недорого :-)
Если рассматривать разработчиков как каменщиков, а дизайнеров как конструкторов-архитекторов, то каменщики молодцы. Но это не спасает — неудобно и уныло (судя по скриншотам)
Мы в Sfera.ru например пошли по пути гибридных приложений ещё в 2018.
Вопрос даже не в экономии а в консистентность клиентского опыта.
Главный плюс - нет варианта не сделать фичу для мобилки. Все что ты делаешь будет и на десктопе и на мобилке.
А это частая боль в банках. Тут у нас это доступно только в строй версии дбо, это только в десктопе.
и эти различия только растут с развитием продукта.
Комментарий удален модератором
Комментарий удален модератором
Комментарий удален модератором
Опять эти анонимные посты от непонятно кого.
Cordova пизже
Ну да ну да