Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Примеры

В репозитории есть несколько запускаемых примеров, встроенных в Cargo-воркспейс. Каждый показывает свой стиль интеграции — от полноценного Mini App на Trunk до обычного WASM-бинарника и серверной части полного стека.

demo/ — WASM-приложение на Trunk

Полноценное Mini App, собранное с фичами macros и mock. Использует telegram_page! / telegram_router! для роутинга и включает компоненты и страницы (demo/src/components, demo/src/pages). Так как включена фича mock, демо работает в обычном браузере во время разработки.

cd demo
trunk serve        # dev-сервер с автоперезагрузкой на http://localhost:8080
trunk build --release

Файл demo/index.html загружает telegram-web-app.js от Telegram и собранный Trunk WASM-бандл.

examples/vanilla — без фреймворка

Пример на чистом WebAssembly (examples/vanilla/src/main.rs + ui.rs), использующий SDK и DOM-хелперы напрямую, без Yew и Leptos. Зависит от крейта с фичей mock, поэтому запускается самостоятельно. Хорошая отправная точка, если нужен полный контроль над DOM.

cd examples/vanilla
trunk serve

examples/bots/rust_bot — Telegram-бот

Бот на teloxide (examples/bots/rust_bot), который открывает демо Mini App через WebApp-кнопки и принимает заказы, отправленные из приложения через sendData. Это серверная часть — нативный бинарник, не WASM.

cd examples/bots/rust_bot
cp .env.example .env          # добавьте свой TELOXIDE_TOKEN
cargo run

Требуется токен бота от @BotFather и URL WebApp по HTTPS.

examples/integration — полный стек

Пример из двух частей, показывающий round-trip фронтенд↔бэкенд:

  • examples/integration/frontend — WASM Mini App, отправляющее JSON-сообщение боту через TelegramWebApp::send_data(...). (Этот член исключён из воркспейса и собирается отдельно через Trunk.)
  • examples/integration/backend — бот на teloxide, принимающий web_app_data из обновления, разбирающий JSON и отвечающий.
# терминал 1 — бэкенд
cd examples/integration/backend
cargo run

# терминал 2 — фронтенд
cd examples/integration/frontend
trunk serve

Поток данных: пользователь открывает Mini App → взаимодействует с UI → приложение вызывает send_data → Telegram доставляет payload боту как web_app_data → бот обрабатывает его и отвечает.

Сборка любого WASM-примера

Все браузерные примеры собираются под wasm32-unknown-unknown и обслуживаются через Trunk:

rustup target add wasm32-unknown-unknown
cargo install trunk

См. также