Ssylka

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


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

18884Знаете ли вы, что приматы появились до вымирания динозавров, и готовы ли проверить свои... 18883Четыреста колец в туманности эмбрион раскрыли тридцатилетнюю тайну звездной эволюции 18882Телескоп Джеймс Уэбб раскрыл тайны сверхэффективной звездной фабрики стрелец B2 18881Математический анализ истинного количества сквозных отверстий в человеческом теле 18880Почему даже элитные суперраспознаватели проваливают тесты на выявление дипфейков без... 18879Шесть легендарных древних городов и столиц империй, местоположение которых до сих пор... 18878Обзор самых необычных медицинских диагнозов и клинических случаев 2025 года 18877Критическая уязвимость CVE-2025-14847 в MongoDB открывает удаленный доступ к памяти... 18876Научное обоснование классификации солнца как желтого карлика класса G2V 18875Как безграничная преданность горным гориллам привела Дайан Фосси к жестокой гибели? 18874Новый родственник спинозавра из Таиланда меняет представления об эволюции хищников Азии 18873Как новая электрохимическая технология позволяет удвоить добычу водорода и снизить... 18872Могут ли ледяные гиганты Уран и Нептун на самом деле оказаться каменными? 18871Внедрение вредоносного кода в расширение Trust Wallet привело к хищению 7 миллионов... 18870Проверка клинического мышления на основе редких медицинских случаев 2025 года