Crea app in Google AI Studio

Questa pagina descrive come utilizzare Google AI Studio per creare (o "vibe code") e distribuire rapidamente app che testano le funzionalità più recenti di Gemini, come Nano Banana e l'API Live. Google AI Studio ora supporta i runtime full-stack, consentendoti di creare applicazioni robuste con logica lato server, gestione sicura dei secret e supporto dei pacchetti npm, il tutto tramite prompt in linguaggio naturale.

Inizia

Inizia a creare codice in modalità Crea di Google AI Studio. Puoi iniziare a creare in diversi modi:

  • Inizia con un prompt: in modalità di creazione, utilizza la casella di input per inserire una descrizione di ciò che vuoi creare. Seleziona Chip AI per aggiungere funzionalità specifiche come la generazione di immagini o i dati di Google Maps al prompt. Puoi anche dire cosa vuoi usare il pulsante di conversione della voce in testo.
  • Pulsante"Mi sento fortunato": se hai bisogno di un'ispirazione creativa, utilizza il pulsante "Mi sento fortunato" e Gemini genererà un prompt con un'idea di progetto per iniziare.
  • Remixare un progetto dalla galleria: apri un progetto dalla galleria di app e seleziona Copia app.

Una volta eseguito il prompt, verranno generati il codice e i file necessari, con un'anteprima dal vivo della tua app visualizzata sul lato destro.

Che cosa viene creato?

