Разработка мини приложения по заказу пиццы для Telegram на Nuxt 3
В этой статье пошагово изложен весь процесс создания Telegram Mini App (сокр. TMA) с использованием Nuxt 3, пакета vue-tg и тестовой среды Telegram от установки проекта до деплоя готового приложения, демонстрирующего функциональные возможности TMA в связке с Nuxt 3 на serverless платформу Vercel. В конце данной статьи приложено подробное видео-руководство по созданию TMA на Nuxt 3 — советую также ознакомиться.
Мы разработаем демонстрационное мини-приложение для Telegram по заказу пиццы!
- Создадим простой фронт на tailwind.
- Поработаем с cloudStorage.
- Получим контактные и гео-данные клиента.
- Верифицируем заказ с помощью биометрии (Face ID или Fingerprint).
- Научимся вызывать popup, сonfirm и оставим заявку на пиццу!
- Валидируем и обработаем запрос на сервере.
- Получим обратное уведомление от бота о начале готовки и сроках доставки.
- При получении заказа отсканируем QR-код для оплаты через TMA.
Telegram Mini Apps — это веб-приложения, интегрированные в Telegram, которые предоставляют пользователям дополнительные функции прямо внутри мессенджера. С помощью Nuxt 3 можно создать мощные и гибкие мини-приложения.
Шаг 1: Установка и подготовка проекта Nuxt 3
- Установка Nuxt 3:
Создайте новый проект Nuxt 3, следуя официальной документации:npx nuxi init telegram-mini-app
cd telegram-mini-app
npm install - Установка пакета vue-tg:
Пакет содержит необходимые компоненты и скрипты для работы с Telegram Mini App, запустите команду в корне проекта:npm i vue-tg - Подключение скрипта Telegram Web App:
Чтобы подключить мини-приложение к клиенту Telegram, поместите скрипт telegram-web-app.js в объект app.head.script (если у вас нет такого объекта, необходимо его создать) файла nuxt.config.ts: - Запуск проекта:
Убедитесь, что проект работает, запустив команду:npm run dev
Таким образом мы подготовили приложение к дальнейшей интеграции с TMA на стороне Telegram.
Шаг 2: Вход и настройка тестовой среды Telegram
В данном руководстве мы не будем использовать реверс-прокси серверы (напр. такие как Ngrok), зато обучимся входить и настраивать тестовую среду в Telegram, благодаря этому нам удастся использовать даже localhost в качестве адреса нашего TMA.
Подробное описание как войти и настроить тестовую среду Telegram доступно в нашей статье по этой ссылке. Советую изучить данную статью и повторить порядок действий, приведенный в этой статье. Это необходимо, чтобы двигаться дальше. После изучения и повторения действий, необходимо вернуться к данной статье.
Шаг 3: Работа с приложением
Давайте создадим нашу основную и единственную страницу в проекте, внутри которой будем последовательно размещать наши компоненты для визуальной и функциональной демонстрации некоторых возможностей.
- Создадим фронт на tailwind
В данной статье не будет разобран процесс верстки на tailwind, предлагаю сразу же применить заранее подготовленную мной заготовку приложения по заказу пиццы (ссылка). - Получение контактных данных и геолокацию
Воспользуемся функциональной возможностью TMA под названием cloudStorage — объект управляет облачным хранилищем. Каждая TMA может хранить до 1024 элементов на пользователя в облачном хранилище. Мы будем записывать в него всю основную собираемую информацию о добавленных в заказ товарах, контактные данные, локацию и т.д. Подробнее про cloudStorage, его свойства и методы вы можете узнать, прочитав эту статью - Работа с cloudStorage
Воспользуемся функциональной возможностью TMA под названием cloudStorage — объект управляет облачным хранилищем. Каждая TMA может хранить до 1024 элементов на пользователя в облачном хранилище. Мы будем записывать в него всю основную собираемую информацию о добавленных в заказ товарах, контактные данные, локацию и т.д. Подробнее про cloudStorage, его свойства и методы вы можете узнать, прочитав эту статью
Статья находиться в процессе написания и постепенно дополняется новыми разделами… Подпишитесь на обновления, чтобы не пропустить новое!