Vibe Coding 101 - Полный курс (От А до Я)

Итак, давайте поговорим про viipeкодинг. Конкретно это видео называется vibe codдинing 101. И сейчас я объясню, почему. Мы разберём, что такое динг на текущий момент, где он применяется, какая у него структура и что нужно учитывать, если вы пишете свой код с помощью нейронок. И также мы посмотрим на практике, как вообще это работает.

Значит, сперва у меня будет небольшая презентация, где мы поговорим про теорию и после уже поговорим про практический аспект вайбкодинга. Значит, этот контент и курс я взял с такого потрясающего сайта, как Deep Learning AI. И есть целый бесплатный курс coding 101 with Replit. Собственно говоря, я его изучил. И здесь я вам хочу а дать свою интерпретацию данного курса. Ну, то есть весь контент, по сути, я взял оттуда. Ссылочку на этот курс на оригинал в английском языке я оставлю в описании, то есть там вы сможете его также пройти. Но здесь мы пробежимся по всем основным моментам. Плюс я дам свои комментарии по этому поводу.

Давайте сперва разберёмся, что же такое vibeкодинг. И если вы не слышали про такой термин до этого момента, то в своём Telegram-канале я писал целый пост про то, что это такое, как это устроено. Но если совсем кратко, топкодинг - это относительно новый термин, который появился примерно в марте 2025 года. И он характеризует тех программистов, которые пишут свой код с использованием искусственного интеллекта или с помощью и агентов. По сути, если дать такую интерпретацию, то слово vibe - это такие вибрации, волны. Современное поколение программистов, они не хотят жёстко пахать. Они хотят на чиле, на расслабоне писать код. И с учётом того, что нейронки, в принципе, уже справляются с этой задачей, то их можно использовать. Поэтому сейчас вайпкодеры - это те, кто пишут свой код с помощью искусственного интеллекта.

И на самом деле при правильном подходе и правильном применении такой подход даёт огромный скачок в продуктивности, потому что есть просто огромное количество уже примеров и случаев, когда люди, которые даже неглубоко знакомы с программированием, могут там за пару дней написать целое приложение, которые раньше создавали команды. Такой подход, он позволяет быстрее привести а какой-то проект от идеи к реализации. Понятное дело, что полностью прямо суперкрутой, точный проект. Скорее всего, не получится создать, но получится создать по правилу Парета примерно 80% из этого проекта. Дальше там можно будет уже его доработать. То есть принцип вайпкодинга, он в принципе позволяет быстрее, да, создать какой-то проект от идеи до реализации. Ну, как минимум создать классную MVPшку. MVP - это minimal valuable product, то есть минимальная версия по функциональности, но которая уже работает.

И на самом деле для консервативной части те, кто ещё не работал с искусственным интеллектом в рамках программирования, а вайpкодинг он лимитирован только лишь опытом самого разработчика. Это к вопросу о том, заменит ли нейросети программистов, но вот прямо сейчас не заменит, да? Вам нужны навыки, которые позволяют работать с кодом. И чем лучше и глубже у вас знания, тем больше возможностей вам открывается. То есть это можно расценивать как некоторый вспомогательный инструмент, который быстрее позволяет писать код и создавать какие-то прототипы и идеи.

Значит, нам нужно разобраться про то, как работают принципы вообще разработки программного обеспечения с и агентами. Смотрите, очень многие начинающие, которые только делают свои первые шаги в мир написания кода с помощью искусственного интеллекта, любят сразу же писать такой промпт, да? То есть это запрос, который отправляется в нейросеть, типа напиши мне проект. Да, и текущие нейросети, они позволяют, в принципе, это сделать. тот же самый Клод илик или дажей это разные лмки, то есть large models. Но если мы хотим действительно говорить про высокоуровневую, более точную и профессиональную разработку, то принципы заключаются в следующем. Когда вы разрабатываете проект, должна быть всего лишь одна задача в одну единицу времени, чтобы не создавать расфокус для нейросети и чтобы она допускала меньше ошибок. То есть вместо того, чтобы, например, говорить: "Эй, нейросеть, иди и напиши мне целый проект", мы должны декомпозировать данную задачу на маленькие задачи, на более простые. Это называется юниты. И вот дальше по этим юнитам как раз-таки создавать уже части проекта с помощью искусственного интеллекта. А если же мы в одном запросе в промпте сразу же даём огромное количество задач, там поправь мне вёрстку, потом добавь мне функционал, прицепи базы данных, то с высокой долею вероятности нейросеть запутается и выдаст не то, что ожидалось.

Поэтому, когда мы записываем запрос, то есть вообще как бы стоит тоже, наверное, отметить для начинающих, мы вначале создаём просто текстовый запрос на основе обычного языка человеческого. Это называется, а, natural language, то есть натуральный язык. Мы создаём свой запрос, и дальше нейросеть по на основе его пишет код. Вот. А мы этот запрос каждый раз вот чем более точно и чем более детализированно сделаем, вот можем пробовать объяснить просто как маленькому там начинающему джуну какому-нибудь, что нужно делать, тогда, собственно говоря, нейросить будет выдавать более точный результат, да? То есть мы запоминаем, что вписывая промты, первое, мы разделяем это всё на маленькие подзадачи юниты, и дальше пишем чёткие и простые задачи в рамках одного юнита. Чуть позже мы детализируем эту тематику.

Какие, а, моменты стоит учитывать, да, при такой разработке? Конечно же, это правило, в принципе, всех программистов, что, вообще-то, нужно держать проект как можно более аккуратным. То есть в аккуратное мы вписываем и архитектуру, и декомпозицию на различные компоненты, и код style, и однородность данного кода. То есть, чтобы нейросети также было просто в этом ориентироваться. Это наша задача как вайпкодеров для того, чтобы в конечном итоге мы не запутались и не зафакапили наш проект.

Каждый новый функционал мы добавляем пошагово, да, это к информации с предыдущего слайда. То есть нам нужно декомпозировать большую задачу на маленькие подзадачи и, соответственно, не торопиться, то есть поочерёдно добавлять новые функции и терпеливо ждать. Следующий момент. После того, как мы накатили новую фичу и, допустим, она сразу же работает, не нужно торопиться добавлять сразу же другую фичу. Нужно сперва оттестировать то, что мы внедрили для того, чтобы зафиксировать этап, когда всё работает. И в случае, в случае, если что-то пошло не так, то не бояться откатывать назад свой код, да? То есть про версионность мы тоже сейчас поговорим. Дело в том, что нейросети - это не какая-то истина в последней инстанции. Всё-таки это предсказательный механизм по своей сути, поэтому иногда он может ошибаться, да? То есть записав один и тот же промт, вы не получите всегда одинаковый результат, да? И поэтому, конечно же, есть вероятность ошибок, но это нормально, потому что в конечном итоге даже живые программисты тоже допускают ошибки. Ничего страшного, мы можем вернуться к рабочей версии и попробовать сделать всё с самого начала.

Дальше. А вообще те, кто нам пишут код - это либо аегенты, либо ассистенты, я сейчас про это расскажу. А они работают по контексту, то есть вот то, что мы вбиваем в нейросеть, там один запрос, второй запрос, третий запрос, её ответы, это всё называется контекст. И чем больше как бы вот это вот поле, чем больше информации в одном, в одной сессии лежит, тем сложнее будет в итоге неростити работать, потому что всё-таки на текущий момент у них есть лимиты по количеству символов там, да, по количеству а импута, так называемого, который мы вписываем. И поэтому, когда мы заканчиваем с одной фичей, нужно начинать новую сессию, да? То есть правильно дать вводные и продолжать уже с новой сессией для того, чтобы контекст был чистый и, соответственно, нейросеть меньше галлюцинировала, то есть, ну, выдавала какой-то рандомный результат. Опять же, когда мы начинаем новую сессию, то будет проще откатывать изменения и поддерживать проект. Ну, собственно говоря, и как я уже говорил, не стоит переживать, да, если что-то пошло не так и нужно будет переключиться там на последнюю рабочую версию. Те, кто работал с гитом, в принципе, я думаю, понимают, что бывают какие-то баги, но для этого существует определённая версионность.

