Сервер, база данных и настоящая обработка заявок как у профи
В уроке 2 мы отправляли заявки напрямую в Telegram. Это работает, но...
Тот же язык что и в браузере, но теперь работает на компьютере/сервере. Можно работать с файлами, базами данных, API.
Упрощает создание сервера. Один файл — и у тебя рабочий API.
const express = require('express');
const app = express();
// Принимаем JSON
app.use(express.json());
// Обрабатываем заявку
app.post('/api/lead', (req, res) => {
const { name, phone, message } = req.body;
console.log('Новая заявка:', name, phone);
res.json({ success: true });
});
// Запускаем сервер
app.listen(3000, () => {
console.log('Сервер работает!');
});Открой nodejs.org и нажми LTS (рекомендуемая версия)
nodejs.orgСкачай LTS-версию (кнопка слева)
Запусти .msi файл, жми Next
→ Запусти node-v20.x.x.msi
→ Нажимай "Next" везде
→ Убедись что галочка "Add to PATH" стоит
Открой терминал и проверь
#34d399]">$ node --version
v20.11.0
#34d399]">$ npm --version
10.2.0Создаём папку backend рядом с лендингом и просим Cursor написать сервер.
mkdir backend cd backend npm init -y npm install express cors
Создай файл server.js с Express-сервером: 1. Подключи express и cors 2. POST /api/lead — принимает {name, phone, message} 3. Логирует в консоль «Новая заявка: ...» 4. Возвращает {success: true} 5. Сервер слушает порт 3001
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(express.json());
app.post('/api/lead',
(req, res) => {
const { name, phone,
message } = req.body;
console.log('Заявка:', name);
res.json({ success: true });
});
app.listen(3001, () => {
console.log('Сервер: 3001');
});Supabase — облачная база данных с красивым интерфейсом. Бесплатный тариф. Не нужно ничего устанавливать — всё в облаке.
Надёжная база данных. Используют Notion, Instagram, Spotify
До 500 МБ и 50 000 запросов/мес — более чем достаточно
Supabase сам генерирует API для работы с данными
| id | name | phone | message | status |
|---|---|---|---|---|
| 1 | Иван Петров | +7 999 123-45-67 | Хочу заказать | new |
| 2 | Анна Сидорова | +7 916 555-12-34 | Нужна консультация | processed |
| 3 | Дмитрий К. | +7 903 777-88-99 | Интересует тариф Про | new |
Регистрация, создание проекта и таблицы — за 5 минут
Создай бесплатный аккаунт
supabase.comНажми "Start your project"
→ Войди через GitHub (проще всего) или email
→ Подтверди email если нужно
New Project → заполни данные
→ Нажми "New Project"
→ Название: my-landing-db
→ Пароль БД: придумай и запиши!
→ Region: Frankfurt (EU) — ближе к нам
→ Нажми "Create new project" и подожди ~1 минуту
Table Editor → New Table
→ В левом меню нажми Table Editor
→ Нажми "Create a new table"
→ Название: leads
→ Убери галочку "Enable Row Level Security" (для простоты)
→ Добавь колонки:
'new'now()→ Нажми "Save"
Settings → API
→ В левом меню: Project Settings (шестерёнка внизу)
→ Раздел "API"
→ Скопируй два значения:
https://xxxxx.supabase.coeyJhbGciOiJIUzI1NiIs...Эти два значения понадобятся для подключения к серверу!
Устанавливаем библиотеку Supabase и сохраняем заявки в базу.
npm install @supabase/supabase-js
Обнови server.js: 1. Подключи Supabase с моим URL и ключом 2. В POST /api/lead — сохраняй заявку в таблицу leads 3. Выводи ошибку если что-то не так Мой Supabase URL: ВСТАВЬ_URL Мой Supabase Key: ВСТАВЬ_КЛЮЧ
const { createClient } = require(
'@supabase/supabase-js'
);
const supabase = createClient(
'https://xxx.supabase.co',
'eyJhbGci...'
);
app.post('/api/lead',
async (req, res) => {
const { name, phone, message }
= req.body;
// Сохраняем в Supabase
const { data, error } =
await supabase
.from('leads')
.insert([{
name, phone, message,
status: 'new'
}]);
if (error) {
return res.status(500)
.json({ error: error.message });
}
res.json({ success: true });
});Переносим отправку в Telegram на сервер. Теперь токен не виден клиенту.
Добавь в server.js отправку в Telegram после сохранения в Supabase: 1. Используй fetch для отправки на api.telegram.org 2. Токен и Chat ID храни в переменных наверху файла 3. Формат сообщения: «Новая заявка! Имя: ... Телефон: ... Сообщение: ...» 4. Если Telegram не отвечает — не блокируй ответ клиенту Токен: ВСТАВЬ_ТОКЕН Chat ID: ВСТАВЬ_ID
Теперь токен на сервере, клиент его не видит. Безопасно!
const BOT_TOKEN = 'ВАШ_ТОКЕН';
const CHAT_ID = 'ВАШ_CHAT_ID';
async function sendTelegram(lead) {
const text = `🔔 Новая заявка!
👤 Имя: ${lead.name}
📱 Тел: ${lead.phone}
💬 ${lead.message || '—'}`;
try {
await fetch(
`https://api.telegram.org/
bot${BOT_TOKEN}/sendMessage`,
{
method: 'POST',
headers: {
'Content-Type':
'application/json'
},
body: JSON.stringify({
chat_id: CHAT_ID,
text: text,
parse_mode: 'HTML'
})
}
);
} catch (e) {
console.error('TG error:', e);
}
}
// В POST /api/lead после insert:
sendTelegram({ name, phone, message });Меняем fetch в лендинге: вместо api.telegram.org отправляем на наш сервер.
В index.html измени отправку формы: Вместо fetch на api.telegram.org теперь отправляй POST на http://localhost:3001/api/lead с JSON-телом {name, phone, message} Убери токен и chat_id из клиентского кода — теперь они на сервере.
Было vs Стало:
api.telegram.org/bot{TOKEN}/sendMessagelocalhost:3001/api/lead<"text-[#a78bfa]">class="text-[#f472b6]">script>
document.querySelector('form')
.addEventListener('submit',
async (e) => {
e.preventDefault();
const name =
e.target.name.value;
const phone =
e.target.phone.value;
const message =
e.target.message.value;
const res = await fetch(
'http://localhost:3001/api/lead',
{
method: 'POST',
headers: {
'Content-Type':
'application/json'
},
body: JSON.stringify({
name, phone, message
})
}
);
const data = await res.json();
if (data.success) {
alert('Заявка отправлена!');
e.target.reset();
}
});
</"text-[#a78bfa]">class="text-[#f472b6]">script>Простая страница для просмотра заявок и смены статуса
Создай admin.html — страницу админ-панели: 1. При загрузке — загружает все заявки из Supabase (fetch GET /api/leads) 2. Показывает таблицу: №, Имя, Телефон, Сообщение, Статус, Действие 3. Статус «Новая» — синий бейдж, «Обработана» — зелёный 4. Кнопка «Обработать» — меняет статус через PATCH /api/leads/:id 5. Фильтры: Все / Новые / Обработанные 6. Тёмная тема как у лендинга Добавь в server.js два новых endpoint: - GET /api/leads — все заявки из Supabase - PATCH /api/leads/:id — обновить статус
Всего: 4 | Новых: 3
| # | Имя | Телефон | Сообщение | Статус | |
|---|---|---|---|---|---|
| 1 | Иван Петров | +7 999 123-45-67 | Хочу заказать | Новая | |
| 2 | Анна Сидорова | +7 916 555-12-34 | Нужна консультация | Обработана | |
| 3 | Дмитрий Козлов | +7 903 777-88-99 | Интересует тариф Про | Новая | |
| 4 | Елена Волкова | +7 926 333-44-55 | Когда можете начать? | Новая |
Полная цепочка от формы до админки
# Терминал 1: сервер
#34d399]">$ cd backend
#34d399]">$ node server.js
Сервер работает на порту 3001
# Терминал 2: лендинг
# Открой index.html в браузере
# или используй Live ServerПоздравляем!
Ты прошёл путь от нуля до полноценного веб-приложения с бэкендом, базой данных и админ-панелью. Всё с помощью вайб-кодинга!