Как создать мини приложение в ВК

Платформа мини-приложений VK Mini Apps: зачем создавать свой сервис и как его монетизировать

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

Что такое VK Mini Apps?

VK Mini Apps — платформа полезных сервисов (правильно называть их мини-приложениями). Это легковесные, но полноценные веб-приложения, которые запускаются внутри разных площадок, например ВКонтакте.

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

Глеб Воронцов — «Как создать мини-приложение. Часть 2»

Несколько лет назад мой коллега уже рассказывал про VK Mini Apps. Но с тех пор многое изменилось. Например, сервисы стали кросс-платформенными: теперь они доступны в приложении ВКонтакте для iOS и Android, десктопной (vk. com) и мобильной (m. vk. com) версиях соцсети, а также в Одноклассниках, в мобильной версии браузера Atom для Android и в мобильном приложении Почта Mail. ru.

Многие сервисы мы придумываем сами, иногда привлекаем на помощь команды специалистов. Однако огромный пласт мини-приложений создают и развивают сторонние разработчики, никак не связанные с нашей командой. Создать свой сервис может каждый, будь это крупный бренд (например, Purina, Магнит, Boxberry) или независимый разработчик. VK Mini Apps — открытая платформа, а это значит, мы никого не ограничиваем в полёте фантазии и рады всем проектам — конечно, если они не нарушают правила площадки и законодательство РФ.

Сервисов VK Mini Apps становится всё больше: в июне 2022 года их уже 53 300 — за квартал показатель вырос на 27%. Разнообразие сервисов привлекает пользователей: в среднем в первом квартале платформой VK Mini Apps активно пользуются 45,4 млн человек в месяц. Это на 15,5% больше, чем год назад.

Зачем создавать свой сервис на VK Mini Apps?

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

Миллионы пользователей

VK Mini Apps открывает доступ к аудитории всех площадок, где размещается сервис. ВКонтакте пользуются 100 млн человек в месяц, а Одноклассниками — 38 млн. При этом сервисы можно публиковать как на нескольких площадках, так и на одной — удобно выбирать оптимальные каналы взаимодействия с аудиторией. Это сразу несколько каналов вирального трафика, за которые не придётся платить. И больше шансов, что вас заметят.

Глеб Воронцов — «Как создать мини-приложение. Часть 1»

Особой популярностью пользуются игры — такой, что мы выделяем их в отдельный продукт внутри ВКонтакте. Уже 10 млн человек погружаются в магические миры, ездят на спорткарах, просчитывают ходы в многоуровневых стратегиях и просто приятно проводят время.

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

Проверенные инструменты

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

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

Много вариантов монетизации

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

Во втором квартале 2022 года выручка от рекламы в мини-приложениях на платформе VK Mini Apps выросла на 189% в годовом исчислении. Топовый разработчик мини-приложений может заработать больше 1 млн рублей в месяц.

Кроме того, каждый год мы проводим премию VK Mini Apps. В прошлый раз общий призовой фонд составил 2,5 млн рублей.

Сервисы просто создавать

Чтобы создавать мини-приложения ВКонтакте, понадобятся навыки программирования: вряд ли получится разработать сервис, если вы никогда не писали код. Однако идея нашей платформы в том, чтобы разработчик мог воплотить свою задумку и создать прочную связь с аудиторией. Поэтому сервисы VK Mini Apps создавать проще, чем приложения для маркетов.

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

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

Почему создавать сервисы VK Mini Apps проще, чем нативные приложения? Вот основные причины.

• Подробная документация

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

• Не нужна адаптация

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

• Больше поддержки

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

Какой сервис создать?

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

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

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

Пример — мини-приложение «Рабство 2.0». Замысел прост: когда человек впервые заходит в мини-приложение, он становится чьим-то рабом. Чтобы откупиться, нужно приглашать друзей и знакомых в сервис. Они, в свою очередь, зовут присоединиться к сервису других людей. В результате пользователи знакомятся, общаются и просто хорошо проводят время.

А выручка от рекламы и внутриигровых покупок этого приложения достигает 350 тысяч рублей в месяц.

Выстрелить могут самые разные идеи. Ниже мы собрали сервисы, которые хорошо зарабатывают и получают большой охват на платформе VK Mini Apps:

Источник: vc.ru

Разработка приложений в VK mini apps

Почему надо смотреть в сторону разработки приложений для работы в VK? У меня за спиной много лет фронтенд-разработки для массовых сервисов, и то, что сейчас предлагает разработчику социальная сеть «ВКонтакте» — быстрый и эффективный способ построить еще один канал коммуникации с действительно большой аудиторией. Ниже расскажу, в чем идея VK mini apps, какие технологии использовать при разработке приложения и на что стоит обратить внимание.

Первоначальная публикация статьи в блоге Mail.ru Cloud Solutions: https://mcs.mail.ru/blog/razrabotka-prilozhenij-v-vk-mini-apps

