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

Запуск приложения во Вконтакте

Статья нацелена на начинающих разработчиков, которые хотят запустить свое приложение в социальной сети.
В статье описывается личный опыт создания IFrame-приложения, с нуля, для «Вконтакте», а так же все события которые произошли во время запуска и после, ну и конечно же совершённые ошибки. Можно даже сказать что это не совсем статья, а скорее рассказ.
Помимо рассказа, здесь присутствуют отчеты о нагрузке, попытка монетизации, информация о сервере и разбор кода. Поэтому вы можете переключаться, к интересующим вас пунктам.
Приложением в качестве примера будет выступать – змейка, с небольшой модификацией.
Нетерпеливым, ссылка: vk.com/classic_snake
Тут можно изменять код, (рейтинг пользователей отсутствует): js.do/usr753/snake
Немного истории
Первые проблемы
Монетизация
Сервер, Приложение, Нагрузка
Процесс работы приложения
Змейка изнутри
Что вас ждет после публикации приложения
Выводы

Немного истории

Несколько месяцев назад, на Хабре, была серия постов с заголовком «Игра в 30 строк кода». И так получилось, что я наткнулся на этот пост http://habrahabr.ru/post/202476/ там описывалось создание простой змейки, не успев дочитать его до конца, бросился писать свою. А как написал, поигрался немного и забросил это дело на длительное время.
Но вскоре, загорелся желанием попробовать себя в новой сфере, в разработке приложений для социальных сетей. Тем более игра уже была готова и пылилась в темной, забытой, директории. А сама платформа сулила такими ништяками, как – доступ к большой аудитории, нулевые затраты на раскрутку(при определенных условий). Удобный API и возможность монетизации, разными способами.
Осталось только доработать и загрузить, что я собственно и сделал.

Первые проблемы

После добавления приложения во Вконтакт, оно доступно для установки по прямой ссылке, но недоступно в поиске и не выводится в общем каталоге.
На счету нужно иметь 10 голосов(местная валюта ВК, 10 голосов == 70 руб.), для того чтобы отправить приложение на модерацию, если все нормально и оно соответствует правилам, его добавляют в каталог новых приложений, а списанные голоса возвращают обратно. А если что-то не так, то ваши 10 голосов не возвращаются. Приложение можно будет вновь отправить, после устранения несоответствий.
После того как приложение успешно прошло модерацию, оно попадает на третью позицию в каталоге новых приложений и далее, спускается вниз, а вскоре совсем пропадает. Первые две позиции, в новых приложениях — вроде платные и стоят около 1000 голосов.
Существуют еще негласные правила о которых нигде не написано, их можно узнать только от проверяющего.
Отправил игру на модерацию. Ждать ответа долго не пришлось:

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

Проснувшись утром увидел пришедшую смс’ку: «ваше приложение одобрено и добавлено в каталог… и еще чего-то там».

Сразу кинулся смотреть. Игру установили 57 человек, спустя минуту обновил страницу — 100 человек, 200, 300, 400. Просидел целый день нажимая F5. К вечеру, людей установивших приложение было около 2000. На следующий день – в два раза больше. Через пару дней азарт уже пропал и участников, воспринимал как простые цифры. Кстати, модератор вернул 10 голосов, спасибо ему больше.

Монетизация

Приложение считалось тестовым и его монетизация не планировалась. Спустя пару недель решил повесить рекламу от партнеров ВК, выбрал прелоадер (всплывающая реклама перед загрузкой приложения). Выбрать самостоятельно рекламного партнера не разрешается, а только из списка рекомендованных.
На тот момент, само приложение, опустилось вниз и такого притока аудитории не было как раньше. Когда повесил рекламу было около 2000 уникальных посетителей в день, на следующий день 1700 и с каждым днем все меньше и меньше. Сейчас же, игра отсутствует в новых приложениях, т.е. не весит на главной как ранее, но его можно будет поднять за 1000 голосов.
Спустя пару недель, после того как приложение пропало с главной страницы, его ежедневно посещает 50-250 человек. Так же идет приток аудитории, но небольшой, 5-20 человек в день.
На графике видно, как люди его находят:

Еще бывает что люди удаляют приложение.

А заработок с прелоадера за 2 месяца, составил 76 рублей, за 4500 показов.
Но сам, прелоадер, показывается не всем, а только если пользователь подходит под «определенные параметры», а это 40-60% аудитории. Эти параметры настраивает рекламодатель, тем самым выбирая «свою» целевую аудиторию, которой и будет демонстрироваться реклама.
В эти параметры входят: интересы, вкусы, книги, ваша музыка, ваш браузер и все то, что вы сами указали на своей странице. Одним словом – Таргетинг.

