Собрал форму записи для клиники через Claude Code: от пустого файла до продакшена

Задача простая на словах: форма записи для клиники — имя, телефон, услуга. Заполнил — заявка падает в Telegram администратору, форма живёт на своём домене и работает ночью. Я не программист, я бывший руководитель продаж. Собрал это через Claude Code, без классического кодинга. Показываю весь путь — вместе с местами, где я споткнулся.

Задачу надо ставить как ТЗ, а не как желание

Главная ошибка новичка — написать Claude Code «сделай форму записи» и ждать магии. Он что-нибудь сделает, но не то, что у тебя в голове. Claude Code силён ровно настолько, насколько точно ты назвал результат. Формулируй как инженер, который принимает работу: какие поля, куда уходит заявка, что должно произойти после отправки.

Разница не в вежливости, а в количестве переделок. На размытой формулировке ты потратишь вечер на споры с ИИ. На точной — он соберёт скелет с первого раза, а ты будешь только докручивать. Я держу в голове три вопроса перед каждой задачей: что на входе, куда уходит, что происходит после. Ответил на все три — можешь формулировать.

Фронт формы: три поля, валидация телефона и ловушка для ботов

Начинаем с того, что видит пациент. Обычная HTML-форма: имя, телефон, услуга. Две вещи, которые прошу у Claude Code сразу, — проверку телефона (чтобы не приходили заявки с пустым номером) и honeypot: скрытое поле, которое человек не видит и не заполнит, а бот заполнит. Заполнено — значит бот, заявку молча выкидываем.

<form id="booking">
 <input name="name" placeholder="Имя" required>
 <input name="phone" placeholder="+7 ___ ___ __ __"
 pattern="\+?[0-9\s\-]{10,}" required>
 <select name="service" required>
 <option value="">Услуга</option>
 <option>Консультация</option>
 <option>УЗИ</option>
 </select>
 <!-- ловушка для ботов: человек её не видит -->
 <input name="website" tabindex="-1" autocomplete="off"
 style="position:absolute;left:-9999px">
 <button>Записаться</button>
</form>

<script>
document.getElementById('booking').onsubmit = async (e) => {
 e.preventDefault();
 const data = Object.fromEntries(new FormData(e.target));
 const res = await fetch('/api/booking', {
 method: 'POST',
 headers: { 'Content-Type': 'application/json' },
 body: JSON.stringify(data)
 });
 alert(res.ok ? 'Заявка принята' : 'Ошибка, позвоните нам');
};
</script>

Валидацию через pattern браузер делает сам, без единой строки логики. Это не защита от всего, но пустые и мусорные номера отсекает на входе. Дальше — fetch отправляет собранные поля на бэкенд-эндпоинт. Всё, что видит пациент, уместилось в один экран.

Бэкенд-эндпоинт: куда падает заявка

Фронт красивый, но сам по себе он никуда ничего не отправит. Нужен серверный роут — адрес, куда прилетает POST, и который делает две вещи: шлёт заявку в Telegram администратору и пишет её в базу, чтобы ничего не потерялось. Токены и ключи — только на сервере, в переменных окружения. На фронт их выносить нельзя: любой откроет код страницы и заберёт.

// /api/booking — серверный роут (Next.js-стиль)
export async function POST(req) {
 const { name, phone, service, website } = await req.json();

 // honeypot заполнен → это бот, тихо выходим
 if (website) return Response.json({ ok: true });

 // валидация на сервере, не только в браузере
 if (!name || !/[0-9]{10,}/.test((phone||'').replace(/\D/g,'')))
 return Response.json({ ok: false }, { status: 400 });

 // 1. сигнал в Telegram администратору
 await fetch(`https://api.telegram.org/bot${process.env.TG_TOKEN}/sendMessage`, {
 method: 'POST',
 headers: { 'Content-Type': 'application/json' },
 body: JSON.stringify({
 chat_id: process.env.TG_CHAT,
 text: `Новая запись\nИмя: ${name}\nТелефон: ${phone}\nУслуга: ${service}`
 })
 });

 // 2. пишем в базу сервисной ролью (см. грабли ниже)
 await supabaseAdmin.from('bookings').insert({ name, phone, service });

 return Response.json({ ok: true });
}

