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

Создание приложения VK Mini App: взгляд изнутри

Всем привет! Хочу рассказать про разработку приложения для ВКонтакте под названием VK Mini App: что это, для чего это и как вообще устроено.

3936 просмотров

Пару лет назад я написал на vc.ru статью о своем проекте Фотопланета, которая попала в подборку за месяц, что и сподвигло меня разработать приложение VK Mini App Фотопланета, опубликовать его в каталоге и поделиться полной информацией о процессе, которой мне ой как не хватало на старте.

Что такое VK Mini App?

По сути — это веб-приложение, написанное HTML+CSS+JS и запускаемое внутри ВКонтакте: на vk.com / m.vk.com и в мобильных приложениях.

Отмечу, то необязательно делать поддержку сразу 3-х платформ, а также уточню, что в мобильных приложениях для iOS есть режим ODR, с которым не все так просто и об этом будет сказано ниже.

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

Создание VK приложения для андроид за 5 минут

Зачем это и что это дает?

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

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

И в-третьих, вы имеете возможность получить доступ к таким штукам, которые или недоступны или ограниченно доступны на JS. Пример: информация о фонарике.

Как это выглядит?

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

Между vk.com и m.vk.com есть разница: например, открыть нативный просмотрщик и показать в нем фото можно в m.vk.com и нельзя в vk.com

Как это устроено технически?

Для сайтов vk.com и m.vk.com приложение запускается в , в мобильных приложениях — в WebView. И если с Андроидом все однозначно, то на iOS возможны два пути:

• ODR — режим: тут все отлично выглядит и принцип работы аналогичен принципу для Android.
• и не ODR — режим: приложение будет открываться в m.vk.com, который будет открываться в WebView (как будто вы открыли ссылку в любимом мессенджере). Минус тут не только в таком отображении, но и в том, что аутентификация иногда слетает и вам придется вводить логин и пароль заново (это просто не юзер-френдли).

Код вашего приложения размещается или на вашем сайте или на поддерживаемом из коробки хостинге статики ВК. Но ODR же устроен по-другому.

ODR (только для iOS)

Чтобы ваше приложение работало в ODR (простыми словами — работало “нормально”) нужно иметь аккаунт разработчика Apple (стоит от 99$ в год) и указать необходимые сведения в настройках приложения.

Vk Mini Apps — Создание сервиса ВКонтакте

Далее, вы создаете ZIP-архив файлов. Не забываем про корректную работу с CORS и про то, что приложение должно запускаться просто открыв index.html

Осталось лишь понять, доступен ли ODR-режим? Если да, то у вас на айфоне приложение будет запущено именно в нем:

• ODR доступен администрации приложения (это настраивается и можно добавлять туда просто “тестеров”) сразу после его загрузки в кабинете разработчика. Класс!
• Для всех остальных (хотя.. не всех?): вы отправляете архив на проверку модератором (он просто смотрит факт работы, не вдаваясь в детали), получаете апрув и со следующим обновлением приложения ВКонтакте (еще и Apple должна дать “добро”) ODR становится доступен всем. Как вы понимаете, это не так быстро.

Да, ODR обязателен для каталога, если вы собираетесь поддерживать iOS.

Итак, вы разработали приложение и можете давать пользователям им наслаждаться. А если вам не нужен ODR или вы вообще iOS не планируете поддерживать, то модерации, получается, вообще нет.

Размещение приложения в каталоге дает пользователей. Как? Да вот так:

• “Новые”. Выходит не так много много новых приложений и ваше точно будет не обделено вниманием.
• Фичеринг: по какой-то причине ваше приложение понравится ВК и вам дадут еще трафика.
• Размещение в категориях: да, в категориях каталога мало приложений и ваше приложение не останется незамеченным.
• Уже открывали приложение? ВК об этом пользователю напомнит: прекрасная возможность для повышения retention.

Но как попасть в каталог? Скажу так: модерация в App Store и Google Play (да, тут она тоже есть) покажется цветочками, но с другой стороны — это и плюс, ведь чем сложнее, тем интереснее:)

Определяемся с тем, для кого приложение

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

