3.2 Веб-взаимодействия

Любой сайт состоит из двух частей. Одна работает в браузере у посетителя, другая на сервере, который посетитель никогда не видит. Первую часть называют фронтендом, вторую бекендом. Бекенд от пользователя скрыт целиком, все, что видит пользователь, — это HTML и связанные с ним файлы.

Фронтенд — это все, что отображается на экране. Заголовки, картинки, кнопки, формы, анимация при наведении. Это HTML, CSS и JavaScript, которые браузер загрузил и показал. Когда вы открываете любой маркетплейс, то вы взаимодействуете с

Бекенд — это часть на сервере. Он хранит данные, проверяет пароли, считает корзину, отправляет письма, обрабатывает оплату. Его не видно, но именно он выполняет всю реальную работу. Когда вы нажимаете "Оформить заказ", фронтенд собирает то, что вы выбрали, и передает на бекенд. Бекенд проверяет, есть ли товар в наличии, сохраняет заказ в базу

Эти две части все время обмениваются сообщениями. Браузер просит у сервера страницу, отправляет ему заполненную форму, подгружает новые товары при прокрутке. В этом уроке мы немного коснемся этой темы и разберемся как оно происходит под капотом.

Формы Форма — это блок на странице, в который пользователь что-то вводит. Имя, email, текст обращения. Иногда выбор тарифа или согласие на рассылку. После нажатия кнопки "Отправить" эти данные отправляются на бекенд.

<form action="/subscribe" method="POST"> <input type="text" name="name" placeholder="Имя"> <input type="email" name="email" placeholder="Email"> <button type="submit">Подписаться</button> </form>

Форма — это такой же HTML, как и все остальное на странице. Элементы формы представлены своими тегами, например выбор из списка ( select ) или ввод произвольного текста ( input ). Кроме этого, сама форма представляет собой тег form с несколькими важными атрибутами. Атрибут action говорит, на какой адрес отправлять данные. Атрибут method говорит, как

Допустим мы хотим собирать заявки. Обязательно ли для этого писать свой бекенд, чтобы получать и сохранять данные?

Это не обязательно. Yandex Forms, Google Forms принимают данные, складывают их в свою таблицу и присылают вам уведомление. Вы получаете готовую страницу с формой и адрес для отправки, ничего самим программировать не нужно. Если форм одна-две и они просто собирают данные (запись на консультацию, обратная связь, опрос внутри команды), это самый быстрый способ.

Форма ──▶ готовый сервис ──▶ таблица + уведомление (чужой бекенд)

Второй путь — это собственный обработчик. По сути это ваш бекенд, тот самый сервер из начала урока. Форма отправляет данные на его адрес, а он решает, что с ними делать. И путь данных может быть довольно сложным:

Свой бекенд это по сути свой сайт. Сделать можно, но лучше избегать, потому что появляется множество сложных задач, требующих квалификации. В таком случае сразу встают во весь рост, проблемы безопасности, сертификатов, выкладки на сервер (деплой на продакшен) и многое другое.

HTTP на пальцах

Что еще интересно и полезно знать, а как собственно происходит общение между клиентом и сервером? Для этого используется протокол HTTP. Обмен идет по схеме "запрос-ответ". Браузер посылает запрос, сервер присылает ответ.

Каждый раз, когда мы открываем сайт или нажимаем ссылку, на сервер идет запрос (не всегда, но в целом это так), который отдает новую страницу или данные для отображения на странице. При этом мы видим, как в адресной строке меняется

Но адрес это еще не все, в протоколе существует такое понятие как глагол (method). Два одинаковых адреса отправленных с разным глаголом могут обрабатываться совершенно по-разному. Наиболее часто используются два: GET и POST.

GET /users/42 # информация о пользователе GET /articles/novoe-v-hexlet # статья про обновления на Хекслете POST /users # создание нового пользователя

GET использует браузер, когда вы открываете страницу или нажимаете на ссылку. POST использует форма, когда вы отправляете данные. Есть еще PUT и DELETE, но в большинстве сценариев хватает двух первых методов. Пользователям эта информация не нужна, но она важна для инструментов и поисковых роботов. По тому, какой метод используется, они определяют, что безопасно, а что нет, что можно кешировать, а что нет и так далее.

Все это является частью запроса. У ответа, который генерирует сервер, есть свои параметры. У каждого ответа есть статус- код. Это число, по которому можно понять, что произошло. Например, пользователи прекрасно знают что 404 означает, что ничего не было найдено.

Стоит запомнить три группы.

4xx (404, 403) # ты что-то сделал не так 5xx (500, 503) # на сервере что-то сломалось

