ВКонтакте
18 469

Приложение в приложении: как устроена платформа сервисов VK Mini Apps

Привет, vc.ru! Меня зовут Антон Циварев. В Команде ВКонтакте я руковожу платформой для сторонних разработчиков. В августе 2018 мы запустили VK Mini Apps — платформу сервисов внутри мобильного приложения ВКонтакте. Сейчас там более 5 тысяч активных сервисов: абсурдные игры, акции больших брендов, интернет-магазины и даже альтернативная экономика — рассказываю о самых интересных решениях.

В закладки
Антон Циварев

Что такое VK Mini Apps и зачем это ВКонтакте?

Сервисы VK Mini Apps — веб-приложения в нативном клиенте, позволяющие решать повседневные задачи или интересно проводить время, не выходя из ВКонтакте. Например, пополнять счёт транспортной карты, заказывать еду или такси, знакомиться с новыми людьми, искать работу или учить правила дорожного движения. Платформа открытая, так что сделать приложение может каждый. Большинство проектов придуманы независимыми разработчиками, но представлен и большой бизнес — «Макдоналдс», Dostaевский, ComicCon, «Ситимобил». А самым известным приложением на базе VK Mini Apps можно назвать, пожалуй, VK Coin — в начале апреля о нём говорили едва ли не все развлекательные паблики.

Изначально мы назвали платформу VK Apps, но недавно решили добавить в название приставку Mini. Кажется, так лучше передаётся суть проекта — лёгкие и быстрые сервисы в одном приложении VK прямо в телефоне. Этот формат уже успешен на китайском рынке: в мессенджере WeChat функционируют свыше миллиона «приложений в приложении».

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

Для бизнеса и разработчиков есть свои плюсы:

  • бесплатный трафик из каталога, который доступен в разделе «Сервисы» в главном меню приложения VK;
  • виральные механики для распространения приложения — красивые сниппеты для постов, публикация в ленту и истории прямо из сервиса;
  • сокращение затрат на коммуникацию — возможность отправлять бесплатные push-уведомления с согласия пользователя, интеграция с чат-ботами и сообщениями сообщества;
  • упрощённое оформление заказа — если пользователь согласится, контактные данные из его профиля будут подгружаться прямо в форму покупки, а оплатить заказ можно через VK Pay.

Как это работает?

Во время работы над платформой мы поняли, что для пользователей сервисы VK Mini Apps должны восприниматься как что-то привычное, а для разработчиков — оставаться максимально простыми в создании. Поэтому мы остановились на веб-приложениях, которые будут открываться в WebView на полный экран. Все сервисы созданы с использованием открытой библиотеки для мобильного интерфейса, которой ежедневно пользуемся и мы сами. Это чистый веб, написанный на HTML, CSS и JavaScript без единой строчки нативного кода и мимикрирующий под приложение ВКонтакте.

VK Mini Apps стоит на трёх китах:

  • Библиотека компонентов VK UI отвечает за скоростную разработку и внешний вид сервиса. Она содержит более 60 UI-компонентов на React для создания интерфейсов, сохраняет все привычные элементы и жесты, а ещё позволяет написать кроссплатформенное приложение, которое будет хорошо работать в наших официальных клиентах на iOS и Android, а также в мобильном браузере.
  • Шина событий VK UI Connect предназначена для обмена данными между сервисами и приложением ВКонтакте. С помощью этого пакета вызываются нативные элементы, запрашиваются необходимые права и предзаполняются формы.
  • VK API отвечает за работу с данными и событиями пользователя, а также сообществами и другими возможностями ВКонтакте.

С помощью WebView и VK UI были созданы некоторые экраны приложения VK — это позволило нам ускорить его разработку в несколько раз. Именно так мы писали экраны для создания сообщества и управления им, запуска рекламных постов и жалоб на контент. Всю документацию, полезную информацию и примеры сервисов для разработчиков можно найти в сообществе VK Mini Apps: vk.com/vkappsdev

VK Mini Apps 11 месяцев спустя

К марту мы планировали выйти на 2 миллиона уникальных пользователей в месяц, а вышли на 10 миллионов. Всего сейчас на платформе — более 5 тысяч активных сервисов, но далеко не каждому из них нужен выход на всю аудиторию ВКонтакте. Поэтому в каталоге, который доступен всем пользователям, размещены около 90 сервисов — самых качественных и массовых. Есть и другие точки входа: сервис можно разместить в меню сообщества, добавить в чат-бота, а если ссылку на приложение вставить в публикацию, то к ней прикрепится красивый заметный сниппет. Кроме того, пользователи могут найти нужный сервис в общем поиске по ВКонтакте.