Quando esegui il prompt, AI Studio crea un'applicazione completa. Per impostazione predefinita, crea un ambiente full stack che può includere:

  • Lato client: un frontend web (React è l'impostazione predefinita).
  • Lato server: un runtime Node.js che consente chiamate API sicure, connessioni al database e utilizzo di pacchetti npm.

Puoi visualizzare il codice generato selezionando la scheda Codice nel riquadro di anteprima a destra. L'agente antigravità gestisce in modo intelligente più file nello stack, assicurandosi che le modifiche vengano propagate correttamente.

L'agente di Antigravity

L'agente antigravità è la principale funzionalità di AI all'interno di Google Antigravity e ora i componenti principali dell'agente sono alla base dell'esperienza della modalità di creazione in Google AI Studio. Va oltre la semplice generazione di codice mantenendo il contesto dell'intero progetto, gestendo più file e comprendendo istruzioni complesse per creare applicazioni full-stack robuste.

Le sue funzionalità principali includono:

  • Rilevamento del contesto: mantiene il contesto dei prompt precedenti e degli stati dei file.
  • Gestione di più file: gestisce le dipendenze tra più file.
  • Esecuzione verificata: verifica gli aggiornamenti del codice per ridurre le allucinazioni.

Funzionalità full-stack

Google AI Studio sfrutta la potenza del moderno ecosistema web, consentendoti di creare prototipi non solo lato client.

  • Runtime lato server e npm: utilizza la vasta libreria di pacchetti npm. L'agente identificherà e installerà automaticamente i pacchetti necessari per la tua app (ad es. librerie specifiche per la visualizzazione dei dati o client API). Se vuoi, puoi anche richiedere pacchetti specifici.
  • Gestione dei secret: archivia in modo sicuro chiavi API e secret nel menu Impostazioni. Sono accessibili nel codice lato server, in modo da non essere esposti lato client.
  • Multiplayer: crea esperienze di collaborazione in tempo reale direttamente in AI Studio. Il runtime lato server gestisce lo stato e le connessioni necessarie per consentire agli utenti di interagire tra loro.

Scopri di più sullo sviluppo di app full-stack

Continua a creare

Una volta che Google AI Studio genera il codice iniziale per la tua applicazione, puoi continuare a perfezionarlo:

Creare in Google AI Studio

  • Itera con Gemini: utilizza il riquadro della chat in modalità di creazione per chiedere a Gemini di apportare modifiche, aggiungere nuove funzionalità o cambiare lo stile.
  • Modifica il codice direttamente: apri la scheda Codice nel riquadro di anteprima per apportare modifiche in tempo reale.

Sviluppo esterno

Per flussi di lavoro più avanzati, puoi esportare il codice e lavorare nell'ambiente che preferisci:

  • Scarica e sviluppa localmente: esporta il codice generato come file ZIP e importalo nell'editor di codice.
  • Push su GitHub: integra il codice con i processi di sviluppo e deployment esistenti eseguendone il push in un repository GitHub.

Funzionalità principali

Google AI Studio include diverse funzionalità per rendere il processo di creazione intuitivo e visivo:

  • Crea e itera app full stack: crea app full stack con un semplice prompt e itera tramite la chat o la modalità di annotazione. La modalità Annotazione ti consente di evidenziare qualsiasi parte dell'interfaccia utente della tua app e descrivere la modifica che vuoi.
  • Condividere e distribuire l'app: puoi condividere le tue creazioni con altre persone per collaborare o mostrare il tuo lavoro. Quando l'app è pronta, esegui il deployment in Cloud Run.
  • Galleria app: la galleria app offre una raccolta visiva di idee per progetti. Puoi sfogliare le possibilità offerte da Gemini, visualizzare in anteprima le applicazioni istantaneamente e remixarle per personalizzarle.

Crea e itera app full stack: breve descrizione del supporto del runtime, itera con la modalità di annotazione Condividi ed esegui il deployment: condividi la tua app in AI Studio o esegui il deployment su Cloud Run Esplora la galleria di app

Eseguire il deployment o archiviare l'app

Una volta che l'applicazione è pronta, puoi eseguirne il deployment:

  • Google Cloud Run: esegui il deployment dell'applicazione come servizio scalabile. In base all'utilizzo, potrebbero essere applicati i prezzi di Google Cloud Run.
  • GitHub: esporta il progetto in un repository GitHub.

Limitazioni

Questa sezione elenca le limitazioni attuali della modalità di creazione in Google AI Studio.

Sicurezza delle chiavi API

  • Lato client: non utilizzare mai chiavi API reali direttamente nel codice lato client.
  • Lato server: utilizza la funzionalità di gestione dei segreti per gestire le chiavi sensibili in modo sicuro nel runtime lato server.

Deployment al di fuori di Google AI Studio

  • Anche se puoi eseguire il deployment della tua app su Cloud Run per un URL pubblico, questa configurazione utilizzerà la tua chiave API per tutte le chiamate all'API Gemini degli utenti.
    • Le app JavaScript vengono eseguite lato client, quindi assicurati che le chiavi API abbiano solo un accesso minimo per evitare perdite o usi impropri di dati. Ad esempio, altri archivi di ricerca di file dello stesso progetto potrebbero essere accessibili agli utenti tramite questo meccanismo.
  • Deployment esterno sicuro: per eseguire un'app in modo sicuro al di fuori di AI Studio (ad es. dopo aver scaricato il file zip), devi spostare la logica che utilizza la chiave API in un componente lato server per impedire l'esposizione della chiave agli utenti finali. Non è necessario se esegui il deployment utilizzando Cloud Run.
  • Avviso di esposizione della chiave: la semplice sostituzione del segnaposto con una chiave API reale in un ambiente lato client è fortemente sconsigliata, in quanto la chiave diventerà visibile a qualsiasi utente.

Errore durante la condivisione delle app

Se condividi la tua app e l'utente finale riscontra un errore 403 Accesso limitato quando utilizza l'URL condiviso, il problema potrebbe essere dovuto a uno dei seguenti motivi:

  • Estensioni del browser: le estensioni per la privacy come Privacy Badger potrebbero bloccare l'app. Disattiva l'estensione per evitare l'errore.
  • Problemi di build: potrebbero esserci problemi con il codice attuale. Chiedi all'agente di "risolvere eventuali problemi di compilazione con il codice attuale" e poi di condividere di nuovo l'URL.

Passaggi successivi