Cursor AI Full Guide To Vibe Coding Apps

Как мне взять приложение, которое я полностью только что создал в Google AI Studio, и, не преувеличивая, за один день смог создать всю целевую страницу, выбрать свой элитный, классический элитный, ковбойский элитный, неоновый элитный, настроить монетизацию с указанием стоимости использования платформы для миниатюр, эффективно настроить ценовые уровни, настроить вход и регистрацию, создать весь фронтенд для ценности продукта, например, загрузить эту миниатюру и сказать: «Поместите меня в фон Call of Duty». Call of Duty. У нас есть Лейт, работающий над изображением. Бум. Бургер-битва Call of Duty.

Кроме того, я создал страницу настроек. Это не шутка, ребята. Аккаунт, элитный, лаборатория, биллинг, использование, возможности, коннекторы, конфиденциальность. Это еще не конец. Есть еще. Это как Опра Уинфри сейчас. Есть еще. Обновить план. Я создал все это за один день. Позвольте мне показать вам, как.

Видео, которое вы собираетесь посмотреть прямо сейчас, я не знаю, сколько оно будет длиться, но это будет одно из самых глубоких и ценных видео, когда дело дойдет до фронтенд-разработки, которое вы когда-либо увидите за всю свою жизнь. И я так уверенно это говорю, потому что вижу, сколько сопротивления я получаю в этой серии, когда говорят: «О да, полностью вайб-кодинг». Поверьте мне, ребята. Я собираюсь рассмотреть три основные вещи в этом видео, которые дадут вам четкое представление о том, что вы буквально один из самых ранних из самых ранних новаторов в этой новой эре кодинга. Три основные вещи будут: контекст того, сколько времени изначально заняло бы то, что я только что показал вам. Второе: как подходить к фронтенд-разработке в эту новую эру. И третье: все уроки и методы, которые я использую для получения таких выходных данных кода. Полностью вайбирую с этим.

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

С возвращением, ребята, к 4-му эпизоду этой серии. У меня было первоначальное намерение перейти к странице регистрации дальше, но я буду честен с вами. Когда я кодил этот фронтенд и создавал его с помощью Cursor AI, я просто искренне пришел к осознанию того, что это на годы опережает то, каким я изначально представлял себе эту серию. Я знал, что с Google AI Studio мы сможем вайб-кодить ценность, что было прорывом. Ценность приложения — это то, как вы получаете деньги или даете причину кому-то зайти на ваш сайт. Это было круто. Вот почему я начал серию. Каким-то образом, будь то судьба или путаница, но Cursor 2.0 вышел буквально во время создания этой серии, и я обнаружил, что использую Cursor 2.0 и эти новые методы, и вы только что видели с самого начала. Я даже не показал вам все, что создал за день, ребята. Это не шутка. Нет никакого способа, чтобы этот парень создал это за день. Да, пул-реквест. Перейдите к ветке фронтенда, которую мы создали. Вы можете буквально увидеть, если я спущусь сюда, у меня было 15 коммитов. Все эти коммиты были вчера. Я не знаю точного времени, которое я работал над этим. Потребовались ли часы? Конечно. Я думаю, чтобы достичь этой стадии, мне потребовалось около восьми часов сосредоточенной, глубокой работы, возможно, даже 10 или 12. Я не уверен в деталях. Когда я работаю, я просто работаю. Я не ухожу до 9 или 10 вечера.

Поэтому первое, что я хочу рассмотреть в этом довольно большом видео, ребята, вы сейчас получаете секретный соус. По сути, я даю вам возможность купить опционные контракты на тысячу долларов в пред-IPO компании, которая, как вы знаете, достигнет цены в 10 долларов, а опционные контракты стоят доллар. Следовательно, за каждый доллар выше этого за тысячу вы зарабатываете сто тысяч долларов. Поищите это в AI, если вы не понимаете, о чем я говорю. Мы просто очень рано.

Поэтому позвольте мне дать вам контекст того, сколько времени изначально заняло бы создание всех этих страниц и всех этих механик. Вот контекст, ребята. Я управлял другой программной компанией, и эта программная компания называлась bumpups.com AI video model. Я кодил это с партнером, и мы делали это по старинке, где нужно было писать код, получать небольшую помощь от AI и продолжать. Рад ли я, что сделал это таким образом? Конечно, потому что это дало мне основу, чтобы преподавать такие вещи очень упрощенным способом, чтобы вы могли действительно понять, что здесь происходит. Это я. У меня огонь в руке. Это пять инженеров, с которыми я работал. Мы проводили программу стажировки, где ежеквартально мы принимали разных людей, где ежеквартально мы размещали вакансии на LinkedIn, говоря: «Привет, нам нужны фронтенд-инженеры, заинтересованные в неоплачиваемой стажировке. Нам нужны бэкенд-инженеры, заинтересованные в неоплачиваемой стажировке». Побочная заметка: у нас были тысячи кандидатов. Это немного безумно, но суть в том, что к тому времени, когда мы создали весь процесс проверки, прошли весь процесс собеседования и смогли заключить контракты с этими людьми, это был навык, который я приобрел. Какой был навык, Корбин? Способность ассоциировать труд для приложения с людьми. Например, или то есть. Я вижу ваши комментарии. Хорошо. То есть. Например. Я буду продолжать говорить «например», чтобы разозлить вас. Просто успокойтесь. Хорошо. Суть в том, что я бы дал труд этому человеку. Итак, то есть. Например, мы идем на страницу настроек. Позвольте мне показать вам страницу настроек здесь. Эта страница настроек. Итак, вход, продолжить. Не волнуйтесь, я покажу вам все методы, которыми я достиг этой точки.

Итак, идея будет такой: «Эй, нам нужно переработать страницу настроек. Мне нужно, чтобы ты закодил новую страницу настроек, чтобы она выглядела так». Это могло бы занять либо двух инженеров, и даже если бы это был один инженер, возможно, это могло бы быть сделано за две недели, если бы нам повезло. В реальности это заняло бы месяц работы. Конечно, эти стажеры были неоплачиваемыми. Поэтому это была скорее ситуация обучения, а не «Эй, я даю тебе W2, ты получаешь зарплату. Сделай работу быстро». Но я могу сказать вам, что в разработке программного обеспечения мы делаем кое-что конкретное, называемое спринтами. Спринт — это когда мы определяем задачу, например, создать пользовательский интерфейс страницы настроек, сделать его лучше. Итак, пользовательский интерфейс настроек — это задача, а спринт в разработке — это две недели работы.

Итак, что здесь происходит, так это то, что как инженер в команде, и вы бы использовали программное обеспечение для управления, такое как Jira, Jira позволял вам табулировать такие задачи. Итак, задача — пользовательский интерфейс настроек. Вы бы дали ее инженеру. «Эй, инженер, и у тебя есть две недели, чтобы справиться с этим». И тогда типичный рабочий процесс заключается в том, что этот инженер, я должен был сделать их, я полагаю, мы все ковбои, дикий запад. Этот инженер общался бы со мной, если бы у него возникли проблемы, потребовалось обучение или, по сути, фундаментально нужно было знать, как сделать что-то определенное в коде. Наличие стажеров было отличным опытом, поскольку часть ценности, которую вы получаете от стажеров, заключается в том, что вы учитесь друг у друга. Очень здорово работать с другими людьми и исследовать их творческий ум. Мне это нравится. Но я могу сказать вам, что для меня, чтобы запросить ту же самую страницу настроек, которую я сделал здесь, используя этот метод, это заняло бы 2-3 недели простоя. А я создал это примерно за 30 минут, используя этот метод.

Я не хочу слишком зацикливаться на этой теме, когда речь идет об исходном времени и новом времени. Теперь позвольте мне оставить вам две последние вещи по этой теме. Первое: многие из вас сейчас спрашивают себя: «Корбин, если это правда, то в чем теперь настоящий навык, когда дело доходит до кодинга?» Настоящий навык — это быть этим человеком здесь, человеком, который знает, какой должна быть следующая задача. Позвольте мне просто донести до вас, что я имею в виду, с этим постом, который я создал вчера. Я сказал что-то вроде того, что мы находимся в новой эре кодинга, потому что мы действительно находимся. И если кто-то говорит вам иначе, то, что происходит сейчас, это то, что у многих разработчиков есть эго, связанное с тем, чтобы быть разработчиком, где это странный вид гейткипинга, где это вроде как «нет, никто не может кодить, потому что если все могут кодить, я не особенный». Вот что происходит сейчас. Но это нормально, потому что, по крайней мере, вы можете получить доступ к этой информации намного раньше, прежде чем мейнстрим поймет, что «эй, подождите, кто-то действительно может кодить». Я делаю это. Посмотрите на этот ответ, который я получил на один из моих других постов. «Можете ли вы дать обзор того, какую задачу вы ему поставили? Это бы очень помогло». Бум. Вот и все. Это недостающий кусочек головоломки. Понимание того, как быть старшим инженером и знать, какую задачу поставить приложению дальше. Вот и все. А старый способ научиться такому набору навыков заключался в том, что вы разрабатывали годами. Так что вы действительно понимаете с точки зрения полного стека, что дальше. Или, альтернативно, вы были в положении, когда вы управляли командой из пяти инженеров, трех инженеров, 10 инженеров, и вы знаете, как распределять труд. У вас есть мой опыт.

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

