В 2025 году аудитория ВКонтакте достигла 92,5 млн пользователей в месяц. Пользователи ВКонтакте активно используют все внутренние сервисы, в том числе мини-приложения и игры, которые любой внешний разработчик может представить многомиллионной аудитории с помощью VK Mini Apps.

Меня зовут Никита Васюков, руководитель команды спецпроектов в направлении разработки игр и приложений. И в этой статье я расскажу, что такое VK Mini Apps, какие возможности предоставляет платформа и как мы её используем для своих задач.

Знакомство с VK Mini Apps

VK Mini Apps — открытая платформа мини‑приложений и игр, которые доступны ВКонтакте, в ОК, Почте Mail и RuStore. 

Примечание: мини-приложения — веб-сервисы, написанные сторонними разработчиками, чтобы расширить опыт пользователей ВКонтакте. 

Платформа сочетает простоту начала работы с возможностью быстро выводить веб‑приложения на многомиллионную аудиторию соцсети. Чтобы оценить востребованность платформы, достаточно нескольких чисел:

• ежемесячная аудитория VK Mini Apps — 45 млн пользователей;

• 30 тысяч разработчиков уже создали и разместили свои мини-приложения и игры на платформе.

Есть несколько базовых сценариев использования VK Mini Apps. Платформа позволяет создавать сервисы разного формата.

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

• Игры — HTML5-приложения для мобильных устройств и компьютеров, которые помогают пользователям отвлечься и весело провести время, в том числе с друзьями. Как правило, игры на платформе VK Mini Apps создают независимые студии, которые зарабатывают за счёт монетизации: покупок в играх и показа рекламы,  а ключевым преимуществом для них становится доступ к многомиллионной аудитории внутри соцсети.

• No-code приложения — сервисы, которые работают внутри интерфейса ВКонтакте и не требуют написания кода. К ним также относятся мини-приложения, созданные на внешних платформах, — например, на Tilda, Marquiz, Craftum и других. Настроить No-code приложение и наполнить его содержимым можно в специальной панели управления VK Mini Apps. Как правило, No-code приложения используют индивидуальные предприниматели и малый бизнес для описания услуг и сбора заказов.

У платформы VK Mini Apps довольно много особенностей, которые делают её привлекательной для разработчиков.

• Кросс-платформенность. ВКонтакте работает на множестве платформ — запускается не только в вебе, но и на Android и iOS. Код размещённого приложения будет работать на всех этих платформах автоматически.

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

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

• Разные форматы монетизации, которые легко подключить. Платформа предоставляет несколько инструментов монетизации. Первый — продажа виртуальных ценностей за голоса (условную единицу для покупки особенных возможностей в приложениях ВКонтакте) и физических или цифровых ценностей за деньги. Второй — реклама. Доступно несколько форматов рекламы: Rewarded — реклама за вознаграждение, Interstitial — реклама между экранами, Sticky banners — рекламные баннеры.

• Возможность проверить идею на большой и активной аудитории ВКонтакте. Публикуемые игры и мини-приложения доступны 45 млн пользователей VK Mini Apps, что позволяет проводить полноценные и достоверные проверки гипотез и выявлять потребности целевой аудитории.

Цикл разработки на платформе VK Mini Apps

Классическая разработка по каскаду подразумевает прохождение шести этапов:

• сбор и анализ требований;

• проектирование;

• разработка;

• тестирование;

• поставка и развёртывание;

• поддержка и сопровождение.

Платформа предоставляет инструменты для четырёх из них:

• разработка;

• тестирование;

• поставка и развёртывание;

• поддержка и сопровождение.

Теперь подробнее остановимся на возможностях платформы для каждого из этих этапов.

Разработка на платформе

На этапе разработки VK Mini Apps предоставляет:

• пакеты и инструменты для быстрого запуска: шаблон мини-приложения, VKUI и роутер;

• интеграции с устройством: бридж-методы и события;

• доступ к API ВКонтакте и интеграциям с разделами.

Теперь обо всём подробнее.

Быстрый запуск

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

npx @vkontakte/create-vk-mini-app

А ещё примерно в три клика зарегистрировать новое мини-приложение на платформе — нужно только придумать название (его, кстати, позже можно будет легко поменять).

У нас есть небольшой Helper, который позволяет выбирать разные пресеты с учётом всех особенностей собираемого приложения. Например, можно выбрать, будет ли использоваться типизация и нужен ли проекту роутер или бридж. Далее останется только установить пакеты по списку и запустить DevServer.

npx @vkontakte/create-vk-mini-app
? Directory name: › mini-app
? Select a lang: › - Use arrow-keys. Return to submit.
❯   TypeScript
    JavaScript
? Select a template: › - Use arrow-keys. Return to submit.
    VKUI + Bridge
❯   VKUI + Bridge + Router (recommended)
    VKUI-only
...
Done. Now run:
1) cd mini-app
2) npm install
3) npm run start

В консоли отобразится URL, по которому DevServer будет раздавать статику:

Если попробовать открыть указанный URL напрямую, то получится что-то не очень работоспособное. Приложение запустится, но будет крутиться вечный спиннер:

