{"id":21538149,"url":"https://github.com/koddr/tma-angular-demo","last_synced_at":"2025-06-30T08:04:29.280Z","repository":{"id":262509110,"uuid":"886735175","full_name":"koddr/tma-angular-demo","owner":"koddr","description":"Демо для доклада «Добро пожаловать в Telegram Mini Apps. Или где ещё хорош Angular?».","archived":false,"fork":false,"pushed_at":"2025-01-22T09:14:38.000Z","size":2006,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-22T10:24:13.081Z","etag":null,"topics":["angular","telegram","telegram-mini-app","telegram-mini-app-tutorial"],"latest_commit_sha":null,"homepage":"https://t.me/tma_angular_demo_bot","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/koddr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"liberapay":"koddr"}},"created_at":"2024-11-11T14:06:31.000Z","updated_at":"2025-01-22T09:14:34.000Z","dependencies_parsed_at":"2024-12-19T06:24:07.929Z","dependency_job_id":"819a2a8e-7746-4aac-8dde-f19110e1938c","html_url":"https://github.com/koddr/tma-angular-demo","commit_stats":null,"previous_names":["koddr/tma-angular-demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koddr%2Ftma-angular-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koddr%2Ftma-angular-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koddr%2Ftma-angular-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koddr%2Ftma-angular-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/koddr","download_url":"https://codeload.github.com/koddr/tma-angular-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244110086,"owners_count":20399561,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","telegram","telegram-mini-app","telegram-mini-app-tutorial"],"created_at":"2024-11-24T04:10:49.042Z","updated_at":"2025-03-17T20:47:12.159Z","avatar_url":"https://github.com/koddr.png","language":"TypeScript","funding_links":["https://liberapay.com/koddr"],"categories":[],"sub_categories":[],"readme":"# Демо для доклада «Добро пожаловать в Telegram Mini Apps. Или где ещё хорош Angular?»\n\n\u003ca href=\"https://t.me/tma_angular_demo_bot\" target=\"_blank\"\u003e\u003cimg src=\"https://github.com/user-attachments/assets/6bc9f631-b8ae-4b70-a522-c9c541ee2906\" width=\"196\" alt=\"Telegram Mini App demo\" align=\"right\" /\u003e\u003c/a\u003e\n\nПрезентация доступна в формате PDF по ссылке: https://disk.yandex.ru/i/oKmdRFDJsO7sZw\n\nДемо содержит пример полноценного [Telegram Mini Apps](https://core.telegram.org/bots/webapps) проекта на Angular, который вы можете взять за основу своих проектов.\n\nВ мини-аппе реализована простейшая «тапалка» с использованием Cloud Storage (от Telegram) и показаны примеры навигации внутри веб-приложения.\n\nИспользуются следующие версии библиотек:\n\n- [Angular](https://angular.dev) v19.1.2\n- [NgRx Signals](https://ngrx.io/guide/signals) v19.0.0\n- [Nx](https://nx.dev) v20.3.2\n- [Taiga UI](https://taiga-ui.dev) v4.21.0\n- [@telegram-apps/sdk](https://github.com/Telegram-Mini-Apps/telegram-apps) v2.11.3\n- [angularx-qrcode](https://github.com/cordobo/angularx-qrcode) v19.0.0\n- [canvas-confetti](https://github.com/catdad/canvas-confetti) v1.9.3\n\nИ, конечно же, много комментариев (_на русском_) в коде — всё, как мы любим 💞\n\n## Развернуть локально\n\nКлонируйте репозиторий:\n\n```console\ngit clone https://github.com/koddr/tma-angular-demo \u0026\u0026 cd tma-angular-demo\n```\n\nУстановите зависимости:\n\n```console\nnpm install\n```\n\nЗапустите dev-сервер:\n\n```console\nnpm start\n```\n\n## Развернуть в облаке\n\nТак как я использую для своих (_и не только_) проектов облачные решения от [Timeweb Cloud](https://timeweb.cloud), то буду описывать процесс деплоя на нём.\n\n\u003e [!NOTE]\n\u003e\n\u003e Кстати, если искали надёжное облако для своих фронтенд-приложений с автодеплоем из GitHub/Gitlab по последнему коммиту за 1 руб./месяц, то вот моя реферальная ссылка: https://timeweb.cloud/r/koddr\n\u003e\n\u003e Регистрируйтесь, оплачивайте хотя бы один месяц хостинга/выделенного сервера и получите от 300 до 2000 руб. на счёт 😉\n\nИтак, приступим:\n\n1. Прежде всего, заливаем код на GitHub (или любой другой).\n2. Заходим в панель управления, раздел [Apps](https://timeweb.cloud/my/apps) и нажимаем кнопку «Добавить».\n3. Выбираем Angular и версию Node.js (например, `20`).\n4. Подключаем свой аккаунт GitHub (или любой другой) к облаку и выбираем нужный репозиторий.\n5. Выбираем регион деплоя и тариф (хватит и самого дешёвого за 1 руб./месяц).\n6. В настройках приложения вводим команду для сборки (например, `npm run build`) и директорию с бандлом (например, `/dist/browser`).\n7. Жмём «Запустить деплой» и немного ждём.\n\nВ результате, Timeweb Cloud создаст инстанс вашего приложения, получит за вас бесплатный SSL от Let's Encrypt и выдаст URL (в виде: `https://user-repo-XXX123.twc1.net`). Данный URL нужно указать в настройках вашего бота у [BotFather](https://t.me/BotFather) (идём в `Bot Settings` токена и далее в разделы: `Menu Button` и `Configure Mini App`).\n\nНемного ждём, пока Telegram обновит кэш у бота и отрисует кнопку меню, которая запускает ваш Mini App.\n\n\u003e [!TIP]\n\u003e\n\u003e Таким образом, если ваша Mini App является основной взаимодействия бота и пользователя, — вам не нужно делать классического бота (на Python/Go/Node.js/...) и тратить на это время. Ваше веб-приложение на Angular уже будет доступно из главного меню бота и по кнопке «Открыть» (Open) в списке всех чатов приложения Telegram на всех платформах.\n\nВсё! Пользуйтесь на здоровье 🎉\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoddr%2Ftma-angular-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkoddr%2Ftma-angular-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoddr%2Ftma-angular-demo/lists"}