Questa pagina descrive come utilizzare la modalità Build in Google AI Studio per creare (o scrivere codice) ed eseguire il deployment rapidamente di app che testano le funzionalità più recenti di Gemini, come nano banana e l'API Live.
Inizia
Inizia a usare il vibe coding nella modalità Crea di Google AI Studio. Puoi iniziare a creare in diversi modi:
- Inizia con un prompt: in modalità Crea, 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 usando il pulsante di conversione della voce in testo.
- Pulsante"Mi sento fortunato": se hai bisogno di un'ispirazione creativa, usa 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'app web. Per impostazione predefinita, crea un'app web React, ma puoi scegliere di creare un'app Angular nel menu Impostazioni. Puoi visualizzare il codice generato selezionando la scheda Codice nel riquadro di anteprima a destra.
Di seguito sono riportati i file da tenere presente:
- geminiService.ts: questo file contiene la logica principale della tua app, dalla creazione dei prompt alla chiamata dell'API Gemini e all'analisi delle sue risposte. Puoi modificare il prompt di base in questo file o modificare qualsiasi funzionalità dei componenti direttamente o interagendo con Gemini in modalità di creazione. Tieni presente che il codice in questo file utilizza l'SDK GenAI TS�� per interagire con l'API Gemini.
Continua a creare
Una volta che Google AI Studio genera il codice iniziale per la tua applicazione web, hai due opzioni principali per continuare il progetto: creare in AI Studio o sviluppare esternamente.
Creare in Google AI Studio
Puoi continuare a perfezionare ed espandere la tua applicazione direttamente nell'ambiente di 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. Ad esempio, potresti chiedere: "Aggiungi un pulsante che avvisi l'utente" o "Cambia la combinazione di colori in blu e bianco".
- Modifica direttamente il codice: apri la scheda Codice nel riquadro di anteprima per apportare modifiche in tempo reale. Puoi salvare il tuo progetto su GitHub per utilizzare il controllo delle versioni durante lo sviluppo.
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. In questo modo puoi utilizzare gli strumenti, i sistemi di compilazione e le pratiche di controllo delle versioni locali che preferisci per continuare a sviluppare il prototipo iniziale.
- Push su GitHub: integra il codice con i processi di sviluppo e deployment esistenti eseguendo il push in un repository GitHub.
Funzionalità principali
Google AI Studio include diverse funzionalità per rendere il processo di creazione intuitivo e visivo:
- Modalità annotazione: anziché scrivere codice per modificare l'aspetto dell'app, la modalità annotazione ti consente di evidenziare qualsiasi parte della UI dell'app e descrivere la modifica che vuoi apportare. Ad esempio, puoi selezionare un componente e digitare "Rendi questo pulsante blu" o "Anima questa immagine in modo che scorra da sinistra". Quando selezioni Aggiungi alla chat, viene generato un prompt con uno screenshot dell'app annotata.
- Condividi la tua app: puoi condividere le tue creazioni con altri per collaborare o mostrare il tuo lavoro.
- Galleria app: la Galleria app offre una raccolta visiva di idee per i progetti. Puoi sfogliare le possibilità di Gemini, visualizzare l'anteprima delle applicazioni all'istante e remixarle per personalizzarle.
Eseguire il deployment o archiviare l'app
Quando l'applicazione è pronta, puoi eseguirne il deployment direttamente da AI Studio. Le opzioni di implementazione includono:
- Google Cloud Run: esegui il deployment della tua applicazione come servizio scalabile. Tieni presente che potrebbero essere applicati prezzi per Google Cloud Run in base all'utilizzo.
- GitHub: esporta il progetto in un repository GitHub per integrarlo nei flussi di lavoro di sviluppo e deployment esistenti.
Limitazioni
Questa sezione descrive le limitazioni importanti quando utilizzi la modalità Crea in Google AI Studio.
Sicurezza ed esposizione delle chiavi API
- Il codice delle app condivise è visibile a chiunque le visualizzi. Non utilizzare mai una chiave API reale direttamente nel codice della tua app.
- Per impostazione predefinita, le app utilizzano un segnaposto (ad es. process.env.GEMINI_API_KEY) per la chiave API. Quando un utente esegue la tua app condivisa in AI Studio, AI Studio funge da proxy, sostituendo il segnaposto con la chiave API dell'utente finale, garantendo che la tua chiave rimanga privata.
Visibilità e condivisione delle app
- Le app vengono archiviate su Google Drive ed ereditano il relativo modello di autorizzazioni, il che significa che sono private per impostazione predefinita.
- Autorizzazioni di condivisione: quando condividi un'app con altri utenti:
- Gli utenti condivisi possono visualizzare il codice e creare una fork dell'app per il proprio utilizzo.
- Se viene concessa l'autorizzazione di modifica, gli utenti condivisi possono modificare il codice dell'app.
Deployment al di fuori di 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 File Search Stores 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.
Supporto di strumenti e funzionalità
- Importazione dello sviluppo locale: al momento non puoi sviluppare app localmente con strumenti esterni e importarle in AI Studio.
Passaggi successivi
- Scopri cosa hanno creato gli altri e lasciati ispirare dal remix di un progetto esistente nella Galleria di app.
- Dai un'occhiata alla playlist di YouTube per una raccolta di tutorial sulla codifica delle vibrazioni di AI Studio per iniziare.