Друзья, отличные новости!
Вторая часть статьи о разработке Telegram-бота для продажи цифровых товаров готова и, если все пойдет по плану, будет опубликована завтра в первой половине дня.
Проект получил следующие глобальные обновления:
✅ Добавил две новые платежные системы — Telegram Stars и Robokassa (всего теперь три способа оплаты).
✅ Перевел бота на вебхуки для повышения производительности (веб-сервер построен на Aiohttp).
Пока ждете публикации, вы уже можете:
📂 Ознакомиться с исходным кодом проекта на GitHub.
🤖 Протестировать бота в действии: @DigitalMarketAiogramHookBot.
Следите за обновлениями 🙌
Вторая часть статьи о разработке Telegram-бота для продажи цифровых товаров готова и, если все пойдет по плану, будет опубликована завтра в первой половине дня.
Проект получил следующие глобальные обновления:
✅ Добавил две новые платежные системы — Telegram Stars и Robokassa (всего теперь три способа оплаты).
✅ Перевел бота на вебхуки для повышения производительности (веб-сервер построен на Aiohttp).
Пока ждете публикации, вы уже можете:
📂 Ознакомиться с исходным кодом проекта на GitHub.
🤖 Протестировать бота в действии: @DigitalMarketAiogramHookBot.
Следите за обновлениями 🙌
👍21🔥16❤🔥5🤯1🎉1
Доброе утро, друзья! 🌟
Рад поделиться продолжением статьи «Telegram-бот-магазин на Python: пошаговый гайд с оплатой, каталогом и админкой (Aiogram 3 + SQLAlchemy 2)», которое уже доступно на Хабре!
Во второй части я значительно улучшил проект телеграм-бота для продажи цифровых товаров:
🔹 Добавлены две новые платежные системы:
✅ Telegram Stars (звезды);
✅ Robokassa.
🔹 Переход на вебхуки:
Теперь бот работает на основе технологии вебхуков, заменившей ранее используемый лонг-поллинг. В статье я подробно разбираю различия между этими подходами и показываю примеры их применения.
🔹 Обработка платежей через Robokassa:
Этот функционал также реализован с использованием вебхуков.
🔹 Веб-сервер на базе Aiohttp:
Для этой версии я выбрал Aiohttp, так как он является «родным» для Aiogram 3 и отлично подходит для демонстрации. Ранее я часто использовал FastAPI, поэтому в этот раз решил сосредоточиться на более стандартных решениях.
В статье детально разобрана тема работы вебхуков и веб-сервера, а также их совместное использование. Рассмотренные примеры помогут вам полностью разобраться в этих технологиях, так что после прочтения у вас точно не останется вопросов.
💻 Полезные ссылки:
— Исходный код проекта: GitHub
— Рабочий бот: @DigitalMarketAiogramHookBot
— Читайте статью на Хабре: Ссылка
Приятного чтения и успешного кодинга! 🚀
Рад поделиться продолжением статьи «Telegram-бот-магазин на Python: пошаговый гайд с оплатой, каталогом и админкой (Aiogram 3 + SQLAlchemy 2)», которое уже доступно на Хабре!
Во второй части я значительно улучшил проект телеграм-бота для продажи цифровых товаров:
🔹 Добавлены две новые платежные системы:
🔹 Переход на вебхуки:
Теперь бот работает на основе технологии вебхуков, заменившей ранее используемый лонг-поллинг. В статье я подробно разбираю различия между этими подходами и показываю примеры их применения.
🔹 Обработка платежей через Robokassa:
Этот функционал также реализован с использованием вебхуков.
🔹 Веб-сервер на базе Aiohttp:
Для этой версии я выбрал Aiohttp, так как он является «родным» для Aiogram 3 и отлично подходит для демонстрации. Ранее я часто использовал FastAPI, поэтому в этот раз решил сосредоточиться на более стандартных решениях.
В статье детально разобрана тема работы вебхуков и веб-сервера, а также их совместное использование. Рассмотренные примеры помогут вам полностью разобраться в этих технологиях, так что после прочтения у вас точно не останется вопросов.
💻 Полезные ссылки:
— Исходный код проекта: GitHub
— Рабочий бот: @DigitalMarketAiogramHookBot
— Читайте статью на Хабре: Ссылка
Приятного чтения и успешного кодинга! 🚀
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥28👍12❤🔥8❤3🏆2
Please open Telegram to view this post
VIEW IN TELEGRAM
1❤47🔥21🎉11🥰6👍2🙏1
Интеграция Flask (Jinja2) и VueJS3 на одной странице
🔥 Друзья, всех с наступившим!🎉
Сегодня хочу поделиться интересным способом интеграции Jinja2 (шаблонизатор Flask) и VueJS3 в рамках одного приложения. При этом мы обойдемся без поднятия отдельного приложения для Vue и минимизируем конфликты между их синтаксисами.
Демонстрация на примере Flask, но с FastAPI это также работает.
🛠 Настраиваем Flask
Сначала создаем роутер для главной страницы:
🎨 Создаем HTML-шаблон
✨ Как это работает
1️⃣ Flask передает данные в шаблон через render_template.
2️⃣ Мы используем Vue.js, настроив его с кастомными разделителями
3️⃣ Динамическая логика Vue легко уживается с серверным рендерингом Flask.
Теперь ваше приложение объединяет преимущества серверного рендеринга с интерактивностью VueJS3 — все на одной странице без лишних сложностей. 🚀
Попробуйте сами и делитесь результатами! 🙌
🔥 Друзья, всех с наступившим!🎉
Сегодня хочу поделиться интересным способом интеграции Jinja2 (шаблонизатор Flask) и VueJS3 в рамках одного приложения. При этом мы обойдемся без поднятия отдельного приложения для Vue и минимизируем конфликты между их синтаксисами.
Демонстрация на примере Flask, но с FastAPI это также работает.
🛠 Настраиваем Flask
Сначала создаем роутер для главной страницы:
@app.route('/')
def index():
data = {
"title": "Flask + Vue Интеграция",
"description": "Пример комбинации Flask (Jinja2) + VueJS3 на 1 странице"
}
return render_template('index.html', **data)🎨 Создаем HTML-шаблон
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
</head>
<body>
<div id="app">
<h1>[[ message ]]</h1>
<p>[[ description ]]</p>
<button @click="reverseMessage">Reverse Message</button>
</div>
<script type="text/javascript">
const app = Vue.createApp({
delimiters: ['[[', ']]'], // Настраиваем альтернативный синтаксис
data() {
return {
message: "{{ title }}",
description: "{{ description }}",
};
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('');
},
},
});
app.mount('#app');
</script>
</body>
</html>
✨ Как это работает
1️⃣ Flask передает данные в шаблон через render_template.
2️⃣ Мы используем Vue.js, настроив его с кастомными разделителями
[[ и ]], чтобы избежать конфликта с {{ }} в Jinja2. 3️⃣ Динамическая логика Vue легко уживается с серверным рендерингом Flask.
Теперь ваше приложение объединяет преимущества серверного рендеринга с интерактивностью VueJS3 — все на одной странице без лишних сложностей. 🚀
Попробуйте сами и делитесь результатами! 🙌
2👍21🔥13❤7
Привет, друзья! 👋
Подготовил для вас новую статью на своём сайте — подробную инструкцию по работе с JavaScript-фреймворком VueJS 3. Это пошаговый гайд по настройке современного веб-приложения с использованием Vue 3, Vite и Tailwind CSS. В статье подробно разобраны:
💎 установка необходимых зависимостей,
💎 настройка проекта,
💎 интеграция с Vue Router.
Не знаю насколько вам будет интересна тема JavaScript и, в частности, VueJS3. В целом, если тема вам будет интересной то можно будет ряд вопросов разобрать более детально.
На суперпрофессионализм в мире JavaScript и VueJS3 в частности не претендую, но опыта и фишек точно накопилось, так что есть чем поделиться!😊
✨ Ссылка на статью: ЧИТАТЬ
Читаем, делимся мнением, и, конечно, не забываем о ваших вопросах — буду рад обсудить! 🙌
Подготовил для вас новую статью на своём сайте — подробную инструкцию по работе с JavaScript-фреймворком VueJS 3. Это пошаговый гайд по настройке современного веб-приложения с использованием Vue 3, Vite и Tailwind CSS. В статье подробно разобраны:
Не знаю насколько вам будет интересна тема JavaScript и, в частности, VueJS3. В целом, если тема вам будет интересной то можно будет ряд вопросов разобрать более детально.
На суперпрофессионализм в мире JavaScript и VueJS3 в частности не претендую, но опыта и фишек точно накопилось, так что есть чем поделиться!😊
✨ Ссылка на статью: ЧИТАТЬ
Читаем, делимся мнением, и, конечно, не забываем о ваших вопросах — буду рад обсудить! 🙌
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍27🔥10❤7👎1🥰1
Решил рассказать, как быстро поднять Redis на своей локальной машине с помощью Docker. Способ подойдет даже тем, кто не имел отношения к Docker раньше.
Шаги для установки Redis:
1. Установите Docker Desktop на ваш компьютер и запустите его.
2. В терминале (BASH) введите следующую команду:
3. Проверьте подключение через Python. Для этого используйте следующий код:
Если соединение успешно, вы получите
Теперь вы готовы использовать Redis в своем проекте!
Шаги для установки Redis:
1. Установите Docker Desktop на ваш компьютер и запустите его.
2. В терминале (BASH) введите следующую команду:
docker run -d --name redis_container -p 6379:6379 -v redis_data:/data redis:latest3. Проверьте подключение через Python. Для этого используйте следующий код:
import redis
REDIS_HOST = 'localhost'
REDIS_PORT = 6379
REDIS_DB = 0
REDIS_PASSWORD = None
REDIS_USERNAME = None
redis_client = redis.StrictRedis(
host=REDIS_HOST,
port=REDIS_PORT,
db=REDIS_DB,
password=REDIS_PASSWORD,
username=REDIS_USERNAME, # Если требуется
decode_responses=True # Для автоматического преобразования байтов в строки
)
try:
print(redis_client.ping()) # Проверка соединения
except redis.ConnectionError:
print("Не удалось подключиться к Redis.")
Если соединение успешно, вы получите
True. В противном случае отобразится сообщение об ошибке.Теперь вы готовы использовать Redis в своем проекте!
1🔥22👍14❤7😎1
С наступающим Рождеством
В этот светлый и радостный праздник хочу пожелать вам тепла, уюта и гармонии в душе.
Пусть этот праздник станет для вас временем, когда сбываются мечты и исполняются самые заветные желания.
Желаю вам здоровья, счастья и успехов как в личной жизни, так и в ваших начинаниях в программировании.
Пусть Рождество принесет в ваш дом мир и любовь, а в сердца — надежду и веру в лучшее.
С праздником
Please open Telegram to view this post
VIEW IN TELEGRAM
❤34🎉13👍6🔥3🙏2☃1
Не знаю, будет ли вам интересно, но я подготовил новый гайд по Vue.js 3.
В этот раз я подробно разобрал тему отслеживания событий и реакции на них. Тема достаточно сложная. Поэтому решил, что тем кто интересуется этим фреймворком будет интересно и полезно.
В этом гайде вы узнаете, как дочерний компонент инициирует событие, а родительский реагирует на него, выполняя необходимые действия.
В своем примере, я показываю, как можно удалить компонент со страницы при клике на кнопку "Удалить".
Если вам это интересно, переходите по ссылке на гайд: [ССЫЛКА].
В этот раз я подробно разобрал тему отслеживания событий и реакции на них. Тема достаточно сложная. Поэтому решил, что тем кто интересуется этим фреймворком будет интересно и полезно.
В этом гайде вы узнаете, как дочерний компонент инициирует событие, а родительский реагирует на него, выполняя необходимые действия.
В своем примере, я показываю, как можно удалить компонент со страницы при клике на кнопку "Удалить".
Если вам это интересно, переходите по ссылке на гайд: [ССЫЛКА].
База знаний Алексея Яковенко
Инструкция по отслеживанию событий в Vue 3
Короткая и достпупная инструкция по отслеживанию событий в Vue 3 (EMIT).
3👍24❤7🔥5👎1
🎄 Друзья, с Рождеством! 🎄
Праздники подходят к концу, а это значит, что пора возвращаться в боевой режим! 💪 И у меня для вас крутой анонс: стартую новый большой проект под Хабр.
Если вы читали мои статьи о разработке Telegram-ботов и FastAPI, то знаете, что раньше я создавал фронтенд либо на чистом JS + CSS + HTML, либо использовал Jinja2 для интеграции с бэкендом.
На этот раз я решил пойти дальше и полностью вынести фронтенд в отдельное приложение на Vue 3.
📌 Что за проект?
Мы будем писать Telegram-бота с MiniApp для записи в фейковую клинику. Бот сможет:
- записывать на прием к врачу,
- напоминать о визите,
- предоставлять информацию о врачах.
📌 Технологический стек:
- 🐍 FastAPI — вебхуки и API для бота,
- 🗃 SQLAlchemy — для работы с базой данных,
- 🤖 Aiogram 3 — для разработки самого бота,
- 🖥 Vue 3 — полноценный фронтенд-приложение с рядом удобных библиотек.
Будете ждать? 😉 🚀
Праздники подходят к концу, а это значит, что пора возвращаться в боевой режим! 💪 И у меня для вас крутой анонс: стартую новый большой проект под Хабр.
Если вы читали мои статьи о разработке Telegram-ботов и FastAPI, то знаете, что раньше я создавал фронтенд либо на чистом JS + CSS + HTML, либо использовал Jinja2 для интеграции с бэкендом.
На этот раз я решил пойти дальше и полностью вынести фронтенд в отдельное приложение на Vue 3.
📌 Что за проект?
Мы будем писать Telegram-бота с MiniApp для записи в фейковую клинику. Бот сможет:
- записывать на прием к врачу,
- напоминать о визите,
- предоставлять информацию о врачах.
📌 Технологический стек:
- 🐍 FastAPI — вебхуки и API для бота,
- 🗃 SQLAlchemy — для работы с базой данных,
- 🤖 Aiogram 3 — для разработки самого бота,
- 🖥 Vue 3 — полноценный фронтенд-приложение с рядом удобных библиотек.
Будете ждать? 😉 🚀
5🔥91👍23❤10👾3
Процесс разработки идет полным ходом. Уже полностью готов фронт. За завтра, если успею, подключу к фронту на VUE3 бэкенд на FastApi.
Так что должен буду успеть к концу недели выйти со статьей.
Так что должен буду успеть к концу недели выйти со статьей.
🔥44👍9❤🔥6🙏6
У меня спрашивали "Почему именно VUE3"? Сейчас покажу на одном примере:
При помощи этих строк мы:
1. Отправляем POST-запрос на указанный эндпоинт
2. Преобразуем его в json
Интересно то, что работает это реактивно.
<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
Интересно то, что работает это реактивно.
🔥16👍6❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Бэкенд с фронтендом подружил. Остается последний этап - интегрировать это дело в бота)
На видео демонстрации работы сайта, разработанного с использованием VUE3, я начинаю с показа таблиц в базе данных. В данный момент в таблице пользователей содержится только одна запись, а также представлены таблицы направлений, докторов и записи, где на старте нет ни одной строки.
Далее я перехожу к демонстрации фронтенда, который загружает всю информацию из базы данных. Важно отметить, что для стилизации использован только Tailwind CSS.
На фронтенде реализована страница выбора направления, где также добавлен реактивный поиск — это одна из особенностей VUE3. После этого мы переходим на страницу докторов по выбранному направлению, где открывается возможность записи через слоты.
На видео демонстрации работы сайта, разработанного с использованием VUE3, я начинаю с показа таблиц в базе данных. В данный момент в таблице пользователей содержится только одна запись, а также представлены таблицы направлений, докторов и записи, где на старте нет ни одной строки.
Далее я перехожу к демонстрации фронтенда, который загружает всю информацию из базы данных. Важно отметить, что для стилизации использован только Tailwind CSS.
На фронтенде реализована страница выбора направления, где также добавлен реактивный поиск — это одна из особенностей VUE3. После этого мы переходим на страницу докторов по выбранному направлению, где открывается возможность записи через слоты.
1🔥35👍9🤩3❤2🙏1
Я решил, чтоб было веселее показать вам как можно написать телеграмм бота на чистом BOT API Telegram в связке с FastApi. То есть в проекте крайнем мы не будем использовать Aiogram 3, а напишем его с нуля)
🔥31👍11❤🔥5❤1
Вот пример ответа на сообщение на чистом API (пока без ввода дополнительных переменных для понимания):
В целом, много общего со знакомым Aiogram)
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)
🔥13👏7👍5❤1🥴1
This media is not supported in your browser
VIEW IN TELEGRAM
Друзья, привет!
Я рад представить вам демонстрацию нового проекта, который полностью готов к использованию! Видео, прикрепленное к этому посту, показывает работу проекта в полном объеме.
Этот проект представляет собой интеграцию FastAPI (бэкенд) и VueJS 3 (фронтенд) с реализацией в формате телеграм-бота и MiniApp для записи к врачам через удобные слоты. В статье, которую я скоро опубликую, расскажу обо всех технических аспектах и новшествах, задействованных в этом проекте.
Особое внимание уделено множеству уникальных решений и фишек, которые я раньше не описывал. Уверен, что статья будет полезной и интересной. Очень рассчитываю на вашу поддержку, когда она выйдет на Хабре!
Исходники:
🔗 Исходник бэкенда: GitHub
🔗 Исходник фронтенда: GitHub
🤖 Бот: @Vue3_FastApiBOT
Вопросы и обратная связь👇
Я рад представить вам демонстрацию нового проекта, который полностью готов к использованию! Видео, прикрепленное к этому посту, показывает работу проекта в полном объеме.
Этот проект представляет собой интеграцию FastAPI (бэкенд) и VueJS 3 (фронтенд) с реализацией в формате телеграм-бота и MiniApp для записи к врачам через удобные слоты. В статье, которую я скоро опубликую, расскажу обо всех технических аспектах и новшествах, задействованных в этом проекте.
Особое внимание уделено множеству уникальных решений и фишек, которые я раньше не описывал. Уверен, что статья будет полезной и интересной. Очень рассчитываю на вашу поддержку, когда она выйдет на Хабре!
Исходники:
Вопросы и обратная связь👇
Please open Telegram to view this post
VIEW IN TELEGRAM
10🔥61👍15❤6❤🔥4
Легкий путь в Python
Друзья, привет! Я рад представить вам демонстрацию нового проекта, который полностью готов к использованию! Видео, прикрепленное к этому посту, показывает работу проекта в полном объеме. Этот проект представляет собой интеграцию FastAPI (бэкенд) и VueJS…
Обещанные исходники:
🔗 Исходник бэкенда: GitHub
🔗 Исходник фронтенда: GitHub
🤖 Бот: @Vue3_FastApiBOT
Вопросы и обратная связь👇
Вопросы и обратная связь👇
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥27❤6👍4