00:00:00>> Hola, soy Pauline de Vercel y en el video de hoy,
00:00:03voy a mostrarles cómo usar
00:00:05la integración de Git en v0 para llevar
00:00:08sus ideas del prototipo a la producción.
00:00:11Así que en este video,
00:00:12estaremos construyendo un blog,
00:00:14conectándolo a GitHub,
00:00:15experimentando con nuevas funciones de forma segura usando
00:00:18ramas y luego desplegándolo en vivo en la web.
00:00:21Al final, deberían entender el flujo de trabajo completo.
00:00:25Así que, sumerjámonos en ello.
00:00:27Bien, ya estamos en v0.
00:00:30Voy a empezar construyendo un blog sencillo.
00:00:33Simplemente describiré lo que quiero en el chat.
00:00:35Lo que haremos aquí es crear
00:00:37una página de blog moderna con
00:00:42un encabezado, un post destacado y una cuadrícula de posts recientes.
00:00:53Consejo profesional: también pueden cambiar el modelo desde aquí.
00:00:57Tenemos múltiples modelos.
00:00:59Tenemos Mini, Pro, Max,
00:01:01y también Opus.
00:01:03Así que pueden cambiarlo mientras chatean.
00:01:07Genial, me gusta.
00:01:09v0 ha generado este diseño de blog limpio para mí.
00:01:13Hagamos algunos ajustes para personalizarlo un poco.
00:01:17Vamos a hacer que el...
00:01:21vaya, si es que sé escribir...
00:01:23hacer que el fondo del encabezado sea un degradado de azul a púrpura.
00:01:32Perfecto. Ahora tengo un blog con el que estoy contenta.
00:01:36Pero por ahora, esto solo existe en v0.
00:01:40Necesito guardar mi trabajo en algún lugar más permanente.
00:01:43Eventualmente, quiero desplegar esto en vivo,
00:01:45y ahí es donde entra esta integración con Git.
00:01:48Así que nos dirigiremos aquí a la barra lateral
00:01:52donde pueden ver el logo de GitHub y la conexión de Git.
00:01:56Como es la primera vez que conecto este proyecto,
00:01:59v0 me pide que conecte mi cuenta de GitHub y nombre mi repositorio.
00:02:04Así que lo que haremos aquí es proceder a conectar.
00:02:06El alcance es mi cuenta.
00:02:08Estoy en todas estas cuentas,
00:02:10pero por ahora, usaré mi cuenta personal de Pauline.
00:02:13Estoy conforme con este nombre de repositorio,
00:02:15así que lo dejaremos así y vamos
00:02:16a proceder a crear el repositorio.
00:02:18Y así de fácil, v0 está creando
00:02:21el repositorio y subiendo todo mi código a GitHub.
00:02:24Genial. Ahora, veamos qué sucede realmente en GitHub.
00:02:29Echemos un vistazo.
00:02:31Miren todo este código que generó v0.
00:02:34Está estructurado correctamente con todos los archivos de configuración.
00:02:38Mis componentes están ahí,
00:02:40el directorio app, y
00:02:41todo está organizado y listo para trabajar.
00:02:43Tal vez se pregunten: "¿Qué gané realmente al conectarme a GitHub?"
00:02:48Primero, mi código tiene una copia de seguridad segura.
00:02:51Si algo saliera mal,
00:02:53tengo todo mi historial.
00:02:55Segundo, puedo experimentar con más
00:02:57libertad ahora sin preocuparme por cambios que rompan algo.
00:03:00Veremos esto en acción en un momento con las ramas,
00:03:02y tercero, tengo un camino hacia la producción.
00:03:04Puedo desplegar este blog en vivo.
00:03:06Bien, veamos esto en acción añadiendo una nueva función.
00:03:09Digamos que quiero añadir una sección de "Sobre el autor",
00:03:14pero aún no estoy 100 por ciento segura de cómo quiero que se vea.
00:03:17No quiero arruinar esta versión.
00:03:19Aquí es donde entran las ramas.
00:03:21Una rama es como una versión paralela de
00:03:24tu proyecto donde puedes experimentar de forma segura.
00:03:27Bien. Lo que haremos aquí es duplicar esta rama.
00:03:31Llamemos a esta rama "author-bio".
00:03:36Fíjense aquí arriba,
00:03:38ahora estoy en la rama "author-bio".
00:03:41Mi rama principal sigue intacta, exactamente como la dejé.
00:03:45Así que ahora podemos experimentar libremente aquí.
00:03:48Queremos añadir esa biografía del autor.
00:03:50Así que le pediremos a v0 que añada una sección de biografía.
00:03:56Bien, increíble.
00:03:59Ha añadido este nuevo componente de biografía del autor.
00:04:02Ahora hagamos una actualización rápida en la vista previa.
00:04:06Deberíamos poder ver dónde lo añadió.
00:04:10Ahí está. Hay una nueva sección de "Sobre el autor".
00:04:13Solo como recordatorio,
00:04:15hemos hecho los cambios en esta rama,
00:04:18la rama "author-bio",
00:04:19lo que significa que no se han hecho
00:04:22cambios en la rama principal en absoluto.
00:04:24Así que esta rama es libre para experimentar.
00:04:27Si quisiéramos cambiar algo más del texto,
00:04:29o el estilo, podemos hacerlo libremente aquí.
00:04:33De hecho, viendo esto,
00:04:35creo que la biografía debería ser un poco más compacta.
00:04:38Permítanme ajustarla mientras sigo en esta rama,
00:04:40solo para mostrarles.
00:04:41Haz la biografía del autor más compacta.
00:04:46Bien, increíble.
00:04:48Pueden ver que v0 ha hecho la sección del autor más compacta
00:04:52y dice que en general ha reducido el relleno.
00:04:56Se ve mucho mejor.
00:04:57Estoy súper contenta con eso.
00:04:58Así que podemos proceder a abrir un PR y subir estos cambios.
00:05:03Vean cómo este flujo de trabajo protege mi rama principal.
00:05:06Puedo iterar tantas veces como quiera en esta rama de experimento,
00:05:10pero la principal se mantiene estable hasta que esté satisfecha.
00:05:13Muy bien, ya estoy contenta con la biografía del autor.
00:05:16Es hora de fusionar esto en mi rama principal.
00:05:18Crearé una solicitud de extracción (pull request).
00:05:20Una pull request o PR es básicamente pedir
00:05:25que se traigan mis cambios de la rama "author-bio"
00:05:28a la rama principal.
00:05:30Es la forma formal de proponer cambios.
00:05:32Así que abriremos un PR directamente aquí.
00:05:35Y haremos clic aquí para ir al PR mismo.
00:05:44Y esto nos lleva directamente a GitHub.
00:05:46Y como pueden ver,
00:05:47tenemos esos dos commits que hicimos en v0.
00:05:51Crear la biografía del autor y también hacerla más compacta.
00:05:56Y si vamos aquí a "files changes",
00:05:58pueden revisar el código exacto que v0 ha cambiado.
00:06:03En un entorno de equipo,
00:06:04aquí es donde tus colegas revisarían tu código
00:06:07y dejarían comentarios.
00:06:08Para proyectos individuales,
00:06:09esta es tu comprobación final para asegurarte
00:06:11de que todo se vea bien.
00:06:13Estoy satisfecha con estos cambios.
00:06:14Así que fusionaré esta pull request.
00:06:17Volvamos a v0 por aquí.
00:06:20Y como pueden ver, podemos fusionar el PR.
00:06:23Así que simplemente lo fusionaremos.
00:06:29Y si volvemos a GitHub,
00:06:31pueden ver que esto ha sido fusionado.
00:06:34Esta función ya es oficialmente parte de nuestro código principal.
00:06:38Así que ahora todo está en vivo.
00:06:39También podemos ir a la configuración aquí
00:06:42y ver el proyecto de Vercel y "ver en Vercel".
00:06:46Como pueden ver aquí, nuestro despliegue se realizó.
00:06:51Y si hacemos clic aquí en nuestros dominios, ahí está.
00:06:55Mi blog está en vivo en internet.
00:06:57Pueden ver que tenemos el encabezado con el degradado,
00:07:00los posts del blog.
00:07:01Y si bajo por aquí, nuestra biografía del autor.
00:07:06Básicamente, todo lo que construí en v0
00:07:08se fusionó de forma segura a través de Git
00:07:10y ahora está desplegado y accesible para el mundo.
00:07:13Este es el mismo flujo de trabajo
00:07:14que los equipos de desarrollo profesional usan cada día.
00:07:17Construyes en v0, gestionas tu código con Git
00:07:20y luego despliegas con Vercel,
00:07:22un flujo de trabajo de producción completo.
00:07:25Espero que esto les ayude a entender
00:07:27cómo usar la integración de Git de v0 con más confianza.
00:07:30Prueben este flujo ustedes mismos.
00:07:32Empiecen con algo pequeño, creen una rama,
00:07:34experimenten y desplieguen.
00:07:36Si tienen alguna pregunta,
00:07:38búsquennos en nuestro espacio comunitario en community.vercel.com.
00:07:41Muchas gracias por vernos.