Дальше нам, конечно же, при разработке необходимо быть более терпеливыми. Мы, конечно же, получили очень удобный и классный инструмент, позволяющий быстро создавать код. Тем более не нужно его писать руками. Мы хотим, чтобы сразу всё работало. Мы просто записывали эти предложения. Вот. Но опять же, неросетки делают ошибки, то есть нужно быть терпеливым и попробовать, например, по-другому объяснить, да, или найти источник бага и так далее. А, соответственно, а не нужно полностью делегировать свою когнитивную там программистскую работу на нейросеть. А также, как и в обычной разработке, вам необходимо понимать, как вообще эта разработка устроена. То есть, а что в итоге выдаёт нейросеть? Как выглядит структура кода? Как выглядит структура компонентов? За что они отвечают? Вам нужно в этом разбираться. И в этом вам помогут, конечно же, комментарии от агента, который по шагам будет объяснять, что он сделал, где он внёс изменения, а зачем он это сделал и комментарии по тому, как это работает или там как он видит текущую реализацию там. А, соответственно, необходимо читать всё, что он комментирует, для того, чтобы попадать в контекст. Ну и читать, соответственно, код. А опять же дальше мы посмотрим, как это устроено.

И, разумеется, а когда мы вписываем promptт, то нейросеть там пишет код, что-то формирует. И есть две опции: принять изменения или отклонить изменения. Так вот, не нужно сразу же apply нажимать и ээ пытаться перейти к следующей фишке. Нет, нужно, конечно же, прочитать, то есть можно это расценивать как некоторый поуреквест, прочитать код, прочитать изменения, убедиться, что это будет рабочая версия, это то, что нам нужно, и только после этого, а, применять это в проект. Ну, собственно говоря, мы также будем говорить ещё про процесс дебага. А в работе обычного программиста большее количество времени уходит именно на баг. И здесь, в принципе, тоже ничего не меняется. То есть нужно смотреть, что происходит, где были ошибки, как это работает, разбираться и также объяснять нейросети, что нужно сделать, да? То есть у обычных прогеров много времени уходит на отладку приложения, поэтому здесь похожий принцип и алгоритм.

Что мы будем делать в рамках данного видео? Мы будем использовать искусственный интеллект для того, чтобы создавать, тестировать и заливать приложение на удалённый сервер. То есть будем делать полный цикл разработки FeК приложения. Мы будем учиться вообще понимать, почему там те или иные инструменты в рамках вот этого вайп-кодинга и системы плет вообще важны, какие стоит выбирать в нужном контексте. Там довольно-таки много фичей, поэтому, а, это будем разбираться. Будем разбираться, как, естественно, взаимодействовать с искусственным интеллектом, ну, и как делать более точное приложение для того, чтобы получить тот результат, который мы ожидали. Это то, чем мы будем сейчас заниматься после теоретического блока.

Как я и говорил, а мы будем работать в текущем видео с такой системой, как repletт. А данная система, она это является вообще онлайн-редактором, и они сразу же пытались внедрить некоторые афишки. И вот на текущий момент, по-моему, с марта двадцать пятого года, как раз-таки они внедрили очень классную систему именно для вайп-кодинга с точки зрения искусственного интеллекта. Давайте по порядку совсем разберёмся. То есть что из себя представляет реплит? В принципе, это такой, по сути, да, как бы целая экосистема прямо в браузере. То есть вообще на компьютер, в принципе, можно ничего не устанавливать. Ну, кроме того, что есть, конечно же, дисктопное приложение, но по факту, то есть это не сайт туда перенесли, просто и так более удобно делать. Э можно делать всё то же самое в браузере и нет никаких проблем, не нужно ничего ставить. Там встроен искусственный интеллект вообще на каждом шагу. То есть любой шаг, он поддерживается ишкой, различные чатики, саппорты, ассистенты, агенты и так далее. Всё есть. То есть постоянно можно взаимодействовать с ним. И это довольно удобно. В эту систему уже всё включено. То есть и установка пакетных менеджеров, интеграция с базами данных, терминалы, авторизация, локальные стореджи, различные секреты, плой, как раз-таки вот, да, деплой можно там осуществить вообще в несколько кликов. То есть, по сути, это просто полный готовый инструмент для того, чтобы выкатывать уже полноценные приложения.

При этом, если сфокусироваться на именно искусственном интеллекте, то есть два основных такие две основные сущности, да, которые в реплите реализованы. А первое - это встроенный автоматический разработчик искусственного интеллекта. Называется он Replet Agent. Replet agent - это такой комплексный искусственный интеллект, который по факту является полноценным софtare девелопером, то есть разработчиком, который полностью пишет проект. Он сам выбирает, э, то есть он анализирует запрос, он понимает, как этот запрос разделить на план по построению проекта. Он предлагает выбрать стек и дальше поэтапно начинает всё это внедрять. Он пишет как клиент, так и сервер. Он сам тестирует функционал, запускает. Если есть ошибки, он, собственно говоря, их тестирует и самостоятельно опять же фиксит. И с помощью именно вот этого мощного комплексного решения, а, мы можем создавать новый проект с нуля. Он, как я и говорил, создаёт план разработки и может вносить такие сложные многошаговые изменения.

При этом есть другой тип искусственного интеллекта в ра в рамках данной системы. Это ассистент для точечных правок. Он так и называется: Replet assistant. А по большей части это чат, где вы можете постоянно взаимодействовать с искусственным интеллектом, то есть спрашивать у него там какие-то вопросы по проекту, спрашивать общие детали. А и он предназначен больше для точечных изменений в коде. То есть, если agent, он берёт и комплексно создаёт какое-то решение, то ассистент он нужен для точечных вещей. Ну, очень простой пример. То есть, если вам нужно где-то поправить вёрстку, то, мм, не будет профильно использовать здесь агента, нужно будет использовать ассистента. Но если нужно будет там добавить, например, базу данных, то тогда это, конечно же, задача будет агента. Опять же, всё это будем мы сегодня смотреть.

пять навыков, э, которые сейчас актуальны в вайбкодинге, да? То есть, если декомпозировать в принципе вообще данную науку, то она состоит из вот таких вот пяти ключевых э пунктов. Первое - это размышление, фреймворки, чекпоинты, баг и контекст. Это некоторая абстрактная такая когнитивная тоже модель, которая нам даёт фреймворк по тому, как принимать решения, как действовать и как мыслить. при работе с вайп-кодингом.

Давайте разберёмся с размышлениями. То есть, кстати, это даже очень сильно похоже на, в принципе, то, как функционирует наш мозг. То есть не так не просто так искусственный интеллект назван искусственным интеллектом. Смотрите, если говорить про размышление, то здесь присутствуют такие четыре ключевых функции, да, которые мы внедряем именно в размышление. Первое - это логика, анализ, процедуры и вычисления. Если говорить про логику, то сперва нам самим нужно вообще разобраться, а в чём заключается суть процесса. Мы для себя вначале отвечаем. То есть это ведь тоже работает, ведь тоже думать надо, да, для того, чтобы более точно сформировать определённый запрос. Дальше это анализ, то есть это ответ на вопрос: "А как я ещё могу улучшить процесс?" Да? То есть он дальше перетекает уже в более точный промпт, заброс к нейросетке. Дальше это процедура, то есть ответ на вопрос, как мне реализовать этот процесс успешно, да, то есть что необходимо мне ещё внедрить. Ну, и, собственно говоря, последнее - это вычисление, то есть какие могут быть паттерны в этом процессе, да, как мы можем переиспользовать определённый функционал, как мы можем сделать это более точным.