Три защиты, которые прошу заложить сразу: honeypot проверяем и на сервере (не только в браузере — бот шлёт запрос напрямую, минуя форму); валидацию дублируем на сервере; и хорошо бы поставить простой лимит — не больше N заявок с одного адреса в минуту, чтобы форму не завалили тысячей отправок. Последнее можно добавить позже, но заложить в голову — сейчас.

Git: фиксируем работу, чтобы не потерять

Пока всё лежит только на твоём ноутбуке — этого не существует. Git — это точки сохранения. Работаю в отдельной ветке, чтобы не трогать рабочую версию сайта, фиксирую изменения коммитом и отправляю на сервер. Три команды, которые прошу Claude Code выполнить и которые ты быстро запомнишь сам:

git checkout -b booking-form # новая ветка под форму
git add . # собрать изменения
git commit -m "форма записи + эндпоинт /api/booking"
git push origin booking-form # отправить на GitHub

Отдельная ветка — это страховка. Если что-то сломается, рабочий сайт стоит нетронутым, а ты спокойно доводишь форму в своей ветке. Claude Code сам подскажет команды, но понимать, что делает каждая, стоит — это твои точки отката.

Vercel: push в Git → форма в проде

Дальше самое приятное. Vercel привязан к репозиторию: как только код уходит в Git, он сам собирает и публикует сайт. Никаких серверов руками. После деплоя первым делом проверяю, что эндпоинт живой — бью в него из терминала curl, не открывая форму:

# проверяем, что эндпоинт принимает заявку
curl -X POST https://klinika.kz/api/booking \
 -H "Content-Type: application/json" \
 -d '{"name":"Тест","phone":"+77001234567","service":"УЗИ"}'

# ждём в ответ: {"ok":true} и сообщение в Telegram

Пришёл {"ok":true} и сообщение в Telegram — бэкенд работает. Осталось подключить домен. В Vercel добавляешь свой адрес, он выдаёт, что прописать у регистратора: либо A-запись на IP Vercel, либо сменить nameservers на серверы Vercel. Второе проще — Vercel сам рулит всеми записями. DNS обновляется от нескольких минут до пары часов, тут остаётся только подождать.

Грабли: где я реально споткнулся

Теперь честная часть, ради которой стоит читать чужой опыт. Каждый из этих трёх пунктов стоил мне времени, и на каждом я сначала грешил на ИИ, а виноват был не он.

База молча не писала заявки. Форма отправлялась, Telegram приходил, а в базе пусто. Причина — защита доступа на уровне строк (RLS): по умолчанию она запрещает запись анонимному клиенту. Это правильно, что она включена, но эндпоинт должен писать сервисной ролью — отдельным серверным ключом, который эти ограничения обходит легально. Как только эндпоинт пошёл в базу сервисным ключом (а не публичным), заявки легли на место. Публичный ключ на фронт, сервисный — только на сервер.

CORS резал запрос. Пока форма и эндпоинт на одном домене — всё гладко. Стоит вынести форму на отдельный адрес — браузер начинает блокировать запрос с чужого источника. Лечится заголовками на эндпоинте, разрешающими твой домен. Знать про это заранее — сэкономить полдня гадания, почему «в одном месте работает, в другом нет».

Сессии и переменные окружения. Локально всё работало, в проде эндпоинт падал. Оказалось — забыл добавить TG_TOKEN и ключи базы в переменные окружения на самом Vercel. На ноутбуке они лежали в локальном файле, а в облако не уехали (и правильно — секреты в Git не коммитят). Правило: каждый ключ, который есть локально, продублируй в настройках Vercel.

Это ровно тот же принцип, на котором держатся мои большие системы: маленькие проверяемые кирпичики, каждый из которых можно потрогать отдельно. Если хочешь увидеть, как из таких кирпичиков собирается связка ИИ с живой базой бизнеса — я разбирал это в отдельной статье про подключение Claude к CRM за вечер.