Как сделать кроссплатформенное мобильное приложение для программы лояльности

Hola, Amigos!

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

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

Разработка приложения на Flutter — это разработка с нуля, что подразумевает большую подготовительную работу. Наш заказчик, компания Vaillant Group, пришел к нам именно с такой задачей, поэтому мы предложили Flutter как самое оптимальное решение.

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

Это приложение для сервисных специалистов, чтобы помочь им облегчить процесс регистрации работ и привлечь в программу лояльности PRO.Expert. В ней можно начислять, копить и выводить баллы на банковский счет или же потратить их внутри приложения в разделе «витрина подарков».

Почему выбрали Flutter?

Мы решили использовать кроссплатформенную разработку и технологию Flutter — она позволяет создавать приложение одновременно на двух платформах: Android и iOS.

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

Тимур Моисеев, Teamlead Amiga

В разработке на Flutter есть и другие преимущества:

  • Оптимизация бюджета. Создание приложения на Flutter стоит на 40% дешевле, чем разработка двух нативных. А с пользовательской стороны нет разницы.
  • Одинаковая бизнес-логика на всех платформах. Вся инфраструктура приложения выглядит нативно за счет особенностей фреймворка Flutter.
  • Ускоренный релизный цикл. Приложение на Flutter запускается быстрее, чем нативное, за счет работы с одной командой и на одной платформе. Значит и прибыль компании оно принесет быстрее.
  • На Flutter можно реализовать любой дизайн: от каталогов интернет-магазина до сложных анимаций.

Какие задачи проекта?

Мы подключили аналитика, разрабатывали дизайн-системы, проектировали back-end часть, занимались проработкой коммуникации с пользователями и интегрировали программу лояльности PRO.Expert.

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

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

Как выглядит приложение?

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

Регистрация специалиста

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

Личный кабинет

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

Регистрация работ

Раньше монтажники вводили адрес работ «от руки». Это занимало в среднем 5 минут, можно было допустить ошибки. Мы интегрировали сервис Da.Data – сервис справочников, и теперь это занимает до 30 секунд. Но из-за того, что долгое время сервисные специалисты вводили неверные адреса, нам нужно было сохранить старую базу и сметчить ее с новой. Как проблема решилась: мы придумали нелинейную систему, которая проверяет условия корректного ввода данных. Часть решения перенесли на back, часть на front.

Автоматическая регистрация работ

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

Офлайн-регистрация

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

Подведем итоги

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

Приложение можно скачать в App Store и Google Play, а с сентября 2022 и в Huawei AppGallery.

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

Софья Винникова, системный аналитик Amiga

У нас большие планы на развитие приложения PRO.Expert. Система лояльности сейчас работает в энергосберегающем режиме, но в скором времени возобновится. Сейчас мы работаем над улучшением каталога продукции в приложении, разрабатываем дополнительный функционал по геопозиционированию. Уверен, что дальнейшая работа с командой Amiga будет такой же эффективной и плодотворной!

Артем Растунов, директор по маркетингу Vaillant

Мы очень ценим нашу команду и хотим отметить их в статье

Сергей Лепшей – PM

Софья Винникова – Системный аналитик

Кирилл Калюжный – Flutter dev

Тимур Моисеев – Flutter dev

Игорь Веденеев – Mobile TeamLead

Леонид Никулин – Арт-директор

0
55 комментариев
Написать комментарий...
Уинстон Смит
Одинаковая бизнес-логика на всех платформах.

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

Ответить
Развернуть ветку
Дмитрий Перепёлкин

Это почему? 😁
По статье вроде всё адекватно. Вне статьи, современные телефоны позволяют делать расчёты на стороне клиента и не насиловать REST. Что-то уходит на сервер, что-то остаётся на мобильном, это более чем адекватно.

Ответить
Развернуть ветку
Уинстон Смит

Сильное заявление. Ходят слухи, что клиенту не доверяют "расчеты" не из-за ресурсов, а из-за безопасности. Ты случайно не из этой командочки?

Ответить
Развернуть ветку
Тринадцать Двенадцатый

а вот тут поподробнее, где может быть дыра, если мы что-то обсчитывать внутри клиента? в песочницу кто-то ворвется, например, в ios?

Ответить
Развернуть ветку
Уинстон Смит

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

Ты же не будешь на клиенте Яндекс такси рассчитывать стоимость поездки и потом отправлять сумму на сервер. Хотя мощности мобилки вполне хватит, чтобы пройтись по графу карты, рассчитать маршрут и цену.

Также, важно понимать, что является клиент-серверной архитектурой. Например, в draw.io - весь бизнес слой находится на фронтенде, а ремот сервисы(авторизация, сохранение в облако, и т.п) - это часть инфраструктурного слоя. Это не клиент-серверное приложение.

Ответить
Развернуть ветку
Тринадцать Двенадцатый

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

Ответить
Развернуть ветку
Уинстон Смит

Зависит от приложения, "куча вычислений" - слишком абстрактное понятие.

Excel тоже умеет синхронизировать данные с Office 365, при этом все вычисления происходят на клиенте. Excel - это клиент-серверный подход? - нет. А вот Excel Online считает все на сервере.

Я сомневаюсь, что в твоём приложение есть какие-то расчеты, которые "непозволительная роскошь" для сервера.

Ответить
Развернуть ветку
Тринадцать Двенадцатый

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

Ответить
Развернуть ветку
Дмитрий Перепёлкин

Здесь речь не о Яндекс.Go, оффлайн регистрация вполне себе бизнес логика, которая затем проходит верификацию. Есть что по статье сказать?

Ответить
Развернуть ветку
Уинстон Смит

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

Ответить
Развернуть ветку
Дмитрий Перепёлкин

Оффлайн регистрация это бизнес логика?
А что случится там с безопасностью, если она после отправляется на сервер?

Поехали дальше. Если программа рассчитывает встречи в календаре, какие тут проблемы с безопасностью? Ну взломает пользователь, ну насрёт сам себе.

Не надо выводить всю логику в сервер, особенно когда это никак не влияет на безопасность, сервер сдохнет.

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

Ответить
Развернуть ветку
Уинстон Смит

Чтобы дискуссировать со мной, сначала иди почитай, что такое клиент-серверная архитектура.

Вы свежерег и возможно конкурент желающий затопить ребят.

Конкуренция в IT есть только между неспециалистами.

Ответить
Развернуть ветку
Дмитрий Перепёлкин

Ясно

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