(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(19355434, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(19355434, 'hit', window.location.href);

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

Разработать полноценное мобильное приложение, особенно для банка, — это долго. На создание только одного MVP уйдёт порядка 9 месяцев. Вторая сложность — найти собственную команду разработчиков — это дорого, из-за высокого спроса на ИТ-специалистов, особенно с опытом в финансовой сфере. В этой статье расскажем, как создали финтех-приложение для резидента Y Combinator.

Вы в блоге Surf. Мы более 12 лет работаем с мобильными технологиями. Переиспользуем успешный опыт из разных отраслей и помогаем крупным игрокам войти в топ. Среди наших клиентов лидеры своей сферы — Росбанк, Рив Гош, Бетховен и KFC.

💼Узнайте больше о том, как создать продукт под ключ за 6 месяцев.

📱 В канале в Telegram делимся своим продуктовым видением.

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

Но давайте по порядку: разберёмся, какой проект нас на это вдохновил и какие хитрости мы применили, чтобы ускорить разработку на 50%. Кстати, после запуска приложения проект привлёк дополнительные инвестиции в 5 млн долларов.

О чём в этой статье:

Что за проект?

К нам обратился стартап из Y Combinator из одной из стран Восточной Европы. В стране долгое время были запрещены цифровые банки, поэтому она занимает третье место в мире по численности населения без банковских счетов — это около 100 миллионов взрослых.

Но законы поменялись, и рынку стали нужны новые решения. В стране начали появляться банковские сервисы и приложения. И мы разработали один из первых. Это — не просто MVP, а полноценный финансовый инструмент со всеми необходимыми функциями, которые мы уже привыкли видеть в банковских приложениях:

  • регистрация и авторизация с помощью удалённой верификации;
  • профиль владельца;
  • заказ пластиковой карты;
  • информация по операциям
  • межбанковские переводы;
  • переводы внутри банка по номеру телефона;
  • установка лимитов по картам;
  • оплата счетов;
  • чат с техподдержкой;
  • push-уведомления.

Сейчас у приложения уже более трёх тысяч пользователей.

Особенности проекта

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

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

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

Что получилось

Мы выпустили в релиз современное банковское приложение с прицелом на миллениалов. Зарегистрироваться в нём можно за пару кликов, а после проверки документов — получить виртуальную карту и в тот же день оплатить ей покупки в магазине.

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

Удобная home-страница со списком транзакций. Тут отображается вся основная информация по аккаунту, баланс и список транзакций.

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

Информации о счёте. Раздел содержит детализированную информацию о карте и реквизиты счета.

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

Межбанковские и внутрибанковские переводы реализовали при помощи сервиса I2C, для интеграции его с бэкендом разработали API. Также сделали переводы между картами и счетами внутри банка по номеру телефона и p2p переводы, которые сейчас активно применяются для переводов криптовалюты между пользователями напрямую.

Настройка карт — сделали возможность выставлять лимиты по карте.

Оплата счетов — можно оплатить коммунальные услуги, подписки и счета в приложении.

Почему мы реализовали проект быстро?

Сократили срок разработки, использовав кроссплатформу Flutter

Представители банка изначально хотели делать приложение на Flutter. Его они выбрали даже не из соображений экономии, а потому что с Flutter сокращается time to market — вывод приложения на рынок. В среднем, благодаря кроссплатформе, довести приложение до пользователей можно в два раза быстрее нативных приложений.

Именно на этом проекте мы впервые попробовали новые версии Flutter и использовали для проекта библиотеку Redux — систему управления состоянием приложения. Она применяется для загрузки и хранения данных.

Прочитать подробнее о свежей версии Flutter 3.0 можно в нашем блоге на vc.ru

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

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

Прочитать подробнее о библиотеке Elementary можно в нашем блоге

С разработкой на Flutter можно существенно сократить сроки и стоимость разработки, примерно до 40%, благодаря использованию единой кодовой базы для iOS и Android и одной команде разработчиков.

Что уж говорить о создании MVP — на Flutter его написать быстрее, а чем быстрее оно создано, тем быстрее можно протестировать востребованность продукта. Это киллер-фича для стартапов.

Часть фич реализовали при помощи SDK

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

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

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

IDWise — удобная система для удалённого онбординга в банковском приложении: пользователю не нужно идти в банк, достаточно сфотографировать себя и документы, а затем отправить это всё на проверку. Затем IDWise передаёт данные в систему NADRA — аналог Госуслуг, которая и верифицирует личность пользователя.

Zendesk — отвечает за онлайн-чат. Выбрали его, так как это не просто чат, а сервис с услугой поддержки.

One signal: сервис, который позволил нам настроить push-уведомления. Сначала мы хотели сделать уведомления на Airship, но когда выяснили, что он не позволяет создать центр нотификаций, выбрали более оптимальную технологию.

Быстро написали бэкенд на Kotlin

Бэкенд мы писали вместе с разработчиками со стороны клиента. У нас не было разделения на команду заказчика и исполнителя. Мы работали единой сплочённой командой по каждому из этапов. Middleware (промежуточное программное обеспечение) обеспечивало интеграцию с платформой для банковского процессинга — I2C.

Применили подход экстремальной разработки

С помощью методологии Scrum можно быстро и эффективно разработать совершенно новый продукт, аналогов которому нет на рынке. Важно помнить, что это командный подход и есть специфические роли внутри команды. У всех членов команды, и со стороны клиента, и со стороны Surf, был очень высокий уровень вовлечённости. Каждый должен был брать ответственность за решения и проявлять проактивность.

Мы очень оперативно получали обратную связь от заказчика со стороны бизнеса, как правило, в личном общении. На встречах часто сразу воплощали продуктовые решения, иногда разработчики даже писали код онлайн. QA вручную оперативно тестировали все решения. После каждого спринта мы отдавали клиенту сборки на ревью и очень быстро исправляли обнаруженные баги.

Ускорили работу с багами за счет автотестов

Автотесты — мы покрыли 100% кода приложения автотестами. Это позволяет быстро выявлять и править баги. У этого проекта самое большое тестовое покрытие среди всех Flutter-проектов, которые мы реализовали.

Читайте подробнее о процессе создания этого приложения в нашем блоге

Приложение на Flutter + бэкенд на Kotlin = продукт под ключ за 6 месяцев

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

Чтобы разработать готовый продукт так быстро, мы чётко выделили основные этапы проекта:

  • проектирование — создадим гибкий роадмап продукта на несколько релизов вперёд;
  • дизайн — реализуем UI/UX-дизайн для приложения на основе UX-аналитики и карты пути клиента (CJM);
  • разработка — напишем бэкенд на Kotlin и фронтенд на Dart (язык программирования, который использует Flutter);
  • сборка — каждые две недели показываем сборку приложения на согласование;
  • тестирование — проверим приложение на каждой итерации, напишем автотесты, которые сэкономят 80% времени;
  • релиз — выпустим приложение в App Store, Google Play или РуСтор и будем его поддерживать.

В чём плюсы этого подхода для клиента?

  • Получает готовую слаженную команду и организованный рабочий процесс. Специалисты уровня Middle+ реализуют проект любого уровня сложности и из любой сферы бизнеса;
  • Управление проектом прозрачно и понятно. Проектный менеджер с нашей стороны следит, чтобы работа не выходила за рамки бюджета, сроков и содержания. Клиент видит и получает информацию обо всём, что происходит на проекте.
  • Все коммуникации прозрачны. Минимизируем потери в коммуникации и за счёт того, что над фронтендом и бэком работает сплочённая команда. Это хорошо подтвердил кейс с необанком — там мы работали как одна команда, вместе писали бэк с разработчиками со стороны клиента. Именно это позволило добиться такого впечатляющего результата за короткий срок.
  • Просто забрать проект для развития и поддержки инхаус. Мы работаем по единым стандартам и всегда пишем подробную техническую документацию — доводим до такого вида, чтобы её было легко поддерживать инхаус. Для каждого проекта мы подготовили и передали подробную документацию с описанием текущих фичей. Описали артефакты, в том числе бэклог, и дизайн по тем функциональностям, которые только планировались в будущем. QA-отдел передал тесты, документацию и базу знаний. Это позволяет быстро погрузить собственную команду разработки в проект и сделать развитие продукта более последовательным и системным.

Читайте подробнее о нашей новой услуге — создание мобильного приложения под ключ за 6 месяцев

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

Мы в Surf более 12 лет работаем с мобильными технологиями и больше 3,5 лет разрабатываем приложения на Flutter. За это время мы поняли, как можно оптимизировать разработку без вреда для качества. Реализовав очередное банковское приложение, которым сегодня пользуются более 3000 клиентов банка, мы убедились, что создать работающий качественный продукт за полгода — вполне реально и этот опыт можно с успехом применить и на российском рынке.

Если хотите создать приложение на Flutter за 6 месяцев, пишите нам на [email protected].

Читайте о нашем опыте разработки на Flutter.

Узнайте больше о том, как создать мобильное приложение за 6 месяцев.

Рекомендуем почитать:

Как мы полностью изменили своё мнение о Flutter

Театр начинается с вешалки, а успех мобильного приложения — с UX-аналитики

Почему вам по-прежнему стоит выбрать Flutter для своего e-commerce приложения

0
13 комментариев
Написать комментарий...
Victor Pomortseff

А скажите, неужели ваше приложение напрямую обращается к банковской БД и само выполняет все-все-все операции?
Ну вот скажем завести нового клиента. Это не просто вбить данные в карточку. Там еще куча проверок проводится по ходу пьесы - валидность ДУЛ, срок действия ДУЛ, наличие ДУЛ в списке недействительных, проверка на совпадения по ФИО, ДР, ДУЛ, ИНН по спискам ПЭ/ППТ/ОМУ, по санкционным спискам... Определения уровня риска клиента (страновые риски, банкроты и т.п.).
Все это делает ваше приложение само? Или все-таки ваш "бэкенд" просто предоставляет вам интерфейсы к существующим на уровне ядра АБС запросам, а вы только дергаете их?

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

Здравствуйте, в кейсе речь идёт о зарубежном банке, так что привычные нам ИНН и ДУЛ тут не фигурируют. Но, безусловно, проверки проводятся, как и в любом другом банке. Архитектуру показывать мы не имеем права по условиям NDA. Можем лишь дополнить, что как и во всех банковских приложениях клиент обращается к части бэка, которая предоставляет данные для клиента. В свою очередь этот слой взаимодействует с ядром. Если интересует процесс, как именно это происходит с точки зрения бэка, сформулируйте, пожалуйста, свой вопрос точнее — постараемся ответить :)

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

Да я знаю как это делается :-) Т.к. сам занимаюсь разработкой всего этого на стороне ядра АБС. Даже немножко "архитектор направления" по линии комплаенса.
И, кстати, ДУЛ, ИНН (CRF) есть и за рубежом. И комплаенс проверки там тоже есть.
Просто забавно читать как "мы разработали банковское приложение", хотя фактически разрабатывается оболочка, отправляющая запросы и получающая ответы. А вся логика происходит даже не на том "бэкенде", который все привыкли видеть, а глубже (поскольку часто банковский сервер изолирован от внешнего мира и общение с ним возможно только через очередь или какую-нибудь шину, но никак не напрямую).
Фактически, как сделано у нас - для мобильного приложения и инет банка создается набор REST API. Которые в свою очередь "дергают" веб-сервисы, а те же через ESB шину дергают соотв. сервисмодуль на стороне ядра.
И когда мобильные разработчики говорят что "запилили классную фичу", это значит что они пришли к нам и сказали что им нужно еще один вебсервис (+ сервисмодуль на нашей стороне) под новый запрос.

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

Мы честно указали в статье, что Backend по большей части в этом проекте — Middlware и за весь процессинг и проверки отвечают сторонние системы (с которыми шла интеграция). Познакомиться с другими нашими банковскими проектами можете в наших кейсах: https://surf.ru/cases/banks

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

Тогда не совсем понятно в чем именно сложность? Да еще так, что "полгода это очень быстро"?
Я, конечно, далек от этой темы, но мне казалось что сложность разработки больше в эффективной реализации хитровычурной бизнеслогики и интеграции ее в уже существующую систему так, чтобы не порушить уже работающее.
А нарисовать красивый интерфейс, дергающий готовые API - это работа больше для UI/UX дизайнеров (там свои сложности и законы, конечно). Но полгода это, наверное, все-таки ничем не выдающийся результат.

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

Добрый день.

Подскажите почему выбрали именно Flutter, а не React Native? Чем он лучше?

Проблемы с анимацией на iOS возникали? Если честно судя по количеству issues на гитхабе, Flutter казался сырым и уступающим React Native. Я уж молчу о талантах которые легче привлечь на RN.

Буду рад услышать ваше мнение

Спасибо

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

Добрый! Мы работаем с Flutter уже почти 3,5 года (с самого старта этой технологии), мы не хотели, чтобы продукт к релизу был сырым и решили выбрать проверенную технологию, которая нам досконально понятна. Проблемы с анимацией на iOS возникали, и были успешно решены. Подробнее можете прочитать в кейсе The Hole: https://surf.ru/cases/thehole/ — там было много работы с анимацией и видео. Ещё одним из факторов в пользу Flutter стали упомянутые выше слабые устройства в Пакистане — была вероятность, что они могли просто не потянуть сложный UI на Реакте. О нашем сравнении Flutter с React Native можете прочитать в статье: https://surf.ru/flutter-vs-react-native-chto-vybrat-dlya-vashego-mobilnogo-prilozheniya/

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