Отправка приложения

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

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

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

• Кажется, что модератор не читает свои же сообщения: у меня было А, сказали — Б, сделал, потом сказали А, потом опять Б.
• То, что все требования не публикуются изначально — это не удобно. Думаешь, что уже все сделано и тут бах — новый список.

Но вот прошло время, вы пофиксили или уже отстояли свою позицию. Теперь в каталог? Неет, теперь в Testpool: иными словами, вам создают продукт и вы попадаете в Баг-трекер.

В Баг-трекере сотни тестировщиков будут создавать задачи (мне создали более 100), а потом еще и проверять их выполнение.

• Абсолютно все задачи составлены грамотно: коротко и ясно.
• Все тестировщики адекватные люди, с которыми комфортно общаться и опять же, отстаивать свою позицию.
• Приложение “вылизывают”, даже помогают в орфографии.

• Присутствуют мелкие замечания, которые не являются ошибками, а скорее просто пожеланиями. Почему это в “минусах”? Потому, что это отнимает время, а пользы не приносит, ну и задерживает публикацию в каталоге.

Сделали все? Супер, самое время обновить приложение, а тестировщикам дать возможность проверить все исправления.

И вот тут теперь наступает важный момент: ODR вы обновили, но стал ли он доступен тем, кто помогает вам сделать приложение лучше?

В официальном чате мне сказали — нет, только после проверки модератором и после обновления приложения ВК. Но как показала практика, все же это не так: ODR сразу становится доступен тем, кто участвует в тестировании продукта. Это здорово!

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

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

Что доступно после того, как вас одобрят:

• Самое главное — это красивый адрес приложения.
• Оценка приложения: Performance, Best Practices и Progressive Web App, выраженные в процентах.
• Ну и настройка баннера для каталога.

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

Про дизайн

Чтобы разработать приложение полностью в стиле ВК, вы можете использовать официальную библиотеку VKUI, которая представляет собой набор React-компонентов.

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

• Нет встроенного роутера, я писал свой, хотя есть сторонние решения.
• Сложность разработки возрастает сильно, если ваше приложение не “пара экранов с простой логикой”, основная проблема — навигация.

Если вы разрабатываете приложение без каталога, то можно использовать любой дизайн. Если вы отважитесь на каталог, то тут действует правило “да, но нет” касательно выбора дизайна: VKUI приветствуется и обязательно в плане соблюдения (если будете делать на нем), но можно делать и на другом дизайне.

На что обратить внимание?

• Swipe Back на iOS и кнопка Назад на Андроиде: обязательно сделайте, без этого приложением пользоваться неудобно.

• Светлая и темная тема: также реализуйте, без этого приложение будет смотреться странно.

• Также обратите внимание на то, как правильно указывать платформу в коде.
• Используете localStorage? Учтите, что он не доступен в в режиме “инкогнито”.

Монетизация

Внимание! Перед использованием проконсультируйтесь со специалистами (поддержка ВК).

Сам я монетизацию не делал, но основное, что хочется сказать про это:

• Цифровые товары запрещено продавать на iOS, а для других платформ нужно принимать оплату голосами. Кто-то делает через VK Donut, но тут лучше смотреть первый абзац в этом разделе.
• Возможна установка рекламы — это, можно сказать, доступно из коробки. Не забывайте, что миллионы вы не заработаете на 10 посетителях в день: тут нужен хороший трафик и качественное приложение.

Что дальше?

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

• Размещение в Одноклассниках — я пока не пробовал, но обязательно попробую, судя по документации, там не должно возникнуть сложностей.

