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


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

19817В Луксоре нашли стелу с римским императором в образе фараона 19816Экипаж Artemis II о моменте, когда земля исчезла за луной 19815Почему луна выглядит по-разному в разных точках земли? 19814Adobe экстренно закрыла опасную дыру в Acrobat Reader, которую хакеры использовали с... 19813Метеорный поток, рождённый из умирающего астероида 19812Когда робот пишет за тебя прощальную смс 19811Что общего у лунной миссии, толстого попугая, загадочной плащаницы и лекарства от диабета? 19810Какие снимки Artemis II уже стали иконами лунной программы? 19809Кто на самом деле хочет сладкого — вы или ваши бактерии? 19808Как рекламные данные 500 миллионов телефонов оказались в руках спецслужб? 19807Экипаж Artemis II вернулся на землю после десяти дней в космосе 19806Зелёная и коричневая луна: почему геологи Artemis II уже не могут усидеть на месте 19805Эксперты уверены в теплозащитном щите Artemis II, несмотря на проблемы предшественника 19804Выжить внутри торнадо: каково это — когда тебя засасывает в воронку 19803Аляскинские косатки-охотники на млекопитающих замечены у берегов Сиэтла
Ссылка