Видео урока скоро будет доступно
Создадите Telegram-бота, получите токен и chat_id, и настроите мгновенные оповещения о новых заявках с формы вашего сайта.
После этого урока вы:
Важно: код формы с Firebase у вас уже готов — это то, что вы сделали в уроке 4. Сегодня мы добавим к нему отправку уведомления в Telegram.
| Уведомление | Где | Что делает | Для кого |
|---|---|---|---|
| О деплое | Урок 6 (GitHub Actions) | Присылает сообщение в Telegram, когда сайт обновился. | Для разработчика / владельца сайта. |
| О заявках | Этот урок (Telegram Bot API) | Присылает сообщение в Telegram, когда пользователь заполнил форму. | Для бизнеса / отдела продаж. |
Это совершенно разные задачи. В уроке 6 мы использовали GitHub Actions — это автоматизация на стороне GitHub. В этом уроке мы используем JavaScript на стороне клиента (в браузере), чтобы отправлять запросы к API Telegram при отправке формы.
Мы вызываем API Telegram через fetch из JavaScript на сайте:
Главное: никакого сервера не нужно. Весь код — это обычный JavaScript на вашем сайте, как и код формы из урока 4.
Оба значения — это просто длинные строки. Вы получите их на шаге 1 и подставите в промпт для DeepSeek — больше ничего делать вручную не нужно.
1.1. Найти BotFather:
/start.1.2. Создание бота:
/newbot.bot, например, my_lead_notifier_bot).123456789:ABCdefGHIjklMNOpqrsTUVwxyz).Важно: токен — это пароль от вашего бота. Не показывайте его никому и не загружайте в публичный репозиторий.
/start)./start — он пришлёт ваш chat_id.123456789).Частая ошибка: если вы не написали своему боту сообщение первым, Telegram не разрешит ему отправлять вам сообщения. Напишите боту /start обязательно.
В уроке 4 вы написали код, который отправляет данные формы (name, phone, email) в Firebase Firestore в коллекцию requests. Сейчас мы добавим к нему уведомление в Telegram.
Попросите DeepSeek показать, где именно находится это место:
«Открой код формы, который мы сделали в уроке 4: данные (name, phone, email) отправляются в Firebase Firestore в коллекцию requests. Покажи мне структуру этого кода и объясни, куда именно добавить уведомление в Telegram — после успешной записи заявки.»
AI объяснит структуру, а вы убедитесь, что у вас всё на месте.
Теперь попросите DeepSeek добавить функцию, которая отправляет сообщение в Telegram. Подставьте в промпт ваши токен и chat_id:
«Добавь в мой JavaScript-код функцию отправки уведомления в Telegram. Токен бота: ТЕЛЕГРАМ_ТОКЕН, chat_id: ТЕЛЕГРАМ_CHAT_ID. Сообщение должно содержать имя, телефон и email из формы: "Новая заявка! Имя: ..., Телефон: ..., Email: ...". Используй fetch на https://api.telegram.org/bot<токен>/sendMessage с форматом HTML. Добавь обработку ошибок, верни результат — получилось или нет.»
Функция будет вызываться после успешного сохранения заявки в Firebase — попросите AI сохранить её в том же файле, где находится код формы.
Попросите DeepSeek связать отправку в Telegram с обработчиком формы, чтобы уведомление уходило сразу после сохранения заявки:
«Интегрируй функцию отправки в Telegram в обработчик отправки формы из урока 4. После успешной записи заявки в Firebase отправляй уведомление в Telegram. Если уведомление доставлено — покажи сообщение "Спасибо! Заявка отправлена, мы свяжемся с вами". Если заявка сохранена, но уведомление не доставлено — покажи предупреждение, что заявка всё равно принята. При ошибке сохранения — покажи сообщение об ошибке.»
Важно: не храните токен открыто в коде, если ваш репозиторий публичный. Для учебного проекта можно оставить его в коде, но для реального — используйте переменные окружения или серверный прокси.
Что можно сделать прямо сейчас:
config.js), который не публикуется.Совет: для учебного проекта достаточно напоминания выше. Главное — не публикуйте токен в открытый репозиторий, иначе бота сможет контролировать кто угодно.
Частые ошибки:
/start).Готово: теперь вы будете получать мгновенные уведомления о каждой новой заявке прямо в Telegram — с компьютера или телефона.
Главный итог: теперь вы будете получать мгновенные уведомления о новых заявках в Telegram — это экономит время и помогает быстро реагировать на запросы.
Дополнительные материалы: prompts-bonus.md, checklists-bonus.md