Интеграция Telegram Mini App с использованием FastAPI и Vue.js 3

Разработан Telegram-бот с MiniApp для записи к врачу и автоматических уведомлений. Бэкенд на FastAPI использует SQLAlchemy для работы с БД и APScheduler для уведомлений. Frontend реализован на Vue.js 3 с использованием Vite, TypeScript, Vue Router, Tailwind CSS, FontAwesome и VueTG для интеграции с Telegram Mini App.
Интеграция Telegram Mini App с использованием FastAPI и Vue.js 3
Изображение носит иллюстративный характер

Для быстрого старта был использован готовый шаблон Vue.js 3, что позволило быстро настроить маршрутизацию и структуру проекта. Основные компоненты включают представления (views) для страниц, компоненты (components) для переиспользуемых блоков UI и роутеры (routers) для управления навигацией. Подход Single Page Application (SPA) обеспечивает плавные переходы между страницами.

Карточки специализаций, карточки докторов и слоты для записи на прием реализованы в виде отдельных компонентов. Эти компоненты динамически загружают данные через API. Использовались useFetch для запросов к API и Vue Router для навигации. Обработка состояния загрузки, ошибок и взаимодействие пользователя с интерфейсом выполняется реактивно.

Фронтенд был развернут на Amvera Cloud с использованием Dockerfile для простоты деплоя. Подключение к Telegram-боту выполнено путём добавления URL развернутого приложения в переменные окружения бэкенда. Проект демонстрирует, как с помощью Vue.js 3 и Tailwind CSS можно быстро создавать функциональные и привлекательные веб-приложения без глубоких знаний CSS.


Новое на сайте

19521Банковский троян VENON на Rust атакует Бразилию с помощью девяти техник обхода защиты 19520Бонобо агрессивны не меньше шимпанзе, но всё решают самки 19519Почему 600-килограммовый зонд NASA падает на Землю из-за солнечной активности? 19518«Липовый календарь»: как расписание превращает работников в расходный материал 19517Вредоносные Rust-пакеты и ИИ-бот крадут секреты разработчиков через CI/CD-пайплайны 19516Как хакеры за 72 часа превратили npm-пакет в ключ от целого облака AWS 19515Как WebDAV-диск и поддельная капча помогают обойти антивирус? 19514Могут ли простые числа скрываться внутри чёрных дыр? 19513Метеорит пробил крышу дома в Германии — откуда взялся огненный шар над Европой? 19512Уязвимости LeakyLooker в Google Looker Studio открывали доступ к чужим базам данных 19511Почему тысячи серверов оказываются открытой дверью для хакеров, хотя могли бы ею не быть? 19510Как исследователи за четыре минуты заставили ИИ-браузер Perplexity Comet попасться на... 19509Может ли женщина без влагалища и шейки матки зачать ребёнка естественным путём? 19508Зачем учёные из Вены создали QR-код, который невозможно увидеть без электронного... 19507Девять уязвимостей CrackArmor позволяют получить root-доступ через модуль безопасности...
Ссылка