У нас получилось создать комьюнити разработчиков VK Mini Apps — сообщество, митапы, чаты. Мы поддерживаем общение с авторами успешных проектов, предлагаем им давать нам фидбэк и делиться опытом с другими разработчиками. Дальше я как раз расскажу о нескольких сервисах, которые стали популярны на нашей платформе.

«Сотен». Полумилионный оборот за две недели

Чтобы опробовать VK Mini Apps и просто «запилить что-нибудь смешное», один из независимых разработчиков в декабре 2018 года запустил абсурдный сервис — пользователи платят деньги, чтобы попасть в топ внутри самого сервиса.

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

Дмитрий Трачук
разработчик «Сотена»

Всего за неделю в «Сотен» пришли 150 тысяч пользователей, из них 2151 человек отправил деньги. Суммарный оборот сервиса составил 480 000 рублей. «Сотен» стал первопроходцем в своей нише и заложил тренд на простые по механике и быстрые в разработке сервисы с большим виральным потенциалом. Подробнее о сервисе можно прочесть в этом материале на VC.

Tool 42. Вирусные истории

В новом году появился новый виральный сервис —Tool 42 (vk.com/tool42). С его помощью пользователь может узнать, как давно зарегистрирован ВКонтакте, кто из друзей или друзей друзей добавил его в чёрный список, а также какие записи на странице или в сообществе наиболее популярны по разным показателям: отметкам «Нравится», комментариям, просмотрам. Создал сервис за пару ночей, «когда было свободное время», программист Павел Громадчук. Он хотел получить опыт разработки на React и реализовать полезные функции, которых, на его взгляд, не хватало в VK.

В конце февраля приложение появилось в каталоге, но резко набрало популярность две недели спустя — когда разработчик добавил возможность опубликовать свою дату регистрации ВКонтакте в историях. Пользователи сравнивали свой результат с данными друзей, и это своеобразное соревнование стало невероятно виральным — за первые четыре дня сервисом воспользовались 2 миллиона человек, которые опубликовали больше 700 тысяч историй. 17 марта 21 % авторов всех историй ВКонтакте размещали их через Tool 42. Разработчик потратил всего один час на написание кода для публикации истории и тысячу рублей на создание картинки для шеринга у дизайнера.

Vsemayki.ru. Быстрые заказы и оплата через VK Pay

Vsemayki.ru — это интернет-магазин по печати принтов на одежде и сувенирах с полумиллионом заказов в год. Свой сервис на VK Mini Apps Vsemayki.ru (vk.com/app6800340) запустили в конце января 2019. Это был эксперимент: создателям хотелось проверить перспективность новой платформы в плане продаж. В итоге они стали одним из первых интернет-магазинов, которые представлены в каталоге. В сервисе быстро оформляются заказы за счёт автозаполнения формы с разрешения пользователя.

Мы окупили то, что потратили на создание приложения, и уже вышли в плюс. При этом мы ничего не тратим на рекламу, все продажи — из органического трафика приложения. Приятно видеть, что трафик постоянно растет. И даже если не все пользователи делают заказы, о нас бесплатно ежемесячно узнают десятки тысяч пользователей. Хорошая брендовая инвестиция в будущее.

Константин Канивец
product manager Vsemayki.ru

«Макдоналдс». Альтернатива мобильному приложению

В феврале «Макдоналдс» запустил акцию «МакФест». Посетители покупали определённые товары, сканировали чеки и получали подарки: эксклюзивные стикеры, подписку на музыку в BOOM или скидки на блюда из меню «Макдоналдс».

Чтобы участвовать в акции было удобнее, коллеги из «Макдоналдс» сделали сервис на VK Mini Apps (vk.com/app6818829). Благодаря ему пользователи могли сканировать чеки и получать вознаграждения, не покидая ВКонтакте.

Петиции. Есть ли жизнь вне каталога?

Каталог — это ещё не всё. Разработчики сервиса «Петиции» (vk.com/app6890792) доказали, что виральная механика способна привлечь пользователей и без добавления в каталог.

Сервис работает по знакомому принципу: пользователи создают петиции и собирают голоса в их поддержку, привлекая внимания к общественно значимым проблемам. Призвать друзей присоединиться можно при помощи поста со сниппетом на своей странице — именно так распространяется большинство петиций. За первый месяц работы сервис получил 5 миллионов пользователей — люди активно делились ссылками на затронувшие их петиции. Пользователи поддержали идею отмены ЕГЭ, высказались против высоких цен на топливо и за повышения пособия по уходу за ребёнком.

VK Coin — от игры до альтернативной экономики

