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

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

Пару лет назад я написал на vc.ru статью о своем проекте Фотопланета, которая попала в подборку за месяц, что и сподвигло меня разработать приложение 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 (простыми словами - работало “нормально”) нужно иметь аккаунт разработчика 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. И если вы решили сделать приложение и разместить его в каталоге, то желаю ему не только туда попасть, но и развиваться! Почему? К сожалению, есть несколько примеров классных приложений (да еще пропиаренных самим ВК), которые после релиза не обновляются ни технически, ни в плане контента, видимо, стали неинтересны авторам:(