Cómo desarrollar apps de pila completa en Google AI Studio

Google AI Studio ahora admite el desarrollo de pila completa, lo que te permite crear aplicaciones que van más allá de los prototipos del cliente. Con un entorno de ejecución del servidor, puedes administrar secretos, conectarte a APIs externas y crear experiencias multijugador en tiempo real.

Tiempo de ejecución del servidor

Las aplicaciones de Google AI Studio ahora pueden incluir un componente del servidor (Node.js). Esto te permite hacer lo siguiente:

  • Ejecutar lógica del servidor: Ejecuta código que no debería exponerse al cliente.
  • Accede a paquetes de npm: El Agente Antigravedad puede instalar y usar paquetes del vasto ecosistema de npm.
  • Administra secretos: Usa de forma segura las claves de API y las credenciales.

Usa paquetes de npm

No es necesario que ejecutes npm install de forma manual. Solo tienes que pedirle al agente que agregue una función que requiera un paquete, y este se encargará de la instalación y la importación.

Ejemplo: > "Usa axios para recuperar datos de la API externa".

Administra secretos de forma segura

Con la administración de secretos y el código del servidor, ahora puedes compilar apps que interactúen con el mundo.

  • APIs de terceros: Conéctate a servicios como Stripe, SendGrid o APIs de REST personalizadas.
  • Bases de datos: Conéctate a bases de datos externas (p.ej., a través de Supabase, Firebase o MongoDB Atlas) para conservar los datos más allá de la sesión.

Cuando compilas apps para el mundo real, a menudo necesitas conectarte a servicios de terceros (como Twilio, Slack o bases de datos) que requieren claves de API. Puedes agregar claves de forma manual con los siguientes pasos:

  1. Agrega un secreto: Ve al menú Configuración en Google AI Studio y busca la sección Secretos.
  2. Almacena tu clave: Agrega tus claves de API o tokens secretos aquí.
  3. Acceso en el código: El agente puede escribir código del servidor que acceda a estos secretos de forma segura (por lo general, a través de variables de entorno), lo que garantiza que nunca se expongan al navegador del cliente.

Cuando sea necesario, el agente también mostrará una tarjeta en el chat que te solicitará que agregues claves cada vez que se necesite un secreto nuevo o cuando se detecte una clave nueva en las variables de entorno del proyecto.

Cómo configurar OAuth

Un caso de uso clave de la administración de secretos es configurar OAuth para conectarse a otros sitios web o apps. Cuando tu instrucción incluya indicaciones para conectarse a una app de terceros que requiera autenticación por OAuth, el agente proporcionará instrucciones para configurar OAuth en esa aplicación. Estas instrucciones incluirán las URLs de devolución de llamada necesarias para configurar tu aplicación de OAuth. También puedes encontrar las URLs de devolución de llamada en Integraciones en el panel Configuración.

Cómo crear experiencias multijugador

El tiempo de ejecución de pila completa habilita las funciones de colaboración en tiempo real.

  • Estado en tiempo real: Puedes pedirle al agente que cree funciones como "un chat en vivo", "una pizarra colaborativa" o "un juego multijugador".
  • Sesiones sincronizadas: El servidor administra el estado, lo que permite que varios usuarios interactúen con la misma instancia de la aplicación en tiempo real.

Ejemplo de instrucción: > "Haz que sea un juego multijugador en el que los jugadores puedan ver los cursores de los demás".

Sugerencias para probar apps multijugador

Puedes probar el modo multijugador de dos maneras antes de implementar tu app.

  1. Abre tu app en el modo Build de Google AI Studio en varias pestañas. Cuando desarrollas en el modo de compilación, tu app se encuentra en un contenedor de desarrollo. Abrir la app en varias pestañas te permitirá simular varios jugadores que usan tu app.
  2. Comparte la app con otras personas usando el menú Compartir en la parte superior derecha y, luego, usa la URL compartida de la pestaña Integraciones del menú Compartir para usar la app con los jugadores con los que la compartiste.

Prácticas recomendadas

  • Seguridad de los secretos: Siempre usa el administrador de Secrets para las claves sensibles. Nunca los codifiques de forma rígida en tus archivos.
  • Separación de responsabilidades: Mantén la lógica de la IU en el framework del cliente (React/Angular) y la lógica empresarial o el procesamiento de datos en el servidor.
  • Manejo de errores: Asegúrate de que tu código del servidor maneje de forma sólida los errores de las llamadas a la API externa para evitar que la app falle.

¿Qué sigue?