Кажется, o VK Coin слышали почти все. Игра-кликер (vk.com/coin), запущенная 1 апреля 2019 года, за 10 дней превратилась в самостоятельную экономическую систему с 10 миллионами пользователей. Одна из причин успеха — простая и виральная механика: пользователям нужно было нажимать на кнопку и получать за каждый клик игровую валюту — коины. Задача игрока — намайнить как можно больше коинов и попасть в рейтинг самых богатых пользователей.

Ежедневно в VK Coin заходили около 5 миллионов уникальных пользователей, а максимальное число игроков онлайн превышало 1,1 миллиона. Общая сумма накоплений превысила 2,8 триллионов коинов. Также в VK Coin появился «Магазин», в котором заработанные коины можно было обменять на предложения от партнёров. На волне популярности VK Coin трафик вырос и у партнёров.

Самое удивительное в том, что пользователи создали вокруг VK Coin альтернативную экономику: использовали коины как внутреннюю валюту в сервисе, платили друг другу за рекламные записи и даже обменивали их на реальные деньги. Школьники и студенты писали, что это первые большие деньги в их жизни. Мне попадалось немало историй о том, как кто-то обменял коины на обед в столовой, готовую «домашку» и другие услуги от одноклассников.

Иван Гусев
создатель VK Coin

10 апреля майнинг VK Coin остановили. Начался второй этап — теперь коины можно зарабатывать в играх и ботах, созданных независимыми разработчиками, обмениваться игровой валютой напрямую и тратить её на акции от партнёров. Сейчас в VK Coin продолжает играть около 3 миллионов пользователей в месяц.

Подробнее о сервисе можно прочесть в этом материале на VC.

Что дальше?

Недавно мы начали предлагать актуальные сервисы в меню мобильного приложения ВКонтакте и в разделе «Рекомендации» — это две дополнительные точки входа в интересные приложения. Сейчас мы работаем над адаптацией каталога VK Mini Apps для мобильной версии ВКонтакте — сами сервисы уже доступны для пользователей мобильных браузеров. А ещё мы прорабатываем вопрос интеграции с рекламными сетями, чтобы независимые разработчики могли зарабатывать деньги на объявлениях в сервисах.

Мы всегда рады обратной связи. Нас можно найти в сообществе vk.com/vkappsdev.

{ "author_name": "ВКонтакте", "author_type": "editor", "tags": [], "comments": 7, "likes": 28, "favorites": 12, "is_advertisement": false, "subsite_label": "vk", "id": 73220, "is_wide": true, "is_ugc": false, "date": "Thu, 04 Jul 2019 14:56:22 +0300", "is_special": false }
0
{ "id": 73220, "author_id": 266925, "diff_limit": 1000, "urls": {"diff":"\/comments\/73220\/get","add":"\/comments\/73220\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/73220"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 266925, "last_count_and_date": null }
7 комментариев
Популярные
По порядку
Написать комментарий...
4

Vk Mini Apps отличная платформа! Свой стартап на ней запустили и развиваем.

Ответить
0

А мы с трудом пробиваемся сквозь техподдержку, чтобы допустили в каталог :D
С 3-го сервиса только получилось, когда провели работу над ошибками и осознали, что социальные механики обязательны в mini apps. Получился планировщик задач Antodo (https://vk.com/app7020409). Сейчас правим последние баги из баг-трекера и до встречи в каталоге)

Ответить
0

Жаль, что у вас возникли сложности с модерацией.

Чтобы избежать их в будущем, обратите внимание на наши рекомендации (по ссылке).

Обычно ревью сервиса занимает 1-2 недели, но если вы следуете рекомендациям и все ещё сталкиваетесь с проблемами - напишите мне лично или в сообщения нашего сообщества.

Спасибо за внимание к нашей платформе)

Ответить
2

Cпасибо, Денис. Мы уже наладили контакт с Ксенией, но если что, напишем и вам :)

Ответить
1

UPD (коммент видимо удалили):
Да получилась странная ситуация, делали сервис покупки билетов, сказали, что нет социальных механик, хотя при этом в каталоге присутствует множество сервисов с одной функцией: оплатить то или это. Потом ещё и coin появился, который по сути является игрой-кликкером, хотя задолго до этого с идеей игро-приложения нас послали(в хорошем смысле) в Директ Геймс

Ответить
0

Да, я по ошибке два коммента оставил, лишний убили.

Верю в вас и в то, что у вас получится)

Ответить
0

Хорошо, что мы с Вами наладили контакт) Но я не совсем согласна с тем, что Вы написали выше.

Ответить

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

{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ] { "page_type": "default" }