У меня спрашивали "Почему именно VUE3"? Сейчас покажу на одном примере:

<script setup lang="ts">
import { useFetch } from '@vueuse/core';

// Используем useFetch для запроса данных
const { data: doctors, isFetching, error } = useFetch('http://127.0.0.1:8000/specialists')
    .post() // Метод POST
    .json(); // Автоматическое преобразование в JSON
</script>

При помощи этих строк мы:

1. Отправляем POST-запрос на указанный эндпоинт
2. Преобразуем его в json

Интересно то, что работает это реактивно.

Бэкенд с фронтендом подружил. Остается последний этап - интегрировать это дело в бота)

На видео демонстрации работы сайта, разработанного с использованием VUE3, я начинаю с показа таблиц в базе данных. В данный момент в таблице пользователей содержится только одна запись, а также представлены таблицы направлений, докторов и записи, где на старте нет ни одной строки.

Далее я перехожу к демонстрации фронтенда, который загружает всю информацию из базы данных. Важно отметить, что для стилизации использован только Tailwind CSS.

На фронтенде реализована страница выбора направления, где также добавлен реактивный поиск — это одна из особенностей VUE3. После этого мы переходим на страницу докторов по выбранному направлению, где открывается возможность записи через слоты.

Я решил, чтоб было веселее показать вам как можно написать телеграмм бота на чистом BOT API Telegram в связке с FastApi. То есть в проекте крайнем мы не будем использовать Aiogram 3, а напишем его с нуля)

Вот пример ответа на сообщение на чистом API (пока без ввода дополнительных переменных для понимания):

async def send_message(client, chat_id: int, text: str):
    await client.post(f"{settings.get_tg_api_url()}/sendMessage", json={
        "chat_id": chat_id,
        "text": text,
        "disable_web_page_preview": True,
        "reply_markup": {
            "inline_keyboard": [
                [{"text": "📅 Мои записи", "callback_data": "booking"}],
                [{"text": "🔖 Забронировать", "web_app": {"url": "https://2ettfx-85-175-194-59.ru.tuna.am/"}}],
                [{"text": "ℹ️ О нас", "callback_data": "about_us"}]
            ]
        }
    })

В целом, много общего со знакомым Aiogram)

Друзья, приветствую!

В ходе написания статьи материала получилось настолько много, что решил разбить ее на 2 части.

В первой части, которую, скорее всего, опубликую завтра утром, сосредоточился на теме создания бэкенда. В статье раскрыл следующие темы:

- Интеграция SQLAlchemy в проект: создание моделей таблиц, написание методов и миграция с помощью Alembic.
- Разработка API методов: создание и настройка эндпоинтов.
- Создание телеграм-бота: реализация без использования Aiogram 3, только с FastAPI и HTTPX.
- Интеграция APScheduler: настройка задач по расписанию в проекте.

В результате я подробно описал все аспекты, которые были реализованы в проекте бекенда: GitHub - VueBotFastApi.

Будете ждать статью?

Надежно поднимаем PostgreSQL 1 командой 🚀

Хотите быстро и надежно поднять PostgreSQL в Docker? Вот команда, которая сделает всё за вас:

docker run --name container_postgres \
  -e POSTGRES_DB=my_db \
  -e POSTGRES_USER=admin \
  -e POSTGRES_PASSWORD=super_password \
  -p 5432:5432 \
  -v $(pwd)/postgres_data:/var/lib/postgresql/data \
  -d postgres

Разбор команды:

- Имя контейнера: --name container_postgres. Удобно для управления контейнером.

- Данные для подключения: задаём имя базы (my_db), пользователя (admin) и пароль (super_password).

- Порт: -p 5432:5432. Сопоставляем порт на хосте и контейнере.

- Сохранение данных: -v $(pwd)/postgres_data:/var/lib/postgresql/data. Пробрасываем локальную папку, чтобы данные базы не пропали при перезапуске контейнера.

