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

Обновлено: 19.09.2024

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

Что это за сервисы?

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

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

Зачем нужны мини приложения?

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

Рассмотрим тематики, на которые можно разделить все интересные мини приложения в ВК:

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

ТОП интересных продуктов

Начнем со списка мини приложений в веб-версии ВК.

Откройте свою страницу;
Перейдите в раздел «Мини-приложения»;

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

Обратите внимание, под каждым клиентом в общем списке есть рейтинговый индикатор в виде пяти звездочек. Наш ТОП составлен именно на основе данного рейтинга. И еще, если навести на утилиту курсор мыши, всплывет краткая справка со сведениями о продукте: количество участников, описание, время существования в каталоге. Эти данные также оказали влияние на наш перечень.

Мы постарались выбрать по одному лучшему мини клиенту в каждой тематической категории. Вот что у нас получилось:

Такси в ВКонтакте (подача машин со скидкой);
VK Play (куча игр с кэшбеком);
AliExpress;
Кино онлайн (кино с кэшбеком);
Еда ВКонтакте (сервис по доставке еды со скидкой);
Работа (поиск вакансий);
Знакомства и общение;
Добрые дела (поддержка благотворительных фондов);
Оплата услуг (тут вы можете оплатить интернет, штрафы или транспорт).

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

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

Мои Гости (35 млн. участников, существует с 2009 года). Позволяет отследить посетителей своей страницы;
TopFace (15 млн. пользователей, функционирует с 2012 года). Программа для знакомств по фото;
Avatan (14 млн., с 2011 года). Крутой фоторедактор, с опцией ретуши лица, бесплатный и простой;
МиниТесты (13 млн., с 2012 года). Прикольный развлекательный клиент с легкими тестами на самые разные темы.
Будильник (600 тыс., с 2010 года). Простой и логичный клиент, соединивший в себе будильник, таймер, секундомер и счетчик;
Vichatter (2 млн. 200 тыс., с 2010). Клиент для общения по видеосвязи;
Бесплатные открытки (1,5 млн., с 2013). Огромный каталог бесплатных открыток на все случаи жизни;
Random (280 тыс., с 2015). Мини приложение Вконтакте на ПК для выявления случайного победителя в конкурсе или розыгрыше в сообществе;
Твоя лента (1 млн. 200 тыс., с 2012). Помощник в составлении красивой и привлекательной ленты – только лучшие посты, фото, конструкторы;
Киномания (720 тыс., с 2010). Актуальная информация обо всех мировых киноновинках.

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

Таким образом, получился следующий перечень:

Напомним, если вы не знаете, где в мобильной утилите ВК находятся мини приложения, нужно тапнуть по второй кнопке слева (на панели быстрой навигации).

Наши рейтинги основаны на всеобщем признании и популярности продуктов, но у каждого пользователя, наверняка, существует свой собственный ТОП, призванный решать, конкретно, его потребности. Теперь, зная, как в ВК открыть мини приложения, вы тоже сможете сформировать личный рейтинг, с которым ваша повседневная жизнь станет проще, а деятельность – продуктивнее. Попробуйте прямо сейчас!

Поделитесь в комментариях ниже вашими любимыми мини приложениями от ВКонтакте!

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

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

Находим идею

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

~~придумать~~

Проектируем и прототипируем

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

Наглядный пример стоимости ошибки на разных этапах разработки:

Убедитесь, что идея жизнеспособна. Если планируете зарабатывать на своём мини-приложении и нужен будет трафик — проведите исследование потенциального рынка. Соберите данные, пообщайтесь с целевой аудиторией, изучите её потребности и боли. Составьте две-три пользовательские истории. Займитесь техническим проектированием: составьте список фич, которые хотите видеть в MVP и в финальной версии.

После этого можно переходить к созданию прототипа вашего будущего приложения.

→ Что посмотреть:

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

— конспект лекции, чтобы закрепить опорные тезисы.

Кастомизируем UX/UI

На этом этапе предстоит балансировать между «Делаю, как мне нравится», «Делаю как умею» и «Делаю, как будет удобно пользователям».

Найти и сохранить такое равновесие сложно даже опытным дизайнерам и разработчикам. Так что этап кастомизации — поле бесконечных экспериментов, А/B-тестов и проверок гипотез. У тех, кто создаёт мини-приложения, есть мощное подспорье — VKUI. Это набор React-компонентов, с помощью которых можно создавать интерфейсы, внешне неотличимые от приложения VK.

→ Что пригодится:

