Демо для доклада «Добро пожаловать в Telegram Mini Apps. Или где ещё хорош Angular?»

Презентация доступна в формате PDF по ссылке: https://disk.yandex.ru/i/oKmdRFDJsO7sZw

Демо содержит пример полноценного Telegram Mini Apps проекта на Angular, который вы можете взять за основу своих проектов.

В мини-аппе реализована простейшая «тапалка» с использованием Cloud Storage (от Telegram) и показаны примеры навигации внутри веб-приложения.

Используются следующие версии библиотек:

• Angular v19.1.2
• NgRx Signals v19.0.0
• Nx v20.3.2
• Taiga UI v4.21.0
• @telegram-apps/sdk v2.11.3
• angularx-qrcode v19.0.0
• canvas-confetti v1.9.3

И, конечно же, много комментариев (на русском) в коде — всё, как мы любим 💞

Развернуть локально

Клонируйте репозиторий:

git clone https://github.com/koddr/tma-angular-demo && cd tma-angular-demo

Установите зависимости:

npm install

Запустите dev-сервер:

npm start

Развернуть в облаке

Так как я использую для своих (и не только) проектов облачные решения от Timeweb Cloud, то буду описывать процесс деплоя на нём.

Note

Кстати, если искали надёжное облако для своих фронтенд-приложений с автодеплоем из GitHub/Gitlab по последнему коммиту за 1 руб./месяц, то вот моя реферальная ссылка: https://timeweb.cloud/r/koddr

Регистрируйтесь, оплачивайте хотя бы один месяц хостинга/выделенного сервера и получите от 300 до 2000 руб. на счёт 😉

Итак, приступим:

1. Прежде всего, заливаем код на GitHub (или любой другой).
2. Заходим в панель управления, раздел Apps и нажимаем кнопку «Добавить».
3. Выбираем Angular и версию Node.js (например, 20).
4. Подключаем свой аккаунт GitHub (или любой другой) к облаку и выбираем нужный репозиторий.
5. Выбираем регион деплоя и тариф (хватит и самого дешёвого за 1 руб./месяц).
6. В настройках приложения вводим команду для сборки (например, npm run build) и директорию с бандлом (например, /dist/browser).
7. Жмём «Запустить деплой» и немного ждём.

В результате, Timeweb Cloud создаст инстанс вашего приложения, получит за вас бесплатный SSL от Let's Encrypt и выдаст URL (в виде: https://user-repo-XXX123.twc1.net). Данный URL нужно указать в настройках вашего бота у BotFather (идём в Bot Settings токена и далее в разделы: Menu Button и Configure Mini App).

Немного ждём, пока Telegram обновит кэш у бота и отрисует кнопку меню, которая запускает ваш Mini App.

Tip

Таким образом, если ваша Mini App является основной взаимодействия бота и пользователя, — вам не нужно делать классического бота (на Python/Go/Node.js/...) и тратить на это время. Ваше веб-приложение на Angular уже будет доступно из главного меню бота и по кнопке «Открыть» (Open) в списке всех чатов приложения Telegram на всех платформах.

Всё! Пользуйтесь на здоровье 🎉