Мобильное приложение для первого онлайн-банка в Азербайджане

Привет, я Алексей Чугуев – со-основатель компании по разработке flaton. Мы разработали мобильное приложение для первого онлайн-банка в Азербайджане – в статье затронул саму разработку, какие отзывы оно получило, а также почему мы выбрали Flutter вместо React Native.

Мобильное приложение для первого онлайн-банка в Азербайджане

Клиент

m10 - это мобильный цифровой кошелёк для оплаты товаров и услуг, а также для мгновенных переводов в Азербайджане без комиссий. Кошелёк был запущен в 2022 году.

Количество скачиваний приложения из магазинов уже превысило один миллион. В настоящий момент уже более 10 000 партнёров сотрудничают с m10. Это банки, платёжные системы, магазины и др.

Задача

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

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

Выбор стека разработки

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

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

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

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

По итогам данного выбора мы написали статью по сравнению React Native и Flutter. Она длинная, поэтому её удобнее почитать здесь.

Процесс работы

1. Проектирование

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

Над проектом работала команда из пяти Flutter разработчиков. Архитектура проекта и стейт-менеджер, который был выбран лидом команды, определили выбор основных библиотек, используемых в проекте. Среди них были BLoC, Freezed, Retrofit, DotEnv и Dio.

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

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

2. Разработка

Регистрация/Авторизация

После процесса стандартной регистрации по телефону пользователь должен заполнить персональные данные, такие как имя, фамилия, дата рождения и т.д. Далее пользователь создает PIN-код для входа в приложение и для подтверждения транзакций.

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

Экраны Авторизации/Регистрации
Экраны Авторизации/Регистрации

Главный экран

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

  • QR - оплата по коду;
  • Отправить - перевод по номеру телефона;
  • Счета - оплата ЖКХ, налогов и тд.
Главный экран
Главный экран

История транзакций и баланс

На данном экране видны все транзакции с точным временем, идентификатором, методом оплаты и т.д. Их можно отфильтровать по типу, дате или сумме, а также по ключевым словам.

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

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

Экран баланса и истории транзакций
Экран баланса и истории транзакций

Результаты

  • За три месяца наша команда помогла запустить первый мобильный банк в Азербайджане. После soft-launch клиент обратился к нам с просьбой помочь набрать команду flutter специалистов к ним в штат и передать экспертизу по приложению их будущей in-house команде. С нашей стороны был предоставлен тимлид мобильной разработки для проведения технических собеседований.
  • За 3 недели была подобрана in-house команда. Для передачи компетенций была создана подробная документация, включающая описание архитектуры, используемых библиотек, схемы интеграций и рекомендации по дальнейшему развитию.
  • На данный момент в Google Play/Appstore приложение m10 установили более 1 миллиона раз. Рейтинг приложения в обоих сторах составляет 4,8 из 5, основываясь на 130 тысячах оценок в Google и 1,5 тысячи отзывов в App Store.
6
1
1
4 комментария

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

Удачи Вам, Азербайджан классная страна!

Тестирование производилось штатными специалистами заказчика, от нас были только мобильные разработчики.

Почему не упомянули? Потому что, в целом, ничего необычного, если коротко: в начале проекта было ручное тестирование, но многие части в ходе разработки покрывались автотестами.