Разработка
Aleksei Kaftanov

Как мы сделали мобильное приложение для «ВкусВилл» за 9 дней

Привет, меня зовут Алексей Кафтанов, я — руководитель компании FullStack. Мы занимаемся разработкой мобильных и web-приложений.

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

Проект получился классическим MVP, модель реализации подойдет для небольших b2c и почти любых b2b-проектов. Если в сжатые сроки вам требуется рабочее приложение, советую обратить внимание на этот подход. Текст будет интересен проджект-менеджерам и, скорее всего, в нем не будет ничего ранее неизвестного для программистов.

Немного истории

Эксперименты с онлайн-доставкой ВкусВилл начал проводить еще в прошлом году. Для этого была выбрана и утверждена логичная бизнес-стратегия: разработка двух разных приложений, для клиента и сборщика/курьера.

Это было удобно, клиентов было немного, загрузка приложения была небольшой: около 100 заказов в день, в процессе развития — до 1000.

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

Проблемы нашей реализации:

1. Приложения были только Android. Но пандемия перетрясла все сферы, и в службы доставки стали приходить курьеры с iOS.

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

От службы доставки в период изоляции зависела работа всей сети, поэтому главным вопросом, стоявшим перед командой, был: «Что делать с курьерами?» Тогда решили сделать telegram-бот. Потому что в боты мы умеем =).

Увеличение количества заказов подтвердило успешность выбранной бизнес-модели. Но далее мы стали упираться в ограничения бота как платформы. В частности, перед разработкой стояло несколько задач:

  • Видеть маршрут и все заказы на удобной карте
  • Быть привязанным сразу к нескольким торговым точкам
  • Получать актуальную информацию о статусе заказов
  • Использовать быстрый, нативно понятный интерфейс. За время работы бот оброс большим количеством дополнительной функциональности, что значительно увеличило количество кнопок для простого, по меркам приложения, пользовательского пути.
  • Синхронизировать с приложением свою актуальную локацию. С этим пунктом у telegram наблюдаются определенные сложности и ограничения: передача локации возможна только на 8 часов.
  • “Отделить” пуш-уведомления внутри приложения от общих пушей в телеграмме, так курьерам удобнее реагировать именно на заказы.

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

Интересный факт: в FullStack фронтом «ВкусВилла» занимаются четыре героя: 2 для iOS и 2 для Android. Если вы хотите составить им компанию, напишите мне.

Начало разработки

В тот момент нам повезло: мы нашли ребят, рассказавших нам про no-code платформу Bubble.io. По их словам приложение по нашим запросам могло быть сделано там за неделю. Более того, они показали, как именно оно могло бы функционировать и даже прошли проверку на возможность работать с нашим довольно хитрым бекендом.

Если честно, Bubble показался мне довольно-таки сырой технологией, с точки зрения пользовательского интерфейса это несколько странная и не отзывчивая система.

Но во время знакомства с ней появилась идея: использовать принцип работы платформы для быстрого создания собственного приложения. Потому что, если с этой задачей может справиться Bubble, то почему не может, например, SPA?

Мы решили написать пользовательский интерфейс на ReactJS с использованием фреймворка Capacitor. Проект собирается в оптимизированный и сжатый набор файлов, который выгружается на удаленный сервер. Capacitor имеет доступ к нативным функциям, приложение запускается через WebView, где указан URL с собранным на ReactJS проектом. Соответственно этой логике проект должен был открываться как обычный сайт с возможностью вызова нативных функций. Удивительно, Apple без проблем пропускает подобные технологии в свой магазин приложений.

Написали, которое передали ребятам с компетенцией Bubble и одному своему программисту React. Выглядело оно довольно-таки примитивно: берем дизайн-гайд, продумываем простой UI и собираем фронт, который будет выполнять всю функциональность бота.

У каждой команды (если считать нашего программиста за команду) было 2 недели на реализацию задачи: на основе гайдлайна самостоятельно создать максимально простое и удобное приложение. Консультироваться разработчики должны были напрямую с лидером проекта со стороны бизнеса.

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

Почему команд было две?

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

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

Что получилось