Итак, позвольте мне перейти к моему приложению, Thumbo Studio. Также, кстати, некоторые из вас, кто смотрит до этого момента, говорят: «Хорошо, этот парень просто болтает». Я знаю, что я болтаю, но мне нужно предоставить эту информацию, чтобы вы действительно поняли, на что вы наткнулись. Не волнуйтесь. В уроках и методах я покажу вам все промпты, которые я использовал в вайб-кодинге. Я покажу вам все методы. Я покажу вам все. Вам просто нужно понять на фундаментальном уровне, что здесь происходит, чтобы вы были просто золотыми.

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

Теперь позвольте мне привести очень конкретный пример, потому что я знаю, что это звучит как куча жаргона разработчиков, и вы говорите: «Этот парень звучит очень расплывчато». Верно? Сейчас, когда я изначально собирался создать миниатюру, если я прокручу вниз до «выберите скорость вашей ламы», верно? У вас есть три разных уровня. И я могу сделать еще одно видео об этой монетизации. На самом деле, будет еще одно видео о Корбине, как ты оказался на цене в 192 доллара и 24 доллара за рабочее пространство, что может измениться, когда я сделаю еще расчеты, но я сделаю еще одно видео об этом. Не волнуйтесь, это будет позже в серии, когда я глубоко погружусь в детали, чтобы вы знали, как оценивать свой продукт. Это не цель этого видео. Цель этого видео — унаследованные пользователи и что это вообще означает при создании нашего фронтенда. Изначально я создавал это приложение для одного человека: либо бесплатно, студия или агентство. По мере того, как я продолжал строить, я понял: «Ну, если бы я когда-нибудь хотел расширить это, чтобы агентство на Fiverr, Upwork сказало: «Эй, эта платформа прекрасна, но мне нужно около пяти мест для всех разных редакторов в моей команде и моем бизнесе, как для полноценного бизнеса, использующего это программное обеспечение». Я понял: «О, мне нужно создать это, чтобы поддерживать то, что называется рабочими пространствами, или возможность поддерживать командные планы».

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

Чтобы добавить эту дополнительную функцию рабочего пространства, если бы это был только один человек сначала, этому человеку, который был унаследованным пользователем, было бы чрезвычайно болезненно для меня мигрировать его для обработки нового типа структуры данных для обработки рабочих пространств. Поэтому, если бы я изначально выбрал версию 1, создавая это без идеи того, что такое унаследованный пользователь, что это означает, где один человек выбирал бы между тремя разными планами, план A, план B, план C. И просто потому, что это примерно Хэллоуин, ABC, BC, C, это оранжевое. Это оранжевое. То, что я собираюсь сказать сейчас, если вы не имеете никакого опыта в разработке, покажется очень запутанным, просто оставайтесь со мной. Мне нужно объяснить это вам.

Итак, если к концу моего объяснения вы все еще будете сбиты с толку, тогда я хочу, чтобы вы сделали TL;DR: вам нужно что-то вроде мест для вашей модели подписки? Вам понадобятся эти дополнительные уровни? Что я пытаюсь сказать здесь, так это MVP1, совет, который я бы дал кому-то год или два назад, — это минимализм. Просто выпустите продукт, просто покажите ценность, продвигайтесь. Нет, нет, нет, нет, нет. С этим новым способом кодинга я хочу, чтобы вы создали свой полный продукт из-за того, насколько быстро вы можете это сделать.

Итак, я создал весь этот фронтенд за день, ребята. Поэтому первоначальный путь был бы таким. Вот как мы храним данные. Хорошо. Итак, у нас есть глобальный документ, верхний уровень. Это был бы UID, уникальный идентификатор. Итак, что вам нужно понять о UID, это просто случайный набор случайного текста. И как мы связываем его с нашим пользователем здесь. Итак, они регистрируются через Google. Я люблю Google. Они регистрируются через Google. У нас не только создается UID при регистрации, но и их электронная почта. Так что другой способ взглянуть на UID — это электронная почта, потому что два человека не могут иметь одинаковый адрес электронной почты. Следовательно, мы знаем, что можем хранить данные по этому пути, потому что мы знаем, что этот человек — этот человек из-за электронной почты и UID. Суть в том, что уникальный идентификатор означает, что если у вас есть 50 000 пользователей на вашей платформе, все 50 000 будут иметь свой собственный пользовательский случайный набор символов, автоматически созданный. Вам не нужно беспокоиться об этом коде. Он будет автоматически создан. UID, а затем мы просто создадим соответствующие документы здесь, это нормально, это удивительно, красиво, документы, когда я говорю документы, это просто другой способ сказать, что это точка данных, которая что-то хранит, хорошо.

Суть в том, что если бы я пошел по своему первоначальному пути, где был бы один пользователь, один пользователь в студии, я бы пропал. Причина в том, что я хочу, чтобы вы заметили что-то. Посмотрите на этот URL: workspaces, WSC, client, drops, studio. Вы поймете, что каждое рабочее пространство будет иметь свою собственную специфическую точку данных, связанную с документами, что означает, что если бы я пошел по первоначальному пути здесь, просто /studio, что было бы примером, это была бы абсолютная головная боль, потому что теперь мне не придется транспортировать этого унаследованного пользователя к новому пути данных здесь, который был бы путем данных 2. Теперь я просто набрасываю идеи. Я еще не знаю деталей пути данных. Нам придется работать над этим вместе, и я объясню, почему я делаю то, что делаю. У нас все еще есть глобальный документ пользователя UID, поэтому мы знаем, кто такой Тим здесь. Привет, Тим. Тебе нравится Кэти Тим и UID, но этот путь будет совершенно другим. Совершенно другим. Он может начинаться с верхнего уровня рабочих пространств и углубляться оттуда. И мы будем продолжать.

TL;DR: создайте весь свой фронтенд. Потратьте время на это, потому что на самом деле, работа, которую я только что показал вам здесь, если бы я собирался кодить это по старинке, все, что я только что показал вам здесь, чувак, я даже не могу дать вам число. Трудно оценить. Я бы сказал, как минимум от трех до четырех недель. И это при условии, что у вас полное понимание фронтенд-кодинга и вы действительно знаете, как все это взаимосвязано. Я сделал это менее чем за 10 часов, около того. Мы в новой эре. Это решает одну проблему. TL;DR: унаследованные пользователи, если вы не понимаете, что я там сказал, не волнуйтесь. Что я, по сути, хочу, чтобы вы вынесли из всего, о чем я болтал, это создать свой фронтенд. Потратьте время здесь, потому что последнее, что вы хотите сделать в будущем вашего приложения, — как я это знаю? Как этот парень это знает? Потому что, поверьте мне, с bumpups мы прошли три или четыре разных этапа, когда нам приходилось мигрировать унаследованных пользователей, тысячи учетных записей разработчиков или, скорее, тысячи учетных записей bumpups. Нам пришлось мигрировать их в новые структуры путей данных. Это не только ломает ваш фронтенд, вам приходится перестраивать фронтенд. Это не только ломает ваш бэкенд, вам приходится перестраивать ваш бэкенд. Вам приходится писать пользовательский скрипт на Python, чтобы даже обрабатывать все перемещение данных. Это не весело.

Поэтому подойдите к этой первой фазе с полной ясностью всего, что, по вашему мнению, вам понадобится во фронтенде. Да, вы что-то упустите. Я что-то упущу. Но к тому времени, когда вы упустите это и вам придется мигрировать унаследованного пользователя, потенциально вы зайдете так далеко в кроличью нору разработки приложения, что скажете: «Я дошел так далеко. Я могу научиться следующему шагу».

Хорошо, давайте перейдем к сути. Уроки и методы. Как мы это сделали? Это абсолютно безумно. Итак, пока я вчера занимался этой разработкой, я сделал кучу заметок. У меня есть стикер здесь. Я пройдусь по всем своим заметкам шаг за шагом, по разным методам, которые я использовал. Одна вещь, которую я хочу сказать, ребята: дайте мне знать в комментариях. Дайте мне знать в описании сообщества школы ниже, бесплатно. Могут быть вещи, где я показываю вам одну из вещей, которую я хотел показать, и вы говорите: «Корбин, как, черт возьми, ты сделал всплывающее окно здесь, а затем этот маленький Лейт и все эти разные вещи?» Я могу рассказать о вещах, которые в моей голове не так уж глубоки, но для вас довольно глубоки. Так что дайте мне знать в комментариях.

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

