Lancia il tuo videogioco basato sul web con l'AI

1. Introduzione

Panoramica

Da dove si inizia a creare con l'AI oggi? Per la maggior parte di noi, si inizia con una semplice query o un prototipo. Google AI Studio offre una potente modalità di creazione (spesso definita "vibe coding") che ti consente di progettare, testare e creare applicazioni web full-stack utilizzando la generazione di codice basata sui modelli Gemini.

In questo codelab creerai un videogioco a turni basato sul web utilizzando un database Firestore con Event Sourcing (per rendere persistenti le azioni di gioco come una sequenza di eventi in modo che i giocatori possano visualizzare la cronologia delle partite e tornare ai turni precedenti) e Firebase Authentication per gli accessi degli utenti. L'agente di AI Studio configurerà tutti i servizi di backend e scriverà il frontend, la logica di Event Sourcing e il codice di interazione con il database. Una volta perfezionata l'app, potrai eseguirne il deployment direttamente in Cloud Run con un solo clic.

In questo lab proverai a:

• Chiedere a Google AI Studio di creare un prototipo di un'applicazione web di videogio multiplayer a turni.
• Implementare il supporto per un codice di gioco breve e condivisibile o un link di partecipazione per consentire agli amici di connettersi alla stessa partita.
• Implementare l'archiviazione del database Firestore con un pattern di Event Sourcing per monitorare le cronologie delle partite e consentire di viaggiare nel tempo durante il gioco (annullare o riprodurre i turni).
• Configurare e abilitare l'integrazione di Firebase per eseguire il provisioning di un database Firestore e configurare l'autenticazione con Accedi con Google.
• Testare l'applicazione nella sandbox di anteprima interattiva.
• Eseguire il deployment dell'applicazione in Cloud Run direttamente dall'interfaccia utente di Google AI Studio.

Obiettivi didattici

• Come utilizzare la modalità di creazione di Google AI Studio per creare rapidamente un prototipo di un servizio di gioco full-stack utilizzando il linguaggio naturale.
• Come implementare un pattern architetturale di Event Sourcing utilizzando Cloud Firestore per archiviare la cronologia dei giochi.
• Come Google AI Studio configura automaticamente le integrazioni di Firebase Firestore e Authentication.
• Come eseguire il deployment dell'applicazione AI Studio come container serverless in Cloud Run.
• Come ispezionare i record del database e lo stato di sicurezza all'interno della console Firebase.

2. Configurazione del progetto

Prima di avviare AI Studio, verifica lo stato dell'account e i prerequisiti.

Account Google e informazioni sul livello

1. Se non hai ancora un Account Google, creane uno.
   • Suggerimento: se possibile, utilizza un Account Google personale per questo lab. Gli account di gruppo, aziendali o scolastici potrebbero applicare le norme di Workspace che disabilitano le funzionalità sperimentali o le integrazioni cloud.
2. Esamina i dettagli di fatturazione per i deployment:
   • Starter Tier di Google Cloud: consente di pubblicare fino a due applicazioni full-stack in una regione selezionata senza costi, senza creare un account di fatturazione Google Cloud completo.
   • Deployment standard: si connette a un progetto Google Cloud a pagamento esistente ed espande i limiti di archiviazione, le risorse CPU e le API.

3. Crea un videogioco a turni in modalità di creazione di AI Studio

Creiamo lo shell dell'applicazione e chiediamo all'assistente di codice AI di creare i livelli di sicurezza, logica di gioco e persistenza di Event Sourcing.

1. Vai al riquadro App di Google AI Studio e fai clic su Nuova app.
2. Nella casella del prompt della chat, inserisci la descrizione dell'applicazione di videogio a turni:

   Build a web-based, turn-based Tic-Tac-Toe game using
   Firebase as a backend. Users must be able to securely sign in
   using Google Sign-In, start a new game match, make moves, and play
   against an AI player or another user. Any algorithm used for the
   game opponent AI should use simple algorithms like min/max and the
   app should not make any calls to an LLM like the Gemini API. To
   support multiplayer matches, the application must generate a short
   game code or share link that players can easily copy and send to a
   friend to join the match. Use Firestore and an event sourcing
   pattern to save a history of every move (turn) as a separate event
   document in a subcollection under the game document. The
   application must reconstruct the current game state by replaying
   these events, and must allow users to view previous turns and opt
   to restore/roll back the game to a prior turn's state.
   

   Questo link compilerà automaticamente la casella del prompt.
3. Fai clic su Crea per avviare il processo di generazione dell'applicazione.

Quando l'agente di AI Studio riconosce la necessità di spazio di archiviazione del database e di accesso sicuro degli utenti, attiva il flusso di configurazione automatica di Firebase.

1. Dopo circa un minuto, nell'area di lavoro viene visualizzata una scheda di integrazione per abilitare Firebase.
2. Fai clic sul pulsante Abilita Firebase per confermare e accettare i Termini di servizio.
3. L'agente eseguirà la configurazione in background. Dietro le quinte:
   • Viene eseguito il provisioning di un'istanza del database Firestore.
   • Firebase Authentication è abilitato con Accedi con Google.
   • Viene stabilita una configurazione del service account (ad es. la creazione di src/lib/firebase.ts contenente le credenziali API).
   • Viene aggiunto un file firestore.rules contenente i limiti di sicurezza predefiniti (regole di isolamento degli utenti).