Когда мы работаем с искусственным интеллектом, а мы работаем больше с нашей творческой частью. То есть действительно, когда система умеет писать код, наша задача - это правильно и корректно проектировать а идею, которую мы хотим, потому что искусственный интеллект не может ничего придумать, на самом деле. А здесь мы можем делегировать ему, а, процесс написания кода, но сама идея, концепция, функционал остаётся именно за нами. То есть мы уже переходим в более творческую часть. Опять же, если вы посмотрите там мои видосы двухлетней давности, там про Иишку, про чати тогда ещё, то вы увидите, в принципе, что прогноз был на то, что профессия программиста постепенно будет переходить в сторону оператора. Э дальше вот этот весь процесс вычисления, его можно воспринимать, в принципе, как определённую игру. То есть здесь как аналог можно взять там игру в шахматы, например. Когда мы в принципе понимаем правила и, в принципе, там понимаем, как фигурки ходят, как всё устроено, какие есть там комбинации или классные ходы. И наблюдая за процессом игры в шахматы, мы думаем: "А как можно улучшить сейчас нашу игру? Как можно улучшить нашу позицию сейчас? Как можно выиграть в конечном итоге? Здесь, в принципе, то же самое. То есть у нас происходит определённые взаимодействие с системой. Мы, если понимаем их правила и понимаем декомпозицию идей, то должны правильно подумать, как это всё дело улучшить и вытворить в жизнь.

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

Дальше, что касается фреймворков, то есть здесь, видите, когда мы уходим уже в плоскость работы с искусственным интеллектом и вайп-кодингом, в частности, то в целом в целом нам не так важно понимание какого-либо конкретного инструмента. Нам очень важно, чтобы у нас был опыт понимания того, как в принципе всё приложение должно работать. То есть, конечно же, вы можете прямо совсем без знаний искусственного интеллекта взять и написать программу. есть такие случаи и прочее, но всё-таки ваш опыт является ценным ресурсом. И поэтому, если вы понимаете основы того, как устроен там у неё тот же самый флстек и как строится архитектура, то вам будет намного проще понимать, а как это всё соединить. И в целом здесь не так важно вообще выбор инструмент, там фреймворка, условного, React, Ангуляра, ВьюW, велта, Квика, Солида или ещё чего-нибудь. Вам важно то, чтобы это, в принципе, просто всё работало. Почему? Потому что в конечном итоге вы можете у искусственного интеллекта спросить, а в принципе, а какой стек мне лучше подобрать под реализацию конкретной такой задачи? В каком направлении мне нужно мыслить? То есть вам нужно понять, в принципе, проблематику, а не думать над конкретным инструментарием. А потому что его можно уточнить у Ии. Либо вот, допустим, вы разрабатываете что-то на JavaScript, и вы можете просто спросить у Иишки: "Вот смотри, я хочу написать такую приложуху, какой фреймворк позволит мне это сделать там более оптимально?" Очень простой пример, да, который здесь в презентации указан. То есть, если нужно там, например, реализовать функционал драгондропа, то можно просто написать реализуй DragonDrop, а можно подойти с инженерной точки зрения и спросить: "Мне нужно там, помоги мне реализовать Dragнop, а, на Реакте", да, вот в этом приложении, и потом уже только попросить его это реализовать. Либо же можно спросить у него: "Слушайте, вот мне нужно реализовать Dragonrop, а какой инструмент мне лучше для этого выбрать или какую библиотеку?" То есть вы можете консультироваться, и, в принципе, это будет хорошо. И прикол в том, что вот, используя такой подход, в принципе, вы не просто делегируете свой когнитивный процесс на иишку, а вы можете даже лучше понять, как работают технологии прямо вот на конкретных примерах. То есть он генерирует код, а вы изучаете, как это устроено, читаете комментарии и учитесь таким образом. Это довольно-таки круто.

Дальше чекпоинты, да, про которые мы говорили ранее, когда я говорю, что там аналог гита нужно откатываться и так далее. Конкретно в системе выстроена такая вот система чекпоинтов, то есть определённая версионность локальная, куда мы можем откатываться. То есть каждый шаг работы АИ агента, он как раз-таки строится на чекпоинтах. Вы сделали запрос, он выкатил новую версию приложения и зафиксировал его. Вот. И тут, конечно же, очень важно понимать, что, э, в случае, если вы что-то сделали не так или Ишка что-то сделала не так, всегда можно откатиться на предыдущую версию. Мы до этого говорили, что это нормально абсолютно. И, собственно говоря, не рушить ваше приложение, да, а попробовать его [музыка] делать от рабочей версии.

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

И последний пункт в данной категории, то есть это контекст. Мы на самом деле в рамках контекста говорим про то, сколько вводных мы можем дать искусственному интеллекту. И мы должны корректно понимать, сколько вообще он может переварить, да? То есть у искусственного интеллекта есть определённый лимит на водные данные. В зависимости от нейронки он варьируется. В принципе, сейчас они могут кушать довольно-таки много информации, но всё же у этого есть лимит. То есть мы сами должны контролировать, насколько велик наш контекст и что мы можем ему задавать. При этом контекстом в данном случае может быть как определённые слои нашего приложения, запросы, картинки, файлы или информации о приложении. При этом важно понимать ключевую часть э работы искусственного интеллекта в том плане, что он всегда работает с устаревшими данными. Если вы не понимаете, о чём речь, посмотрите на моём канале курс по чату GPT. А он, по-моему, года то ли полтора, то ли два назад мною записан, но там прямо до сих пор всё актуально в том смысле, что я там показываю, почему это предсказательная модель, почему он работает с устаревшими данными. Пока вы можете принять это как факт. И, конечно же, из-за этого могут возникать определённые ошибки, например, связанные с версионностью пакетов или там применяемому API или SDK. Соответственно, для того, чтобы более точно работало наше приложение при подходе вайп-кодинга, то мы должны добавлять новый контекст, да, например, там, а, директивно указывать, какие методы использовать, э, добавлять к нему документацию и так далее. Вот. Но при этом опять же вручную э вычислять, когда идёт уже слишком большой контекст, и его ограничивать, создавая новый.

Теперь, а, мы уже плавно переходим к практике в том плане, что нам нужно понять алгоритм построения MVP. И, как я говорил, MVP - это minimal valuable product, то есть какой-то продукт, приложение, сайт, а, которая работает, но как бы оно ещё там не декорировано, то есть примерно 80%. А смотрите, для того, чтобы построить вот эту вот базу, нам необходимо для искусственного интеллекта добавлять только ту информацию, которая нужна для MVP. То есть, ну, условно, если у вас есть возможность не грузить его, например, стилями или какой-то декоративной частью, там, иконками и так далее, то лучше не грузить его и сосредоточиться на функционале. Это не обязательно, но просто как пример для того, чтобы вы понимали. А вам необходимо начинать с малого и дальше дорабатывать уже до полного функционала. То есть не пытаться, опять же, как я в начале говорил, делегировать искусственному интеллекту, что, мол, всё, сделай, я написал запрос, что ты не работаешь, да? Потом появляется вот каста неверующих в иишку про то, что фу, он делает ошибки и так далее. Э ошибки он действительно делает, но если использовать правильные алгоритмы, правильные промты, то шанс этих ошибок будет минимальный. Вот. И, собственно говоря, да, добавляйте фундаментальный контекст, дополнительное инфо и необходимые детали для реализации. Опять же, это пример с версионностью, то есть если вот нам нужно, например, работать с конкретной библиотекой, то можно прямо в него доку загрузить и сказать: "Вот новая опишка. Вот, работай по ней". Да, он там должен плюс-минус понять, если вы точно опишете запрос, да, как бы, э, директивно указывать, если нам прямо необходим там какой-то чёткий функционал, что ему необходимо делать.

И, собственно говоря, реализация новых функций. То есть, когда мы реализовываем новую фичу, то нам необходимо предоставлять контекст, который относится к новой функции, да, и стараться не добавлять ту информацию, которая прямо сейчас для новой фишки не актуальна. А нужно упоминать используемые фреймворки, технологии, библиотеки и, да, действительно, предоставлять документацию с явными деталями реализации. Это то, что я уже проговорил. И вносить вот эти вот изменения впроект через контрольные точки, то есть пошагово, поэтапно. Тогда, в принципе, а, построение приложения будет более точным. Если говорить именно про функционал, который мы разобрали в прошлом шаге, то вначале у нас есть какая-то новая фишка для MVP. Мы сперва её внедряем, потом мы её тестируем. Если мы находим ошибки, то мы их дебажем,

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

