Разработка первого мобильного банка на Flutter: опыт Surf и Росбанка

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

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

Цель — разработать новое мобильное приложение «Росбанк для бизнеса»

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

Этапы разработки

Сместили фокус на потребности клиента

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

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

Доработали дизайн

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

К началу разработки приложения, у Росбанка уже был готов свой дизайн. Мы в Surf проверили его и помогли доработать: что-то в связи с техническими ограничениями фреймворка и платформ, форматом и структурой серверных данных, что-то — основываясь на фидбеке потенциальных пользователей.

Написали приложение на Flutter

У Росбанка изначально был запрос на кроссплатформенную разработку: делать с нуля два нативных приложения — под iOS и Android — было слишком долго и дорого. Помимо этого, существующее приложение развивалось как проект, а не как продукт. Нужно было менять подход и методологию.

У нас уже был опыт разработки мобильных банков, но «Росбанк бизнес» стал нашим первым банком на Flutter. Фреймворк успешно справился со своей задачей: помимо более короткого Time-to-market, приложения на Flutter отличаются еще и более «естественным» интерфейсом для пользователей по сравнению с другими кроссплатформенными приложениями. Ко всему прочему, содержать одну Flutter-команду инхаус гораздо выгоднее, чем две нативных.

Наладили работу со старым бэкендом

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

Surf придумали выход — создать «переводчик» с языков бэкендов на язык мобильного приложения. Так новое приложение научилось работать сразу и со старым, и с новым бэкендом в зависимости от потребностей, используя middleware сервер.

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

Авторизация в «Росбанк бизнес» — очень трудоемкое задание для пользователя. Перед нами возникла новая задача — бесшовно перенести пользователей на новое приложение, так, чтобы им не пришлось заново входить в свой аккаунт. Повышаем уровень сложности: переносить данные нужно было с двух нативных приложений, у которых авторизация и хранение данных устроены совершенно по-разному.

Реализовали мы это посредством установки нового приложения не как «нового», а как обновления старого. Таким образом, все данные автоматически переносятся в новую версию. Прочитать подробнее о технических нюансах переноса пользователей можно в нашей статье на Хабре.

А как же баги?

Flutter — молодая технология, на момент разработки приложения для Росбанка фреймворку был всего 1 год. Поэтому без багов, конечно, не обошлось — и тут хочется сказать спасибо команде Google за их оперативное исправление. Итак, какие баги мы встретили?

• Некорректно отображались межбуквенные интервалы на iOS. Мы оставили заявку об этом баге разработчикам Google, и проблему быстро пофиксили.
• Тормозила анимация при первом запуске. Мы нашли решение: выявили проблемные участки кода и заменили их на более производительные. Позже Google добавил инструменты для исправления этого бага в Flutter.
• Падал Dart VM. Наш Flutter-тимлид, Евгений Сатуров, сообщил об этой проблеме своему знакомому из Google — и ошибку исправили буквально через день, избавив от падения сервиса все коммьюнити.

Результат

Мы разработали мобильное приложение «Росбанк бизнес» — первый в России и второй в мире мобильный банк на Flutter, и передали разработку инхаус в Росбанк.

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