Воркшоп 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. Зажмите, чтобы приблизить

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

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

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

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

  6. Зажать кнопку ctrl и нажать по ссылке
  7. Разрешить туннелю доступ к своему профилю VK
  8. В консоли нажать на кнопку 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. Приложение доступно для всех пользователей по ссылке — тапаем по экранчику