И плавно переходя к практическому а-э блоку данного видео, мы сейчас будем создавать сервис, который будет анализировать SEO на сайте. Аа мы сперва построим сайт с нуля, э, и будем изучать, сколько вообще времени потребуется сайту для того, чтобы загрузиться, изучать его метатеги. То есть вообще, что такое SEO, да? Это аббревиатура от Search Engine Optimization. это оптимизация сайта под SEO запросы, то есть под запросы поисковых систем. Это, в принципе, отдельная наука, отдельная профессия. Вот поэтому мы создадим отдельный сайт, а, целое решение комплексное, которое будет автоматически анализировать, что у нас происходит сшкой на сайте. Вот, э, данный сервис будет проверять, что все рекомендации, которые необходимо, применены, и он мы будем получать рекомендации после его оптимизации для нашего сайта. И мы всё это на вайп-кодим, то есть ничего ручками не будем писать. Ну, в теории. Вот примерно как это будет выглядеть. То есть у нас будет интерактивный инструмент, который будет позволять вводить нам URL любого сайта, просматривать визуальное представление времени загрузки тегов сайта. Мы будем убеждаться, что то, что мы строим, настроено правильно. Будем проверять правильность реализации этого сайта и сохранять недавно проанализированные сайты. То есть это то, что в наших планах на данную данную практику.

Ну и, соответственно, ключевые навыки, которые мы здесь прокачаем, а, с точки зрения вайп-кодинга - это формирование запросов, обработка и анализ HTML-контента, а, создание интуитивно понятных визуализаций данных. обработка ошибок и нестандартных случаев и хранение данных. Таким образом, мы закончили теоретический блок. Я надеюсь, что немножечко привёл в структуру то, что я сейчас называю vibe codдинing. И давайте перейдём к практике, посмотрим на repлит и создадим приложуху. Я думаю, что из этого теоретического блока вы уже поняли, что возможности при работе с искусственным интеллектом, они очень большие, и сейчас вы увидите на практике, как это работает. Но также обратите внимание про то, что я неоднократно упомянул и показал на примерах, то, что если у вас есть база, если есть понимание программирования, процессов, построения архитектуры, короче, ваши харнавыки, то ваши возможности, они кратно увеличиваются. И в текущих реалиях на момент двадцать пятого года, когда вы понимаете, как работает искусственный интеллект в синергии с программированием, то вы можете конкурентнее и быстрее прогрессировать.

Вы знаете, что уже 4 года я создаю онлайн университет по фронтенд разработке. И там мы действительно фундаментально долго, жёстко обучаем ребят для того, чтобы по выпуску у них были классные навыки в программировании и в частности front-end плюс бэкэнд. Но не просто так. Я добавил актуальную информацию по искусственному интеллекту в данную программу. То есть наши студенты, помимо того, что учат крепкую базу, они также ещё в процессе умеют пользоваться современными подходами работы с искусственным интеллектом, с современными лэмками. И опять же в синергии это даёт нам больший качественный опыт наших студентов. Поэтому мы продолжаем развивать нашу программу, адаптировать её под современный лад. И доступны, на самом деле, разные опции для разного уровня. То есть, если вы хотите подтянуть ваш уровень программирования, стать действительно классным, востребованным программистом, а, поверьте, сейчас идёт рынок кандидата для хороших кадров, начиная там с медлов, и зарплаты у этого довольно-таки большие, то вы можете первое пройти диагностику. То есть, например, если у вас уже есть базовые навыки, то вы можете пройти диагностику у нас и понять ваш текущий уровень, то есть, грубо говоря, оцифровать ваши знания и понять, нужно ли вам что-то ещё доучивать или пора уже просто упаковать себя на рынок труда и брать, а, хорошие вакансии, откликаться на них. А в этом, кстати, мой гайд на резюме вам поможет. Там ссылочка будет где-нибудь здесь на экране. Но при этом, если вы совсем начинающий, то у нас также есть опция, довольно-таки быстрая, эффективная и с сильной программой, которая в краткий срок даёт вам полноценные знания, чтобы вы стали программистом чуть ли не с нуля. Тут неважно, вы совсем с нуля или у вас есть какие-то навыки, вы можете оставить заявку на сайте, и наши специалисты проконсультируют вас, потому что будет оптимально. Как следствие, либо вы проходите диагностику и понимаете, что вам нужно подтянуть, либо вы можете учиться у нас с нуля и тем самым в краткий срок получить хорошие навыки совместно с искусственным интеллектом, применять это на практике и продвигаться в карьере. Пока оставшиеся процентов 80 разработчиков всё ещё игнорируют, в принципе, наличие вайб-кодеров, искусственного интеллекта. Ну, посмотрим. В итоге посмотрим, кто останется за бортом карьеры, а кто продолжит развиваться. Поэтому все ссылочки я оставлю в описании к данному видео. Обращайтесь, если вы хотите получить хорошие навыки. А мы переходим к практике.

Итак, теперь давайте перейдём к практической части данного курса. И теперь познакомимся с такой системой, как я сразу же хочу от себя дать комментарий про то, что- это не панацея, то есть это действительно один из лучших сервисов на текущий момент для вайп-кодинга. Но присутствуют ещё другие, например, New, Firebase Studio AI и, ну, конечно же, курсор. Хотя, лично мне курсор не очень нравится. Я считаю, что он пока кривоват, но тем не менее. То есть есть и альтернативы, принципы вайпкодинга, которые я рассказал, они применимы в любых из этих сервисов. Мы же будем рассматривать repлит. Вы можете зайти на этот сайт, зарегистрироваться. Это бесплатно. И да, несмотря на то, что сам сервис он платный, то в любом случае вот то, что мы сейчас разберём, скорее всего, войдёт в ваш бесплатный триал. А, кстати, вы можете зарегистрироваться с помощью моей рефералки. Вот она. Я, наверное, оставлю её в описании к данному видео. Ну, в общем, если вы хотите мне дать 10 кредитов, то я, конечно же, буду вам признателен, потому что я буду пользоваться этой системой дальше. Тем не менее, сейчас нам нужно разобрать, как тут всё работает. То есть, когда вы заходите в систему, вы видите главный экран. Мы сейчас к этому вернёмся. Тут присутствует полеs, то есть те приложения, которые мы, в принципе, уже создавали. Вот на текущий момент, наверное, у вас ничего и не будет. Дальше мы можем поговорить про плой, про использование, ну, и различные дополнительные как бы штуки. То есть по факту, по факту нам нужно просто перейти в поле Create App. Здесь, видите, есть разные варианты. можно создать с помощью, а, repта, использовать какой-то готовый шаблон. То есть тут довольно-таки большое количество уже заранее заготовленных шаблонов, и это прекрасно. Видите, тут разный стек присутствует. И, в общем, на ваш вкус можно выбирать то, что вам тут нравится. Ну, либо импортировать из Гитхаба. А это доступно только в подписке. Подписка, по-моему, стоит то ли 20, то ли 25 долларов, но я заплатил для того, чтобы вот разобраться, как это работает. В принципе, всё. Значит, что касается вот этих вот кнопочек, то можно установить реплет на компьютер или на мобилку. Но по факту, то есть приложуха выглядит вот таким вот образом, да? Здесь по сути тот же самый интерфейс. Самое забавное, что если кликнуть на Create App, то он переходит на сайт. Вот поэтому я и нахожусь сейчас на сайте, а не в приложих на компе.