В первую очередь, идея параллелить команды оказалась очень логичной: интерфейсное решение no-code как-то сразу не задалось =(

Поскольку задача делать по гайдлайнам стояла сразу, реализация меня как-то немного демотивировала. С точки зрения отклика у Bubble есть очевидная проблема: нажимается все топорно, часто по два раза. В процессе обнаружились еще одни танцы с бубнами: больше 2 дней у команды ушло заменить "нативные" для Bubble Google-карты на Яндекс. Еще 1 день - сделать функционал открытия маршрутизации через 2Gis. При этом решение получилось костыльное: если 2Gis не установлен на устройство, оно все равно предлагалось. По трудозатратам у no-code команды вышло чуть больше 80 часов (первоначально именно такой лимит был установлен) при этом приложение получилось сырым. На этом сотрудничество с ними и закончили.

Решение на ReactJS получилось гораздо более оптимальным: во-первых, полный функционал получилось сделать за 67 часов, во вторых с точки зрения гайдлайнов и логики все получилось вполне рабочим:

Публикация на iOS прошла удачно: не было вопросов на ревью, уже на следующий день приложение было в сторе. Android в Play Market мы выкладывать не стали, просто разместили .apk в облачном хранилище.

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

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

Немного выводов

  1. Удивительно, но разработка на bubble.io получилась дольше, а итоговый продукт — более сырым. Существенную роль здесь сыграло ограничение конструктора.
  2. В самом начале, при постановке ТЗ, я обратил внимание команд на важность использования гайдлайна с уже готовыми визуальными элементами: шрифтами, иконками, общим стилем и т.д. Несмотря на это у ребят из Bubble получился предельно примитивный интерфейс. Вряд ли решающую роль могло сыграть банальное «не успели», скорее, дело в том, что платформа плохо кастомизируется. Если кто-то может объяснить причину, напишите в комментариях.
  3. Многих может удивить, что мы не знали о такой методологии и ее уже повсеместно используют. Тем не менее, для меня это стало открытием и я думаю что это очень хорошее решение для корпоративных приложений с небольшим количеством Пользователей. Приложение получается в разы удобнее и принципиально отличается от адаптивной версии сайтов, сроки реализации меньше, чем при работе с ReactNative или Flutter, визуально разница не заметна.

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

{ "author_name": "Aleksei Kaftanov", "author_type": "self", "tags": [], "comments": 36, "likes": 16, "favorites": 60, "is_advertisement": false, "subsite_label": "dev", "id": 198269, "is_wide": true, "is_ugc": true, "date": "Wed, 07 Apr 2021 09:06:05 +0300", "is_special": false }
0
36 комментариев
Популярные
По порядку
Написать комментарий...
3

Удивительно, но разработка на bubble.io получилась дольше, а итоговый продукт — более сырым.

Удивительно

Разработчиков приложений сейчас в ларьках заряжают?

Ответить
12

Мне кажется я ±12 раз прочел комментарий, но это не помогло ( А что имелось в виду?  

Ответить
3

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

Ответить
0

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

Ответить
0

На vc к примеру. Тут была статья про знаменитые Пензенские кленоварни. Купил попробовать, на вкус просто сахар топленый. Убрал в морозилку, а он замёрз. С канадским все ок. 
Ну и если будете кушать их продукты с чистым разумом, не обращая внимания на маркетинг, то все станет на свои места

Ответить
2

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

Если кто-то из ВкусВилл это читает, буду рад написать о своем юзерском опыте.

Ответить
1

Пишите, конечно, очень интересно. Передам кому нужно )

Ответить
4

В общем, пишу по памяти, могу что-то путать, прошу рассмотреть это не как реальный отчет тестировщика, а именно как опыт и эмоции в общем-то лояльного потребителя.

1. Началось все с того, что в офисе поставили автомат ВкусВилл.
2. Я часто заказывал в нем еду, и заметил, что мне предлагают ввести номер карты лояльности (которая у меня как раз была). Я указывал карту, вроде как что-то куда-то начислялось, но как списать накопленные бонусы я разобраться не смог.
3. Т.к. обычно нет времени на то, чтобы изучать правила бонусных программ, я просто вводил номер карты, и никакие бонусы не списывал.
4. Далее я заметил, что могу сканировать некий QR-код во время покупки в автомате с помощью приложения, подумал, что это поможет мне разобраться с бонусами, я увижу, куда и как копятся баллы и как-то начну их использовать.
5. Оказалось, что отсканировать QR-код не очень просто, приложение иногда отваливалось (возможно, в зоне, где стоит автомат, плохой интернет), но несколько раз я это сделал. Убедился, что это некий альтернативный способ указывать карту при покупке, но как тратить баллы так и не понял.
6. Зато изучая приложение нашел кучу других классных опций: получи скидку, оставляя отзывы на товары, выбирай любимый продукт, и покупай его дешевле. Были еще какие-то веселые (на первый взгляд) активности.
7. В итоге я потратил некоторое количество своего времени на оставление отзывов, отмечал любимый продукт, но со временем осознал, что не понимаю, как работают эти механики, и заметил, что никакой скидки при покупке я не получаю.
8.  Позвонил в поддержку, у меня была гипотеза, что в приложении есть несколько "Овощей на пару", и я покупаю один вид, а отметил в качестве любимого продукта другой вид того же продукта, поэтому не получаю скидку. Но эта гипотеза вроде бы не подтвердилась.
9. По телефону мне сказали, что скидку на люб. продукт  можно активировать при покупке, если зайти в приложение и нажать на кнопку "Я в магазине"!  Я немного офигел, говорю - ок, ну вот я стою перед автоматом, зачем это нажимать? Говорят, так надо. Надо сказать, что я так ни разу и не вспомнил о том, что надо нажать "Я в магазине", это слишком сложная операция для голодного человека, когда вокруг еще несколько человек спешат купить что-то в автомате.
10. Следующий удар снова прилетел от "любимого продукта". Оказывается, если вы поменяете его день-в-день, он не будет давать скидку. Представьте, у вас автомат в нем каждый день заканчиваются продукты, и появляются новые, вы должны спрогнозировать, что вы завтра будете в нем брать, причем рассчитать так, чтобы товар остался, и его не разобрали, и только тогда получите свой продукт со скидкой. С учетом того, что люди на работе обычно работают, а не играют в логические задачки с автоматом еды,  я это также выполнить не смог.
11. Далее через поддержку я пытался понять, как все же списать баллы в автомате, и мне сказали, что вроде как только в магазинах их можно списать. На этом месте я приложение снес.
12. По случаю зашел в обычный магазин ВкусВилл, говорю, мол, у меня там вагон бонусов, я могу их списать? Мне говорят, конечно, открывайте приложение. Я говорю, что снес его. Могу, мол, назвать номер телефона. Они говорят, по номеру телефона нельзя списать баллы. Только приложение. Ну или пластиковая карта. Тут я немного разозлился.

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

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

Ответить
0

Какая то игра в имитацию )
Ну и стальные нервы у вас

