В репозитории находится исходный код демонстрационного мини-приложения Блюдо дня.
Оно разработано в рамках обучающего видеокурса Разработка мини-приложений ВКонтакте.
- Клонируйте репозиторий на ваше устройство.
git clone git@github.com:VKCOM/vk-mini-apps-course-frontend.git
- Перейдите в папку с проектом.
cd vk-mini-apps-course-frontend
- Установите зависимости.
npm i
- Зарегистрируйте мини-приложение.
Чтобы эффективно работать с данной кодовой базой, вам нужно зарегистрировать новое мини-приложение ВКонтакте.
Перейдите на портал для разработчиков и нажмите Создать приложение. Подробнее о создании мини-приложений — в документации.
- Создайте переменные окружения.
В корне проекта создайте .env-файл и укажите:
app_id
— идентификатор созданного приложения, находится в настройках.base_url
— адрес серверной части мини-приложения.access_token
— ключ доступа для работы с VK Картами.
VITE_APP_ID='YOUR_APP_ID'
VITE_BACKEND_DOMAIN_URL='BACKEND_DOMAIN_URL'
VITE_VK_MAPS_ACCESS_TOKEN='VK_MAPS_ACCESS_TOKEN'
- Запустите мини-приложение локально.
Выполните команду:
npm run start
Перейдите в настройки мини-приложения и включите режим разработки.
В поле URL для разработки укажите URL, на котором работает ваше мини-приложение.
Теперь можно запустить мини-приложение, нажав на его иконку в списке приложений.
Чтобы сделать мини-приложение доступным извне, используйте библиотеку VK Tunnel.
- Запустите VK Tunnel.
npm run tunnel
Скрипт для работы библиотеки уже добавлен в package.json.
-
Следуйте инструкциям в командной строке. Когда вы получите ссылку на мини-приложение, перейдите в настройки мини-приложения и включите режим разработки.
-
Укажите полученную ссылку в поле URL для разработки.
Теперь мини-приложение доступно по ссылке vk.com/app, где ID - идентификатор вашего приложения из настроек.
Более подробную инструкцию по запуску мини-приложения внутри ВКонтакте смотрите в документации.
- В файле vk-hosting-config.json в поле
app_id
укажите индентификатор вашего мини-приложения.
{
"static_path": "build",
"app_id": YOUR_APP_ID,
"endpoints": {
"mobile": "index.html",
"mvk": "index.html",
"web": "index.html"
}
}
- Соберите мини-приложение.
npm run build
- Разверните мини-приложение на хостинге.
npm run deploy
В итоге вы получите бессрочную ссылку на мини-приложение.
Более подробную инструкцию по размещению мини-приложения на хостинге смотрите в документации.
Директория | Назначение |
---|---|
Api | Реализация работы с бэкендом мини-приложения. |
Components | Общие компоненты, используемые во всем приложении. |
Consts | Описание констант мини-приложения. |
Context | Контекст мини-приложения, используемый для хранения данных. |
Helpers | Вспомогательные функции, инкапсулирующие некоторые части функционала приложения. |
Hooks | Кастомные хуки, взаимодействующие со стейтом отдельных экранов и компонентов. |
Mocks | Данные, используемые для рендеринга некоторых частей приложения. |
Panels | Экраны приложения, со всеми внутренними компонентами и типами, используемые на отдельном экране мини-приложения. |
Utils | Вспомагательные инструменты для работы мини-приложения. |
В серверной части нашего мини-приложения мы реализовали оплату голосами и за денежные средства, но отключили эту возможность. Вы можете включить эти функции в вашем мини-приложении с помощью специальных флагов.
- Чтобы включить оплату голосами, установить значение поля
is_vk_pay_enabled
вtrue
для профиля пользователя в серверной части мини-приложения. Станет доступна возможность отключения рекламы за голоса ВКонтакте по подписке и разово. - Чтобы включить оплату покупок денежными средствами, установите значение поля
is_vk_pay_enabled
вtrue
для пользователя в сервеной части мини-приложения. Станет доступна возможность оплаты заказа рублями.
Подробности о подключении монетизации смотрите в модуле 7. Монетизация нашего видеокурса.
В коде проекта находятся коментария вида:
Модуль 4. Разработка Урок 3. Роутинг #M4L3.
Создание роутера и объявление маршрутов.
В указанных уроках видеокурса вы найдёте информацию о разработке соответствующих фрагментов кода. В поиске по файлам используйте названия уроков или хештеги, где M4 — номер модуля, L3 - номер урока.
Пакет | Назначение |
---|---|
vk-bridge | Библиотека для отправки команд и обмена данными с платформой ВКонтакте. |
VKUI | Библиотека React-компонентов для создания мини-приложений в стиле ВКонтакте. |
vk-bridge-react | Пакет, который даёт возможность использовать события библиотеки VK Bridge в React-приложениях. |
vk-mini-apps-router | Библиотека для маршрутизации и навигации в мини-приложениях, созданных с помощью VKUI. |
icons | Набор иконок для использования в компонентах VKUI. |
vk-miniapps-deploy | Пакет для размещения файлов мини-приложения на хостинге ВКонтакте. |
vk-tunnel | VK Tunnel предоставляет доступ к локальному серверу по протоколам HTTP, HTTPS, WebSocket и WebSocket Secure. |
axios | Библиотека для работы с сервером. |
mmr-gl | Библиотека для работы с картами. |
react | Библиотека для рендеринга ui. |
eruda | Консоль для мобильного браузера. |
Портал для разработчиков
Видеокурс: Разработка мини-приложений ВКонтакте
Мини-приложение «Блюдо дня»
Репозиторий с бэкендом приложения «Блюдо дня»
Задайте вопрос в сообществе разработчиков VK Mini Apps