Transcript
00:00:00Это целевая страница мероприятия, которую я создал сам всего за несколько минут.
00:00:05Она даже включает в себя виртуальную примерку на базе искусственного интеллекта.
00:00:09Мой начальник поручил мне этот проект, а V0 помог превратить мои идеи в реальный продукт.
00:00:14В этом видео я покажу вам, что такое V0, и как создавать проекты шаг за шагом.
00:00:19Итак, что же такое V0?
00:00:21ИИ значительно упрощает генерацию кода.
00:00:23V0 направляет эту мощь в формат, который позволяет любому легко создавать настоящие приложения
00:00:28и веб-сайты или сотрудничать с разработчиками.
00:00:30V0 разработан для того, чтобы помочь вам пройти путь от нуля до запуска как можно быстрее.
00:00:36Вот как работает V0.
00:00:37Вы описываете нужное вам приложение, агента или сайт, а V0 генерирует код
00:00:42в режиме реального времени.
00:00:43Вы можете вносить изменения и модифицировать проект, общаясь с V0, — просто скажите, что исправить,
00:00:48и он сделает это за вас.
00:00:49V0 создает настоящее ПО с помощью Vercel и Next.js, но V0 — это не просто конструктор сайтов.
00:00:56Он может создавать полноценные приложения, подключать их к ИИ и базам данных, а также генерировать код,
00:01:00который разработчики могут использовать и развертывать.
00:01:02Это возможно, потому что V0 создан компанией Vercel, создателями фреймворка Next.js,
00:01:08который используют такие бренды, как Under Armour, Stripe и Notion.
00:01:11Поэтому, когда V0 собирает и развертывает ваше приложение на Next.js, вы используете тот же код
00:01:15и ту же безопасную инфраструктуру, что и ведущие компании мира.
00:01:19Давайте покажем несколько проектов, чтобы вы увидели V0 в действии и поняли, как легко начать работу.
00:01:24Итак, я работаю в отделе маркетинга, и на этой неделе у меня два крупных проекта.
00:01:27Во-первых, мне нужно создать страницу мероприятия для нового продукта, который мы запускаем.
00:01:31И во-вторых, мне нужно обновить целевую страницу на нашем веб-сайте.
00:01:34Давайте начнем со страницы мероприятия.
00:01:36Мероприятие посвящено презентации продукта, на которой мы представим новые часы под названием Son of
00:01:40Ali.
00:01:41Я хочу сделать целевую страницу стильной и захватывающей, чтобы подогреть интерес и создать
00:01:45увлекательную виртуальную примерку для посетителей, чтобы они регистрировались.
00:01:48Поэтому я попрошу V0 сделать именно это.
00:01:53Я закончил писать свой промпт.
00:01:54Теперь я отправляю свои инструкции, и V0 начнет сборку.
00:01:59Пока V0 строит страницу, я хочу показать вам, что делает его таким мощным.
00:02:02Если вы перейдете в Настройки (Settings), затем в Интеграции (Integrations), вы увидите все интеграции,
00:02:07доступные вам в V0.
00:02:09Во-первых, вы видите, что в V0 уже встроен искусственный интеллект.
00:02:12Он будет использовать AI SDK для создания функций ИИ и AI Gateway, чтобы автоматически
00:02:17предоставить вашему приложению доступ к сотням моделей ИИ.
00:02:20Вы также можете создавать базы данных или подключаться к ним для работы бэкенда вашего приложения и даже
00:02:25принимать платежи через Stripe.
00:02:27Благодаря этим интеграциям вы можете создавать настоящие полнофункциональные приложения с поддержкой ИИ.
00:02:32Хорошо, давайте проверим нашу страницу мероприятия.
00:02:34V0 закончил создание первой версии, так что давайте ее протестируем.
00:02:38Я загружу свое изображение, и система должна выдать нам те четыре
00:02:44варианта генерации с виртуальной примеркой часов, о которых мы просили.
00:02:49Отлично, V0 действительно принял мои инструкции и обновил код.
00:02:55Если мы посмотрим на редактор, то увидим, что V0 активно обновляет код Next.js.
00:03:00Редактор также упрощает разработчикам процесс проверки и редактирования кода.
00:03:04Отлично, V0 закончил вносить изменения, и они выглядят великолепно.
00:03:09Прежде чем публиковать это, я хочу поделиться проектом со своей командой для получения отзывов.
00:03:12Я могу нажать Поделиться (Share), скопировать ссылку и отправить чат и превью своей команде.
00:03:18То, что они увидят в этом предпросмотре, будет точно соответствовать тому, что увидят пользователи,
00:03:22когда я сделаю страницу публичной, так что мне не нужно беспокоиться о каких-либо изменениях при развертывании.
00:03:26Как только моя команда проверит страницу, я готов присвоить ей кастомный URL-адрес и опубликовать ее.
00:03:31Более того, это действие автоматически создало проект на Vercel для этого творения в V0,
00:03:36которое я только что сделал.
00:03:37Если я нажму Проверить на Vercel (Inspect on Vercel), я смогу перейти и взглянуть на этот проект.
00:03:42Внутри этого проекта я вижу всю аналитику, ошибки и полную историю развертываний.
00:03:48Отлично, я опубликовал это приложение в продакшн.
00:03:51Теперь я могу перейти на живой сайт, именно это увидят пользователи, и я могу поделиться
00:03:56этой ссылкой, чтобы они могли получить к нему публичный доступ.
00:03:59Что действительно круто в V0, так это то, что я могу добавить собственный домен.
00:04:03Я могу настроить домен на .vercel.app, купить новый домен или добавить домен, которым я уже
00:04:09владею.
00:04:10Поскольку это страница для разового мероприятия, я настрою базовый домен,
00:04:14а затем опубликую ее снова.
00:04:15Отлично.
00:04:16Итак, теперь этот домен обновлен, и я могу получить доступ к той же странице по новому домену,
00:04:21который я отредактировал и добавил.
00:04:23Вот и всё.
00:04:24Теперь V0 развернул мое приложение на инфраструктуре Vercel, и оно доступно для всех.
00:04:30Теперь перейдем к моему следующему проекту — обновлению целевой страницы, которая уже
00:04:34была опубликована на нашем маркетинговом сайте.
00:04:36Наша команда разработчиков управляет сайтом и контролирует версии кода через GitHub,
00:04:41поэтому мне нужно сделать обновление в рамках их рабочего процесса.
00:04:44Хорошая новость заключается в том, что V0 позволяет мне сделать именно это без лишних усилий.
00:04:48Я открою новое окно V0 и нажму Импортировать из GitHub (import from GitHub).
00:04:52У меня уже есть URL-адрес этого репозитория GitHub, к которому я пытаюсь получить доступ, поэтому я
00:04:56вставлю его в верхнюю строку поиска и нажму Импорт (import).
00:05:01И вот так просто V0 импортирует репозиторий.
00:05:05Итак, V0 импортировал репозиторий, и я готов внести изменения.
00:05:08Я бы хотел добавить баннер в верхнюю часть этой маркетинговой страницы, который направлял бы людей
00:05:12на созданную нами целевую страницу мероприятия, чтобы они могли зарегистрироваться
00:05:17на презентацию часов Son of Ali.
00:05:18Поэтому я попрошу V0 сделать именно это.
00:05:21Пока V0 вносит изменения, я перейду во вкладку Git.
00:05:27Вы видите, что V0 автоматически создал для меня ветку, что облегчит
00:05:31моим разработчикам задачу по проверке и тестированию изменений, которые я вношу, перед тем как
00:05:35слить их с основным сайтом.
00:05:36Хорошо, V0 внес изменения, теперь пришло время создать пул-реквест, который моя
00:05:42команда сможет проверить.
00:05:44Я нажимаю Открыть PR (open PR), а затем Создать пул-реквест (open pull request).
00:05:49Теперь, если я нажму Посмотреть PR (view PR), я увижу, что мой пул-реквест был открыт на GitHub.
00:05:54И поскольку наш сайт находится на Vercel, автоматически была создана превью-версия сборки.
00:05:59Так что не только мои разработчики могут изучить код, но и вся остальная команда может увидеть,
00:06:03как выглядит обновление, и оставить свои отзывы в комментариях.
00:06:06Вот и всё.
00:06:07Я только что самостоятельно внес изменения в наш маркетинговый сайт без создания задач для инженеров,
00:06:11и они могут проверить эти изменения в рамках своего привычного рабочего процесса.
00:06:15Мы создали V0 для команд, работающих с разработчиками: будь то маркетологи, продакты, фаундеры
00:06:19или даже сами инженеры.
00:06:22С помощью V0 любой может превратить свои идеи в реальный софт и совместно работать над существующими приложениями
00:06:27и веб-сайтами.
00:06:28Посетите v0.app и запустите свой первый проект уже сегодня.