Когда агент пишет в логе "сервер вернул 404", вы понимаете, что страницы по этому адресу нет. Когда видите "ответ 500", знаете, что у сервера случилась поломка и виноват не ваш запрос.

HTTPS — это тот же HTTP, только с шифрованием. Замочек рядом с адресом в браузере означает, что соединение защищено и данные между вами и сервером никто не подслушает.

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

Парсинг — это когда программа сама открывает страницу сайта, читает ее HTML и достает оттуда нужные куски. Цены, названия, остатки, отзывы.

В общих чертах это работает так. Скрипт открывает каталог конкурента, читает HTML страницы, находит на ней карточки товаров и для каждой вытаскивает название и цену. Результат складывает в таблицу. Как именно искать нужные куски на конкретной странице, разбираться вам не нужно, это задача агента.

открыть прочитать найти нужные сложить страницу ─▶ HTML ─▶ куски ─▶ в таблицу

Тем же способом решают и соседние задачи. Следить за ценами и ловить момент, когда конкурент их меняет. Собирать объявления по своему городу в одну таблицу. Снимать отзывы о товаре с разных площадок. Везде, где нужные данные лежат на чужих страницах и собирать их руками слишком долго, подходит парсинг.

У парсинга есть слабое место. Он завязан на то, как сверстана страница. Стоит конкуренту поменять дизайн каталога, и парсер перестает находить цены, его приходится чинить. Поэтому это не разовая поделка, а штука, за которой надо

Самостоятельная работа В этом уроке собираем лендинг с формой, складываем заявки в таблицу и доводим путь до того, что агент сам публикует их в Telegram-канал. Своего сервера и кода для этого не понадобится.

Лендинг с формой, которая собирает заявки

Возьмите лендинг, который у вас уже есть, или попросите агента собрать простую страницу. Подойдёт что-то с понятной целью, например запись на консультацию.

Дальше сделайте форму в Яндекс Формах. Соберите имя и контакт, например телефон или email. Когда форма готова, нажмите «Опубликовать» и скопируйте код для вставки. Это небольшой блок, который встраивает вашу форму прямо в страницу.

Передайте агенту код вставки и задачу.

Встрой эту форму на страницу под блоком с описанием. Подгони ширину под колонку, чтобы форма не вылезала за макет. Вот код вставки: … .

Откройте страницу и отправьте тестовую заявку. Затем зайдите в Яндекс Формы и откройте ответы: ваша заявка уже в таблице.

Вы собрали весь путь заявки, не написав ни строчки серверного кода. Форма на странице это фронтенд, то что видит посетитель. Приёмник, который принял заявку и сохранил её в таблицу, это бекенд. Граница между ними прошла ровно там, где заявку понадобилось запомнить, и эту часть взял на себя готовый сервис.

Когда заявок становится много, их полезно привести в порядок. Выгрузите ответы из Яндекс Форм в файл и откройте его в Яндекс Таблице.

Передайте файл агенту с задачей навести порядок.

Вот выгрузка заявок. Убери дубли, посчитай, сколько заявок пришло по дням, и собери короткий список с именами и контактами.

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

Агент публикует заявки в Telegram-канал

Заявки собраны и разобраны. Доведём путь до конца: пусть итог уходит в Telegram-канал, и сделает это сам агент. Раньше для отправки в Телеграм пришлось бы держать токен бота прямо в коде страницы, где его видит любой посетитель. Теперь публикацию берёт на себя агент через готовый коннектор, и токен в код страницы не попадает.

Заведите Telegram-канал для уведомлений или возьмите существующий. Дальше понадобится готовый MCP- коннектор, который умеет публиковать в Telegram. Возьмём Upload-Post: он держит сервер у себя, поэтому запускать ничего локально не нужно. Зарегистрируйтесь, получите ключ и один раз подключите свой канал в его интерфейсе по инструкции сервиса.

Теперь подключите этот коннектор к Клоду так же, как кастомный коннектор из урока про агентов: по адресу https://mcp.upload-post.com/mcp с вашим ключом. После подключения он появится в списке активных.

Дайте агенту задачу.

Через подключённый Upload-Post MCP опубликуй в моём Telegram-канале короткий дайджест по заявкам: сколько их и

Откройте канал: пост уже там, и опубликовал его агент. Заявка прошла весь путь от формы на сайте до сообщения в канале. Самое важное здесь это роль MCP. Коннектор дал агенту готовый способ работать с внешним сервисом напрямую, поэтому вам не пришлось ни писать обработчик, ни настраивать вебхуки, ни обращаться к API руками.

Дополнительные материалы Что такое DNS-сервер простыми словами