— все доступные компоненты интерфейсов, чтобы ваше мини-приложение выглядело как нативный клиент. Бонус: ассеты VKUI для Figma — они бесплатны сами по себе, но доступны только в платной версии программы. — пригодится, если вы ещё не работали с этим фреймворком. Затем можно возвращаться к компонентам VKUI. — набор SVG-иконок, представленный в виде React-компонентов. — полезный материал для десктопной реализации мини-приложений.

— если хотите наглядности и примеров.

— раздел большой статьи о критериях модерации на платформе VK Mini Apps.

Разрабатываем

Наконец можно приступить к реализации. Делимся всеми ссылками, которые вам помогут.

→ Must read перед разработкой:

— документ № 1. — большая статья о том, как попасть в каталог.

— подробный официальный материал о том, как запустить своё первое мини-приложение. — опыт стороннего разработчика.

— статья с подробным описанием методов и объектов интерфейса, процесса регистрации приложения, авторизации пользователя, прав доступа. — принципы работы и методы API. .

— инструкция. — полезный сервис: кнопка Add Dependency позволяет добавлять нужные библиотеки, а Save создаст уникальную ссылку на ваш проект.

— дорожная карта для начинающего веб-разработчика. Обзор областей знания и концепций со ссылками на учебные материалы (на английском). , часть 1 — Глеб Воронцов показывает техническую часть разработки: панель администрирования, инструменты и многое другое. , часть 2, — финишная прямая: VKUI, VK Bridge и наглядный кодинг. — подробная статья о том, как сделать навигацию в мини-аппе для платформ iOS и Android, включая свайпы и аппаратные кнопки. — github-репозиторий с примером реализации мини-аппа. — песочница для тестирования VK Bridge.

Проходим модерацию и тестирование

Модераторы проверят, соответствует ли он правилам размещения сервисов на платформе VK Mini Apps и учтены ли критерии размещения. Ещё они могут отметить, где стоит доработать UX и UI. Замечания модераторов помогут улучшить приложение, а на финальной проверке — ещё и устранить уязвимости, угрожающие данным пользователей.

→ Что посмотреть:

— от менеджера проектов ВКонтакте Антон Нижегольцев.

Чтобы сервис попал к ним в ближайший четверг (актуально для каждой недели), нужно написать модератору, что вы готовы к тестированию, в понедельник до 18:00 по московскому времени.

В среднем бета-тестирование занимает около двух полных недель. Есть смысл постараться попасть в него как можно раньше — особенно если вы претендуете на грант от VK Fresh Code. Участники конкурса размещают готовое мини-приложение в каталоге до заявленной даты. Для нынешней, четвёртой волны программы — это 21 октября 2020 года.

Финальная модерация: выходим в каталог

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

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

После релиза: продвигаем и монетизируем

Активная аудитория растёт, количество показов рекламы увеличивается, система монетизации работает. Что дальше?

Главное — не останавливаться на достигнутом и продумать качественную рекламную кампанию для мини-приложения.

Продвижение

→ Что почитать:

— статья от команды ВКонтакте для бизнеса. Понятно о том, как создавать интересный контент и для чего нужна сегментация аудитории.

— мастер-класс Эдуарда Мухина, сертифицированного специалиста по рекламе ВКонтакте.

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

Сейчас ВКонтакте есть две модели монетизации мини-приложений: это покупки внутри приложений и реклама. Их можно использовать отдельно или вместе.

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

В этом разделе вы найдёте инструкции для разработчиков мини-приложений.

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

Начало работы

Как создать мини-приложение на платформе VK Mini Apps, в двух видеоуроках.

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

Если какую-то из версий, полную или мобильную, вы не планируете реализовывать — оставьте соответствующее поле пустым.

1.1 Режим разработки Во вкладке «Настройки» в интерфейсе управления приложением под полями для URL добавлен чек-бокс «Режим разработки», позволяющий указать «URL для разработки».
Адрес, указанный в этом поле, будет открываться только у администраторов приложения.
С самоподписанным SSL сертификатом мини-приложение не будет работать в мобильных приложениях.
1.2 Короткий адрес приложения Для приложений, размещенных в каталоге мини-приложений, есть возможность указать буквенный адрес во вкладке «Информация» в интерфейсе управления приложением.
Новый буквенный адрес не должен быть короче пяти символов. 2. Быстрое создание шаблона VK Mini Apps

Чтобы создать шаблон приложения, выполните команду:

npx @vkontakte/create-vk-mini-app <folder name>

В нем есть все необходимое, чтобы начать работу над вашим первым приложением. VKUI, VK Bridge и VK Icons уже подключены и готовы к использованию.
Кроме того, в библиотеке поддержаны несколько систем публикации проекта.

