1. Descripción general
¿Por dónde comienza la compilación con IA hoy? Para la mayoría de nosotros, suele comenzar con una pregunta simple: "¿Puedo crear un prototipo rápido de una solución para el problema en el que he estado pensando?". Ahí es donde entra en juego Google AI Studio. Es un lugar donde puedes crear prototipos rápidamente. En este codelab, crearemos una aplicación web simple con vibe coding y la implementaremos en Cloud Run.
Qué compilarás
¿Todo listo para usar el vibe coding en una aplicación web y ponerla a disposición de otros usuarios? Crearemos una aplicación web y la implementaremos en Cloud Run, todo con AI Studio. Como parte de este lab, harás lo siguiente:
- Compilar una aplicación web simple con vibe coding
- Probar que la aplicación funcione como se espera
- Implementar la aplicación en Cloud Run
Requisitos
2. Antes de comenzar
- En la página del selector de proyectos de la consola de Google Cloud, selecciona o crea un proyecto de Google Cloud.
- Asegúrate de que la facturación esté habilitada para tu proyecto de Cloud. Obtén información para verificar si la facturación está habilitada en un proyecto .
- Si tienes el vínculo para canjear créditos, puedes seguir las instrucciones aquí para canjearlos.
3. Prototipo
Ve a Google AI Studio. Comienza a escribir la instrucción que describa la aplicación que quieres compilar. Esta es mi instrucción:
Create a formal looking frontend application that has two buttons: "Snowflakes" and "Balloons". If the user clicks on the "Snowflakes" button, snowflakes of medium size should start falling on the screen from top to bottom for 5 seconds. If the user clicks on the "Balloons" button, balloons of medium size should start floating from the bottom of the screen and float to the top for 5 seconds.
Elige el modelo que prefieras. Aquí usamos Gemini 3 Pro (versión preliminar). Haz clic en el botón Build.
Según esta descripción simple, AI Studio compilará una aplicación web que coincida exactamente con la descripción que proporcionaste. La aplicación tardará entre 2 y 3 minutos en generarse.
Si encuentras algún problema con la aplicación, no dudes en proporcionar instrucciones adicionales que corrijan su comportamiento. Por ejemplo, aumenta el tamaño del copo de nieve al doble de su tamaño actual.
Consulta la instantánea de la aplicación generada a continuación:
4. Implementa en Cloud Run
Ahora que la aplicación está lista, implementémosla en Cloud Run.
- Haz clic en el botón con forma de cohete en la esquina superior derecha de la página de AI Studio. El botón muestra "Deploy app" cuando colocas el cursor sobre él.
- Se abrirá la ventana emergente **Deploy app on Google Cloud**.
- Haz clic en el menú desplegable Select a Cloud Project.
- Selecciona el proyecto en el menú desplegable. Si no puedes encontrar tu proyecto en el menú desplegable, haz clic en Import project y selecciona el proyecto en el panel Import project.
- Una vez que selecciones el proyecto, se verificará que tenga habilitada la facturación. Esta verificación se aprobará, ya que vinculamos la cuenta de facturación al proyecto en los pasos iniciales.
- Haz clic en el botón Deploy app y espera a que la aplicación se implemente en Cloud Run.
Ten en cuenta que el nombre del servicio de Cloud Run se generará automáticamente.
- La implementación debería completarse en un par de minutos y obtendrás la URL de la app. Si haces clic en la URL, verás la aplicación web implementada.
5. Limpia
Para evitar que se generen cargos en tu cuenta de Google Cloud por los recursos que se usaron en esta publicación, sigue estos pasos:
- En la consola de Google Cloud, ve a la página Administrar recursos.
- En la lista de proyectos, elige el proyecto que deseas borrar y haz clic en Borrar.
- En el diálogo, escribe el ID del proyecto y, luego, haz clic en Cerrar para borrarlo.
6. Felicitaciones
¡Felicitaciones! Completaste correctamente el vibe coding de una aplicación en AI Studio y la implementaste en Cloud Run.
AI Studio es una plataforma ideal para desarrollar y probar aplicaciones, lo que permite a los usuarios visualizar de inmediato sus diseños en acción.
La integración perfecta de AI Studio con Cloud Run permite a los usuarios implementar sus aplicaciones directamente en Google Cloud sin esfuerzo. El uso de Cloud Run otorga todos los beneficios inherentes de un entorno sin servidores, lo que elimina las complejidades y la sobrecarga de la administración de la infraestructura.