Не знаю, будет ли вам интересно, но я подготовил новый гайд по Vue.js 3.

В этот раз я подробно разобрал тему отслеживания событий и реакции на них. Тема достаточно сложная. Поэтому решил, что тем кто интересуется этим фреймворком будет интересно и полезно.

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

В своем примере, я показываю, как можно удалить компонент со страницы при клике на кнопку "Удалить".

Если вам это интересно, переходите по ссылке на гайд: [ССЫЛКА].

🎄 Друзья, с Рождеством! 🎄

Праздники подходят к концу, а это значит, что пора возвращаться в боевой режим! 💪 И у меня для вас крутой анонс: стартую новый большой проект под Хабр.

Если вы читали мои статьи о разработке Telegram-ботов и FastAPI, то знаете, что раньше я создавал фронтенд либо на чистом JS + CSS + HTML, либо использовал Jinja2 для интеграции с бэкендом.

На этот раз я решил пойти дальше и полностью вынести фронтенд в отдельное приложение на Vue 3.

📌 Что за проект?

Мы будем писать Telegram-бота с MiniApp для записи в фейковую клинику. Бот сможет:

- записывать на прием к врачу,
- напоминать о визите,
- предоставлять информацию о врачах.

📌 Технологический стек:

- 🐍 FastAPI — вебхуки и API для бота,
- 🗃 SQLAlchemy — для работы с базой данных,
- 🤖 Aiogram 3 — для разработки самого бота,
- 🖥 Vue 3 — полноценный фронтенд-приложение с рядом удобных библиотек.

Будете ждать? 😉 🚀

У меня спрашивали "Почему именно 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, тут анонсировать и дублировать не буду, чтобы не забивать эфир.

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