FriFlex

Мобильное приложение с программой лояльности, сканером продуктов, доставкой. Кейс продуктового ритейлера «Дикси»

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

2020 год изменил ситуацию в онлайн-торговле: во время самоизоляции 67% российских интернет-пользователей совершали покупки онлайн, а каждый четвёртый (26%) заказывал доставку продуктов на дом. 13% россиян начали пользоваться услугами доставки продуктов питания.

Чаще покупатели делали заказ прямо с телефона. Рост спроса на покупки через интернет повлёк повышение активности ритейлеров в развитии своих цифровых продуктов.

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

«Магазин в кармане»: задачи и сроки

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

Вадим Макаренко

директор по маркетингу ГК «Дикси»

Для решения этой задачи было необходимо реализовать в мобильном приложении целый ряд функций:

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

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

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

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

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

Разработать и запустить первую версию нужно было в сжатые сроки — за 3 месяца. Эту задачу решила команда FriFlex, у которой уже был опыт во взаимодействии с компанией и разработке высоконагруженных проектов.

Предложение FriFlex: кроссплатформенная разработка на Flutter

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

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

Мы работаем с Flutter с конца 2018 года – сначала использовали фреймворк на своих внутренних проектах, потом на заказных. Сейчас в нашей Flutter-команде 7 человек. Накопив большой опыт использования фреймворка на проектах из разных сфер, в сентябре 2020 года мы запустили онлайн-курс по программированию на Flutter совместно с образовательной онлайн-платформой Otus.

Петр Чернышев
CEO FriFlex

Из очевидных плюсов Flutter для бизнеса выделим следующие:

  • прямая поддержка (maintain) от Google (Alphabet);
  • OpenSource с лицензией BSD 3-Clause;

  • большое сообщество разработчиков, которое активно растёт;
  • стабильность технологии — несмотря на то, что Flutter появился только в 2018 году, технология работает стабильно, крупные международные компании из разных сфер уже используют Flutter (Alibaba Group, Tencent, Ebay, Яндекс.Такси и другие);
  • высокая скорость разработки — по нашему опыту, фреймворк позволяет оптимизировать срок разработки на значение до 40%;
  • эффективная работа в команде;
  • взаимозаменяемость разработчиков;
  • множество готовых библиотек UI и общего назначения, возможность создать свою библиотеку компонент;
  • фреймворк снимает необходимость синхронизации фич на Android и iOS в тех случаях, когда разработка одной платформы идёт быстрей;
  • богатый инструментарий — возможность создавать интересный UI, просто и быстро делать анимации и многое другое;
  • простой доступ к передовым функциям платформы и другие.

Кроме разработки приложения, нужно было наладить его взаимодействие со всеми внутренними и внешними системами «Дикси». Чтобы интегрировать мобильное приложение в уже существующую систему заказчика, FriFlex предложил использовать отказоустойчивую серверную инфраструктуру. Разработчики и сотрудники ритейлера отслеживали состояние системы по разным метрикам, добавляли новые мониторинги и улучшали текущие, получая данные в различных срезах.

Командная работа и этапы решения задачи

Приложение разрабатывала команда из десяти человек. В работе использовались agile-методологии – Scrum и Kanban. Проект реализовывали поэтапно и работали совместно с разными отделами «Дикси»:

  • Сначала вместе с ИТ-архитекторами «Дикси» выбрали архитектуру и технологии, которые будут использоваться. FriFlex предложили верхнеуровневую схему взаимодействия систем, потоки данных, обосновали фреймворк и технологии для мобильных приложений и связующего программного обеспечения.
  • В ходе совместной работы с продуктовой командой в Miro и Figma создали майнд-мэп и согласовали дизайн-прототипы.
  • Доработали необходимые элементы дизайна.
  • Далее итерационно запускали финальный дизайн по экранам. Дизайн и прототипы готовили в Figma.
  • Итерационная бэкенд-разработка шла исходя из согласованного бэклога, который контролировали в Notion и Trello.
  • Мобильная разработка на Flutter.
  • Тестирование: ручное, тест-кейсы и автотесты.

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

