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

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

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

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

1. Сперва перейдём на сайт Chatovod.ru и создадим там чат. Я думаю, что описывать данный процесс не потребуется, поскольку там всего лишь необходимо будет заполнить формы.
2. Далее необходимо войти со своей страницы в социальную сеть ВКонтакте и перейти в раздел «Разработчикам» (он находится в самом низу страницы).
3. В этом разделе необходимо создать приложение. Название и описание выбираете какое душе угодно, а вот тип приложения укажите «IFrame/Flash приложение».
4. После этого пункта нажмите «Приложение» и установите категорию «Общение», а далее перейдите собственно к его загрузке в социальную сеть.
5. В следующем шаге вам потребуется подтвердить права на управление с помощью СМС сообщения. Как только оно придёт, введите в соответствующее поле код и оставайтесь на данной странице, закрывать не нужно.
6. Теперь войдите на ранее созданную страницу с чатом на Chatovod и в разделе «Чат», который расположен в верхнем правом углу, выбираете пункт «Установить на свой сайт». Теперь скопируйте код под номером 2.
7. Теперь потребуется возвратиться на страницу с приложением ВКонтакте и в разделе настроек выбрать следующее:

— Состояние: Приложение включено и видно всем;
— Первый запрос к API: Здесь вставьте скопированный код под номером 2;
— Установка приложения: Без понятия, что тут писать :);
— Тип приложения: IFrame;
— Адрес IFrame: Скопируйте ссылку на ваш чат, например, http://home-vk.chatovod.ru;
— HTTPS адрес: Данное поле заполнится автоматически после заполнения адреса;
— Размер: 1000х620.

8. Теперь сохраняем всё и любуемся установленным чатом. Так же вы можете отредактировать некоторые настройки на свой лад в разделе управления приложением.

Поделиться «Как создать чат-приложение во ВКонтакте»

Источник

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

Вы можете создать новое приложение на этой странице: 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.

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

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

Источник

Создаем чат ВКонтакте

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

Чат ВКонтакте

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

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

Создаем чат

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

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

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

Тип сообщества значения не имеет.

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

Настраиваем чат

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

Если вы получаете ошибки, исправьте их в соответствии с уведомлением.

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

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

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

После активации чата произойдет автоматическое перенаправление в данное приложение.

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

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

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

Удаляем чат

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

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

При повторном создании чата все поля вам придется заполнять заново.

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

Помимо этой статьи, на сайте еще 12453 инструкций.
Добавьте сайт Lumpics.ru в закладки (CTRL+D) и мы точно еще пригодимся вам.

Отблагодарите автора, поделитесь статьей в социальных сетях.

Источник

Как создать беседу с несколькими участниками ВКонтакте – подробное руководство

Рад новой встрече на страницах блога, ребята!

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

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

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

Что такое беседа во ВКонтакте?

Беседа – это общий чат, где, в отличие от диалога, общение происходит с несколькими людьми одновременно.

Иными словами, это интерактивная конференция, где участники могут постоянно обмениваться текстовыми и голосовыми сообщениями, видео, аудио, документами и другими материалами. Также можно лично обращаться к кому-либо, отметив имя человека внутри чата.

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

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

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

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

Создание беседы с компьютера

Первый способ

С компа заходим в свой аккаунт ВКонтакте, переключаемся на вкладку “Сообщения”.

Вверху, над всеми текущими диалогами, справа от поля “Поиск” находится иконка с плюсом, при наведении на которую появляется надпись “Начать беседу”. Нажимаем на нее.

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

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

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

Итак, при выделении двух и более друзей внизу появляется ссылка “Создать беседу”, а слева от этой кнопки можно ввести ее название. Например, “Поток 5” или “Менеджеры ночной смены”, все зависит от того, что вам нужно. Тут же можно загрузить фото-обложку чата.

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

В качестве фото для конференции – коллаж из аватарок четырех случайных участников. А названием станет перечисление имен участников по алфавиту.

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

Второй способ

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

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

Как создать беседу с телефона?

С телефона заходите в официальное приложение. В разделе “Сообщения” вверху над всеми диалогами точно так же находим иконку с плюсом. Жмем на него.

Выбираем “Создать беседу”.

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

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

Создание в мобильной версии сайта

Запускайте с телефона любой браузер, переходите на vk.com и заходите в свой аккаунт.

Далее заходите в сообщения и нажимайте внизу на ссылку “Полная версия”.

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

Добавление людей не из френд-листа

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

Заключение

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

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

Источник

Разработка приложений в 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:

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

Источник