После запуска база данных будет доступна по порту 5432, а данные сохранятся в папке postgres_data. Просто и надёжно!

Ещё решил поделиться универсальным скриптом bash. Основная суть скрипта в том, чтоб:

1. Создать виртуальное окружение под Python если оно не существует
2. Активировать виртуальное окружение
3. Установить зависимости с файла requirements.txt
4. Запустить проект

Полезно будет для быстрого разворачивания проекта или для запуска в комплексе с systemd.

Вот полный код скрипта:

#!/bin/bash

# Название виртуального окружения
VENV_NAME="venv"

# Проверяем, существует ли уже виртуальное окружение
if [ ! -d "$VENV_NAME" ]; then
    echo "Создаем виртуальное окружение..."
    python3 -m venv $VENV_NAME
else
    echo "Виртуальное окружение уже существует. Пропускаем создание."
fi

# Активируем виртуальное окружение
echo "Активируем виртуальное окружение..."
source $VENV_NAME/bin/activate

# Устанавливаем зависимости
echo "Устанавливаем зависимости из requirements.txt..."
if [ -f "requirements.txt" ]; then
    pip install -r requirements.txt
else
    echo "Файл requirements.txt не найден! Пожалуйста, проверьте наличие файла."
    deactivate
    exit 1
fi

# Команда для запуска скрипта
echo "Запускаем скрипт..."
python3 main.py

# Деактивация виртуального окружения (опционально, если нужно после выполнения)
echo "Завершаем работу..."
deactivate

Сохранить код нужно в файл с расширением .sh и положить его в корень проекта (рядом с файлом requirements.txt)

Пару важных уточнений.

1. Убедитесь что у вас на сервере установлен Python и Python venv
2. Для того чтоб появилась возможность сделать файл исполняемым, нужно выполнить команду:

chmod +x имя_файла.sh

Эта команда добавляет право на выполнение файла для текущего пользователя.

3. После этого вы можете запустить скрипт, используя команду:

./имя_файла.sh

4. Если вы хотите использовать этот скрипт с systemd, убедитесь, что в файле сервиса указан полный путь к скрипту в параметре ExecStart.

5. Не забудьте заменить 'main.py' в скрипте на имя вашего основного Python файла, который нужно запустить или на команду для запуска скрипта.

Этот скрипт значительно упрощает процесс настройки и запуска Python проектов, особенно при развертывании на новых системах или при автоматизации запуска через systemd.

Трудовые будни в самом разгаре😊 Хотите подробно расскажу как прикрутить к бэкенду на FastApi вход по смс на телефон и вход по коду на email в одной из следующих публикаций?

Друзья, приветствую!

Решил поделиться с вами ещё одним стартовым шаблоном для быстрого начала разработки, но на этот раз не из мира Python, а из мира JavaScript.

Я подготовил для вас мощный стартовый шаблон для разработки современных веб-приложений с использованием:

🚀 Vue 3
⚡️ Vite
🔷 TypeScript
🛣 Vue Router
🎨 Tailwind CSS
🛠 VueUse

Этот шаблон предоставляет оптимизированную структуру и передовые настройки для быстрого старта высокопроизводительных приложений.

Особенности шаблона:

- Composition API и <script setup lang="ts"> синтаксис
- Молниеносная сборка с Vite
- Надежная типизация с TypeScript
- Эффективная навигация с Vue Router
- Гибкая стилизация с Tailwind CSS
- Более 200 полезных утилит с VueUse

Шаблон доступен на GitHub: [ссылка на репозиторий]

В проекте реализовал подробный README, так что вопросов по запуску быть не должно. Там, буквально, достаточно будет ввести 4 команды в терминале и проект будет запущен.

Не забудьте поставить звездочку проекту, если он вам понравился! Ваша поддержка мотивирует меня создавать больше полезных инструментов для разработчиков.

Буду рад вашим отзывам и предложениям по улучшению шаблона. Давайте вместе сделаем разработку на Vue ещё удобнее и эффективнее! 💪

