1. Panoramica
In questo codelab creerai un'applicazione web "Snake & Beats", un gioco Snake retrò con un lettore musicale integrato. Utilizzerai Gemini per generare un'applicazione React a file singolo con un'estetica neon, quindi ne controllerai le versioni ed eseguirai il deployment su Cloud Run.
In questo lab proverai a:
- Crea e Prompt: utilizza la modalità "Crea" di Google AI Studio per generare un gioco funzionante da un singolo prompt.
- Perfeziona con le istruzioni di sistema: "Vibe Check" la tua AI impostando una persona persistente per le modifiche future.
- Salva su GitHub: avvia un nuovo repository direttamente da AI Studio.
- Esegui il deployment in Cloud Run: pubblica il tuo gioco in Google Cloud Run con un solo clic.
Obiettivi didattici
- Come utilizzare la modalità di creazione in Google AI Studio per creare rapidamente prototipi di app.
- Come utilizzare le istruzioni di sistema per mantenere una "codifica" coerente durante l'iterazione.
- Come connettere Google AI Studio a GitHub e Cloud Run.
Che cosa ti serve
- Browser web Chrome
- Un account Gmail
- Un progetto cloud con fatturazione abilitata
- Una chiave API Gemini
- Un account GitHub
2. Prima di iniziare
- Nella console Google Cloud, nella pagina di selezione del progetto, seleziona o crea un progetto Google Cloud.
- Verifica che la fatturazione sia attivata per il tuo progetto Cloud. Scopri come verificare se la fatturazione è abilitata per un progetto .
3. Build & Prompt (The Core)
Inizieremo creando l'intera applicazione in una sola volta. Accedi a Google AI Studio e assicurati di trovarti nell'interfaccia di creazione.
- Inserisci il prompt di creazione: incolla il seguente prompt dettagliato nella casella di chat:
Build a React web app that is a Music Player and a Snake Game combined. Use Tailwind CSS with a dark neon aesthetic. I want to be able to play Snake in the center window while the demo music plays in the background. Add 3 dummy ai generated music. Include controls for the music (play/pause/skip) and a score counter for the game.
- Seleziona il modello: nel riquadro delle impostazioni a destra, assicurati che sia selezionato Gemini 3.0 Pro (o l'ultimo modello di anteprima) per la generazione di codice più rapida.
- Esegui: premi Crea (o premi Cmd + Invio).
- Anteprima: Gemini genererà il codice e in genere visualizzerà un'anteprima live sul lato destro (come mostrato di seguito):
4. Perfezionare con annotazioni, immagini e voce
A volte è difficile descrivere a parole una modifica visiva. La modalità Annotazione ti consente di disegnare sull'anteprima dell'app per comunicare immediatamente la tua visione.
Utilizzare la modalità Annotazione
- Attiva la modalità di annotazione: nell'interfaccia di AI Studio (controlla il riquadro a sinistra o la barra degli strumenti in basso della finestra di anteprima), seleziona lo strumento Annotazione o Affina.
- Aggiungi il markup alla tua app:
- Disegna: utilizza lo strumento rettangolo per disegnare un rettangolo intorno al contatore del punteggio.
- Commento: digita un prompt allegato alla casella: "Rendi questo carattere più grande, digitale e con problemi tecnici".
- Schizzo: usa lo strumento freccia per indicare i pulsanti Riproduci/Pausa.
- Commento: tipo: "Modifica questi elementi in icone al neon luminose".
- Itera: fai clic su "Aggiungi alla chat", quindi su Invia prompt. Gemini interpreterà i segni visivi e i comandi di testo per aggiornare il codice.
- Verifica: guarda l'aggiornamento dell'anteprima in diretta. Il feedback visivo dovrebbe ora essere visibile nel codice.
Input vocale (The Spoken Vibe)
A volte è più facile descrivere l'atmosfera a parole che per iscritto.
- Azione: fai clic sull'icona del microfono nella barra di input (accanto al pulsante +).
- Di': "Ehi, l'animazione del serpente è troppo lenta. Aumenta la velocità e fai in modo che la coda lasci una scia luminosa."
- Invia: Gemini converte la voce in testo e applica le modifiche.
5. Impostare le istruzioni di sistema e ricompilare
A differenza di un prompt normale, l'istruzione di sistema persiste per tutta la sessione. È il posto migliore per definire gli standard di codifica, le convenzioni di denominazione o una persona visiva specifica che non deve cambiare.
- Apri le impostazioni avanzate: nell'interfaccia di Google AI Studio (modalità di creazione), cerca la casella Istruzioni di sistema. Se non è visibile, fai clic su Impostazioni (icona a forma di ingranaggio) o Impostazioni avanzate nella parte superiore o laterale del riquadro della chat.
- Aggiungi l'istruzione "Vibe": incolla la seguente istruzione nella casella di testo. Definisce un utente tipo "Glitch Art" per il nostro gioco:
You are a Retro-Futurist UI Designer and Senior React Engineer. Visual Style: 'Glitch Art'. Use raw, pixelated fonts, jarring color contrasts (Cyan vs. Magenta), and CSS animations that simulate screen tearing or static noise. Tone: Cryptic and machine-like.
- Attivazione della modifica: la modifica dell'istruzione di sistema non comporta la riscrittura automatica del codice. Devi chiedere a Gemini di applicare queste nuove regole.
- Chiudi il riquadro delle impostazioni.
- Nell'input Chat/Prompt, digita: "Ricostruisci la UI dell'applicazione in modo che segua rigorosamente le nuove istruzioni di sistema".
- Fai clic su Esegui / Invia.
- Osserva l'aggiornamento: Gemini riconoscerà la modifica.
6. Salva su GitHub
Anziché scaricare file e utilizzare la riga di comando, utilizzeremo l'integrazione GitHub integrata per avviare immediatamente un repository.
- Individua l'integrazione: nella barra degli strumenti in alto dell'interfaccia di Google AI Studio, cerca l'icona di GitHub tra le icone Download e Deploy.
- Collega il tuo account: fai clic sull'icona. Se è la prima volta, ti verrà chiesto di autorizzare Google AI Studio ad accedere al tuo account GitHub.
- Crea il repository: viene visualizzata una finestra di dialogo intitolata "Compila le informazioni riportate di seguito per creare il repository".
- Nome repository: inserisci un nome, ad esempio "Gioco Snake creato con React e l'IA."
- Descrizione del repository: inserisci la descrizione del repository.
- Visibilità: seleziona Pubblico (per poterlo condividere facilmente) o Privato.
- Push su GitHub: fai clic sul pulsante "Crea repository Git".
7. Esegui il deployment in Cloud Run
Ora che l'applicazione è pronta e salvata su GitHub, eseguiamo il deployment in Cloud Run.
- Avvia deployment: fai clic sul pulsante evidenziato di seguito. Si trova nell'angolo in alto a destra della pagina AI Studio.
- Seleziona progetto: fai clic sul menu a discesa Seleziona un progetto Google Cloud e seleziona il tuo progetto dal menu a discesa.
- Risoluzione dei problemi: se non riesci a trovare il tuo progetto nel menu a discesa, fai clic su Importa progetto e selezionalo nel riquadro Importa progetto.
- Verifica della fatturazione: dopo aver selezionato il progetto, viene verificato che la fatturazione sia abilitata. Questa verifica verrà superata automaticamente perché abbiamo collegato l'account di fatturazione al progetto nella sezione "Prima di iniziare".
- Esegui il deployment: fai clic sul pulsante Esegui il deployment dell'app e attendi che l'applicazione venga eseguita su Cloud Run. Nota: il nome del servizio Cloud Run verrà generato automaticamente.
- Il deployment dovrebbe completarsi in un paio di minuti e riceverai l'URL dell'app. Se fai clic sull'URL, puoi vedere la tua applicazione web di cui è stato eseguito il deployment su internet.
8. Esegui la pulizia
Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alle risorse utilizzate in questo post, segui questi passaggi:
- Nella console Google Cloud, vai alla pagina Gestisci risorse.
- Nell'elenco dei progetti, seleziona il progetto che vuoi eliminare, quindi fai clic su Elimina.
- Nella finestra di dialogo, digita l'ID progetto, quindi fai clic su Chiudi per eliminare il progetto.
9. Complimenti
Complimenti! Hai completato correttamente il vibe coding di un'applicazione su AI Studio e ne hai eseguito il deployment su Cloud Run.
AI Studio è una piattaforma ideale per sviluppare e testare applicazioni, consentendo agli utenti di visualizzare immediatamente i loro progetti in azione.
L'integrazione perfetta di AI Studio con Cloud Run consente agli utenti di eseguire il deployment delle proprie applicazioni direttamente su Google Cloud. L'utilizzo di Cloud Run garantisce tutti i vantaggi intrinseci di un ambiente serverless, eliminando le complessità e l'overhead della gestione dell'infrastruttura.