Шаблон мини-приложения подготовлен, чтобы оно могло запускаться из платформы. Мы можем указать этот URL в настройках мини-приложения в секции размещения. Например, удобно будет запустить его в режиме разработки для мобильной версии сайта:

А затем сохранить изменения и открыть его внутри ВКонтакте. 

Для мобильной версии сайта URL будет в формате https://m.vk.com/app%APP\_ID%. ID мини-приложения можно найти там же, в панели управления. Например, для моего приложения это https://m.vk.com/app54033288. Приложение будет запущено, мы увидим в браузере:

 

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

Кроме того, можно вновь открыть код мини-приложения, заглянуть в файл package.json и посмотреть, какие пакеты были установлены. 

Зависимостей немного, ниже разберём основные из них.

// package.json
"dependencies": {
  "@vkontakte/icons": "^3.1.1",
  "@vkontakte/vk-bridge": "^2.13.0",
  "@vkontakte/vk-bridge-react": "^1.0.1",
  "@vkontakte/vk-mini-apps-router": "^1.7.6",
  "@vkontakte/vkui": "^7.0.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
},

Пакеты

Библиотека компонентов VKUI

VKUI — библиотека компонентов, которая фактически выступает в роли UI Kit и предоставляет широкие возможности приложениям, которые её используют. Так, если мини-приложение построено с применением VKUI, оно получает:

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

• Мимикрия под платформы и темы. Пользователь может запустить мини-приложение на Android- и iOS-клиенте ВКонтакте или в веб-версии — и на каждой из этих платформ взаимодействие отличается, даже в навигации между панелями приложения. VKUI предлагает готовые решения для всех этих взаимодействий, позволяя создать впечатление, что пользователь открыл родное приложение на Android или iOS, хотя это веб-версия. Благодаря VKUI мини-приложение также адаптируется к теме платформы, на которой оно работает: если у пользователя ВКонтакте активирована тёмная тема, приложение также перейдёт в этот режим

• Множество готовых UI-компонентов. Библиотека VKUI предоставляет десятки UI-компонентов: от базовых элементов приложения, таких как поля ввода и кнопки, до комплексных панелей и модальных окон, которые позволяют создавать сложные навигационные сценарии

• Интеграции, развитие и актуальные паттерны. Библиотека VKUI активно развивается. Она написана на React, и её свободно можно использовать и за пределами нашей платформы. Важно, что библиотека развивается как open-source проект — все изменения можно отслеживать на GitHub

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

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

Роутер

В контексте роутинга можем выделить три базовые задачи:

• зарегистрировать роутер;

• подключить роутер;

• сделать навигацию на страницу.

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

Посмотрим на пример интеграции.

Регистрация роутера

import { createHashRouter } from '@vkontakte/vk-mini-apps-router';

const router = createHashRouter([
  {
    path: '/',
    panel: 'home_panel',
    view: 'default_view',
  },
]);
...

Подключение роутера

import { RouterProvider } from '@vkontakte/vk-mini-apps-router';
...
return (
  <ConfigProvider>
    <AdaptivityProvider>
      <AppRoot>
        <RouterProvider router={router}>
          <App />
        </RouterProvider>
      </AppRoot>
    </AdaptivityProvider>
  </ConfigProvider>
);

Навигация

import { useRouteNavigator } from '@vkontakte/vk-mini-apps-router';

export function PersikPage() {
  const routeNavigator = useRouteNavigator();
  
  return (
    <Button
      onClick={() => routeNavigator.push('/')}
    >
      На главную
    </Button>
  );
}

Примечание: подробнее обо всём, что касается роутера, можно узнать в специальном разделе на портале для разработчиков — «Библиотека vk-mini-apps-router».

Bridge

VK Bridge — мост между платформой и приложением, который даёт множество возможностей:

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

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

• Коннектор к API ВКонтакте. Так как приложение запускается фактически в песочнице (но внутри платформы), через Bridge можно получать и токены, и все возможности обращения к API ВКонтакте — и использовать его

API ВКонтакте и интеграции

API ВКонтакте даёт разработчикам удобный интерфейс для работы с данными. Платформа предоставляет:

• механизмы для работы с ключами API;

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

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

Масштаб платформы

Платформа предоставляет большой пул механизмов для работы, среди которых:

• более 100 бридж-методов и событий;

• несколько десятков секций методов API ВКонтакте;

• более 100 компонентов VKUI.

При этом для комфортного начала работы с VK Mini Apps на портале для разработчиков доступна подробная документация по всем аспектам и сценариям использования, а возможности платформы регулярно расширяются.

Тестирование на платформе

Для задач тестирования на платформе разработчикам доступны:

• использование тестовых групп;

• размещение в каталоге;

• инструменты разработчика;

• курс и чеклисты для тестирования.

Использование тестовых групп

VK Mini Apps позволяет разворачивать тестовые домены, то есть релизить мини-приложения или выкатывать обновления на узкую аудиторию для проверки гипотез или тестирования новых фич. 

Платформа позволяет хранить одновременно десятки dev- и prod-сборок, чтобы можно было откатываться к нужной версии без инцидентов. 

