Transcript
00:00:00Esta é uma página de destino de evento que eu mesmo construí em poucos minutos.
00:00:05Ela inclui até uma experiência de provador virtual baseada em IA.
00:00:09Meu chefe me atribuiu o projeto e o V0 me ajudou a transformar minhas ideias em software real.
00:00:14Neste vídeo, vou mostrar o que é o V0 e como construir projetos passo a passo.
00:00:19Então, o que é o V0?
00:00:21A IA torna mais fácil gerar código.
00:00:23O V0 canaliza esse poder em um formato que facilita para qualquer pessoa construir aplicativos reais
00:00:28e sites, ou colaborar com desenvolvedores.
00:00:30O V0 foi projetado para ajudar você a ir do zero ao lançamento o mais rápido possível.
00:00:36É assim que o V0 funciona.
00:00:37Você descreve o aplicativo, agente ou site que deseja, e então o V0 gera o código
00:00:42em uma visualização ao vivo.
00:00:43Você pode fazer alterações e modificar seu projeto conversando com o V0, dizendo quais mudanças fazer,
00:00:48e ele fará isso por você.
00:00:49O V0 gera software real usando Vercel e Next.js, mas o V0 não é apenas um criador de sites.
00:00:56Ele pode gerar aplicativos reais, conectá-los a IA e bancos de dados, e gerar códigos que desenvolvedores
00:01:00podem usar e implantar.
00:01:02Isso é possível porque o V0 é desenvolvido pela Vercel, criadora do framework de programação Next.js,
00:01:08que é usado por marcas como Under Armour, Stripe e Notion.
00:01:11Então, quando o V0 constrói e implanta seu aplicativo Next.js, você está usando o mesmo código e a infraestrutura
00:01:15segura que as maiores empresas do mundo utilizam.
00:01:19Vamos mostrar alguns projetos para que você veja o V0 em ação e como é fácil começar.
00:01:24Digamos que estou em uma equipe de marketing e tenho dois grandes projetos para fazer esta semana.
00:01:27Primeiro, preciso criar uma página de evento para um novo produto que estamos lançando.
00:01:31E segundo, preciso atualizar uma página de destino no nosso site.
00:01:34Vamos começar pela página do evento.
00:01:36O evento é para uma festa de lançamento de produto, onde apresentaremos um novo relógio chamado Son of
00:01:40Ali.
00:01:41Quero tornar a página de destino estilosa e empolgante para gerar expectativa e criar uma experiência envolvente
00:01:45de provador virtual para os visitantes, incentivando-os a se inscrever.
00:01:48Então, vou dizer ao V0 para fazer exatamente isso.
00:01:53Terminei de escrever o meu comando.
00:01:54Agora vou enviar minhas instruções e o V0 começará a construir.
00:01:59Enquanto o V0 está construindo, quero mostrar o que o torna tão poderoso.
00:02:02Se você clicar em Settings (Configurações) e depois em Integrations (Integrações), verá todas as integrações disponíveis
00:02:07para você no V0.
00:02:09Primeiro, você pode ver que o V0 já vem com IA integrada.
00:02:12Ele usará o AI SDK para desenvolver recursos de IA e o AI Gateway para dar ao seu aplicativo acesso
00:02:17a centenas de modelos de IA automaticamente.
00:02:20Você também pode criar ou se conectar a bancos de dados para alimentar o back-end do seu aplicativo e até
00:02:25aceitar pagamentos através do Stripe.
00:02:27Com essas integrações, você pode criar aplicativos full-stack reais com suporte a IA.
00:02:32Ok, vamos dar uma olhada na nossa página de evento.
00:02:34O V0 terminou de construir esta primeira versão, então vamos testá-la.
00:02:38Vou fazer o upload de uma imagem minha, e isso deve nos dar aquelas quatro
00:02:44opções que pedimos no provador virtual de relógio.
00:02:49Incrível, o V0 realmente pegou minhas instruções e atualizou o código.
00:02:55Se olharmos para o editor, você pode ver que o V0 está atualizando ativamente o código Next.js.
00:03:00O editor também facilita para os desenvolvedores revisarem e editarem o código.
00:03:04Tudo bem, o V0 terminou de fazer as alterações e elas ficaram ótimas.
00:03:09Antes de publicar isso, quero compartilhar com a minha equipe para receber feedback.
00:03:12Posso clicar em Share (Compartilhar), copiar o link e enviar a conversa e a visualização para a minha equipe.
00:03:18O que eles verão nessa visualização será exatamente o que os usuários verão quando eu tornar a página pública,
00:03:22então não preciso me preocupar com mudanças ao implantar de fato.
00:03:26Assim que minha equipe revisar a página, estarei pronto para dar a ela um URL personalizado e publicá-la.
00:03:31Além disso, isso na verdade criou um projeto na Vercel para esta criação do V0
00:03:36que eu fiz.
00:03:37Então, se eu clicar em Inspect on Vercel (Inspecionar na Vercel), posso ir e dar uma olhada no projeto.
00:03:42Dentro desse projeto, consigo ver todas as análises, erros e um histórico completo de implantações.
00:03:48Excelente, acabo de publicar este aplicativo em produção.
00:03:51Agora posso acessar o site no ar, ver o que os usuários verão e compartilhar
00:03:56esse link para que eles possam acessá-lo publicamente.
00:03:59O que é muito legal no V0 é que posso escolher adicionar um domínio personalizado.
00:04:03Posso personalizar o domínio em .vercel.app, comprar um domínio ou adicionar um domínio que eu já
00:04:09possua.
00:04:10Como esta é uma página para um evento único, vou personalizar o domínio base e
00:04:14publicá-la novamente.
00:04:15Ótimo.
00:04:16Pronto, agora o domínio foi atualizado e posso acessar a mesma página nesse novo domínio que
00:04:21eu editei e adicionei.
00:04:23E é isso.
00:04:24O V0 agora implantou meu aplicativo na infraestrutura da Vercel e ele está público para qualquer pessoa acessar.
00:04:30Agora vamos para o meu próximo projeto, que é atualizar uma página de destino que já
00:04:34foi publicada no nosso site de marketing.
00:04:36Nossa equipe de desenvolvimento gerencia o site e controla as versões do código pelo GitHub, então vou
00:04:41precisar fazer a atualização como parte do fluxo de trabalho deles.
00:04:44A boa notícia é que o V0 facilita muito fazer exatamente isso.
00:04:48Vou abrir uma nova janela do V0 e clicar em "Import from GitHub" (Importar do GitHub).
00:04:52Eu já tenho o URL do repositório do GitHub que quero acessar, então vou
00:04:56colá-lo na barra superior e clicar em "Import".
00:05:01E, simples assim, o V0 importa o repositório.
00:05:05Com o repositório importado no V0, estou pronto para fazer uma alteração.
00:05:08O que eu gostaria de fazer é adicionar um banner no topo desta página de marketing direcionando as pessoas
00:05:12para a página de destino do evento que acabamos de criar, para que possam se inscrever no evento de lançamento
00:05:17do Son of Ali.
00:05:18Vou pedir para o V0 fazer exatamente isso.
00:05:21Enquanto o V0 faz a alteração, vou clicar em "Git".
00:05:27Você pode ver que o V0 criou automaticamente um branch para mim, o que facilitará para
00:05:31os desenvolvedores revisarem e testarem as alterações que estou fazendo antes de mesclá-las no
00:05:35site principal.
00:05:36Muito bem, o V0 fez a alteração, então agora é hora de criar um Pull Request que minha
00:05:42equipe possa revisar.
00:05:44Vou clicar em "Open PR" (Abrir PR) e depois em "Open pull request".
00:05:49Agora, se eu clicar em "View PR" (Ver PR), posso ver que meu Pull Request foi aberto no GitHub.
00:05:54E como nosso site está na Vercel, uma versão de pré-visualização foi gerada automaticamente.
00:05:59Assim, não apenas meus desenvolvedores podem revisar o código, mas o resto da equipe pode ver como a atualização
00:06:03ficou e dar feedback por meio de comentários.
00:06:06E é isso.
00:06:07Fiz uma alteração no nosso site de marketing sozinho, sem abrir um chamado para a engenharia,
00:06:11e eles podem revisar a mudança como parte do processo existente.
00:06:15Criamos o V0 para equipes que trabalham com desenvolvedores, sejam de marketing, produto, fundadores
00:06:19ou até mesmo os próprios engenheiros.
00:06:22Com o V0, qualquer pessoa pode transformar suas ideias em software real e colaborar em aplicativos e
00:06:27sites existentes.
00:06:28Acesse v0.app e lance seu primeiro projeto hoje mesmo.