00:00:00>> Привет, я Полин из Vercel, и в сегодняшнем видео
00:00:03я покажу вам, как использовать
00:00:05интеграцию v0 с Git, чтобы перенести
00:00:08ваши идеи из прототипа в продакшн.
00:00:11Итак, в этом видео
00:00:12мы создадим блог,
00:00:14подключим его к GitHub,
00:00:15будем безопасно тестировать новые функции с помощью
00:00:18веток и затем развернем его в сети.
00:00:21К концу видео вы поймете весь рабочий процесс.
00:00:25Итак, приступим.
00:00:27Хорошо, мы в v0.
00:00:30Я начну с создания простого блога.
00:00:33Я просто опишу в чате то, что хочу.
00:00:35Здесь мы создадим
00:00:37современную страницу блога с
00:00:42шапкой, главным постом и сеткой последних записей.
00:00:53Совет: вы также можете сменить модель здесь.
00:00:57У нас есть несколько моделей.
00:00:59Есть Mini, Pro, Max,
00:01:01а также Opus.
00:01:03Вы можете менять их в процессе общения.
00:01:07Круто, мне нравится.
00:01:09v0 сгенерировал для меня этот чистый макет блога.
00:01:13Давайте внесем пару правок, чтобы немного персонализировать его.
00:01:17Давайте сделаем,
00:01:21ох, если я правильно напишу,
00:01:23сделаем фон шапки градиентом от синего к фиолетовому.
00:01:32Идеально. Теперь у меня есть блог, который меня устраивает.
00:01:36Но сейчас он существует только в v0.
00:01:40Мне нужно сохранить работу где-то на постоянной основе.
00:01:43В конечном итоге я хочу запустить его в лайв,
00:01:45и именно здесь вступает в дело интеграция с Git.
00:01:48Перейдем в боковую панель,
00:01:52где виден логотип GitHub и подключение Git.
00:01:56Так как я впервые подключаю этот проект,
00:01:59v0 просит меня привязать аккаунт GitHub и назвать репозиторий.
00:02:04Итак, мы переходим к подключению.
00:02:06Область доступа — мой аккаунт.
00:02:08Я состою во всех этих аккаунтах,
00:02:10но пока выберу свой личный аккаунт Pauline.
00:02:13Меня устраивает название репозитория,
00:02:15так что оставим как есть и
00:02:16создадим репозиторий.
00:02:18Вот так просто v0 создает
00:02:21репозиторий и пушит весь мой код на GitHub.
00:02:24Отлично. Теперь посмотрим, что произошло на GitHub.
00:02:29Давайте взглянем.
00:02:31Посмотрите на весь этот код, сгенерированный v0.
00:02:34Он правильно структурирован, со всеми нужными конфигами.
00:02:38Тут мои компоненты,
00:02:40директория app,
00:02:41все организовано и готово к работе.
00:02:43Вы можете подумать: «Что именно я получил от подключения к GitHub?»
00:02:48Во-первых, мой код надежно зарезервирован.
00:02:51Если что-то пойдет не так,
00:02:53у меня есть вся история изменений.
00:02:55Во-вторых, теперь я могу экспериментировать
00:02:57свободнее, не боясь что-то сломать.
00:03:00Мы увидим это в действии через минуту с ветками,
00:03:02и в-третьих, у меня есть путь к продакшну.
00:03:04Я могу опубликовать этот блог.
00:03:06Хорошо, давайте проверим это в деле, добавив новую функцию.
00:03:09Допустим, я хочу добавить раздел «Об авторе»,
00:03:14но пока на 100 процентов не уверен, как он должен выглядеть.
00:03:17Я не хочу портить текущую версию.
00:03:19И тут на помощь приходят ветки.
00:03:21Ветка — это как параллельная версия
00:03:24вашего проекта, где можно безопасно экспериментировать.
00:03:27Хорошо. Мы сделаем копию этой ветки.
00:03:31Назовем ветку «author-bio».
00:03:36Заметьте, здесь наверху,
00:03:38что я теперь нахожусь в ветке author-bio.
00:03:41Моя основная ветка (main) осталась нетронутой.
00:03:45Теперь мы можем здесь свободно экспериментировать.
00:03:48Нам нужно добавить био автора.
00:03:50Просто попросим v0 добавить раздел с био автора.
00:03:56Окей, потрясающе.
00:03:59Он добавил новый компонент био автора.
00:04:02Теперь давайте быстро обновим превью здесь.
00:04:06Мы должны увидеть, куда он его добавил.
00:04:10Вот он. Появился новый раздел «Об авторе».
00:04:13Напоминаю,
00:04:15мы внесли изменения в этой ветке,
00:04:18в ветке author-bio,
00:04:19а это значит, что никаких изменений
00:04:22в основной ветке main вообще не произошло.
00:04:24Так что эта ветка свободна для наших экспериментов.
00:04:27Если мы захотим изменить текст
00:04:29или стиль, мы можем делать это здесь без опаски.
00:04:33На самом деле, глядя на это,
00:04:35я думаю, что био автора должно быть чуть компактнее.
00:04:38Позвольте мне подправить это, пока я в этой ветке,
00:04:40просто чтобы показать вам.
00:04:41Сделай био автора более компактным.
00:04:46Окей, отлично.
00:04:48Вы видите, что v0 сделал раздел автора компактнее,
00:04:52в целом уменьшив отступы.
00:04:56Так выглядит гораздо лучше.
00:04:57Я очень этим довольна.
00:04:58Теперь мы можем открыть PR и зафиксировать изменения.
00:05:03Посмотрите, как этот процесс защищает мою основную ветку.
00:05:06Я могу итерировать сколько угодно в экспериментальной ветке,
00:05:10но main остается стабильной, пока я не буду полностью удовлетворена.
00:05:13Итак, био автора готово.
00:05:16Пора влить это в основную ветку.
00:05:18Я создам Pull Request.
00:05:20Pull Request или PR — это, по сути, запрос
00:05:25на перенос моих изменений из ветки author-bio
00:05:28в основную ветку main.
00:05:30Это формальный способ предложить изменения.
00:05:32Мы откроем PR прямо здесь.
00:05:35И просто перейдем к самому PR.
00:05:44Это переносит нас на GitHub.
00:05:46И, как вы видите,
00:05:47там два коммита, которые мы сделали в v0.
00:05:51Создание био автора и придание ему компактности.
00:05:56Если мы перейдем во вкладку изменений файлов,
00:05:58вы сможете просмотреть точный код, который изменил v0.
00:06:03При работе в команде
00:06:04именно здесь ваши коллеги проверяли бы код
00:06:07и оставляли комментарии.
00:06:08Для сольных проектов
00:06:09это ваша финальная проверка, чтобы убедиться,
00:06:11что все выглядит хорошо.
00:06:13Меня устраивают эти изменения.
00:06:14Поэтому я подтверждаю этот Pull Request.
00:06:17Теперь вернемся в v0.
00:06:20И, как видите, мы можем слить PR.
00:06:23Давайте сделаем это.
00:06:29Если мы вернемся на GitHub,
00:06:31вы увидите, что слияние выполнено.
00:06:34Теперь эта функция официально стала частью основной базы кода.
00:06:38Все готово к публикации.
00:06:39Мы также можем зайти в настройки
00:06:42в проект Vercel и посмотреть его там.
00:06:46Как видите, развертывание прошло успешно.
00:06:51И если мы кликнем по нашим доменам — вот он.
00:06:55Мой блог доступен в интернете.
00:06:57Вы видите нашу шапку с градиентом,
00:07:00посты в блоге.
00:07:01И если прокрутить вниз — био автора.
00:07:06В общем, все, что я создала в v0,
00:07:08безопасно прошло через Git
00:07:10и теперь развернуто и доступно всему миру.
00:07:13Это тот же самый рабочий процесс,
00:07:14который профессиональные команды используют каждый день.
00:07:17Вы создаете в v0, управляете кодом через Git
00:07:20и развертываете с Vercel —
00:07:22полноценный цикл разработки.
00:07:25Надеюсь, это поможет вам
00:07:27увереннее использовать интеграцию v0 с Git.
00:07:30Попробуйте этот процесс сами.
00:07:32Начните с чего-то малого: создайте ветку,
00:07:34поэкспериментируйте и опубликуйте.
00:07:36Если у вас возникнут вопросы,
00:07:38ищите нас в сообществе по адресу community.vercel.com.
00:07:41Большое спасибо за просмотр.