Пробую Vibe coding

Несколько недель назад известный в AI индустрии Andrej Karpathy придумал новый термин — Vibe coding. По сути, можно думать об этом подходе к программированию — это разработка НЕ production ready systems. По русски — собрать из говна и палок прототип (PoC). Сегодня и я решил поупражняться в кодинге на вайбе.

Итак, у меня была (есть?) задача — почитать отзывы про Google Pixel 8 Pro, и решить, стоит ли покупать этот телефон или нет. Так как телефон будет использоваться в России, то почитать отзывы на reddit — не достаточно. У нас в стране часть функций может не работать, или быть заблокировано. Поэтому я захотел посмотреть, что пишут люди на https://4pda.to/forum/index.php?showtopic=1069888.

На 4pda более 300 страниц отзывов/комментариев. Чатсь из них довольно старые. Но в любом случае прочитать столько информации за час-два скорей всего не выйдет. Как мы знаем, LLM прекрасно умеют анализировать текст, а комментарии про телефоны — это как раз таки текст. В 2025 году у лидеров индустрии (например, Gemini 2.0 Pro) огромное контекстное окно, в которое легко можно сгрузить пару МБ текста. Поэтому я решил спарсить все отзывы с 4pda про Пиксель, и попросить мой AI сделать выводы из этого.

Парсить сайты в 2025 году — это не тоже самое, что парсить сайты в 2012 году. Теперь все защищаются от ботов, парсеров. А некоторые идут дальше — и подсосываются специально невалидный контент (https://blog.cloudflare.com/ai-labyrinth/). Поэтому просто взять bash и послать 300 curl запросов, чтобы получит контент с 4pda не получится. Надо что-то, что способно обойти защиты базового уровня.

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

  • Воспользоваться одним из платных, промышленных решений. Не мой вариант, я просто забавляюсь в субботу, а не решаю реальную задачу.
  • Использовать selenium браузер с какой-нибудь java, и попробовать эмулировать реальное поведение, чтобы не получать бан. Оно вроде бы и работает, но писать код ради парсинга 300 страниц — странно, да? Я быстрее руками скопирую контент.
  • Puppeteer или playwright, вместе с javascript. Ниразу не использовал, но вроде бы это щас стандартные тулы для e2e браузерных тестов, опять же с использованием headless browsers. Как будто бы из пушки по воробьям, если рассматривать мою задачу.
  • Как-то запустить скрипт прямо в Console моего браузера, который просто откроет страницы одна за одной, и по селекторам возьмет данные. Звучит, как лучшее решение — мой браузер уже будет выглядеть более-менее как реальный пользователь, с заголовками, аутентификацией. Да, паттерн работы будет «как у бота», но на 4pda пока на это не смотрят. Давайте попробуем закодить на вайбе это решение.

Я мало чего знаю про программирование на JS, особенно если надо какой-то скрипт написать в консоли браузера, который должен ходить по разным страницам и парсить контент. Я спросил LLM, поставив задачу:

вот есть URL, ты можешь переходить на следущую страницу путем прибавления 20 к URL параметру. Внутри тебе нужно выбирать контент всех div с таким-то селектором. Сделать это надо как скрипт для браузера.

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

Мне пришлось несколько раз открыть чат заново, чтобы сбросить текущий контекст, перенося нужный контекст в ручную. Со временем, путем итерации вперед-назад мы дошли до решения с https://www.tampermonkey.net/. Это плагин для Firefox/Chrome, который позволяет для произвольный страницы, или шаблона страниц выпустить скрипт, который вы сами зададите в настройках браузера. В общем, это копия Greasemonkey из прошлого.

В результате, моя задача была разбита на две части. Первая — скрипт для tampermonkey. Для всех страниц на 4pda с комментариями про Пиксель, отрабатывает скрипт, который парсит комментарии и ложит их в localstorage. Вторая — главный скрипт — который я сам запускаю с произвольной страницы 4pda. Он переодически открывает нужные страницы на 4pda в новых вкладках, потом смотрим в localstorage, и когда страница спаршена, закрывает эту вкладку. Когда все страницы спаршены, сохраняет результат из стора в файл и отдает его мне.

Это вайб программирование. В полученной программе куча багов. Так, например, она пропускает примерно 30% страниц для парсинга из-за каких-то багов около таймеров. Но это ничего! Ведь моя (не моя) программа трекает все страницы, которые были спаршены, и, запустив скрипт 3 раза, я получил полный набор контента (хотя ордеринг и был нарушен). В этом ключевое отличает Vibe программирования в отличие от реальной разработки, где мы обычно не игнорируем 30% пропущенных для обработки данных.

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

Категории: Программирование