Сервер, Приложение, Нагрузка

В качестве сервера выступал простенький VPS с такими характеристиками:
Debian 32-bit, RAM: 512mb, CPU: 500Mhz*2 – все это за 210 рублей в месяц.
Установленное ПО:
Nginx – для раздачи статики, а для обработки данных, nginx перенаправляет запросы к Apache2+PHP+MySQL.
Сама же игра написана на HTML(4.0) + JavaScript и немного CSS, без использования фреймворков и без разных библиотек.
Все это было собрано из разных js/css модулей в один файл и пропущено через YUI Compressor для сжатия. В итоге был один html файл весом в 20-30кб, полноценная игра с рейтингом + пару картинок, одна для фона, вторая — лоадер, для отображения загрузки.
Эти несколько килобайт, дали больше полтора гигабайта трафика. По этому, если ваше приложение много весит, приготовьтесь платить за трафик.
Посетителей за все время:

А что касается нагрузки, максимальное число посетителей в день, было 6 тысяч человек.
Может для кого-то это и мало, а я честно говоря не ожидал что сервер выдержит. Напугали меня разные статьи, что мол сервера крутые нужны. А как оказалось, что и этого «много», используется 5-20% ресурсов из 100.
Загрузка процессора не поднималась выше 12% и то, если поднималась то на секунду и тут же становилось 0%, обычно прыгает с 0 до 4%.
А использование RAM, не превышало 200Мб, даже когда буфер InnoDB с 8мб поднял до 32мб, на всякий случай.
Возможно такие показатели из-за следующей архитектуры приложения, или из-за нетребовательных операций.

Процесс работы приложения

После того как пользователь заходит на страницу, он загружает один html-файл(игру), далее ajax’ом получает список пользователей(Топ100, размером в 5кб), свою позицию в рейтинге и счет, все в XML.
Далее все происходит на одной странице, с сервера больше ничего не грузится.
Пользователь может повторно запросить обновленные данные других участников, при нажатии на кнопку, или отправить свой результат на сервер.
После того когда xml-список пришел к клиенту, со счетом и идентификатором пользователей VK, формируется рейтинг. Мы запрашиваем данные, через API, первых 10 пользователей. И выводим: «Имя+Фамилию и их общий счет». Если пользователь нажал на кнопку «далее», то происходит новое обращение к API, а старые данные мы не затираем, а кешируем, т. е. Повторно обращаться к API мы не будем, если мы эти данные ранее получили. А в самой Базе Данных мы храним их id’шники, счет и прочую техническую информацию.
Еще, главное настроить индексы, чтобы данные брались от туда, а не читались с диска.

Змейка изнутри

Напомню, что речь идет о «змейке», далее ее код будет разбираться. Если вы решили сами написать змейку, то можете пропустить этот пункт, а то получится как в известной фразе: «убийца – дворецкий».
В код мало кто полезет, по этому опишу сначала словами алгоритм, а потом уже и код посмотрите.
Сперва генерируется поле из простых div’ов. Координаты указаны в качестве идентификатора div’а, которые позволяют обратится к любой клетке. Далее создаем змейку на этом поле, путем выделения клеток, цветом и заносим координаты тела змейки, в многомерный массив.
Потом создается бонус(еда для змейки). Опять сохраняем в массив координаты бонуса.
После того когда бонус съеден, мы собираем пустые клетки в массив (без клеток на которых находится сама змейка) и из них, выбираем случайным образом другую клетку, и уже ее делаем бонусом. Если пустых клеток не обнаружено то пользователь – победитель.
При движении, в массиве, мы меняем только две клетки, заднюю – удаляем, а переднюю (незанятую змейкой), по направлению движения – красим в цвет змейки. И при каждом ходе проверяем, не столкнулись ли мы с хвостом, или с бонусом.
А для того чтобы проходить через стены, мы проверяем, если следующий клетки не существует впереди, то в массив-координат змейки, пишем – 0 (первая позиция, начало строки), либо последнюю. В зависимости от направления движения.
Пример:
X=100. Y=200.
Змейка движется сторону X++, с нулевой позиции.
0,1,2,3..99, . А с Y, тоже самое.
Теперь разберем небольшую модификацию.
В этой модификации я сделал бонус убегающим от змейки. Через какое-то время бонус меняет направление и если сталкивается с хвостом змейки, а не головой, то поедает ее. И будет кушать до тех пор, пока от змейки ничего не останется, но она может спастись, если свернет с направления бонуса.

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