Итак, нам что мы строим? Мы строим SEO сайт, поэтому мы вбиваем первый запрос. Я его заранее подготовил. И, соответственно, давайте разберёмся, что здесь написано. То есть сперва я пишу: "Помоги мне создать интерактивное приложение, которое работает, которое отображает SEO, то есть метатеги для работы сайта в интерактивной и наглядной форме, чтобы можно было проверить, правильно ли SEO реализовано. Дальше приложение должно получать HTML сайта, затем предоставлять обратную связь по SEO тегам в соответствии с лучшими практиками SEO оптимизации. Приложение также должно показывать предпросмотр в Google и социальных сетях. То есть опять же, а ещё раз, что такое SEO? Если мы перейдём там, например, в Google и напишем какой-нибудь, ой, просто, то здесь у нас идёт ранжирование сайтов, то есть их порядок в зависимости от данного запроса. Ну, очевидно, что репли здесь на первом месте. И что здесь можно отнести к SEO? Можно отнести вот эту вот категоризацию, которая здесь присутствует. Можно отнести вот это вот описание и, конечно же, главный запрос, да? То есть это есть у всех сайтов, где лучше SEO, тем выше он в поиской поисковой выдаче. Данный запрос на текущий момент будет осуществлять как раз-таки АИагент. И АИагент в данном случае он отличается тем, что сперва он создаёт план, по которому ему нужно будет сделать реализацию данного промта. Ну и после уже выполнить работу по нему. Соответственно, давайте начнём, а строить стартбиildдин и посмотрим на процесс, который здесь происходит. Здесь мы видим как бы, что конкретно сейчас происходит с агентом. То есть он думает, отсматривает приложение. Кстати, я пишу ему на русском. Наверное, лучше писать ему на английском, но в целом я не столкнулся с никакими проблемами. Пускай он там переводит. на свой язык. Для него это не проблема. Так, и давайте почитаем пока, что он нам выдаёт. А я помогу тебе с планом SEOтек анализатора приложения. Давай, а я попробую понять более чётко твои запросы. То есть я хочу построить приложение, которое позволяет пользователю вбивать URL сайта. Потом я фечу, то есть получаю данные об HTML веб-странице, анализирую селы, метатеги и презентую их на странице. Предоставляю обратную связь по этим тегам, основываясь на лучших SEO практиках, и показываю превью, как в Google сече, и в социальных платформах. А позволь мне предложить план для этого Seметатегонализатора приложения. Ну, я немного криво сейчас привожу, поскольку это в лайве. Ну, я думаю, вы смысл понимаете. То есть аплан, да, вот теперь уже агент, он предоставляет нам некоторые план. Построить начальный прототип. Это он выбрал, видите, как тип приложения. Это современное веб-приложение на стеке React и Nodejz. С точки зрения интеграции дополнительных библиотек он выбрал shedcn UI. Довольно-таки неплохая UI библиотека. И он спрашивает: "Хотите ли вы добавить какие-нибудь дополнительные фишки? Мы можем, в принципе, их добавить позже". То есть добавить трек по истории сайтов, а реализовать сравнение метатегов с другими кандидатами, добавлять детальное там SEO скоринг и добавлять экспортирование SEO анализа в PDF. Вот. И также я пока не буду здесь ничего нажимать, потому что помните вот этот вот принцип keep it simple, да? То есть вначале мы что-нибудь простое очень делаем, потом уже добавляем фишки, поэтому не буду ничего добавлять здесь. Ну, и собственно говоря, вот он говорит, что первое там визуальное представление будет через 2 минуты и первое приложение, версия будет через примерно минут 10. Всё, я проблю план и нажимаю старт. И погнали.

Мы переходим как раз-таки уже в базовый интерфейс репли. где наш уважаемый агент в данном случае, видите, работает именно агент, да, это автоматический, а, разработчик, причём он стоит нам 25 центов за чекпоинт, да, с чекпоинтами мы сейчас разберёмся. Ну, и пока мы видим, как просто этот парень берёт и спокойно начинает работать, да? То есть он там не жалуется на выгорание, ещё что-либо, а он просто работает в данном случае. Пока он нам добавляет этот функционал, мы можем рассмотреть, в принципе, интерфейс реплиты. Я думаю, кстати, что, э, я уже могу открыть это в дисктоптном приложении, да? То есть, видите, одно и то же не принципиально. Тут как вам удобнее, но я нашёл для себя, что мне чуть удобнее работать именно с а деспной версией. Вот. Ну, даже, видите, я перехожу между вкладками и, в принципе, ничего не меняется. Так. И давайте посмотрим на интерфейс сперва. То есть, смотрите, у нас есть агент. О'кей, круто. А дальше мы можем здесь добавлять новую вкладку. И тут мы либо спрашиваем аишку, то есть искусственный интеллект, либо просто выбираем там то, что мы хотим здесь рассмотреть. То есть чуть позже мы рассмотрим как раз-таки работу с Assistant, да, это как раз-таки более простая версия искусственного интеллекта для более точечных каких-то задач. Deployment, то есть заливание этого приложения куда-либо, э, на удалённый доступ. Есть модуль по авторизации, то есть он позволяет построить авторизацию на приложении, используя заранее такую пред а построенную страницу. Есть чат, где можно с ишкой общаться. Поиск кода, работа с базами данных, консолька есть список зависимостей, документация, м, extension store, то есть расширение, которое здесь присутствует, git есть. Ну, эти всякие дополнительные штуки мы не будем рассматривать, типа всякие интеграции, там, порты конфигурировать, object storage и так далее. Все эти штуки, они также доступны вот по этой вкладочке, да, то есть их можно здесь находить. А, соответственно, это деплоймент, база данных, консолька и так далее. Ну, то есть, если мы хотим, например, открыть консоль, мы просто пишем shell или мы пишем terminal. Открываем. Вот у нас есть как бы терминал. Мы можем работать с ней, в принципе. И видим, что у нас есть уже иконка. По-моему, это потрясающе. То же самое, в принципе, можем делать здесь. То есть также открываем как бы Workspace, смотрим. О'кей, иконка. Супер. Дальше, а, помните, я говорил про то, что нам нужно будет иногда очищать контекст и создавать новую сессию. Новая сессия, она создаётся при помощи кнопочки New Chat. Ну, пока она заблокирована, потому что, видите, у нас пока идёт там установка пакетов. ещё чего-то. А, но чуть позже мы, естественно, этим воспользуемся. Ну, и разумеется, есть такая кнопочка, как Open Fils, то есть если мы его посмотрим, это обычный файловый explorer, где мы видим уже структуру нашего проекта. И на самом деле, э, кстати, мы можем посмотреть, что он тут устанавливал, какие-то зависимости поставил. Hookфм, райдиксы. Прикол вайп-кодинга в том, что нам в целом не так важно понимать, что здесь вот, то есть вот, например, я не особо работал там с 10 stack query, а, ну, хотя понимаю его смысл, а он его использует, и, соответственно, я тоже буду использовать. Это прикольно. А вот если посмотреть на архитектуру приложения, то видите, у нас типичный как бы FSEG проект. Есть clientт, есть сервер, есть что-то shared. Share, я так понимаю, это, мм, ну, какие-то общие там условные интерфейсы, построенные на зоде. Классно. А если говорить про клиента, то вот у нас есть, получается, HTML-ка. Тут у нас вот вход в модуль в сорсе, видите, классическое React приложение. Можем вот так пока сделать. То есть он прямо полноценно с нуля пишет нам код. Причём, используя Typesриpt, что довольно-таки круто. А вот он этот QY client provider. Потрясающе. Тостер. То есть, что он тут пишет, как бы мы можем рассматривать бесконечно, но как будто бы вот на мой взгляд, сейчас проект выглядит довольно-таки аккуратным. То есть грамотно выбрана архитектура компонентов, да, там нет лишних импортов каких-то, а в там необходимые, О, господи, тут, конечно, их очень много, но UI компоненты, они убраны в UI а папочку, да. Там, если посмотреть на функционал, мы передаём какой-то он анализ. Давайте посмотрим какой-нибудь аккордеон. Я просто не понимаю, зачем он как бы на болерплейте всё это, то есть на записал этот код. Вот как будто бы не всё здесь используется, но опять же нужно будет проверять. Если говорить про сервер, опять же я сейчас вам показываю неготовую версию, поскольку, уважаемый агент, он работает, да, он всё всё ещё что-то создаёт. То есть мы смотрим на как бы промежуточный вариант приложения, но тем не менее, то есть мы видим, что сервер построен на Экспрессе, он самописный. Он, получается, тут создаёт просто роуты, фечат htмльку. Ну, в общем, если у вас есть навыки, вы понимаете, вам, конечно, будет сильно проще с этим взаимодействовать. При этом сервер тоже на ТСЕ написан, вид есть и так далее. Наша задача на текущий момент дождаться, когда он всё нам сделает. То есть пока в превью мы в принципе видим, что пока я тут рассуждал, рассказывал, у нас уже есть какая-то вёрстка, что довольно-таки классно. Дождусь на паузе вот этого шага и вернусь к вам.

