Назад

Как мы сделали прототип приложения, для которого у нас не было опыта, а у российского рынка — аналогов

2020 год много чего перевернул и подтолкнул к росту. Но что действительно взлетело во время пандемии, так это рынок e-commerce. По предварительным подсчетам, Китай за 2020 год заработал на онлайн-продажах $242 млрд во многом за счет live-shop-streaming. В России эта сфера пока развита слабо, но есть первопроходцы. Один из них обратился к нам в Purrweb, но опыта разработки таких приложений у нас не было, и мы не были уверены в успехе предприятия. Рассказываем, как мы стартовали с прототипа, что получилось, а что нет.

Время чтения: 5 минут

Live-streaming-shopping app development
Содержание

    Что такое Live-stream-shopping

    Миллениалы изобрели телемагазины. Эта шутка точно описывает live-stream-shopping как разновидность e-commerce. В общем виде так оно и есть. Live-stream-shopping это возможность наблюдать за эфиром и сразу же заказывать онлайн то, что показывают на стриме. Развитие сегмента подстегнула пандемия коронавируса: многие сидят дома и все покупают онлайн, как еще выделить площадку на фоне бесконечно одинаковых онлайн-магазинов?

    Активнее всего отрасль развивается в Китае: по предварительным подсчетам, в 2020 году онлайн-продажи, в том числе через стримы, составили около $242 млрд. Сейчас LSS набирает обороты в России. Самый яркий пример — «Залипакинг» (стримы с российскими звездами, блогерами и инфлюенсерами) от AliExpress. 

    Начнем с прототипа

    Заказчики обратились к нам в августе. Они знали китайский язык и следили за ростом e-commerce в Азии. Ресерч темы показал, что за пределами Китая аналогов немного и у подобного стартапа на европейском рынке может быть будущее. 

    Ребята пришли к нам по «старой памяти»: до этого мы уже работали с одним из них над совместным проектом приложением Energo для аренды пауербанков в Москве. Они предложили взяться за разработку live-stream-shopping приложения Eyebuy — российского аналога китайского e-commerce. 

    Задача показалась интересной, но мы честно признались: опыта создания мобильных приложений, как это, у нас нет. При этом очень хотелось испытать наш стек, попробовать реализовать на нем всю запрошенную функциональность и получить опыт разработки подобного проекта. Чтобы не рисковать, мы решили стартовать с прототипа.  У заказчика не было четкого скоупа и большого бюджета, но было желание стартануть с тем, чего на европейском рынке ещё практически нет.Разработка live stream shopping приложения

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

    Поиск референсов

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

    Хорошие примеры нашлись на зарубежном рынке. Обнаружили шведскую  платформу BamBuserhttps://bambuser.com/, которые заинтересовали нас своим SDK для стриминга. Сначала мы решили взять его за основу, но передумали: лучше делать все своими руками, чтобы изучить все подводные камни. 

    На фичи и флоу смотрели в индийском сервисе BulBulTVhttps://bulbul.tv/. Принцип работы сервиса приглянулся, и в наборе фич для своего проекта мы решили ориентироваться на него. В качестве отстройки придумали свою killer feature пользователь переходит из нашего приложения в интернет-магазин, корзина с понравившимся ему товарами уже собрана. Пользователю нужно только оплатить заказ и ждать посылку.

    Показавший себя стек

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

    Успешный опыт работы над Energo (приложение по аренде пауэрбанков) не оставлял сомнений в выборе стека: взяли наш классический стек — React Native для мобилки, React для фронта веб-версии и node.js для бэка. Команду сформировали из трех человек: проектного менеджера, UI/UX дизайнера и одного фулстек-разработчика. 

    Экспресс-дизайн

    Работа шла быстро, с дизайном тоже разобрались оперативно. Со стороны заказчика требований к оформлению не было, но были референсы, да и на стадии прототипа у дизайна прикладной характер — понять, что где расположено. У нашего дизайнера был опыт создания мобильного приложения,  похожего на Eyebuy (для видеосозвонов), поэтому сделать «функционально и без заморочек» она смогла быстро, но не без проблем. 

    Разработка live stream shopping приложения

    Первые стримы

    На стартовую разработку live-stream-shopping приложения ушел месяц. Мы собрали прототип и протестировали его с владельцами небольших шоурумов. На этом этапе максимальное количество уникальных пользователей доходило до 40 человек, а находились одновременно в стриме 25 клиентов. 

    Поначалу стримы работали с перебоями: количество зрителей фиксировалось неправильно. Мы использовали библиотеку Socket.IO и записывали количество real-time пользователей в переменную. То есть действие «пользователь подключился к стриму» увеличивало число в переменной, но не всегда корректно уменьшало при отключении пользователя.

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

    Оставалась проблема с killer feature — интегрироваться с корзиной каждого нового магазина приходилось вручную. Не могли написать универсальный код, который делал бы это автоматически, поскольку у всех разные движки и структура сайта. 

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

    Переход к пилоту

    Интерес к live-stream-shopping приложению тестовые стримы подтвердили, и мы перешли к разработке пилотного проекта.

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

    Разработка live stream shopping приложения стала для нас челленджем, и за время работы мы столкнулись с рядом легко и не очень исправляемых багов. Так например, основа такого приложения стримминг. Когда мы тестировали приложение, видео в в flv-формате на Android-устройстве проигрывалось хорошо. Все изменилось при тестинге на IPhone: iOS не поддерживает флеш-форматы видеофайлов. Это исправили легко: изменили формат видео на hls на сервере. 

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

    Первые «большие» стримы

    С пилотом заказчик пошел к крупным брендам: Летуаль, Mascotte, Декатлон. Им идея была интересна, и они согласились на тестовые стримы. 

    Здесь эфиры прошли хорошо: они не падали, качество было высоким. Например, на стриме Mascotte было уже 500 уникальных зрителей (в противовес 40 на первых тестах) и 39 человек онлайн одновременно. Во время этого эфира тестировали killer feature: пользователи собирали айтемы в корзину прямо на стриме, а корзина на сайте Mascotte собиралась автоматически. За время стрима в корзину перешли 83 раза. 

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

    Вот что нам предстоит доделать:

    1.  Записи эфиров не сохраняются. На старте проекта тестировали это вручную (запускаешь стрим → записываешь видео → сохраняешь на Google drive).Сейчас мы ищем нормальное автоматизированное решение и пока нашли библиотеку для стриминга — node-media-server. С ней можно сохранять стрим в формате mp4. Но в документации ничего не сказано про сохранение файлов на носитель, поэтому придется дописывать эту функциональность самим. 
    2. Добавлять товары в стримы пока приходится руками. Нужна автоматизация.
    3. Остается задача-вопрос с открытым финалом: что делать, если к стриму подключится миллион пользователей? Здесь нас страхует то, что мы писали на node.js, который помогает выдерживать большую нагрузку.

    Итог: переход к MVP и постоянные клиенты

    Пилотная версия приложения оказалась востребованной. Мы перешли к следующей стадии разработки live-stream-shopping-приложения —  MVP, в которой планируем уменьшить объем ручного труда. Так магазины смогут вести несколько стримов одновременно и легко загружать товары в админку. 

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

    Команда проекта: Елена Фарберова (PM), Юлия Вакуленко (UI/UX дизайнер), Константин Земляков (full-stack разработчик)

    Кейс подготовили: Дарья Лобачева, Екатерина Кобзева