Avviare l'app web di promemoria con l'AI

1. Introduzione

Panoramica

Da dove inizia oggi la creazione 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 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'applicazione di elenchi di cose da fare collaborativa con un database Firestore per l'archiviazione permanente e Firebase Authentication per gli accessi degli utenti. L'agente di 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 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 elenchi di cose da fare collaborativa.
  • 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 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 in Cloud Run.
  • Come esaminare 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 già 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:
    • Livello di avvio 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 spazio di archiviazione, le risorse della CPU e le API.

3. Creare un'app di elenchi di cose da fare 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 e persistenza.

  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 elenchi di 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.
  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 un accesso utente sicuro, 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 dell'account di servizio (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 ottimizzazione

Prima di avviare il servizio, esegui 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.
    Posizione del pulsante di correzione di Google AI Studio
  3. Una volta eseguito l'accesso, aggiungi diverse attività (ad es. "Esamina la documentazione di Cloud Run", "Completa il codelab").
  4. Attiva alcune attività come completate ed eliminane una per assicurarti che i gestori lato client e gli aggiornamenti dello stato del database funzionino correttamente.
  5. Se vuoi modificare lo stile o il comportamento, chiedi 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."
  6. 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.Posizione del pulsante Pubblica di Google AI Studio
  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 al tuo spazio di lavoro.
    • AI Studio genererà automaticamente un identificatore di servizio univoco per l'istanza di Cloud Run.
  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. Esaminare la 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 (con 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 eliminare le risorse dello spazio 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'applicazione web full stack collaborativa direttamente da Google AI Studio.

Scopri di più