Если на Flutter уже банковские приложения делают, то значит он стал мейнстримом

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

Его популярность растёт, с этим сложно спорить!

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

А самое дешевое и простое это делать webview?
Создать responsive сайт на cms или php.
И его уже завернуть в webview или pwa с публикацией в стор.
Так получается?

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

С точки зрения "нужно приложение в сторе, а есть только сайт" — да, можно завернуть сайт в WebView и опубликовать как PWA. Но в нашем случае у клиента сайта не было. Отличительная черта устройств в Пакистане — несовременность и низкая производительность. Поэтому без приложения никак.
На CMS и PHP банки не рискуют создавать свои продукты, да и Flutter действительно прост, чуть ли не проще, чем тот же PHP для начала, если хочется сделать отзывчивый сайт.

Ответить
Развернуть ветку
Андрей Куприёв

Подскажите, что можно почитать про разработку для банков? Или какую литературу посоветуете в этой тематике. Интересно как все устроено.

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

Здравствуйте, Андрей! В целом, "разработка банковского приложения" ничем не отличается от разработки любого другого, за исключением очевидного акцента на безопасности. Скорее всего, в процессе придётся разобраться, что такое SSL Pinning, вот статья от Kaspersky и видео от Тинькофф
https://www.kaspersky.ru/resource-center/definitions/what-is-a-ssl-certificate
https://www.youtube.com/watch?v=HrPXe1ct0ZM. Так же рано или поздно может встретиться такая аббревиатура, как OWASP, что-то наподобие чек-листа для защиты фронтенд приложений.
Основной сайт https://owasp.org/ и документ "Топ-10 требований" на русском https://owasp.org/www-pdf-archive/Owasp-top-10-proactive-controls-2018-russian.pdf
.
В своём блоге мы тоже довольно подробно рассказываем о разработке мобильных приложений для банков: https://surf.ru/cases/banks. Надеемся, будет полезно :)

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