Вайб-кодинг
Вайб-кодинг
Наверное, почти все уже слышали “вайб-кодинг” то, “вайб-кодинг” сё. Но я только недавно осознал, насколько же хорошие ИИ-модели облегчают разработку. Какие-то идеи, за которые раньше было даже взяться страшно, теперь воплощаются в рабочий прототип с Копилотом за считанные часы - просто “на вайбе”.
Конечно, ИИ не панацея: не обходится без галлюцинаций или сомнительных “улучшений”. Однако же это скорее исключения или знак, что пора сбросить контекст и дать модели посмотреть свежим взглядом. Обширные задачи вида “перепиши весь проект с фреймворка Х на фреймворк Y” лучше Копилоту не давать: даже не небольшом проекте на пару десятков файлов он может потеряться. Зато локализованные задачи, особенно если код хоть немного структурирован, решаются “в один промпт”.
Из недавних примеров - “добавь возможность послать активационное письмо еще раз”. Я буквально так и написал (на английском). А моделька написала и недостающую “ручку” в бекенде, и дернула ее с фронт-энда, и красивенько встроила в существующий процесс входа. Это просто поражает и я до сих пор не перестаю удивляться.
Карты
У меня иногда бывает, что я ищу какие-то карты каких-то точек и зачастую эти карты люди выкладывают как Google My Maps / Мои карты. Не путайте с обычными “гуглокартами”, речь именно об обделенном внимании Гугла сервисе, где можно создавать свою карту, набросать на нее точек и/или треков, кастомизировать названия, поделиться с друзьями или миром. Внимательный читатель заметит, что почти к каждому большому отчету из путешествий у меня приложена как раз такая “моя” гуглокарта с маршрутом и точками.
Часто именно в таком формате получается найти карты стрит-арта. Конечно, это прекрасно, когда что-то находится. Но“Мои Карт” - это сервис из до-телефонной эпохи. С ними удобно работать на большом экране и с мышкой. Скрыть-показать различные типы, добавить другие точки на карту, или скачать файл с точками. До телефона же дошел лишь базовый огрызок функционала - карта открывается в приложении гуглокарт и показывает точки. Всё. Отобразить несколько карт сразу - нельзя. Скрыть/показать категории - нельзя. Скачать - тоже нельзя! Самое обидное, что даже если включить в браузере “режим компьютера”, коварное приложение гуглокарт все равно перехватит ссылки на “Мои Карты” и открыть их так, чтобы увидеть заветную кнопочку “скачать KML”, не выйдет.
На днях я случайно наткнулся на факт, который был для меня как “Эврика” - оказывается, ссылки на скачивание формируются
абсолютно простым и понятным образом!
Если обычная ссылка выглядит https://www.google.com/maps/d/u/0/viewer?mid=1-XXXXXXXXXXXXXXXXXX&femb=1&ll=48.132268571799074%2C11.55401675000002&z=13, то в ней нетрудно заметить главную часть: mid=1-XXXXXXXXXX. И если ее подставить в https://www.google.com/maps/d/u/0/kml?mid=YYYYYYYYYYYY&forcekml=1, то получится прямая ссылка на скачивание! Тут у меня и родилась идея простенького проекта: а что, если по ссылке на такую карту давать пользователю сразу ссылку на KML/KMZ? Для телефонов это вообще идеальный
юзкейс - ссылку на карту-то еще как-то можно добыть, но не менять же параметры руками.
Не долго думая, создал новый проект, кхм, т.е., новую пустую папку и сказал Копилоту “Твори!”.
“А теперь дорисуйте сову”
Ну на самом деле чуть больше, но, на мой взгляд, ненамного - изначальный промпт был примерно такой:
Create me a simple app based on Vue.js with RU and EN i18n.
It should be great looking, utilize Tailwind and be adaptive and responsive for mobiles as well as desktops.
The app is about getting KML/GPX from Google MyMaps.
It should have just one text box for input.
If the input is a valid URL* to google MyMaps, then we should output some success message and a few links to download KML files. The links should be like following, but of course do not show the full URL, make it nicer.
KMZ (compressed) - https://www.google.com/maps/d/u/0/kml?mid=XXX
KML (uncompressed, does not support all icons) - https://www.google.com/maps/d/u/0/kml?mid=XXXXX&forcekml=1
* Valid URLs are like
- https://www.google.com/maps/d/u/0/edit?hl=en&mid=1tWCqTerra6PbOH
=> so we are able to extract `mid` ID from the link.
If user provided not a valid Google My Maps URL, display some information message about it.
The app should support docker compose deployment for production (generate static files and serve via nginx) as well as development flow with `npm` locally. Do not bother about SSL/HTTPS, no need.
The app should have production quality, have some fancy README for publishing to Github.
Тут стоит сделать небольшое отступление про модельки. По моим наблюдениям, что GPT 4.1, что GPT 5 Mini с кодинговыми задачами, охватывающими больше нескольких файлов, справляются из рук вон плохо. Да даже с изменениями в одной функции они могут справиться, но нужен глаз да глаз - здесь они заиспользуют что-то несуществующее в проекте, здесь вообще дичь напишут.
Однако Sonnet 4 мне прям зашел, он на совершенно другом уровне. С ним чаще получается такое, что через Х дней хочешь какую-то фичу… А потом случайно обнаруживаешь, что он все это уже давно написал! Или вот промпты, требующие изменений как фронтенда так и бекенда - в целом, Соннет с ними скорее справится, чем нет. И код получается рабочий обычно с первого раза.
Так и получилось сейчас - на самом деле даже после первого промпта получилось вполне себе рабочее приложение, которое можно деплоить. Даже иконку он сгенерировал!
От кнопочек “скачать” я чуть кипятком не описался, настолько это круто выглядело, и насколько я понимал, что сам бы такое я вряд ли сделал за адекватное время.
Обратил внимание, что почему-то когда жмакаешь кнопку, то что-то подозрительно долго оно что-то делает. Так что бы вы думали? “for better UX”, оказывается, вон оно что! Гы-гы-гы, давно так не смеялся. Смеялся чуть меньше, когда вспомнил, что очень часто в других сервисах какие-то тривиальные операции выполняются с заметной задержкой. Ну и, наверное, модель тренировалась на коде. Но все равно это смешно, конечно:
Аппетит приходит во время еды
Но, конечно же, сразу хочется чего-то еще. Сразу подумалось, что можно ведь пойти дальше - зачем просить ссылку на гуглокарту, если обычно они уже есть на каких-то страницах, и можно просто попросить ссылку на сайт/пост. Сказано - сделано. Вайб-кодинг творит чудеса!
The app should support light/dark theme. Add switcher and also detect theme from browser automatically.
И оно уже работает! Чуток подтюним:
Make this theme switch as three buttons and highlight what’s selected
Да это черная магия какая-то, как это получается вообще! Да, код приземлился прям в основном файле, ну не страшно - напомним держать код структурировано:
Extract this theme switcher to separate component
Ладно, с плюшечками разобрались (правда валидации не кривых ссылок не хватает), а теперь давайте парсинг страниц сделаем:
If user provides just invalid URL, inform about it - write some red info that it’s not valid URL.
However if it IS a valid URL (but not google map), then we should be still able to at least try to extract it. First we fetch the page source, parse the response with regexp trying to find google map URL and IF it’s found - provide the same download links.
Тут я, как не настоящий веб-разработчик, открыл для себя новость - оказывается, нельзя так просто взять и “сделать запрос с клиента”. Точнее, как “открыл” - прочитал, что мне копилот написал и удивился. Почему-то считается, что если ты хочешь сделать fetch страницы на другом домене - ты злодей и негодяй. А я ведь хотел как лучше: чтобы клиент сделал спокойно запрос сам и все.
Но нет, нужен отдельный сайтик, единственная задача которого - выкачивать другие сайтики. cors-anywhere или allorigins.win. Чтобы не использовать публичный инстанс, сходил поднял свой (параллельно открыл для себя Caddy, но об этом в другой раз). Еще одна чашка чая выпита.
А может, еще вот это?
Подумал, что было бы неплохо и ссылку на карту показывать, раз мы ее распарсили. Ну кликнуть-то может захочется, удобно же.
Whether user has chosen Gmaps URL from multiple available or provided the valid gmaps link in the beginning, I’d like to give option for users to either go to this URL or copy it to clipboard. Can we include it to our app?
Круто же, да? О, а если на странице ничего нет, но ошибки не было, давайте покажем размер, а то вдруг там мало данных было?
If scrapeUrlForGoogleMaps returned empty list (but no errors), we need to show it, tell user that page was ok, parsed 10KB (or whatever page size was) but found no links
Ну раз пошла такая пьянка, то и логотип и фавиконку неплохо бы получше сделать. О, красота, отлично :)
Итог
Путь до MVP занял всего два часа. Ещё пара часов ушла на деплой: поиск докерного варианта cors-anywhere, подключение аналитики и настройку странички buymeacoffee.
В итоге сервис работает - заходите, пользуйтесь https://kml.trips.place/.
Для меня это главное открытие последних месяцев: разработка с ИИ изменилась до неузнаваемости. То, что раньше казалось проектом “на неделю”, сегодня превращается в сервис за вечер. Даже не будучи экспертом в конкретном фреймворке, можно создать удобные сервисы. Пока читаешь, что такого Соннет придумал, узнаешь огромное количество нового. Можно обсудить дизайн, архитектуру и идеи, сгенерировать логотипы и иконки, а уж такого стройного аккуратного веб-дизайна у меня в принципе никогда не получалось.
Как говорится, “любая достаточно развитая технология неотличима от магии”. Вайб-кодинг сегодня - это именно про это.