Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Avviare l'app web di promemoria con l'AI

1. Introduzione

Panoramica

Da dove si inizia oggi a creare con l'AI? Per la maggior parte di noi, inizia con una semplice query o un prototipo. Google AI Studio offre una potente modalità di creazione (spesso chiamata "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'applicazione collaborativa di cose da fare con un database Firestore per l'archiviazione permanente e Firebase Authentication per gli accessi degli utenti. L'agente AI Studio configurerà tutti i servizi di backend e scriverà il codice di interazione con il frontend e il database. Una volta perfezionata l'app, potrai eseguirne il deployment direttamente su Cloud Run con un solo clic.

In questo lab proverai a:

Chiedi a Google AI Studio di prototipare un'applicazione web di elenchi di cose da fare collaborativi.
Configura e attiva l'integrazione di Firebase per eseguire il provisioning di un database Firestore e configurare l'autenticazione con Google Sign-In.
Testa l'applicazione nella sandbox di anteprima interattiva.
Esegui il deployment dell'applicazione su Cloud Run direttamente dall'interfaccia utente di Google AI Studio.

Obiettivi didattici

Come utilizzare la modalità Crea di Google AI Studio per creare rapidamente un prototipo di un servizio full-stack utilizzando il linguaggio naturale.
Come Google AI Studio configura automaticamente le integrazioni di Firebase Firestore e Authentication.
Come eseguire il deployment dell'applicazione AI Studio come container serverless su Cloud Run.
Come esaminare i record del database e lo stato di sicurezza all'interno della console Firebase.

2. Configurazione del progetto

Prima di lanciare AI Studio, verifica lo stato del tuo account e i prerequisiti.

Informazioni sull'Account Google e sul livello

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 criteri di Workspace che disabilitano le funzionalità sperimentali o le integrazioni cloud.
Esamina i dettagli di fatturazione per i deployment:
- Google Cloud Starter Tier: 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'app per le cose da fare in modalità di creazione di AI Studio

Creiamo la shell dell'applicazione e chiediamo all'assistente di programmazione AI di creare i livelli di sicurezza e persistenza.

Vai al pannello delle app di Google AI Studio e fai clic su Nuova app.

Nella casella del prompt della chat, inserisci la descrizione della tua app per le cose da fare:

Build a collaborative to-do list application using Firebase as a
backend. Users must be able to securely sign in using Google Sign-In,
view their personal tasks, add new task items, toggle status as
completed, and delete tasks. The database must isolate tasks so users
can only view and modify their own records.

Fai clic su Crea per avviare il processo di generazione dell'applicazione.

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

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

4. Test e ottimizzazione

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

Apri il riquadro di anteprima in Google AI Studio.
Fai clic sul pulsante Accedi per attivare l'autenticazione di accesso con Google del 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 Firestore a causa di un disallineamento delle regole di sicurezza. In questo caso, AI Studio mostra un pulsante Correggi nella chat, che ti consente di chiedere all'agente di diagnosticare e risolvere automaticamente il problema.
Una volta eseguito l'accesso, aggiungi diverse attività (ad es. "Rivedi la documentazione di Cloud Run", "Completa il codelab").
Attiva/disattiva alcune attività come completate ed elimina una per assicurarti che i gestori lato client e lo stato del database vengano aggiornati correttamente.
Se vuoi modificare lo stile o il comportamento, dai istruzioni all'agente tramite la finestra della chat. Ad esempio:
- "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
- "Show a count of remaining incomplete tasks at the footer of the task list."
Attendi che l'agente aggiorni la base di codice e controlla il browser di anteprima per visualizzare gli aggiornamenti.

5. Esegui il deployment in Cloud Run

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

Nell'angolo in alto a destra di Google AI Studio, fai clic sul pulsante Pubblica per avviare la procedura guidata per il deployment.
Fai clic su Inizia per configurare il progetto Google Cloud.
- Verifica che il menu a discesa Progetto Google Cloud di destinazione corrisponda al progetto associato al tuo workspace.
- AI Studio genererà automaticamente un identificatore di servizio univoco per l'istanza Cloud Run.
Se è la prima volta che esegui il deployment e utilizzi i parametri standard di Google Cloud, potrebbe esserti chiesto di specificare un tipo di organizzazione e fornire i dettagli di fatturazione.
Fai clic su Pubblica app.
I passaggi di creazione del container, registrazione del container e deployment del servizio vengono eseguiti in background. In genere, questa procedura viene completata in 2-4 minuti.
Al termine del deployment, copia l'URL dell'app generato e visita il link dell'applicazione live in una scheda del browser.
Prova l'applicazione web live nel tuo browser.

6. Esamina nella console Firebase

Dai un'occhiata sotto il cofano per vedere come vengono monitorati gli schemi di dati e gli utenti.

Vai alla console Firebase.
Seleziona il tuo progetto (quello con l'etichetta AI Studio o il tuo ID progetto associato manualmente).
Nel riquadro di navigazione a sinistra, seleziona Build > Firestore Database (Crea > Database Firestore):
- Visualizza le raccolte e i documenti del database creati dalla tua applicazione.
- Verifica che ogni documento abbia un ID proprietario corrispondente alle credenziali di autenticazione dell'utente attivo.
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.
Vai a Sicurezza > Autenticazione per visualizzare l'elenco delle credenziali utente attive compilate durante i test di accesso.

7. Elimina

Per evitare addebiti imprevisti o eseguire la pulizia delle risorse dello spazio di lavoro:

In Google AI Studio, vai alla pagina App.
Trova la tua applicazione nella griglia o nell'elenco.
Fai clic sull'icona del cestino per eliminare lo stato dell'app e annullare la pubblicazione del servizio da Cloud Run.
Se hai eseguito il deployment utilizzando un progetto standard e vuoi arrestare completamente tutte le risorse, vai alle impostazioni del progetto Google Cloud Console ed elimina il progetto sottostante.

8. Conclusione

Complimenti! Hai progettato, sviluppato ed eseguito il deployment di un'applicazione web full stack collaborativa direttamente da Google AI Studio.

Per ottenere il badge per il completamento di un lab per builder e trovare un altro lab per continuare il tuo percorso, vai alla pagina goo.gle/builders.