Ответить
0

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

Ответить
0

Здравствуйте, Игорь!

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

1) Начнём с того, что наши карты в первую очередь скидочные, когда вы участвуете в акциях, то получаете возможность покупать продукты со скидкой: можно ввести карту, когда включена функция «Я в магазине» или сканировать через приложение QR-код. В таком случае скидка проходит в чек. Подскажите, пожалуйста, адрес микромаркета, в котором наблюдались проблемы со сканированием, если они еще актуальны. Мы передадим ответственным коллегам информацию и проверим, в чем причина вызванных неудобств.

Если же просто ввести номер карты(когда не включена функция "Я в магазине"),то стоимость платите полную, а возможная скидка проходит баллами на карту.

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

2) Микромаркет будет доступен для поиска в списке «Я в магазине», после того как вы совершите в нем покупку по карте. Кстати, таким образом вы можете получать каждый день абонемент с предложениями на 6 продуктов с 20% скидкой. Согласитесь, если не забывать нажимать на кнопку в приложении, то получается довольно выгодно.

3)Так же можно назначать любимый продукт(ЛП) со скидкой в -20%, при покупке на сумму от 500 рублей и выше в течение двух дней, сделать это можно в приложении или на сайте ВкусВилл. Скидка начинает действовать целую неделю со следующего дня, однако есть небольшой лайфхак: при изменении продукта до 7ми утра скидка пройдёт день в день. На данный момент в микромаркете нет возможности поменять ЛП "на месте" при его отсутствии и получить -20% на другой продукт, в отличие от магазина, но мы уже работаем в этом направлении.