Высокая нагрузка и сложности интеграций

Главная сложность в разработке проекта была связана с разнообразным ИТ-ландшафтом «Дикси». Нужно было интегрировать большое количество внутренних систем на разных языках, фреймворках и протоколах. Возникали и трудности технического характера.

Например, в октябре несколько дней была аномально высокая нагрузка на приложение в пиковые часы. Это было связано с маркетинговыми акциями и проблемами сети: долгие запросы и, как следствие, долгие ответы внешних сервисов. Чтобы быстро решить проблему, мы увеличили оперативную память на серверах приложений и стали разбираться, что произошло. Выяснив причину, дополнили наши мониторинги и поставили задачу на кеширование долгих запросов, которые не кешировались. А также договорились с партнёром по лояльности реализовать более быстрый ответ на запросы.

Никита Спирьянов

руководитель направления Flutter-разработки в FriFlex

Запуск приложения и планы по развитию

Первая версия обновлённого мобильного приложения на двух платформах — Android и iOS — появилась в мобильных магазинах в оговорённый срок — через 3 месяца с момента старта работ.

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

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

Николай Соловей
руководитель проектов в FriFlex

Результаты использования для компании

Чтобы оценить эффективность мобильного приложения, «Дикси» анализировали:

  • количество скачиваний и удалений приложения;
  • количество зарегистрированных пользователей в программе лояльности;
  • скорость онлайн-заказа и количество пользователей онлайн-доставки;
  • количество активных пользователей приложения в течение суток (DAU) и в течение одного месяца (MAU);
  • показатель LTV (прибыль, которую приносит клиент за всё время работы).

Ранее онлайн-доставка продуктов была доступна только на сайте «Дикси». После появления доставки в мобильном приложении, спрос на онлайн-заказ продуктов увеличился в два раза. Объём онлайн-продаж продолжает расти каждую неделю.

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

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

Вадим Макаренко
директор по маркетингу ГК «Дикси»

Результаты для конечных потребителей

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

  • актуальной информации о наличии товаров и ценах в конкретном магазине;
  • возможности поиска ближайшего магазина «Дикси» и информации о графике работы;
  • возможности получать дополнительные скидки и привилегии;
  • онлайн-доставки.

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

Нативная или кроссплатформенная разработка: что говорят исследования и мнения экспертов

Компаниям, которые хотят разработать или улучшить своё мобильное приложение, чаще всего приходится задумываться сразу о двух платформах. Android и iOS — две основные платформы, которым отдают предпочтение пользователи по всему миру, Россия не исключение. 71% российских пользователей выбирает Android, iOS — почти 28%. Это значит, что если разработать приложение только для одной системы, то потеряется значительная часть аудитории.

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

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

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

Плюсы Flutter: hot reload, компиляция в нативный код, производительность. На Flutter гораздо проще, чем нативно, делать UI, особенно сильно нестандартный.

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

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

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

Нативных разработчиков довольно легко пересадить на Flutter, при этом не надо держать две полноценные команды. Из сложностей: в основном пока что с автоматизацией UI-тестирования беда, встроенных инструментов далеко не всегда хватает, не все CI/CD-платформы получается бесшовно интегрировать.

Кирилл Бубочкин
Head of Application development at Mews

Flutter позволяет создавать мощные приложения с высокой производительностью и сложной графикой. В основе Flutter лежит язык программирования DART, который базируется на Java. Flutter позволяет разрабатывать приложения под все платформы и использовать общую кодовую базу. Что важно — отклик приложений, написанных на Flutter, такой же, как у нативного приложения, написанного специально для iOS или Android.

Кроме того, если компания собирается улучшить нативное приложение, написанное для Android или iOS, то это можно сделать помощью Flutter. Например, Groupon с успехом использовал Flutter для разработки модулей поверх существующего приложения.

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

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

На Flutter мы разрабатывали «Яндекс.Про» (бывший таксометр), «Яндекс.Драйв». Сейчас экспериментирует «Яндекс.Лавка».

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

Геннадий Евстратов

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

