Для чего нужна программа Вконтакте

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

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

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

ОБЗОР ПРИЛОЖЕНИЯ VK 2022 + История Вконтакте

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

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

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

• бесплатный трафик из каталога, который доступен в разделе «Сервисы» в главном меню приложения VK;
• виральные механики для распространения приложения — красивые сниппеты для постов, публикация в ленту и истории прямо из сервиса;
• сокращение затрат на коммуникацию — возможность отправлять бесплатные push-уведомления с согласия пользователя, интеграция с чат-ботами и сообщениями сообщества;
• упрощённое оформление заказа — если пользователь согласится, контактные данные из его профиля будут подгружаться прямо в форму покупки, а оплатить заказ можно через VK Pay.

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

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

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

Как устроено мобильное приложение ВКонтакте?

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

С помощью WebView и VK UI были созданы некоторые экраны приложения VK — это позволило нам ускорить его разработку в несколько раз. Именно так мы писали экраны для создания сообщества и управления им, запуска рекламных постов и жалоб на контент. Всю документацию, полезную информацию и примеры сервисов для разработчиков можно найти в сообществе VK Mini Apps: vk.com/vkappsdev

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

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

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

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

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

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

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

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

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

В новом году появился новый виральный сервис —Tool 42 (vk.com/tool42). С его помощью пользователь может узнать, как давно зарегистрирован ВКонтакте, кто из друзей или друзей друзей добавил его в чёрный список, а также какие записи на странице или в сообществе наиболее популярны по разным показателям: отметкам «Нравится», комментариям, просмотрам. Создал сервис за пару ночей, «когда было свободное время», программист Павел Громадчук. Он хотел получить опыт разработки на React и реализовать полезные функции, которых, на его взгляд, не хватало в VK.

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

Vsemayki.ru. Быстрые заказы и оплата через VK Pay

Vsemayki.ru — это интернет-магазин по печати принтов на одежде и сувенирах с полумиллионом заказов в год. Свой сервис на VK Mini Apps Vsemayki.ru (vk.com/app6800340) запустили в конце января 2019. Это был эксперимент: создателям хотелось проверить перспективность новой платформы в плане продаж. В итоге они стали одним из первых интернет-магазинов, которые представлены в каталоге. В сервисе быстро оформляются заказы за счёт автозаполнения формы с разрешения пользователя.

5 неожиданных преимуществ приложения ВК

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

Руководство TikTok заявило о невозможности выкладывать ролики в России, Инстаграм вот-вот заблокируют. Одной Телегой сыт не будешь, согласитесь? Как бы приложение от Дурова не был крут, это всего лишь мессенджер, верно? Сегодня предлагаю разобрать крутые фишки ВК, о которых мы раньше и подумать не могли.

Кажется, мы начали забывать про фишки ВК. Самое время освежить память.

Какое облачное хранилище выбрать и что сделать, чтобы не потерять данные.

Лучший аналог ТикТока

Клипы ВК появились еще летом 2020 года. Хоть сервис и заявляет, что в сутки видео в VK набирают 750 миллионов просмотров, и ежемесячная аудитория прямых трансляций — 45 миллионов человек, с известным ТикТок это никак не сравнится.

Сервис Клипы ВК уже сейчас может похвастаться хорошими охватами. Дальше — больше.

Признаюсь, даже при живом ТикТок и Инстаграм со своими Reels я иногда залипал на клипы ВК, но происходило это всегда случайно. Многие, наверное, заметили, что ВК постоянно занимается рекомендациями своих клипов. Это и заставляло туда заходить. Листаешь ленту, а тут подборка с видео ни с того ни с сего — ну неужели мимо пройдешь?

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

Чем вам не ТикТок?

Плюс, знаю тех людей, которые зарабатывали на коротких видео. Эти ребята уже вовсю трудятся над интеграцией в отечественный сервис. Уверен, что аккаунты юристов, врачей, дизайнеров, психологов, которые были в Инстаграм, быстренько перенесут все сюда. Потеряет ли от этого российский пользователь? По-моему, только выиграет.

Чем заменить Инстаграм

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

Сомневаюсь.

Сториз в ВК тоже есть. Привыкать долго не придется.

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

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

Подписывайтесь на нас в Яндекс.Дзен, там вы найдете много актуальной информации из мира Android и не только. Плюс, каждый день в Дзене выходит по 2 эксклюзивные статьи, которых нет на сайте. Давайте двигаться вместе!

Приложение для знакомств

Сервис Знакомства в ВК появился буквально недавно. Честно скажу, я на него возлагал большие надежды с самого начала. Как ни крути, а ВК для молодежи старше 20 лет долгие годы был основным приложением. Где как ни здесь можно узнать об истинных интересах человека без кучи пафосных фотографий?

ВК Знакомства однозначно круче Тиндера. Спорить даже нечего.

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

Найти ВК Знакомства несложно. Сервис находится в специальной вкладке Сервисы в нижней части дисплея. Там же располагаются Сообщества, Видео, Стикеры, Игры и прочее.

Где слушать музыку без ограничений

Не забывайте и про отечественный аналог Spotify — Boom. Даже при живых зарубежных стриминговых сервисах многие мои знакомые пользовались именно Boom. А кто-то имел сразу по несколько подписок и слушал музыку на разных площадках.

Многие уже сейчас подписаны на ВК Музыку и горя не знают.

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

Для многих абсолютно нормально не найти песню в Spotify или Apple Music и обратиться к ВК Музыке. Что уж там, я сам такой же. В общем, нет худа без добра. Даже если полностью отрежут доступ к стриминговым сервисам, проживем с ВК, это не проблема.

Другие фишки приложения ВК

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

• Подкасты. Отличная замена Google Podcasts и Spotify. Не хватает крутых рекомендаций.
• ВК видео. Отличный сервис для просмотра видео. Не хватает контента (из-за монетизации).
• ВК Здоровье. Учет приема лекарств, тренировки, дневник питания, контроль симптомов. Не хватает интеграции с умными часами и приложением Google Fit.
• Трансляции. Аналог прямых эфиров в Инстаграм. Нужны рекомендации на прямые эфиры друзей друзей.

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

А вы пользуетесь ВК? Как думаете, сможет он заменить нам вышеперечисленные сервисы? Свое мнение предлагаю оставить в комментариях ниже или в нашем Телеграм-чате. Будет интересно прочесть.

Теги

• Google Play
• Новичкам в Android
• Приложения для Андроид

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

connect.send(«VKWebAppCallAPIMethod», >);

VK Pay

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

connect.send(«VKWebAppOpenPayForm», >);

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

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

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

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