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


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

19989Шесть историй, которые умещаются на ладони 19986Как 30 000 аккаунтов Facebook оказались в руках вьетнамских хакеров? 19985LofyGang вернулась: как бразильские хакеры охотятся на геймеров через поддельные читы 19984Автономная проверка защиты: как не отстать от ИИ-атак 19983Взлом Trellix: хакеры добрались до исходного кода одной из ведущих компаний по... 19982Почему почти 3000 монет в норвежском поле перевернули представление о викингах? 19981Как поддельная CAPTCHA опустошает ваш счёт и крадёт криптовалюту? 19980Слежка за каждым шагом: как ИИ превращает государство в машину тотального контроля 19979Как хакеры грабят компании через звонок в «техподдержку» 19978Почему именно Нью-Йорк стал самым уязвимым городом восточного побережья перед... 19977Как одна команда git push открывала доступ к миллионам репозиториев 19976Зачем древние народы убивали ножами и мечами: оружие как основа власти 19975Как Python-бэкдор DEEPDOOR крадёт ваши облачные пароли незаметно? 19974Послание в бутылке: математика невозможного 19973Почему ИИ-инфраструктура стала новой целью хакеров быстрее, чем ждали все?
Ссылка