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

1. Вводная задача от заказчика, проблематика, цели

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

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

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

По итогам данного выбора мы написали статью по сравнению React Native и Flutter.

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

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

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

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

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

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

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

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

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

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

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

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

На главном экране приложения, после авторизации, пользователь может переключаться между разделами “QR”, “Отправить”, “Счета”.

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

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

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

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

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

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

Сканирование и генерация QR

Для реализации функционала сканирования QR-кодов в приложении M10 была выбрана библиотека qr_code_scanner, которая является одной из наиболее популярных и надёжных библиотек для этой задачи в экосистеме Flutter.

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

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

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

Статья про сравнение Flutter и React native на реальном примере

3. Результаты сотрудничества

За три месяца мы запустили первый мобильный банк в Азербайджане.

Для облегчения передачи проекта in-house команде была создана подробная документация, включающая описание архитектуры, используемых библиотек, схемы интеграций и рекомендации по дальнейшему развитию.

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

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

На данный момент в Google Play приложение m10 установили более 1 миллиона раз. Рейтинг приложения в обоих сторах составляет 4,9 из 5, основываясь на 90 тысячах оценок в Google и 936 отзывов в App Store.