Lanza tu sitio web de portfolio con IA

1. Introducción

Descripción general

¿Por dónde se comienza a compilar con IA hoy en día? Para la mayoría de nosotros, comienza con una consulta o un prototipo. Google AI Studio ofrece un potente modo de compilación (a menudo denominado "codificación de ambiente") que te permite diseñar, probar y compilar aplicaciones web con la generación de código impulsada por los modelos de Gemini.

En este codelab, compilarás un sitio web de portfolio personal. El agente de AI Studio escribirá el código de frontend. Una vez que la app esté lista, la implementarás directamente en Cloud Run con un solo clic.

Actividades

• Indicarle a Google AI Studio que cree un prototipo de un sitio web de portfolio personal
• Probar la aplicación en el entorno de pruebas de la vista previa interactiva
• Implementar la aplicación en Cloud Run directamente desde la IU de Google AI Studio

Qué aprenderás

• Cómo usar el modo de compilación de Google AI Studio para crear rápidamente un prototipo de un servicio de frontend con lenguaje natural
• Cómo implementar tu aplicación de AI Studio como un contenedor sin servidores en Cloud Run

2. Configuración del proyecto

Antes de iniciar AI Studio, verifica el estado de tu cuenta y los requisitos previos.

Información de la cuenta y el nivel de Google

1. Si aún no tienes una Cuenta de Google, crea una.
   • Sugerencia: Si es posible, usa una cuenta de Google personal para este lab. Las cuentas grupales, corporativas o escolares pueden aplicar políticas de Workspace que inhabiliten las funciones experimentales o las integraciones en la nube.
2. Revisa los detalles de facturación de las implementaciones:
   • Nivel inicial de Google Cloud: Permite publicar hasta dos aplicaciones de pila completa en una región seleccionada sin costo, sin establecer una cuenta de facturación completa de Google Cloud.
   • Implementación estándar: Se conecta a un proyecto de Google Cloud pagado existente y expande los límites de almacenamiento, los recursos de CPU y las APIs.

3. Crea un sitio web de portfolio en el modo de compilación de AI Studio

Crea el shell de la aplicación y pídele al asistente de código de IA que compile el diseño de frontend.

1. Navega al panel de apps de Google AI Studio y haz clic en New App.
2. En el cuadro de instrucción de chat, ingresa la descripción de tu aplicación de portfolio:

   Build a professional personal portfolio website. The site should
   have a modern, responsive design and sections for my biography,
   projects showcase, skills, and links to my professional profiles
   (e.g., GitHub, LinkedIn).
   

3. Haz clic en Build para iniciar el proceso de generación de la aplicación.

4. Pruebe y repita.

Antes de lanzar el servicio en vivo, ejecuta verificaciones de validación en la vista previa interactiva.

1. Abre el panel de vista previa dentro de Google AI Studio.
2. Interactúa con cualquier botón de navegación, vínculo o diseño en el entorno de pruebas de vista previa para verificar la experiencia visual.
   • Nota sobre la corrección de errores: Durante la generación o las pruebas, es posible que ocasionalmente enfrentes problemas de tiempo de ejecución o errores de compilación. Si esto sucede, AI Studio muestra un botón Fix en el chat, lo que te permite pedirle al agente que diagnostique y repare automáticamente el problema.
   
3. Si quieres cambiar el estilo o el comportamiento, dale instrucciones al agente a través de la ventana de chat. Por ejemplo:
   • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
   • "Include a new section to showcase my recent presentations and talks."
4. Espera a que el agente actualice la base de código y revisa el navegador de vista previa para ver las actualizaciones.

5. Implementa en Cloud Run

Una vez que tu prototipo sea completamente funcional, impleméntalo como un servicio público en Cloud Run.

1. En la esquina superior derecha de Google AI Studio, haz clic en el botón Publish para iniciar el asistente de implementación.
2. Haz clic en Get Started para configurar tu proyecto de Google Cloud.
   • Verifica que el menú desplegable Google Cloud Project de destino coincida con el proyecto que asociaste con tu lugar de trabajo.
   • AI Studio generará automáticamente un identificador de servicio único para la instancia de Cloud Run.
