¡Es hora de pasar a la acción! Ya tenemos Antigravity instalado y conocemos la interfaz. Ahora vamos a construir algo real para experimentar el flujo de trabajo de un «Agent Manager».
Videotutorial Paso a Paso:
Aquí tienes el video completo donde realizo el proceso en tiempo real para que no te pierdas ningún detalle.
1. El Concepto: App de recomendación de películas
¿Alguna vez has pasado 40 minutos haciendo scroll en Netflix sin elegir nada? Para solucionar este problema de indecisión, vamos a construir nuestra primera aplicación: App de recomendación de películas. Será una app estilo «Tinder» donde podrás deslizar a la derecha las películas que quieras ver (Watchlist) o a la izquierda las que prefieras descartar.
Lo haremos utilizando Vibe Coding: nosotros actuaremos como mánagers dando instrucciones en lenguaje natural, y la IA se encargará de toda la lógica y el diseño.
- Funcionalidad: Será una interfaz estilo «Tinder».
- Interacción: El usuario podrá deslizar a la derecha para guardar una película en su lista de seguimiento o deslizar a la izquierda para descartarla.
- Datos: Utilizaremos una API simulada para conectarnos a una aplicación como imdb.com y obtener posters, calificaciones e información técnica (inicialmente con datos simulados o mock data).
2. Antigravity vs. El Método Tradicional
Si hiciéramos esto de la forma antigua, tendrías que saltar entre el editor de código, el navegador y chats externos de IA para investigar APIs o animaciones. Con Antigravity, el Agent Manager planifica la lógica, el Editor construye los archivos y el Browser integrado nos permite probar la acción de «deslizar» en tiempo real, todo sin que tengas que escribir una sola línea de código si no lo deseas.
3. Configuración del Workspace (Espacio de Trabajo)
Sigue estos pasos para preparar el terreno:
- En el panel izquierdo, haz clic en Open Workspace.
- Selecciona una ubicación en tu disco local y crea una nueva carpeta llamada recomienda-pelis-app.
- Haz clic en Open y confirma que confías en los autores de la carpeta (Trust the authors). Esto permite que la IA tenga permisos para crear y editar archivos en esa ubicación.
4. Lanzando el Primer Prompt
Ahora, iniciaremos la conversación con el agente dentro de tu nuevo Workspace. Vamos a usar el concepto de Vibe Coding (programar a través de la intención). Copia y pega (o adapta) la siguiente instrucción en el chat del Agent Manager:
«Crea una aplicación en Next.js llamada Recomienda Pelis. Debe tener una interfaz estilo Tinder, lo que significa que los usuarios puedan deslizar a la derecha para guardar una película en una lista de seguimiento o a la izquierda para descartarla. Por ahora, podemos usar una API simulada (mock API) para la información de las películas.»
5. Tu rol como Mánager
A partir de aquí, tú eres el director. No te agobies con la sintaxis de Next.js o las librerías de animaciones. Tu trabajo es comunicarte en lenguaje claro con tu «empleado» de IA y supervisar cómo transforma esa idea en una aplicación funcional que pronto verás aparecer en tu pantalla.
Notas para tus alumnos:
- Next.js: Es el marco de trabajo (framework) de React que usará la IA para construir la estructura.
- Interfaz estilo Tinder: Define el comportamiento visual de «deslizar» (swipe).
- API simulada (Mock API): Le indica a la IA que no necesita conectarse a una base de datos real todavía, sino que puede inventar datos de prueba para empezar a trabajar rápido.