Flutter используется разработчиками по всему миру. Приложения на Flutter запустили Alibaba Group, Tencent, Ebay, Groupon, The New York Times, «Яндекс.Такси». А благодаря сокращению времени разработки кода, увеличению скорости вывода продукта на рынок, производительности, близкой к нативной, и другим преимуществам, Flutter будет развиваться и доминировать на рынке в ближайшем десятилетии.

{ "author_name": "FriFlex", "author_type": "editor", "tags": [], "comments": 42, "likes": 29, "favorites": 47, "is_advertisement": false, "subsite_label": "friflex", "id": 186068, "is_wide": true, "is_ugc": false, "date": "Fri, 11 Dec 2020 14:04:23 +0300", "is_special": false }
0
42 комментария
Популярные
По порядку
Написать комментарий...
2

Пользуюсь Дикси на iOS с первой версии и наблюдаю за прогрессом. За такой короткий срок сделать полнофункциональное приложение с доставкой не всегда под силу даже крупным фудтех компаниям, у которых на это выделены целые этажи разработки, а тут всего 10 человек. Ребята большие молодцы! Особенно круто, что получилось пройти через весь процесс согласования и правок от разных департаментов и сделать действительно удобное приложение)

Ответить

Уважаемый хичхакер

Ilya
2

всего 10 человек

Какого же тогда мнения о себе люди, которые в одиночку тащат кроссплатформы на каком-нибудь флаттере, да ещё и full-stack? 🤔

Ответить
0

Imposter Syndrome развивается от такого.

Ответить
2

Вы очень большие молодцы :)

Ответить
1

Екатерина, мы все молодцы! Спасибо тебе за огромный вклад в проект 🚀

Ответить
2

Отличная работа! 😉

Ответить
1

Ребята, спасибо! И спасибо за помощь в проработке продуктовых кейсов! 🚀

Ответить
0

Хэхэй, у нас был отличный старт, ребята)

Ответить
2

Отличная работа и отличная статья! Вы крутые!

Ответить
1

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

Ответить
1

Дмитрий, спасибо! По делу, согласны 🐼
Сейчас полнотекстовый поиск (elastic), стоит развить его, сделать с поддержкой транслита и синонимов👍

Ответить
1

Классно! Отличная работа!

Ответить
1

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

Ответить
1

До юзер-френдли приложению еще далеко.
Знаете,что самое возмутительное? Что когда заходишь во вкладку Цены в магазинах и попадаешь в каталог с категориями товаров,то там даже нет строки поиска. Надо обязательно самому заходить в подкатегорию. Это жесть,конечно.

Ответить
1

А как же фирменный аромат тухлятины при доставке? 

Ответить
1

Айтишники молодцы. Дикси - помойка с антисанитарией в магазинах и быдловатым персоналом.

Ответить
0

Как я понял Яндекс.Такси написано на Flutter. У моего знакомого есть смартфон из низкого ценового диапазона < 15к рублей. Так вот, там можно увидеть как рисуется интерфейс приложения Яндекс такси. По сути то что должно происходить моментально,  там происходит с очень медленной скоростью отрисовки.

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

Все это я к тому, что на мой взгляд, Flutter не такой быстрый каким его считают. Либо у программистов Яндекс.Такси руки не от туда растут :)

Ответить
1

Судя по выступлению Геннадия Евстратова,
https://www.youtube.com/watch?v=PD6OwajKc8c&t=2435s
Яндекс Такси написан на нативе, и лишь малая экспериментальная часть на Flutter

Ответить
2

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

Ответить
2

На флаттере приложение Yandex PRO:)

Ответить
0

Тогда ситуация c отрисовкой выглядит немного странной.

Ответить
0

Молодцы, хорошие сроки для реализации с такой большой компанией. Однако, справедливости ради нужно сказать, что есть и другие технологии быстрой разработки - например, веб приложение - одинаково будет работать и на десктопе и на всех смартфонах или планшетах. Кстати, фирма 1с тут тоже недавно сделала возможность делать мобильные приложения и для iOS и для Android, российский аналог flutter )  
Интересно, какой бюджет был Вашего проекта, лимонов 15?