Возможности тестовых групп по лимитам во время тестирования и обкатки:

• до 1 000 человек в тестовой группе;

• до 25 тестовых групп;

• передача в тестирование по принципу «раскатил и забыл» — deploy and forget.

Для гибкой и прозрачной настройки тестовых групп в панели управления приложением есть отдельный раздел, а на портале для разработчиков — документация по работе с тестовыми группами. Также у нас есть API для настройки собственных интеграций. Например, вы можете настроить пайплайн в своём GitLab, чтобы при очередном мерже в main у вас раскатилась новая тестовая группа со сборкой.

Инструменты разработчика

Мини-приложения, размещённые на платформе VK Mini Apps, могут запускаться в песочнице, вьюшке или iFrame, но в любом из случаев их легко дебажить даже базовыми инструментами разработчика. 

Платформа также предоставляет доступ к полезным инструментам для тестирования на устройствах, например Eruda.

Eruda — старая добрая консоль для дебага в мобильных клиентах. Сервис ставится одним пакетом, подключается в 3 строчки кода, а включается одной кнопкой из панели управления.

Размещение в каталоге

Стандартный пайплайн размещения игр и мини-приложений на платформе подразумевает прохождение нескольких этапов:

• подготовка к модерации;

• отправка заявки на модерацию;

• прохождение проверки;

• прохождение бета-тестирования;

• подготовка к публикации.

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

Надо отметить, что доработки в процессе размещения сервисов — необязательная практика. Если мини-приложение изначально качественное — оно без задержек пройдёт модерацию.

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

Правила размещения как готовые чеклисты для тестировщиков

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

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

Поставка и развёртывание

В контексте развёртывания платформа VK Mini Apps предусматривает:

• хостинг статики;

• код, который может запускаться на всех платформах;

• независимость от релизного цикла основного приложения ВКонтакте (своё мини-приложение разработчик может обновлять независимо от обновлений ВКонтакте).

Хостинг статики

В части хостинга статики платформа даёт возможность:

• использовать CDN-инфраструктуру ВКонтакте для раздачи файлов мини-приложения;

• одновременно хранить и раздавать несколько сборок;

• подготавливать и настраивать небольшие конфиги.

Пример конфига для настройки:

// vk-hosting-config.json
{
  "static_path": "build",
  "app_id": 123456,
  "endpoints": {
    "mobile": "index_DG.html",
    "web": "index.html",
    "mvk": "index.html"
  }
}

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

Также разработчик получает возможность практически моментального отката к предыдущей опубликованной версии. При деплое мы в команде просто сохраняем себе предыдущие URL, и откат делается в 2 клика. Этот подход позволяет избегать последствий инцидентов, которые могут произойти в приложениях с большой и активной аудиторией.

Подробнее про возможности хостинга статики можно прочитать на отдельной странице документации портала для разработчиков.

Поддержка и сопровождение

Упростить поддержку и сопровождение размещённых игр и мини-приложений разработчикам сервисов на платформе помогут:

• инструменты продуктовой аналитики с информативными графиками по аудитории и использованию API ВКонтакте;

• аналитика по возможной оптимизации через Lighthouse, данные для которой собираются с реальных устройств;

• большая база знаний и активное сообщество разработчиков.

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

Стабильность, отказоустойчивость и обратная совместимость завязаны на приложение и API ВКонтакте.

Подробнее о мини-приложениях VK Фитнес

Что из себя представляет VK Фитнес? Сейчас у нас 12 активных мини-приложений на платформе VK Mini Apps. В список входят флагманское приложение VK Шаги, а ещё — «Тренировки», VK Бег, «Женский дневник», «Здоровье» и некоторые другие. Они связаны общими пользовательскими сценариями и проводят пользователя из одного мини-приложения в другое — активность в одном сервисе отражается и на других.

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

Мы ведём продуктовую разработку на платформе VK Mini Apps. Наша команда:

• адаптивна к изменениям — мы готовы подстраиваться под бизнес-требования;

• непрерывно улучшает мини-приложения, основываясь на собственном опыте и наработках;

• умеет попадать в чётко обозначенные сроки, проводить ежедневные релизы, держать высокий time to market, трекать и соблюдать SLA по техническим и продуктовым метрикам.

Это совсем несложно во многом благодаря платформе, инструментами которой мы активно пользуемся. Вместе с тем мы не изолированы от процессов развития самой платформы VK Mini Apps — мы держим тесный контакт с core-командой, более 5 лет драйвим платформу и вносим вклад в общее дело.

Краткое послесловие

VK Mini Apps не только даёт разработчикам возможность представить свои сервисы многомиллионной активной аудитории ВКонтакте. Платформа также позволяет получить доступ к сообществу для разработчиков, порталу про разработку и всем необходимым инструментам. Это делает создание и релиз игр и мини-приложений максимально простыми и прозрачными. Возможностью уже воспользовались более 30 тысяч разработчиков, большинство из которых смогли найти свою аудиторию и сделать продукт не только востребованным, но и прибыльным. Если вы ещё не в их числе — сейчас самое время начать работу над своим сервисом.