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.


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

15184Тайны центральной зоны млечного пути: новая гипотеза о природе тёмной материи 15183Генетическая скудость европейского картофеля: прорыв в анализе старых сортов 15182Золотые наночастицы против слепоты: новый взгляд на лечение макулярной дегенерации 15181Как искусственный интеллект меняет молекулярный дизайн с помощью оценки неопределённости? 15180Как ATG-9 управляет восстановлением лизосом и может ли это изменить подход к лечению... 15179Почему метеорные дожди так непредсказуемы? 15178Как менялось предназначение уникального рога из мезолита в Швеции? 15177Стагнация промысла и взлёт акваферм: как меняется рыбная отрасль Малайзии 15176Что скрывает глубина: почему впервые удалось заснять детёныша колоссального кальмара? 15175Какие тайны древней воды Марса открывают кристаллы из кратера Езеро? 15174Рекордная засуха угрожает Германии: риски для урожая, лесов и экономики 15173Почему козы умнее овец и альпак? 15172Когда собственное тело становится врагом: загадка синдрома Леша-Нихена 15171Светящиеся улики: как перовскиты меняют расследование преступлений 15170Тайны Антикитерского механизма: симуляция древнего устройства раскрывает неожиданные...