Также может быть интересно: Быстрый старт.

3. VKUI

С помощью VKUI вы можете создать привлекательный интерфейс мини-приложения для мобильных устройств.
Для использования в полной версии элементы пока не адаптированы.

Если вы используете библиотеку для создания шаблона, отдельно подключать VKUI не нужно.

Создайте новое приложение:

npx create-react-app my-app

Подключите VKUI:

npm install @vkontakte/vkui || yarn add @vkontakte/vkui

Запустите своё приложение:

npm start

Теперь можно работать с компонентами VKUI.
Для корректной работы приложения используйте следующие атрибуты viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover">

4. VK Bridge Для интеграции приложения с API ВКонтакте и устройства пользователя мы предоставляем библиотеку VK Bridge.

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

В справочнике VK Bridge собран список всех событий, которые можно использовать.
4.1 Библиотека VK Bridge

VK Bridge — пакет для отправки и получения событий в вашем
приложении. Библиотека VK Bridge позволяет работать с API ВКонтакте и устройства пользователя.

Если вы используете библиотеку для создания шаблона, отдельно подключать библиотеку VK Bridge не нужно.

Укажите название, выберите платформу «Встраиваемое приложение», затем отметьте нужный тип.

Заполните описание, при необходимости укажите категорию приложения и сохраните данные, подтвердив действие с помощью СМС. Затем Вы попадете в интерфейс администрирования приложения.

Для работы с API Вам потребуются значения полей «ID приложения» (в документации ему соответствует параметр API_ID, app_id или client_id) и «Защищенный ключ» (secret_key, app_secret).

Категорий «Игра», «Приложение» и «Приложение сообщества» всегда представляют собой iFrame.
VK Apps — новый тип встраиваемого приложения. В веб-версиях (десктоп и мобильные браузеры) такие приложения отображаются во фрейме, в мобильных клиентах VK iOS и Android

IFrame-приложение

Максимальный размер приложения — 1000x4050 точек. Приложение может использовать любые технологии, поддерживаемые браузером пользователя (например, Unity).

Для работы с API в IFrame-приложениях мы рекомендуем использовать Javascript SDK.

Параметры запуска

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

Более подробно узнать о параметрах запуска Вы можете на этой странице.

Интересное в вк

Начните создавать приложения на платформе VK Mini Apps.

Содержание

Подробнее о платформе VK Mini Apps

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

пользователям не нужно скачивать приложения из App Store или Google Play;
все функции программы работают при открытой странице профиля ВК;
нет нужды нигде регистрироваться для запуска программы;
формат выгоден как сайту, так и разработчикам;
сервисы присутствуют не только в компьютерной версии, но и в мобильном приложении.

Структура и особенности

Любой сервис ВК является веб-ресурсом, управление которым осуществляется в специальной панели социальной сети.

VK Mini Apps дает возможность разрабатывать программы для повседневных задач.

Возможно разместить 3 различных версии приложения:

Веб-ресурс можно встроить через системный компонент Android WebView или через Inline Frame.

Все сервисы создаются при использовании компонентов библиотеки для интерфейса.

VK API позволяет получать информацию о сообществах.

Я бы отметила 3 пункта, которые обеспечивают бесперебойную работу мини-приложений в ВК:

VK UI Connect. Обмен данными между сервисами ВК и приложениями (важно при создании программного обеспечения для сферы продаж).
VK API. Интерфейс, позволяющий получать информацию о пользователях и сообществах ВК, а также о событиях и мероприятиях (развлекательных сервисах, играх).
VK UI. Адаптивные компоненты React. Они используются при проектировании сервиса, его внешнего вида. Включают в себя более 70 лучших мини-программ для React–JavaScript, позволяют писать кросс-платформенные веб-программы.

Также читайте: Приложение VK Admin для ПК - бесплатное скачивание и установка, функциональные возможности программы

Разработка приложений

Алгоритм создания сервиса:

Создание жизнеспособной либо необычной идеи.
Проектирование (исследование потенциального рынка, общение с целевой аудиторией).
Кастомизация, создание интерфейса. Работа проходит с помощью фреймворка React и VKUI StyleGuide.
Разработка. Перед этим важно почитать правила и критерии размещения сервисов во ВК. Полезными будут WebSkills, Poo-Mini-App, VK Bridge Sandbox.
Прохождение модерации.
Бета-тестирование в системе Testpool (занимает около 2 недель).
Выход в каталог, загрузка иконок, обложек для отображения на сниппетах. Публикация проекта.
Дальнейшая монетизация, реклама, продвижение.

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

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

