Transcription
используя Google AI Studio. Мы будем "вайб-кодить" весь фронтенд и ценность приложения вместе. Это второй эпизод, где я показываю, как "вайб-кодить" настоящее программное обеспечение с нуля. В предыдущем эпизоде я показал вам строительные блоки и объяснил максимально просто. Итак, прощай, техстек. Однако в сегодняшнем эпизоде позвольте мне показать, как мы используем Google AI Studio для создания, по сути, большей части приложения. Остальные части этой серии мы просто соединим точки с Firebase, GCP и всем этим облачным развертыванием. Но сегодняшний эпизод — главный. По сути, мы создаем 70-80% приложения. Все, что дальше этого, единственная причина, по которой вы не сможете это сделать, — это недостаток знаний. Но я буквально покажу вам, как это сделать. Так что этот недостаток знаний исчезнет. Пока. Добро пожаловать обратно, народ. Добро пожаловать на большой плейлист. Очень большой плейлист. Обязательно поставьте лайк сразу же. И если вы здесь рано, вы ранний пташка в первые 48 часов? Обязательно нажмите "хайп". Это ничего вам не стоит. Нам нужен хайп в чате. В этом видео мы рассмотрим создание пользовательского интерфейса приложения в AMP value. Поэтому цель очень проста. "Вайб", но мы будем создавать лендинг, регистрацию, настройки. Не волнуйтесь, у каждого из них есть своя маленькая особенность. Так что мы рассмотрим это вместе. Но последнее, что мы рассмотрим, это ограничения. На данный момент, в Google AI Studio, вы должны знать, как совершенно новый "вайб-кодер". Чтобы начать здесь, давайте просто введем запрос для создания Thumbo. И если вы не знаете, что такое Thio, это будет конечный продукт всей этой серии, программное обеспечение, которое мы создаем, которое, по сути, поможет любому типу ютубера, или, я думаю, любому, кто хочет создать миниатюру, использовать Thumbo. Шаги и процессы, которые я покажу вам в сегодняшнем видео, могут быть применены независимо от того, когда вы смотрите это видео. Так что, если вы смотрите это через шесть месяцев, вы научитесь фундаментальным навыкам разработки в сочетании с "вайб-кодингом". Поэтому вы сможете практически выполнить и создать что угодно. Потому что, как мы знаем, самый большой пробел на рынке контента сейчас — это то, что никто не показывает вам с опытом разработчика, как на самом деле это сделать. Мы собираемся создать этот запрос. Вот запрос. И я знаю, что это будет выглядеть очень знакомо, если вы смотрели мои предыдущие эпизоды, но мы скажем: "Я хочу, чтобы вы создали приложение, вся цель которого — быть моим редактором миниатюр". Поэтому все выходные изображения будут 16 на 9. Приятная горизонтальная миниатюра. Он будет оптимизирован для миниатюр в стиле YouTube. Приятно. И это будет система чата "туда-обратно". Например. Удалить фон. Вы удаляете фон. Хорошо. Теперь помести меня в космос и так далее, и так далее. Одна фундаментальная вещь, которую вы должны знать при "вайб-кодинге" таким образом. Прямо сейчас Google AI Studio чрезвычайно оптимизирован и готов к работе с любыми API Google. Так что это одно из первых ограничений, которое вы заметите на этом начальном этапе: если вы хотите создать стороннее приложение. Что я имею в виду под сторонним, это, по сути, приложение, которое не сделано Google. Эта логика все еще может быть реализована, но это будет сделано позже в серии. Что я хочу, чтобы вы сделали прямо сейчас, поскольку мы "вайб-кодим" вместе, это, во-первых, просто знайте, в чем ваша ценность. Какое приложение вы пытаетесь создать, возможно, буквально скопируйте меня здесь и создайте то же самое и выберите конкретный API, предоставляемый Google. API, который меня интересует, будет nano banana, и мы также будем использовать Gemini для чат-бота. Так что нажмите "создать". Лучшая часть создания такой серии заключается в том, что это буквально как вино: чем старше, тем лучше вкус. Потому что все, что я показываю вам здесь, если вы ранний пташка и смотрите это сейчас, как в последние пару недель, вы знаете, вы рано. Так что технология все еще немного глючная, все еще есть проблемы, но, возможно, к тому времени, когда вы это увидите, Gemini 3 уже вышел, Gemini 4 уже вышел. Это просто сделает этот процесс намного проще. Но вы все равно должны знать термины разработчика, которые я вам покажу. Давайте дадим ему построиться. Итак, пока он строится, позвольте мне показать вам, чего мы достигнем сегодня. Моя цель — создать каждую страницу в этой книге приложения. Итак, нам нужна лендинг. Не усложняйте. Что я имею в виду под лендингом? Я просто удалю это. Мне больше не нравится V. Лендинг будет местом, куда человек попадает, когда заходит на live.com.io.org.net, что бы вы ни ставили в качестве своего домена. Когда они заходят на этот веб-сайт, это будет первая страница, которую они увидят. Поэтому она и называется лендинг. Человек "приземляется" из поисковой системы. Есть множество способов подойти к этому. По мере роста вашего приложения у вас, вероятно, будет больше страниц для неавторизованных пользователей. Когда я говорю "неавторизованный", я имею в виду пользователя, который не зарегистрировался или не вошел в вашу платформу. Это программное обеспечение, которое я создал. Оно называется bumpups. Это лендинг. Есть множество других страниц, таких как "цены", "корпоративный", "стартап". Причина, по которой мы делаем несколько страниц, когда пользователь не вошел в систему, — это для поиска. Так что, если человек ищет анализ видео с помощью ИИ и является корпоративным клиентом, мы сделали для него страницу "корпоративный". Я могу углубиться здесь, но пока все, что вам нужно понять, это то, что мы создадим этот простой лендинг, где у нас будет верхняя часть. Почему она называется "topfold", Корбин? По сути, это первый контент, который видит человек, когда входит на вашу страницу. Это верхняя часть браузера. Это фундаментально чрезвычайно важно, чтобы вы создали действительно хорошую "topfold" по двум причинам. Первая причина в том, что именно это Google будет приоритезировать при сканировании вашего веб-сайта для SEO-трафика. Какой первый текст увидит это, помимо навигационной панели? Номер один, модель видео ИИ. Приятно. Кроме того, вторая причина, по которой это наиболее важно, заключается в том, что это уменьшит показатель отказов. Когда я говорю "показатель отказов", это означает, что когда человек кликает на ваш веб-сайт и находит его через поиск или, возможно, чат-бот, теперь, возможно, модель ИИ, которая его нашла. Они не уходят сразу, потому что говорят: "Подождите, подождите, это выглядит подозрительно". Если это выглядит хорошо и солидно, это удержит человека дольше на веб-сайте. Более низкий показатель отказов. Показатель отказов фундаментально важен, так как это способ, которым поисковые системы сканируют и показывают вас в поиске, насколько они ценят ваш веб-сайт. Например. Я ищу модель видео ИИ. Насколько высоко она индексируется в релевантном поиске? Это номер три? Это номер пять? Это номер шесть? Когда вы прокручиваете вниз, очевидно, что то, как мы переведем это в будущем, это то, решит ли модель ИИ, с которой вы общаетесь для поиска, если это то, как вы ищете, например, perplexity AI, является ли ваша ссылка хорошей ссылкой. Большим индикатором этого является показатель отказов. Это также имеет большую корреляцию с YouTube, верно? Так что, если кто-то кликает на видео и уходит через 10 секунд, это негативно сказывается на аналитике видео. Так что, я не хочу продвигать это дальше. Далее идет "мясо" или, возможно, тофу, если вы вегетарианец. Мясо — это контент. Это основная часть страницы. Это другие вещи, такие как FAQ. И, наконец, это футер. У любого веб-сайта есть футер. Обычно, когда вы не вошли в систему, потому что нет причин показывать футер. Пример, футер — это обычно то, что находится внизу, верно? Это как ссылки, которые вы видите внизу, условия использования, политика конфиденциальности. Каждый веб-сайт, когда вы не вошли в систему, обычно имеет футер, который вы можете использовать и повторно использовать как компонент. Когда я говорю "компонент", просто думайте об этом как о том, что если вы когда-либо играли с Лего, и у вас есть блок Лего размером 4x4, который вы можете повторно использовать для других частей здания. По сути, этот код для футера мы можем повторно использовать для всех этих других страниц. Но вы заметите, что мы на самом деле не используем "футер" в кавычках. И причина, по которой он называется футер, заключается в том, что, очевидно, потому что нога — это низ тела. Эм, причина, по которой мы не используем футер в версии веб-сайта для вошедших в систему пользователей, заключается в том, что он больше не нужен. В футере мы предоставим три основные страницы: условия использования, политика конфиденциальности и файлы cookie, не те, которые вы едите, народ. Файлы cookie — это то, что вас отслеживает. Существует много юридических аспектов, связанных с файлами cookie. Я не юрист. Так что, если вы хотите получить более подробную информацию о том, как обрабатывать файлы cookie в зависимости от вашего региона, сделайте это, так как это имеет реальные последствия. Например, если вы находитесь в ЕС, они хотят, чтобы у вас была эта панель файлов cookie. Они не шутят. Хорошо, вернемся к Google AI Studio. И у нас есть первая начальная фаза. Приятно. Итак, моя цель в Google AI Studio — просто создать ценность и создать эти страницы. То, как Google AI Studio любит работать, это то, что он сразу же перенесет нас в "ценность", которую вы предоставляете конечному потребителю. Мы сначала займемся ценностью или причиной, по которой человек вообще находится на вашем веб-сайте или программном обеспечении или приложении. И здесь вступает в игру пик "вайб-кодинга". Так что давайте посмотрим, работает ли это. Мы сделали наш первый запрос. Я добавлю свою миниатюру. Хорошо, мы сделаем быстрый тест. Мы сделаем "удалить фон". Введите. Мы просто смотрим, работает ли это. Хорошо, приятно. Работает. Теперь давайте начнем строить. Итак, мы сбросим это. У нас есть начальная фаза, где пользователь может задать вопрос, получить вывод миниатюры. Итак, мы сделаем первый запрос. Можем ли мы сделать так, чтобы при загрузке миниатюры я мог перетащить файл изображения? Также сделайте так, чтобы чат был справа, даже если миниатюры нет, и сделайте так, чтобы я мог вводить текст, пока миниатюра не загрузится. Я знаю, это немного безумно. Введите текст. Да, пока миниатюра не загрузится. Но в этом и суть. Это первое, чему вы можете научиться в "вайб-кодинге". Вам не обязательно использовать идеальную грамматику. Часть этого может звучать немного как бред, но ИИ сейчас настолько хорош. Он способен контекстно понимать: "О, он имеет в виду, что если миниатюры нет, не позволяйте пользователю общаться с ней". Правильно. Так что мы дадим этому процессу идти, но из-за того, что первая страница, которую мы рассматриваем, — это не лендинг, а страница ценности. Позвольте мне быстро показать вам, что это такое. Итак, я удалю это. Пока. Вот что мы объективно создадим прямо сейчас. Это будет навигационная панель здесь. Это то, что мы называем в программном обеспечении, навигационная панель. Она будет иметь логотип под ней. Так что у нас сейчас ничего нет, так что мы что-нибудь сгенерируем. Она будет иметь вкладку профиля здесь, загрузчик миниатюр, чат, а затем историю. Фундаментально, ценность моего продукта заключается в том, чтобы люди предоставляли миниатюру, и мы могли бы общаться с ней, редактировать ее и делать ее действительно крутой. Мы также захотим сохранить это как историю. Так что мы хотим, чтобы вся эта информация была помещена прямо сюда. Теперь, если человек нажмет "профиль", это приведет нас к вкладке настроек, и почему вкладка настроек важна, чтобы мы могли делать другие вещи в приложении. Пока давайте построим это. Затем мы займемся лендингом. Теперь, вот что-то важное, что я собираюсь сделать прямо сейчас, что вы, возможно, захотите сохранить в своих заметках или на стикере. Но я, по сути, скажу в этом чате прямо сейчас, что для всего, что требует реальных данных, используйте фиктивные данные. Фиктивные данные — это то, что мы называем в программном обеспечении плейсхолдерами. Что я имею в виду под этим, это то, что когда мы дойдем, например, до профиля пользователя, и ему нужно будет показать электронную почту, связанную с этим пользователем. Даже не беспокойтесь о вводе реальной информации пользователя. Просто беспокойтесь о вводе фиктивных данных. dummy@gmail.com. Нам просто нужно визуально показать в пользовательском интерфейсе прямо сейчас, куда должны идти данные. Метод, который я покажу вам, заключается в том, что к тому времени, когда мы будем готовы перейти к следующему уровню, все это будет "plug-and-play". Все это будет динамичным. Это сделает чрезвычайно легким доведение этого до продакшена. Когда я говорю "продакшен", это живое приложение, которым может пользоваться кто угодно в Интернете. Лучшая часть такого кодинга заключается в том, что мы можем тестировать по ходу дела. И пользовательский интерфейс прямо здесь. Так что в реальной разработке, или, я думаю, это реальная разработка, это "вайб-кодинг". Но то, что на самом деле происходит здесь, это в облаке, они сделали что-то под названием localhost 3000, о чем вы узнаете позже в серии. Прямо сейчас все, о чем вам нужно заботиться, это просто тестировать и смотреть, работает ли ваше приложение. Я загружу миниатюру. Круто. Он смог ее загрузить. Приятно. Хорошо. Сохранив это, я на самом деле обновлю название. Давайте поставим домен thumbo.com, так как именно сюда пойдет программное обеспечение. Все хорошо. Еще одна вещь, просто как заметки, когда вы создаете фронтенд, если вы перейдете к устройствам, вы можете увидеть, как это выглядит на мобильных устройствах. Вы можете увидеть, как это выглядит на планшете. Что чрезвычайно потрясающе, я имею в виду, что это стало настолько хорошо, что оно фактически оптимизируется для этих различных дисплеев. Ранняя разработка фронтенда была очень расстраивающей, когда дело доходило до этого. И когда я говорю "ранняя", я имею в виду, как год назад, когда ИИ еще не был таким хорошим. Итак, с этим закончено, я начну новый чат. Чтобы сделать это, я скажу "сбросить разговор". Что я хочу сделать, это та маленькая фиктивная вещь, о которой я говорил. Итак, я собираюсь сказать: "Для всех изменений отныне, если нужны данные, просто используйте фиктивные плейсхолдеры и т. д.". Готовы? Эта строка там, когда вы начинаете новый чат, вы захотите использовать ее, потому что позже в этой серии вы заметите, что когда мы будем подключать реальные данные, мы будем делать это в Cursor AI. Так что я тоже это сделал. Так что мы получаем эти маленькие предложения, потому что многие из них на самом деле довольно хороши. Так, например, "улучшить", "отменить" и "повторить". Нам это понадобится. Введите. Так что ваш "вайб-кодинг", эта фаза, что этот эпизод представляет для вас, это, честно говоря, использовать кучу этих предложений. Создать, создать, предложение, создать, создать, предложение, создать, создать, предложение, создать, создать, предложение, создать. Это этот эпизод и эта фаза. Обязательно оставайтесь на связи, потому что я покажу вам конкретные библиотеки, которые вам нужно будет установить. Что такое библиотека, Корбин? Это даст нам возможность получить, возможно, лучшие иконки здесь. Эм, также я обновлю этот пользовательский интерфейс, так как это кажется стандартизированным пользовательским интерфейсом, который Google предоставил в своей модели. Когда я говорю "стандартизированный пользовательский интерфейс", я имею в виду, что кажется, что Google решил сделать этот синевато-темный пользовательский интерфейс, но я не хочу синевато-темный пользовательский интерфейс. Он закончил это. Итак, что я хочу сделать здесь, это протестировать. Загрузить. Я просто скажу "добавить праздничную шляпу". Теперь, честно говоря, эти выходные, как редактирование изображений, могут быть не идеальными прямо сейчас, но я не беспокоюсь об этом, потому что функционально я пытаюсь понять, работает ли "отмена" и "повтор". Это то, что важно для меня прямо сейчас. У нас есть праздничная шляпа. Но мне она не нравится. Отменить. Хорошо. Так что, если я отменю это и скажу "добавить ковбойскую шляпу". Это работает? И если да, то это успешно выполнило эту функцию. Я только что понял, что вы все очень привыкнете к этой миниатюре. Позже я получу другие тестовые данные. Хорошо. Вам придется смотреть, как я указываю на Сору. Если вы хотите следить за мной, @Sors @Corbin Brown. Приятно. Оба сработали идеально. Отменить. Если я хочу повторить, я возвращаюсь. Бум. Бум. Бум. Бум. Хорошо. Вот оно. Так что давайте прокрутим сюда. Далее, что очень важно, это функциональность сохранения и экспорта. Давайте добавим это. Введите. Создать. Создать. Создать. # Создать. Тест снова. Загрузить. Добавить праздничную шляпу. Приятно. И давайте скачаем. И вот оно. Приятный файл надо мной. И у нас есть праздничная шляпа. Корбин. Праздничная шляпа Корбин. На самом деле, вставьте строки. О боже. W Nano Banana. И вот что круто в "вайб-кодинге" и замечании вещей по мере создания. Мне не нравится, как это названо. Что это? Редактор миниатюр — огромная строка. Это мне не годится. Так что давайте настроим логику. Так что, когда мы экспортируем файл, мы переименовываем его. Переместить в корзину. И очень быстро, давайте сохраним, так как мы знаем, что это важно. Так что нажмите "сохранить" здесь. Вы не хотите терять прогресс. Давайте сделаем это. Когда я экспортирую файл, сделайте так, чтобы имя файла было имя пользователя — миниатюра. Пока используйте фиктивные данные для имени пользователя. Добавьте, что мы изменим позже. Фиктивные данные будут Корбин. Так что я ожидаю, что когда я скачаю этот файл, это будет Corbin-thumbnail. Очевидно, в будущем мы можем переименовать это. На самом деле, одну вещь, которую я должен вам показать, давайте отменим эту генерацию. На самом деле довольно важно, чтобы я добавил это. Так что мы делаем — Корбин, но нам нужно сделать имя пользователя — миниатюра — случайное число. Так что вы можете сказать: "Корбин, почему ты добавляешь это случайное число?" Это связано с тем, что в масштабе, если бы много людей использовали эту платформу, и вы создавали тонны миниатюр на платформе, было бы очень расстраивающе, если бы вы скачали миниатюру, а затем увидели: "Эй, это изображение уже названо так. Хотите ли вы его заменить?". Так что мы добавим туда случайную строку или случайное число, чтобы гарантировать, что вы сможете скачать тонну. Эм, давайте посмотрим, работает ли это. Похоже, что это сделано. Та же ситуация, когда он что-то добавляет. Добавить крутые очки. У нас есть крутые очки. Так что теперь нажмите "скачать". И вот оно. Посмотрите, как оно названо. Это Corbin-thumbnail-966. Теперь, когда мы создадим это и подключим к бэкенду, мы сможем фактически сопоставить это последнее число здесь. Или, теоретически, как только у нас будет бэкенд, с которым мы можем сопоставлять данные, это может быть инкремент. Так что это может означать, что в первый раз, когда пользователь скачивает миниатюру на вашей платформе, это один. В 30-й раз, когда пользователь скачивает миниатюру на вашей платформе, это 30. Есть и другие способы подойти к этому, но у нас есть наша приятная маленькая миниатюра. Хорошо, все выглядит хорошо до сих пор. Давайте посмотрим, что еще у них есть. Хорошо, так что мне не нравятся предложения. Так что следующее предложение, которое я хочу сделать, это добавить механизм истории. Так что я скажу: "Добавить историю ниже, чтобы позволить пользователю видеть прошлые миниатюры. Переименовать их, и мы назовем этот раздел "проекты". Как я уже говорил, я знаю, что грамматика не идеальна, но в этом и суть "вайб-кодинга". Вам не нужно давать ему идеальное предложение. Не волнуйтесь, здесь вас не оценивают. Также соответствующая временная метка, когда было создано, в основном дата, а затем пока хранить это в локальном хранилище. Что это значит, это очень приятно знать: если я хочу хранить это в облаке, используя Firebase, это будет как онлайн, это будет стоить мне денег за использование. Я хочу хранить это в браузере пользователя, на его компьютере. Это то, что такое локальное хранилище. Оно хранит это в самом браузере. Поэтому бэкенд не несет никаких затрат. У этого есть преимущества, есть причины использовать это, но пока все, что вам нужно знать, это то, что на этом этапе разработки используйте эту технологию. Так что вы получите построенное функциональное приложение на этом первом этапе. Я нажму "ввести". Итак, я закончил. И, честно говоря, мне нравится, как это устроено здесь, потому что здесь было много пустого пространства в любом случае на нашем веб-сайте. Почему бы просто не поместить его слева? Изначально мое намерение было поместить его внизу, но, знаете, "дабс" для Google. Он фактически сделал довольно хороший U. Хорошо, мы фактически настроим его для мобильных устройств. И это хорошо, что вы только что увидели это, так как нам нужно будет убедиться к концу этого, что это выглядит хорошо на каждом типе платформы или устройства. Я имею в виду, пока что давайте посмотрим, работает ли это. Итак, я просто перетащу свое изображение сюда. Хорошо, у нас есть проект один здесь. Эм, добавить смешную шляпу, и давайте посмотрим, смогу ли я переименовать это, эм, яблоки. Мне нравятся яблоки. Хорошо, яблоки. Приятно. На самом деле, измените это и здесь. Хорошо, смешная шляпа. Жест. Приятно. И когда это будет сделано, хорошо, нам нужны две вещи. Первая вещь, которая нам нужна, это возможность создать новый проект. Вторая вещь, которую я сделаю, это фактически, я выберу, чтобы эта левая вкладка "проекты" была под миниатюрой и чатом. И позвольте мне объяснить почему. Если я зайду на веб-сайт, такой как cursor.com, вы заметите, что ширина или то, что мы называем "видовым экраном", который является всем браузером, кажется, уменьшена. Ширина только такая, но есть все это пустое пространство здесь и все это пустое пространство здесь. И что они делают здесь, это довольно умно. Причина, по которой они это делают, заключается в том, что у каждого разный размер экрана. Так что, когда я немного увеличу это, народ, вы заметите, что это хорошо подходит. Входит, а затем переключается на мобильный, что приятно. И способ, которым мы подходим к этому, чтобы достичь того же эффекта в нашем пользовательском интерфейсе, это установить максимальную ширину 12 000 пикселей или пикселей. Думайте об этом как о создании комнаты в вашем доме. Вы хотите установить здесь барьеры, чтобы даже на больших экранах нам было все равно на это пустое пространство, потому что пользовательский опыт, нас волнует только то, что находится посередине. Поэтому, фундаментально, поэтому, когда вы видели это на мобильных устройствах, это выглядело как мусор. Здесь это кажется нормальным, но на самом деле, для масштабируемости на экранах разных размеров, это на самом деле плохой пользовательский интерфейс. Так что смотрите. Хорошо, две вещи. Сделайте так. Я могу создать новый проект. Также я хочу, чтобы компонент проекта был под миниатюрой, загрузчиком и чатом. Компонент проекта — это это. Что такое компонент? Думайте о компоненте как о части головоломки. "Мои проекты" — это часть головоломки. Этот весь загрузчик миниатюр — часть головоломки. И этот чат — часть головоломки. И что это означает в коде, если вы зайдете сюда, обычно вы будете рефакторить или просто иметь каждый из них как свой собственный файл, но мы будем держаться подальше от кода, потому что мы "вайб-кодим", так что нам не нужно об этом беспокоиться. Но зная это, мы скажем: "Поэтому, установив максимальную ширину видового экрана на 12 000 пикселей. Используйте такие термины, как видовой экран, чтобы идентифицировать браузер. Кроме того, мы также будем ссылаться на пользовательский интерфейс для мобильных и планшетных устройств. Нажмите "ввести". При работе с пользовательским интерфейсом для мобильных и планшетных устройств есть два разных способа подойти к этому. Первый способ — настроить так, чтобы в коде было что-то под названием столбцы и строки. И иногда с пользовательским интерфейсом это очень просто, как "о, просто сделайте это столбцом, а не строкой". Например, это здесь, это было бы как чат — это столбец. Он находится под загрузчиком миниатюр. Альтернативно, что делают другие программы, это то, что у вас будет один файл, который содержит весь код для настольных компьютеров, и у вас будет другой файл, который полностью посвящен мобильному виду. Это может быть избыточно и не обязательно необходимо при разработке в этом, но теоретически может потребоваться в зависимости от вашего варианта использования. Итак, я добрался до довольно хорошей контрольной точки. Я позабочусь о том, чтобы сохранить приложение здесь. Когда я ухожу в такие отступления, многое из этого вам не обязательно понимать. Я привожу это только для того, чтобы дать вам более глубокое понимание того, что такое код. На самом деле, просто "вайбьте". Просто поместите его туда, как будто это не выглядит хорошо. AI Studio, поднимите свою игру. Сделайте это лучше. Это все, что вам нужно сделать. Похоже, мы столкнулись с ошибкой. И если вы помните из моего другого видео, все, что вам нужно сделать, это щелкнуть правой кнопкой мыши, "инспектировать". И это очень специфичная вещь для Google Chrome. Вы хотите узнать, как сделать это в вашем браузере, просто спросите чат-бот. Перейдите сюда, в "консоль", здесь, "консоль". И все, что вам нужно сделать, это просто скопировать все это. Вам не нужно ничего из этого понимать. Просто скопируйте. Вы можете выйти и затем вставить это в чат. Это будет ваш способ устранения неполадок, по крайней мере, в этой среде. Я покажу вам, как устранять неполадки в более поздних эпизодах в среде Cursor. И вот оно. Просто вставив из консоли сюда, мы исправили ошибку. Теперь мы продвинулись довольно далеко. Так что я позабочусь о том, чтобы сохранить это. Я загружу еще одну миниатюру здесь и посмотрю, работает ли она. Итак, давайте загрузим миниатюру. Вот оно. Автоматически создан проект. Приятно. Добавить ковбойскую шляпу. И тогда мы дадим этому сгенерироваться. Прежде всего, давайте не будем слишком увлекаться. Я не буду нажимать "новый проект" еще. Давайте просто посмотрим, работает ли сама ценность, верно? Мы хотим продолжать убеждаться, что что-то не сломается, прежде чем переходить к следующему шагу. Как один из недостатков Google AI Studio прямо сейчас, они, возможно, исправили это к тому времени, когда вы доберетесь до него, контроль версий здесь немного непредсказуем. Вы не можете действительно использовать что-то вроде GitHub. Я знаю, что есть эта интеграция здесь. Прямо сейчас она не работает, но к тому времени, когда вы ее используете, возможно, она будет работать. Это не имеет значения. В этой серии я покажу вам надежный способ справиться со всем этим. Хорошо, это работает. Это открыло мне рот по какой-то причине. Как будто я кричу. Давайте посмотрим, если мы сделаем "новый проект" здесь. Хорошо. Хорошо. Так что "новый проект" не работает. Или, возможно, он работает. И пользовательский опыт не совсем то, что я ищу. Так что давайте скажем ему об этом. Еще одна вещь, которую я также скажу ему, это то, что где миниатюра проекта, самое последнее изображение проекта должно быть самым последним, что мы сделали, по сути. И вот мой следующий запрос. Вот обновления. Один. Миниатюра проекта должна быть последним изображением в чате. Так что это будет обновление до последних изменений. По сути, то, что я говорю здесь, это это изображение здесь. Это последнее, что мы сделали. Пусть это будет миниатюра проекта один. Так что для контекста, когда вы работаете над одним, и, возможно, вы работаете над ним 20 минут, вы сможете определить: "О, это проект, над которым я работал". Второе, номер два, также, когда я нажимаю "новый проект", сделайте так, чтобы загрузчик снова отображался, а чат обновлялся. Что вам нужно узнать здесь как "вайб-кодеру", это то, что да, вы можете использовать списковые форматы, чтобы ИИ понимал. Это хорошо. Кроме того, очевидно, вам не нужно использовать идеальную грамматику, как я всегда повторяю. Не беспокойтесь об этом. Нажмите "ввести". Итак, вот оно. Предположительно работает. Давайте попробуем. Прямо сейчас "новый проект" ничего не делает, так как кажется, что он создается при инициализации. Так что загрузить. Вот оно. Мы добавим что-нибудь. Идеально. Первый запрос сработал правильно. Так что у нас теперь черная шляпа. И она есть здесь, внизу. Так что мы можем легко идентифицировать. Теперь работает ли "новый проект"? "Новый проект" не работает. Это приводит к тому, что оригинальная миниатюра остается. Так что мы определим это. И вместо того, чтобы делать это текстовым способом, давайте используем функцию аннотации рисования здесь. Аннотировать приложение. Есть пара вещей, которые я укажу здесь. Так что мы выбираем цвет. Мне нравится этот цвет. Этот цвет выглядит красиво. Я скажу "удалить это". Мне это не нравится. Удалить эти черные полосы. А затем для изображения миниатюры, сделайте закругленные углы, потому что сейчас это как квадрат. Я этого не хочу. Так что сделайте это. И я могу использовать этот маленький инструмент здесь. И затем прямо здесь, за мной, когда я говорю это, перетащите маленькую миниатюру сюда. Скажите, что это не удаляет миниатюру, когда я нажимаю "создать новый проект". Бум. Так что я сделаю прямо сейчас, мы добавим это в чат. Добавить в чат. Теоретически, я, возможно, мог бы немного больше описать проблему "новый проект", но давайте посмотрим, достаточно ли умен Gemini, чтобы понять. Так что я нажму "ввести" здесь. Он завершен. Давайте посмотрим, работает ли это. Я добавлю свою миниатюру. Итак, первая проблема здесь в том, что он не сохраняет пропорции 16 на 9. Но сначала мы просто скажем "добавить шляпу". Мы просто дадим ему сгенерировать изображение быстро. Затем мы сможем проверить, работает ли функция "новый проект". То, что вы здесь наблюдаете, это "толчок и тяга" "вайб-кодинга", где вы будете сталкиваться с ошибками, уточнять и просто запрашивать новые функции. Что действительно круто в Google AI Studio, так это то, что они сильно опираются на это. Вот почему в этом первом эпизоде мы сможем создать 80% этого приложения. Хорошо, так что "добавить шляпу". Он хочет снова сделать эту черную шляпу. И когда я сделал это, "новый проект" снова не работает. Давайте я проверю здесь. Давайте посмотрим, что происходит, народ. И вот почему, народ. Так что вы заметите, что даже когда я сказал Google: "Эй, есть проблема с новым проектом", и я попробовал снова, и он выдал ошибку, он не смог ее решить. И это потому, что возникала ошибка, о которой он даже не знает. Так что я скопирую это, потому что это явно явная проблема. И давайте сделаем две вещи, прежде чем мы скажем ему исправить это и сделать его размером 16 на 9. Так что это не похоже на увеличение миниатюры. Давайте сначала просто сосредоточимся на ошибке, которую мы только что видели. Так что я скажу: "Реши эту ошибку, когда я нажимаю "новый проект". Вставьте все это. Лучшая часть "вайб-кодинга" — это буквально то, что вам не нужно ничего из этого понимать. Буквально просто скопируйте и вставьте, и позвольте ИИ позаботиться об этом. Так что я закончил. Я начал новый чат. Иногда, народ, я люблю начинать новый чат. Если вы знакомы с программированием с ИИ, он может уйти в кроличьи норы и дать плохой код, если вы зайдете слишком далеко в кроличью нору. Может произойти и обратное, когда вы заходите очень далеко в чат, он может дать действительно хороший код, потому что много контекста. Но пока что давайте протестируем эту маленькую ошибку. Так что загрузить миниатюру. Хорошо, это круто. Пока что, поскольку мы знаем, что это функционально работает, мы просто скажем "новый проект". Мы замечаем небольшой клик. Смотрите. Новый проект. Добавить еще одну миниатюру. Хорошо, новый проект. И кажется, что это работает каждый раз. Теперь мое предположение заключается в том, что причина, по которой мы видели эту проблему, когда это произошло в первый раз, заключается в том, что локальное хранилище сохраняется. Что я имею в виду под этим, это то, что он читал данные, найденные в браузере, и не очищал эти данные успешно для передачи сюда. Короче говоря, это работает функционально достаточно хорошо для меня, чтобы продолжать добавлять итерации. Но мы вернемся к этому и разберемся с этим маленьким подергиванием ошибки, которое мне не нравится. Теперь, одна вещь, которую я замечаю здесь, давайте попробуем еще раз. Хорошо, круто. Он создает достаточно проектов здесь. Давайте посмотрим функционально, что происходит, если мы добавим достаточно, чтобы перейти сюда. Идеально. Сработало. Так что это тот вид стресс-тестирования, который мы проводим с фронтенд-разработкой. Теоретически, если бы у нас было более пяти миниатюр подряд, что тогда произойдет? Он смог перейти на следующую строку. Так что все выглядит довольно хорошо здесь. Мы продвигаемся довольно далеко, народ. Мне это нравится. Так что давайте решим следующую ситуацию, когда это здесь не является пропорцией 16 на 9. Теперь, чтобы сделать это, мы снова воспользуемся приложением аннотации. Мы сделаем так. Добавить текстовое поле. Сделать размер изображения 16 на 9. Введите. А затем прямо здесь, скажите "удалить текст 16 на 9". Это просто жесткий текст, введенный для первоначального создания этого приложения. Нам это не нужно. Все, что я действительно хочу, чтобы было здесь, это просто имя проекта, которое сейчас является "проект шесть", как мы видим здесь. Так что я скажу "добавить в чат", и мы нажмем "ввести" здесь. Да, я не сделал этот первый запрос вроде: "Эй, просто используйте фиктивные данные XYZ XYZ", потому что я не думаю, что сейчас мы будем слишком глубоко вникать в это. Но если мне понадобится, я добавлю это позже в этом чате. И вот оно. Теперь это 16 на 9. Приятно. Теперь давайте посмотрим на некоторые другие предложения. Возможно, текстовое наложение, библиотека шаблонов, уточнить, отменить, повторить. Мне интересно, что это значит. Улучшить функциональность отмены и повтора, чтобы предоставить визуальную обратную связь или журнал изменений. Это звучит хорошо для меня. Введите. Мы строим. Итак, следующая функция: лучшая отмена и повтор. Так что я собираюсь загрузить миниатюру. Приятные данные. Оригинальное изображение. Вау, народ. Это просто чрезвычайно впечатляющие вещи, народ. Эм, сделайте так, чтобы я носил красную рубашку. Я нажму "ввести" здесь, и у нас должно быть лучшее представление между отменой и повтором. Это выглядит круто. Эм, давайте скажем, что мы хотим отменить это. О, вау, народ. Это просто чрезвычайно впечатляющие вещи, народ. Итак, у нас есть первоначальная версия. Она фактически предоставляет базовый запрос. Так что давайте сделаем еще одно. Сделать телефон. Скажите "лайк и подписка". Вы еще не поставили лайк? Вы должны поставить лайк этому видео. Это бесплатно. Также дайте мне знать в комментариях, что вы строите после просмотра всей этой серии. На самом деле, не раскрывайте слишком много, но как краткое изложение в одном предложении. Дайте мне вашу "лифтовую питч". Мы назовем это "лифтовым предложением" вашего приложения. Лайк и подписка. Посмотрите на это. Отменить. Повторить. Действительно хорошая система. Это очень интуитивно. Новый. Мы начинаем сталкиваться с этой проблемой. Так что, когда я нажимаю "новый проект", это требует двух кликов. Обратите внимание, что мне потребовалось два клика, чтобы решить это. Так что давайте скажем Gemini об этом. Во-первых, я скажу: "Когда я нажимаю "новый проект", он работает со второго клика, но с первого клика миниатюра остается. Мы играем в демо с ИИ. И, возможно, мы можем усилить нашу позицию, снова проведя инспекцию, консоль. И я могу просто сказать: "Знаете что? Я просто вижу эту ошибку. Я не знаю, что это значит". Так что я могу просто сказать: "Я вижу эту ошибку. Не уверен, что она коррелирует". Чтобы быть похожим на то, что ваш друг дает вам совет в течение 20 минут, и говорит: "Это просто мое мнение. Я не знаю, стоит ли вам это делать, но это... ну, мы просто говорим ИИ, что есть ошибка. Я не уверен, что она коррелирует". Итак, с этим закончено, мы можем протестировать это, и "новый проект". Похоже, это работает. Вы фундаментально понимаете "plug-and-play" этого создания приложения. Так что теперь позвольте мне показать вам последний кусочек головоломки. И последний кусочек головоломки — это просто мега-запросы. Что такое мега-запрос, это то, что вы просто изложите все. Хорошо, вот что мы хотим сделать дальше. Сделайте темный UI, темный, как UI продуктов Apple, для верхней панели. Левый логотип и бренд — Thumbio. Добавьте изображение профиля справа. И пока что простой выпадающий список настроек. Бум, бум, бум, бум. Дайте ему большой полезный груз и позвольте ему просто начать обновлять все. Так что, что я собираюсь сделать здесь, это, когда он сделает это большое изменение, мы будем работать над другими страницами. Есть еще функциональность, которую я собираюсь добавить здесь, но это будет тот же процесс, когда я смотрю на предложения Google, вроде: "Эй, это хорошее предложение. Вам следует добавить это". Я добавлю это. И затем, если я столкнусь с ошибками, этот метод логирования консоли. Пока что давайте сделаем это большое изменение. И тогда следующая цель будет просто UI регистрации и входа. Как мы это сделаем? А затем UI настроек. Первое, что мы рассмотрим, это будет лендинг после того, как мы закончим с этой страницей ценности. И вот оно. С этим большим запросом у нас есть возможность загружать в темном UI. Так что загрузить здесь. Вот оно. Значок профиля был сделан с настройками. Это хорошо. Он уменьшил это до Thumbo. Он предположил, что это Aio. Это не Aio. Так что я уточню это, и у нас есть наши проекты с темным UI здесь. Давайте сделаем следующую вещь, которую вам нужно понять о "вайб-кодинге", это будет многостраничность. Прежде чем мы сделаем это, убедитесь, что вы сохранили здесь. Теперь, если вы хотите быть в большей безопасности для этой следующей части, я бы посоветовал вам скачать код. Это будет какой-то странный контроль версий, потому что прямо сейчас Google AI Studio не очень хорошо справляется с контролем версий, как приложение v1, приложение v2, эта ситуация. Вы можете скачать код, и я это сделаю. Я просто делаю это на всякий случай. Отсюда, поскольку мы "вайб-кодим", давайте просто сделаем это, верно? Я сделаю скриншот этого. Я перетащу его сюда. Я просто скажу: "Хорошо, это дизайн нашего лендинга. Можете ли вы его создать?". И пока что просто сделайте кнопку, которая ведет нас к редактору миниатюр по адресу /studio. Что я имею в виду под "/": что если я зайду на страницу веб-сайта, вы увидите это здесь, /enterprise. Так что, что я хочу, чтобы произошло, это будет /studio, когда он придет сюда. И лендинг будет просто /. Что это значит, это будет без ничего после него /нет, главная страница. Так что вы можете поставить /home, если хотите, с этим скриншотом, который мы получили с доски, которая очень "вайбовая", верхняя часть контента, футер. Я могу просто сказать "ввести". Я только что узнал что-то новое об этой студии, что будет очень важно для вас понять. Создание дополнительных страниц на самом деле очень рискованно, потому что вы можете потерять весь код, над которым работали. Так что позвольте мне показать вам, как правильно подойти к этому. Прямо сейчас у меня есть лендинг. Если я попытаюсь перейти к редактору, это приведет к ошибкам. По сути, эта среда, которую мы видим с Google AI Studio, не была разработана до точки, когда у нее есть несколько фронтенд-страниц. Я не беспокоюсь об этом. Я покажу вам, как создать их с помощью Cursor AI, но я должен, чтобы вы это поняли. Ваша цель в этом эпизоде — просто создать свою ценность. Итак, первое, что я сделаю, это я, по сути, скажу ему отменить изменения, чтобы вернуть меня к редактору миниатюр. Так что, по какой-то причине, если вы оказались в ситуации вроде: "О нет, я все испортил". Если вы не сохранили свои изменения, вы можете просто спуститься сюда и сказать: "Эй, отменить изменения". Давайте посмотрим, если я перезагружу, вернется ли это, потому что я не сохранил эти изменения. Я никогда не нажимал эту маленькую кнопку сохранения. Вот почему я сказал вам скачать этот код. Теперь он зафиксировал это. Это не годится. Как вы заметите, когда я перехожу на другую страницу, она не может подключиться. Это просто из-за среды, в которой мы находимся. Так что это не вы, это не проблема U. Это ограничения этого в настоящее время. Что Google AI Studio удивительно делает для "вайб-кодинга", это ценность, которую вы предоставляете своему конечному потребителю. Например, это здесь, ценность приложения, которая в конце концов важна, потому что именно так вы получаете деньги или трафик, или люди вообще обращают внимание. Так что, позвольте мне отменить этот код. Я скажу "удалить лендинг" и просто вернуться к редактору миниатюр. Если это не сработает, я не беспокоюсь. Я скачал код по этой конкретной причине, но давайте просто посмотрим, достаточно ли он умен, чтобы вернуться, и он был. Но я показываю такие ошибки, народ. Так что вы понимаете, что если вы подходите к этому без опыта разработки и вы полностью "вайб-кодите", вы можете подумать, что проблема в вас, но на самом деле, это, вероятно, платформа. Это очень распространенная вещь в технологиях. Так что у вас есть кто-то вроде меня, чтобы сказать вам, и не волнуйтесь, это не ваша проблема, это проблема Google Cloud и Google AI Studio, что затем приведет нас обратно сюда, что на самом деле является хорошим переходом к части ограничений этого видео. Позвольте мне удалить это. Ваше первое крупное ограничение, которое я заметил при использовании Google AI Studio. Теперь, чтобы быть полностью прозрачным, народ, к тому времени, когда вы это увидите, возможно, через 6 месяцев, год, 2 года, они, возможно, улучшили платформу или XYZ XYZ, но идея заключается в том, чтобы фундаментально понять эти основные правила при работе и прототипировании и создании вашего приложения в Google AI Studio. Номер один, переменные окружения. И что это значит? По сути, всякий раз, когда вы хотите подключиться к любому API, такому как API OpenAI, API Google, секретная переменная, это не может справиться. Это просто ломается. Это не хочет ничего вам показывать. Если мы перейдем к коду, перейдем к службе Gemini, это здесь, это не хочет вам показывать. Не волнуйтесь, я покажу вам, как получить доступ к этому и правильно настроить его, когда мы сделаем серию позже. Переменные окружения, не годится. Другие API, не годится. Вы попробуете интегрировать Mailchimp здесь, это выйдет из строя. Не годится. Контроль версий, очевидно, не годится. Как мы только что видели здесь, без GitHub, это, вероятно, будет решено очень быстро. Так что имейте в виду, интеграция GitHub, я имею в виду, они буквально имеют ее здесь. Это, вероятно, будет решено довольно быстро, но имейте в виду, что прямо сейчас это сломано и так далее, и так далее, и так далее. Я думаю, еще один пример чего-то, что было сломано, это возможность делать несколько страниц. Но, честно говоря, главная страница, эта страница, страница регистрации и входа, и страница настроек, я могу сделать это так быстро в Cursor AI, когда я покажу вам, что это даже не проблема. Настоящая проблема, когда дело доходит до программного обеспечения, — это наша способность создавать ценность. Это обычно то, где вы упираетесь в стену, потому что ценность имеет больше тонкостей, когда дело доходит до бэкенд-логики, которая более сложна. Фронтенд-кодинг, теперь ИИ может делать все. О, он не может делать, тогда вы просто не знаете, как его просить. Просто поверьте мне, народ, он может делать все. Так что идея сейчас — бэкенд-кодинг. Вот где это становится немного сложнее. И именно поэтому остальная часть этой серии очень похожа на: "Корбин, как мы возьмем это приложение, эту ценность здесь? Как мы возьмем это и добавим фундаментальные кирпичики, которые нам нужны в любом приложении?". И это то, что я вам покажу. Итак, вот что я собираюсь сделать, и вот что я скажу вам сделать для этой части серии. Проведите как можно больше времени на этом этапе, когда дело доходит до создания ценности. Что я собираюсь сделать в свое время, это я буквально просто улучшу это до чертиков. Я просто буду продолжать вносить улучшения. Я просто сделаю это лучшей ценностью, которая когда-либо существовала, когда дело доходит до редактора миниатюр. Каков бы ни был ваш вариант использования, сделайте то же самое. Потому что то, что мы хотим сделать, это получить это настолько хорошо, что к тому времени, когда мы сделаем другие части этой серии, которые будут включать регистрацию пользователей, добавление базы данных, добавление функций, к тому времени, когда мы даже доберемся до этого, это будет примерно так: "Эй, вот торт. Можем ли мы просто добавить глазурь?". И это то, чего мы хотим. Поэтому, это завершает сегодняшний эпизод. Все, на чем я хочу, чтобы вы сосредоточились после просмотра этого видео, — это создайте ценность вашего продукта, за что люди будут платить. Что важно для вас понять в долгосрочной перспективе для этого продукта, Google AI Studio, он может дать возможность для большей функциональности, такой как легкое создание этих других страниц. Но не волнуйтесь, в этой серии я покажу вам, как это сделать в любом случае. И, честно говоря, народ, я, вероятно, покажу вам, как сделать это лучшим способом, потому что вы действительно будете владеть своим кодом. Как будто этот код ваш, а не застрявший в этой маленькой коробке среды. Обязательно подпишитесь на меня здесь, в X, ссылка в описании. Куча новых обновлений, куча крутых вещей. Мне это нравится. Также проверьте сообщество школы в описании. Полностью бесплатно присоединиться. Думайте как о форме в стиле Reddit. Многие люди просили Discord. Если я увижу достаточно спроса, я, возможно, сделаю Discord, но на самом деле это сводится к тому, что вы просто спамите меня, Корбин, нам нужен Discord. Хорошо, я понял. Я создам его, если будет достаточно спроса. Также обязательно подпишитесь на меня на GitHub, так как это бесплатный исходный код. Бесплатный исходный код каждую неделю. Итак, это почти все в сегодняшнем видео. Это "вайб-кодинг" ценности вашего продукта. Эти следующие несколько эпизодов в этой серии покажут вам, как соединить все точки, чтобы вы могли запустить живой веб-сайт или программное обеспечение или что бы вы ни называли. Но, как вы хотите знать с такими видео, обязательно поставьте лайк. Увидимся в следующем. Неужели Google AI Studio стал настолько хорош, что вы, по сути, больше не знаете, как кодить? Так что все, что вам нужно сделать, это, по сути, "вайб-кодить" для ценности вашего продукта, а все остальное я просто покажу вам, как сделать. Поэтому любой человек в мире сможет запустить программный продукт, не зная ни строчки кода, такого типа видео. Создать, создать.