Спасибо, что дочитали до конца, надеюсь статья вам будет полезна, если планируете работать с VK Mini App. И если вы решили сделать приложение и разместить его в каталоге, то желаю ему не только туда попасть, но и развиваться! Почему? К сожалению, есть несколько примеров классных приложений (да еще пропиаренных самим ВК), которые после релиза не обновляются ни технически, ни в плане контента, видимо, стали неинтересны авторам:(

10 комментариев
Написать комментарий.

А есть ли смысл вкладываться в такие приложения? Мб лучше сфокусироваться на гугл плей и эппл маркете, нежели чем еще в такие ниши заходить?

Развернуть ветку
Развернуть ветку

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

Развернуть ветку

Предположу, что вы все же использовали какое-нибудь VK Mini App, но не обращали внимание: например, «Такси».

Развернуть ветку

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

Развернуть ветку

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

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

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

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

Как сделать приложение «ВКонтакте» самому: бесплатный конструктор

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

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

Приложения «ВКонтакте»

Прежде всего, что собой являет поставленная цель? Приложение в «ВКонтакте» — это программное обеспечения, для разработки которого необходимо знание как минимум 4-х языков программирования. Также необходимо понимать API, которое предоставляется самой социальной сетью. Конечный результат должен быть (для успешного существования) представлен не только самой программой, но и базой данных, а также файлами и скриптами, которые будут осуществлять обмен информацией между ними.

Возможные типы

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

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

Можно ли воспользоваться конструктором?

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

Максимум, на что они способны – это создание автономных приложений, которые будут обладать простейшим функционалом. А как же тогда сделать своё собственное приложение? Есть четыре основных варианта:

1. С помощью конструктора.
2. Своими силами.
3. Создать и возглавить группу разработчиков.
4. Заказать платное создание.

Используем конструктор

Следует понимать, что наиболее оптимальный вариант в данном случае – создать приложение «ВКонтакте» для «Андроид». В таких случаях вам смогут помочь различные онлайн-конструкторы. Но имейте в виду, что они не работают как обычное приложение «ВКонтакте» для «Андроид», а требуют установления через PlayMarket, и возможен их запуск путем взаимодействия в самой сети. Часть из них предлагают бесплатный режим, но для получения полноценного функционала вам придётся хорошо заплатить. Но если вы всё же думаете про приложение, где можно сделать его, вот вам небольшая наводка:

3. Mobile Roadie.

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

Создание программы своими силами

Как сделать приложение «ВКонтакте» самому, опираясь только на себя или команду единомышленников? Рассмотрим второй и третий вариант. Следует понять, что создание приложений для «ВКонтакте» – это нелегкое дело, для которого понадобятся определённые умения и знания.

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

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

Что необходимо знать

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

1. ActionScript. Самый популярный язык, на котором пишется основная масса программ.
2. Движки 3D. Как правило, используются для написания приложений, в которых много активных действий от 1-го лица.
3. PHP. Язык, с помощью которого осуществляется передача данных между приложением и базой данных.
4. MySQL. Язык, с помощью которого данные будут заноситься в БД.
5. HTML. Может быть использован для написания простейших приложений.
6. Java. Может применяться для создания режимов игры, когда одновременно действует много разных пользователей.
7. JavaScript. Язык, предназначенный для передачи данных.
8. JSON. Полезен для дешифровки полученных данных, если вы остановитесь на ActionScript в качестве языка написания программы.

Как уже писалось, потребуется вам выучить 4-5 из них + интерфейс прикладного программирования. Но на это уйдёт немало времени. Приложение «ВКонтакте» для компьютера будет быстрее разработано, если найти себе единомышленников.

Обучение

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

Затем необходимо будет прочитать пару книг, которые объяснят нюансы программирования, — и можно приступать к практике. Не стесняйтесь пользоваться поиском в мировой сети: большинство того, что вы захотите реализовать, уже делали раньше, зачем изобретать заново велосипед, если его можно просто скопировать? И зачем выдумывать с нуля, как сделать приложение «ВКонтакте» самому, если уже какой-то уровень наработок есть?

Исходные документы

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

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

Платная разработка

И самый простой, хотя и затратный вариант – заказать разработку у команды специалистов. В зависимости от сложности функционала необходимо будет подождать недели или даже месяцы и выложить крупную сумму, но всё будет сделано более-менее, к тому же относительно быстро. Поскольку не факт, что вы сможете проводить за компьютером сутки напролет, разрабатывая желаемую программу, то это самый простой и одновременно сложный в реализации ответ на вопрос «Как сделать приложение «ВКонтакте» самому, чтобы оно было качественным?».

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