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


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

19164Уязвимые обучающие приложения открывают доступ к облакам Fortune 500 для криптомайнинга 19163Почему ботнет SSHStalker успешно атакует Linux уязвимостями десятилетней давности? 19162Microsoft устранила шесть уязвимостей нулевого дня и анонсировала радикальные изменения в... 19161Эскалация цифровой угрозы: как IT-специалисты КНДР используют реальные личности для... 19160Скрытые потребности клиентов и преимущество наблюдения над опросами 19159Академическое фиаско Дороти Паркер в Лос-Анджелесе 19158Китайский шпионский фреймворк DKnife захватывает роутеры с 2019 года 19157Каким образом корейские детские хоры 1950-х годов превратили геополитику в музыку и... 19156Научная революция цвета в женской моде викторианской эпохи 19155Как новый сканер Microsoft обнаруживает «спящих агентов» в открытых моделях ИИ? 19154Как новая кампания DEADVAX использует файлы VHD для скрытой доставки трояна AsyncRAT? 19153Как новые китайские киберкампании взламывают госструктуры Юго-Восточной Азии? 19152Культ священного манго и закат эпохи хунвейбинов в маоистском Китае 19151Готовы ли вы к эре коэффициента адаптивности, когда IQ и EQ больше не гарантируют успех? 19150Иранская группировка RedKitten применяет сгенерированный нейросетями код для кибершпионажа
Ссылка