Итак, буквально через минуту он завершил а свой первый шаг. И давайте посмотрим, собственно говоря, к чему мы пришли. Мы пришли к светлой теме. И а вот есть чёрная тема. То есть я даже не просил его это сделать, он это сделал. Это прикольно. Это что за кнопка? А, типа, как системная тема. Классно. Ну, давайте оставим светлую тему. То есть у нас уже что-то работает. Хотя вы видели, я не написал ни строчки кода. И первый важный момент есть, это то, что мы сделали первый чекпоинт. А, то есть в случае, если мы потом сделаем какой-то запрос, который будет рушить наше приложение, мы можем нажать кнопочку rowback here и получим вот эту версию проекта, да? То есть то, что мы рассуждали и разбирали в теории. Можно посмотреть на изменения по GTU. И тут, ну, грубо говоря, да, полноценный пореквест. То есть, видите, просто миллиард файлов каких-то добавлено. Не будем, наверное, их сейчас все смотреть, смысла нет. Сперва прочитаем, что нам плит выдаёт. А я бы хотел дать тебе фидбэк на поводу твоего приложения, которое мы только что построили. А оно должно там давать, короче, он дублирует то, что мы ему описывали. Что он создал? Он создал схемы для веб-сайт анализа. Он имплементировал, то есть создал IP для анализирования веб-сайта и метатегов, построил пользовательский интерфейс компонентов URL input, отображение дисплеев, превьюшки, добавил тему, точнее кнопочку по функционалу, так как по-русски сказать, кнопочку, короче, которая меняет тему. Я только что её прокликал, потому что не понимал, что это. Ну, и создал соответствующий SEOG. Э, короче, что-то создал, нужно перевести. Что ж, мы можем попробовать ввести какой-нибудь пример, э, и сориентировать его, работает ли это корректно. Что ж, давайте введём что-нибудь по типу https github. com. Да, вообще посмотрим, как бы работает ли вся эта конструкция. Нажимаю анализировать. Так, и ничего не происходит. Замечательно. Давайте посмотрим на def tools. Тут есть тоже такая вкладка консоль вид connected element. Что-то не работает. Хотя в теории в теории он должен выдавать. Итак, вот мы столкнулись, в принципе, с первым багом, да, потому что, ну, объективно я нажимаю проанализировать, он мне ничего не выдаёт. Соответственно, давайте ему про это и скажем. При нажатии на кнопку аналай отправляется запрос, но ничего не отображается на странице. Пожалуйста, кстати, я не знаю, наверное, не стоит писать, пожалуйста, но может быть и запомнит, что я был вежливый и потом не восстанет против меня. Итак, я довольно-таки базовый, на самом деле, написал запрос тоже в агента. Пускай фиксит задачу. В целом здесь алгоритм похож на то, как мы работаем с джунами. То есть мы директивно, утилитарно просим уважаемого джуниора зафиксить нам необходимые баги и уходим там пить кофе дальше. Давайте посмотрим, что нам уважаемый агент здесь скажет. Я понимаю проблему. При нажатии на кнопку запрос отправляется успешно. Мы видим 200 ок, но в результате анализ не отбражается на странице. Давайте это исправим. Сначала проверим ход хука, который отвечает за отправку запросы и получи результата. Кстати, можем его посмотреть. Также посмотрим, как устроено IP request. Так, теперь я нашёл ошибку. В кеuse SEO анализатор есть проблема. Мутация успешно направляет запрос, но данные передаются в запрос для получения результата. Основная проблема мутация уполняются успешно, но результат мутации не используется. В онтации просто устанавливается URL, но не результат анализа. Короче, он что-то исправляет. Давайте сейчас и посмотрим, будет ли это работать. То есть, смотрите, он, получается, внёс какие-то изменения в это у нас в клиент, да, как раз-таки вот этот hook use SEO analyzer use mutation анализ. Что-то, короче, исправил. Так, и в коде, ну, по идее, всё должно работать, да, как будто бы. Давайте посмотрим. Извините за задержку, я исправил код в ошибке. Так. Дорогой друг, давайте проверим вообще. Ага, всё супер. То есть мы увидели ошибку, мы её быстренько исправили, и вот мы вписываем URL. И, соответственно, он нам выдаёт довольно-таки неплохую статистику. Согласитесь, для а приложения, которое создано на основе одного запроса, выглядит неплохо. То есть анализ успешно завершён для GitHub, 13 положительных. три вординга и нет критических каких-то изменений. То есть общий скор он показывает, там базовые селы. Здорово. Есть Google Preview, есть ещё анализ метатегов. Причём, насколько я понимаю, они должны быть ещё с рекомендациями, но вроде как нет. Вот есть социальные метотеги, да? Тут всякие вот эти OG, а, tйтle, в общем, да, Facebook preview, Twitter, Twitter preview и рекомендации. То есть, смотрите, в итоге в итоге мы получили, я считаю, что просто отличное приложение, а, которое прям делает действительно то, что нужно, с одним небольшим багом.

Давайте рассмотрим дальше. Значит, что я хочу вам показать. То есть, во-первых, если кликнуть на вот эту вот зелёную штуку, то в целом мы можем получить def URL. Это временный URL для данного приложения. То есть оно уже как бы залито там куда-то на тестовые сервера. Им делиться, естественно, не нужно, да, потому что это супервременная штука, которая с минимальной нагрузкой работает, но в целом, то есть тут можно как бы смотреть. Чуть позже мы поговорим про плой. А QR-код также прилагает. И что ещё интересно, тут присутствует [музыка] предпросмотр на различных устройствах, то есть, например, там на Айфоне. И тут мы видим, что м у нас, ну, в принципе, там, да, неплохие аэ адаптационные компоненты есть, но при этом, то есть адаптации как таковой нет. То есть следующим шагом я бы хотел сделать, э, нормальный э адаптивный дизайн, да, потому что, конечно же, это никуда не годится. Ну что это такое, согласитесь. А прежде, значит, э мы можем прочитать, да, но мы уже прочитали эту историю, он сразу же нам предлагает такой: "А давайте добавим базу данных для, а, хранения пользовательских данных". Ну, пока я нажму Maybe Later. И опять же, я бы хотел пробежаться немного по коду. Смотрите, он добавил как бы эмдшку, описывающую архитектуру и, э, пользовательские какие-то предпочтения. А мне очень интересно посмотреть на хуки, то есть конкретно вот на этот SEO аналаеer, да. И тут действительно мы видим, как просто написан целый код, что очень здорово. Есть классический, а React Hook из mobile. В общем, я бы вам очень рекомендовал посмотреть на вот эти вот компоненты, да, которые здесь реализованы. А я не буду сейчас тратить много времени записи именно материала, чтобы, в общем, на вашу, а, ответственность это переложить. Вот я продолжу показывать именно принципы вайпкодинга. Так вот, значит, мы поняли, что у нас есть некоторые проблемы, а, с адаптивным дизайном, поэтому следующий мой промт будет выглядеть следующим образом. Сделай моё приложение полностью адаптивным под мобильное устройство и поправь ориентацию текста. Особенно добавь визуальное отображение скоринг сайта. То есть давай добавь и улучши. Опять же, абсолютно директивная задача для агента, но пускай он работает. В конце концов, мы вайпкодеры, мы не хотим писать код, мы хотим, чтобы машина всё это сделала. Пока ещё обратите внимание, что я работаю в контексте первого агента, но следующая уже задачу я буду выдавать в новом чатике, в новом контексте, потому что, ну, в принципе, мы уже тут проделали довольно-таки большую работу, и, значит, нужно будет его очистить для более точных результатов. Опять же, вот если посмотреть на этот запрос, то оно выглядит точно так же, как я бы и джулу в целом бы это давал задачу. То есть директивно, точечно, просто такие вот дела, да. Мы смотрим, как бы, что он тут пишет. Давайте я поставлю пока на паузу и вернусь, когда он закончит.