Что вас ждет после публикации приложения

Так как приложение планировалось изначально без рейтинга, оно было полностью сделано на JavaScript, на клиентской стороне, т.е весь код доступен каждому и каждый «знающий» мог отправить свое число в место заработанного результата.
Основные фильтры на «важных» участках были выставлены. Но контроль входящего результата был слабый и мог прийти настоящий результат, а мог прийти и такой «999999». Причем приходил такой результат от школьников, которые пользовались программами для взлома типа «Charles», как мне радостно они сообщали в личку, со своих реальных аккаунтов и с реальных ip-адресов.
Написал метод который дублировал результат. В одном параметре передавался реальный, в другом шифрованный результат, методом замены символа по ключу. А далее, на сервере оба сравниваются и если что-то не соответствует, то – бан по аккаунту.
И еще, сервер отправляет сгенрированный ключ при первом обращении. Клиент же, должен его вернуть с результатом. Без этого ключа, результат не примется и если все соответствует, и все проходит проверку, то результат записывается в БД, и генерируется новый ключ, который опять отдается клиенту. Это сделано для того, чтобы повторно запрос с результатом не могли отправить, как делается в программе «Charles».
Тут, школьники уже отсеялись. В личку стали писать студенты, которые знают JavaScript.
После внедрения дополнительных проверок, вроде бы уже никто не пишет. Так как всего одна попытка и в случае чего бан аккаунта ВК.
А так, по хорошему, все вычислительные процессы нужно переносить на сервер, чтобы ничего не могли подменить, но, вот тут возможна та самая высокая нагрузка.
Еще будут писать кидалы предлагающие купить у вас приложение от 3000руб и до 3000$, которых если погуглить, то можно будет наткнутся на не совсем лестные отзывы, о них.
Школьники, с разными деловыми предложениями, стать админом группы, или админом приложения. Будут еще спрашивать: «в какой программе ты создал эту игру».
Советчики, которые знают как лучше развивать ваше приложение.
Тролли, куда же без них.

Выводы

Финансовая сторона:
Домен – 200руб в год.
SSL Сертификат (обязателен) – первый год бесплатно у startssl.com, а так, стоит от 1500руб. Самоподписанный сертификат не подходит.
VPS – 420руб за два месяца.
Затрачено на раскрутку – 0руб. Правда кинул 100руб на рекламу, чисто посмотреть что будет. 25.000 показов. 12 переходов. 5 установок.
Доход с рекламы – 76руб.
Прибыль: -544руб+затраченное время.
Но главное – полученное удовольствие от процесса.
Если разрабатывать приложение нацеленное на прибыль, то только с методами удержания пользователей, потому-что со временем они будут убавляться.
Монетизацию за счет рекламы нужно рассматривать как дополнительный источник дохода, а не как основной и то, если ежедневное количество пользователей превышает тысячный порог.
Видать поэтому столько приложений, которые торгуют виртуальными товарами за реальные деньги, потому-что не выгодно иначе.
Ну и напоследок, статистика браузеров:
И суточное время активности пользователей:
Скриншоты со статистикой из Вконтакте и Яндекс-Метрики.
Всем спасибо за внимание.

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

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

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

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

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

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

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

После выбора идеи внимательно ознакомьтесь с документацией ВК, которая предназначена именно для разработчиков. Чтобы узнать подробнее, перейдите по ссылке vk.com/developers. Затем перейдите в раздел «Документация» и внимательно его изучите полностью.

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

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

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

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