4. Test e iterazione

Prima di avviare il servizio, esegui i controlli di convalida nell'anteprima interattiva.

1. Apri il riquadro di anteprima in Google AI Studio.
2. Fai clic sul pulsante Accedi per attivare l'autenticazione con Accedi con Google della sandbox.
   • Nota sulla correzione degli errori: durante la generazione o il test, potresti occasionalmente riscontrare problemi di runtime, errori di compilazione o errori di autorizzazione di Firestore a causa di un mancato allineamento delle regole di sicurezza. In questo caso, AI Studio visualizza un pulsante Correggi nella chat, che ti consente di chiedere all'agente di diagnosticare e risolvere automaticamente il problema.
   
3. Una volta eseguito l'accesso, avvia una nuova partita, copia il codice di gioco breve o il link di condivisione generato e verifica che possa essere utilizzato per partecipare alla partita.
4. Esegui diverse mosse e verifica che la cronologia delle partite venga visualizzata correttamente.
5. Prova a tornare ai turni precedenti della partita. Assicurati che la scheda o lo stato si aggiorni in modo da riflettere il punto precedente della cronologia di gioco e verifica di poter ripristinare o eseguire il rollback a quello stato.
6. Se vuoi modificare lo stile o il comportamento, chiedi all'agente tramite la finestra della chat. Ad esempio:
   • "Could you style the game board interface using Tailwind CSS and add a retro pixel-art theme?"
   • "Add a 'Turn History' sidebar matching the current state replay that shows when each move was made and by whom."
7. Attendi che l'agente aggiorni la codebase e controlla il browser di anteprima per visualizzare gli aggiornamenti.

5. Esegui il deployment in Cloud Run

Una volta che il prototipo è completamente funzionante, eseguine il deployment come servizio pubblico in Cloud Run.

1. Nell'angolo in alto a destra di Google AI Studio, fai clic sul pulsante Pubblica per avviare la procedura guidata di deployment.
2. Fai clic su Inizia per configurare il progetto Google Cloud.
   • Verifica che l'elenco a discesa Progetto Google Cloud di destinazione corrisponda al progetto che hai associato all'area di lavoro.
   • AI Studio genererà automaticamente un identificatore di servizio univoco per l'istanza di Cloud Run.
   • Facoltativamente, puoi specificare un prefisso URL .ai.studio personalizzato (ad es. your-portfolio-name.ai.studio) come parte della configurazione del deployment.
3. Se è la prima volta che esegui il deployment e utilizzi i parametri standard di Google Cloud, ti potrebbe essere chiesto di specificare un tipo di organizzazione e fornire i dati di fatturazione.
4. Fai clic su Pubblica app.
5. I passaggi di creazione, registrazione e deployment del container vengono eseguiti in background. In genere, questa procedura viene completata in 2-4 minuti.
6. Al termine del deployment, copia l'URL dell'app generato e visita il link dell'applicazione live in una scheda del browser.
7. Prova l'applicazione web live nel browser.

6. Ispeziona nella console Firebase

Dai un'occhiata dietro le quinte per vedere come vengono monitorati gli schemi di dati e gli utenti.

1. Vai alla console Firebase.
2. Seleziona il progetto (che ha l'etichetta AI Studio o l'ID progetto associato manualmente).
3. Nel riquadro di navigazione a sinistra, seleziona Crea > Database Firestore:
   • Visualizza le raccolte e i documenti del database creati dall'applicazione.
   • Verifica che ogni documento abbia un ID proprietario corrispondente alle credenziali di autenticazione dell'utente attivo.
4. Seleziona la scheda Sicurezza nel riquadro Firestore per esaminare le direttive di sicurezza generate automaticamente che limitano le autorizzazioni di lettura e scrittura ai proprietari dei documenti verificati.
5. Vai a Sicurezza > Autenticazione per visualizzare l'elenco delle credenziali utente attive inserite durante i test di accesso.

7. Elimina

Per evitare addebiti imprevisti o liberare spazio nelle risorse dell'area di lavoro:

1. In Google AI Studio, vai alla pagina App.
2. Trova l'applicazione nella griglia o nell'elenco.
3. Fai clic sull'icona del cestino per eliminare lo stato dell'app e annullare la pubblicazione del servizio da Cloud Run.
4. Se hai eseguito il deployment utilizzando un progetto standard e vuoi chiudere completamente tutte le risorse, vai a Impostazioni progetto della console Google Cloud ed elimina il progetto sottostante.

8. Conclusione

Complimenti! Hai progettato, sviluppato ed eseguito il deployment di un videogioco a turni direttamente da Google AI Studio.

Visita questo link per richiedere il badge Percorso del builder completato.

Per continuare il tuo percorso, vai alla pagina goo.gle/builders per il prossimo lab.

Scopri di più

• Guida alle regole di sicurezza di Firestore
• Documentazione di Cloud Run
• Crea app in Google AI Studio