Шаг 1: Создаем сайт на React ⚛️
React — это одна из самых популярных библиотек для создания сайтов и приложений. Она помогает легко управлять элементами на странице, что делает разработку динамичных интерфейсов быстрее и проще.
Мы будем использовать специальный инструмент под названием Vite, который помогает создавать проекты на React очень быстро. В отличие от других инструментов, Vite настраивается проще и запускает приложение моментально. Это особенно полезно, если ты хочешь быстро что-то попробовать или создать небольшое приложение.
Установка React через Vite
Для начала нам нужно установить React-приложение с помощью Vite. Это легко сделать с помощью команды:
npm create vite
После выполнения команды тебе будет предложено выбрать какой создать проект. Выбираем следующие пункты:
- React
- JavaScript
Теперь наш проект готов, и его можно открывать в редакторе кода. Дальше настроим приложение для работы с Telegram.
Интеграция с Telegram 📱
Чтобы наше приложение взаимодействовало с Telegram, нужно добавить следующую строку.
Открой файл index.html и в разделе <head> добавь эту строчку:
<script src="https://telegram.org/js/telegram-web-app.js?56"></script>
Этот скрипт позволит приложению использовать функции Telegram и взаимодействовать с пользователями через объект window.Telegram.WebApp. Теперь наше приложение может «общаться» с Telegram и, например, закрывать или открывать web-приложение прямо в чате.
Подключаем Telegram в React-приложение
Давай добавим функционал для взаимодействия с Telegram в файл App.jsx. Вот пример простого кода:
import { useEffect } from 'react';
import './App.css';
const tg = window.Telegram.WebApp;
function App() {
useEffect(() => {
tg.ready();
}, []);
const onClose = () => {
tg.close();
};
return (
<>
<p>Hello World</p>
<button onClick={onClose}>Close</button>
</>
);
}
export default App;
Теперь наше приложение может реагировать на действия пользователя в Telegram, например, закрываться по нажатию кнопки «Close».
Убираем лишние зависимости
Чтобы избежать ошибок, удалим некоторые строки в файле package.json.
"eslint": "^9.17.0",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
Настраиваем внешний вид под тему Telegram 🎨
Telegram поддерживает разные темы — светлую и тёмную, и мы можем сделать так, чтобы внешний вид нашего приложения автоматически подстраивался под эту тему.
Для этого откроем файл App.css и добавим следующий код:
:root {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--tg-theme-bg-color);
color: var(--tg-theme-text-color);
}
Теперь цвета текста и фона будут меняться в зависимости от того, какую тему пользователь выбрал в Telegram. Кстати, полный список всех доступных цветов ты можешь найти в документации Telegram здесь, в разделе ThemeParams.
Делаем приложение доступным через интернет 🌍
Чтобы Telegram мог взаимодействовать с нашим приложением, оно должно быть доступно в интернете по безопасному соединению (HTTPS). Для этого нам поможет ngrok.
Что такое ngrok?
ngrok — это инструмент, который позволяет сделать твоё локальное приложение доступным в интернете. Это очень удобно, когда ты работаешь на своём компьютере, но хочешь, чтобы другие могли протестировать твоё приложение, не устанавливая его у себя.
Настраиваем ngrok
- Устанавливаем и настраиваем её.
- В консоли вводим команду:
ngrok http Порт_на_котором_запущен_сайт
Эта команда создаст специальную HTTPS-ссылку, которую можно использовать для доступа к нашему React-приложению через интернет. Теперь Telegram сможет взаимодействовать с нашим сайтом через эту ссылку.
Шаг 2: Создаем бота на Python с помощью aiogram 🤖
Устанавливаем библиотеку aiogram
Теперь давай настроим нашего Telegram-бота, который будет запускать Web App. Для этого мы будем использовать aiogram — это популярная библиотека на Python, которая делает создание ботов очень простым.
Для начала установим её через команду:
pip install aiogram
Регистрируем бота в Telegram и настраиваем Web App 🔗
Чтобы создать бота, нужно использовать BotFather в Telegram. Это официальный бот от Telegram, который позволяет регистрировать новых ботов и настраивать их.
- Открой BotFather и создай нового бота.
- Чтобы добавить кнопку для открытия Web App, используй команду:
/setmenubutton
Создаем бота с поддержкой Web App
Теперь создадим файл main.py, в котором напишем логику работы нашего бота. Вот пример кода:
import logging
import asyncio
from aiogram import Bot, Dispatcher
from aiogram.types import WebAppInfo, InlineKeyboardButton, InlineKeyboardMarkup
from aiogram.filters import Command
API_TOKEN = 'ВАШ_ТОКЕН_БОТА'
logging.basicConfig(level=logging.INFO)
# Создаем бота и диспетчер
bot = Bot(token=API_TOKEN)
dp = Dispatcher()
# Обработчик команды /start
@dp.message(Command(commands=['start']))
async def send_welcome(message):
# Создаем Web App кнопку
web_app_url = 'ПУБЛИЧНАЯ_ССЫЛКА_ИЗ_NGROK'
web_app_info = WebAppInfo(url=web_app_url)
keyboard = InlineKeyboardMarkup(inline_keyboard=[
[InlineKeyboardButton(text="Открыть Web App", web_app=web_app_info)]
])
await message.answer("Привет! Нажми кнопку, чтобы открыть Web App:", reply_markup=keyboard)
# Функция запуска бота
async def main():
dp.message.register(send_welcome)
await bot.delete_webhook(drop_pending_updates=True)
await dp.start_polling(bot)
if __name__ == '__main__':
asyncio.run(main())
Этот код создаёт бота, который отправляет пользователю кнопку для открытия Web App.
Запуск бота и тестирование 🚀
Теперь, когда всё настроено, давай протестируем наше приложение:
1. Запусти React-приложение командой:
npm run dev
2. Запусти бота:
python main.py
3. Пробрось порт для React-приложения через ngrok:
ngrok http НАШ_ПОРТ_REACT_ПРИЛОЖЕНИЯ
Теперь открой бота в Telegram и проверь, работает ли Web App. Всё готово! 🎉
Легкое домашнее задание для тебя 🎓
Попробуй сделать следующее:
- Измени текст в кнопке и приветственном сообщении.
- Поменяй фон и цвет текста в зависимости от темы Telegram.
- Для закрепления материала постарайся сделать своего бота с поддержкой Web app
Это простое задание поможет тебе лучше понять, как всё работает. Пиши в комментариях, если возникнут вопросы или что-то не получится!
Подпишись на мой Telegram-канал! 📢
Там я публикую новые статьи, делюсь полезными советами и рассказываю о тонкостях разработки. Подписывайся, чтобы быть в курсе всего самого интересного: Переходи в канал 🚀
И обязательно оставь комментарий к этой статье! Твои вопросы и отзывы помогают мне делать контент ещё лучше. 😊
#DevDigest #React #Telegram #WebApp #Vite #Aiogram #Python #Frontend #Разработка #Ngrok #СозданиеБота #Программирование #JavaScript #TelegramBot #API #WebDevelopment #ТемаTelegram #ИнтеграцияTelegram #ВебПриложение #Боты #UX #Интерфейс