VK Mini Apps для новичка: делаем мини-приложение-рандомайзер на JavaScript

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

Шаблон запускается в обычном браузере, но приложение ещё не знает о платформе, не показывает состояние и ломается на пустом списке. Поэтому отделим настройку, входные данные, основное действие и проверку. В этой статье вы соберёте мини-приложение-рандомайзер, которое выбирает вариант, не повторяет последний ответ и работает внутри VK. Проверка: кнопка выдаёт результат, пустой список блокируется, а VK Bridge успешно инициализируется.

Как устроен учебный проект VK Mini Apps

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

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

От входных данных до видимого результата. Сначала проверяется вход, затем действие и только потом интерфейс.

Собираем рабочий пример шаг за шагом

Материал сверялся с официальной документацией сервиса 21 октября 2026 года. Создайте проект через официальный create-vk-mini-app, установите зависимости и запустите dev-сервер по команде шаблона. Проверьте текущую папку через pwd или Get-Location. Вставьте пример целиком, выполните один раз, затем разбирайте по частям.

import bridge from '@vkontakte/vk-bridge'

await bridge.send('VKWebAppInit')

const choices = ['Учить массивы', 'Сделать мини-проект', 'Разобрать fetch']
const button = document.querySelector('#pick')
const output = document.querySelector('#result')
let previous = -1

button.addEventListener('click', () => {
  if (choices.length === 0) {
    output.textContent = 'Добавьте хотя бы один вариант'
    return
  }
  let index = Math.floor(Math.random() * choices.length)
  if (choices.length > 1 && index === previous) {
    index = (index + 1) % choices.length
  }
  previous = index
  output.textContent = choices[index]
})

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

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

Что происходит внутри и почему это работает

VK Bridge передаёт команды между JavaScript и клиентом VK. Сам рандомайзер остаётся чистой фронтенд-логикой и не зависит от платформы. Логику держите отдельно от вывода: функция получает аргумент и возвращает значение, а интерфейс показывает его. Секреты хранятся в переменных окружения и не попадают в исходники, журналы и скриншоты.

Math.random не подходит для криптографии и честных денежных розыгрышей. В учебном выборе задания он уместен. Если результат влияет на призы, нужен сервер и проверяемая механика. Не прячьте поток в одном обработчике: сохраните вход, проверьте его, вызовите операцию и только затем обновите интерфейс.

Проверяем проект и добавляем свою функцию

Добавьте форму нового варианта, удаление элемента и localStorage. Инициализацию Bridge держите отдельно от выбора. До правки запишите ожидаемое поведение одним предложением. После граничного теста повторите обычный сценарий.

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

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

Что запомнить и куда двигаться дальше

Перед публикацией проверьте мобильную ширину, загрузку по HTTPS и поведение при отказе платформенного метода. Для закрепления откройте в калькуляторе на JavaScript, в викторине на JavaScript и в списке дел.

Как изучить тему в Кодике

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

Закрепите проект, переписав ключевую функцию по памяти и добавив собственный граничный случай. Базовый синтаксис закрепите через курс JavaScript.

Что получится в итоге

Финальный экран показывает результат, состояние запроса и понятное сообщение об ошибке без раскрытия секретов.