Платформа VK mini apps

«ВКонтакте» предоставляет сторонним разработчикам возможность писать веб-приложения и размещать их в каталоге приложений и/или продвигать внутри сети. Пользователям приложений не нужно скачивать отдельные нативные приложения из Google Play/App Store, функционал выбранного приложения доступен внутри пользовательской сессии основного приложения во «ВКонтакте» или через браузер, на сайте соцсети. В социальной сети есть подробная инструкция о том, как начать работу на платформе VK mini apps.

Инфраструктура приложения VK mini app

Приложение VK mini app представляет собой обычный веб-ресурс, располагаемый по определенному адресу. Его мы должны разместить в «Панели управления приложением» социальной сети.

«ВКонтакте» позволяет разместить три версии приложения:

• для мобильных клиентов — то есть для открытия в нативном приложении «ВКонтакте»;
• десктопный вариант — vk.com в браузере;
• вариант для браузеров в мобильных телефонах (https://m.vk.com).

Ваш веб-ресурс встраивается в приложение «ВКонтакте» через обычное WebView, при открытии с десктопа — через iFrame. Поэтому необходимо держать в уме, что часть функционала JavaScript может быть недоступна, необходимо тщательное тестирование.

После тестирования веб-приложения на разных устройствах его можно отправлять на модерацию, чтобы оно могло быть размещено в каталоге. Заявка на модерацию отправляется из «Панели управления приложением». Объявленный «ВКонтакте» срок модерации — 7 дней. Выкладки новых приложений (сервисов по терминологии «ВКонтакте») происходят раз в неделю по четвергам.

Есть подробная памятка о том, как создать правильное приложение. Рекомендую внимательно свериться с ней, прежде чем отдавать приложение на модерацию.

Разработка приложения VK mini app

Итак, приложение VK Mini Apps — это, по сути, обычное веб-приложение, которое встраивается в платформу посредством iFrame или WebView. Поэтому выбор технологий, на котором оно будет написано, за вами.

Однако для разработки фронтенда «ВКонтакте» рекомендует собственную библиотеку готовых компонентов VK UI, выполненную на React:

Это удобно — многие типовые компоненты уже готовы, осталось только встроить их в структуру вашей страницы или SPA.

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

«ВКонтакте» не требует от разработчика следования какой бы то ни было жесткой архитектуре построения фронтенда — мы берем только то, что нужно, и модифицируем компоненты так, как нужно. Например, вы всегда сможете добавить глупому view-компоненту свой класс, свой обработчик событий, сделать вложенные компоненты любой глубины и так далее.
Существует достаточно подробная (правда, не совсем полная) документация по VKUI. Исходный код на GitHub: https://github.com/VKCOM/VKUI. Соответственно, максимально простая установка:

Обязательно нужно поставить следующий метатег в head верстки страницы вашего приложения, иначе на устройствах с iOS будет неправильно отображаться нативная навигация «ВКонтакте»:

Далее нам нужно просто встроить React-приложение на страницу.

Параметры открытия приложения

«ВКонтакте» сам добавляет параметры запуска к адресной строке, по которой открывается ваше приложение. Их список следующий: vk_user_id, vk_app_id, vk_are_notifications_enabled, vk_language, vk_ref, vk_access_token_settings, vk_group_id, vk_viewer_group_role, vk_platform, vk_is_favorite, sign. То есть фрейм с вашим приложением откроется примерно с похожим адресом: youvkapp.ru/?vk_access_token_settings=notifyvk_are_notifications_enabled=1vk_is_favorite=1vk_platform=desktop_webvk_user_id=111111 .View__panel—prev < max-width: 458px !important; margin: 0 auto; left: calc(50% — 230px) !important; -webkit-animation: root-android-animation-hide-back 3s cubic-bezier(.4, 0, .2, 1); animation: root-android-animation-hide-back 3s cubic-bezier(.4, 0, .2, 1); >.View__panel—next < max-width: 460px !important; left: calc(50% — 230px) !important; >>

Эти стили подключаются в общем потоке стилей, подключаемых к вашему приложению.

Библиотека VK Connect

Библиотека VK Connect предоставляет доступ к широким возможностям как самой сети «ВКонтакте», так и к возможностям устройства, если мы работаем из-под мобильного приложения. Для ее подключения нужно установить пакет vkontakte/vk-connect: npm i —save-dev vkontakte/vk-connect.

Среди многочисленных возможностей VK Connect — сканирование QR-кода, получение геопозиции, вызов карточки контактов. Также есть широкие возможности по использованию возможностей соцсети: включение-выключение уведомлений, публикация записей на стене, авторизация сообщества, подписка на сообщения. Их нужно использовать с умом: например, существует ограничение на количество уведомлений — не более одного в сутки. Есть отдельные рекомендации по уведомлениям. Полный список возможностей представлен в документации.

Чтобы наше приложение вообще начало работу, нужно сначала выполнить инициализацию:

Все дальнейшее взаимодействие с библиотекой происходит похожим образом. Методом connect.send вызываем нужное действие и слушаем ответы. Для этого мы должны подписаться на события:

connect.subscribe((e) => < switch (e.detail.type) < case «VKWebAppGetUserInfoResult» : this.bindConnectUserData(e.detail.data); break; >>);

В объекте detail возвращается type — название типа события, ответ на которое мы ждем, и data — набор данных. В примере выше мы слушаем ответ на запрос connect.send(«VKWebAppGetUserInfo», <>), который должен вернуть данные о пользователе приложения: имя, пол, дату рождения, место проживания, ссылку на картинку аватара в соцсети.

«ВКонтакте» не гарантирует поддержку всех событий на всех устройствах (iOS, Android, Web), поэтому лучше делать проверку такой поддержки перед исполнением кода:

if (connect.supports(«VKWebAppGetUserInfo»)) …

VK Connect также обеспечивает поддержку запросов к API VK, если нужно что-то большее, чем может предоставить сама библиотека VK Connect:

connect.send(«VKWebAppCallAPIMethod», >);

VK Pay

VK Pay — это, по сути, удобный фронтенд для использования онлайн-сервиса оплаты с помощью Деньги Mail.Ru. Для вызова платежной формы достаточно открыть платежное окно с помощью вызова в библиотеке VK Connect:

connect.send(«VKWebAppOpenPayForm», >);

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

• vk mini apps
• javascript
• вконтакте
• vk
• приложения вконтакте
• mail.ru cloud solutions

• JavaScript
• Разработка мобильных приложений
• ВКонтакте API

Источник: habr.com

iSa1vatore/vk-mini-app-boilerplate

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Switch branches/tags
Branches Tags
Could not load branches
Nothing to show
Could not load tags

Nothing to show

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Cancel Create

• Local
• Codespaces

HTTPS GitHub CLI
Use Git or checkout with SVN using the web URL.
Work fast with our official CLI. Learn more.

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

Latest commit message
Commit time

README.md

VK Mini App Boilerplate

Стартовый кит для создания сервиса на платформе VK Mini Apps.

Чтобы понимать, что здесь происходит вы должны знать что такое VK Mini Apps, ReactJS и React Redux.

git clone git://github.com/iSa1vatore/vk-mini-app-boilerplate.git

Перейдите в созданную папку и выполните команды: npm install и npm start , последняя запустит сервер для разработки на localhost:10888

Отлично, теперь перед нами демонстративное приложение, можно править код и все изменения сразу будут видны на нашем сервере при помощи «Hot Reloading».

• Поддержка темы нативного клиента
• Поддержка iOS swipe back для панелей
• Обработка хардверной кнопки «назад» для Android
• Сохранение позиции скролла для панелей и элементов
• Scroll To Top при нажатии на иконку в Epic`e
• Получение токена пользователя
• Запросы к API ВКонтакте
• Сохранение данных в форме при смене панели
• Роутер

Действия которые роутер может выполнить:

• setStory(story, initial_panel) — Устанавливает активную Story у Epic’a, View и активную панель.
• setPage(view, panel) — Устанавливает активный View и Panel
• goBack(from) — Совершает действие назад, будь то закрытие модального окна, переход на прошлую панель, закрытие попапа и т.п;
• openPopout(popout) — Открывает поппап.
• closePopout() — Закрывает поппап.
• openModal(id) — Открывает модальную страницу по её ID.
• closeModal() — Закрывает модальную страницу или открывает прошлую страницу.

Примеры того как это все работает смотрите в исходниках ¯_(ツ)_/¯, там все просто.

Сохранение позиции скролла:

Для сохранения позиции горизонтального скоролла нужно:

• Указать ID для элемента HorizontalScroll

HorizontalScroll id=»EXAMPLE_TABS_LIST»> . /HorizontalScroll>

• Сохранить позицию при демонтировании

componentWillUnmount() const setScrollPositionByID> = this.props; setScrollPositionByID(«EXAMPLE_TABS_LIST»); >

• Восстановить позицию при монтировании

componentDidMount() restoreScrollPosition(); >

В файле index.js на 24 стороке указывается стартовая панель приложения:

store.dispatch(setStory(‘home’, ‘base’));

В данном случае это значит, что приложение запустится с:

Как вы поняли значение ID у Root и стартового View должны совпадать.

В проекте есть 2 файла: «App» и «AppWithoutEpic», первый идет с навигационной панелью Epic, второй без, он подойдет для простых приложений.

import App from ‘./App’;

По умолчанию для примера выбран вариант с Epic навигацией.

В файле по пути /src/js/services/VK.js нужно заменить значение константы APP_ID на ID вашего приложения

Мой VK (вопросы, предложения): Ivan Salvatore

About

Стартовый кит для создания сервиса на платформе VK Mini Apps с использованием React + Redux

Источник: github.com