Через ВК

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

  • Зайдите на главную страницу сайта Vk Developres (https://vk.com/dev). Вы должны быть авторизованы в социальной сети.
  • Перейдите во вкладку «Мои приложения».

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

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

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

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

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

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

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

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

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

  • конструктор 3apps.ru;
  • Appmarkt;
  • iBuildApp;
  • AppGeyser.

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

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

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

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

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

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

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

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

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

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

  • Появится строка поиска, где нужно написать http:\/\/. Откроется список ссылок.

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

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

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

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

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

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

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

  1. Standalone-приложение является универсальной платформой для дополнения. Благодаря использованию этого типа приложений вам будут доступны все существующие типы запросов к API ВКонтакте. Чаще всего Standalone-приложение используют при необходимости отправки запросов к API VK из программ, работающих под различными операционными системами.
  2. Платформа с типом веб-сайт позволяет обращаться к API ВКонтакте с любого стороннего ресурса.
  3. Встраиваемое приложение предназначено для создания дополнений исключительно на сайте VK.com.

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

Кроме прочего, стоит отметить, что «Встраиваемое приложение» имеет три подтипа:

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

Непосредственно сам процесс создания неспособен вызвать трудностей.

  1. Откройте сайт ВК и перейдите на главную страницу VK Developers.
  2. Здесь переключитесь на вкладку «Документация» в верхней части страницы.
  3. В соответствии с вашими интересами, внимательно изучите весь материал и не забывайте в процессе работы над приложением обращаться к этому разделу ВК в случае возникновения побочных вопросов.
  4. Чтобы приступить к созданию дополнения, необходимо переключится на вкладку «Мои приложения».
  5. Нажмите кнопку «Создать приложение» в правом верхнем углу страницы или кликните по идентичной надписи в самом центре открытого окна.
  6. Назначьте имя вашему приложению с помощью поля «Название».
  7. Установите выделение рядом с одним из типов платформы в одноименном блоке.
  8. Нажмите кнопку «Подключить приложение», чтобы создать дополнение для выбранной платформы.
  9. Текст, размещенный на кнопке, может отличаться в зависимости от выбранной платформы.

  10. Подтвердите свои действия с помощью отправки СМС-сообщения с кодом на привязанный к странице номер телефона.

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

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

Мы рады, что смогли помочь Вам в решении проблемы.
Добавьте сайт Lumpics.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).

При размещении вы также можете включить «Режим разработки». Он позволяет пользователям «ВКонтакте», назначенным в качестве администраторов приложения, использовать для тестирования каждой из трех витрин отдельный адрес. То есть открывая приложение, обычный пользователь увидит то, что расположено по условном адресу yourapp.com, а администратор — test.yourapp.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. Соответственно, максимально простая установка:
npm i —save-dev @vkontakte/vkui
Обязательно нужно поставить следующий метатег в head верстки страницы вашего приложения, иначе на устройствах с iOS будет неправильно отображаться нативная навигация «ВКонтакте»:
<meta content=»width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover» name=»viewport» />
Далее нам нужно просто встроить 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 — это конкретные шаги (экраны) в пользовательском сценарии. Абстрактно это выглядит так:

import {Root, View, Panel} from ‘@vkontakte/vkui’; <Root activeView={this.state.views.activeView}> <View id=»main» activePanel={this.state.views.main.activePanel}> <Panel id=»step-1″> … </Panel> <Panel id=»step-2″> … </Panel> </View> <View id=»search»> <Panel id=»search-panel»> … </Panel> </View> <View id=»info» activePanel={this.state.views.info.activePanel}> <Panel id=»oferta»> … </Panel> <Panel id=»conditions»> … </Panel> <Panel id=»about»> … </Panel> </View> </Root>
В state в activePanel мы прописываем id того элемента, который нужно показать.

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

Теперь можно посмотреть типичную страницу внутри Panel, созданную с помощью компонентов VK UI.
Библиотека VK UI предоставляет практически полный набор компонентов, необходимых для построения интерактивного приложения: всевозможные элементы форм, попапы, стилизованные алерты, галереи, панели навигации, спиннеры, аватары, футеры и так далее.
import { Button, Div, FormLayout, Input, Panel, PanelHeader, PanelHeaderBack, Search, View } from «@vkontakte/vkui»; import Icon36Done from «@vkontakte/icons/dist/36/done»; import CustomTextarea from «./YourComponents/CustomTextarea»; render() { return ( <div> <PanelHeader left={<PanelHeaderBack onClick={() => {this.Actions.historyBack()}} />} >App Title</PanelHeader> <Icon36Done width={48} height={48} /> <Div> <h1>This is the first page</h1> <p className=»page-hint»>You can do some interaction here</p> </Div> <FormLayout> <Input type=»text» defaultValue=»» placeholder=»Enter your name» className=»active» /> <CustomTextarea name=»textarea1″ className=»custom» disabled={this.state.blocks.textarea.disabled} value={this.state.userData.textarea} /> <Button size=»xl» level=»secondary» >Submit</Button> </FormLayout> <Search value={this.state.search.text} onChange={this.onSearch} /> </div> ) }
Как видно, появился ещё один пакет vkontakte:
npm i —save-dev @vkontakte/icons
Можно воспользоваться удобным менеджером по подбору нужной иконки.
Основное правило — правильно использовать компонент либо собственную верстку шапки. В правой части шапки нативное приложение «ВКонтакте» размещает кнопки управления.
Кастомный блок:
import { Textarea } from «@vkontakte/vkui»; export default class CustomTextarea extends React.Component { render() { return ( <div className=»form-group custom_textarea»> <div className=»FormLayout__row-top»>Custom textarea is here</div> <Textarea disabled={this.props.disabled} name={name} id={name} onChange={(e) => this.bindData(e, this.props.name)} value={this.props.value} className={this.props.className} /> </div> </div> ); } }
Стоит обратить внимание: «ВКонтакте» заявляет, что компоненты могут отображаться на десктопах не совсем адекватно. Однако их можно стилизовать, добавляя свои css-правила. Например, так была стилизована анимация переходов между панелями в одном приложении:
.desktop_web { .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-кода, получение геопозиции, вызов карточки контактов. Также есть широкие возможности по использованию возможностей соцсети: включение-выключение уведомлений, публикация записей на стене, авторизация сообщества, подписка на сообщения. Их нужно использовать с умом: например, существует ограничение на количество уведомлений — не более одного в сутки. Есть отдельные рекомендации по уведомлениям. Полный список возможностей представлен в документации.
Чтобы наше приложение вообще начало работу, нужно сначала выполнить инициализацию:
import connect from ‘@vkontakte/vk-connect’; connect.send(«VKWebAppInit», {});
Все дальнейшее взаимодействие с библиотекой происходит похожим образом. Методом 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», {«method»: «users.get», «request_id»: «your_unique_req_id», «params»: {«user_ids»: «1», «v»:»5.103″, «access_token»:»your_token»}});