Итак, мы просто собираемся перейти в нижний левый угол, нажать «терминал» и просто ввести `npm run dev`. Просто запомните эту команду, нажмите ее. Мы запустим ее. Теперь она переходит на localhost:3000. Все в порядке. Это то, что я предлагаю на данный момент. Очевидно, вы знаете, через год они, вероятно, исправят странности вокруг этого, но имейте это в виду.

Далее, эти значки. Я превращу Cursor AI в приятный маленький запрос. И смотрите. Я просто введу этот промпт. Мне нужны значки с открытым исходным кодом, которые совершенно бесплатны. Какие есть хорошие библиотеки для профессионального приложения? Что я хочу, чтобы вы отметили здесь, это то, что я говорю «с открытым исходным кодом». Это будет ценный термин для вайб-кодинга, когда вы хотите интегрировать сторонний API или, альтернативно, такую библиотеку, и подразумевать, что если вы ее используете, нет никаких обязательств. Другим отличным примером этого является что-то под названием Y Finance, я полагаю, это библиотека Python. Она позволяет нам бесплатно получать данные о акциях по всему рынку, что очень круто. Вы знаете, мы все любим бесплатные вещи.

Еще одна вещь, которую я хочу, чтобы вы заметили, это библиотеки. Вам не обязательно использовать эту терминологию. Совершенно бесплатно. Не совсем 100% необходимо, но как только вы получите результат, используйте этот режим запроса. Это очень мощно. И задавайте вопросы, которые вас интересуют. Задавайте вопросы вроде: «Это кажется очень крутым. Вы уверены, что они не придут за мной, если это станет приложением стоимостью миллион долларов?» И вы получите свои ответы. Посмотрите на это. Вы знаете, например, тот, который я использую, — Lucid, и он говорит «текущий». Довольно умно, правда? И я, по сути, просто сказал: «Установите значки Lucid и замените все». Нажмите Enter. Но, очевидно, вы должны быть в режиме агента, верно? Вы не можете просто быть запросом. И это сработало. Но одна вещь, которую вам нужно узнать, это то, что когда вы устанавливаете такие библиотеки, будь то значки с открытым исходным кодом или сторонний API, что станет более понятным, когда мы начнем эту серию, вам нужно перезапустить среду разработки. И что такое ваша среда разработки, это тот localhost:3000. Эта штука, работающая локально на вашем компьютере. Если вы когда-нибудь задавались вопросом, что вообще означает «локально на вашем компьютере», это означает, что если бы ваш компьютер взорвался прямо сейчас, сервер был бы мертв, потому что он работает на вашем оборудовании, вашем реальном компьютере. Нет интернета. Я мог бы кодить это в самолете, потому что я не хочу платить за этот Wi-Fi. Это все еще кажется слишком дорогим. Просто дайте нам бесплатный Wi-Fi на самолетах. Хорошо, дайте бесплатно.

Что вы хотите сделать, так это когда вы устанавливаете пакет, подобный этому, вы перейдете в терминал, который вы только что открыли и создали, и введете `npm run dev`. Вы нажмете Ctrl+C. Мы остановим сервер здесь. Перезагрузите. Он сломан. Используйте клавиши со стрелками на компьютере, поднимитесь и снова нажмите `npm run dev`. Перезапустите сервер после установки пакета. И причина, по которой вы это делаете, заключается в том, что всякий раз, когда вы снова запускаете команду сервера `npm run dev`, вы, по сути, пересобираете пакеты. Что я имею в виду под пакетами, так это то, что вы прокручиваете вниз сюда, `package-lock.json`, `package.json`. Когда вы устанавливаете что-то новое, такое как Lucid React или значки здесь, вы можете увидеть, что версии здесь, а Lucid React здесь. Это ваши значки. По сути, вы пытаетесь играть в многопользовательскую игру Call of Duty, но не установили обновление. Так что установите обновление, и у вас не будет ошибок. Фундаментально то, что вы только что узнали, будет применяться к любому типу библиотеки с открытым исходным кодом, которую вы когда-либо установите в своем приложении.

Что я призываю вас сделать, так это потратить время на поиск того, что такое библиотека с открытым исходным кодом. Что означает открытый исходный код? Какие потенциальные вещи вы можете использовать с открытым исходным кодом в своем конкретном приложении? Например, что именно вы строите, Корбин? Я строю X. Хорошо, возьмите это в чат с ИИ и скажите: «Привет, я строю X». Какие библиотеки с открытым исходным кодом, вероятно, будут хорошим выбором здесь? Что вы обнаружите, что было действительно круто, когда я создавал другие приложения, так это то, что многое из того, за что вы платите онлайн, может быть интегрировано в ваше приложение совершенно бесплатно.

Итак, что я имею в виду под этим, так это то, что часто, когда человек платит за услугу API, такую как API OpenAI, например, если я хочу интегрировать искусственный интеллект в приложение, теоретически я мог бы запустить свой собственный сервер. Теоретически я мог бы скачать эту модель и запустить ее локально на своем сервере или, альтернативно, использовать что-то вроде GCP и запустить эту LLM, которую я скачал, на GCP и обращаться к этим конечным точкам, потому что я владею этой моделью. Почему люди этого не делают, Корбин? Из-за того, насколько эти компании по искусственному интеллекту масштабировали свою инфраструктуру API, так что если ваше приложение действительно взорвется, вы сможете опереться на технологии OpenAI. Это как, почему нет конкурента AWS GCP на самом деле? Потому что они уже построили все серверные помещения. Нет смысла. Просто стойте на плечах гигантов.

Следующее, что мы узнаем, это то, как я подхожу к ценообразованию. И я просто дам очень краткое, очень быстрое объяснение, почему я подошел к ценообразованию так, как я это сделал, потому что у нас будет еще один эпизод, посвященный этому. Проще говоря, вам просто нужно понять свои основные затраты. Поэтому вы переходите в режим запроса. Опять же, моя серия будет посвящена бэкенду Firebase. Поэтому я связан и коррелирован с ценами Firebase. Вы используете Superbase? Вы используете AWS? Я не знаю, что вы используете. Что бы вы ни использовали, вам нужно уточнить это. Вы знаете, я буду использовать бэкенд XYZ. Как только вы это сделаете, вы получите контекст. Например, я перехожу к ценам Firebase. Вы знаете, что действительно круто в создании программных продуктов, потому что эти крупные облачные провайдеры очень заинтересованы в том, чтобы вы их использовали, потому что на самом деле все, что им нужно сделать, это запустить сервер. Они просто платят за энергию, ребята, что безумно. И, очевидно, у них есть куча инфраструктуры, построенной вокруг этого, так что она может справляться с вещами в масштабе. Но есть причина, по которой такие вещи, как Firebase, не имеют стоимости в плане Spark, и он невероятно щедр. Вы прокручиваете вниз сюда, вы получаете доступ к таким вещам, как 50 тысяч чтений в день, что вы, возможно, не поймете, что это значит прямо сейчас, но вы поймете, что это значит довольно скоро, и вы скажете: «Вау, 50 тысяч, Корбин?» На самом деле, вам нужно понять, что при бесплатном плане Firebase, чтобы вы могли запустить приложение, которое, вероятно, будет использовать около 5 тысяч MMR, может быть, 6 тысяч. Это действительно зависит от того, насколько интенсивно вы используете бэкенд. Я имею в виду, мы смотрим на стоимость, возможно, около 100 долларов, 150 долларов в облачной обработке, даже того меньше. Так что вам нужно понимать облачную обработку и эти вещи с бэкендом. Люди, как всегда, борются за Superbase, Firebase, как настоящие люди просто строят. Но мне все равно. Выбирайте, что хотите. Используйте, что хотите. Я использую Firebase в этом руководстве, во всей этой серии, потому что мы начали с Google AI Studio, а Google AI Studio, очевидно, является продуктом Google. Поэтому в долгосрочной перспективе в этой серии, когда вы будете смотреть ее, вы, вероятно, увидите более простую интеграцию. Но я призываю вас не делать эту простую интеграцию в Google AI Studio. Я призываю вас перенести ее в IDE, такую как Cursor, чтобы вы действительно владели кодом.

Итак, после того, как вы определили, какой бэкенд вы используете, вам нужно определить службы, которые вы будете использовать. Что это значит, вы знаете, когда мы создаем приложение Google AI Studio, мы предполагаем, что вы используете API Gemini. Как вы используете API Gemini? Если вы даже не знаете, как вы используете свой API Gemini, то просто сделайте это. Мы введем промпт: «Я хочу, чтобы вы посмотрели все API, которые я использую, и получили соответствующую стоимость для них». Как только мы узнаем это, мы хотим знать стоимость одной правки с учетом дискового пространства, вызовов функций и т. д.

Теперь я не знаю, что делает ваше приложение или какую ценность вы предоставляете. Но то, что я даю, это то, что у нас есть приятная маленькая система стогов сена. Изначально это были кредиты, но, честно говоря, у кредитов такое неприятное название в программном обеспечении. Я не собираюсь начинать, как если бы я вайб-кодил эту штуку, и мне было весело, где вы можете буквально выбрать свой элитный. Если вы даже не знаете, кто такой элитный, подождите, подождите, подождите, подождите. Есть причина, по которой этот свитер на мне. Все вы, OG, которые смотрят это, знают этот свитер. Все новые люди, которые только что нашли меня сейчас. О, это большой свитер. Если это свитер с ламой в видео, это большое дело. Это Лейт, Лама. Он OG. Посмотрите на баннер моего канала на YouTube. Лейт на моем плече. Побочная заметка: вы знаете, его костюмы, и что круто, так это то, что, вы знаете, стример Elite, Streamer Elite отредактирует видео для вас. Но я не хочу никакой платы. Мне все равно. Я делаю «Привет, э-э, так же, как Zapier делает запы, просто брендинг». Один стог сена = одна правка изображения элитного. Одна правка изображения элитного стоит мне денег на бэкенде. Это вызов Firebase для фактического запуска функции, чтобы я мог вызвать GCP и сказать: «Привет, мне нужно, чтобы ты запустил для меня какой-то код». Вызов Firebase. Это стоит денег с редактором изображений Gemini, Gemini Flash Image, Gemini API Flash, как бы ни называлась модель. Они просто называют их сумасшедшими вещами в наши дни. Это стоит денег.

Итак, я провел расчеты. Я понимаю, что, по сути, какова скорость сгорания для одной правки? Поэтому мне нужно найти ценность того, чем будет один стог сена для потребителя. Ваша маржа здесь, что мы понимаем о марже? Поэтому, скажем, одна правка изображения элитного стоит мне 1 цент. Все, что учитывается, включая хранение потенциальных данных из миниатюры. Вот почему я упоминаю дисковое пространство. Вот почему уровни даже определяют дисковое пространство. Вам может даже не понадобиться хранилище для вашей платформы. Причина, по которой мне нужно хранилище, заключается в том, что я буду хранить данные изображений. Курсор, не сейчас. Нет, не говорите мне дать обновление прямо сейчас. Хорошо. Позже. Суть в том, что как только вы поймете и пройдете этот маленький мыслительный процесс с моделью ИИ, которая сможет контекстуализировать весь ваш репозиторий. Корбин, какая хорошая модель для использования? О, боже мой. Это Рождество? Это мой день рождения? Я даже не знаю. Что-то удивительное. Посмотрите на эту модель, ребята. Вы можете использовать Auto, вы можете использовать Claude. У меня были безумные результаты с GBT5 Codexi. Так что, если вы когда-нибудь столкнетесь с проблемами, переключитесь на нее. Эта штука сумасшедшая. Идея в том, что вы ищете маржу здесь для вашей основной ценности. Поэтому, если одна правка изображения элитного после выяснения всей этой информации будет стоить мне цент, тогда работайте над своей маржой. Вы хотите взимать 10 центов за стог сена? Вы хотите взимать 5 центов за стог сена? Какая здоровая маржа, Корбин? Честно говоря, это действительно зависит. Я бы посоветовал вам, если это ваш первый раз, когда вы запускаете и создаете приложение, вам не нужно стремиться к 90% 80% марже здесь. Стремитесь к 60. Стремитесь к 50% марже. Вам просто нужно создать достаточно ценности, чтобы оправдать использование приложения.

Итак, для меня маржа, на которую я нацеливаюсь, я думаю, составляет около, если я правильно помню, около 70% маржи. Поэтому существует целая система кредитов, верно? Так что пользователь может заплатить мне 20 долларов в месяц, а затем за 250 стогов сена, что эквивалентно примерно 31 миниатюре, я сделал расчеты. Они также могут сказать: «Знаете что, я просто хочу быть на бесплатном уровне». Бесплатные уровни всегда важны. Вы должны дать пользователю, особенно в программном обеспечении, возможность просто попробовать продукт, потому что они могут попробовать его и сказать: «Это мусор». И если они заплатили за продукт, вы получите раздражающее, очень раздражающее письмо с возвратом средств. Так что лучше просто позволить им использовать его. Позвольте им сами себя отсеять из всей системы. Последнее, что вам нужно, — это куча писем с просьбой: «Мне нужен возврат средств». Просто используйте 0 долларов. Все в порядке.

У нас также есть немного элитных стогов сена. Это разовые покупки. Я сделаю шаг назад от некоторой информации, которую я сказал год назад, когда речь шла о разнице между подпиской и разовой покупкой. И, возможно, вам следует просто отдавать приоритет подписке. Шаг назад, который я делаю, — это приоритет уровней, приоритет ясности, но дайте возможность разовых покупок, но просто сделайте намерение за этим чрезвычайно ясным. 60 дней, эти стоги сена истекают. Их нет. Они сгорели. Лейт не может их съесть. Эй, Лейт, вкусные пакеты. Лейт не может их съесть. И единственная причина, по которой я добавляю это, заключается в том, что на самом деле многие люди могут испугаться подписаться за 19 долларов. Я знаю, что это пугающая цифра. Так что я знаю, что многие люди будут использовать это бесплатно. И я уже знаю из своего опыта использования, потому что я делаю миниатюры уже 2,5 года. Я думаю: «Вау». Вы знаете, что продукт хорош, когда вы его используете. Просто скажем так. Вы знаете, что продукт хорош. Если вы кодите свое программное обеспечение и когда-нибудь дойдете до точки, когда скажете: «Это вроде как хорошо, но я не думаю, что буду использовать это. Может быть, я не целевой клиент». Вы уже облажались. Вы уже облажались. Вы хотите создать программный продукт, который вы бы использовали, потому что если бы вы его использовали, вы, вероятно, найдете тысячу других людей, которые, вероятно, захотят его использовать. Это ваша канарейка в угольной шахте. Ваша канарейка мертва, если даже разработчик не готов использовать продукт. Я использовал его, и я подумал: «Да, это следующий уровень». Для моего 2,5-летнего опыта создания просто миниатюр, это следующий уровень. Поэтому я знаю, что многие люди будут на бесплатном уровне. Им не нравятся подписки, но они определенно заплатят 8 долларов за 50 стогов сена или 25 долларов за 200, потому что они знают, что, возможно, им не нужно делать 30 миниатюр, но, возможно, они хотят сделать 12, но они не хотят покупать подписку, они просто хотят заплатить мне восемь долларов.

То, как вы упаковываете, что очень важно, если вы когда-либо делаете услугу разовой покупки в своем программном обеспечении, вы хотите завысить цену на них. Вы хотите обескуражить разовые покупки. Цель этих — просто получить деньги, которых не было бы, потому что пользователь уже был отпугнут подпиской. Поэтому, если я правильно помню, я думаю, моя наценка на это составляет около 120%. Это какое-то нелепое число. Я делаю это намеренно, потому что я думаю: «Нет, не покупайте пакет быстрого исправления. Просто заплатите 20 долларов, и все будет хорошо». Имейте это в виду.

Давайте рассмотрим следующий урок или метод. Итак, вы заметите, что если я прокручу вниз сюда, некоторые компоненты имеют заполнитель. Заполнитель кадр 1, заполнитель кадр 2 и т. д. Вы также заметите здесь, что да, теперь есть миниатюра, но изначально это был заполнитель. Итак, что это значит для вас? Это означает, что когда мы кодим здесь, и я очень рекомендую, если вы планируете выполнять очень большие задачи, я покажу вам некоторые сумасшедшие рабочие процессы агентов довольно скоро. Вы выполняете очень большие задачи, всегда сначала говорите с моделью. Не позволяйте агенту просто начинать. Получите контекст. Действительно поймите, что вы собираетесь ему сказать. Идея в том, что если вы скажете модели ИИ закодить всю вашу целевую страницу, закодить всю мою целевую страницу, а затем, знаете ли, просто вайб-кодить ее. Я хочу, чтобы она выглядела как Apple, или дайте мне темную тему, или сделайте ее похожей на bumpups.com. Как бы то ни было, вайб-кодируйте ее.

Что фундаментально чрезвычайно важно сделать, так это добавить это в ваш промпт. Все, что требует изображения, текста и т. д., просто используйте заполнители и фиктивные данные. Если вы не добавите эту строку, модель ИИ подойдет к карточке, подобной этой, и скажет: «О, это будет хорошая карточка». Мы не можем этого сделать, потому что у нас нет изображения. Буквально, позвольте этой штуке сойти с ума. Отпустите ее. Сняв поводок. Оставив эту строку здесь, она даст вам эти безумные типы пользовательских интерфейсов, и она даст вам эти пользовательские интерфейсы из-за того, что она знает, что если она столкнется с такой ситуацией, например, где она скажет: «Мы бы изначально закодили это, но мы не можем, потому что у нас нет соответствующего изображения пользователя». Ну, теперь она закодит это и просто даст заполнитель. И как добавить к заполнителю? Ну, добавьте изображение в свой проект. Что я люблю делать, так это создать папку под названием `assets`, `images`, `organization`, и поместить туда соответствующее изображение. И тогда, когда у вас есть изображение, вы, по сути, вернетесь сюда, сделаете снимок этого прямо здесь и скажете: «Эй, для заполнителя кадра 1, кадра 2, кадра 3, пожалуйста, и я могу буквально показать вам. Перейдите в эту папку `images`. `images`. Вы видите те, которые названы XYZ? Используйте их для. Видите те, которые названы XYZ. Если я смогу напечатать, ребята, XYZ. Используйте их для кадра 1. Кадра 2. Кадра 3».

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

Итак, то, что вы только что узнали, это использовать и использовать фиктивные данные во фронтенде, особенно в начале. И вот почему я говорил вам много раз, действительно потратьте время на свой фронтенд. Это сделает процесс бэкенда намного проще. Давайте узнаем еще кое-что. Следующее, что мы можем узнать, это вот это.

Лично я делаю прыжки. Я делаю ламу. Я добавил кучу других классных вещей в это программное обеспечение. Почему я делаю Leap the Llama? Потому что я могу. И это часть веселья того, что такое вайб-кодинг сейчас. Это все о творчестве. На самом деле, крупные компании, вероятно, захотят выбрать такой сумасшедший брендинг, потому что вы работаете с несколькими инженерами, и сразу же ваша первая проблема заключается в том, что если вы работаете с шестью инженерами, шесть инженеров могут иметь шесть разных способов подхода к брендингу. Если вы один человек, один инженер в этой новой эре кодинга, вы можете делать все, что хотите. Вы — исполнительный руководитель. Поэтому, вероятно, это будет мой значок. Вероятно, это будет маленький персонаж. Leth the Llama — это то, что есть. Одна забавная вещь заключалась в том, что у меня было первоначальное намерение, знаете ли, у меня есть Leth the Llama. Я хочу добавить Leth the Llama по всему приложению, страницу входа и т. д. Но то, как я хотел это сделать, было вроде как дать Лейту разные костюмы, как костюм для вечеринки. Поэтому я перешел сюда и, по сути, просто сказал: «Создай фиктивный компонент. Дай мне около пяти разных дизайнов костюмов для 8-битной ламы Лейт и просто дай мне их увидеть». Он сделал это, и я просматривал их, и когда я говорю «фиктивный», вот что я имею в виду.

Итак, вот один пример, верно? Итак, я сказал: «Знаете, мне нужны разные варианты ковбойской шляпы». Я создал этот компонент. Я заставил ИИ создать этот компонент исключительно для того, чтобы я мог посмотреть на него и сказать: «Хорошо, мне нравится вариант 3. Давайте возьмем вариант 3 для всего приложения». Теперь удалите этот код. Я буквально создал этот код только для того, чтобы выбрать ковбойскую шляпу для Лейта. Но это то, чему вы можете научиться. Каждый отдельный фрагмент кода не обязательно должен быть в вашем конечном продукте приложения. Вы можете попасть в кроличьи норы, где в один момент я попал в кроличью нору, чтобы найти свою цветовую палитру пользовательского интерфейса. Поэтому я бы сделал что-то вроде «агент» или «запрос». Я бы сказал: «Дайте мне пять разных цветовых палитр, которые я могу попробовать». И что я имею в виду под цветовой палитрой, ребята, это, знаете ли, этот фиолетовый, этот темно-синий, как все это окрашивание, верно? Он дал мне пять разных вариантов. Был неоновый, более светлая тема. Я буквально просто углубился в кроличью нору и сказал: «Знаете что, попробуйте тему 3». Он переписал весь пользовательский интерфейс, чтобы показать мне, как выглядит тема 3. Я сказал: «Знаете что, это выглядит как мусор». Откат. Он откатил. Вот как вы играете в режиме «подключи и играй», ребята. Так вы получаете окраску.

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

Итак, изначально, поскольку все это было в одном файле, и я даже сделал снимок экрана, чтобы доказать вам это, это был просто `landing` и `landing-page.tsx`. Не годится. Каждый раз, когда я хотел внести новое обновление в целевую страницу, это было бы очень медленно. Вы более склонны к ошибкам. И причина в том, что когда ИИ кодит с таким количеством строк кода, более 700-800, я знаю, что здесь написано 75, но в исходном файле у него больше кода и больше контекста, с которым нужно работать, что может быть хорошо в некоторых случаях, но действительно плохо, когда я кодинг фронтенд, и я просто хочу, чтобы вы сосредоточились на настроении и гардеробе ламы.

Итак, как мы это решаем? Прежде всего, что вы, вероятно, уже заметили здесь, это компоненты, и посмотрите на это. Он взял весь этот код из исходной страницы здесь. где теперь он просто отображает компонент. Смотрите. Если я перейду к выбору функций, прокручу вниз, там написано `export default feature-selection`. Теперь он просто отображает код. И `feature-selection`, который, я полагаю, находится здесь, — это всего лишь одна строка кода в `landing-page`. Теперь, что означает, что когда я хочу атаковать что-то вроде раздела гардероба элитного, модели ИИ не нужно проходить через 800 строк кода. Скорее, модель ИИ видит, что он существует здесь, а затем переходит к конкретному файлу, который содержит 83 строки кода. Это рефакторинг. И это фундаментально одна из вещей, которых не хватает многим вайб-кодерам, которые вызывают, знаете ли, всех этих претенциозных разработчиков: «О да, да, вы можете кодить с помощью ИИ. Да, просто подождите, пока вы не сможете создать масштабируемую архитектуру». Простите, просто научите их тогда. И я учу вас прямо сейчас. Рефакторинг. Это сделает вашу жизнь намного проще.

Итак, как мы это делаем? Вы переходите в режим агента или, возможно, хотите начать с запроса. Я бы посоветовал вам начать с запроса, честно говоря, потому что если вы не знаете, что делаете, или не очень опытны, вы не хотите, чтобы агент начал запускать что-то, а затем вы скажете: «Вау, вау, вау, что только что произошло». Когда я использую такие термины, как «рефакторинг» или «уменьшение размера кода», используйте такие термины в своем вайб-кодинге, и он поймет. Но идея в том, что я заметил, и затем я делаю в `landing-page.tsx`, там весь код. Можем ли мы сделать так, чтобы

иметь отдельную папку под названием компоненты и рефакторить код, он взлетает, он летит. Вам нужна более высокоуровневая модель для этого. Так что вы делаете что-то вроде GBT5 codeex, и это займет, вероятно, 20 минут, 15 минут, но к концу это будет сделано. И теперь в любое время, когда вы захотите внести дальнейшие изменения в целевую страницу, это будет очень легко. И вы только что сделали что-то еще, что очень удивительно, потому что вы смогли сделать так, чтобы наш милый маленький элитный гардероб имел свой собственный файл. Я смогу легко перенести этот код на другую страницу. Лучшим примером этого будет нижний колонтитул, код нижнего колонтитула. Я не собираюсь переписывать код нижнего колонтитула на пяти разных страницах. Я просто использую этот один файл и импортирую его во все пять. Что вам нужно понять в vibe coding, так это то, что когда вы хотите импортировать конкретный компонент, и если вы не знаете, что это за файл, и вы говорите: "Корбин, я даже не знаю, что это за файл, откуда ты вообще знаешь, что это скриншот гардероба Элит, помести его в чат и скажи: "К какому файлу относится этот код?" Он даст вам файл. Как только у вас будет файл, у вас появится сила, потому что теперь вы можете сказать: "О, мне очень нравится гардероб Лич, можем ли мы добавить это на страницу цен, можем ли мы добавить это на страницу блогов, бум, легко, бум, готово, три строки кода импортированы". Итак, теперь вы научились создавать лучшую архитектуру для вашего фронтенда. Следующее, что нужно изучить, это ваша политика конфиденциальности и файлы cookie, а также конфиденциальность данных. Все, что я собираюсь сказать прямо сейчас, я не юрист. Это не юридическая консультация. Это просто мой опыт управления другой софтверной компанией. Так что воспринимайте это с долей скептицизма. Буквально, если вы хотите пропустить эту часть видео, вы можете. Но я скажу вам из своего опыта. Условия обслуживания и политика конфиденциальности не подлежат обсуждению. Вам это нужно. Я составил свои условия обслуживания и свою политику конфиденциальности. Но то, как я это сделал, заключается в том, что я уже заплатил за наем юриста через свою другую софтверную компанию Bumbos. Так что я знаю, что нужно включить в эти условия обслуживания и политики конфиденциальности для моего конкретного приложения, потому что я заплатил за эту юридическую работу. Я не собираюсь говорить вам, как управлять своей компанией. Некоторым людям нравится больший риск. Есть компании, у которых вообще нет бизнес-страхования для любых услуг или продуктов, которые они предоставляют. Сумасшедшие вещи, ребята. Это реальность. Многие люди предполагают, что будучи предпринимателем или владельцем бизнеса, они должны перестраховаться. Но на самом деле некоторые люди просто любят больший риск. Я очень рисковый. Я предприниматель. Когда дело доходит до юридических вопросов, это та территория, с которой я не люблю связываться, потому что вы не хотите, чтобы вас засудили. Вы не хотите иметь дело с этой головной болью. Итак, дополнительная вещь, которую мне придется кодировать в свое свободное время, — это баннер файлов cookie. А затем дополнительная вещь, которую я закодировал здесь, — это настройки, потому что одна вещь, которая произошла в индустрии технологий за последние 10 лет, чего не было в 2000-х и начале 2010-х, потому что в то время это были только радуги и солнечный свет, — это конфиденциальность данных, это реальная вещь. Теперь, да, в Америке это не так строго, как в Европе. Европа, если вы смотрите это из Германии, Дойчланд, если вы смотрите это из Франции, Великобритании, я не знаю. Суть в том, что знайте свою страну, потому что конфиденциальность данных — это не шутка в Европе. Они относятся к этому очень серьезно. Я имею в виду, вокруг этой темы так много всего. Но я не юрист. Вам придется разобраться. Что я собираюсь сказать, что я собираюсь сделать, так это сделать такие вещи, как: "Эй, даешь ли ты мне согласие знать, из какого ты города? Эй, даешь ли ты мне согласие позволить мне анализировать твои запросы, чтобы я мог улучшить модель?" Предоставьте эти варианты. Это важно. Теперь давайте изучим дополнительные подсказки. Я знаю, что это было немного сумасшедше. Вы говорите: "Корбин, почему ты такой серьезный?" Потому что закон — это не шутка, ребята. Да. Я раньше вел очень рискованный бизнес. Бизнес, которым я раньше занимался. Вы можете найти его. Он называется Lou. Это была компания по производству вейпов. Я управлял этим три с половиной года, ребята. Да, вы правильно расслышали. Компания по производству вейпов, как Jewel. Я управлял такой компанией три с половиной года. Чрезвычайно рискованная индустрия. Короче говоря, меня чрезмерно зарегулировали и выгнали с рынка. Но что я могу сказать вам из этого опыта, так это то, что, очевидно, у каждого бизнеса есть риск. Но поскольку я был буквально в одной из самых высоких категорий, все стало так плохо с этим бизнесом, что правительство США пыталось идентифицировать мой вейп, в котором не было никотина, как сигарету. О нет. Вы не хотите быть основателем стартапа, а затем узнать, что правительство говорит: "Эй, кстати, то, что вы продаете онлайн, — это сигарета". Нехорошо. Так что имейте в виду, поэтому я становлюсь немного серьезнее по этим вопросам. Итак, давайте узнаем, как я сделал свою страницу настроек, которая может показаться очень пугающей для vibe coder, но на самом деле я смог сделать это очень легко. Что я хочу, чтобы вы сделали, это найти пользовательские интерфейсы, которые вам нравятся. Мне даже все равно, если вы создадите папку закладок, где у вас будет всего пять-шесть разных сайтов, которые вам нравятся. Теперь у Клода здесь есть части, которые мне нравятся. Одна вещь, которая мне нравится в Клоде, — это его страница настроек. Так что я иду сюда, к настройкам. Выглядит знакомо, правда? Конфиденциальность, как мы используем данные, общие сведения. Да, вы думаете правильно. Я взял каждую из этих страниц и просто сделал скриншот. Скриншот общих сведений, скриншот учетной записи, скриншот конфиденциальности, скриншот биллинга, скриншот использования. Также, когда я говорю скриншот, я имею в виду, как сделать снимок и просто получить изображение. Правильно. Со всеми этими изображениями я собрал восемь или девять изображений и загрузил их в агента. Сначала я перешел в режим запроса. Позвольте мне уточнить, что я ищу. И я сделал так, что я, по сути, определил, говоря, по сути, много, по сути, по сути, по сути. Я сказал модели ИИ: "Я хочу, чтобы вы скопировали это точно". Итак, что произошло, так это то, что когда он начал работать над страницей настроек, он добавил вкладки, которые мне не понравились, или добавил параметры, которые мне не понравились. Мне было все равно. Просто закодируйте все, потому что к тому времени, когда он достиг конечного продукта, я смог нажать и сказать: "Знаете, этот раздел здесь, он мне не нравится. Удалите это". И он сделал это. Вот как вы это делаете, ребята. Elite Lab. Очевидно, у Клода нет раздела под названием Elite Lab. Так что я создал Leit Lab, который позволяет вам выбирать любой из ваших дизайнов ламы. О, вы хотите быть в тренде? Вы хотите быть в западном стиле? Вы хотите быть на вечеринке после? Neon Drift. Я должен добавить рейв. Хорошо, у нас должен быть рейв. Я люблю EDM. Swedish House Mafia. Мне нравится. Суть в том, что я создал Elite Lab. Удивительно, вот как вы создаете эти более интуитивно понятные пользовательские интерфейсы, которые поначалу кажутся пугающими. Вы просто берете чужой пользовательский интерфейс, а затем вносите изменения, которые хотите внести. Если я вернусь сюда, обратно в студию, другое, с чем я экспериментировал, было "обновить план". Бум, готово. Удалось найти платформу, которая мне очень понравилась, как они показывали планы, которые вы выбираете в зависимости от того, как вы хотите обновиться, и мне удалось сделать это здесь. Очень простые вещи, ребята. Не усложняйте. Вот почему я призываю вас действительно уделить время этому фронтенду, потому что как только вы начнете подключать бэкенд, вы захотите убедиться, что инфраструктура, которую вы строите здесь, прочна. Так что, когда вы будете подключать различные точки данных, у вас не будет головной боли. Так что я пытаюсь минимизировать как можно больше головной боли. Вот быстрый урок по маршрутизации React. И что я имею в виду под этим, так это localhost 3000. Если я нажму на это, вы знаете, мы идем сюда. Если мы перейдем в логин, мы перейдем в localhost login. Одна вещь, которую вам нужно будет добавить, просто как быструю строку, потому что ИИ еще недостаточно умен, чтобы понять это. Так что, если вы сейчас зайдете в свое приложение и зайдете в свой эмулятор и введете localhost 3000, а затем бессмыслицу, оно, по сути, сломается. Нажмите на это. Для меня я уже настроил это. Это 404. Что это делает, так это в разработке программного обеспечения, если маршрут не знает, куда идти, и это происходит в вашем app.tsx, если он не знает, куда идти, будь то SLworkspaces, будь то SLS studio login, если вы не добавите эту строку кода, он сломается. К вашему счастью, все, что вам нужно сделать, это зайти в чат сюда и сказать это. Вы можете начать с запроса, перейти прямо к агенту. Для любой страницы, которая не существует, перейдите на страницу 404. И вот оно. В дополнение к этому, Ли танцует на танцполе. Вперед, Ли. Вперед, Ли. Ли потерялся на танцполе. На на на танцполе. Хорошо, круто. Если вы остались со мной до этого момента, то у меня есть абсолютная рождественская елка для вас. Поскольку то, что я собираюсь показать вам прямо сейчас, стало для меня огромным прорывом. И я сделаю еще одно видео на эту тему. То, что я собираюсь показать вам прямо сейчас, — это этот режим агента. Теперь, когда я делал видео про Cursor 2, я не особо восхвалял это. Но, честно говоря, ребята, я понял, что мне нужно переключить свой мозг, чтобы понять, что это вообще значит. Что означает этот режим агента, так это то, что я делал здесь, когда управлял пятью фронтенд-разработчиками. Эти пять фронтенд-разработчиков просто превратились в моих пять агентов. Вот почему, и даже раньше в видео я сказал, что проблема кодирования сейчас — это не фактическая способность кодировать. Это знание того, что кодировать дальше. Так что позвольте мне показать вам очень простой рабочий процесс. Мы будем использовать двух агентов. На самом деле, когда я кодировал это, потому что я мысленно знал все, что мне нужно было сделать в этом приложении, исходя из моего опыта создания приложений за всю мою жизнь, я знал это. Политика конфиденциальности, страница 404. Эм, хорошо, мы не занимаемся рабочими пространствами. Хорошо, если мы собираемся заниматься рабочими пространствами, то я знаю, что мне нужно реструктурировать путь к данным, чтобы отдельный человек мог затем поделиться рабочим пространством. Как я просто знал, я знал, я знал, я знал, я знал, я знал, и это приходит со временем. Но на самом деле, когда я запускал это, я запускал пять агентов одновременно. Вот две основные вещи, которые вам нужно понять о работе с несколькими агентами. Первая основная вещь, особенно если вы новичок, это то, что я рекомендую вам сделать. Не запускайте агента на одной и той же странице. То есть, и я говорю это только для того, чтобы вы столкнулись с наименьшим риском. Я говорю, что у нас есть целевая страница. Хорошо. Может быть, пусть агент выполнит одну задачу на целевой странице. О, Корбин, он работает. Что мне делать дальше? Хорошо. У тебя уже есть страница регистрации? Нет. Хорошо, может быть, пусть один агент работает над страницей регистрации. Хорошо. У тебя уже есть страница настроек? Нет. Хорошо, может быть, пусть один агент работает над страницей настроек. Теперь позвольте мне показать вам живой пример. Так что это просто становится абсолютно кристально ясно. Первый агент. Я переключусь на GBT 5 codeex high. Я также покажу несколько советов довольно скоро о том, как заставить их давать действительно хорошие результаты. Но пока, первый агент, скажем, я перехожу на страницу входа. Я говорю: "О, хорошо, это выглядит скучно". Если я перейду на бесплатную страницу, у нас там Ли танцует. Мне это нравится. Но страница входа кажется немного пресной. Первый агент, в чем твоя задача? Хорошо, на странице входа, как я узнаю здесь? Можем ли мы сделать ее более интересной? Пусть Ли будет в разных костюмах, говоря "привет" или приветствуя пользователя. Это, вероятно, самый vibe coding-промпт, который я когда-либо создавал в своей жизни. Ввести. Я просто сижу здесь и жду? Нет. Новый агент. Хорошо, что дальше? Эм, пойдем на главную страницу. Знаете, для этой функции здесь, проблема с этим заключается в функции исследования. Я не собираюсь создавать отдельные страницы. Мне это не нужно. Так что я сделаю так. Эм, можете ли вы удалить функцию исследования здесь? Эм, ввести. Хорошо. Что дальше? Хорошо. Прокрутите вниз. Вы понимаете, что я имею в виду? Мы в новой эре. И люди, которые разрабатывают годами, не хотят этого признавать. А те, кто это делает, уже пользуются этим, как я. Мы в новой эре. Дело не в том, чтобы знать, как кодировать. Знание того, как кодировать фундаментально, очень помогает, потому что это позволяет вам использовать терминологию, которую вы изучаете в этой серии. Но как только вы это преодолеете, настоящий навык здесь — это знание того, как управлять командой в разработке программного обеспечения. Теперь этот навык можно получить просто путем создания. Как только вы создадите свое первое приложение и поймете от нуля до ста, ваше следующее приложение будет завершено чрезвычайно быстро. Когда я создавал bump ups, где он оказался сейчас? Эти два года работы, чтобы я мог создать точно такое же приложение. Мне понадобится четыре недели. Вот о чем я говорю, ребята. Это не хайп. Это не я пытаюсь получить клики. Это просто вы пришли чрезвычайно рано к поистине новой революции в кодировании. Они идут. Посмотрите, сколько времени это занимает. Мне нравится, что это занимает много времени, потому что, пока они идут, я просто отправляю больше вещей, которые, как я знаю, мне нужны. Я иду в настройки. Я иду в элитную лабораторию. Хм, может быть, я хочу добавить еще один костюм сюда. Может быть, я хочу добавить серфера элит. Знаете что? Давайте добавим серфера элит. Это хорошая идея. Скриншот. Хорошо. Эм, знаете ли вы, можем ли мы добавить костюм для серфера элит? Если бы я показал это себе в 12 лет, это было бы слишком весело. Вы, ребята, вы действительно не знаете, какой болью было до ИИ и кодирования, и сколько времени потребовалось бы, чтобы просто закодировать такие простые файлы. Дело не в том, что "о, ты не знаешь, как кодировать". Нет, нет, нет. Вы бы знали, как кодировать, это проблемы, которые вам буквально приходится набирать 100 строк. Каждый символ, который вы набираете, это не вопрос знаний. Это не так, что я не знаю, как закодировать этот файл. Это так, что я знаю, как закодировать этот файл. Мне нужно набрать его. Как набирать электронное письмо или набирать документ Google. Но если вы ошибетесь в одном символе, пропустите один точку с запятой, пропустите одну скобку, все приложение сломается. Люди просто не любят, это безумие, ребята. Хорошо, удалите функцию исследования. Сработало ли это? Давайте посмотрим. Вернемся к входу сюда. Прокрутите вниз. Хорошо, круто. Сработало. Так что это один из основных моментов. Хорошо, мне это нравится. Сохранить все. Хорошо, дальше. Это все еще работает? Давайте запустим еще одного агента. Это рабочий процесс. Это будет ваш огромный прорыв. Это то, чего никто еще не знает. Это 6 месяцев, 12 месяцев взлетной полосы у нас есть. Так что я позволю им продолжать готовиться, и они готовы. Мне даже неважно, что это заняло девять минут. Мне даже неважно, что это заняло четыре минуты, потому что я функционально знаю, что делать дальше. Так что у меня, вероятно, шесть или семь агентов работают одновременно. И я не преувеличиваю, ребята. Чем больше вы кодируете, чем больше учитесь, чем больше строите, тем больше вы будете знать, что я говорю правду. И вы скажете: "Вау, я рад, что занялся этим так рано, прежде чем все это станет мейнстримом. Через год это будет полный беспорядок". И когда я говорю полный беспорядок, я хочу быть очень ясным в отношении чего-то. У каждого рынка есть возможность. Amazon FBA, ваши золотые годы были примерно 2011, 2012. Что такое Amazon FBA? Если вы когда-нибудь пользовались Amazon, там написано Prime. Вы используете их центр выполнения заказов. Это были золотые годы примерно в 11, 12, 13, 14, 15, 16 годах. Вы вошли немного позже. Хорошо, теперь это просто абсолютно перенасыщенный рынок. Вы даже не хотите к нему прикасаться. Я даже не хочу прикасаться к вам на расстоянии 10 футов. Это вы получаете Amazon FBA 2011, 2012 прямо сейчас. Просто подождите, пока это не станет перенасыщенным. Я не знаю, сколько времени это займет, но это произойдет. Хорошо. Сделайте страницу входа более интересной. Знаете, я иду на страницу входа. О, круто. Перемешать костюм. Знаете что? Мне это не нравится. Я могу буквально просто подойти сюда и сказать: "Отменить все". Хорошо. Пока-пока. Коуч мертв. Эм, пойдем к этому другому. Добавить костюм серфера. Ли. Так что вы уже знаете, Ли любит серфинг. Я хочу, чтобы эти, как чесночные креветки на Гавайях. Норт-Шор. Или если вы не знаете, вы знаете. О, эти чесночные креветки так хороши. Положите на них лимон. Положите на них масло. Хорошо, настройки. Где мой серфер элит там? Где он? Говорится, что он здесь. Я просто его не вижу? Может быть, я ошибся. Так что я делаю вот что. Может быть, я перезагружу. Давайте попробуем сначала. Я не вижу серфера элит. Что произошло здесь, так это в моих ресурсах, и там, где у меня есть аватар Ли. Он создал серфера элит. Но проблема в том, что он не отобразил его на странице настроек. И единственная причина, по которой я это знаю, заключается в том, что я знаю, как все это связано. Но если бы вы этого не знали, все, что вам нужно было бы сделать, это просто сказать: "Хм, я попросил серфера элит появиться здесь, но он не появился". Я перетащу изображение, которое я только что сделал скриншот, и буквально просто Vibe Code в настройках. Где серфер элит? И тогда произойдет следующее: "О, мои извинения, я создал серфера элит, но я не добавил серфера элит сюда". Так что давайте добавим серфера элит. И посмотрите на это. Это будет следующий ход. Я нажму. И что здорово в этом, так это то, что это маленькие отскоки. Эм, это очень знакомая территория для меня из-за того, что при управлении этими фронтенд-разработчиками, каждый из них имел бы свой собственный pull request, и каждый разработчик предоставлял бы мне код, и мне пришлось бы убедиться, что он не конфликтует с основной веткой, он не сломает основную ветку. И в дополнение к этому, мне пришлось убедиться, что фактический базовый PR — это хороший код. Так что, зная эту информацию, вы знаете, просто то, что проблема с выводом кода здесь заключалась не в том, что он ошибся, а скорее в том, что он был неправильно направлен. Что я имею в виду под этим, так это то, что, возможно, в моем первоначальном запросе я должен был быть более ясным, чтобы добавить его в "выбери свой костюм ламы/настройки". Вот о чем я говорю, когда люди говорят, что ИИ-кодирование — это мусор. Нет, ваш запрос — это мусор. Хорошо, с этим покончено, у нас есть серфер элит. О, вау. Серфер элит потрясающий. Солнечный охотник, райдер Улувату, Бали. Мне нравится. Хорошо, мы принимаем. Хорошо, последние пару вещей здесь, ребята. Если вы собираетесь выполнить действительно масштабную задачу, эм, пример этого для меня лично был, когда я создавал весь пользовательский интерфейс для рабочих пространств и инфраструктуру для обработки базы данных на бэкенде в смысле путей. Я еще не касался бэкенда. Не волнуйтесь, мы доберемся до этого. Вы хотите, по сути, сказать агенту прочитать весь репозиторий. Прочитать весь репозиторий и понять его. Что я говорю здесь, когда я говорю репозиторий, это все эти файлы, все, каждый из них, прочитайте каждый файл здесь и просто поймите его. Поместите его в режим запроса. Нажмите Enter. Это займет, возможно, пару минут, но как только это будет сделано, он скажет: "Круто, я знаю, что это за приложение. Что вы хотите, чтобы я сделал?" Вы переключаете его в режим агента и просите это действительно большое изменение. Знаете, возможно, это так же просто, как страница настроек, но вы используете эту методологию для действительно, действительно больших изменений, которые вы собираетесь внести в свое приложение, потому что вы хотите рассказать агенту все о вашем приложении. Теперь одна вещь, на которую люди могут наброситься, это посмотрите на это контекстное окно. Контекстное окно 272K. Что это означает для вас, так это просто сколько файлов кода оно может понять, прежде чем оно сломается и потребует сброса. Сколько данных? Контекстное окно 272K. Если вы хотите получить представление о том, что это значит, сентябрь 2022 года, я полагаю, это дата. Проверьте меня в комментариях, если я ошибаюсь. Jet GBT 3.5 вышел в апреле следующего года в 2023 году. Я занимаюсь этим уже давно, ребята. GBT4 вышел. Хотите угадать, какое у него было контекстное окно? 4K. Всего четыре. Сейчас у нас 272K. Так что я могу гарантировать вам, что к тому времени, когда эти вещи станут мейнстримом, у вас будет очень большое приложение. Вероятно, будет миллион контекстных окон, может быть, два миллиона. Эта технология взрывается. Вот последнее, что я собираюсь рассмотреть. Посмотрите мои другие видео на YouTube на моем канале. Я собираюсь рассказать о других вещах, которые я узнал в этом процессе. Я просто не хочу делать это видео слишком длинным, потому что я уже могу сказать, что это может быть даже час. Я не знаю, что это. Но вот последнее, последние две вещи. Первое, если вы используете такую проблему, как эта, прочитайте весь репозиторий и поймите одну действительно большую задачу, которую вы можете дать модели ИИ, когда вы дойдете до точки, когда вы добавили тонну файлов, сделали свои коммиты и т. д., это просмотреть весь мой репозиторий кода и убедиться, что он масштабируем. И сначала это может быть немного общим, но я бы углубился в действительно глубокий разговор о том, что это означает для вашего конкретного приложения, потому что я не знаю, что означает масштабируемость для вашего приложения, потому что я не знаю вашего приложения. Я знаю, что такое мое приложение. Так что я знаю, что означает масштабируемость в нем. Я говорю вам в vibe coding-стиле: поговорите с моделью и действительно постарайтесь понять, что это означает для вашего приложения. Теперь одна версия масштабируемости, которую вы видели, которая была довольно крутой, — это взять целевую страницу здесь и перейти от 900 строк кода к рефакторингу их всех в различные компоненты, и теперь хорошо, теперь это более чистая кодовая база. Мне легче к ней подступиться и т. д. Второе, на что я хочу, чтобы вы обратили внимание, что чрезвычайно уникально для нашей текущей ситуации, — это то, как работают ИИ-софтверы. Так что вы заметите, когда будете использовать свою ценность, могут быть небольшие проблемы с ней. Например, она хороша, она работает, но вы знаете, может быть, вывод мог бы быть лучше, может быть, миниатюра могла бы быть лучше. Вот ход мыслей, который я хочу, чтобы вы прошли, который является только специфичным и уникальным для ИИ-софта. Этого не существовало до мира ИИ-софта. Этого не было для приложений iOS, этого не было для любого софта до ИИ, который предоставлял ИИ как ценность. И это то, что для моего примера, цель проста. Пользователь приходит на мою платформу, он сможет создавать действительно хорошие миниатюры. Связанная с редактированием изображений модель ИИ от Gemini, со временем это станет дешевле и лучше. Так что то, что вы только что поняли здесь, и я сэкономлю вам кучу времени. Я даже не должен давать этот совет, честно говоря, ребята. Это как экстремальное конкурентное преимущество, но я добрый. Суть в том, что когда вам нужно решить, что делать дальше для вашего приложения, отдавайте приоритет большему количеству функций. Но когда дело доходит до очень мелких вещей, касающихся фактического вывода модели, не слишком беспокойтесь. Поскольку на самом деле, если бы я углубился в кроличью нору здесь с миниатюрой, и я сказал бы: "Ах, это хорошо, но я не могу действительно хорошо сделать текст, почему меня это волнует?" Через год, когда они выпустят новую модель ИИ для редактирования изображений, она сможет делать текст намного лучше, чем тот тип временного решения, которое я собираюсь придумать. Так что то, что действительно круто, это то, что вам нужно всего лишь перейти к одной строке кода или буквально vibe coding и сказать: "Эй, вы знаете, текущая модель ИИ для изображений, которую мы используем, можете ли вы переключить ее на Gemini image flash V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V3 или что-то вроде того, как бы они ни называли эти вещи. Переключите на эту. Она переключается на нее. Вы используете свой продукт, и вы говорите: "Он стал на 50% лучше". У меня есть очень реальный пример этого bump buffs. Мы создали конвейеры, которые очень специфичны для анализа видео. Эти конвейеры существуют. Просто переключившись на более высокоуровневую модель, ценность, которую мы дали конечному потребителю, была мгновенной. Это заняло одну строку кода. Это уникально. И я имею в виду, кто-то другой должен об этом говорить, но по крайней мере в пространстве ИИ-инфлюенсеров я никого не вижу, кто бы об этом говорил. Это было долгое. Это было очень долго. Так что позвольте мне фактически закончить здесь, ребята, просто с PR. Я обычно не позволяю PR становиться такими большими, потому что это было тонна кода. Но я хотел, чтобы вы все действительно увидели силу этого. Так что я собираюсь объединить это. Объединить pull request. Подтвердить объединение. Хорошо, это нормально. и удалить ветку. Вернемся сюда, и мы заметим, что теперь main объединен с front end. Так что я вернусь к своему коду здесь. Давайте перейдем в редактор, чтобы я мог лучше это видеть. Эм, все команды, которые я собираюсь выполнить прямо сейчас, просто используют AI vibe способ сделать это. Скажите: "Эй, этот парень на YouTube сделал AI-проверку или сделал get checkout, как будто" или просто следуйте за мной, если вы хотите этому научиться. Я думаю, что изучение таких простых команд важно в разработке, чтобы у вас было некоторое понимание при подключении к GitHub. Идея в том, что, хорошо, я в get front end. О, я немного ошибся. Я полагаю, они внесли изменение. Что я сделаю здесь, так это. Я просто скажу: "Сжечь все мои локальные изменения, чтобы они соответствовали облаку". Сжечь все мои, потому что я уже объединил это. Очень vibe. Я действительно могу удалить звездочку из ветки. Ну, это не углубляется слишком сильно в кроличью нору, я, вероятно, должен был перейти к меньшей модели, потому что это простая команда git. Но я думаю, вы узнали что-то новое. Идея в том, что изменения, которые мы внесли вместе, серфер элит, я просто удалю его. Так что, знаете, жесткий сброс. Это приятно. Так что, когда я сделаю это, я не получу никаких глупых предупреждений от GitHub, типа: "О, есть несохраненные изменения". Так что get branch get check out main. Это возвращает меня к основной ветке. И основная ветка скажет: "Подожди, что случилось, Корбин?" Точно. Так что всего один день кодирования, ребята. Вот что просто безумно. Один день кодирования. Мое приложение прошло от этого, даже не имея страницы настроек. Когда я сделаю get pull origin main, мы просто получим весь этот облачный код, который является кодом, который мы только что объединили в GitHub здесь, фронтенд PR. Бум. Мы в новой эре кодирования, ребята. Вы можете сказать: "Корбин, почему есть ошибка?" Это потому, что буквально, посмотрите, сколько файлов слева. Он добавляет. Тысячи и тысячи, это просто слишком много, чувак. Это нормально. Мы ранние пташки. На этом, пожалуй, все, ребята. Обязательно поставьте лайк. Это совершенно бесплатно. Обязательно оставьте восторженный отзыв. Эта серия только начинается, ребята. Я понял, что буквально любой может кодировать сейчас. И мы так рано пришли к повороту Cursor 2 и Google AI Studio, что да, эта серия может быть многочасовой. Это может быть серия на 5-6 часов, но кого это волнует? Любой, кто смотрит эту серию, будет иметь значительное конкурентное преимущество по сравнению со всеми остальными на рынке прямо сейчас. Увидимся в следующем видео про Cursor 2, которое буквально выпустило целый фронтенд, на создание которого изначально потребовался бы месяц для одного инженера, но, возможно, даже больше для любого неопытного инженера. Игроки идут элитный Ли потерялся на танцполе [Музыка]