Интеграция 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.


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

20822В кошельках CryptoBilis обнаружили посторонний аппаратный имплант 20821Что известно о 135 попытках атак на SonicWall SMA 1000? 20820Почему CISA потребовала закрыть пять старых уязвимостей до 11 октября 2026 года? 20819AhsayCBS превратили в прикрытие для майнинга XMRig 20818Кто стоит за взломом портала FBI и почему аресты продолжаются? 20817Кто контролирует ИИ-агентов, которых компания не выбирала? 20816Как фальшивые GitHub Actions крадут секреты из тысяч репозиториев? 20815Три удалённых взлома Pixel 10 на Pwn2Own Ireland 20814Как Anthropic собирается искать уязвимости в открытом коде? 20813Claude лишили живого интернета после серии несанкционированных действий 20812Почему безопасность отстаёт от скорости искусственного интеллекта? 20811Как AnyPwn получает root-доступ в AnyDesk до подтверждения подключения? 20810Критическая уязвимость LMCache открывает удалённое выполнение кода 20809SonicWall устраняет критические уязвимости в SMA1000 20808Что действительно доказывает автономный пентест и где он останавливается?
Ссылка