3. Si es la primera vez que realizas una implementación y usas parámetros estándar de Google Cloud, es posible que se te solicite que especifiques un tipo de organización y proporciones detalles de facturación.
4. Haz clic en Publish App.
5. Los pasos de compilación del contenedor, registro del contenedor y la implementación del servicio se realizan en segundo plano. Por lo general, este proceso se completa en 2 a 4 minutos.
6. Cuando finalice la implementación, copia la URL de la app generada y visita el vínculo de la aplicación en vivo en una pestaña del navegador.
7. Prueba la aplicación web en vivo en tu navegador.

6. (OPCIONAL) Agrega un dominio personalizado

De forma predeterminada, Cloud Run aloja tu servicio en un subdominio run.app administrado por Google. Si quieres usar un dominio personal (como yourname.com o portfolio.yourname.com), puedes asignar un dominio personalizado a tu servicio.

Paso 1: Agrega una asignación de dominio en Cloud Run

1. Ve a la página Domain Mappings de Cloud Run en la consola de Google Cloud.
2. Haz clic en Add Mapping.
3. Elige el servicio de Cloud Run que deseas asignar en el menú desplegable.
4. Ingresa el nombre de tu dominio personalizado (por ejemplo, yourname.com o portfolio.yourname.com).
5. Haz clic en Next o Continue. Cloud Run mostrará los registros DNS (como los registros A/AAAA o CNAME) que debes crear con tu registrador de dominios.

Paso 2: Configura tu registrador de DNS

1. Accede al panel de administración de tu registrador de dominios (por ejemplo, Squarespace, GoDaddy o Namecheap).
2. Abre la página de configuración de administración de DNS o configuración de DNS para tu dominio.
3. Crea los registros DNS que coincidan con los valores que se muestran en el asistente de asignación de Cloud Run:
   • Para las asignaciones de dominios raíz (p.ej., yourname.com), agrega los registros A y AAAA que se muestran.
   • Para las asignaciones de subdominios (p.ej., portfolio.yourname.com), agrega el registro CNAME que se muestra.
4. Guarda los cambios de configuración de DNS.

Paso 3: Espera el aprovisionamiento del certificado SSL

Una vez que se propaguen los cambios de DNS, ocurrirá lo siguiente:

1. Google Cloud aprovisionará automáticamente un certificado SSL/TLS administrado para tu conexión segura.
2. Por lo general, este proceso se completa en unos 15 minutos, pero puede tardar hasta 24 horas, según la propagación de DNS.
3. Una vez completado, tu dominio personalizado se enrutará de forma segura a tu sitio web de portfolio.

Nota: Las asignaciones de dominios de Cloud Run están en versión preliminar y solo están disponibles en regiones específicas. Si tu servicio de Cloud Run se encuentra en una región que no admite asignaciones de dominios, puedes asignar tu dominio con un balanceador de cargas de aplicaciones externo global o Firebase Hosting.

7. Limpieza

Para evitar cargos de facturación imprevistos o liberar espacio en los recursos de tu espacio de trabajo, haz lo siguiente:

1. En Google AI Studio, ve a la página Apps.
2. Busca tu aplicación en la cuadrícula o la lista.
3. Haz clic en el ícono de la papelera para borrar el estado de la app y anular la publicación del servicio de Cloud Run.
4. Si realizaste la implementación con un proyecto estándar y quieres apagar todos los recursos por completo, ve a la configuración del proyecto de la consola de Google Cloud y borra el proyecto subyacente.

8. Conclusión

¡Felicitaciones! Diseñaste, desarrollaste e implementaste un sitio web de portfolio directamente desde Google AI Studio.

Más información

Visita este vínculo para reclamar la insignia Completed Builder Journey.

Para continuar tu recorrido, ve a goo.gle/builders para el siguiente lab.

• Documentos de Cloud Run
• Compila apps en Google AI Studio