Ответить
1

Да, это возможное решение, но применительно к данному кейсу имеет ряд недостатков:
- не все устройства и не все операционные системы поддерживают полный функционал PWA;
- невозможно наладить активное участие пользователей iOS (например приложение может хранить локальные данные и файлы размером только до 50 Мбайт, нет доступа к In-App Payments (встроенные платежи) и многим другим сервисам Apple, нет интеграции с Siri), поддержка iOS начинается с версии 11.3;
- работа офлайн ограничена;
нет достаточной гибкости в отношении «специального» контента для пользователей (например программы лояльности);
- при использовании PWA увеличивается расход заряда батареи мобильного устройства.

По бюджету – меньше  😉

Ответить
0

Подскажите, какие операционные системы PWA не поддерживают? Это же браузер поддерживает и вроде пока проблем не встречал. 
IndexedDB - не сильно же ограничивается размером или я не прав? 
Я согласен с тем, что есть в этом что-то "неполноценное" ) однако, в Вашем кейсе, что было такого, что требовало именно мобильного приложения, а не PWA? 
Каталог товаров, цены и т.п ведь наверное у Вас все тянется в онлайне с некой БД на сервере. Что-же такого Вам важно хранить именно локально у юзера?

Ответить
0

Кстати, фирма 1с тут тоже недавно сделала возможность делать мобильные приложения и для iOS и для Android, российский аналог flutter )  

Абсолютно нет. Конечно, некоторые задачи закрывает, но пользоваться этим нереально, если что-то чуть нестандартное. Для заполнения всяких документов подойдёт, но скорость и стабильность решения так себе.

Ответить
0

Что не получилось реализовать? Интересно для понимания, где ее границы. 

Ответить
0

Нормальную валидацию форм, удобный интерфейс, ещё были проблемы с синхронизацией. Плюс стандартно нет нормальной механики проверки версии, полностью стягивается весь конфиг, а это 30+ МБ xml
Возможно, как-то можно местами лучше сделать, но в основном это страдания

Ответить
0

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

Ответить
0

Ну можно отключить автоматическое скачивание, но тогда нужно руками обновлять, либо реально билдить APK и публиковать в стор, но всё равно много неудобств.

Динамическую валидацию формы в зависимости от разных условий(а не нескольких полей), насколько я понял, реализовать не получится.

Ответить
0

На коде 1С думаю можно написать любую проверку формы на корректность заполнения перед отправкой. 

Ответить
0

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

Ответить

Комментарий удален

0

Спасибо. "Дикси" — огромная сеть, комментарии разные. Действительно, есть, что развивать и улучшать на уровне разных процессов, как и в любой сети. Напишите, пожалуйста, в директ, что за ошибка, будем признательны. Т.к. креши отслеживаем онлайн и не приходило ничего подобного, хотим разобраться в причинах

Ответить
0

А чем вы монитрите ошибки кст?

Ответить
2

Sentry, ELK, Prometheus, Zabbix, FireBase

Ответить

Комментарий удален

0

А есть ссылки на AppSore и  GooglePlay, чтобы вживую посмотреть и почитать отзывы клиентов?

Ответить
0

Предполагаю, что по слову "Дикси" в магазинах приложений можно найти)

Ответить
0

А вот с отзывами пользователей на Play Маркет действительно все не так радужно, как в первых комментариях на vc.

Ответить
0

Там вообще мрак, никто даже не отвечает на них. Будто всем класть))

Ответить
0

Ситуация меняется)

Ответить
0

Негативных отзывов просто куча. На добрую половину из них вообще не отвечают...

Ответить
0

Жаль руководство Дикси живёт в вымышленном мире и видимо не бывало в своих же магазинах. Чем дальше тем они больше походят на лавки из 90-х. Регулярная ругань, грязная униформа у продавцов. 1 касса и большая очередь...

Зато теперь есть крутое приложение для Айоэс.

p. s: это не отменяет достижений авторов

Ответить
0

Покажите, пожалуйста, как выглядит бэклог. 

Ответить

Комментарии

null