VK Pay

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

ВКонтакте объединил миллионы людей, создавая безграничные возможности для общения. Сегодня, ни для кого не секрет, что сайт vk.com стал самой популярной социальной сетью в России и странах СНГ.

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

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

Социальная сеть (от англ. social networks) — это сайт, который позволяет зарегистрированным на нём пользователям размещать информацию о себе и общаться между собой с другими участниками.

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

Приложения Вк на Андроид

1. ВКонтакте

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

Основные возможности:

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

2. Kate Mobile

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

Преимущества:

  • Режим невидимки (можно заходить в ВК оставаясь оффлайн).
  • Изменение цветового оформления Вконтакте.
  • Выбор размера шрифта.
  • Блокировка рекламных записей.
  • Оставление просмотренных смс не прочитанными.
  • Установка пин-кода.

3. ВК гости

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

Особенности:

  • Просмотр гостей вашей странички.
  • Определение ваших поклонников.
  • Ловушка для гостей.

4. Музыка для ВКонтакте

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

Возможности:

  • Удобный музыкальный плеер.
  • Создание своего плейлиста.
  • Прослушивание музыки в режиме оффлайн (после скачивания).
  • Удобный поиск аудиозаписей.

5. VK Live

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

Функции:

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

6. Наборы стикеров

Просто бесплатные стикеры для социальной сети ВКонтакте, которые отправляются как реальные стикеры, а не в виде картинок.

Главные преимущества:

  • Большой и часто обновляемый каталог.
  • Поиск по названию и категориям.
  • Можно найти уникальные стикеры.
  • Отправка png изображений в виде стикеров.

7. Полиглот ВКонтакте

Ещё одно неплохое бесплатное приложение для вк с множеством интересных возможностей.

Особенности:

  • Функция “нечиталка” (собеседник не видит, что вы прочитали сообщение).
  • Режим “невидимка” (работает с ограничениями, т.к. администрация vk.com отключила эту возможность).
  • Обмен лайками.
  • Мультиаккаунт (можно подключить до 4-х аккаунтов).
  • Чёрная (ночная) тема.
  • Очистка стены и отписка от всех групп одним нажатием.
  • Установка своего фона для чатов.
  • Включение PIN кода.

8. ВКонтакте Amberfog

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

Плюсы:

  • Режим “Невидимка”.
  • Мультиаккант.
  • Пин-код.
  • Дизайн Material Design.
  • Не нужно заходить в профиль, чтобы увидеть, когда ваш друг был в онлайн.

9. Ночной ВК

Новый неофициальный клиент для ВКонтакте с ночным режимом.

Преимущества:

  • Черный дизайн.
  • Режим День-Ночь (автоматическое включение черной темы с наступлением тёмного времени суток).
  • Поддержка оффлайн доступа.
  • Неограниченное количество разных аккаунтов.
  • Функция “нечиталки” сообщений.
  • Установка разных картинок на каждый чат.
  • Показывает когда ваши друзья были в сети и с какого устройства.

10. VPN Browser для ВКонтакте

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

Приложение бесплатное и предназначено для жителей из Украины, в связи с блокировкой российских соцсетей в этой стране.

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

Нажмите на звезду, чтобы оценить!

Отправить оценку

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *