Back
VK Mini Apps
9 Nov 2018

Быстрый старт

Как начать работать с VK Mini Apps и создать своё первое приложение.

Создание и запуск приложения

1. Создание структуры приложения из шаблона

npx @vkontakte/create-vk-mini-app {folder_name}

В нашем случае это:

npx @vkontakte/create-vk-mini-app vk-apps-currency

В созданном проекте уже подключены все необходимые для работы библиотеки: VKUI, VK Bridge и VK Icons.

2. Регистрация приложения

Создайте приложение с типом VK Mini Apps на платформе ВКонтакте. Для этого перейдите в раздел создания приложения.

Выбираем пункты как на скриншоте.
Выбираем пункты как на скриншоте.

Подтвердите создание приложения при помощи сообщения или push-уведомления.

3. Локальный запуск приложения

Установите пакет VK Tunnel:

npm install @vkontakte/vk-tunnel -g

Перейдите к папке проекта при помощи команды

cd vk-apps-currency

Запустите проект командой

npm start

И сделайте вызов в консоли проекта:

env NODE_TLS_REJECT_UNAUTHORIZED=0 \
PROXY_HTTP_PROTO=https \
PROXY_WS_PROTO=wss \
PROXY_HOST=localhost \
PROXY_PORT=10888 \
vk-tunnel

Или, используя опции:

vk-tunnel --insecure=1 --http-protocol=https --ws-protocol=wss --host=localhost --port=10888

В терминале будет предложено перейти по адресу в формате
https://oauth.vk.com/code_auth?stage=check&code=2a2aaaa для авторизации. Откройте ссылку в браузере, вернитесь в терминал и нажмите enter
После успешной авторизации в терминале появится ссылка вида

https://user12345-jv7zlzzz.wormhole.vk-apps.com

Скопируйте ее.

После чего вернитесь в управление созданным приложением в ВК, включите режим разработки и вставьте скопированную ссылку.

Быстрый старт, image #2

Перейдите по ссылке типа vk.com/app{app_id} в мобильном приложении. (Можно нажать на иконку сервиса сверху слева).

Публикация приложения

GitHub предоставляет бесплатный статический хостинг для своих проектов — GitHub Pages. Вы можете использовать его для публикации вашего сервиса.

Для этого вам нужно иметь установленный Git и репозиторий на GitHub. Инструкцию по установке Git можно найти здесь. Инструкция по добавлению существующего проекта на GitHub доступна здесь.

  1. Добавление зависимости

Установите зависимость gh-pages командой

npm install gh-pages --save-dev

2. Настройка проекта

В директории с проектом есть файл package.json.

Для работы с GitHub Pages вам нужно добавить настройку homepage, в которой должен содержаться URL вашего репозитория на Pages. Он формируется следующим образом:

https://{имя вашей учетной записи}.github.io/{имя репозитория}/

В нашем случае это:

"homepage": "https://ilyapishchulin.github.io/vk-apps-currency/"

3. Управление деплоем

Для облегчения работы можно добавить следующие команды в блок scripts в файле package.json:

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

Ваш файл конфигурации будет выглядеть примерно так:

Быстрый старт, image #3

4. Деплой

Деплой запускается командой

npm run deploy

После выполнения этой команды ваше приложение будет доступно по адресу, указанному в homepage.

5. Публикация приложения

Идем в настройки созданного приложения и прописываем адрес из поля в homepage в поле «Мобильный URL». Чтобы приложение было доступно другим пользователям, нужно поменять статус в пункте «Состояние» на «Приложение включено и видно всем».

Быстрый старт, image #4

Первый сервис VK Mini Apps готов к работе.

Код примеров сервисов можно найти здесь:
https://github.com/VKCOM/vk-apps-currency
https://github.com/kuhel/VK-Hackathon-2018-demo-app

Благодарим Илью за помощь в составлении гайда.

24794 views