Воркшоп VK Mini Apps

Приложения cтудентов

Создаём своё мини-приложение

Клонируем шаблон приложения

1. Открыть Visual Studio Code
2. Нажать курсором на область терминала в нижней части окна
   

   Зажмите, чтобы приблизить

3. Отправить команду:
   git clone https://github.com/layxl/vk-mini-app-clicker .
   Эта команда клонирует заранее написанный код в папку
   

   Зажмите, чтобы приблизить

Подключаем необходимые библиотеки

1. Отправить команду:
   npm install
   Эта команда считает нужные нам библиотеки из файла package.json и скачает их
   

   Зажмите, чтобы приблизить

Создаём мини-приложение на платформе VK Mini Apps

1. Авторизоваться в своём аккаунте VK
2. Перейти на сайт dev.vk.com
3. Навести курсор на вкладку Приложения и нажать на плюсик
4. Придумать название для приложения
5. Подтвердить создание с помощью Push/SMS
6. Скопировать ID приложения в правом верхнем углу
   

Запускаем мини-приложение внутри VK

1. Для корректной работы приложения внутри ВК необходимо найти слева в проводнике файлы vk‑hosting‑config.json и vk‑tunnel‑config.json поменять ID приложения на скопированный


Зажмите, чтобы приблизить

2. Написать в терминале команду:
   npm run dev
   Эта команда запустит мини-приложение локально на компьютере
   

   Зажмите, чтобы приблизить

3. Запустить второй терминал, нажав кнопку + в углу окошка терминала
4. Написать во втором терминале команду:
   npm run tunnel
   Эта команда запустит прослойку, позволяющая открывать мини-приложение внутри ВК
   

   Зажмите, чтобы приблизить

5. Зажать кнопку ctrl и нажать по ссылке
6. Разрешить туннелю доступ к своему профилю VK
7. В консоли нажать на кнопку Y в англ. раскладке, чтобы подтвердить предоставление доступа

Делаем приложение доступным для всех

1. Запустить третий терминал и написать команду:
   npm run deploy
   Эта команда начнёт собирать приложение и отправлять его на сервер VK
   

   Зажмите, чтобы приблизить

2. Нам нужно загрузить приложение на сервер VK, обновить приложение для обычных пользователей, для разработчиков, поэтому нужно нажать Y на клавиатуре 3 раза и N — 1 раз
3. Зажать кнопку ctrl и нажать по ссылке
4. Разрешить деплою доступ к профилю
   

   Зажмите, чтобы приблизить

5. Нажать Y в терминале, чтобы подтвердить предоставление доступа
6. Дождаться загрузки на сервер
7. Подтвердить загрузку на телефоне Push-уведомления и дождаться конца загрузки
8. В админ-панели мини-приложения перейдите во вкладку Настройки → Размешение и переключите его в состояние "Включено"
9. Скопируйте ссылку на мини-приложение и откройте её в браузере
   

   Зажмите, чтобы приблизить

10. ???
11. !!!
12. Profit!
13. Приложение доступно для всех пользователей по ссылке — тапаем по экранчику