как сделать приложение в вк для группы

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

Вы можете создать новое приложение на этой странице: https://vk.com/editapp?act=create

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

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

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

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

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

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

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

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

Источник

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

Приступить к созданию приложения во ВКонтакте можно на странице https://vk.com/editapp?act=create.

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

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

Ранее для интеграции игр на десктопной версии сайта использовалась библиотека Javascript SDK.
Мы не рекомендуем интегрировать Javascript SDK в новых играх — библиотека VK Bridge позволяет играм интегрироваться одновременно с платформой на десктопной версии сайта и Direct Games.

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

Чтобы проверить, какие права есть у игры, используйте событие VKWebAppCheckAllowedScopes.

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

Источник

Как создать мини-приложение: база знаний VK Mini Apps

Полезные материалы на каждый этап жизненного цикла

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

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

Находим идею

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

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

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

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

Администраторы сообществ могут устанавливать приложения из каталога или прямо из настроек своих сообществ. Если Вы являетесь администратором приложения, оно будет доступно во вкладке «Мои приложения» в разделе «Управление сообществом»→«Приложения».

Пользователи могут устанавливать Ваше приложение в свои сообщества по специальной ссылке: https://vk.com/add_community_app.php?aid=, где aid – идентификатор Вашего VK Mini App.

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

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

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

Сниппет — это блок с картинкой и кнопкой, который появляется при публикации ссылки в записи в сообществе или в личном сообщении.

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

В управлении приложением вы можете загрузить обложку размером 1120×630px.
Размеры изображения в сниппете после размещения ссылки — 510×228px, обрезается изображение по нижнему краю.

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

Отправлять сообщения можно как пользователям, так и администраторам сообществ. Приложение «Заявки» отправляет сообщение каждому, кто заполнил форму, и уведомляют администратора сообщества о новой заявке.

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

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

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

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

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

Источник

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

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

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

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

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

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

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

При размещении вы также можете включить «Режим разработки». Он позволяет пользователям «ВКонтакте», назначенным в качестве администраторов приложения, использовать для тестирования каждой из трех витрин отдельный адрес. То есть открывая приложение, обычный пользователь увидит то, что расположено по условном адресу yourapp.com, а администратор — test.yourapp.com.

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

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

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

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

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

Существует достаточно подробная (правда, не совсем полная) документация по VKUI. Исходный код на GitHub: https://github.com/VKCOM/VKUI. Соответственно, максимально простая установка:

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

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

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

«ВКонтакте» сам добавляет параметры запуска к адресной строке, по которой открывается ваше приложение. Их список следующий:

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

Это позволяет уже при старте приложения иметь достаточно полный набор данных, извлеченных из 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.

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

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

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

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

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

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

VK Pay

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

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

Источник