oleglr/vk-mini-apps-examples

mini-app-shop-boilerplate

Мини-апп онлайн магазин

Запуск

1. Склонируйте репозиторий

   git clone https://github.com/VKCOM/vk-mini-apps-examples.git

2. В окне командной строки перейдите в папку примера, установите зависимости и запустите веб-сервер.

   cd {путь-к-папке-примера}
   npm ci
   npm start

3. Создайте мини-приложение через портал для разработчиков или через вкладку "Управление" в приложении ВКонтакте
4. В настройках приложения включите режим разработки и пропишите адрес вашего веб сервера по умолчанию(http://localhost:3000)

Совместная разработка

1. Установите пакет VK Tunnel командой

   npm install @vkontakte/vk-tunnel -g

2. Запустите веб-сервер приложения командой

   npm start

3. Откройте другое окно командной строки. В нём перейдите в папку проекта-примера и запустите VK Tunnel:

   cd {путь-к-папке-примера}
   npm run tunnel

4. VK Tunnel создаст соединение (туннель) к веб-серверу, который вы запустили локально, и в окне командной строки отобразит URL для доступа к этому веб-серверу. Скопируйте этот URL.
5. Откройте настройки мини-приложения и перейдите в раздел Тестирование.
6. Создайте в этом разделе новую группу. Включите в неё нужных вам пользователей. В поле URL укажите скопированный URL. Подробнее про тестирование можно прочитать здесь.
7. Когда пользователи группы будут запускать приложение, ВКонтакте будет переадресовывать вызовы на локальный веб-сервер. Пользователи будут видеть версию мини-приложения, которая находится на вашей машине. Конечно, чтобы этот подход работал, локальный веб-сервер должен быть запущен. Подробнее о работе с утилитой — можно посмотреть здесь.

Результат

Можно посмотреть здесь: мини-апп

Документация и ресурсы

• Более подробно про мини-приложение можно прочитать здесь
• VK Mini Apps — сообщество разработчиков мини-приложений ВКонтакте.