Telegram Mini App на Nuxt 3 | Часть 2 - Тестовый сервер. Отладка. Работа с контактами. CloudStorage.
В этом видео будет рассказано о том, как войти в тестовый Telegram, получить контактные данные клиента в мини-приложении Telegram, как настроить отладку и работать с облачным хранилищем Telegram. Мы воспользуемся некоторыми функциональным возможностям пакета vue-tg, таким как useWebApp и useWebAppCloudStorage.
Таймкоды:
00:00 - Что будем делать в этом видео
1:43 - Клонируем репозиторий
4:30- Настраиваем
7:40 - Как настроить и войти в тестовое окружение Telegram
11:10 - Создаем бота и мини приложение в тестовом сервере Telegram
13:56 - Входим в тестовое окружение на десктопном клиенте
16:25 - Запускаем наше TMA !
17:15 - Как запустить девтулз в TMA
19:00 - Начинаем работать с кодом
21:27 - Получаем информацию о пользователе
24:00 - Начинаем работать с хранилищем TMA
28:45 - Сохраняем в хранилище TMA
31:00 - Получаем номер телефона пользователя
36:48 - Вызываем алёрт
38:40 - Концовка
Статья о том как настроить и войти в тестовое окружение Telegram:
Репозиторий проекта:
Пакет vue-tg:
Оф. документация TMA:
#implementing-mini-apps
Бесплатный курс по созданию мини-приложения Telegram на стеке Nuxt 3. В этом курсе будет создано приложение по доставке пиццы с использованием функциональных возможностей Telegram Mini Apps (сокр. TMA). В этом видео-курсе пошагово изложен весь процесс создания TMA с использованием Nuxt 3, пакета vue-tg и тестовой среды Telegram от установки проекта до деплоя готового приложения, демонстрирующего функциональные возможности TMA в связке с Nuxt 3 на serverless платформу Vercel. Текстовый курс доступен по ссылке ниже.
- Создадим простой фронт на tailwind.
- Поработаем с cloudStorage.
- Получим контактные и гео-данные клиента.
- Верифицируем заказ с помощью биометрии (Face ID или Fingerprint).
- Научимся вызывать popup, сonfirm и оставим заявку на пиццу!
- Валидируем и обработаем запрос на сервере.
- Получим обратное уведомление от бота о начале готовки и сроках доставки.
- При получении заказа отсканируем QR-код для оплаты через TMA.
Данный видео-курс дополняет наш текстовый курс, размещенный на нашем сайте:
Ссылка на главную страницу курса:
Ссылка на это видео на Rutube:
Github автора:
Связаться со мной: