Sviluppare app full-stack in Google AI Studio

Google AI Studio ora supporta lo sviluppo full-stack, consentendoti di creare applicazioni che vanno oltre i prototipi lato client. Con un runtime lato server, puoi gestire i secret, connetterti ad API esterne e creare esperienze multiplayer in tempo reale.

Runtime lato server

Le applicazioni Google AI Studio ora possono includere un componente lato server (Node.js). In questo modo potrai:

  • Esegui la logica lato server: esegui il codice che non deve essere esposto al client.
  • Accedi ai pacchetti npm: l'agente antigravità può installare e utilizzare pacchetti del vasto ecosistema npm.
  • Gestisci i secret: utilizza in modo sicuro chiavi API e credenziali.

Utilizzo dei pacchetti npm

Non devi eseguire manualmente npm install. Basta chiedere all'agente di aggiungere una funzionalità che richiede un pacchetto e l'agente gestirà l'installazione e l'importazione.

Esempio: > "Utilizza axios per recuperare i dati dall'API esterna."

Gestione sicura dei secret

Con la gestione del codice e dei secret lato server, ora puoi creare app che interagiscono con il mondo.

  • API di terze parti: connettiti a servizi come Stripe, SendGrid o API REST personalizzate.
  • Database: connettiti a database esterni (ad es. tramite Supabase, Firebase o MongoDB Atlas) per conservare i dati oltre la sessione.

Quando crei app reali, spesso devi connetterti a servizi di terze parti (come Twilio, Slack o database) che richiedono chiavi API. Puoi aggiungere le chiavi manualmente seguendo questi passaggi:

  1. Aggiungi un secret: vai al menu Impostazioni in Google AI Studio e cerca la sezione Secret.
  2. Memorizza la chiave: aggiungi qui le tue chiavi API o i tuoi token segreti.
  3. Accesso nel codice: l'agente può scrivere codice lato server che accede a questi secret in modo sicuro (in genere tramite variabili di ambiente), assicurandosi che non vengano mai esposti al browser lato client.

Se necessario, l'agente mostrerà anche una scheda nella chat che ti chiede di aggiungere le chiavi ogni volta che è necessario un nuovo secret o quando viene rilevata una nuova chiave nelle variabili di ambiente del progetto.

Configurazione di OAuth

Un caso d'uso chiave per la gestione dei secret è la configurazione di OAuth per connettersi ad altri siti web o app. Quando il prompt include istruzioni su come connettersi a un'app di terze parti che richiede l'autenticazione OAuth, l'agente fornirà istruzioni su come configurare OAuth per l'applicazione. Queste istruzioni includeranno gli URL di callback necessari per configurare l'applicazione OAuth. Puoi trovare gli URL di callback anche nella sezione Integrazioni nel pannello Impostazioni.

Creare esperienze multiplayer

Il runtime full-stack attiva le funzionalità di collaborazione in tempo reale.

  • Stato in tempo reale: puoi chiedere all'agente di creare funzionalità come "una chat live", "una lavagna collaborativa" o "un gioco multiplayer".
  • Sessioni sincronizzate: il server gestisce lo stato, consentendo a più utenti di interagire con la stessa istanza dell'applicazione in tempo reale.

Esempio di prompt: > "Crea un gioco multiplayer in cui i giocatori possono vedere i cursori degli altri."

Suggerimenti per testare le app multiplayer

Puoi testare la modalità multigiocatore in due modi prima di eseguire il deployment dell'app.

  1. Apri l'app in modalità di creazione di Google AI Studio in più schede. Quando sviluppi in modalità Build, la tua app si trova in un container di sviluppo. L'apertura dell'app in più schede ti consente di simulare più giocatori che utilizzano la tua app.
  2. Condividi l'app con altri utilizzando il menu Condividi in alto a destra. Poi utilizza l'URL condiviso della scheda Integrazioni del menu Condividi per utilizzare l'app con i giocatori con cui l'hai condivisa.

Best practice

  • Sicurezza dei secret: utilizza sempre Secret Manager per le chiavi sensibili. Non codificarli mai nei file.
  • Separazione delle responsabilità: mantieni la logica dell'interfaccia utente nel framework lato client (React/Angular) e la logica di business/gestione dei dati lato server.
  • Gestione degli errori: assicurati che il codice lato server gestisca in modo efficace gli errori delle chiamate API esterne per evitare arresti anomali dell'app.

Passaggi successivi