Primeros pasos con v0: de la idea a producción
VVercel
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Esta es una página de destino para eventos que creé yo mismo en solo unos minutos.
00:00:05Incluso incluye una experiencia de prueba virtual impulsada por IA.
00:00:09Mi jefe me asignó el proyecto y V0 me ayudó a convertir mis ideas en software real.
00:00:14En este video, te mostraré qué es V0 y cómo crear proyectos paso a paso.
00:00:19¿Qué es entonces V0?
00:00:21La IA hace que sea fácil generar código.
00:00:23V0 aprovecha ese poder en un formato que facilita a cualquiera la creación de aplicaciones reales
00:00:28y sitios web, o la colaboración con desarrolladores.
00:00:30V0 está diseñado para ayudarte a pasar de cero a producción lo más rápido posible.
00:00:36Así es como funciona V0.
00:00:37Describes la aplicación, agente o sitio web que deseas, y luego V0 genera el código en
00:00:42una vista previa en vivo.
00:00:43Puedes hacer cambios y modificar tu proyecto hablando con V0, indicándole qué cambios realizar,
00:00:48y los hará por ti.
00:00:49V0 genera software real usando Vercel y Next.js, pero V0 no es solo un creador de sitios web.
00:00:56Puede generar aplicaciones reales, conectarlas a IA y bases de datos, y generar código que los desarrolladores
00:01:00pueden usar y desplegar.
00:01:02Esto es posible porque V0 fue creado por Vercel, los creadores del entorno de desarrollo Next.js,
00:01:08que utilizan marcas como Under Armour, Stripe y Notion.
00:01:11Así que cuando V0 crea y despliega tu aplicación Next.js, estás usando el mismo código e infraestructura
00:01:15segura que utilizan las principales empresas del mundo.
00:01:19Mostremos algunos proyectos para que puedas ver V0 en acción y lo fácil que es empezar.
00:01:24Estoy en un equipo de marketing y tengo dos grandes proyectos que hacer esta semana.
00:01:27Primero, necesito crear una página de evento para un nuevo producto que vamos a lanzar.
00:01:31Y segundo, necesito actualizar una página de destino en nuestro sitio web.
00:01:34Empecemos primero con la página del evento.
00:01:36El evento es para la fiesta de lanzamiento de un producto donde presentaremos un nuevo reloj llamado Son of
00:01:40Ali.
00:01:41Quiero que la página de destino sea elegante y emocionante para generar expectativa y crear una atractiva
00:01:45experiencia de prueba virtual para que los visitantes se registren.
00:01:48Así que le voy a pedir a V0 que haga exactamente eso.
00:01:53Ya terminé de escribir mi instrucción.
00:01:54Así que ahora enviaré mis indicaciones y V0 comenzará a construir.
00:01:59Mientras V0 construye, quiero mostrarte qué lo hace tan potente.
00:02:02Si haces clic en Settings y luego en Integrations, verás todas las integraciones disponibles
00:02:07para ti en V0.
00:02:09Primero, puedes ver que V0 ya tiene IA integrada.
00:02:12Utilizará el AI SDK para desarrollar funciones de IA y el AI Gateway para dar a tu aplicación acceso
00:02:17a cientos de modelos de IA de forma automática.
00:02:20También puedes crear o conectarte a bases de datos para potenciar el backend de tu aplicación e incluso
00:02:25aceptar pagos a través de Stripe.
00:02:27Con estas integraciones, puedes crear aplicaciones reales, completas y con IA habilitada.
00:02:32Bien, echemos un vistazo a nuestra página de evento.
00:02:34V0 terminó de construir esta primera versión, así que vamos a probarla.
00:02:38Voy a subir una imagen mía, y debería darnos esas cuatro
00:02:44generaciones que pedimos con la prueba virtual de reloj.
00:02:49Genial, V0 realmente ha tomado mis instrucciones y ha actualizado el código.
00:02:55Si miramos el editor, puedes ver que V0 está actualizando activamente el código de Next.js.
00:03:00El editor también facilita a los desarrolladores la revisión y edición del código.
00:03:04Muy bien, V0 ha terminado de hacer los cambios y se ven geniales.
00:03:09Antes de publicar esto, quiero compartirlo con mi equipo para recibir comentarios.
00:03:12Así que puedo hacer clic en Share, copiar el enlace y enviar el chat y la vista previa a mi equipo.
00:03:18Lo que verán con esta vista previa será exactamente lo que verán los usuarios cuando haga pública la página,
00:03:22así que no tengo que preocuparme de que nada cambie cuando la despliegue de verdad.
00:03:26Una vez que mi equipo haya revisado la página, estoy listo para asignarle una URL personalizada y publicarla.
00:03:31Es más, esto en realidad ha creado un proyecto en Vercel para esta creación de V0
00:03:36que acabo de hacer.
00:03:37Así que si hago clic en Inspect on Vercel, puedo ir y echar un vistazo a ese proyecto.
00:03:42Dentro de ese proyecto, puedo ver todas las métricas, errores y un historial completo de despliegues.
00:03:48De acuerdo, genial, ya he publicado esta aplicación a producción.
00:03:51Así que ahora puedo visitar el sitio en vivo, esto será lo que verán los usuarios y puedo compartir
00:03:56ese enlace para que puedan acceder públicamente.
00:03:59Lo que es realmente genial de V0 es que puedo elegir agregar un dominio personalizado.
00:04:03Puedo personalizar el dominio en .vercel.app, comprar un dominio o agregar uno que ya
00:04:09tenga.
00:04:10Como esta es una página para un evento único, voy a personalizar el dominio base y
00:04:14luego a publicarla de nuevo.
00:04:15Excelente.
00:04:16Bien, ahora ese dominio está actualizado y puedo acceder a la misma página en ese nuevo dominio que
00:04:21he editado y agregado.
00:04:23Y eso es todo.
00:04:24V0 ahora ha desplegado mi aplicación en la infraestructura de Vercel y es pública para que cualquiera pueda acceder.
00:04:30Pasemos ahora a mi siguiente proyecto, que es actualizar una página de destino que ya
00:04:34ha sido publicada en nuestro sitio de marketing.
00:04:36Nuestro equipo de desarrollo gestiona el sitio y controla las versiones del código a través de GitHub, así que voy
00:04:41a necesitar hacer la actualización como parte de su flujo de trabajo.
00:04:44La buena noticia es que V0 me facilita hacer exactamente eso.
00:04:48Voy a abrir una nueva ventana de V0 y a hacer clic en import from GitHub.
00:04:52De hecho, ya tengo la URL de este repositorio de GitHub al que intento acceder, así que la voy
00:04:56a pegar en la barra superior y haré clic en import.
00:05:01Y así de simple, V0 importa el repositorio.
00:05:05Así que ahora V0 ha importado el repositorio y estoy listo para hacer un cambio.
00:05:08Lo que me gustaría hacer es agregar un banner en la parte superior de esta página de marketing que dirija a las personas
00:05:12a la página de destino del evento que acabamos de crear para que puedan registrarse para el lanzamiento de
00:05:17Son of Ali.
00:05:18Así que le voy a pedir a V0 que haga exactamente eso.
00:05:21Mientras V0 realiza el cambio, voy a hacer clic en Git.
00:05:27Puedes ver que V0 ha creado automáticamente una rama para mí, lo que facilitará que
00:05:31mis desarrolladores revisen y prueben los cambios que estoy haciendo antes de fusionarlos en el
00:05:35sitio principal.
00:05:36Muy bien, V0 ha realizado el cambio, así que ahora es el momento de crear una solicitud de extracción (pull request) que mi
00:05:42equipo pueda revisar.
00:05:44Así que voy a hacer clic en open PR y luego en open pull request.
00:05:49Ahora, si hago clic en view PR, puedo ver que mi solicitud de extracción se ha abierto en GitHub.
00:05:54Y dado que nuestro sitio está en Vercel, se ha creado automáticamente una compilación de vista previa.
00:05:59Así que no solo mis desarrolladores pueden revisar el código, sino que el resto del equipo puede ver cómo se ve
00:06:03la actualización y dejar sus comentarios.
00:06:06Y eso es todo.
00:06:07Acabo de hacer un cambio en nuestro sitio de marketing por mí mismo, sin abrir un ticket para ingeniería,
00:06:11y ellos pueden revisar el cambio como parte de su proceso existente.
00:06:15Hemos creado V0 para equipos que trabajan con desarrolladores, ya sea de marketing, producto, fundadores,
00:06:19o incluso para los propios ingenieros.
00:06:22Con V0, cualquiera puede convertir sus ideas en software real y colaborar en aplicaciones y
00:06:27sitios web existentes.
00:06:28Visita v0.app y publica tu primer proyecto hoy mismo.