Визуальный конструктор с drag-and-drop интерфейсом, где вы просто перетаскиваете блоки на холст, а готовый бот появляется сам.
💡 Идеально подходит для малого бизнеса, фрилансеров и тех, кто хочет быстро запустить бота, не изучая программирование.
📋 Подробное описание потока (нажми для раскрытия)
- 👤 Пользователь создает схему бота в визуальном редакторе
- 🎨 Frontend отправляет изменения через WebSocket для реального времени
- 📡 API Server валидирует данные и сохраняет в PostgreSQL
- 🤖 Generator преобразует схему в Python код с aiogram
- ☁️ Deployment автоматически деплоит на Railway
- 📱 Telegram получает webhook и начинает обрабатывать сообщения
- 📊 Analytics собирает статистику использования в реальном времени
Показать структуру проекта
📦 telegram-bot-builder/
┣ 📂 client/ # 🎨 React Frontend
┃ ┣ 📂 components/ # UI компоненты
┃ ┃ ┣ 📂 editor/ # Визуальный редактор
┃ ┃ ┃ ┣ 📂 bot/ # Компоненты бота
┃ ┃ ┃ ┣ 📂 canvas/ # Холст редактора
┃ ┃ ┃ ┣ 📂 code/ # Редактор кода
┃ ┃ ┃ ┣ 📂 database/ # Управление БД
┃ ┃ ┃ ┣ 📂 google-sheets/ # Интеграция с Google Sheets
┃ ┃ ┃ ┣ 📂 groups/ # Управление группами
┃ ┃ ┃ ┣ 📂 properties/ # Панель свойств
┃ ┃ ┃ ┣ 📂 template/ # Шаблоны
┃ ┃ ┃ ┗ 📄 emoji-picker.tsx # Выбор эмодзи
┃ ┃ ┣ 📂 layout/ # Компоненты макета
┃ ┃ ┣ 📂 media/ # Медиа компоненты
┃ ┃ ┣ 📂 ui/ # Базовые UI элементы
┃ ┃ ┗ 📄 theme-provider.tsx # Провайдер темы
┃ ┣ 📂 contexts/ # React контексты
┃ ┣ 📂 hooks/ # React хуки
┃ ┣ 📂 lib/ # Библиотеки и утилиты
┃ ┃ ┣ 📂 generate/ # Генерация кода
┃ ┃ ┣ 📂 database/ # Работа с БД
┃ ┃ ┣ 📂 MessageHandlers/ # Обработчики сообщений
┃ ┃ ┣ 📂 CommandHandler/ # Обработчики команд
┃ ┃ ┣ 📂 Keyboard/ # Генерация клавиатур
┃ ┃ ┣ 📂 MediaHandler/ # Обработка медиа
┃ ┃ ┣ 📂 UserHandler/ # Обработка пользователей
┃ ┃ ┣ 📂 Conditional/ # Условная логика
┃ ┃ ┣ 📂 scaffolding/ # Каркас генерации
┃ ┃ ┗ 📄 bot-generator.ts # Генератор ботов
┃ ┣ 📂 pages/ # Страницы приложения
┃ ┣ 📂 types/ # TypeScript типы
┃ ┣ 📂 utils/ # Утилиты
┃ ┣ 📄 App.tsx # Главный компонент
┃ ┗ 📄 main.tsx # Точка входа
┣ 📂 server/ # 🖥️ Express Backend
┃ ┣ 📂 auth/ # Аутентификация
┃ ┣ 📂 bots/ # Управление ботами
┃ ┃ ┣ 📄 startBot.ts # Запуск бота
┃ ┃ ┣ 📄 stopBot.ts # Остановка бота
┃ ┃ ┗ 📄 restartBotIfRunning.ts # Перезапуск бота
┃ ┣ 📂 database/ # Работа с БД
┃ ┃ ┣ 📄 db.ts # Подключение к БД
┃ ┃ ┣ 📄 db-routes.ts # Маршруты БД
┃ ┃ ┣ 📄 db-utils.ts # Утилиты БД
┃ ┃ ┗ 📄 init-db.ts # Инициализация БД
┃ ┣ 📂 files/ # Работа с файлами
┃ ┣ 📂 google-sheets/ # Интеграция с Google Sheets
┃ ┣ 📂 routes/ # API маршруты
┃ ┃ ┣ 📄 routes.ts # Основные маршруты
┃ ┃ ┣ 📄 setupProjectRoutes.ts # Маршруты проектов
┃ ┃ ┣ 📄 setupBotManagementRoutes.ts # Управление ботами
┃ ┃ ┗ 📄 setupGithubPushRoute.ts # GitHub синхронизация
┃ ┣ 📂 storages/ # Хранилища
┃ ┣ 📂 telegram/ # Telegram API
┃ ┃ ┣ 📄 telegram-client.ts # Клиент Telegram
┃ ┃ ┣ 📄 telegram-media.ts # Медиа Telegram
┃ ┃ ┗ 📄 auth-middleware.ts # Аутентификация Telegram
┃ ┣ 📂 terminal/ # Терминал
┃ ┣ 📂 utils/ # Утилиты сервера
┃ ┗ 📄 index.ts # Точка входа сервера
┣ 📂 shared/ # 🔗 Общие модули
┃ ┣ 📄 schema.ts # Drizzle ORM схемы
┃ ┗ 📄 scaffolding-wrapper.ts # Обёртка генерации
┣ 📂 config/ # ⚙️ Конфигурация
┃ ┗ 📂 google-auth/ # Google OAuth
┣ 📂 bots/ # 🤖 Сгенерированные боты
┃ ┗ 📄 *.py # Python боты
┣ 📂 migrations/ # 🗄️ Миграции БД
┣ 📂 uploads/ # 📁 Загруженные файлы
┣ 📂 assets/ # 🖼️ Ресурсы
┃ ┗ 📂 images/ # Изображения
┣ 📂 docs/ # 📚 Документация
┃ ┣ 📂 deployment/ # Деплой
┃ ┣ 📂 development/ # Разработка
┃ ┣ 📂 features/ # Функции
┃ ┣ 📂 analysis/ # Анализ
┃ ┗ 📄 COMPONENTS.md # Компоненты
┣ 📂 scripts/ # 📜 Скрипты
┣ 📂 dist/ # 📦 Сбилденные файлы
┣ 📄 package.json # 📦 Зависимости Node.js
┣ 📄 tsconfig.json # ⚙️ Настройки TypeScript
┣ 📄 vite.config.ts # ⚡ Конфигурация Vite
┣ 📄 drizzle.config.ts # 🗄️ Настройки Drizzle ORM
┗ 📄 .env.example # 🔐 Пример переменных окружения
🔗 Основные API маршруты (нажми для раскрытия)
| 🎯 Категория | 📡 Endpoint | 📝 Описание |
|---|---|---|
| 📋 Проекты | GET /api/projects |
Список проектов пользователя |
POST /api/projects |
Создать новый проект | |
PUT /api/projects/{id} |
Обновить проект | |
DELETE /api/projects/{id} |
Удалить проект | |
| 🧩 Узлы | GET /api/projects/{id}/nodes |
Получить схему бота |
POST /api/projects/{id}/nodes |
Добавить узел | |
PUT /api/projects/{id}/nodes/{nodeId} |
Обновить узел | |
DELETE /api/projects/{id}/nodes/{nodeId} |
Удалить узел | |
| 🤖 Боты | POST /api/bots/{id}/generate |
Сгенерировать Python код |
POST /api/bots/{id}/deploy |
Задеплоить бота | |
GET /api/bots/{id}/status |
Статус бота | |
POST /api/bots/{id}/stop |
Остановить бота | |
| 📁 Медиа | POST /api/media/upload |
Загрузить файл |
GET /api/media/{id} |
Скачать файл | |
DELETE /api/media/{id} |
Удалить файл | |
| 📊 Статистика | GET /api/bots/{id}/stats |
Статистика использования |
GET /api/bots/{id}/users |
Пользователи бота | |
GET /api/bots/{id}/messages |
История сообщений |
- 🎨 Создавайте ботов перетаскиванием - никакого кода, просто перемещайте блоки мышкой
- 💬 Отправляйте сообщения - с форматированием, кнопками и медиафайлами
- 🎨 Красивые интерфейсы - встроенные и обычные клавиатуры
- 📁 Работа с медиа - фото, видео, аудио, документы
- 📝 Сбор данных - формы для сбора информации от пользователей
- 🧠 Логика и условия - "если произошло то-то, то сделай это"
- 👥 База пользователей - автоматически собирает информацию о пользователях
- 📊 Статистика - смотрите, кто написал боту, какие команды использует
- 🎭 Светлая и темная темы - удобно работать днем и ночью
- 📱 Работает на мобильных телефонах - создавайте ботов с планшета или смартфона, интерфейс адаптирован для всех устройств
- Зарегистрируйтесь на Railway.app
- Создайте новый проект
- Подключите репозиторий с кодом
- Добавьте переменные окружения (см. docs/deployment/RAILWAY_DEPLOY.md)
- Создайте PostgreSQL базу данных
- Запустите миграции базы данных
Подробные инструкции по деплою на Railway смотрите в файле docs/deployment/RAILWAY_DEPLOY.md.
- Node.js ≥ 18.0.0
- PostgreSQL ≥ 15
- Python ≥ 3.10 (для сгенерированных ботов)
- Git
Шаг 1: Обновление системы и установка зависимостей
| 🐧 Linux (Ubuntu/Debian) | 🏁 Windows | 🍎 macOS |
|---|---|---|
|
Способ 1: Через терминал (рекомендуется): Ubuntu/Debian: sudo apt update && sudo apt install -y gitFedora/CentOS: sudo dnf install -y gitArch Linux: sudo pacman -S gitСпособ 2: С сайта:
Проверка установки: git --version |
Способ 1: Через winget (рекомендуется): winget install --id Git.Git -e --source wingetСпособ 2: Через установщик:
Проверка установки:
Откройте PowerShell от имени администратора ( git --version
|
Способ 1: Через Homebrew (рекомендуется): # Установка Homebrew (если не установлен)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# Установка Git
brew install gitСпособ 2: С сайта:
Проверка установки: git --version
|
Шаг 2: Установка Node.js LTS
| 🐧 Linux | 🏁 Windows | 🍎 macOS |
|---|---|---|
|
Способ 1: Через терминал (рекомендуется): curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt install -y nodejs
node -v && npm -vСпособ 2: С сайта:
|
Способ 1: Через winget: winget install OpenJS.NodeJS.LTS
node -v && npm -vСпособ 2: С сайта:
node -v
npm -v |
Способ 1: Через Homebrew: brew install node@lts
node -v && npm -vСпособ 2: С сайта:
|
Шаг 3: Установка PostgreSQL
| 🐧 Linux | 🏁 Windows | 🍎 macOS |
|---|---|---|
|
Способ 1: Через терминал: sudo apt install -y postgresql postgresql-contrib
sudo systemctl enable postgresql
sudo systemctl start postgresqlСпособ 2: Официальный репозиторий:
|
Способ 1: Через winget: winget install PostgreSQL.PostgreSQLСпособ 2: С сайта:
|
Способ 1: Через Homebrew: brew install postgresql@15
brew services start postgresql@15Способ 2: С сайта:
|
Шаг 4: Установка Python 3
| 🐧 Linux | 🏁 Windows | 🍎 macOS |
|---|---|---|
|
Способ 1: Через терминал: sudo apt install -y python3 python3-venv python3-pip
python3 --versionСпособ 2: Официальный сайт:
|
Способ 1: Через winget: winget install Python.Python.3.12Способ 2: С сайта:
python --version |
Способ 1: Через Homebrew: brew install python
python3 --versionСпособ 2: С сайта:
|
Шаг 5: Настройка базы данных
| 🐧 Linux | 🏁 Windows | 🍎 macOS |
|---|---|---|
sudo -u postgres psqlCREATE USER tbb WITH PASSWORD 'builder2025!' LOGIN;
CREATE DATABASE telegram_bot_builder OWNER tbb;
GRANT ALL PRIVILEGES ON DATABASE telegram_bot_builder TO tbb;
GRANT ALL ON SCHEMA public TO tbb;
\q |
psql -U postgresCREATE USER tbb WITH PASSWORD 'builder2025!' LOGIN;
CREATE DATABASE telegram_bot_builder OWNER tbb;
GRANT ALL PRIVILEGES ON DATABASE telegram_bot_builder TO tbb;
GRANT ALL ON SCHEMA public TO tbb;
\q |
psql postgresCREATE USER tbb WITH PASSWORD 'builder2025!' LOGIN;
CREATE DATABASE telegram_bot_builder OWNER tbb;
GRANT ALL PRIVILEGES ON DATABASE telegram_bot_builder TO tbb;
GRANT ALL ON SCHEMA public TO tbb;
\q |
Шаг 6: Клонирование проекта
| 🐧 Linux | 🏁 Windows | 🍎 macOS |
|---|---|---|
cd /opt
sudo git clone https://github.com/fedorabakumets/telegram-bot-builder.git
sudo chown -R "$USER":"$USER" telegram-bot-builder
cd telegram-bot-builder |
mkdir C:\projects
cd C:\projects
git clone https://github.com/fedorabakumets/telegram-bot-builder.git
cd telegram-bot-builder |
mkdir -p ~/projects
cd ~/projects
git clone https://github.com/fedorabakumets/telegram-bot-builder.git
cd telegram-bot-builder |
Шаг 7: Настройка окружения
Пример .env для всех систем:
NODE_ENV=development
PORT=5000
DATABASE_URL=postgresql://tbb:builder2025!@localhost:5432/telegram_bot_builder| 🐧 Linux | 🏁 Windows | 🍎 macOS |
|---|---|---|
cp .env.example .env
nano .env |
copy .env.example .env
notepad .env |
cp .env.example .env
nano .env |
Шаг 8: Установка зависимостей и запуск
1. Установка зависимостей:
npm install2. Запуск приложения:
| Режим | Команда | Описание |
|---|---|---|
| 🧪 Разработка | npm run dev |
Запуск с автоперезагрузкой при изменениях |
| 🚀 Продакшен | npm run build → npm run start |
Сборка и запуск готовой версии |
✅ Готово! Приложение доступно по адресу: http://localhost:5000
🐳 Альтернатива: Docker (любая ОС)
Требования: Docker и Docker Compose
git clone https://github.com/fedorabakumets/telegram-bot-builder.git
cd telegram-bot-builder
docker compose up -d
docker compose logs -fПолезные команды:
docker compose down # Остановить
docker compose build --no-cache # Пересобрать
docker compose logs -f # Логи✅ Готово! Приложение доступно по адресу: http://localhost:5000
💡 Нужно обновить проект? См. 🔄 Как обновить проект с GitHub
Пошаговое руководство (нажми для раскрытия)
- Откройте Telegram и найдите @BotFather
- Напишите
/newbotи следуйте инструкциям - Вы получите токен вроде:
123456789:ABCdef...
- При первом запуске у вас уже есть проект по умолчанию с узлом "Старт"
- Если нужен новый проект, откройте вкладку "Проекты" (слева) и нажмите кнопку "+ Новый"
- В правой части нажмите кнопку "Бот"
- Вставьте токен, который вы получили от BotFather
- Токен сохранится автоматически
- Перетащите блок "Сообщение" на холст рядом с узлом "Старт"
- Напишите текст, который бот должен отправить
- В настройках блока укажите, что будет дальше:
- Кнопки - для выбора вариантов ответа
- Автопереход - перейти к другому блоку автоматически
- Ожидание ввода - дождаться сообщения от пользователя
- Добавьте еще блоки и настройте переходы между ними
- Откройте вкладку "Бот" (справа внизу)
- Нажмите кнопку "Запустить"
- Откройте своего бота в Telegram
- Тестируйте и улучшайте!
Элементы для построения (нажми для раскрытия)
| Блок | Что он делает |
|---|---|
| 💬 Текстовое сообщение | Отправляет текст пользователю (можно добавить медиафайлы) |
| 🎭 Стикер | Отправляет анимированный стикер |
| 🎤 Голосовое сообщение | Отправляет голосовое сообщение |
| 📍 Геолокация | Отправляет карту с координатами |
| 📇 Контакт | Поделиться контактом |
В свойствах каждого текстового сообщения вы можете загрузить и прикрепить:
- 📸 Фотографии - изображения в формате JPG, PNG
- 🎬 Видео - видеоролики
- 🎵 Аудио файлы - музыка и голосовые записи
- 📄 Документы - файлы PDF, Word, Excel и другие
- 🎤 Аудиосообщения - голосовые сообщения от пользователя
Или используйте отдельный блок:
- 🎤 Голосовое сообщение - специальный блок для отправки чистых аудио сообщений
Как использовать:
- Выберите блок "Текстовое сообщение"
- В панели свойств (справа) найдите раздел с медиафайлами
- Загрузите файл со своего компьютера
- Бот будет отправлять его вместе с текстом!
Встроенные команды: /start, /help, /settings, /menu
Важно: Вы можете добавить любые свои команды! Например:
/price- показать цены/order- оформить заказ/support- получить поддержку/about- информация о компании
- Заблокировать пользователя - запретить участию в группе
- Разблокировать - снять блокировку с участника
- Заглушить пользователя - ограничить право голоса участника
- Снять ограничения - восстановить права участника
- Исключить пользователя - удалить участника из группы
- Закрепить сообщение - закрепить сообщение в группе
- Открыть сообщение - опубликовать сообщение в группе
- Удалить сообщение - удалить сообщение из группы
Настраивается в свойствах каждого блока:
- Кнопки - пользователь выбирает один из вариантов, и бот переходит на нужное сообщение
- Ожидание ввода - бот ждет ответ от пользователя, затем переходит на следующее сообщение
- Автопереход - переход к следующему блоку автоматически без ожидания
- Условные переходы - "если произошло то-то, то на другое сообщение..." (указывается в свойствах)
🍕 Пошаговый пример создания бота (нажми для раскрытия)
Полнофункциональный бот для приема заказов пиццы с меню, выбором и подтверждением
|
⬇️
|
|
⬇️
|
|
⬇️
|
|
⬇️
|
|
⬇️
|
📋 Подробная инструкция (нажми для раскрытия)
- Откройте Telegram Bot Builder
- Создайте новый проект "Пиццерия"
- Получите токен от @BotFather
- Стартовое сообщение → "Добро пожаловать! Выберите пиццу 🍕"
- Кнопки выбора → ["🍕 Маргарита", "🍕 Пепперони", "🥬 Вегетарианская"]
- Сообщение с ожиданием → "Введите ваш адрес доставки"
- Финальное сообщение → "Спасибо за заказ! Ожидайте доставку 🚗"
- Старт → Приветствие (автопереход)
- Приветствие → Выбор пиццы (кнопки)
- Выбор пиццы → Адрес (любая кнопка)
- Адрес → Подтверждение (ожидание ввода)
- Нажмите "Сгенерировать код"
- Скачайте готовый Python файл
- Запустите бота и протестируйте
🐍 Посмотреть автоматически созданный Python код (нажми чтобы раскрыть)
# 🤖 Автоматически сгенерированный бот для пиццерии
import asyncio
from aiogram import Bot, Dispatcher, types
from aiogram.filters import Command
from aiogram.types import ReplyKeyboardMarkup, KeyboardButton
# 🔑 Токен бота (замените на свой)
bot = Bot(token="YOUR_BOT_TOKEN")
dp = Dispatcher()
def get_pizza_keyboard():
"""🍕 Клавиатура с выбором пиццы"""
keyboard = ReplyKeyboardMarkup(
keyboard=[
[KeyboardButton(text="🍕 Маргарита")],
[KeyboardButton(text="🍕 Пепперони")],
[KeyboardButton(text="🥬 Вегетарианская")]
],
resize_keyboard=True,
one_time_keyboard=True
)
return keyboard
@dp.message(Command("start"))
async def start_handler(message: types.Message):
"""🚀 Обработчик команды /start"""
await message.answer(
"🍕 Добро пожаловать в пиццерию!\n"
"Выберите пиццу из меню:",
reply_markup=get_pizza_keyboard()
)
@dp.message(lambda message: "🍕" in message.text or "🥬" in message.text)
async def pizza_selected(message: types.Message):
"""🍕 Обработчик выбора пиццы"""
pizza_type = message.text
await message.answer(
f"✅ Отличный выбор: {pizza_type}!\n"
f"📍 Введите ваш адрес доставки:",
reply_markup=types.ReplyKeyboardRemove()
)
@dp.message()
async def address_handler(message: types.Message):
"""📍 Обработчик адреса доставки"""
address = message.text
await message.answer(
f"🎉 Спасибо за заказ!\n"
f"📍 Адрес: {address}\n"
f"🚗 Ожидайте доставку в течение 30-40 минут!\n"
f"📞 Мы свяжемся с вами для подтверждения."
)
# 🚀 Запуск бота
async def main():
print("🤖 Бот пиццерии запущен!")
await dp.start_polling(bot)
if __name__ == "__main__":
asyncio.run(main())Вся документация проекта организована в папке docs/ и разделена по категориям для удобного поиска
|
📋 Настройка проекта 🔧 Устранение неполадок 🤝 Для контрибьюторов 📄 Спецификация |
🚂 Railway 🐳 Docker ☁️ VPS ⚙️ CI/CD |
🏗️ Структура проекта 🔧 Инфраструктура 📈 Производительность 🧪 Тестирование |
🛡️ Обновление проекта 🔐 Аутентификация 🚨 Мониторинг 📋 Аудит |
🗂️ Полная структура документации (нажми для раскрытия)
📂 docs/
├── 📁 development/ # 🛠️ Документация для разработчиков
│ ├── 📄 SETUP.md # Настройка окружения разработки
│ ├── 📄 TROUBLESHOOTING_RU.md # Устранение неполадок
│ ├── 📄 CONTRIBUTING.md # Руководство для контрибьюторов
│ ├── 📄 REQUIREMENTS_SPECIFICATION.md # Техническая спецификация
│ └── 📄 HOW_TO_UPDATE.md # Как обновить проект
│
├── 📁 deployment/ # 🚀 Руководства по развертыванию
│ ├── 📄 RAILWAY_DEPLOY.md # Развертывание на Railway
│ ├── 📄 RAILWAY_CLI_GUIDE.md # Руководство по Railway CLI
│ └── 📄 RAILWAY_TROUBLESHOOTING.md # Устранение проблем
│
├── 📁 analysis/ # 📊 Анализ проекта
│ ├── 📄 PROJECT_STRUCTURE_ANALYSIS.md # Анализ структуры
│ ├── 📄 PROJECT_STRUCTURE_DIAGRAM.md # Диаграмма структуры
│ └── 📄 INFRASTRUCTURE_ANALYSIS.md # Анализ инфраструктуры
│
├── 📄 COMPONENTS.md # 🧩 Компоненты проекта
└── 📄 README.md # 📚 Индекс документации
Технические требования (нажми для раскрытия)
После создания бота, приложение генерирует Python файл. Вы можете:
- Скачать готовый код
- Запустить локально на своем компьютере:
- На Windows, Mac или Linux
- Просто установите Python и запустите файл
- Идеально для тестирования перед публикацией
- Развернуть на хостинге для постоянной работы:
- Railway - современная платформа для деплоя
- VPS (DigitalOcean, Linode, AWS) - полный контроль
- Cloud Run - от Google для больших нагрузок
- Модифицировать если нужна специальная логика
Подробные инструкции по деплою на Railway смотрите в файле docs/deployment/RAILWAY_DEPLOY.md.
MIT License - используйте свободно для личных и коммерческих целей.