реклама
разместить

Создание приложения 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 берет себе какую-то комиссию с разработчика мини аппа?

Раскрывать всегда
Суд арестовал имущество группы «Домодедово» по иску Генпрокуратуры

И запретил вносить изменения в ЕГРЮЛ, кроме тех, что инициировало Росимущество.

Источник: городской округ Домодедово
1717
44
22
Вот и отжали ,посмотрим кому достанется
реклама
разместить
ЦБ повысил имущественный критерий для присвоения статуса квалифицированного инвестора с 6 млн до 12 млн рублей

С 1 января 2026 года — до 24 млн рублей.

1313
55
44
Крайне странные критерии. Знакомый принёс на биржу 10млн, за 3 месяца все просадил, но зато статус квала дали. Что же касается действительно квалов, они не в юрисдикции РФ счета держат 😏
AUDJPY в фокусе дня. Сезонные тенденции и вероятности на Четверг 30.01.2025

Здравствуйте Уважаемые трейдеры! Александр Борских подготовил для Вас свежую информацию.
Очередные сезонные тенденции на Четверг 30 Января 2025 по основным мажорам финансовых рынков.
Весь перечень анализируемых активов указан ниже в общем количестве 60 инструментов. Здесь Вы найдете активы рынка Форекс, популярные активы Московской биржи, не менее по…

В ИИ-сервис Suno добавили редактор текста сгенерированных песен

Теперь нейросеть можно попросить переписать фрагмент или исправить текст самому.

Нейросеть переписала строчку после просьбы подобрать рифму к слову «план»
1616
1111
33
11
10 частых вопросов об отделе продаж и ответы из личного опыта (вторая часть)

• По какой причине мог уволиться весь отдел продаж вместе с руководителем?
• Можно ли найти отдел продаж на аутсорсе за процент от сделок?
• Что можно делегировать ассистенту отдела продаж?
В этой статье я постарался интересно и вдумчиво ответить на следующую партию частых вопросов об отделе продаж

Кадр из фильма <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.kinopoisk.ru%2Ffilm%2F1047883%2F&postId=1784086" rel="nofollow noreferrer noopener" target="_blank">«Однажды в… Голливуде»</a>
2121
33
11
11
11
Правительство предложило обязать россиян регистрироваться на маркетплейсах и в классифайдах через Госуслуги — Forbes

Классифайды — это доски объявлений, сайты по поиску работы и предложению услуг.

Источник фото: РБК
6464
2121
1010
44
11
11
⚡️⚡️⚡️Владимир Путин предписал указ о внедрении анального зонда всем россиянам.
4 идеи для маркетинга с околонулевым бюджетом
4 идеи для маркетинга с околонулевым бюджетом
22
Исследователи Wiz Research нашли в открытом доступе базу данных DeepSeek с историей чатов пользователей — компания уже её удалила

После того, как специалисты Wiz сами сообщили ей об уязвимости.

База данных ClickHouse. Источник: Wiz Research
1717
1010
Две великие вещи, которые держат трафик на vc - DeepSeek и продажи рекламы в телеграме.
[]