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, и я просто создаю миниатюру. Чтобы добавить эту дополнительную функцию рабочего пространства, если бы это был только один человек вначале, этот человек, который был унаследованным пользователем, мне было бы чрезвычайно трудно перенести его для обработки нового типа структуры данных для обработки рабочих пространств.

Итак, если бы я изначально пошел с версией один, создавая это без идеи того, что такое унаследованный пользователь, что это означает, где один человек выбирал бы между тремя разными планами, план А, план Б, план С. И просто потому, что это примерно Хэллоуин, 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. Хорошо, возьмите это в чат AI и скажите: «Привет, я строю X». Какие библиотеки с открытым исходным кодом, вероятно, подойдут здесь? Что вы обнаружили, что было действительно круто, когда я создавал другие приложения, так это то, что многое из того, за что вы платите онлайн, может быть интегрировано в ваше приложение совершенно бесплатно. Итак, что я имею в виду под этим: часто, когда человек платит за услугу API, такую как API OpenAI, например, если я хочу интегрировать искусственный интеллект в приложение, в теории я мог бы запустить свой собственный сервер. В теории я мог бы скачать эту модель и запустить ее локально на своем сервере или, альтернативно, использовать что-то вроде GCP и запустить эту LLM, которую я скачал, на GCP и обращаться к этим конечным точкам, потому что я владею этой моделью. Почему люди этого не делают, Корбин? Из-за того, насколько масштабировали свои API-инфраструктуры эти компании, чтобы, если ваше приложение действительно взорвется, вы могли опираться на технологии OpenAI. Это как, почему нет конкурента AWS GCP на самом деле? Потому что они уже построили все серверные помещения. Нет смысла. Просто стойте на плечах гигантов.

Следующее, что мы узнаем, это как я подхожу к ценообразованию. И я просто дам очень быстрое, очень быстрое объяснение, почему я подошел к ценообразованию так, как я это сделал, потому что у нас будет еще один эпизод, посвященный этому. Проще говоря, вам просто нужно понять свои основные затраты. Поэтому вы переходите в режим запроса. Опять же, моя серия будет посвящена бэкенду Firebase. Поэтому я связан и коррелирован с ценами Firebase. Вы используете Superbase? Вы используете AWS? Я не знаю, что вы используете. Что бы вы ни использовали, вам нужно это уточнить. Вы знаете, я буду использовать бэкенд XYZ. Как только вы это сделаете, вы получите контекст. Например, я перехожу к ценам Firebase. Вы знаете, что действительно круто в создании программных продуктов, потому что эти крупные облачные провайдеры очень заинтересованы в том, чтобы вы их использовали, потому что на самом деле все, что им нужно сделать, это запустить сервер. Они просто платят за энергию, ребята, что безумно. И, очевидно, у них есть куча инфраструктуры, построенной вокруг этого, чтобы она могла справляться с вещами в масштабе. Но есть причина, по которой такие вещи, как Firebase, не имеют стоимости на плане Spark, и он невероятно щедр. Вы прокручиваете вниз сюда, вы получаете доступ к таким вещам, как 50 тысяч чтений в день, что вы, возможно, не поймете, что это значит прямо сейчас, но вы поймете, что это значит довольно скоро, и вы скажете: «Вау, 50 тысяч чтений, Корбин?» На самом деле, вам нужно понять, что на бесплатном плане Firebase, чтобы вы могли запустить приложение, которое, вероятно, выдает около 5000 MMR, может быть, 6000. Это действительно зависит от того, насколько интенсивно вы используете бэкенд. Я имею в виду, мы смотрим на стоимость, возможно, около 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, которые я использую, и получили соответствующие затраты на них». Как только мы узнаем это, мы хотим знать стоимость одной правки с учетом дискового пространства, вызовов функций и т. д. Теперь я не знаю, что делает ваше приложение или какую ценность вы предоставляете. Но то, что я даю, это то, что у нас есть приятная маленькая система стогов сена. Изначально это были кредиты, но, честно говоря, кредиты имеют такое неприятное название в программном обеспечении. Я не буду начинать с этого, если я вайб-кодирую это и получаю удовольствие, где вы можете буквально выбрать своего лида. Если вы даже не знаете, кто такой Лейд, подождите, подождите, подождите, подождите. Есть причина, по которой этот свитер на мне. Все ОГ, которые смотрят это, знают этот свитер. Все новые люди, которые только что нашли меня сейчас. О, это большой свитер. Если на видео свитер с ламой, это большое дело. Это Лейт, Лама. Он ОГ. Посмотрите на баннер моего канала на YouTube. Лейт на моем плече. К слову, вы знаете, его костюмы и что круто, это то, что, вы знаете, стример Лейт, Стример Лейт отредактирует видео для вас. Но я не хочу никакой платы. Мне все равно. Я делаю «Привет, э-э, так же, как Zapier делает запы, просто брендинг». Один стог сена = одна правка изображения лида. Одна правка изображения лида стоит мне денег на бэкенде. Это вызов Firebase для фактического запуска функции, чтобы я мог вызвать GCP и сказать: «Эй, мне нужно, чтобы ты запустил для меня какой-то код». Вызов Firebase. Это стоит денег с редактором изображений Gemini, Gemini Flash Image, Gemini API Flash, как бы ни называлась модель. Они просто называют их сумасшедшими вещами в наши дни. Это стоит мне денег. Итак, я провел расчеты. Я понимаю, что, по сути, каков темп сгорания для одной правки. Поэтому мне нужно найти ценность того, чем будет один стог сена для потребителя. Ваша маржа здесь, что мы понимаем о марже? Следовательно, если одна правка изображения лида стоит мне 1 цент. Все, что учитывается, включая потенциальное хранение данных из миниатюры. Вот почему я упоминаю гигабайты. Вот почему уровни даже определяют гигабайты. Вам может даже не понадобиться хранилище для вашей платформы. Причина, по которой мне нужно хранилище, заключается в том, что я буду хранить данные изображений. Курсор, не сейчас. Нет, не говори мне дать мне обновление прямо сейчас. Хорошо. Позже. Суть в том, что как только вы поймете и пройдете этот маленький мыслительный процесс с моделью AI, которая сможет контекстуализировать весь ваш репозиторий. Корбин, какая хорошая модель для использования? О, боже мой. Рождество? Это мой день рождения? Я даже не знаю. Что-то потрясающее. Посмотрите на эту модель, ребята. Вы можете использовать Auto, вы можете использовать Claude. У меня были безумные результаты с GBT5 Codexi. Так что, если вы когда-нибудь столкнетесь с проблемами, переключитесь на это. Эта штука сумасшедшая. Идея в том, что вы ищете маржу здесь для вашей основной ценности. Следовательно, если одна правка изображения лида после выяснения всей этой информации будет стоить мне цент, тогда работайте со своей маржой. Вы хотите взимать 10 центов за стог сена? Вы хотите взимать 5 центов за стог сена? Какая здоровая маржа, Корбин? Честно говоря, это действительно зависит. Я бы посоветовал вам, если это ваш первый раз, когда вы запускаете и создаете приложение, вам не нужно стремиться к 90% 80% марже здесь. Стремитесь к 60. Стремитесь к 50% марже. Вам просто нужно создать достаточно ценности, чтобы оправдать использование приложения. Так что для меня маржа, к которой я стремлюсь, я думаю, составляет около, если я правильно помню, около 70% маржи. Следовательно, есть целая система кредитов, верно? Так что пользователь может заплатить мне 20 долларов в месяц, а затем за 250 стогов сена, что эквивалентно примерно 31 миниатюре, я сделал расчеты. Они также могут сказать: «Знаете что, я просто хочу быть на бесплатном уровне». Бесплатные уровни всегда важны. Вы должны дать пользователю, особенно в программном обеспечении, возможность просто попробовать продукт, потому что они могут попробовать его и сказать: «Это мусор». И если они заплатили за продукт, вы получите раздражающее, очень раздражающее электронное письмо с возвратом средств. Так что лучше просто позволить им использовать его. Позвольте им самим кодировать или отсеивать себя из всей системы. Последнее, что вам нужно, — это куча электронных писем с надписью «Мне нужен возврат средств». Просто используйте 0 долларов. Все в порядке. У нас также есть немного элитных стогов сена. Это одноразовые покупки. Я отступлю от некоторой информации, которую сказал год назад, когда дело доходило до разницы между подпиской и одноразовой покупкой. И, возможно, вам следует просто отдать приоритет подписке. Шаг назад, который я делаю, это отдать приоритет уровням, отдать приоритет ясности, но дать возможность одноразовых покупок, но просто сделать намерение за этим чрезвычайно ясным. 60 дней, эти стога сена истекают. Их нет. Они сгорели. Лейт не может их съесть. Привет, Лейт, вкусные упаковки. Лейт не может их съесть. И единственная причина, по которой я добавляю это, заключается в том, что на самом деле многие люди могут испугаться подписаться за 19 долларов. Я знаю, что это пугающая цифра. Так что я знаю, что многие люди будут использовать это бесплатно. И я уже знаю из своего опыта использования этого, потому что я делаю миниатюры уже 2,5 года. Я думаю: «Вау». Вы знаете, что продукт хорош, когда вы его используете. Просто скажем так. Вы знаете, что продукт хорош. Если вы кодируете свое программное обеспечение и когда-нибудь дойдете до точки, когда вы скажете: «Это довольно хорошо, но я не думаю, что буду использовать это. Возможно, я не целевой клиент». Вы уже облажались. Вы уже облажались. Вы хотите создать программный продукт, который вы бы использовали, потому что если бы вы его использовали, вы, вероятно, найдете тысячу других людей, которые, вероятно, хотят его использовать. Это ваша канарейка в угольной шахте. Ваша канарейка мертва, если даже разработчик не готов использовать продукт. Я использовал его, и я сказал: «Да, это следующий уровень». Для моего двух с половиной лет опыта создания просто миниатюр, это следующий уровень. Следовательно, я знаю, что многие люди будут на бесплатном уровне. Им не нравятся подписки, но они определенно заплатят 8 долларов за 50 стогов сена или 25 за 200, потому что они знают, что, возможно, им не нужно делать 30 миниатюр, но, возможно, они хотят сделать 12, но они не хотят покупать подписку, они просто хотят заплатить мне восемь долларов. То, как вы упаковываете, что очень важно, если вы когда-либо делаете услугу одноразовой покупки в своем программном обеспечении, вы хотите завышать цену на них. Вы хотите обескуражить одноразовые покупки. Цель этого — просто получить деньги, которых не было бы, потому что пользователь уже был отпугнут подпиской. Следовательно, если я правильно помню, я думаю, моя наценка на это составляет около 120%. Это какое-то нелепое число. Я делаю это намеренно, потому что я говорю: «Нет, не покупайте пакет быстрого исправления. Просто заплатите 20 долларов, и все будет хорошо». Имейте это в виду. Давайте перейдем к следующему уроку или методу.

Итак, вы заметите, что если я прокручу вниз, некоторые компоненты здесь имеют заполнитель. Заполнитель кадр один, заполнитель кадр два и т. д. Вы также заметите здесь, что да, есть миниатюра, но изначально это был заполнитель. Итак, что это значит для вас? Это означает, что когда мы кодируем здесь, и я очень рекомендую, если вы планируете выполнять очень большие задачи, я покажу вам несколько сумасшедших рабочих процессов агента довольно скоро. Вы выполняете очень большие задачи, всегда сначала говорите с моделью. Не позволяйте агенту просто начать работать. Получите контекст. Действительно поймите, что вы собираетесь ему сказать. Идея в том, что если вы скажете модели AI закодировать всю вашу целевую страницу, закодировать всю мою целевую страницу, а затем, знаете ли, просто вайб-кодировать ее. Я хочу, чтобы она выглядела как Apple, или дайте мне темную тему, или сделайте ее похожей на bumpups.com. Например, что бы это ни было, вайб-кодируйте ее. Что фундаментально чрезвычайно важно сделать, так это добавить это в ваш промпт. Все, что требует изображения, текста и т. д., просто используйте заполнители и фиктивные данные. Если вы не добавите эту строку, модель AI подойдет к карточке, подобной этой, и скажет: «О, это была бы хорошая карточка». Мы не можем этого сделать, потому что у нас нет изображения. Буквально, дайте этому делу разгуляться. Дайте ему волю. Отпустите поводок. Оставив эту строку здесь, она даст вам эти безумные типы пользовательских интерфейсов, и она даст вам эти пользовательские интерфейсы из-за того, что она знает, что если она столкнется с ситуацией, подобной этой, например, где это будет: «Мы бы изначально закодировали это, но мы не можем, потому что у нас нет соответствующего изображения пользователя». Ну, теперь она закодирует это и просто даст ей заполнитель. И как добавить к заполнителю? Ну, добавьте изображение в свой проект. Что я люблю делать, так это создать папку под названием `assets`, `images`, `organization` и поместить туда соответствующее изображение. И тогда, когда у вас есть изображение, вы, по сути, вернетесь сюда, сделаете снимок этого прямо здесь и скажете: «Эй, для заполнителя кадра один, кадра два, кадра три, пожалуйста, и я могу буквально показать вам. Перейдите в эту папку `images`». «images». Вы видите те, что называются XYZ? Используйте их для «frame one». «frame two», «frame three». И что на самом деле забавно, теперь, когда я вспоминаю это, кто-то спросил меня в X, какие фундаментальные навыки мы должны изучать сейчас? И я как бы рассмотрел это в этом видео, но идея в том, что если вы действительно хотите быть монстром, то научитесь кодировать без AI, и вы будете просто вне цепи. Это такая фраза? Вне цепи. Я не знаю. Но главное, другая вещь, которая мне показалась забавной, заключается в том, что даже если вы не хотите этого делать, следующий лучший навык — это научиться быстро печатать. Потому что если вы можете печатать быстро, вы можете отправлять этих агентов с сумасшедшей скоростью. Как 4 июля с фейерверками.

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

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

иметь отдельную папку под названием компоненты и переработать код, он взлетает, он летит. Для этого вы хотите использовать модель более высокого уровня. Итак, вы делаете что-то вроде GBT5 codeex, и это займет, вероятно, 20 минут, 15 минут, но к концу все будет готово. И теперь в любое время, когда вы захотите внести дальнейшие изменения в целевую страницу, это будет очень легко. И вы только что сделали кое-что еще, что очень удивительно, потому что вы смогли сделать так, чтобы наш милый маленький элитный гардероб имел свой собственный файл. Я смогу легко перенести этот тип кода на другую страницу. Лучшим примером этого был бы нижний колонтитул, код нижнего колонтитула. Я не собираюсь переписывать код нижнего колонтитула на пяти разных страницах. Я просто использую этот один файл и импортирую его во все пять. Что вам нужно понять в vibe coding, так это то, что когда вы хотите импортировать определенный компонент, и если вы не знаете, что это за файл, и вы говорите: "Корбин, я даже не знаю, что это за файл, откуда ты вообще знаешь, что это скриншот гардероба Элит, помести его в чат и скажи: "С каким файлом связан этот код?" Он даст вам файл. Когда у вас есть файл, у вас есть сила, потому что теперь вы можете сказать: "О, мне очень нравится гардероб Лич, можем ли мы добавить это на страницу цен? Можем ли мы добавить это на страницу блогов? Бум, легко, бум, готово, три строки кода, импортировано. Итак, теперь вы научились создавать лучшую архитектуру для вашего фронтенда. Следующее, что нужно изучить, это ваши условия обслуживания, политика конфиденциальности и файлы cookie, а также конфиденциальность данных. Все, что я собираюсь сказать прямо сейчас, я не юрист. Это не юридическая консультация. Это просто мой опыт работы в другой компании-разработчике программного обеспечения. Так что воспринимайте это с долей скептицизма. Буквально, если вы хотите пропустить эту часть видео, вы можете. Но я расскажу вам из своего опыта. Условия обслуживания и политика конфиденциальности не подлежат обсуждению. Вам это нужно. Я составил свои условия обслуживания и свою политику конфиденциальности. Но то, как я это сделал, заключается в том, что я уже заплатил за наем юриста через мою другую компанию-разработчик программного обеспечения Bumbos. Поэтому я знаю, что нужно включить в эти условия обслуживания и политики конфиденциальности для моего конкретного приложения, потому что я заплатил за эту юридическую работу. Я не собираюсь говорить вам, как управлять своей компанией. Некоторым людям нравится больший риск. Есть компании, у которых вообще нет бизнес-страхования для любых услуг или продуктов, которые они предоставляют. Сумасшедшие вещи, ребята. Это реальная вещь. Многие люди предполагают, что как предприниматель или владелец бизнеса, они должны, они предполагают, что все точки над "i" расставлены. Но на самом деле, некоторые люди просто любят больший риск. Я очень рисковый. Я предприниматель. Когда дело доходит до юридических вопросов, это та территория, с которой я не люблю связываться, потому что вы не хотите, чтобы вас засудили. Вы не хотите иметь дело с этой головной болью. Итак, дополнительная вещь, которую мне придется кодировать в свое свободное время, — это баннер файлов cookie. А затем дополнительная вещь, которую я закодировал здесь, — это настройки, потому что одна вещь, которая произошла в индустрии технологий за последние 10 лет, чего не было в 2000-х и начале 2010-х, потому что в то время это были только радуги и солнечный свет, — это конфиденциальность данных — это реальная вещь. Теперь, да, в Америке это не так строго, как в Европе. Европа, если вы смотрите это из Германии, Дойчланд, если вы смотрите это из Франции, Великобритании, я не знаю. Суть в том, что знайте свою страну, потому что конфиденциальность данных — это не шутка в Европе. Они очень серьезно относятся к этим вещам. Я имею в виду, вокруг этой темы так много всего. Я не юрист, правда. Вам придется разобраться. Что я собираюсь вам сказать, что я собираюсь сделать, так это сделать такие вещи, как: "Эй, вы даете мне согласие знать, из какого вы города? Эй, вы даете мне согласие позволить мне анализировать ваши запросы, чтобы я мог лучше обучить модель?" Предоставьте эти варианты. Это важно. Теперь давайте изучим дополнительные подсказки. Я знаю, что это было немного сумасшедшим. Вы говорите: "Корбин, почему ты такой серьезный?" Потому что закон — это не шутка, ребята. Да. Я раньше вел очень рискованный бизнес. Бизнес, которым я раньше занимался. Вы можете найти его. Он называется Lou. Это была компания по производству вейпов. Я управлял этим три с половиной года, ребята. Да, вы правильно расслышали. Компания по производству вейпов, как Jewel. Я управлял такой компанией три с половиной года. Чрезвычайно рискованная отрасль. Короче говоря, меня чрезмерно зарегулировали и выгнали с рынка. Но что я могу сказать вам из этого опыта, так это то, что, очевидно, у каждого бизнеса есть риск. Но поскольку я был буквально в одной из самых высоких категорий, все стало настолько плохо с этим бизнесом, что правительство США пыталось идентифицировать мой вейп, в котором не было никотина, как сигарету. О нет. Вы, как основатель стартапа, не хотите, чтобы правительство сказало: "Эй, кстати, то, что вы продаете онлайн, — это сигарета." Ничего хорошего. Так что имейте в виду, поэтому я становлюсь немного серьезнее по этим вопросам. Итак, давайте узнаем, как я сделал свою страницу настроек, которая может показаться очень пугающей для vibe coder, но на самом деле я смог сделать это очень легко. Что я хочу, чтобы вы сделали, это найти пользовательские интерфейсы, которые вам нравятся. Мне даже все равно, если вы создадите папку для закладок, где у вас будет всего пять-шесть разных сайтов, которые вам нравятся. Теперь у Клода здесь есть части, которые мне нравятся. Одна вещь, которая мне нравится в Клоде, — это его страница настроек. Итак, я перехожу сюда к настройкам. Выглядит знакомо, верно? Конфиденциальность, как мы используем данные, общие. Да, вы думаете то же, что и я. Я взял каждую из этих страниц и просто сделал скриншот. Скриншот общего, скриншот аккаунта, скриншот конфиденциальности, скриншот биллинга, скриншот использования. Также, под скриншотом я подразумеваю, что вы делаете снимок и просто получаете изображение. Правильно. Со всеми этими изображениями я взял восемь или девять изображений и загрузил их в агент. Сначала я перешел в режим запроса. Позвольте мне уточнить, что я ищу. И я сделал так, что я, по сути, определил, говоря, по сути, много, по сути, по сути, по сути. Я сказал модели ИИ: "Я хочу, чтобы вы скопировали это точно". Итак, что произошло, так это то, что когда он начал работать над страницей настроек, он добавил вкладки, которые мне не понравились, или добавил параметры, которые мне не понравились. Мне было все равно. Просто закодируйте все, потому что к тому времени, когда он достиг конечного продукта, я смог нажать и сказать: "Знаете, этот раздел здесь, он мне не нравится. Удалите это". И он сделал это. Вот как вы это делаете, ребята. Elite Lab. Очевидно, у Клода нет раздела под названием Elite Lab. Поэтому я создал Leit Lab, который позволяет вам выбирать любой из ваших дизайнов ламы. О, вы хотите быть в тренде? Вы хотите быть в стиле вестерн? Вы хотите быть на вечеринке после? Неоновый дрифт. Мне нужно добавить рейв. Хорошо, у нас будет рейв. Я люблю 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 в настройках. Где серфер элит? И тогда произойдет следующее: "О, мои извинения, я создал серфера элит, но я не добавил серфера элит сюда". Итак, давайте добавим серфера элит. И посмотрите на это. Это будет следующий ход. Я нажму. И что здорово в этом, так это то, что это маленькие отскоки. Эм, это очень знакомая территория для меня, потому что, когда я управлял теми фронтенд-инженерами, каждый из них имел свой собственный пул-реквест, и каждый инженер предоставлял мне код, и я должен был убедиться, что он не конфликтует с основной веткой, он не сломает основную ветку. И в дополнение к этому, я должен был убедиться, что фактический базовый PR — это хороший код. Так что, зная эту информацию, вы знаете, просто то, что проблема с выводом кода здесь заключалась не в том, что он ошибся, а скорее в том, что он был неправильно направлен. Что я имею в виду, так это то, что, возможно, в моем первоначальном запросе я должен был быть более ясным, чтобы добавить его в "Выберите свой костюм ламы/настройки". Вот о чем я говорю, когда люди говорят, что ИИ-кодирование — это мусор. Нет, ваш запрос — это мусор. Хорошо, с этим покончено, у нас есть серфер элит. О, вау. Серфер элит потрясающий. Охотник за солнцем, райдер Улувату, Бали. Мне нравится. Хорошо, мы принимаем. Хорошо, последние пару вещей здесь, ребята. Если вы собираетесь выполнить действительно масштабную задачу, эм, пример этого для меня лично был, когда я создавал весь пользовательский интерфейс для рабочих пространств и инфраструктуру для обработки базы данных на бэкенде в смысле путей. Я еще не касался бэкенда. Не волнуйтесь, мы доберемся до этого. Вы хотите, по сути, сказать агенту прочитать весь репозиторий. Прочитать весь репозиторий и понять его. Что я имею в виду под репозиторием, так это все эти файлы, все, каждый из них, прочитайте каждый файл здесь и просто поймите его. Поместите его в режим запроса. Нажмите Enter. Это займет, возможно, пару минут, но как только это будет сделано, он скажет: "Круто, я знаю, что такое ваше приложение. Что вы хотите, чтобы я сделал?" Вы переключаете его в режим агента и запрашиваете это действительно большое изменение. Знаете, может быть, это так же просто, как страница настроек, но вы используете эту методологию для действительно, действительно больших изменений, которые вы собираетесь внести в свое приложение, потому что вы хотите рассказать агенту все о вашем приложении. Теперь одна вещь, на которую люди могут наброситься, — это посмотрите на это контекстное окно. Контекстное окно 272K. Что это означает для вас, так это просто сколько файлов кода он может понять, прежде чем он сломается и ему нужно будет сброситься. Сколько данных? Контекстное окно 272K. Если вы хотите получить представление о том, что это значит, сентябрь 2022 года, я полагаю, это дата. Проверьте меня в комментариях, если я ошибаюсь. Jet GBT 3.5 вышел в апреле следующего года в 2023 году. Я занимаюсь этим уже давно, ребята. GBT4 вышел. Хотите угадать, какое у него было контекстное окно? 4K. Всего четыре. Сейчас у нас 272K. Так что я могу гарантировать вам, что к тому времени, когда эти вещи станут мейнстримом, у вас будет очень большое приложение. Вероятно, будет миллион контекстных окон, может быть, два миллиона. Эта технология взрывается. Вот последнее, что я собираюсь рассмотреть. Посмотрите мои другие видео на YouTube на моем канале. Я собираюсь рассказать о других вещах, которые я узнал в этом процессе. Я просто не хочу делать это видео слишком длинным, потому что я уже чувствую, что это может быть даже час. Я не знаю, что это. Но вот последнее, последние две вещи. Первое, если вы используете такую проблему, как эта, прочитайте весь репозиторий и поймите одну действительно большую задачу, которую вы можете дать модели ИИ, когда вы дойдете до точки, когда вы добавили кучу файлов, сделали свои коммиты и т. д., это просмотреть весь мой репозиторий кода и убедиться, что он масштабируем. И сначала это может быть немного общим, но я бы углубился в действительно глубокий запрос о том, что это означает для вашего конкретного приложения, потому что я не знаю, что означает масштабируемость для вашего приложения, потому что я не знаю, что такое ваше приложение. Я знаю, что такое мое приложение. Поэтому я знаю, что означает масштабируемость в нем. Я говорю вам в vibe coding-стиле: поговорите с моделью и действительно попытайтесь понять, что это означает для вашего приложения. Теперь одна версия масштабируемости, которую вы видели, которая была довольно крутой, — это взять целевую страницу здесь и перейти от 900 строк кода к рефакторингу их всех в разные компоненты, и теперь хорошо, теперь это более чистая кодовая база. Мне легче с ней работать и т. д. Второе, на что я хочу, чтобы вы обратили внимание, что чрезвычайно уникально для нашей текущей ситуации, — это то, как работают ИИ-софты. Итак, вы заметите, что при использовании вашей ценности могут быть небольшие проблемы с ней. Например, она хороша, она работает, но, знаете ли, возможно, вывод мог бы быть лучше, возможно, миниатюра могла бы быть лучше. Вот ход мыслей, который я хочу, чтобы вы прошли, который является только специфическим и уникальным для ИИ-программного обеспечения. Этого не существовало до мира ИИ-программного обеспечения. Этого не было для приложений iOS, этого не было для любого программного обеспечения до ИИ, которое давало ИИ как ценность. И это то, что в моем примере, цель проста. Пользователь приходит на мою платформу, он сможет создавать действительно хорошие миниатюры. Связанная с редактированием изображений модель ИИ от Gemini, со временем это станет дешевле и лучше. Итак, то, что вы только что поняли здесь, и я сэкономлю вам кучу времени. Я вообще не должен давать этот совет, честно говоря, ребята. Это как экстремальное конкурентное преимущество, но я добрый. Суть в том, что когда вам нужно решить, что делать дальше для вашего приложения, отдавайте приоритет большему количеству функций. Но когда дело доходит до очень мелких вещей, касающихся фактического вывода модели, не слишком беспокойтесь. Потому что на самом деле, если бы я углубился в кроличью нору здесь с миниатюрой, и я бы сказал: "Ах, это хорошо, но я не могу сделать текст так хорошо, почему меня это волнует?" Через год, когда они выпустят новую модель ИИ для редактирования изображений, она сможет делать текст намного лучше, чем тот тип временного решения, которое я собираюсь придумать. Так что действительно здорово то, что это просто требует, чтобы вы перешли к одной строке кода или буквально Vibe Code и сказали: "Эй, знаете ли, текущая модель ИИ для изображений, которую мы используем, можете ли вы переключить ее на 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 становиться такими большими, потому что это было много кода. Но я хотел, чтобы вы все действительно увидели силу этого. Итак, я собираюсь объединить это. Объединить пул-реквест. Подтвердить объединение. Хорошо, это нормально. И удалить ветку. Вернемся сюда, и мы заметим, что теперь main объединен с frontend. Итак, я возвращаюсь к своему коду здесь. Давайте перейдем в редактор, чтобы я мог лучше это видеть. Эм, все команды, которые я собираюсь выполнить прямо сейчас, просто используйте AI vibe способ сделать это. Скажите: "Эй, этот парень на YouTube сделал AI-проверку" или "сделал get checkout, как" или просто следуйте за мной, если вы хотите этому научиться. Я думаю, что изучение таких простых команд важно в разработке, чтобы вы могли иметь некоторое понимание, когда дело доходит до подключения к GitHub. Идея в том, что, хорошо, я в get frontend. О, я немного ошибся. Похоже, они внесли изменение. Что я сделаю здесь, так это. Я просто скажу: "Уничтожьте все мои локальные изменения, чтобы они соответствовали облаку". Уничтожьте все мои, потому что я уже объединил это. Очень vibe. Я мог бы действительно удалить звездочку из ветки. Ну, это не углубляется слишком сильно в кроличью нору, я, вероятно, должен был перейти к меньшей модели, потому что это простая команда git. Но, думаю, вы узнали что-то новое. Идея в том, что изменения, которые мы внесли вместе, серфер элит, я просто удалю его. Итак, жесткий сброс. Это приятно. Так что, когда я сделаю это, я не получу никаких глупых предупреждений от GitHub, типа: "О, есть несохраненные изменения". Итак, get branch get checkout main. Это возвращает меня к основной ветке. И основная ветка скажет: "Подожди, что случилось, Корбин?" Точно. Итак, всего один день кодирования, ребята. Вот что просто безумно. Один день кодирования. Мое приложение прошло от этого, даже не имея страницы настроек. Когда я сделаю get pull origin main, мы просто получим весь этот облачный код, который является кодом, который мы только что объединили в GitHub здесь, frontend PR. Бум. Мы в новой эре кодирования, ребята. Вы можете сказать: "Корбин, почему есть ошибка?" Это потому, что буквально, посмотрите, сколько файлов слева. Он добавляет. Тысячи и тысячи. Это слишком много, чувак. Это нормально. Мы ранние пташки. На этом, пожалуй, все, ребята. Обязательно поставьте лайк. Это совершенно бесплатно. Обязательно оставьте хайп. Эта серия только начинается, ребята. Я понял, что буквально любой может кодировать сейчас. И мы так рано пришли к повороту Cursor 2 и Google AI Studio, что да, эта серия может быть многочасовой. Это может быть серия на 5-6 часов, но кого это волнует? Любой, кто смотрит эту серию, будет иметь значительное конкурентное преимущество по сравнению со всеми остальными на рынке прямо сейчас. Увидимся в следующем Cursor 2, который буквально только что выпустил полный фронтенд, который изначально занял бы месяц для одного инженера, но, возможно, даже больше для любого неопытного инженера, типа видео. Игроки идут элитный Ли потерялся на танцполе [Музыка]