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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Далее, вы создаете 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? Учтите, что он не доступен в <iframe> в режиме “инкогнито”.

Монетизация

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

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

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

Что дальше?

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

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

88
12 комментариев

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

Ответить

трафик

Ответить

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

Ответить

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

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

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

Ответить

VKUI понравилось больше чем f7? Узнал вас по аватарке с форума ф7)

Ответить

Неа, f7 очень крут и даже сравнивать тут нельзя:) но у него нет дизайна VK, а также хотелось попробовать VK Mini App

Ответить

Сергей, привет! Подкажи, сколько времени нужно на создание самого простого VK Mini App?
VK берет себе какую-то комиссию с разработчика мини аппа?

Ответить