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


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

19209Как беспрецедентный бунт чернокожих женщин в суде Бостона разрушил планы рабовладельцев? 19208Как новые поколения троянов удаленного доступа захватывают системы ради кибершпионажа и... 19207Почему мировые киберпреступники захватили рекламные сети, и как Meta вместе с властями... 19206Как фальшивый пакет StripeApi.Net в NuGet Gallery незаметно похищал финансовые API-токены... 19205Зачем неизвестная группировка UAT-10027 внедряет бэкдор Dohdoor в системы образования и... 19204Ритуальный предсвадебный плач как форма протеста в традиционном Китае 19203Невидимая угроза в оперативной памяти: масштабная атака северокорейских хакеров на... 19202Как уязвимость нулевого дня в Cisco SD-WAN позволяет хакерам незаметно захватывать... 19201Как Google разрушил глобальную шпионскую сеть UNC2814, охватившую правительства 70 стран... 19200Как простое открытие репозитория в Claude Code позволяет хакерам получить полный контроль... 19199Зачем киберсиндикат SLH платит женщинам до 1000 долларов за один телефонный звонок в... 19198Устранение слепых зон SOC: переход к доказательной сортировке угроз для защиты бизнеса 19197Скрытые бэкдоры в цепочках поставок по: атаки через вредоносные пакеты NuGet и npm
Ссылка