flutter
технологии
flutter lead
4х flutter middle
4х flutter middle
команда
ноябрь 2022 –декабрь 2022
срок
Содержание
Вводные данные
Клиент
m10 - это мобильный цифровой кошелёк для оплаты товаров и услуг, а также для мгновенных переводов в Азербайджане без комиссий. Кошелёк был запущен в 2022 году платёжной экосистемой PashaPay.
количество скачиваний приложения из магазинов уже превысило один миллион. В настоящий момент уже более 10 000 партнёров сотрудничают с M10, такие как банки, платёжные системы и магазины.
количество скачиваний приложения из магазинов уже превысило один миллион. В настоящий момент уже более 10 000 партнёров сотрудничают с M10, такие как банки, платёжные системы и магазины.
Задача
Клиент обратился к нам с просьбой разработать кросс-платформенное мобильное приложение онлайн-кошелька для пользователей из Азербайджана. Запрос был на команду команду из пяти flutter-разработчиков, которые могли бы c нуля спроектировать архитектуру приложения и запустить процесс разработки.
Приложение должно было выдерживать высокую нагрузку, так как ожидалось, что им будут пользоваться более миллиона пользователей. Приложение должно было включать в себя интеграции с системами терминалов и банком для ввода и вывода денег из системы.
Приложение должно было выдерживать высокую нагрузку, так как ожидалось, что им будут пользоваться более миллиона пользователей. Приложение должно было включать в себя интеграции с системами терминалов и банком для ввода и вывода денег из системы.
Выбор стека разработки
В процессе тендерного выбора подрядчика клиент рассматривал два варианта: использовать для разработки React Native или Flutter. Наша команда тщательно сравнила оба фреймворка, учитывая их ключевые особенности и возможности.
Чтобы помочь клиенту принять обоснованное решение, мы подготовили и провели детальное демо, в котором представили результаты нашего анализа.
Мы продемонстрировали, как каждый из фреймворков справляется с основными задачами проекта, показали примеры пользовательских интерфейсов и проанализировали производительность приложений на обоих платформах. В итоге клиент принял решение в нашу пользу и выбрал Flutter для разработки.
По итогам данного выбора мы написали статью по сравнению React Native и Flutter
Чтобы помочь клиенту принять обоснованное решение, мы подготовили и провели детальное демо, в котором представили результаты нашего анализа.
Мы продемонстрировали, как каждый из фреймворков справляется с основными задачами проекта, показали примеры пользовательских интерфейсов и проанализировали производительность приложений на обоих платформах. В итоге клиент принял решение в нашу пользу и выбрал Flutter для разработки.
По итогам данного выбора мы написали статью по сравнению React Native и Flutter
Процесс работы
1.Проектирование
1.Проектирование
Клиент пришёл к нам уже с готовым дизайном приложения и готовой серверной частью; с нашей стороны необходимо было разработать клиентскую часть приложения. Для этого был выбран фреймворк Flutter, так как он позволяет создавать кроссплатформенные приложения, что значительно сокращает время и затраты, необходимые для разработки приложения.
Над проектом работала команда из пяти Flutter разработчиков. Архитектура проекта и стейт-менеджер, который был выбран лидером нашей команды, определили выбор основных библиотек, используемых в проекте. Среди них были BLoC, Freezed, Retrofit, DotEnv и Dio.
Работа велась в соответствии с принципами методологии Scrum. Команда была поделена сначала на две, а затем на три небольшие группы. В каждую группу входили два бэкенд-разработчика, два мобильных разработчика и продукт-менеджер со стороны заказчика.
А конце каждого двухнедельного спринта все команды демонстрировали свои наработки заказчику. Каждая группа работала над отдельным функционалом.
Над проектом работала команда из пяти Flutter разработчиков. Архитектура проекта и стейт-менеджер, который был выбран лидером нашей команды, определили выбор основных библиотек, используемых в проекте. Среди них были BLoC, Freezed, Retrofit, DotEnv и Dio.
Работа велась в соответствии с принципами методологии Scrum. Команда была поделена сначала на две, а затем на три небольшие группы. В каждую группу входили два бэкенд-разработчика, два мобильных разработчика и продукт-менеджер со стороны заказчика.
А конце каждого двухнедельного спринта все команды демонстрировали свои наработки заказчику. Каждая группа работала над отдельным функционалом.
2.Разработка
2.Разработка
Регистрация / авторизация
В процессе регистрации пользователю необходимо ввести свой номер телефона, который будет использоваться в качестве идентификатора. Далее на указанный номер телефона отправляется SMS с кодом подтверждения. После подтверждения номера телефона пользователь должен заполнить персональные данные, такие как имя, фамилия, дата рождения и т.д.
После заполнения всех данных пользователю необходимо создать PIN-код для входа в приложение и подтверждения транзакций. Также возможна настройка дополнительных уровней безопасности, таких как использование биометрических данных (отпечаток пальца или распознавание лица).
Для авторизации в приложение необходимо ввести созданный в процессе регистрации PIN-код или, если настроена биометрическая аутентификация, пользователь может воспользоваться отпечатком пальца или распознаванием лица для входа в приложение.
После заполнения всех данных пользователю необходимо создать PIN-код для входа в приложение и подтверждения транзакций. Также возможна настройка дополнительных уровней безопасности, таких как использование биометрических данных (отпечаток пальца или распознавание лица).
Для авторизации в приложение необходимо ввести созданный в процессе регистрации PIN-код или, если настроена биометрическая аутентификация, пользователь может воспользоваться отпечатком пальца или распознаванием лица для входа в приложение.
Главный экран
На главном экране приложения, после авторизации, пользователь может переключаться между разделами “QR”, “Отправить”, “Счета”.
История транзакций и баланс
Каждая транзакция представлена отдельной строкой, содержащей информацию о переводе. Если перевод не удалось выполнить, тогда отдельной строкой отображается ошибка.
При нажатии на строку транзакции пользователь может получить более детальную информацию о ней, такую как точное время, уникальный идентификатор транзакции, использованный метод оплаты и т.д. Также для пользователей доступна возможность фильтрации транзакций по типу, дате или сумме, а также поиск по ключевым словам.
Пользователь может пополнить баланс с привязанной банковской карты или через терминалы MilliOn. После нажатия на данную опцию приложение предоставит информацию о ближайших терминалах и инструкциях по пополнению.
Также пользователь может снять наличные денежные средства с баланса через банкомат. После нажатия на данную опцию приложение предоставляет инструкции и генерирует код для снятия денег без карты.
Кроме того, с помощью приложения можно воспользоваться различными финансовыми услугами: оформить кредит или рассрочку, открыть накопительный счёт или депозит.
При нажатии на строку транзакции пользователь может получить более детальную информацию о ней, такую как точное время, уникальный идентификатор транзакции, использованный метод оплаты и т.д. Также для пользователей доступна возможность фильтрации транзакций по типу, дате или сумме, а также поиск по ключевым словам.
Пользователь может пополнить баланс с привязанной банковской карты или через терминалы MilliOn. После нажатия на данную опцию приложение предоставит информацию о ближайших терминалах и инструкциях по пополнению.
Также пользователь может снять наличные денежные средства с баланса через банкомат. После нажатия на данную опцию приложение предоставляет инструкции и генерирует код для снятия денег без карты.
Кроме того, с помощью приложения можно воспользоваться различными финансовыми услугами: оформить кредит или рассрочку, открыть накопительный счёт или депозит.
Сканирование и генерация QR
Для реализации функционала сканирования QR-кодов в приложении M10 была выбрана библиотека qr_code_scanner, которая является одной из наиболее популярных и надёжных библиотек для этой задачи в экосистеме Flutter.
Генерация QR-кодов для переводов внутри системы включала несколько этапов, начиная от проектирования формата данных, которые будут закодированы в QR-код, и заканчивая реализацией функции генерации QR-кодов и их отображения в приложении.
После успешного сканирования QR-кода осуществлялась передача данных на дальнейшую обработку, данные проверялись на корректность и соответствие ожидаемому формату.
Если данные были валидны, ползователеь перенаправлялся на страницу с формой перевода денег, где адресат и сумма были уже предварительно заполнены. Пользователю оставалось только нажать кнопку для подтверждения операции (транзакции), это включало в себя взаимодействие с серверной частью приложения для выполнения транзакции. После выполнения операции пользователю отображалось соответствующее сообщение об успешном переводе или возникшей ошибке.
Генерация QR-кодов для переводов внутри системы включала несколько этапов, начиная от проектирования формата данных, которые будут закодированы в QR-код, и заканчивая реализацией функции генерации QR-кодов и их отображения в приложении.
После успешного сканирования QR-кода осуществлялась передача данных на дальнейшую обработку, данные проверялись на корректность и соответствие ожидаемому формату.
Если данные были валидны, ползователеь перенаправлялся на страницу с формой перевода денег, где адресат и сумма были уже предварительно заполнены. Пользователю оставалось только нажать кнопку для подтверждения операции (транзакции), это включало в себя взаимодействие с серверной частью приложения для выполнения транзакции. После выполнения операции пользователю отображалось соответствующее сообщение об успешном переводе или возникшей ошибке.
Результаты
За три месяца мы запустили первый мобильный банк в Азербайджане. После soft launch клиент обратился к нам с просьбой помочь набрать команду flutter специалистов к ним в штат и передать экспертизу по приложению их будущей inhouse команде. С нашей стороны был предоставлен тимлид мобильной разработки для проведения технических собеседований.
Для облегчения передачи проекта in-house команде была создана подробная документация, включающая описание архитектуры, используемых библиотек, схемы интеграций и рекомендации по дальнейшему развитию.
В течение первых нескольких месяцев после завершения проекта была предоставлена техническая поддержка, что позволило оперативно решать возникающие вопросы и проблемы.
Постоянное взаимодействие с клиентом и новой командой разработчиков обеспечило плавный переход и непрерывность работы над проектом.
На данный момент в Google Play приложение m10 установили более 1 миллиона раз. Рейтинг приложения в обоих сторах составляет 4,9 из 5, основываясь на 90 тысячах оценок в Google и 936 отзывов в App Store.
Для облегчения передачи проекта in-house команде была создана подробная документация, включающая описание архитектуры, используемых библиотек, схемы интеграций и рекомендации по дальнейшему развитию.
В течение первых нескольких месяцев после завершения проекта была предоставлена техническая поддержка, что позволило оперативно решать возникающие вопросы и проблемы.
Постоянное взаимодействие с клиентом и новой командой разработчиков обеспечило плавный переход и непрерывность работы над проектом.
На данный момент в Google Play приложение m10 установили более 1 миллиона раз. Рейтинг приложения в обоих сторах составляет 4,9 из 5, основываясь на 90 тысячах оценок в Google и 936 отзывов в App Store.
разработка
мобильного
приложения
мобильного
приложения