📢Внимание. Важный анонс!📢

Запустил второй телеграм-канал, который будет посвящен JavaScript-технологиям.

В новом канале вы найдете материалы по современным JavaScript-технологиям: Vue 3, Nuxt, Tailwind и другим фреймворкам JS🚀.

Анонсы больших гайдов и публикаций, как и описание технологий, где фронтенд и бэкенд будут перекликаться, планирую дублировать в оба канала.

Посты из нового канала и относительно небольшие гайды, опубликованные на моем сайте по теме JavaScript, тут анонсировать и дублировать не буду, чтобы не забивать эфир.

Так что приглашаю всех заинтересованных в теме современных фронтенд-технологий😉

Друзья, я решил рассказать о способе, который позволит вам создавать мощные современные веб-приложения, объединяя Vue.js 3 и FastAPI. Суть в том, что на этапе разработки мы будем писать 2 независимых приложения: фронтенд на Vue.js 3 (JavaScript-фреймворк) и бэкенд на FastAPI (Python-фреймворк).

В статье я показываю, как построить полноценное веб-приложение, где Vue.js будет отвечать за пользовательский интерфейс, а FastAPI возьмет на себя серверную логику. На примере простого секундомера мы пройдем весь путь от настройки окружения до связывания компонентов в единое приложение.

Вы узнаете:

- как правильно настроить сборку проекта
- как организовать структуру файлов
- как эффективно связать фронтенд с бэкендом

Статья доступна по ссылке: https://yakvenalex.ru/ru/all_technology/zapuskaem-vue-js-3-c-fastapi-v-odnom-prilozhenii

Ребята, есть тут фронтендеры, которым нужна работа? Желательно поближе к Краснодару. Если что, стучитесь в личку за подробностями: @yakvenalexx

🚀 Лайфхак для SQLAlchemy 2: Автоматическое создание таблиц при запуске приложения

Привет, разработчики! Сегодня я хочу поделиться с вами полезным приемом для работы с SQLAlchemy 2, который сэкономит вам время и упростит процесс разработки.

Этот метод позволяет автоматически создавать отсутствующие таблицы в базе данных при запуске вашего приложения, будь то бот, FastAPI или парсер. SQLAlchemy будет сравнивать модели таблиц с реальными таблицами в базе и создавать те, которых не хватает.

Вот как это работает:

1. Настройте базовые параметры SQLAlchemy:

DATABASE_URL = get_db_url()
engine = create_async_engine(DATABASE_URL, echo=False)
async_session_maker = async_sessionmaker(engine, expire_on_commit=False)

class Base(AsyncAttrs, DeclarativeBase):
    abstract = True

2. Опишите ваши модели:

class User(Base):
    tablename = "user"
    user_id: Mapped[int] = mapped_column(BIGINT, primary_key=True)
    user_name: Mapped[str] = mapped_column(String(100))
    username: Mapped[Optional[str]] = mapped_column(String(50))

3. Создайте функцию для генерации таблиц:

async def create_tables():
    async with engine.begin() as conn:
        await conn.run_sync(Base.metadata.create_all)

4. В файле приложения импортируйте все модели и вызовите функцию:

from dao.models import User
from dao.database import create_tables

await create_tables()

Этот подход особенно полезен, когда вы не хотите использовать сложные инструменты для миграций, такие как Alembic. Он прост в реализации и отлично подходит для небольших проектов или быстрого прототипирования.

Попробуйте этот метод в своем следующем проекте и дайте знать, как он вам помог! 👨‍💻👩‍💻

🎉 Управление жизненным циклом бота на Pyrogram

Друзья, привет! 👋 Набросал небольшую, но полезную заметку о том, как грамотно управлять жизненным циклом User-бота через библиотеку Pyrogram. Вы узнаете, как настроить запуск, завершение и добавление хендлеров для вашего бота.

🔗 Читать статью: Управление жизненным циклом User-бота на Pyrogram

Буду рад вашим отзывам и вопросам! 🚀