Как подружить Юлу и ВКонтакте
Осенью прошлого года перед нами стояла задача объединить крупнейшую социальную сеть и многомиллионный сервис объявлений в одну площадку для продажи — Объявления ВКонтакте. Похожую задачу уже решил Facebook и реализовал внутри своей соцсети Facebook Marketplace, в результате получился один из крупнейших мировых сервисов объявлений.
В этой статье я опишу процесс разработки и технологии, которые мы использовали для достижения результатов в максимально сжатые сроки. Не буду приводить примеры кода, потому что архитектура каждой части приложения заслуживает отдельной статьи.
Предыстория
Юла — сервис объявлений с многомиллионной аудиторией, который является одним из крупнейших сервисов объявлений в РФ. ВКонтакте — крупнейшая социальная сеть РФ, которая также является одним из крупнейших сервисов объявлений: там есть множество сообществ-барахолок, в которых пользователи могут размещать объявления.
Полгода назад у пользователей ВКонтакте не было удобной функциональности поиска объявлений и взаимодействия с покупателями и продавцами, а на Юле не было того количества постов из групп ВКонтакте, которые являются потенциальными объявлениями. Большинство постов-объявлений во ВКонтакте выглядели так:
Кроме того, у сообществ ВКонтакте не было возможности получать дополнительную аудиторию и показывать свой контент вне ленты групп.
ВКонтакте и Юлу объединяет то, что оба приложения находятся внутри холдинга VK, поэтому разумным шагом было направить сотрудничество обеих команд на создание объединенного сервиса. Естественно, разработка базовой функциональности Юлы на мобильных клиентах ВКонтакте — дело небыстрое. А нам, как обычно бывает, хотелось сделать MVP сервиса как можно скорее. К счастью, на базе ВКонтакте существует платформа миниаппов, которая позволяет встраивать их внутрь ВКонтакте. Именно её мы решили использовать для решения нашей амбициозной задачи.
Платформа миниаппов ВКонтакте
Сначала вкратце расскажу, что из себя представляет платформа миниаппов ВКонтакте.
Сам миниапп может быть встроен в сайт ВКонтакте (мобильную или десктопную версию) через iframe, а в приложение ВКонтакте на Android/iOS — через webview. На базе миниаппов уже созданы тысячи приложений. Это делает ВКонтакте супераппом. Любой разработчик может написать своё приложение, разместить заявку и попасть в список приложений. Внешние тестировщики проверяют приложения перед размещением в списке, что позволяет запускать их с минимальным количеством багов.
Команда разработки ВКонтакте создала библиотеку интерфейсов vkui. Она представляет из себя набор React-компонентов, с помощью которых можно быстро создавать веб-приложения с таким же стилем, как у ВКонтакте. Библиотека использует в качестве стилей цветовые токены на основе css-custom-properties . Это позволяет отображать корректные цвета в тёмной и светлой темах (тёмная тема в последнее время достаточно популярна). Также библиотека меняет стили компонентов в зависимости от платформы: Android/iOS/Web.
Для взаимодействия с API ВКонтакте и мобильными клиентами используется прослойка vk-bridge. Например, можно отправить события получения ФИО пользователя, данных о текущей геолокации, версии официального приложения, и даже сохранить пользовательские данные в key/value-хранилище (vk-storage). Для получения некоторых пользовательских данных приложение ВКонтакте запрашивает у пользователя специальное разрешение. О самой библиотеке можно подробнее узнать тут.
Обкатка технологий
Сервис Юлы состоит из нескольких вертикалей, в каждой из которых пользователь может найти объявления определённой категории:
Одна из вертикалей, над которой велась активная работа в прошлом году, это вертикаль услуг. Кроме её разработки внутри Юлы была поставлена задача обкатать технологию миниаппа, чтобы использовать внутри ВКонтакте вертикаль Юлы в виде миниаппа услуг. Это позволило разработчикам ознакомиться с технологиями и подготовить фундамент для создания Объявлений ВКонтакте. Параллельно разработке велись переговоры о более тесной интеграции с ВКонтакте и прорабатывались задачи.
Сам миниапп услуг включал в себя основные экраны Юлы: ленту объявлений, карточку товара и экран создания объявления.
Одним из самых сложных этапов реализации миниаппа услуг была попытка внедрения оплаты. Работа над этой функциональностью заслуживает отдельной статьи, но я расскажу, в чём была основная сложность. Помимо миниаппа, фронтенд-команда Юлы занимается разработкой веб-сайта youla.ru. Мы пытались переиспользовать функциональность оплат из веб-Юлы, где это было реализовано через Деньги Mail.ru. Но из-за того, что весь процесс происходит внутри iframe, а ссылка на оплату формируется через redirect-url, возврат в миниапп после оплаты срабатывал некорректно. В итоге мы отказались от этой функциональности. В дальнейшем при внедрении оплаты в Объявления ВКонтакте мы использовали уже VK Pay взамен Деньги Mail.ru.
В Юле есть два основных канала связи пользователей с друг другом: звонок по номеру телефона и переписка через чат. Если функциональность звонков реализовать несложно, то написать с нуля чаты, или даже перенести эту функциональность из другого проекта, — весьма нетривиальная задача. К счастью, у ВКонтакте есть мессенджер, в котором мы настроили интеграцию через собственного чат-бота. Он позволял дублировать сообщения в чатах Юлы и ВКонтакте, и покупатель мог внутри ВКонтакте переписываться с продавцом, который пользовался приложением или веб-сайтом Юлы.
Для разработки веб-версии Юлы мы используем монорепозиторий, который собирается через Lerna. Он состоит из пакетов, отвечающих за бизнес-логику сайта, переиспользуемые UI-компоненты, утилиты, сервисы и дизайн-систему. Для работы со стилями мы используем Styled-components, с их помощью реализована наша дизайн-система.
В качестве основы для приложения миниаппа услуг мы взяли React CreateApp, в котором в дальнейшем сделали eject, потому что нам не хватало базовой функциональности. Вся визуальная составляющая была реализована на vkui, что позволило довольно быстро реализовать экраны приложения. В них мы поменяли цвета, чтобы они соответствовали дизайн-системе Юлы, для этого подключили npm-пакет со стилями и использовали некоторые UI-компоненты.
Вся разработка миниаппа услуг заняла два месяца и ещё один на отлаживание процесса развёртывания, релизов и мелкие доработки.
Разработка миниаппа Объявления ВК
Первым этапом разработки миниаппа Объявления ВКонтакте (далее – ВКО) мы реализовывали функциональность создания объявлений из ВКонтакте. В группах-барахолках ВКонтакте появилась кнопка «Разместить объявление», которая создавала товар на Юле и публиковала его на стене группы. При публикации в группе появлялся сниппет с фото, названием и ценой товара, ссылка в этом сниппете вела в Юлу.
Поскольку у нас уже была реализована форма создания объявления в миниаппе услуг, было решено использовать его кодовую базу. Сама форма создания отличалась возможностью размещать товар в любой категории (не только заявки на услуги) и тем, что форма подачи в ВКО отображалась в цветах ВКонтакте.
Сравнение формы подачи в миниаппе услуг и ВКО:
Как говорилось выше, для написания стилей мы используем styled-components. В миниаппе услуг мы задавали тему через конфигурацию темы Юлы:
div < color: $<() => theme.palette.white> > В ВКО для того, чтобы задать тему, используются css-custom-properties, которые меняются в зависимости от темы ВКонтакте (темная или светлая):
Кроме того, некоторые цвета, как и компоненты, по-разному выглядят в мобильной и десктопной версиях.
Следующим этапом разработки миниаппа была реализация карточки товара, чтобы пользователи, которые переходят по сниппетам, не выходили из ВКонтакте на сайт или приложение Юлы, а оставались внутри ВКонтакте:
Функциональность карточки товара мы также переиспользовали из миниаппа услуг. Карточка работала аналогично карточкам товара в приложении Юлы с поддержкой основных сценариев. Сравнение реализации карточки товара в миниаппе услуг и ВКО:
Третьим этапом была разработка главной страницы ВКО, попасть на которую можно было из раздела сервисов ВКонтакте. Эту функциональность пришлось делать практически с нуля, потому что реализация фильтрации объявлений в услугах и ВКО сильно различалась. В миниаппе услуг обращение к ленте делалось через REST, а в ВКО — через GraphQL. Реализация ленты товаров через GraphQL достаточно удобная, потому что позволяет отображать в ленте произвольные элементы, отличные от товаров: рекламные карточки, различные горизонтальные растяжки, премиум-карточки платных клиентов Юлы.
Лента Юлы позволяет показывать товары, которые находятся недалеко от пользователя, в каждой карточке указано расстояние в километрах. Если пользователь разрешил приложению ВКонтакте доступ к своему местоположению, мы показываем товары на определённой удалённости от точки, в которой находится пользователь. Если же он запретил доступ к координатам, то мы берем их из профиля пользователя в Юле или предлагаем ему указать своё местоположение.
Фильтры позволяют пользователю искать товары по конкретной категории/подкатегории и местоположению. Кроме того, для каждой категории мы используем дополнительные атрибуты фильтрации. Например, для мобильных телефонов это операционная система, модель, диагональ экрана.
Суммарно разработка первых трёх фаз ВКО заняла три месяца. Полноценный запуск раздела состоялся 1 декабря 2020 года.
Объявления ВКонтакте сейчас
Сегодня любой пользователь ВКонтакте может воспользоваться нашим сервисом не выходя из приложения ВКонтакте. А каждая группа может подключить у себя раздел Объявления для увеличения охвата аудитории. Помимо мобильной версии, недавно состоялся запуск десктопной версии Объявлений. Она не реализована на технологии миниаппов, а нативно встроено в сайт ВКонтакте. Это позволяет пользоваться нашим сервисом на всех платформах.
Мошенники. Действуют через ВК и Вацап. Информация для тех кто продаёт запчасти через Юлу или Авито
Суть проблемы в следующем… разместил объявление на Юле и Авито о продаже. Пишет мне петушок что его тётя не зарегистрирована в ВК и не может видеть объявления и скинул номер телефона +79106161604. На фото в вацапе баба- на вид «тётя». Пишу что от племянника. Пишет для безопасной сделки надо указать мою почту. Скидываю почту. Приходит сообщение от «Юлы» для получения оплаты перейдите по ссылке. Там надо ввести номер карты и указать остаток суммы чтобы убедиться что это именно моя карта. Я ни разу не отправлял товары Юлой. Пишу что за хрень я де указал что САМОВЫВОЗ. Она пишет что не может приехать и оформила доставку через Безопасную сделку. Далее пишут на сайте что спишут 1рубль, но на приложение приходит смс о списании большой суммы денег, хотя по сути должны были зачислить деньги. Пишу тёте типо что за херня, почему сумму с меня удерживают, она говорит деньги банк замораживает для безопасности. Никогда не вёлся на эту хрень, с незнакомых номеров трубку не беру, по ссылкам не переходу, но что-то сегодня инстинкт самосохранения меня оставил. Денег нет. Тётя пишет чтт у неё ошибка, видимо эти твари дальше решили давить на мозг вдруг там сумма больше чтобы раскачать карту до конца. Позвонил в банк, карту заблокировали. Сказали деньги должны вернуться так как быстро обратился. Фиг знает. Сдаётся этот платный урок останется в пользу петушков. Как это относится к машинам спросите меня, да на прямую! Многие выставляют запчасти в приложениях для продажи и эти петухи пользуются этим. До сих пор не могу понять каким образом оно попало в ВК?! И на последок народная мудрость «JIoх ни мамонт, JI0х не вымрет». Сейчас полазил и нашёл по фото человека. Скорее всего стырили фото и ФИО. Теперь Карабут Оксана Павловна будет икать, а петушок мне написал что она не зарегистрирована ВКонтакте!
11 августа 2023 Метки: другое
Как отвязать ВК от Юлы и остановить продажи
Как отвязать ВК от Юлы, чтобы пользоваться сервисами отдельно? Через управление VK ID – единой учетной записи экосистемы ВКонтакте. Необходимо открыть вкладку «Сервисы и сайты», найти там название «Юла» и нажать на кнопку отключения.
Как отключить одну учетку от другой?
Если вас интересует, как отвязать Юлу от ВКонтакте – это нормально и понятно. Иногда не хочется оставлять никаких ссылок на свои социальные сети, не хочется дублировать информацию, может быть, нет желания «смешивать» два совершенно разных сервиса. Причины не важны, главное – найти решение.
Мы расскажем, что сделать, чтобы отключить одну учетку от другой, но сразу предупреждаем, все нужные настройки находятся в профиле социальной сети. Инструкция актуальна для тех, кто ранее подключал ВК ID для упрощенной авторизации в сервисах экосистемы.
Давайте попробуем отключить Юлу от Контакта через десктопную версию? Делаем следующее:
- Откройте свой профиль и авторизуйтесь при необходимости;
- Найдите иконку аватара наверху справа и нажмите на нее;
- Из появившегося меню выберите баннер «Управление VK ID»;
- Через панель слева переключитесь на вкладку «Сервисы и сайты»;
- Найдите в списке справа название доски объявлений;
- Пролистайте открывшийся список действий до конца;
- Нажмите на кнопку «Отключить VK ID от сервиса».
Важно: заходить в свой профиль нужно именно через браузер, отвязать страницу ВК от Юлы через специальные приложения (например, VK Messenger) не получится. Можно использовать любой современный обозреватель, например, Google Chrome или Safari, Mozilla или Edge.
Отвязать аккаунт ВК от Юлы можно и через мобильное приложение социальной сети. Ничего сложного, алгоритм очень похож на инструкцию ддя десктопной версии – подходит как для iOS, так и для Android:
- Откройте мобильное приложение;
- Через нижнюю панель перейдите на главную;
- Кликните по миниатюре фото в верхнем левом углу;
- Найдите под вашим аватаром и никнеймом иконку «Управление VK ID»;
- Нажмите на нее и дождитесь загрузки меню;
- Перейдите к вкладке «Сервисы и сайты» (последняя в списке);
- Выберите название нужного сервиса;
- Щелкните «Отключить VK ID».
Отвязать Юлу от Контакта – значит, отказаться от возможности авторизации через ВК ID. Впредь вам придется входить в профиль с помощью номера телефона (а значит, тратить немного больше времени). Для подтверждения личности достаточно просто ввести код, который придет в СМС, никаких паролей придумывать не нужно.
Есть один довольно радикальный вариант, как отключить Юлу от ВК. Необходимо полностью удалить свою учетную запись сервиса объявлений – тогда ваш аккаунт в социальной сети «отвяжется» автоматически.
Но, повторимся, решение радикальное. Если вы хотите продолжать пользоваться сервисом, продавать товары и предлагать услуги, удалять профиль не нужно. Можно просто отключить одну учетную запись от другой и больше не включать VK ID.
Если вы все-таки решились полностью удалить свой профиль, помните: вы больше не сможете зарегистрировать аккаунт, подключенный к этому же номеру телефона. Хорошенько подумайте, прежде чем принимать столь важные решения.
Важно: при необходимости можно снова привязать профиль на Юле к своему айди, чтобы упростить процесс авторизации. Никаких ограничений тут нет, настраивайте вход в аккаунты, как вам удобно.
Вот как отвязать профиль ВК от Юлы буквально за несколько минут, если вы по каким-то причинам не хотите связывать две учетки. При этом помните, что в любой момент можно снова подключить один аккаунт к другому – и даже дублировать объявления на обе площадки сразу!
«ВКонтакте» создала единый каталог объявлений пользователей соцсети и «Юлы» Статьи редакции
Это позволит продавцам увеличить аудиторию, так как объявления попадают сразу на две площадки.
- «ВКонтакте» запустила раздел «Объявления», где покажет предложения от пользователей соцсети и сервиса «Юла», сообщили vc.ru в компаниях.
- Товары, опубликованные на «Юле» или в разделе «ВКонтакте», одновременно попадают на обе площадки. При этом продавец и клиент могут переписываться там, где удобно каждому: один из них может писать сообщение в «Юле», а другой ответить во «ВКонтакте».
- Объявления можно разместить в группах «ВКонтакте»: функцию подключили четыре тысячи сообществ с суммарной аудиторией 26 млн пользователей.
- «Объявления» доступны в мобильном приложении соцсети во вкладке «Сервисы» и вскоре появятся в десктопной версии, добавила компания.
- Одновременно с этим сервис объявлений представил «Яндекс». У сервиса уже есть сайт, а также раздел встроен в приложение «Яндекса». В ближайшие дни выйдут отдельные приложения для iOS и Android, обещала компания.
20K открытий
37 комментариев
Написать комментарий.
Теперь вашу фигню и тут и там показывают
Развернуть ветку
Я в вк не сижу практически с тех пор как появилась телега, я понимаю в чем прикол супераппов для кампаний, тупо коммерческая история, впихнуть невпихуемое и срубить баблишка переливая траф, но с стороны пользователя это лютое гавнище, как минимум они все копируют китайские супераапы, но там это в рамках экосистемы и все сделано под юзера а у нас просто устроили свалку всех сервисов в одном и называют это гордо суперапп, а на деле помойка.
Ну хотя чего ожидать от mail.ru, не знаю не одного сервиса который сделан для пользователей.
А ведь мы ванговали:
Развернуть ветку
Я в ВК не сижу практически с тех пор, как появилась телега, но понимаю, что есть объективная статистика, а на информацию лично обо мне поебать примерно всем, поэтому не засоряю ей эфир. Не сидя в ВК, я также понимаю, что это теперь просто бизнес, который стремится улучшать свои показатели — вроде в этом не было ничего зазорного в определении коммерческой структуры (ну, кроме как для тех, кто верит в разные детские сказки). И экосистема, если она правильно будет собрана, это один из способов повлиять на показатели, увеличив их кратно. Как человек, который немного разбирается в разработке, могу только догадываться, насколько сложно соединить между собой эти огромные системы и сколько будет еще таких промежуточных итераций. Поэтому стараюсь обходиться без передергиваний и поспешных выводов, тем более что продуктовая команда ВК все ещё на головы выше большинства российских сервисов.
Чего не скажешь о людях, которые, если судить по комментариям, хорошо разбираются во всех вопросах и дают глубокие анализы вроде «нет ни одного сервиса, сделанного для пользователей, все копируют у Китая». Однобокие, однотипные, поверхностные эксперты.
Развернуть ветку
Назовите пожалуйста хоть 1 сервис мейл ру который реально любят и ценят юзеры.
Чтоб прям чувствовалось что команда сервиса реально заботится о проекте а не садит тебя в клетку и пиздит палками пока ты не закинешь донат.
Развернуть ветку
Такая большая аудитория не измеряется удовлетворенностью смузи-хипстеров, которых надо смазать сахаром и продать им красивую историю, помимо того, что даешь им стабильно работающий продукт, решающий конкретные задачи. Не сомневаюсь, что найдется много людей (очень), которые довольны продуктами, продавали что-то на «Юле», общаются с друзьями и так далее — это подтверждает статистика. Рунет — это не мы с вами, это огромная страна разных людей.
Развернуть ветку
Знаю почему вас бомбит, так как ВК для вас не пустой звук:) На самом деле вы правы: рекламный кабинет ВК это шикарно, удобно и не глючит, в отличие от Фейсбука например. Юла тоже глючит гораздо реже, чем Авито. Объединение большой и сложный И КРУТОЙ ШАГ.