4)У нас есть акция разнообразное питание: в течение месяца вы набираете скидку на следующий, покупая и оценивая разные продукты, есть возможность получить от 3% до 10% скидки на следующий месяц. Покупки из микромаркета тоже идут в зачет. Акция поэтапная. В одном месяце набираете, в другом тратите (в апреле тратим). Скидка идет на весь чек, после применения всех акций и специальных цен. Если не успели накопить или не принимали участие в акции, то есть возможность в любое время приобрести подписку на скидку в -10% на 30 дней в наших магазинах. 

5) Списание баллов происходит через сканирование qr-кода и дополнительного подтверждения через код, который приходит по смс на номер, к которому привязана карта. Это сделано, чтобы мошенники не смогли распоряжаться вашими накопленными средствами. Баллы можно списать сейчас , как в микромаркетах, так и в магазине, а их количество отображается также на стартовой странице в приложении, так вы можете отслеживать поступление и списание баллов.

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

Ответить
1

Передадите, или зря текст писал?

Ответить
0

Игорь, не зря, конечно. Я все передал, обязательно посмотрят. Но давайте я лично от себя отвечу, основываясь на своем опыте покупателя ВкусВилл: установите приложение и спишите бонусы с помощью него в любом магазине. Что касается списания бонусов без сканирования кода в Мобильном Приложении - это, действительно, невозможно так как попросту небезопасно. 

Ответить
0

В вашей фразе "Что касается списания бонусов без сканирования кода в Мобильном Приложении - это, действительно, невозможно так как попросту небезопасно. " я не понял вообще ничего. Без сканирования кода? Какого кода? Кем?

Ответить
0

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

Ответить
0

а напишите сразу! )

Ответить
0

Долговато, решил дождаться запроса от представителей приложения

Ответить
2

Для курьеров пойдет, норм кейс 👏 . «Каздев» забавно звучит, но для курьеров тоже пойдет ) 😄

Ответить
2

Шутки, про иконку и "Кремниевую долину" уже были?

Ответить
0

¯\_(ツ)_/¯

Ответить
0

нет, рассскажи

Ответить
1

Верное название статьи:

Как мы тестировали на продакте после 9 дней разработки

Ответить
1

На самом деле нет. Название больше как кликбейт. Реально 9-ти дней хватило на то, чтобы отказаться от nocode и получить тестовый билд, доступный для нескольких курьеров. На отладку до прода ушло еще несколько недель, решение перенести на него весь функционал (заменить приложением бот) только недавно принято. 

Ответить
1

Всё, верно. Всё, что нужно было знать про no-code. Для малого безнеса, возможно, сойдёт.

над проектом будет работать сторонняя команда Bubble

Есть же Программист 1С, теперь будет Программист Bubble. No-code хотят решить одну головную "боль", создав другую. Classic, что сказать...

Ответить
1

Да, с nocode в итоге так и получилось (

Ответить
1

Приложение за две недели это конечно 🔥.
Круто!

Ответить
0

Ну не знаю, я PWA обычно за пять минут пишу 😎 вот например https://mycooks.club/

Ответить
1

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

Ответить
0

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

Ответить
1

В вкусвиле самые вкусные печенье Орешек и вафли трубочки.

Ответить
0

Кстати, вот еще личный инсайт =) Примерно такие комментарии очень часто пишут в сторах и ставят высокую оценку. У нас есть бот, в который в режиме онлайн собираются все отзывы и именно такие очень приятно читать: ты вроде не делаешь орешки и трубочки, но приложению, которе делаешь ты за это ставят 5 звезд =) 

Ответить
0

Из статьи не понял, что именно сделали. Интерфейс для существующего приложения поправили?

Ответить
0

Не, там немного про другое статья.

Ответить
0

расскажите подробнее про задачу. К вам пришел ВВ, показал свое приложение и попросил его улучшить?

Ответить
1

Нет, все не так и, собственно, об этом в статье и написано ) Если коротко: до пандемии мы делали приложение для курьера на одном технологическом стеке, во время пандемии заменили его ботом, затем заменили бот на мобильное приложение на другом технологическом стеке, который решает основную проблему первого - необходимость прохождения ревью после публикации любых изменений. При этом при выборе этого нового стека мы попробовали два варианта, которые решает задачу: nocode и решение на React. Nocode нам не понравился, React - зашел.

Потом я написал статью, вот теперь - ответил на ваш комментарий. Кажется, все кратко рассказал. 

Ответить
1

На непонятном языке разговаривает. Кто приложение то заказал?

Ответить

Комментарии

null