можно ли разработать собственное приложение сообщества вк
Приложения сообществ
За последние несколько лет сообщества ВКонтакте из групп по интересам превратились в удобный инструмент для медиа, бизнеса и организации встреч и мероприятий. Пришло время сделать их ещё удобнее.
Сегодня мы открываем доступ к платформе приложений сообществ. Приложения позволяют расширить функциональность групп, публичных страниц и встреч, делая их полноценной заменой веб-сайтов и мобильных приложений. Приложения сообществ уже доступны в полной и мобильной версиях сайта, а также во всех мобильных приложениях.
Возможности, которые открываются для пользователей и администраторов благодаря платформе приложений сообществ, безграничны. Уже сейчас доступны к использованию приложения для регистрации на мероприятия и покупки билетов, возможность записаться на услугу или квест, пройти опрос или развлекательный тест. И их число будет увеличиваться.
Как пользоваться
Процесс установки приложения не требует технических навыков и проходит в несколько кликов. На странице управления сообществом в новом разделе «Приложения» Вы найдёте каталог доступных приложений. После установки одного из них можно настроить приватность и изменить текст кнопки.
Все пользователи или подписчики сообщества увидят кнопку под блоком с управлением и настройками или обложкой. Нажав на кнопку, Вы попадёте на экран с приложением.
Каталог приложений сообществ
Рекомендуемые нами приложения собраны в специальном разделе — vk.com/community_apps. В удобном каталоге Вы можете выбрать инструменты для своих сообществ. Приложения представлены в трёх категориях: бизнес, развлечения и мероприятия. Мы активно развиваем раздел, в нём уже доступно более 40 приложений для решения любых задач.
Как создать приложение
Возможности приложений сообществ не ограничены, и мы призываем разработчиков придумывать новые форматы. Платформа полностью открыта для всех. Приложения представляют собой веб-страницы, которые открываются внутри интерфейса ВКонтакте, поэтому при разработке можно использовать любые привычные инструменты. Ознакомиться с документацией можно в разделе для разработчиков: vk.com/dev/community_apps.
Вы сможете найти и добавить приложение из каталога в настройках сообщества (раздел «Управление сообществом», вкладка «Приложения»). Также мы сделали специальный виджет, чтобы добавить приложение с сайта разработчика.
Можно ли разработать собственное приложение сообщества вк
Ваша аудитория — это более 90 миллионов активных пользователей ВКонтакте.
Встраиваемое приложение — приложение размещено на внешнем сайте, страница которого показывается во фрейме или вебвью ВКонтакте. Такие приложения доступны в разделе https://vk.com/apps, каталоге сервисов https://vk.com/services и в пятой вкладке на мобильных клиентах, а также на страницах сообществ с любых устройств.
Для взаимодействия с API и пользовательским интерфейсом используйте Javascript SDK (iFrame-приложение) или Библиотеку VK Bridge (VK Apps).
SDK для iFrame-приложений и React-библиотека VK Bridge для сервисов VK Apps позволяют легко и удобно взаимодействовать с пользовательским интерфейсом и обращаться к методам API. Вы можете построить логику приложения на работе с данными из ВКонтакте или использовать только вспомогательные функции, например, публиковать записи на стене пользователя или загружать фотографии в альбом.
Разместите свое приложение в каталоге и используйте эффективные механики его продвижения — оно не останется незамеченным. Подробнее о продвижении приложений читайте в этом руководстве.
Мы создали Сопротивление для борьбы с генералом Кригом и его организацией «Спектр». Чтобы успешно противостоять такому сильному и коварному противнику, вы должны расширить и укрепить свою базу, а также каждый раз снова и снова давать ему отпор в самых разных точках земного шара!
Разработка приложений в VK mini apps
Почему надо смотреть в сторону разработки приложений для работы в 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-компоненту свой класс, свой обработчик событий, сделать вложенные компоненты любой глубины и так далее.
Существует достаточно подробная (правда, не совсем полная) документация по 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=notify&vk_app_id=888888&vk_are_notifications_enabled=1&vk_is_app_user=1&vk_is_favorite=1&vk_language=ru&vk_platform=desktop_web&vk_ref=other&vk_user_id=111111&sign=fsdfsdgfgfiuoitu8345u34j
Это позволяет уже при старте приложения иметь достаточно полный набор данных, извлеченных из url, чтобы начать персональное взаимодействие с конкретным пользователем. Например, говорить с ним на одном языке — русском, английском или каком-то другом, либо попросить о включении своих уведомлений.
Дополнительные параметры в этот список «ВКонтакте» на ноябрь 2019 года включать не планирует. Однако в url можно передать произвольный хэш, например: youvkapp.ru#custom_param
Роутинг
Если в приложении больше одного экрана (я думаю, это как раз ваш случай), нужен переход между экранами. За показ того или иного экрана отвечает state нашего React-приложения. Что касается организации View, то «ВКонтакте» предлагает два способа: смена активного компонента VKUI View и VKUI Panel.
Каждый View отвечает за свой пользовательский сценарий: основной, дополнительный, вызов справочников, страницы поиска и другие. Внутри View содержится свой набор Panel — это конкретные шаги (экраны) в пользовательском сценарии. Абстрактно это выглядит так:
В state в activePanel мы прописываем id того элемента, который нужно показать.
Верстка и компоненты
Теперь можно посмотреть типичную страницу внутри Panel, созданную с помощью компонентов VK UI.
Библиотека VK UI предоставляет практически полный набор компонентов, необходимых для построения интерактивного приложения: всевозможные элементы форм, попапы, стилизованные алерты, галереи, панели навигации, спиннеры, аватары, футеры и так далее.
Как видно, появился ещё один пакет vkontakte:
Можно воспользоваться удобным менеджером по подбору нужной иконки.
Основное правило — правильно использовать компонент либо собственную верстку шапки. В правой части шапки нативное приложение «ВКонтакте» размещает кнопки управления.
Стоит обратить внимание: «ВКонтакте» заявляет, что компоненты могут отображаться на десктопах не совсем адекватно. Однако их можно стилизовать, добавляя свои css-правила. Например, так была стилизована анимация переходов между панелями в одном приложении:
Эти стили подключаются в общем потоке стилей, подключаемых к вашему приложению.
Библиотека VK Connect
Библиотека VK Connect предоставляет доступ к широким возможностям как самой сети «ВКонтакте», так и к возможностям устройства, если мы работаем из-под мобильного приложения. Для ее подключения нужно установить пакет vkontakte/vk-connect: npm i —save-dev vkontakte/vk-connect.
Среди многочисленных возможностей VK Connect — сканирование QR-кода, получение геопозиции, вызов карточки контактов. Также есть широкие возможности по использованию возможностей соцсети: включение-выключение уведомлений, публикация записей на стене, авторизация сообщества, подписка на сообщения. Их нужно использовать с умом: например, существует ограничение на количество уведомлений — не более одного в сутки. Есть отдельные рекомендации по уведомлениям. Полный список возможностей представлен в документации.
Чтобы наше приложение вообще начало работу, нужно сначала выполнить инициализацию:
Все дальнейшее взаимодействие с библиотекой происходит похожим образом. Методом connect.send вызываем нужное действие и слушаем ответы. Для этого мы должны подписаться на события:
В объекте detail возвращается type — название типа события, ответ на которое мы ждем, и data — набор данных. В примере выше мы слушаем ответ на запрос connect.send(«VKWebAppGetUserInfo», <>), который должен вернуть данные о пользователе приложения: имя, пол, дату рождения, место проживания, ссылку на картинку аватара в соцсети.
«ВКонтакте» не гарантирует поддержку всех событий на всех устройствах (iOS, Android, Web), поэтому лучше делать проверку такой поддержки перед исполнением кода:
VK Connect также обеспечивает поддержку запросов к API VK, если нужно что-то большее, чем может предоставить сама библиотека VK Connect:
VK Pay
VK Pay — это, по сути, удобный фронтенд для использования онлайн-сервиса оплаты с помощью Деньги Mail.Ru. Для вызова платежной формы достаточно открыть платежное окно с помощью вызова в библиотеке VK Connect:
Таким образом, можно продавать ваши услуги и товары, используя внутреннее платежное средство в сети «ВКонтакте». Подробнее в официальной документации.
Можно ли разработать собственное приложение сообщества вк
Вы можете создать новое приложение на этой странице: 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.
При запуске встраиваемого приложения в строке запроса в него передаются различные данные о пользователе, источнике запуска и т.д.
Более подробно узнать о параметрах запуска Вы можете на этой странице.
Приложения сообществ: наращиваем мускулы
Сообщество «ВКонтакте» можно «прокачать» с помощью приложений — они бесплатны и запускаются прямо в соцсети. В результате ваша группа может стать полноценной заменой веб-сайту. Приложения позволяют решать любые задачи: принимать заявки от клиентов и обрабатывать заказы, делать рассылки и опрашивать аудиторию, вести онлайн-запись на прием и продавать билеты.
Владельцы сообществ могут использовать уже готовые приложения из каталога или разрабатывать собственные (не более трех). Ответы на основные вопросы — в Справке.
Как подключить приложения
В меню «Управление сообществом» справа под обложкой выберите пункт «Приложения». В открывшемся каталоге выберите подходящее приложение и добавьте его к себе. Если не понравилось — удалите. Соответствующая кнопка размещена под окном настройки уже установленного приложения.
Создать собственное приложение можно, используя API «ВКонтакте». Но прежде убедитесь, что ваша идея не противоречит Правилам соцсети.
Все методы API, документация для разработчиков и описание специфики создания приложений описаны в Документации.
Пример использования приложений
Мужская парикмахерская ДЯДЯ использует приложение сообщества для записи клиентов.