вызов карточки контактов;
получение геопозиции;
сканирование QR-кодов;
поддержка запросов к API VK.

Примеры полезных и интересных мини-приложений VK

Веб-приложения помогут сэкономить свои время и силы:

Обзор

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

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

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

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

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

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

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

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

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

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

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

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

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

Обязательно нужно поставить следующий метатег в 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

То есть фрейм с вашим приложением откроется примерно с похожим адресом:

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

Дополнительные параметры в этот список «ВКонтакте» на ноябрь 2019 года включать не планирует. Однако в url можно передать произвольный хэш, например:

Роутинг

Если в приложении больше одного экрана (я думаю, это как раз ваш случай), нужен переход между экранами. За показ того или иного экрана отвечает state нашего React-приложения. Что касается организации View, то «ВКонтакте» предлагает два способа: смена активного компонента VKUI View и VKUI Panel.

Каждый View отвечает за свой пользовательский сценарий:основной, дополнительный, вызов справочников, страницы поиска и другие. Внутри View содержится свой набор Panel — это конкретные шаги (экраны) в пользовательском сценарии. Абстрактно это выглядит так:

В state в activePanel мы прописываем id того элемента, который нужно показать.

Верстка и компоненты

Теперь можно посмотреть типичную страницу внутри Panel, созданную с помощью компонентов VK UI.

Библиотека VK UI предоставляет практически полный набор компонентов, необходимых для построения интерактивного приложения: всевозможные элементы форм, попапы, стилизованные алерты, галереи, панели навигации, спиннеры, аватары, футеры и так далее.

Как видно, появился ещё один пакет vkontakte:

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

Основное правило — правильно использовать компонент

либо собственную верстку шапки. В правой части шапки нативное приложение «ВКонтакте» размещает кнопки управления.

Стоит обратить внимание: «ВКонтакте» заявляет, что компоненты могут отображаться на десктопах не совсем адекватно. Однако их можно стилизовать, добавляя свои css-правила. Например, так была стилизована анимация переходов между панелями в одном приложении:

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

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

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

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

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

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

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

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

VK Pay

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выбор языка программирования и определение с идеей

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

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

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

Известные с детства игры, например, лото, крестики-нолики или «Найди отличия».
Карточные игры и пасьянсы, в том числе современные и покер.
Казуальные аркады, вроде тетриса или «три в ряд».

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

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

Перед тем, как сделать приложение для ВК самому, определитесь с его типом. На ресурсе их всего два:

Iframe проекты создаются с помощью специальных инструментов браузера. Данные принимаются и передаются посредством JavaScript. Люди, запустившие ваш проект, попадут в отдельное окно в браузере, затем смогут им воспользоваться.
Flash-приложения – файлы с расширением .swf. Они создаются через Adobe Flash, после чего сжимаются в файл и выгружаются на сервер.

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

Через ВК

Как создать приложение для VK Apps? Для этого следует воспользоваться сервисом от социальной сети. С помощью него разработчики могут создавать свои сервисы для использования внутри мобильного приложения Vk. Следуйте пошаговой инструкции:

В открывшемся окне нажмите на кнопку создания проекта.

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

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

Как создать приложение в ВК для группы? Для этого выберите в конструкторе параметр «Встраиваемое приложение», затем поставьте галочку напротив пункта «Приложение сообщества».

После отправки должностные лица социальной сети Вконтакте проверят ваш готовый проект и решат, занесется ли он в специальный каталог.

Программы для разработки

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

Для создания flash-проектов потребуется научиться работать с программой Adobe Flash. Новичку разобраться с ней сначала непросто, но она позволит создать полноценный и качественный проект любому пользователю ПК.

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

Сервис BeApp позволяет сделать приложение в группе ВК, в которой вы являетесь администратором. Конструктор встраивается в сообщество в несколько кликов. Базовые функции доступны бесплатно. С помощью встроенного редактора вы можете тонко настроить каждый элемент.

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

Работа профессионала

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

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

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

Исходники приложений

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

Если же вам необходим исходник, данные которого не найти, можете сделать следующее:

Установите приложение к себе и запустите его.
В открывшемся окне щелкните правой кнопкой мыши, чтобы открылось контекстное меню. Здесь выберите пункт «Исходный код» страницы.

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

После проделанной процедуры, архив скачается на ваш жесткий диск. Замените расширение архива на .swf, после чего можете открыть в Adobe Flash или любой удобной программе. Чтобы начать работать с исходником, нужно получить его код. Делается это путем декомпиляции – сложным процессом, который воссоздает исходник из машинного кода.

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

Читайте также: