Transcription
Вы официально создали свое приложение в Google AI Studio, но, возможно, задаетесь вопросом: что дальше? Что ж, теперь я покажу вам, что дальше и как мы интегрируемся с бэкендами, такими как Firebase, Superbase, Versel и любыми другими типами бэкендов, поскольку шаги и процессы, которые я собираюсь показать вам в сегодняшнем видео, применимы ко всему. Поэтому давайте посмотрим, как мы это делаем. Давайте приступим. Снова добро пожаловать, народ. И добро пожаловать на третий эпизод продолжающейся серии. Это готовое программное обеспечение. Мы не закончили, но я здесь сделал много ценного. Э, одна вещь, на которую я хочу быстро указать, если вы видите это, например, вы сейчас не в сети, очевидно, это все еще очень глючно. Итак, Google AI Studio. Я все еще в сети. Я все еще могу вносить изменения. Все в порядке. Это просто сбой. Это не ваша вина. Это проблема Google AI Studio. В этой серии мы решали много задач. Итак, мы рассмотрели текстовый стек в первом эпизоде. Мы рассмотрели ценность приложения во втором эпизоде. И теперь, в третьем эпизоде, мы перейдем к пользовательскому интерфейсу этого приложения прямо здесь, надо мной. Моя цель в сегодняшнем видео — создать целевую страницу. Мы создадим пользовательский интерфейс для регистрации и входа. Затем мы подключим это к нашей странице ценности. И, наконец, к нашей странице настроек. Теперь, если это первое видео, которое вы открыли в этой серии, вы, вероятно, подумаете: «Подождите, что происходит? Кто этот парень Корбин? Как мы зашли так далеко?» Просто посмотрите в описании. Посмотрите плейлист. Чтобы я мог показать вам, как создавать реальное программное обеспечение, мне потребуется несколько эпизодов. Я могу сделать что-то вроде объединения всего этого в многочасовое видео. Но имейте это в виду. Я показываю вам реальную вещь. Я показываю вам, как это сделать. Это не быстрое 10-минутное видео о том, как создать реальное приложение. Нет, нет, нет. Я показываю вам, как это сделать. Поэтому это будет многосерийное, многоэпизодное видео. Итак, прежде чем вы уйдете, убедитесь, что вы поставили лайк, посмотрите первый эпизод. Но всем остальным здесь, мы в третьем эпизоде. Мне нравится. Нума драй. Теперь, прежде чем мы углубимся во все новые крутые функции, которые есть у меня в этом маленьком приложении, вот пара советов, которые могут вас расстроить. Итак, при использовании конструктора в его текущем состоянии я заметил пару вещей. Первое, что я заметил здесь, если я ввожу запрос, иногда он просто выдает ошибку, и я не могу получить этот запрос. Итак, первое, что я бы посоветовал вам сделать, это каждый раз, когда вы вводите запрос здесь, просто скопируйте его, а затем, если он сбоит, начните новый чат, введите тот же запрос. Второе — это то, что для мелочей, таких как, о боже, я неправильно написал. Thumb.io. Нет, это thumbio.com. И другие функции, которые я видел на платформе, настолько незначительны, что не стоят запроса здесь. Я просто исправлю это на более поздних этапах. Ладно, хватит болтовни. Позвольте мне показать вам все новые функции. Это заняло у меня около двух дней. Я бы сказал, всего шесть или семь часов. И не потому, что это вроде, хм, что дальше? Потому что при использовании этой функции чата требуется время, чтобы написать код для некоторых из этих вещей, но это действительно хорошо. Итак, первое, новый проект. Я хотел дать пользователю возможность включить анализ и предложения ИИ. Вы можете сказать: «О чем вы вообще говорите?» Сразу же, я прошел лишние 20 000 ярдов, народ. Я сказал вам в предыдущем эпизоде: создавайте ценность, создавайте, создавайте, создавайте, создавайте. Это, вероятно, один из самых впечатляющих конструкторов, которые я видел, когда дело доходит до создания реальной ценности и отсутствия ошибок. Итак, первое, что я добавил, было вроде, хорошо, давайте буквально получим визуальный контекст изображения. Так что, если я перетащу свое изображение сюда, оно проанализирует миниатюру. Также, давайте повеселимся в пользовательском интерфейсе. Если вы, пока это происходит, вы можете либо поставить запрос в очередь, либо буквально сыграть в игру. Почему бы и нет? Очевидно, если вы не хотите играть в игру, то вы просто переключаетесь обратно сюда, индикатор загрузки, и вы можете открыть новый проект и продолжить. Но возвращаясь сюда, он анализирует миниатюру. Поэтому теперь мы получим контекстные предложения, основанные на том, что происходит на этой миниатюре, народ. И вдобавок ко всему, я создал еще один режим под названием «спросить». Прежде всего, позвольте мне показать вам, что делает режим «спросить». Если я перейду в режим «спросить», я могу, по сути, попросить помощи с моей миниатюрой. Но просто чтобы доказать вам, что это работает, я могу сказать: «Что я держу?» Ведущий здесь. И этот чат был точно настроен и доработан специально для данных YouTube и миниатюр YouTube, а также для лучшего способа их обработки. Итак, эта функция «спросить» позволяет пользователю общаться туда и обратно и получать разные идеи о том, что им следует делать в видео. Если я вернусь к редактированию, вот где происходит веселье. Итак, я могу сказать: «Сделай так, чтобы я держал пару». Добавлена очень крутая анимация. Когда дело доходит до этой работы по разработке фронтенда в Google AI Studio, это чрезвычайно впечатляет, народ. Это одно из лучших. Единственное, что вас сдерживает, — это ваше воображение, чтобы я мог создать этот маленький пользовательский интерфейс, который вы только что видели, с ламой, 8-битной ламой, бегающей вокруг, и маленькими блестками, и маленькой кистью. Это было просто я, такой: «Может ли это сделать это?» И это сделало. Так что доведите его до предела. Я держу пару. Потрясающе. Еще одна вещь, которую я хотел сделать, — это возможность повторно выполнять запросы. Кроме того, вы можете видеть, что эти предложения специфичны для оригинальной миниатюры. Я могу переанализировать здесь, чтобы получить более конкретные предложения для пары. Еще одна хорошая вещь в программном обеспечении — это наша способность работать с регионами, особенно в программном обеспечении для редактирования миниатюр. Поэтому я могу перейти к своему лицу здесь, добавить запрос вроде, знаете ли, «надень на меня очки». Знаете что? Я не хочу этого делать. Или перейти к монитору и добавить что-то конкретное к монитору. Если я нажму на это, бум. что бы это ни было. Вот как мы можем использовать конкретные инструменты в редакторе миниатюр. Я также добавил простую функцию удаления фона. Так что я вроде, знаете ли, «удали фон». Что действительно круто, так это наша способность, даже если это не удается, я могу повторить этот запрос и попробовать снова. И вот оно. Теперь я могу скачать. Хочу ли я PNG или JPEG? Ваш выбор. По сути, то, что я пытаюсь показать вам прямо сейчас, — это просто создать как можно больше ценности. Все это было «вайб-кодировано». Все эти новые маленькие инструменты. Я даже не показал вам этот. Он предоставляет вам конкретные шаблоны для типа миниатюры, которую вы хотите создать. У меня есть стиль Мистера Би. У меня есть кинематографический влог. Технологии MKBHD. Так, например, я могу сказать: «Стиль Мистера Бист», и мы предварительно загрузим шаблон, который я создал с помощью «вайб-кодинга», и он добавится к этой миниатюре. День рождения, бургер, мега сырный взрыв, мега. И это не останавливается. Новый проект. Я добавил это сюда. Я могу снова проанализировать миниатюру. Я могу снова сыграть в игру. Я добавил дополнительную функцию папок. Так что, если я перейду сюда справа, я нажму «папка». Теперь пользователь может сказать: «Знаете что, это будет для миниатюр YouTube» или, может быть, «для XYZ клиента». Давайте просто сделаем это. XYZ клиент. Это все миниатюры, которые я сделал для XYZ клиента. Хм. Эта миниатюра, которую я сейчас создаю, предназначена для этого клиента. Я просто добавлю ее в эту папку. XYZ клиент добавить XYZ клиент теперь имеет соответствующую миниатюру. Вы начинаете видеть силу этого? Об этом еще никто не знает. Если вы смотрите это, вы чрезвычайно рано освоили кривую. Сейчас практически нет никаких барьеров для создания приложения. И сейчас настрой на «вайб-кодинг» или просто создание приложений из простого языка: «О, да, крутой фронтенд, но он ничего не может сделать». Э, да, может. Так что просто подождите. Эта информация станет мейнстримом через пару месяцев, потому что, очевидно, это требует времени, но вы сейчас являетесь экстремальным ранним адоптером, если вы смотрите это видео, потому что то, что я вам сейчас показываю, — это один из самых впечатляющих рабочих процессов, которые я когда-либо видел в любом конструкторе приложений. Без сомнения. XYZ клиент. Хорошо. Я хочу удалить это. О, вернуться домой. автоматически знает контекстуально, чтобы не удалять миниатюру, вернуться прямо домой. Очень приятно. И лучшая часть этого рабочего процесса также заключается в том, что, знаете ли, я возвращаюсь к исходному изображению, знаете ли, я хочу снова начать с чистого листа и могу продолжить. Кроме того, я хотел добавить дополнительную возможность для пользовательского интерфейса. Так что вы можете перетаскивать эти карточки и помещать их в папку таким образом. Приятно. Итак, что я хочу, чтобы вы взяли из этого маленького раздела проекта: новая папка, дом и категоризация различной ценности, которую мы предоставили конечному потребителю. В данном контексте, различные миниатюры. Как это переводится в ваше приложение? Потому что на самом деле организация фундаментально важна в любом программном обеспечении. Так что вы можете действительно позволить пользователю глубоко погрузиться в вашу среду и вашу систему. Если бы я сделал это программное обеспечение для миниатюр, которое было бы одноразовым, и у вас просто был бы журнал истории, да, это было бы круто. Но из-за того, что я добавил простую функцию проектов и папок и возможность категоризации, это дает пользователю возможность получить безумную ценность из этого за то, что мне потребовалось написать код или буквально «вайб-кодить» всего пару минут. Хорошо, может быть, пять, потому что вы знаете, как работает этот ИИ. Ладно, последнее, что я покажу вам, прежде чем мы выведем этот код из этой среды из-за ограничений этой среды, которые я объяснил в первом эпизоде, это вот что. Также, посмотрите на это. Это глючит. Это сломано. Корбин, о боже, я не могу прочитать, что там написано. Все кончено? Не волнуйтесь. Мы сможем исправить это в Cursor AI. Не беспокойтесь о таких маленьких ошибках в этой среде. Но я хотел добавить это. Поделитесь отзывом. Используйте это на 100%. Используйте это в своем приложении Google AI Studio прямо сейчас. Поставьте видео на паузу. Перейдите к нему прямо сейчас. Отправьте запросы. Мне все равно. Поделитесь своим отзывом, это будет фундаментальной частью вашего программного обеспечения, которое вам понадобится. Для меня, редактор миниатюр. Кто вы? Вы ютубер? Вы редактор? Вы разработчик? Далее, категоризация. Вы хотите новую функцию? Вы хотите сообщить об ошибке? Вы хотите общий отзыв? И, наконец, возможность получения информации. Я покажу вам, как подключить это к реальной базе данных, чтобы мы могли собирать эти данные. Почему это важно? Потому что на самом деле, когда вы создаете программное обеспечение, вы сможете добавлять новые функции каждый день или каждый второй день или со временем, пока вы продолжаете создавать программное обеспечение, новые идеи будут приходить к вам очень очевидно. Но используя что-то вроде этого, вы буквально краудсорсите, что является самым востребованным для вас, чтобы работать дальше. Это такое легкое дополнение и функция для любого приложения, которое я знаю, когда я добавляю это, я могу дополнительно создать скрипт, который будет автоматически анализировать все эти данные, чтобы сообщить мне, что объективно является следующим шагом для меня. Короче говоря, это я, по сути, говорю, зачем проходить через тяжелую работу по попытке провести глубокое исследование рынка, когда вы можете буквально попросить своих пользователей сказать вам, что создавать дальше. У меня есть куча других идей, я мог бы сделать миниатюру. Я слишком веселился в этом конструкторе, но я знал, как сделать это видео. Итак, вы вводите отзыв здесь, например, «привет, круто, потрясающе». Отправить отзыв, и вы сможете получить эти данные. Итак, вот мы идем. Я знаю, что это было немного долго, народ. Но я хотел показать вам все это, чтобы вы могли сказать: «О, это не шутка». Теперь я даже не смотрел код, и я смог зайти так далеко. Что вам нужно сделать дальше, это скачать приложение. Теперь, к тому времени, когда вы посмотрите это видео, здесь может быть больше опций для других интеграций, таких как Firebase, или, альтернативно, то, что у него есть сейчас, GCP. Теперь, да, в этой серии я покажу вам, как это сделать с Firebase, просто потому, что это продукт Google, он интегрируется нативно. Давайте просто облегчим себе задачу. Но если вы смотрите с точки зрения, вроде «Корбин, мне не нравится Firebase. Я не хочу использовать Firebase. Позвольте мне использовать Superbase». Вы все равно можете посмотреть эту серию и сделать все, что я собираюсь показать вам. Поэтому, первый шаг, независимо от того, используете ли вы Firebase, Superbase, Versell, что бы вы ни использовали, даже если здесь есть нативная интеграция, я умоляю вас, скачайте приложение. Нажмите «Скачать приложение». Как только вы его скачаете, это будет этот приятный маленький zip-архив. Дважды щелкните. Это даст вам папку. Как вы видите прямо здесь, здесь весь ваш код. Что я хочу, чтобы вы сделали с этим, это поместить его куда-нибудь особенное. Я помещу его в свою папку документов на своем Mac. Как только вы поместите его в папку документов, перейдите в свою IDE, интегрированную среду разработки. Я буду использовать Cursor AI. Я не знаю, что вам использовать. Используйте все, что вам нравится. Мне очень нравится Cursor в последнее время, и они только что выпустили огромное обновление буквально сегодня, 2.0. Потрясающие вещи. Вы нажмете «Открыть проект». Вы просто перейдете туда, где вы только что поместили эту папку, которую я вам показал. Итак, для меня это было в документах, и это называлось точно так же, thumb.com. Итак, как только мы это сделаем, у нас будет вся наша информация здесь. У нас есть env.local. На самом деле очень мило с их стороны оставить это для нас. Итак, как только мы это сделаем, я хочу, чтобы вы сделали две основные вещи. Первое, что мы сделаем, это создадим наш ключ API Gemini. Это то, что дало нам возможность делать все эти крутые функции, такие как чат, нано-банан, все такое. Чтобы правильно создать свой ключ API, вам нужно вернуться в Google AI Studio. Вы перейдете в нижний левый угол, где написано «Получить ключ API». Вы нажмете на него. Следующее, что вы сделаете, это просто нажмете «Создать ключ API». Как только вы нажмете «Создать ключ API», назовите его. Итак, я назову свой thumbio. А затем мы можем выбрать наш облачный проект. Итак, сейчас у меня только один, который отображается. Я создам проект. Название проекта. Сделайте то же самое имя. На самом деле, я, вероятно, должен был назвать ключ, возможно, thumbo burner, потому что я все равно удалю ключ и затем буду использовать продакшн-ключ для продакшена. Но ради этой серии на данный момент, это нормально, как я это сделал. Мы выбираем импортированный проект. Thio назовем наш keyo. Приятно. Как только вы это сделаете, вы перейдете вправо и нажмете «Копировать ключ API». Мы вернемся к нашему файлу EMV. И поверьте мне, если вы еще не понимаете, что это значит или почему мы вообще это делаем, это станет более понятным по мере продвижения. Но пока все, что я хочу, чтобы вы сделали, это вставьте свой ключ API сюда. Он должен начинаться с чего-то вроде AI, а затем просто строка. Он должен быть розовым, или, я полагаю, это зависит от темы вашей IDE, но это должна быть строка. Это будет довольно очевидно. Как только вы это сделаете, мы теперь должны подключить это к GitHub. Но прежде чем мы даже подключим это к GitHub, чтобы у нас был действительно хороший контроль версий, позвольте мне показать вам несколько «вайб-кодинг»-запросов. Итак, я перейду к агенту здесь. Я подключусь к браузеру. Я открою вкладку браузера. Так что мы можем видеть наш пользовательский интерфейс и веб-сайт в этот момент здесь. Следующая команда, которую я выполню, будет просто «запустить приложение». Что произойдет здесь, особенно если вы никогда в жизни не занимались разработкой или у вас ограниченный опыт разработки, это то, что может потребоваться установить необходимые зависимости, чтобы даже запустить приложение. И что я имею в виду, это если вы помните из первого эпизода, фреймворк React и TypeScript, ему может потребоваться установить сам React, чтобы он мог работать локально на вашем компьютере. Это длинный способ сказать, что вся эта сложность вам действительно не нужно беспокоиться anymore. потому что, когда я говорю «запустить приложение», это просто поймет, и это сделает это за меня. Очевидно, мне не нужно этого делать, потому что у меня уже есть эти пакеты, потому что у меня куча разных приложений. Но пока мы нажмем Enter. Теперь эта серия будет очень «вайб-кодинговой». Я постараюсь максимально ограничить файлы с кодом, чтобы не пугать вас. Но я буду время от времени вставлять реальные знания с точки зрения разработки, чтобы вы могли начать строить эти кирпичики. Один кусок реальных знаний, package.js, и я имею в виду реальные знания, просто основы разработки. Вот здесь, скрипты. Вы можете спросить себя, почему он смотрит на package.json? Ну, он ищет доступные скрипты. Где скрипты? Строка шесть. И что конкретно происходит здесь, это npm rundev. npm rundev vite. Это наши приятные маленькие зависимости, которые были в нашем приложении, наш текстовый стек. Помните материалы для создания приложения. Я знаю, что это выглядит чрезвычайно запутанно. Не волнуйтесь. Это вроде v.2.0. Что это значит, это вроде версии, их версии их собственной маленькой ситуации. Это как если бы вы когда-нибудь играли в Call of Duty, и вы были на патче до нового обновления, вы находитесь на более ранней версии. Ну, вам нужна самая последняя версия. Хорошо, я определил, что он работает здесь. Но вы заметите, что если я перейду в этот браузер в Chrome или перейду в этот браузер в IDE, он не сработает. Так что, может быть, я могу устранить проблему, сказав «перезапустить браузер», он все равно может не сработать здесь. Так что я снова загружу. Он снова не сработал. О нет, мы закончили. Я перестану разрабатывать. На самом деле, все, что вам нужно сделать, это просто сделать что-то вроде сделать скриншот этого, скопировать этот код, или, я полагаю, этот отчет об ошибке, и просто перетащить его в чат, нажать Enter. Это рабочий процесс. Всякий раз, когда вы сталкиваетесь с ошибкой, вы понятия не имеете, что происходит. Попросите ИИ о помощи, и он поможет. Так что я буквально буду продолжать устранять эту проблему, пока она не заработает. Моя главная цель этой серии — я не буду смотреть в этот код и решать его. Я позволю ИИ решить его, чтобы доказать вам, что вы можете буквально «вайб-кодить» программное обеспечение с нуля. В этом суть этой серии. Так что мы будем продолжать проверять это здесь. Итак, это была моя первая попытка. Вы узнаете, что чат завершен, когда появится «сохранить все», «отменить». Так что я просто сохраню все, буду действовать так, как будто я ничего не знаю прямо сейчас. Я перезапускаю браузер. Я ввожу URL, и он снова не работает. Так что, поэтому давайте попробуем это, потому что он все еще сломан. Я также пробовал localhost 3000. Я скажу это. Хорошо, не прекращайте кодировать, пока это не заработает. И я могу видеть свое приложение либо на localhost 5173, либо на localhost 3000. Слишком много серверов работает на слишком многих разных портах, и это вызывает конфликт? Мы узнаем. Мы позволим ИИ искать за нас. Бум. Он проанализировал это. Теперь, что я хочу, чтобы вы знали, это то, что вы только что добавили что-то в свой набор инструментов для «вайб-кодинга». Что было добавлено в мой набор инструментов, Корбин? Посмотрите на запрос. Не прекращайте кодировать, пока это не заработает. Включите эту функцию браузера. Позвольте ему визуально видеть бэкенд или фронтенд за мной прямо сейчас. Позволив ему видеть фронтенд, он заметит, когда возникают ошибки или если он даже не работает. Поэтому он не обязательно попадает в циклы. Вместо этого он фактически начинает самокорректироваться. Теперь одна вещь, которую я заметил здесь, довольно интересная, особенно в Cursor, это то, что Cursor, кажется, скрывает env здесь. Посмотрите на это. Функции ИИ отключены, файл в Cursor. Cursor игнорирует. Так что я посмотрю, как мы это остановим. Так что я могу просто сделать скриншот этого. И как только я сделаю скриншот, я перетащу его в чат. Я показываю вам это, так что, когда возникают маленькие проблемы в самой IDE, вы также можете использовать ИИ и просто сказать, что вы не видите эти переменные из-за игнорирования Cursor. Я просто решу это, чтобы вы могли их видеть. Откуда ты это знаешь, Корбин? Ну, просто наведите курсор. Вы можете видеть файлы в Cursor ignore. Нажмите Enter. Моя цель прямо сейчас, когда вы впервые скачиваете приложение из Google AI Studio, — можем ли мы его отобразить? Работает ли оно? И как только мы это подтвердим, мы подключим его к GitHub. Поскольку мне нравится иметь V1, первый же пуш в GitHub, по крайней мере, будет достаточно чистым, чтобы вы могли функционально использовать приложение. Поэтому мы сможем откатиться к нему, как вы увидите позже в серии. Посмотрите на это. Я нажму «принять». Он обновил его для меня. И маленькое сообщение исчезло. Так что теперь мы можем это прочитать. Вот так это просто, народ. Честно говоря, любой может написать приложение. Вопрос в том, готовы ли вы просто преодолевать возникающие ошибки? Я также хочу, чтобы вы заметили, если вы действительно хотите узнать, что происходит здесь, вы можете прочитать чат. Итак, решение создано ccursor ignore и затем явно разрешено env. Я скажу «сохранить все» здесь. И пока все хорошо. Если я вернусь к редактору миниатюр, это должно сработать. Но давайте выясним. Единственное, что я собираюсь сделать здесь, это переключиться в режим агента, потому что мы «вайб-кодим». Это время «вайба». Так что нам нужно провести время «вайб-кодинга». Вайб-код. Поставлю это сюда. Приятно. И тогда у нас есть наши приятные маленькие агенты слева. Э, маленькие чаты. Я имею в виду, маленькие пути чата. У нас есть агент за мной. Мы можем продолжать здесь. Так что я буду посередине. Еще одна вещь, которую я добавлю, это будут инструменты разработчика Chrome. Это будут наши красивые консольные логи. Так что, если возникнет какая-либо ошибка в краткосрочной перспективе, мы сможем прочитать их здесь. #битконсольный лог. Так что, если все это сделано, давайте протестируем. У меня нет понятия, сработает ли это, но мы протестируем. Хорошо, вот оно. Это еще одна добавленная функция, но пока я просто скажу «пропустить на данный момент», хорошо? Дайте мне сделать это немного больше. Да, так что этот пользовательский интерфейс не так уж сжат. Вот так. Мне нравится. Мне нравится. Хорошо, вот оно. Итак, я позволю этому анализировать. Наша первая цель, когда вы достигнете этой точки в руководстве, — убедиться, что все, что работало в Google AI Studio, работает здесь. Так, например, давайте сделаем простой запрос. Э, сделайте так, чтобы ананас был у меня в руке. Моя цель здесь — просто увидеть, все ли подключено. Все ли в порядке? Есть ли там именно то, почему мы это делаем. Итак, у нас ошибка. Не удалось получить ответ. Не удалось обработать изображение Gemini. Итак, мы видим это. Это шаги, народ. Вы получаете ошибку. Перейдите в консольный лог, как я показал вам, скопируйте все это. И тогда мы сделаем здесь, поскольку этот чат довольно хорош, и мы много сделали, просто запустив приложение, я могу нажать «новый агент» здесь, а затем вставить эту ошибку. И затем убедитесь, что вкладка браузера включена, чтобы вы могли визуально видеть это, а затем нажмите Enter. Что это сделает, это либо запросит у нас определенную информацию, чтобы это работало. Например, о, причина, по которой это не сработало, заключается в том, что вы не предоставили ключ API XYZ, либо альтернативно, это будет глубже изучить эту проблему и просто решить ее естественным образом. Я так рад, когда такие вещи случаются в видео, народ. когда я пытаюсь описать конкретный случай ошибки, а затем ошибка происходит в прямом эфире. Это прекрасно, потому что, как вы уже знаете, «вайб-кодинг», вы будете сталкиваться с ошибками. Так что, если вы знаете, как устранять ошибки, тогда вы можете буквально создавать что угодно. Теперь иногда при копировании и вставке это может быть избыточным, если вы просто хотите альтернативно просто прочитать это. Ошибка может быть очень ясной. Но вы заметите здесь для меня, это ошибка вызова API Gemini, ошибка API код 429. Мне все равно, какое сообщение. Вы превысили свою текущую квоту. Пожалуйста, проверьте свой план и биллинг. О, конечно. Так что мне просто нужно связать платежный аккаунт с моим ключом API. Чтобы сделать это, мы просто перейдем туда, где находятся наши ключи, и нажмем «Настроить биллинг». Это приведет вас к вашему GCP и соответствующей странице биллинга. Убедитесь, что правильный проект выбран здесь. Для меня это был thumb. Я скажу «связать платежный аккаунт». Для меня это просто мой платежный аккаунт. Настроить аккаунт. Сделав это, вы заметите наши уровни здесь. И мы готовы. Так что я собираюсь просто остановить это быстро, и мы сделаем это, удалим это. Я просто сделаю новый чат, новый агент. Также я пробую GBT5 Codeex прямо сейчас. Я посмотрю, хорош ли он. Я только что заметил, что это новая модель, добавленная. Похоже, они также добавили модель Composer. Поэтому я просто собираюсь использовать gvt5 codeex. Посмотрю, хорош ли он. Что я сделаю здесь, это также перезагрузим эту страницу. Хорошо. И мы сделаем еще один запрос. Нажмите Enter здесь. И давайте на самом деле откроем консольный лог снова, народ. Нажмите «консоль». И давайте посмотрим, что получится здесь. Приятно. Мы буквально держим ананас. Мне нравится. Ананасы очень хорошие, народ. Хотя, не ешьте слишком много, потому что слишком много может быть слишком много. Но у нас есть ананас, что означает, что Gemini API успешно подключен, и проблема была в биллинге. Э, я немного поторопился, прочитав сообщение об ошибке и сделав это сам. Но теоретически, чат-бот ИИ дошел бы до конца, сказав: «Эй, э, вы не настроили платежный аккаунт». О, извините. Извините. Но это работает. Давайте проверим другие функции. Перейдите сюда. Спросите, скажем: «Что я ношу?» Потому что сейчас я хочу протестировать видение, правильно ли данные видения. Так что он должен сказать, что я ношу красную рубашку. И давайте посмотрим. Мне, возможно, придется немного подкорректировать этот пользовательский интерфейс. Крутая белая бейсболка. О, это круто. Шикарный бордовый или темно-красный свитер с длинным рукавом. Да, нет. Точно. А затем он говорит: «Выглядишь шикарно, приятель. Спасибо, Gemini. Спасибо». Итак, все функционально работает. Теперь, честно говоря, я мог бы продолжать возиться здесь, народ. Но, как вы уже знаете, вы получаете основы. Как мне решить эту часть? Как вы решаете эту часть, это просто используйте свое приложение, создавайте свое приложение. Если вы столкнетесь с ошибками, используйте консольный лог, скопируйте всю ошибку, поместите ее в чат, продолжайте. Что дальше? Что дальше здесь, это подключение этого к GitHub для контроля версий. Вам абсолютно понравится GitHub. Это будет ваш лучший новый друг. Как будто вы полюбите его или ее. GitHub позволит вам, когда вы раньше использовали Google AI Studio, и вы выпускали небольшое обновление, и оно абсолютно разрушало ваше приложение, вы не могли эффективно откатиться. О, я люблю GitHub. Он сможет сделать это для нас. Итак, что вам нужно сделать, это перейти к своим репозиториям и нажать «создать». Вы дадите этому репозиторию имя. Очевидно, я бы назвал его практически так же, как вы уже создали. Итак, для меня это Thumbo. Э, я бы, вероятно, сделал его приватным, а затем нажал «создать репозиторий». Если вы сделаете его публичным, любой в мире сможет увидеть ваш код. Так что, если вы не хотите делать проект с открытым исходным кодом, выберите публичный. Если вы хотите сделать проект, на котором вы хотите заработать немного денег, выберите приватный. Создать репозиторий. Итак, как только вы создали свой репозиторий, вот как он будет выглядеть. Не волнуйтесь, народ, кто уже смотрел мое видео о GitHub. Я не буду углубляться в настройку вашего SSH-ключа или, альтернативно, что такое GitHub? Как использовать GitHub? Не беспокойтесь об этом. Мы сделаем это немного здесь. Но, как я уже сказал в первом эпизоде, народ, вам нужно посмотреть это 46-минутное руководство, потому что я не буду добавлять его в уроки, подобные этому. Так что, если вы почувствуете разочарование, следующий запрос, вы скажете: «Этот парень даже не научил меня пользоваться GitHub. Это шутка. Вы не посмотрели 46-минутное видео». Вам нужно посмотреть предварительные условия, прежде чем вы дойдете до этой точки, народ. Ладно, мы сделаем это. Прежде всего, SSH, который мы узнали в другом видео. Скопируйте его. Итак, вот «вайб-кодинг»-запрос для подключения к GitHub. Подключите этот репозиторий кода к этому через SSH. Эту ссылку, которую мы только что скопировали. Ваша будет отличаться, каким бы ни было имя вашего проекта. Так что убедитесь, что имя вашего проекта здесь или имя вашего репозитория, я полагаю. Сделайте так, чтобы основная ветка и первый коммит были вроде «лайк и подписка». Смайлик. Вы еще не поставили лайк? Вы еще не подписались? А затем нажмите Enter. Это, я люблю это. Это лучшая часть здесь, народ. Вы должны понять, что недостающий элемент — это понимание GitHub. Это сделает все проще. Итак, я сделаю его дело. Если вы впервые запускаете команду GitHub, ему придется установить сам Git, чтобы мы могли запускать команды Git. Если это не имеет особого смысла, не волнуйтесь. Или просто спросите модель ИИ, что только что сказал этот парень? Он просто сказал что-то вроде того, что если у него еще нет Git, ему нужно установить Git. Что такое установка Git? Что вообще значит Git, Корбин? Это больше не имеет значения. Мы в эпоху «вайб-кодинга». Вы можете буквально создать приложение без каких-либо знаний программирования. Поверьте мне, народ. Мне даже не нужно выпускать сумасшедшую маленькую ветку X, чтобы доказать это. Я буквально записываю это. Итак, я сказал, что репозиторий теперь находится в основной ветке. Давайте проверим. Я перезагружу. И его нет. Так что, если я перезагружу. О, я следую этому руководству. Это отстой. Хорошо, тогда просто сделайте это. Ладно, еще не подключилось. О чем ты говоришь? Курсор. Сделайте скриншот. Я не вижу его в своем репозитории GitHub. Отправьте его. Так что я делаю. Так просто, народ. Введите. Иногда эти модели ИИ, хотя они абсолютно потрясающие, будут галлюцинировать или вести вас по пути: я не прав или он не прав? Часть времени, или, возможно, большая часть времени, это неправильно. Так что вам просто нужно сказать ему, что делать. Перезагрузить. Вот оно. Ладно, это потрясающе. Итак, у нас есть наш приятный маленький «лайк и подписка». Это наш первый коммит. Почему ты сказал «основная», Корбин? Потому что по умолчанию используется «master». Мне больше нравится использовать «main». Так что это будет наша основная ветка. И если вы знаете это руководство по GitHub, то вы скажете: «Да, детка, у нас теперь основная ветка. Теперь мы можем делать маленькие маленькие PR. Я люблю свои PR. О да, время PR. Скоро будет весело. Так что это сняло с меня кучу стресса. И это потому, что при использовании Google AI Studio я буквально чувствовал себя так, будто нахожусь в темной комнате, пытаясь застрелить страшного монстра. И если я выстрелил не туда, то все сломается, потому что Google AI Studio в настоящее время не имеет контроля версий. Это имеет контроль версий. Так что теперь эта комната полностью освещена. У меня буквально есть аимбот, и мы идем. Так что давайте сделаем это. Ладно. Ладно. Ладно. Итак, мы «вайб-кодим». Я переключусь обратно на редактор, народ, потому что мне нужно дать себе немного больше контекста. Я все еще люблю видеть файлы, хорошо? Я старомоден. Итак, вот структура нашего продукта. Я даже не успел посмотреть код. Позвольте мне посмотреть этот код. Ладно, так что у нас есть компоненты здесь, и это компоненты, на которые я ссылался. Все эти вещи здесь. Так, например, image uploader.tsx. Я знаю, что это выглядит страшно, но по сути, все, что это такое, это вот этот маленький компонент пользовательского интерфейса. Э, первое, что мне очевидно не нравится в этом проекте, это то, что он не рефакторен эффективно и не имеет хорошей организации. По сути, то, что я вижу прямо сейчас, это то, что я вхожу в чью-то комнату, и она грязная. Давай, сложи одежду. Джон, я говорю с тобой, Джон. Я даже не знаю, Джон ли твое имя, но если твое имя Джон, то ты просто такой: «Вау, вау, это четвертая стена». Джон, иди сложи одежду. Твое белье пищит. Давайте сделаем этот код красивым. Я начну новый чат, потому что мы сделали что-то большое в предыдущем чате, а именно подключение к GitHub. И теперь я очень, очень взволнован, народ, потому что теперь мы можем использовать силу ветки. Теперь, чтобы создать ветку, ветку GitHub в «вайб-кодинговом» стиле, мы делаем это. Я просто скажу «создать новую ветку». Назовите ее «фронтенд». Обратите внимание на точки с запятой здесь или кавычки. И так мы будем называть базовую ветку. Если вы даже не знаете, что такое ветка или что это вообще значит, не волнуйтесь. Это станет более понятным по мере продвижения по серии. Я настоятельно рекомендую вам буквально смотреть это видео параллельно с тем, как вы проходите этот этап прямо сейчас. Потому что этот первый начальный этап, я знаю, что это много, но посмотрите. Я ни разу не писал код, народ. Я буквально просто разговаривал с ним здесь. Но я знаю, что сказать. Это ключ. Ладно, давайте посмотрим, была ли создана эта новая ветка «фронтенд». Что вы заметите сразу же, это то, что она не появится на GitHub, потому что она только на нашем компьютере. Но что вы заметите внизу слева, это то, что мы находимся в «фронтенде». Поэтому теперь, когда вы официально сделали, мы можем сойти с ума. Если я полностью все испорчу, и все это пойдет насмарку, я могу откатиться к «основной» ветке, и у меня будет эта приятная версия приложения «оно работает, оно работает». Давайте сделаем мега-запрос. Говорит, что процессы для вас делают то же самое. Хорошо, я хочу, чтобы вы посмотрели на мою папку компонентов и реорганизовали ее для масштабируемости с помощью папок. Итак, это папка компонентов вверху слева. Далее, давайте создадим папку для всех соответствующих страниц. Что я имею в виду под страницами, э, /signup/loss settings. Ситуация сейчас такая, что у нас есть только папка компонентов, но это чисто для функции студии. Поэтому это страница студии. Так что я решил, что «это будет страница студии». Так что /studio — так она будет отображаться в URL. Пока я нажму Enter, и давайте посмотрим, как она работает. Итак, по сути, что вы узнали прямо сейчас, это то, что файлы, которые Gemini предоставляет здесь, а также базовая архитектура и базовая структура вашего программного обеспечения могут быть не полностью оптимизированы. Поэтому используйте «вайб-кодинговые» термины. Можем ли мы реорганизовать это, чтобы сделать его более масштабируемым? Так что, если это приложение абсолютно взорвется, я не буду просто испорчен кучей файлов, и он просто скажет «компоненты», и это будет чрезвычайно неоднозначно. Лучше иметь такие практики очистки на ранних этапах, чтобы, когда вы создадите приложение с огромным трафиком, вы не искали в этом. Я не хочу идти в Алису в Стране чудес. Хорошо, я не хочу, чтобы этот маленький кролик указывал на часы. Если вы не поняли эту отсылку, то мои извинения. Итак, вот оно. С этим запросом он переструктурировал эти страницы. Посмотрите на эту целевую страницу студии. Мы сможем добавить к этому настройки. Также вход, выход, все такое. Теперь я хочу, чтобы вы имели в виду, народ, это заняло у меня около пяти-шести минут, но вы просто позволяете помощнику по «вайб-кодингу» делать свою работу. Раньше, когда вы кодировали с ИИ, вы вводили такой запрос, и он выполнялся за 30 секунд, но код был бы абсолютным мусором. Теперь, когда вы вводите такой запрос, это займет шесть-семь минут, чтобы сделать это правильно. Итак, что это значит? Что у нас здесь? Теперь у нас есть. Итак, у нас есть репозиторий, который будет намного чище в масштабе, когда мне нужно будет добавить кучу разных страниц. Сейчас в приложении мы просто отображаем страницу студии. Но вы заметите, что сейчас это / без студии. Кроме того, в приложении, здесь отображаются все страницы. Вот почему здесь написано «вернуть страницу студии». Это все, что отображается. Что интересно, я даже не просил этого, он создал стартовую целевую страницу. Так что мы попробуем это. Если ваш запрос не привел к созданию целевой страницы в папке страниц, просто попросите добавить простую целевую страницу в папку страниц. Поэтому следующий запрос будет таким. Теперь, когда у нас есть целевая страница и студия, сделайте так, чтобы мы отображали. Отображение — это как мы показываем целевую страницу на /, что похоже на главную страницу, а затем студию на /studio. Это будет иметь смысл, когда я это сделаю. Нажмите Enter для контекста. Прямо сейчас / — главная страница — это страница студии. Но я этого не хочу. Так что здесь произойдет то, что вы сможете увидеть реальную навигацию. И, честно говоря, давайте сделаем это. Я скажу: «Сделай так, чтобы, когда я нажимал на CTA, кнопку призыва к действию, эти маленькие кнопки на целевой странице вели на /studio». Так что мы можем увидеть, как все это работает вместе. Нажмите Enter здесь. И что действительно круто, так это то, что у Cursor есть функция Q, которая позволит нам увидеть это сразу. Q Q. Почему это звучит так странно для меня? Я правильно это говорю? Q. Мы оставим это. Q. И вот оно. Это в прямом эфире. Это работает. Я также хочу отметить, народ, если вы видите такие ошибки в консоли и начинаете паниковать, вроде «о боже, у меня 403 запрещено. Все сломано?» Не волнуйтесь. Вы будете получать предупреждения. Вы будете получать ошибки. Это очень стандартно. Если вы мне не верите, зайдите в любую проверку Stripe, нажмите «инспектировать», нажмите «консольный лог». У них есть ошибки в проверке Stripe, которая является компанией стоимостью в миллиард долларов. Это реальная вещь, которая просто случается с программным обеспечением. Во многих случаях это на стороне пользователя, а не на стороне приложения, когда дело доходит до отображения такой ошибки, но это не ломает базовое приложение. Посмотрите на это, народ. Мне нравится. Редактирование на основе чата, мгновенные предварительные просмотры, управление проектами. Почему Thumbio? О, мне нужно. Это будет мое следующее обновление. Я покажу вам, как массово обновлять для очень конкретного диктанта, используемого мной. Он продолжает говорить thumb.io. Это thumbo.com. Давай. Э, предположительно, это сделано. Так что я скажу «сохранить все» здесь. И в MTX мы должны ожидать две страницы здесь. И обратите внимание на новую вещь, которую вы только что узнали, которую вам не обязательно знать, но хорошо, чтобы вы понимали это на фундаментальном уровне. Маршрут, это / здесь. Итак, маршрут / целевая страница. Отобразить целевую страницу. /outstudio отобразить страницу студии. Что это значит? Когда мы перейдем сюда, это означает, что прямо сейчас мы находимся на localhost 3000. Или, альтернативно, когда я прикреплю это к реальному домену, это будет thumbo.com. А затем no.com/studio приведет нас сюда. И посмотрите на эту /studio. Две вещи, которые я хочу сделать. Первое, что я сделаю, это быстро сделаю коммит, чтобы мы могли сохранить это место, поскольку мы находимся в действительно хорошем месте прямо сейчас. Не только мы структурировали это для масштабируемости, но и, кроме того, мы создали возможность для нескольких страниц в приложении. Чтобы сделать это, нам больше не нужно использовать терминал. Сделайте коммит, назовите его «масштабируемый и несколько страниц». И из-за того, что я нахожусь в «фронтенде» здесь, вы заметите, что эта маленькая звездочка исчезнет. Посмотрите на эту маленькую звездочку. Она скажет «до свидания». До свидания. Она снова появится. Так что Aira Zen, как вы уже знаете из Z Deutsland. Так что мы позволим этому пушиться здесь. И тогда вы заметите, что наконец-то это появится в нашем профиле GitHub как потенциальный PR. Теоретически, мне не обязательно извлекать этот PR. Я могу просто подождать, пока не буду готов. Так что, если я прокручу сюда, перезагружу, мы должны скоро увидеть вторую ветку. Он остановился немного раньше. Похоже, сейчас Cursor не хочет пушить его до конца. Так что мы просто скажем «пушить». Вы заметите, что когда он говорит «созданы все запланированные обновления», дайте мне знать, хотите ли вы его пушить. Так что я скажу «пушить». Для вас, для справки, если вы следовали моим запросам и говорите: «Корбин, это не отображается на GitHub». Иногда вам нужно просто дать зеленый свет для Cursor, он может быть немного нерешительным, стоит ли его выполнять. И для всех моих фанатов «Звездных войн» там, выполните приказ 66. Вот оно. И мы разберемся с этим позже, когда закончим с фронтендом, но мы не закончили с фронтендом. Итак, первое, что я хочу сделать, это начать новый чат. Мы сделали много всего. Это выглядит потрясающе. Э, позвольте мне избавиться от этой раздражающей штуки thumbio, вроде этого thumb.io, потому что, поверьте мне, народ, я уже знаю, что один из вас будет монстром и купит этот домен, а затем просто разместит там что-то сумасшедшее. Хорошо, успокойтесь. Так что я добавлю это в контекст. Также я скажу это. Я скажу: «Никогда не говорите нигде в приложении thumb.io. Чтобы быть ясным, мой сайт — thumbo.com. Поэтому брендинг — просто thumbo». Что я хочу, чтобы вы поняли здесь, это то, что вы можете на самом деле сказать агенту здесь, посмотрите на весь мой репозиторий. Прочитайте каждый файл, и если вы найдете что-то очень конкретное, удалите это, добавьте это, измените это. Это потрясающе. Мы не могли сделать это раньше из-за ограничений контекста. Что я имею в виду под контекстом, я имею в виду объем данных, который мы могли бы ввести в чат, чтобы получить ответ. Но окно контекста сейчас такое огромное. Объем данных, который мы можем ввести в чат, чтобы он понял весь ваш репозиторий, настолько велик сейчас, и он только растет, что он может делать удивительные вещи, такие как чтение всего этого. Теперь, теоретически, да, я знаю, я понимаю. Все вы, старомодные люди, вроде «Корбин, вы могли бы пойти в строку поиска здесь и найти ее и изменить ее таким образом». Ну, а что, если я просто хотел «вайб-кодить»? А что, если я просто хотел «вайб-кодить»? Хорошо, так что этот пуш. Так что мы будем продолжать. Мы должны увидеть миниатюру там. Потрясающе. Выглядит красиво. Следующая вещь, которая меня немного раздражает, это вроде «редактор миниатюр AI» здесь, и это связано с вашим index.html. Что это, Корбин? Ваш index.html HTML — это то, как он будет отображаться в поиске. И что я имею в виду под поиском, это вот что: Google Perplexity AI отображается в чате. Это эта гиперссылка здесь и лежащее в основе описание. Поэтому я сделаю следующее. Я создам новый чат. Я нажму @ index html. Теперь мы ссылаемся на конкретный файл за мной. Я просто скажу: «Мне нравится пользовательский интерфейс, поскольку расцветка пока выглядит хорошо, но измените заголовок и мета-описание, чтобы они соответствовали миниатюре и нашей цели. Лучший редактор миниатюр AI для YouTube. Какова ваша цель? Какова ваша причина создания вашего приложения? И давайте просто обновим весь этот index.html. Так что, когда он будет проиндексирован Google, я заметил, что он сказал «проиндексирован» в более раннем видео, что, вероятно, звучит чрезвычайно запутанно для некоторых из вас. Проиндексирован — это просто другой способ сказать, что Google говорит, когда их маленькие боты смотрят на ваш веб-сайт и извлекают данные заголовка, вроде «О, это редактор миниатюр». Это то, что я имею в виду под индексацией. Хорошо.
Выглядит хорошо. Отлично. Thumbo — лучший редактор YouTube AI-миниатюр для создателей, которым нужны привлекающие внимание визуальные эффекты за считанные секунды. Мне нравится. Итак, если я вернусь сюда, вы заметите, что он появляется здесь, в панели. Так что мне это нравится гораздо больше. Отлично. Итак, вот что я собираюсь сделать прямо сейчас, потому что, по сути, вы многому научились в этом руководстве, когда дело доходит до фронтенда. Давайте быстро создадим эту страницу входа. Я покажу вам, как использовать фиктивные данные здесь. А также я покажу вам, как мы можем быстро создать страницу настроек. Все остальное, что касается Корбина, как мне создать лучший футер? Очень простые вещи. Это просто код в стиле vibe. Если вы помните из предыдущей части руководства, у нас были созданы эти маленькие дизайны в стиле vibe. Итак, позвольте мне просто пройтись по цели, верно? Итак, создайте хороший верхний блок, как я описал в первом или втором эпизоде, не помню точно. Поместите туда хороший контент. Что, черт возьми, делает ваша штука? И добавьте футер с соответствующими ссылками, которые я описал в предыдущем эпизоде. Одна большая вещь насчет верхнего блока, которую я советую вам сделать, вот небольшой профессиональный совет: используйте программное обеспечение для записи, такое как Studio, и просто создайте очень быстрое демо. 20-30 секунд очень быстро. Вам не нужно быть профессионалом. И когда я говорю демо, ребята, мы переходим к моему X. Я говорю об одном из этих демо здесь. Вау, супер круто, потрясающий продукт. Например, это буквально 30 секунд. Сделайте то же самое для вашего продукта. Покажите свой продукт менее чем за минуту. Вы получите безумно лучшие конверсии. А затем просто поместите это сюда. Вы будете готовы, я полагаю. Дайте мне знать в комментариях, если вы хотите, чтобы я показал вам, как сделать такое видео. Это на самом деле может быть очень полезно. Я не уверен, заботит ли вас это. Итак, целевая страница, мы просто скажем, что она готова, потому что я сделаю это сам. Я не хочу тратить ваше время прямо сейчас. Давайте просто быстро сделаем регистрацию и вход. Хорошо. Итак, чтобы сделать это, мы начнем новый чат здесь и определим, что нам нужна эта страница. Итак, вот подсказка. Нам нужна страница входа и регистрации. Добавьте ее в папку страниц. Вот здесь, где находится landing studio. И пока что давайте сделаем вход по электронной почте и через Google. Сделайте так, чтобы это выглядело как на прикрепленных изображениях. И мы их довольно быстро получим. Я покажу вам, о чем я говорю. И пока что CTA ведет на эти страницы. Регистрация. Вход. А затем пока что фиктивные данные. И когда я нажимаю кнопку Google, она ведет нас в /studio. Итак, о каких скриншотах я говорю? Теоретически, я мог бы просто запрограммировать страницу входа/регистрации. Но если есть страница, которая вам нравится, например, если мы перейдем к bumpups, мне нравится эта страница. Я мог бы просто сделать скриншот. Перейдите к ее версии для регистрации. Выглядит потрясающе. Снова сделайте скриншот. Я имею в виду, вот насколько простым стало фронтенд-кодирование, ребята. Я просто перетащу их сюда. Теперь, честно говоря, возможно, он не сможет получить этот маленький логотип Google, маленькие изображения здесь, но он получит все, что я хочу на странице регистрации. Итак, посмотрим, как он справится. Я нажму Enter, и он продолжит. Помните, всегда включайте эту функцию браузера. Всегда держите это включенным. Это сэкономит вам кучу головной боли. Это совершенно новое в кодировании. Посмотрим, как это выглядит. Он закончил. Теперь, одна вещь, которую я хочу отметить, ребята, поскольку это была очень долгая задача. Это заняло пару минут, иногда он может застрять, и если он застрянет, я буквально просто сказал "продолжить" и снова нажал Enter, и тогда он разблокировался и продолжил. Я признаю, ребята, я посмотрел на эти результаты раньше. Это превзошло мои ожидания. Это сработало намного лучше, чем должно было. Во-первых, начните бесплатно. Да, там написано bump ups. Мы это изменим, но не волнуйтесь. Посмотрите на этот UI, ребята. В основном, точно. Он даже дошел до того, что разместил логотип Google сверху. О, у меня уже есть учетная запись. Позвольте мне войти. Вход. Тоже красиво. Важно, чтобы вы это определили. Посмотрите сюда. SLO для страницы входа. Вернитесь сюда для страницы регистрации. Это SLS signup. Теперь, почему это важно? Потому что, когда мы настроим реальную серверную логику, будет очень важно, откуда мы берем соответствующую информацию в определенном контексте. На самом деле, если вы хотите узнать что-то действительно крутое прямо сейчас, то, когда пользователь на любой платформе нажимает "Зарегистрироваться с помощью Google" или, альтернативно, "У меня уже есть учетная запись. Я вхожу с помощью Google", код точно такой же. На самом деле, не имеет значения, регистрируетесь вы или входите. когда дело доходит до аутентификации Google, по крайней мере. Теперь позвольте мне быстро исправить кое-что. Вы заметите, что, поскольку он буквально скопировал это до буквы, там есть что-то вроде bump AI, bump ups. Давайте быстро обновим это. Итак, я собираюсь сказать, что любая ссылка на bump ups или bump AI должна быть thumbo и thumb AI, что также является преимуществом в редактировании AI-миниатюр. Теперь, теоретически, я мог бы получить гораздо лучший текст для этой целевой страницы. Когда я говорю текст, я имею в виду просто базовый текст здесь. Я мог бы получить гораздо лучший текст, если бы действительно захотел и углубился немного дальше. И что я имею в виду под этим, так это то, что я бы предложил вам запустить новый чат, и вы бы, по сути, сказали ему: "Эй, посмотри на мой репозиторий. Пойми ценность, которую я даю моему конечному потребителю. Как только вы поймете ценность, которую я даю моему конечному потребителю, для меня это редактирование миниатюр с помощью AI, мой очень специфический текст для целевой страницы, который немного лучше, я полагаю. Знаете, больше функций, потому что да, управление проектами, мгновенные предварительные просмотры здесь, а затем редактирование на основе чата за моей спиной, но есть еще много чего, что мы можем сделать в студии прямо сейчас, что я, вероятно, хотел бы выделить. Пока что он проходит. Он гарантирует, что везде, где были bump ups, теперь Thio. Присоединяйтесь к тысячам людей по всему миру, создающих миниатюры с помощью AI с помощью thumbo. Создавайте привлекающие внимание миниатюры за секунды с помощью thumbo AI. Загрузить. Это неправда. Ну, на самом деле, загрузите локальные или YouTube-видео и захватите Это неправда. Это из bumpups. Но идея в том, что я бы немного углубился сюда и, очевидно, изменил бы более конкретные детали текста. Но посмотрите на это, ребята. Мы буквально создали страницу регистрации и входа, которая выглядит хорошо. И затем у нас есть фиктивные данные, где, если я нажму на это, это приведет меня в студию. Давайте сделаем последнюю часть руководства, где мы настроим страницу настроек. Если вы помните, наша страница настроек была примерно такой. Итак, давайте просто облегчим себе жизнь и сделаем скриншот. Они говорят: "Можем ли мы коротко продать акции Figma? Есть ли у Figma акции?" Потому что если есть, я бы хотел их продать прямо сейчас, потому что дизайн вам больше не нужен. Или, возможно, в определенных отраслях он нужен, но для кодирования — не очень. Хорошо, я собираюсь сделать новый чат здесь. Э, во-первых, я на самом деле должен это закоммитить, потому что это было довольно большое обновление. Я собираюсь сказать "закоммитить эту ветку и отправить", назвав ее "login". Enter. А затем в ветке фронтенда этот маленький астериск исчезнет. Астериск означает, что что-то отличается от того, что он видел в облаке на GitHub, когда речь идет о том, что есть новая строка. Вот почему эти файлы желто-зеленые. Зеленый означает, что это совершенно новое. Желтый означает, что есть изменение в существующем файле, который он видел и перекрестно сопоставил с GitHub. И вы заметите, что здесь, если мы перейдем и нажмем наш PR, честно говоря, мы можем просто сравнить и создать запрос на слияние здесь. И кое-что, что вы можете сделать, особенно на этапе фронтенд-разработки, это сделать скриншоты, например, "о, давайте возьмем это, давайте пойдем сюда, сделаем скриншот этого". Это тоже очень круто, ребята, при создании приложений, когда вы делаете такие скриншоты и помещаете их в PR, потому что через три месяца разработки вашего приложения вы можете перейти к этому запросу на слияние и сказать: "Вау, вот как это выглядело раньше. Отличный запрос на слияние фронтенда. Я еще не слил его, только создал. У него есть мои данные. Вы заметите, что у нас есть наши коммиты здесь. Масштабируемость на нескольких страницах и логика входа. И если вы помните из руководства по GitHub, именно там находится этот маленький код. Это позволит вам откатиться, если вы что-то испортите. Давайте вернемся к курсору. С этим отправленным сюда, мы собираемся сделать нашу последнюю маленькую страницу настроек с помощью vibe code. Что я собираюсь сделать здесь, так это просто перейти сюда, перейти на страницу. Я также сделаю скриншот этого, чтобы у него был контекст того, что я имею в виду, когда нажимаю "настройки" для моего изображения профиля. Итак, во-первых, мы добавляем контекст. У нас есть наши маленькие настройки с доски. Затем я показываю соответствующее изображение кнопки. Мы нажмем здесь. Я скажу, что когда я нажму "настройки", переведи меня на страницу настроек / settings. Итак, вы уже это узнали, и сделайте так, чтобы это выглядело профессионально и как мой эскиз. Но исходя из функций моего приложения, он прочитает мой репозиторий. Добавьте любые дополнительные функции, которые вы считаете необходимыми. Мы оставим это немного открытым, потому что с AI сейчас он может создавать действительно крутые вещи. Итак, я просто уберу ограничения и позволю ему идти, если ему нужно идти. Иди. Иди Gemini. Иди Claude. Иди GBT5 Codeex. Это то, что мы используем прямо сейчас. Итак, мы получили это. Наша страница настроек здесь. Но одна вещь произошла во время этого процесса, которая меня действительно шокировала, но вам полезно знать. Во-первых, эта штука превзошла все ожидания. Я имею в виду, вы знаете, с моим простым запросом мы не только получили несколько приятных маленьких компонентов, но и возможность загружать брендинг. Это очень специфично для нашей платформы, которая представляет собой анализ изображений AI на миниатюре здесь, включение и выключение. И он пошел еще дальше, где экспортные предпочтения. Скажем, я знаю, что как пользователь я хочу быть JPEG, и я хочу, чтобы качество было 100%. Он сохраняет это, и я иду сюда, я экспортирую, это там. JPEG 100% качество. Мы сможем подключить это в следующем эпизоде к реальному бэкенду. Так что мы не просто сохраняем в локальном хранилище, но функционально это работает. Это безумие, ребята. Теперь, очень быстро в процессе создания этого GBT codeex просто сошел с ума. Он буквально кодировал последние 10 минут. Он застрял. Так что все, что я сделал, это просто создал новый чат. И с этим новым чатом я переключил его на другую модель. Так что я использовал sonet 4.5 и просто сказал "продолжить там, где остановилась другая модель" или что-то вроде того, что вы видите, все эти файлы изменились. Продолжайте и исправьте проблему или просто продолжайте кодировать. Это важно для вас знать, что если вы выполняете очень сложные рабочие процессы, и бот AI кажется, что занимает больше времени, чем должен, вы всегда можете остановить чат прямо там, открыть новый чат, выбрать другой тип модели, просто спросить его: "Эй, продолжай задачу". Это потрясающе, ребята. Это круто. Что дальше? Итак, с этим сделано, давайте сделаем push. Итак, я собираюсь закоммитить и отправить это как "setting pages created". Enter. И поэтому это появится как один из коммитов здесь. Теперь, из-за того, что я планирую добавить больше функций в свой фронтенд, я планирую действительно улучшить главную страницу, сделать страницу регистрации лучше и так далее, и так далее, я пока не буду сливать этот PR фронтенда. Но не волнуйтесь, я сделаю это в следующем уроке. Я покажу вам, как слить такой запрос на слияние в вашу основную ветку. Поэтому вы можете перейти к следующему шагу вашего приложения. Но это примерно все, ребята. Это показывает вам, насколько легко создавать фронтенды. Я буквально украл страницу входа и регистрации. Кроме того, один простой запрос смог создать целую страницу настроек. Дайте мне знать в комментариях ниже, если есть какие-либо другие конкретные фронтенд-вещи, которые вас интересуют, и я обязательно рассмотрю их в последующих эпизодах серии. И последние несколько упоминаний. Обязательно подпишитесь на меня на следующей совершенно бесплатной ссылке в описании ниже. И следующий шаг в этой серии — настройка страницы регистрации. Затем мы сможем подключиться к Firebase. И тогда каждый эпизод с этого момента должен быть очень простым. Регистрация, база данных, функции, хранилище. Мы будем продолжать двигаться вперед. Поэтому, как вы уже знаете по таким видео, я увижу вас в следующем. Была ли Google AI Studio последним недостающим звеном, которое нам нужно, чтобы создавать полнофункциональные приложения, которые просто потрясающие, потому что Google AI Studio очень хорошо создает ценность. Поэтому все, что нам нужно сделать сейчас, — это, по сути, просто создать страницу входа, а затем интегрировать с ней Stripe, чтобы мы могли начать зарабатывать деньги, типа видео. Недостающее звено — это понимание GitHub. Хорошо. Хорошо. Хорошо.