00:00:00>> Olá, eu sou a Pauline da Vercel e no vídeo de hoje,
00:00:03vou mostrar a você como usar
00:00:05a integração de Git do v0 para levar
00:00:08suas ideias do protótipo à produção.
00:00:11Então, neste vídeo,
00:00:12estaremos construindo um blog,
00:00:14conectando-o ao GitHub,
00:00:15experimentando novos recursos com segurança usando
00:00:18branches e depois fazendo o deploy ao vivo na web.
00:00:21Ao final, você deverá entender o fluxo de trabalho completo.
00:00:25Então, vamos lá.
00:00:27Certo, estamos no v0.
00:00:30Vou começar construindo um blog simples.
00:00:33Vou apenas descrever o que eu quero no chat.
00:00:35Então, o que faremos aqui é criar
00:00:37uma página de blog moderna com
00:00:42um cabeçalho, post em destaque e uma grade de posts recentes.
00:00:53Dica de mestre: você também pode mudar o modelo por aqui.
00:00:57Temos vários modelos disponíveis.
00:00:59Temos o Mini, Pro, Max,
00:01:01e o Opus também.
00:01:03Você pode mudar isso enquanto conversa.
00:01:07Legal, gostei.
00:01:09O v0 gerou este layout de blog limpo para mim.
00:01:13Vamos fazer alguns ajustes para personalizá-lo um pouco.
00:01:17Vamos deixar o,
00:01:21ah, se eu souber digitar,
00:01:23deixar o fundo do cabeçalho em degradê de azul para roxo.
00:01:32Perfeito. Agora tenho um blog com o qual estou satisfeita.
00:01:36Mas, por enquanto, isso só existe no v0.
00:01:40Preciso salvar meu trabalho em algum lugar mais permanente.
00:01:43Eventualmente, quero publicar isso ao vivo,
00:01:45e é aí que entra a integração com Git.
00:01:48Vamos aqui para a barra lateral
00:01:52onde você pode ver o logo do GitHub e a conexão Git.
00:01:56Como esta é a minha primeira vez conectando este projeto,
00:01:59o v0 me pede para conectar minha conta do GitHub e nomear meu repositório.
00:02:04O que faremos aqui é prosseguir com a conexão.
00:02:06O escopo é a minha conta.
00:02:08Estou em todas essas contas,
00:02:10mas por enquanto, usarei minha conta pessoal Pauline.
00:02:13Estou satisfeita com esse nome de repositório,
00:02:15então vamos deixar assim e
00:02:16criar o repositório.
00:02:18Simples assim, o v0 está criando
00:02:21o repositório e enviando todo o meu código para o GitHub.
00:02:24Ótimo. Agora, vamos ver o que realmente acontece no GitHub.
00:02:29Podemos dar uma olhada.
00:02:31Vejam todo este código que o v0 gerou.
00:02:34Está devidamente estruturado com todos os arquivos de configuração necessários.
00:02:38Meus componentes estão lá,
00:02:40o diretório app, e
00:02:41está tudo organizado e pronto para trabalhar.
00:02:43Você deve estar pensando: "O que eu ganhei conectando ao GitHub?"
00:02:48Primeiro, meu código está com backup seguro.
00:02:51Se algo der errado,
00:02:53eu tenho todo o meu histórico.
00:02:55Segundo, posso experimentar com mais
00:02:57liberdade agora sem me preocupar com mudanças que quebrem tudo.
00:03:00Veremos isso em ação em um momento com as branches,
00:03:02e terceiro, eu tenho um caminho para a produção.
00:03:04Posso colocar este blog no ar.
00:03:06Certo, vamos ver isso em ação adicionando um novo recurso.
00:03:09Digamos que eu queira adicionar uma seção "Sobre o Autor",
00:03:14mas ainda não tenho 100% de certeza de como quero que ela fique.
00:03:17Não quero estragar esta versão.
00:03:19É aqui que entram as branches.
00:03:21Uma branch é como uma versão paralela do
00:03:24seu projeto onde você pode experimentar com segurança.
00:03:27Ok. O que faremos aqui é duplicar esta branch.
00:03:31Vamos chamar esta branch de "author-bio".
00:03:36Reparem aqui em cima,
00:03:38agora estou na branch author-bio.
00:03:41Minha branch principal (main) continua exatamente como a deixei, intocada.
00:03:45Agora podemos experimentar livremente aqui.
00:03:48Queremos adicionar aquela bio do autor.
00:03:50Então, vamos pedir ao v0 para adicionar uma seção de bio do autor.
00:03:56Ok, incrível.
00:03:59Ele adicionou este novo componente de bio do autor.
00:04:02Agora vamos fazer uma atualização rápida na visualização aqui.
00:04:06Devemos conseguir ver onde ele a adicionou.
00:04:10Aí está. Há uma nova seção "Sobre o Autor".
00:04:13Apenas um lembrete,
00:04:15fizemos as alterações nesta branch,
00:04:18a branch author-bio,
00:04:19o que significa que nenhuma alteração
00:04:22foi feita na branch principal ainda.
00:04:24Esta branch é livre para experimentarmos.
00:04:27Se quiséssemos mudar algo mais no texto,
00:04:29ou no estilo, podemos fazer isso livremente aqui.
00:04:33Na verdade, olhando para isso,
00:04:35acho que a bio do autor deveria ser um pouco mais compacta.
00:04:38Deixe-me ajustá-la enquanto ainda estou nesta branch,
00:04:40só para mostrar a vocês.
00:04:41Deixe a bio do autor mais compacta.
00:04:46Ok, incrível.
00:04:48Você pode ver que o v0 tornou a seção do autor mais compacta
00:04:52e, no geral, reduziu o preenchimento (padding).
00:04:56Ficou bem melhor.
00:04:57Estou super satisfeita com isso.
00:04:58Então, podemos abrir um PR e enviar essas alterações.
00:05:03Vejam como esse fluxo protege minha branch principal.
00:05:06Posso iterar quantas vezes quiser nesta branch experimental,
00:05:10mas a main permanece estável até que eu esteja totalmente satisfeita.
00:05:13Certo, estou feliz com a bio do autor agora.
00:05:16É hora de mesclar isso na minha branch principal.
00:05:18Vou criar um pull request.
00:05:20Um pull request ou PR é basicamente pedir
00:05:25para puxar minhas alterações da branch author-bio
00:05:28para a branch main.
00:05:30É a forma oficial de propor mudanças.
00:05:32Vamos abrir um PR diretamente por aqui.
00:05:35E vamos clicar aqui no próprio PR.
00:05:44E isso nos leva diretamente ao GitHub.
00:05:46E como vocês podem ver,
00:05:47temos aqueles dois commits que fizemos no v0.
00:05:51Criar a bio do autor e também torná-la mais compacta.
00:05:56E se formos aqui em "files changes",
00:05:58você pode revisar o código exato que o v0 alterou.
00:06:03Em um ambiente de equipe,
00:06:04é aqui que seus colegas revisariam seu código
00:06:07e deixariam comentários.
00:06:08Para projetos solo,
00:06:09esta é a sua verificação final para garantir
00:06:11que tudo esteja correto.
00:06:13Estou satisfeita com essas mudanças.
00:06:14Então, vou mesclar (merge) este pull request.
00:06:17Vamos voltar para o v0 aqui.
00:06:20E como podem ver, podemos mesclar o PR.
00:06:23Vamos apenas mesclar isso.
00:06:29E se voltarmos ao GitHub,
00:06:31você pode ver que ele foi mesclado.
00:06:34Este recurso agora faz parte oficialmente da nossa base de código principal.
00:06:38Agora que tudo está no ar.
00:06:39Podemos também ir em configurações aqui
00:06:42e olhar o projeto Vercel e "view on Vercel".
00:06:46Como podem ver aqui, o nosso deploy foi concluído.
00:06:51E se clicarmos aqui nos nossos domínios, lá está ele.
00:06:55Meu blog está ao vivo na internet.
00:06:57Vejam que temos nosso cabeçalho com o degradê,
00:07:00os posts do blog.
00:07:01E se eu rolar para baixo, nossa bio do autor.
00:07:06Basicamente, tudo o que construí no v0
00:07:08foi mesclado com segurança via Git
00:07:10e agora está publicado e acessível ao mundo.
00:07:13Este é o mesmo fluxo de trabalho
00:07:14que equipes de desenvolvimento profissional usam todos os dias.
00:07:17Você constrói no v0, gerencia seu código com Git
00:07:20e depois faz o deploy com a Vercel,
00:07:22um fluxo de produção completo.
00:07:25Espero que isso ajude você a entender
00:07:27como usar a integração de Git do v0 com mais confiança.
00:07:30Experimente esse fluxo você mesmo.
00:07:32Comece com algo pequeno, crie uma branch,
00:07:34experimente e publique.
00:07:36Se tiver alguma dúvida,
00:07:38encontre-nos no espaço da nossa comunidade em community.vercel.com.
00:07:41Muito obrigada por assistir.