Итак, он закончил. Давайте прочитаем. Так, я вижу, что сервер перезапустился. То есть я улучшил дизайн приложения для анализа SEO тегов. улучшенна визуализация метрик. Так. И, собственно говоря, он предлагает нам что-то ввести. Ну, давайте посмотрим. То есть добавлены анимации. Ух ты, интересно. Действительно, смотрите, появились анимации, улучшена вёрстка для мобильных устройств, обновлён дизайн, заготовка и подвала для лучшего опыта. Здорово. И добавлен информативный экран пустого состояния. Слушайте, ну не знаю, как вам, а мне это прям очень симпатично. А, значит, сперва давайте мы впишем здесь GitHub. Ага, у нас есть проблема повёрстки, кстати. Здорово. И смотрите, что мы в итоге получаем. А, баг повёрстки. Кстати, наверное, я сейчас покажу вам, как это можно исправить, ну или чуть позже. Что мы в итоге получаем? То есть анализ, да, сразу ключевые моменты, вот эти всякие анимашки очень круто выглядит. А Google Preview, метатеги, ну, тут вроде без изменений, да, особо получилось социальные сети и рекомендации. Я считаю, что получился очень классный результат. Давайте впишем здесь какой-нибудь например, а deep learning AI это как раз-таки сайт, да, где был выложен этот курс coding 10 one тоже, смотрите, всё работает, да, если мы переключим всё на тему. Классно. Мне уже нравится то, что получилось. А, и теперь я хочу это ещё больше улучшить. Что мы делаем? То есть этот контекст, я считаю всё, у нас есть уже некоторые ключевые точки. Соответственно, я нажимаю здесь новый чат. Новый чат, он создаёт, э, по сути, новый контекст с агентом.

И мы можем здесь прямо опять более точечно разрабатывать какой-то функционал. То есть тут есть какие-то там прям заготовленные заранее промты.

А, слушайте, я не проверил ещё этот, а, адаптив. Всё, я считаю, что адаптив работает, да, потому что теперь всё влазит и всё чётенько. Какой-то surfйс. Ну, я думаю, что здесь тоже всё о'кей. То есть всё проверили. Супер. Два промта. Ну, я один багом. Для следующего промта я добавляю следующий, а, точнее, следующей задачи. Добавляю следующий промт. В общем, вы меня поняли. Я хочу, чтобы приложение было более визуальным. Необходимо создать сводки для каждой категории метатегов и отображать их визуально для пользователя. Аналогично общей оценке. То есть общая оценка - это у нас overview. А здесь приложение в целом более визуальном позволит мне быстро получить сводку и результатов SEO. В целом, давайте сделаем приложение более визуально удобным для пользователей, которые только начинают разбираться в SEO, чтобы могли получать общее представление о том, насколько хорошо реализована наша страница. Не нужно удалять никакую функциональность, просто сделать так, чтобы легче было увидеть сводную информацию или углубиться в детали. Такой вот запрос. Я считаю, что последнее приложение крайне важно, э, потому что мы не хотим перетереть то, что уже было наработано. Давайте это закинем и посмотрим, что нам уважаемый робот предложит.

Вначале он делает ревью сообщения и начинает программирование. Вернусь, когда он закончится этим. Так вот, как раз он финалит уже свою работу. То есть он уже там перезагрузил приложение, делает скриншот и вуаля создаёт полноценный чекпоинт. При этом он говорит: "Я продолжу создавать визуальные имменты. Давайте обновим resultнеer." Так, походу он ещё не всё сделал. Определяет следующие шаги. опять думает, блин, как прямо обычный программист. Ну, це самым можем, да, вот смотреть, что он такой что-то обновил такой. Так, теперь необходимо это, а, импортировать. Что он тут делает? Он, получается, создаёт нам вёрстку. То есть он больше применяет тайлвида, всякие красивые стили добавляет. Нам вот в этом прямо сильно детально разбираться не нужно. Я сейчас покажу, как это вот работает с точки зрения вёрстки. Вот на этом примере контейнер, да, он добавил, получается, новый компонент. Опять что-то обновил. А, то есть он поэтапно, э, добавляет какие-то компонентики, иконки и так далее. О'кей. То есть, видите, он несколько изменений здесь сделал, ещё изменения дописал и вуаля. А, прошло пару минут, мы получили новый чекпоит. Давайте посмотрим на sumy, который он предоставил. Я сделал несколько визуальных улучшений для приложения из того, что вы запросили. То есть добавил для категорий, короче, какие-то там картинки, изменения. Добавил визуальные прогрессы, улучшил дашборд, добавил скоринг и добавил информацию для начинающих. Дай мне знать, если нужны ещё какие-то там дополнения.

Ну что ж, давайте тестить. Пускай будет GitHub. Нажимаю Anлай. Ну и смотрите, как будто бы выглядит прямо теперь очень круто. То есть у нас уже есть новая категоризация в виде базовых метатегов Openгра, а тегов Twitter, технических тегов. Здесь у нас получается, ага, мы прямо выводим. Причём он говорит, что типа тайтл слишком долгий, должен быть меньше 60 символов. Здесь всё хорошо. Ну, опять же, тут как бы нам сейчас не принципиально. Аа что касается социальных сетей, тоже он всё вывел, дополнил и рекомендации тоже он дополнил, особенно для начинающих. А давайте посмотрим это в тёмной теме. Звучит круто, выглядит тоже какие-то иконочки. В общем, я считаю, что получился очень классный результат, да, как бы выглядит это хорошо с анимашками, с адаптивом и, ну, как бы с рабочей версией. Там давайте deep learning посмотрим. Тоже всё работает. Можем посмотреть на мой frontend roadmap на сайте. Ага, у нас всё-таки SEO содержит одну ключевую ошибку. Нужно мне нужен SEO оптимизатор. Если ты хороший SEO оптимизатор смотришь это, обратись ко мне через Telegram. Мы можем много чего обсудить. Вот. Но тем не менее, то есть как видите, тоже это работает. А где критическая ошибка-то? Что не так? социальные сети. Вот, а, отсутствие, я так понимаю, какой-то Twitter карточки или Twitter preview по ходу картинок. Ну, как вы знаете, вф он как розовая социальная сеть, поэтому улучшить можно, но не критично. Короче, нужно ещё дорабатывать нам страничку, но тем не менее, то есть тут вы можете найти полный наш интерактивный front roadmap, который на самом деле круто позволяет. Так, где наши статья? Вот круто позволяет сразу же окунуться в огромную библиотеку статей, материалы. Всё это бесплатно, структурно. То есть можете воспользоваться. Ну да ладно, речь не об этом. Смотрите, пока выглядит всё очень даже неплохо. Верну светлую тему.

И хочу теперь ещё показать вам про то, как работать с ассистентом. То есть агент, вы принцип, я думаю, поняли, да? Здесь можно смотреть список чатиков, которые у нас есть, но мне не нравится вот этот баг. Да, он, откровенно говоря, выглядит криво. И эту точечную задачу я бы хотел реализовать, исправить, точнее, с помощью как раз-таки ассистента. Поэтому я здесь захожу в ассистан. И у меня есть такая программка, которая называется Jy. Я с помощью неё делаю скриншоты. Я могу что сделать? Я могу взять, сделать скриншот этого места и вставить сюда в ассистента и сказать: "Поправьжение кнопки, чтоб она была на одном уровне с инпут. Например, так. Давайте попробуем. То есть и скриншот, да, мы можем тоже таким образом пользоваться. А показывает конкретное место, которое меня не устраивает. Давайте проверим, что он нам выдаст. Кстати, ассистент работает сильно быстрее, нежели агент, поскольку это опять же точечная функция для работы с иишкой. Вот он не анализирует прямо там весь проект, но и как следствие ему не нельзя давать какие-то прямо суперкомплексные задачи. Всё, ассистент начал работу над URL инпутом, то есть он идентифицировал. Так, давайте посмотрим, что он исправил, потому что здесь как раз-таки могут быть проблемы. Он добавил нам, получается, flex items SM items end. Так. Ну, допустим, давай можем нажать ещё revw. Короче, как я понимаю, он добавил именно флекс отображение для нашего сайта. Ну, давай, допустим, нажмём appй. Он перезагружает страницу. Так, ничего не произошло. Не произошло. Но, во всяком случае, пока ещё наше приложение работает, да? То есть нужно написать ему всё-таки ишка может допускать ошибку, да? Это про то, что нам нужно быть терпеливым. Поэтому мы опять же пишем картинка осталась на прежнем месте. Ой, не картинка, точнее кнопка. Да. А пробуй ещё раз. Можем пока так попробовать. В случае чего мы можем откатиться на предыдущую версию. То есть можем нажать undo this changes. Кстати, пока смотрел, видите, по умолчанию он работает с клодом 3,5 Sanet V2. По всей видимости 3,7 для него пока слишком дорогой. Ну, он достаточно неплохо работает, поэтому that's OK. Смотрим. Угу. Теперь он уже добавил больше стилей. Я вот просто не понимаю, он уже применил их здесь или нужно перезагрузить приложение. Flex [музыка] Items. А что-то у меня есть сомнение, конечно, по его эффективности этого изменения. Ну давайте посмотрим. Допустим, apply. Ну да. А так бывает. Так бывает. Поэтому у нас есть, получается, два новых чекпоинта. Так, сеттинги нам здесь не нужны. Давайте попробуем вернуться к этому чекпоинту, потому что нам не нужны все эти изменения. Он не понимает пока, что ему нужно, почему оно вообще так отображается. Так, checkpoint mate. И давайте попробуем ещё раз. Значит, я ему загружаю эту скриншот и говорю попробую. такой запрос. Так, если мы посмотрим на изменения, в этот раз их сильно больше стало. Что-то тут он нафигачил, но, в принципе, он отнёс это всё к вёрстке. О'кей, нажимаем applyй. Смотрим. Ура! Ура! Мы добились нашей задачи. Я очень рад. работает. Так, давай resultд mapй. Всё, мы это сделали. В общем, ну, как видите, да, то есть нужно быть терпеливым, попробовать там заново и так далее. Всё-таки ишка - это не панацея. Я рад, что произошёл как бы вот такой вот момент в процессе записи, поскольку это как раз-таки наглядно демонстрирует э принцип работы. Я надеюсь, вы поняли разницу между агентом, а, ассистентом.

Давайте перейдём теперь к деплою. Опять же, деплой возможен только в том случае, если у вас куплена подписка. Там сколько? 20-25 долларов, по-моему. А доступно это всё по кнопочке deплой. Здесь мы выбираем, в принципе, он даже позволяет нам делать этот autoscale machine configuration, то есть в целом выставляет нам довольно-таки большие, а, требования. по CPU максимальное количество машин, типа компьютеров. Давайте одну. Зачем нам больше? Нажимаем кнопочку. Так, SEOG, э, демоo. О'кей. Я так понимаю, что потом можно будет изменить ещё домен. То есть это полноценная как бы история с разработкой сайтов. Здесь, в принципе, нам не так не столь важно как бы какие команды прописаны. По умолчанию он нормально их добавляет, учитывая то, что мы работаем с реактом плюснодой, да. Вот что происходит, когда он делает build. Вид build сервер строит и start в production запускает и запускает уже скомпилированный файл. То есть, ну, всё корректно. Поэтому здесь можно не заморачиваться, можно порты настроить различные. Ну, я просто, как обычный вайпкодер, нажимаю плой. Да, мы можем здесь посмотреть, а какие приклюхи у нас происходят. То есть именно сейчас происходит процесс биода, компилирование. Здесь можно посмотреть на логи. В дальнейшем есть встроенная система аналитики, а, по тому, там сколько было переходов на сайт, ээ, всякие статусы, э, скорость запросов, настройки. А, ну вот как раз-таки, да, получается, домен можно прикрепить, что довольно-таки круто. Давайте пока посмотрим на процесс. Он займёт энное количество времени, поэтому, наверное, ставить на паузу мне нужно, чтобы ваше время не тратить. Так, ну, на самом деле, прошло секунд 40, и оно, в принципе, уже готово. То есть есть домен, переходим. Ну, вуаля, вуаля, как бы готово. И походу оно даже и работает ещё. То есть, в принципе, я постараюсь оставить данный сайт, чтобы вы могли потыкать, сравнить со своим. Ну и смотрите, вот, пожалуйста, да, мы навайпподили приложение. Ну что, скептики, как вам такой вайпкодинг? Понимаете, да? То есть это не полноценное прямо как бы там создание сайтов, то есть это всё-таки, ну, прототипирование MVP, но то, что я изначально обозначил, вот я создал это без каких-либо там написаний строчек кода, например, только через яишку. Это полноценный готовый рабочийк проект. Вы можете пользоваться принципами, которые здесь заложены вот в этом алгоритме и создавать свои приложения. Поэтому я надеюсь, вы кайфанули.

А значит, в финале данного видео я бы хотел сделать ещё одно дополнение. Кстати, я совсем забыл про свою десктопную версию. А, ну да ладно, есть и есть. Дополнение хотел сделать ещё про некоторые более продвинутые методы того, как мы можем забивать эти промты. И для этого нам придётся перейти в создание нового приложения. Значит, здесь я вам покажу то, что в целом было показано в курсе, но я считаю эти элементы важными, поэтому, а, покажу их здесь, а дальше оставлю это уже на самостоятельные эксперименты, изучения и так далее. Смотрите, мы когда создаём новые приложения, кстати, а у меня уже, видите, их несколько здесь получается. Я добавляю промт, то есть опять же это промт из оригинального а курса. Помоги мне создать интерактивные приложения для голосования и аранжирования лучших национальных парков. Приложение должно позволять пользователям голосовать за парки лицом к лицу, а затем рассчитывать рейтинг парков на основе системы L из шахмат. И приложение должно быть заметно отображать матч, показывающий общий рейтинг после голосов. То есть здесь уже идёт более интерактивная работа с приложухой, она более сложная получается. А два важных элемента, которые я хотел продемонстрировать. Первое, когда мы работаем, да, вот с созданием таких промтов, нам нужна некоторая база данных. И в качестве примера, да, если мы здесь работаем там с национальными парками, то в курсе приводилось пример с английской Википедии, где есть список национальных парков там США. А вот конкретно эта таблица есть. И прикол в том, что мы можем прямо на уровне промта спарсить. Как это работает? Я копирую данную ссылку и вставляю прямо её в промт. И теперь смотрите, какое контекстное меню мы получаем. То есть можно сделать скриншот, а можно заранее получить текстовый контент от этой страницы. Я нажимаю получить текстовый контент. И если мы посмотрим, то он, получается, спарсию всю страницу. и в частности список этих парков. То есть теперь у нас, когда он будет строить приложение, он не будет выдумывать прямо, он возьмёт это уже из существующей базы. Я надеюсь, вы понимаете, какой простор для фантазии открывается, а, да, при работе с такими методами, ну, и как бы опять же при реализации там прижух.

И как вторая прикольная опция, то есть мы можем ему добавлять наши скетчи, наш, грубо говоря, UX того, как это приложение должно выглядеть. То есть я откопировал картинку, вставлю её сюда. И вот мы можем посмотреть на эту картинку. То есть опять же она взята с курса, да, где просто есть супербазовый UX, но мы говорим, как оно вот должно выглядеть. И по факту, то есть он может уже по этому воспроизвести. То есть, видите, чем более точный запрос есть, тем и точнее мы получаем результат. В принципе, я могу там немного проспойлерить, э, как это будет выглядеть в итоге, да, если пробуем вот этот бить. Ну и вот примерно такое он вам в итоге выдаст, да? То есть тут, конечно же, нужно уже доработать, но опять же ссылочка на курс будет в описании. вы самостоятельно экспериментируете, проделаете все эти шаги, попробуйте. И я считаю очень важным, чтобы вы погружались в целом в работу с новыми технологиями. А потому что это действительно очень важно наш Яка. Они очень быстро прогрессируют и важно оставаться как бы на плаву, понимая принцип того, как строится приложение, потому что, ну, как минимум, это ускоряет вас и делает вас более конкурентоспособным. На этом я вас благодарю. за внимание и увидимся. [музыка] เ