1. Prima di iniziare
Se hai mai provato a organizzare una corsa nel fine settimana con amici o vicini, sai quanto sia difficile: i luoghi di incontro si perdono in infinite chat di gruppo, le persone chiedono costantemente a che ritmo corrono gli altri e i nuovi arrivati non sanno mai chi si presenterà.
In questo codelab, risolverai questo problema quotidiano creando Running Club, un'app web accogliente in cui i runner locali possono sfogliare i loro percorsi preferiti, pianificare incontri nel fine settimana, confermare la loro presenza con un clic e chattare con altri runner.
Perché questa app ha bisogno di un database?
Un'app della community ha bisogno di una memoria affidabile, nota come database. Quando un runner aggiunge un nuovo percorso panoramico, conferma la sua presenza alla corsa di sabato mattina o pubblica un commento per chiedere informazioni sul parcheggio, queste informazioni non possono scomparire quando chiude lo smartphone o spegne il computer. Un database mantiene tutte le corse, gli elenchi dei partecipanti e i messaggi dei membri archiviati e organizzati in modo sicuro, in modo che tutti i membri del club vedano informazioni aggiornate ogni volta che aprono l'app.
Creerai questa app utilizzando la modalità Crea di Google AI Studio. Non devi scrivere codice complesso o configurare autonomamente l'infrastruttura tecnica: ti basta descrivere ciò che vuoi in un linguaggio semplice. Google AI Studio genera l'app, connette un database Cloud SQL per PostgreSQL reale per memorizzare i tuoi dati e pubblica l'app in tempo reale su Cloud Run in modo che la tua community possa iniziare a utilizzarla immediatamente.
Cosa creerai
Creerai e lancerai Running Club, un'app web della community che include:
- Accesso con Google: accesso rapido e sicuro utilizzando un Account Google esistente.
- Profili dei runner: profili dei membri che mostrano le preferenze di corsa e il ritmo target.
- Raccolta di percorsi: una raccolta dei percorsi preferiti del quartiere con distanza, difficoltà della salita e punti di incontro.
- Programma delle corse future: una bacheca degli eventi per organizzare le corse di gruppo future e collegarle ai percorsi.
- RSVP semplici: un pulsante con un solo clic per consentire ai membri di dire "Ci sarò" e vedere chi altro parteciperà.
- Esegui discussioni: uno spazio per i commenti su ogni corsa per coordinare i dettagli, porre domande e condividere aggiornamenti.
Obiettivi didattici
- Come creare un'app web funzionante in Google AI Studio utilizzando un singolo prompt in linguaggio naturale.
- Come Google AI Studio configura automaticamente Accedi con Google.
- Come Google AI Studio crea e connette un database Cloud SQL per PostgreSQL reale per memorizzare i tuoi dati.
- Come aggiungere nuove funzionalità ed espandere il database semplicemente chattando con l'AI.
- Come verificare che i dati del tuo club vengano salvati in modo sicuro durante le visite.
- Come pubblicare la tua app su internet con Cloud Run.
- Come visualizzare l'app e il database live nella console Google Cloud.
Che cosa ti serve
- Un browser web moderno come Google Chrome.
- Un Account Google standard per accedere a Google AI Studio.
Idoneità e limiti di Cloud SQL Starter Edition
Google AI Studio offre lo Starter Tier di Google Cloud per aiutare i builder a sperimentare con app generative e database gestiti:
- Idoneità:
- Disponibile per le persone che utilizzano un Account Google standard.
- Gli account non idonei includono utenti con account di fatturazione Google Cloud esistenti o passati, nonché account associati a Google Workspace, Google Workspace for Education o Google per il non profit.
- Se il tuo account non è idoneo per il livello Starter, puoi comunque completare questo codelab selezionando un progetto Google Cloud esistente con la fatturazione abilitata in AI Studio.
- Specifiche delle risorse:
- Esegue il provisioning di un'istanza Cloud SQL per PostgreSQL Developer Edition che esegue PostgreSQL 18.
- Include 0, 5 vCPU, 2 GB di RAM e 1 GB di spazio di archiviazione. Dovrebbe essere sufficiente per eseguire centinaia di visite giornaliere per alcuni mesi o più, a seconda dell'attività.
- Supporta lo scale to zero, mettendo automaticamente in pausa il calcolo quando non ci sono connessioni di database attive per conservare la quota.
- Quota:
- Include una quota mensile senza costi di 50 unità di calcolo e 10 GB di spazio di archiviazione.
2. Apri Google AI Studio e avvia una nuova app
Per iniziare, apri Google AI Studio nel browser. Questo è il tuo spazio di lavoro di creazione in cui puoi creare e testare app semplicemente descrivendo ciò di cui hai bisogno.
Passaggio 1: accedi a Google AI Studio
- Apri il browser web (ad esempio Google Chrome) e vai alla pagina aistudio.google.com.
- Fai clic su Inizia e accedi con il tuo Account Google standard (ad esempio il tuo account Gmail).
- Se alla prima visita ti vengono mostrati i Termini di servizio, leggili e accettali per procedere.
Passaggio 2: avvia una nuova richiesta
- Nel riquadro in basso al centro, fai clic su Inizia a creare (o fai clic su +Nuova app nel riquadro a destra).
3. Inizia con un prompt semplice e Firebase Authentication
Per iniziare non hai bisogno di diagrammi di architettura complessi. Puoi avviare l'applicazione iniziale, configurare Accedi con Google e connettere il database con una sola frase.
Inserisci il prompt iniziale
Nella casella del prompt della modalità di creazione di AI Studio, inserisci il seguente prompt e premi Invio:
Build a running club web app with a Cloud SQL database
where members can post upcoming runs.
Questo link compilerà automaticamente la casella del prompt.
Informazioni sul tuo workspace
Una volta inviato il prompt, Google AI Studio apre l'intero workspace dell'applicazione. Esamina le tre aree principali dello schermo:
- La casella di chat / prompt (in basso): qui puoi continuare a chattare con l'AI in linguaggio naturale per aggiungere funzionalità, modificare i design o porre domande.
- Area File e codice (lato sinistro): mostra i file creati dall'AI in background. Non è necessario scrivere o modificare il codice, ma questo riquadro ti consente di osservare l'AI mentre crea i componenti della tua app.
- Finestra di anteprima live (lato destro): mostra l'app su cui stai lavorando in tempo reale. Puoi fare clic sui pulsanti, digitare nei campi di testo e testare la tua app direttamente in questa finestra non appena viene generata.
- Editor di codice (lato destro): mostra il codice effettivo generato dall'AI. Se vuoi, puoi modificarlo, ma non è obbligatorio.
- Deployment e condivisione (in alto a destra): qui puoi eseguire il deployment della tua app su internet e condividerla con altri.
Cosa fa Google AI Studio automaticamente
Mentre l'AI elabora la tua richiesta, puoi guardare la creazione della tua app passo dopo passo:
- Configura Accedi con Google: l'AI integra automaticamente Accedi con Google in modo che i partecipanti possano accedere in sicurezza con i propri Account Google, senza dover gestire password utente o impostazioni di sicurezza.
- Connette un database reale: l'AI configura un database Cloud SQL gestito per archiviare i dati della tua community. Se richiesto, fai clic per attivare il database per il tuo progetto.
- Organizza le tabelle di dati (
schema.ts): pensa a uno schema di database come a una raccolta di fogli di lavoro organizzati. L'AI crea automaticamente la struttura di archiviazione per la tua app:- Tabella
users: memorizza i profili, i nomi, gli avatar e l'andatura di corsa dei membri. - Tabella
runs: memorizza gli eventi pianificati con titolo, distanza, andatura target, posizione e data. - Tabella
comments: memorizza i messaggi e le domande lasciati dai runner per ogni corsa.
(Nota: non devi mai scrivere o modificare questo codice manualmente. L'AI lo aggiorna per te ogni volta che richiedi nuove funzionalità.) - Tabella
- Crea l'interfaccia visiva: l'AI crea le pagine web che vedi sullo schermo, inclusi l'intestazione, l'elenco delle corse imminenti, il modulo di creazione degli eventi e la sezione dei commenti.
Verifica l'autenticazione ed esegui la pubblicazione
Al termine della generazione, testa la nuova app nel riquadro Anteprima:
- Nella finestra di anteprima, fai clic su Accesso membri (o sul pulsante Pubblica corsa in programma, che attiverà l'autenticazione).
- Autenticati con il tuo Account Google utilizzando la finestra di dialogo Firebase Auth.
- Una volta eseguito l'accesso, il nome e l'avatar del tuo profilo Google vengono visualizzati nella barra di navigazione e le tue preferenze di andatura vengono gestite automaticamente.
- Nel modulo "Pubblica la tua prossima corsa", inserisci un titolo (ad esempio
Morning 5K Shakeout). - Seleziona una data e un'ora e inserisci un luogo per la riunione (ad esempio
Central Park West Entrance). - Fai clic su PublishRun.
- Verifica che la nuova corsa venga visualizzata immediatamente nel feed delle corse in programma, con il nome del tuo profilo autenticato e il badge del ritmo in qualità di organizzatore.
- Pubblica un messaggio rapido nella sezione di discussione della corsa (ad esempio
Bringing extra water bottles!) e verifica che venga visualizzato nel thread di commenti.
4. Creare una libreria di itinerari
I club di corsa spesso riutilizzano percorsi locali popolari. Anziché digitare le stesse informazioni sul percorso più e più volte, puoi consentire ai membri di salvare i percorsi preferiti in un catalogo e allegarli ogni volta che pianificano una corsa.
Chiedi all'AI di aggiungere la raccolta di itinerari
Nella casella del prompt della chat, digita la seguente richiesta e premi Invio:
Add a route library where members can save favorite
running routes with atitle, distance in km, difficulty,
and start location. When scheduling a run, allow the
organizer to select a route from this library.
Come l'AI collega gli itinerari alle corse dietro le quinte
Per farlo, l'AI crea automaticamente una nuova tabella di archiviazione per routes e la connette direttamente alla tabella runs. Questa connessione consente all'app di recuperare automaticamente i dettagli di distanza e posizione ogni volta che un organizzatore sceglie un percorso.
Anche in questo caso, non devi modificare il codice: l'AI aggiorna la struttura del database per te.
Testare la nuova raccolta di percorsi nell'anteprima
Una volta che l'AI ha terminato l'aggiornamento dell'app, prova la nuova funzionalità di percorso nella finestra di anteprima live:
- Nella navigazione dell'app, fai clic sulla scheda Libreria di percorsi. Se non è presente alcuna scheda, controlla la parte inferiore dell'anteprima live: potrebbe chiederti di premere il pulsante Salva per aggiornare l'anteprima. Se non funziona, prova a interagire con l'IA nella finestra della chat e chiedi dove si trova la tua raccolta di percorsi.
- Fai clic su Salva nuovo percorso (o Aggiungi percorso) e compila alcuni dettagli di esempio:
- Titolo itinerario:
Riverfront Trail Loop - Distanza:
8.5 km - Difficoltà:
Moderate - Posizione di partenza:
Waterfront Pier 4
- Titolo itinerario:
- Fai clic su Salva nella raccolta.
- Ora pianifica una corsa utilizzando questo percorso facendo clic sul pulsante Pianifica corsa direttamente sulla nuova scheda del percorso.
- Nota come i dettagli di distanza, difficoltà e posizione vengono compilati automaticamente.
- Fai clic su Pubblica corsa e verifica che la nuova corsa di gruppo venga visualizzata nel feed della home page.
5. Implementare le conferme di partecipazione e gli inviti ai membri
Le app della community prosperano grazie alla partecipazione. Puoi consentire ai runner di vedere chi parteciperà a una corsa imminente, registrarsi con un solo clic e condividere un link di invito con gli amici.
Chiedere all'AI di aggiungere conferme e inviti
Nella casella del prompt della chat, digita la seguente richiesta e premi Invio:
Allow registered members to RSVP ("Join Run") to any upcoming run.
Show the list of attending runners on each run card, display an
attendee counter, and add a copyable invite link.
Come l'AI monitora i partecipanti dietro le quinte
Per tenere traccia dei runner che partecipano a ogni corsa, l'AI crea automaticamente una tabella rsvps nel tuo database. Pensa a questo come a un modulo di iscrizione digitale che collega il nome di un runner a un evento specifico.
Non devi scrivere o modificare questo codice: l'AI gestisce automaticamente questo foglio di registrazione nel tuo database.
Testare le risposte e gli inviti nell'anteprima
Una volta che l'AI ha terminato l'aggiornamento dell'app, prova le nuove funzionalità di conferma della partecipazione nella finestra di anteprima live:
- Nella finestra di anteprima, trova una corsa in programma nel feed della home page.
- Fai clic sul pulsante Partecipa alla corsa (o Conferma).
- Verifica che il tuo nome e il tuo avatar vengano visualizzati nella sezione Corridori partecipanti e che il contatore dei partecipanti aumenti di 1.
- Fai clic su Copia link di invito e verifica che venga generato un link condivisibile.
6. Testare la persistenza dei dati e la scalabilità fino a zero di Cloud SQL
Quando crei un'app, la cosa più importante è sapere che le informazioni della tua community sono al sicuro. Se aggiorni il browser, chiudi la scheda o spegni il computer, vuoi che tutti i percorsi salvati, le conferme di partecipazione e le discussioni siano ancora presenti quando torni.
In questo passaggio, verificherai che i dati vengano salvati in modo sicuro nel database Cloud SQL e scoprirai come Google Cloud risparmia energia e costi quando la tua app è inattiva.
Testare l'aggiornamento dell'app
- Fai clic sul pulsante Ricarica all'interno della finestra di anteprima di AI Studio (o aggiorna la scheda del browser).
- Guarda la tua app in anteprima: noterai che tutto ciò che hai creato (il tuo profilo membro, i percorsi salvati, le corse pianificate, le conferme di partecipazione e i commenti) è ancora al suo posto.
- La tua app non si è limitata ad archiviare temporaneamente le informazioni sullo schermo, ma le ha archiviate in modo sicuro nel database Cloud SQL.
Come Cloud SQL consente di risparmiare energia e costi ("Scalabilità fino a zero")
Che cosa succede quando nessuno utilizza l'app del tuo club di corsa nel cuore della notte?
- Scalabilità fino a zero automatica ("scalabilità fino a zero"): quando nessuno visita l'app o si iscrive alle corse, il database si mette automaticamente in pausa per risparmiare risorse.
- Riattivazione istantanea: non appena un runner apre l'app o fa clic su un link di invito, il database si riattiva immediatamente con tutte le informazioni salvate pronte all'uso.
- Costo di inattività pari a zero: poiché va in sospensione quando è inattiva, non utilizzi risorse di calcolo quando l'app è inattiva.
7. Pubblica ed esegui il deployment in Cloud Run
Ora che l'app Running Club è stata creata e testata nell'anteprima, è il momento di condividerla con la tua community. Non devi acquistare un hosting web o configurare i server: puoi pubblicare la tua app su internet con un solo clic.
Pubblicare la tua app sul web
- Nell'angolo in alto a destra di Google AI Studio, fai clic sul pulsante Pubblica.
- Viene visualizzata una finestra di riepilogo che conferma i dettagli:
- Hosting: ospitato ed eseguito il deployment su Google Cloud Run.
- Servizi connessi: Accedi con Google e il tuo database Cloud SQL.
- Hosting: ospitato ed eseguito il deployment su Google Cloud Run.
- Fai clic su Pubblica per avviare l'app.
Aprire e condividere la tua app live
- Al termine della pubblicazione, Google AI Studio fornisce l'indirizzo web live e un codice QR.
- Fai clic sul link per aprire l'app web live in una nuova scheda del browser o scansiona il codice QR con la fotocamera dello smartphone.
- Prova sul tuo smartphone: accedi sul tuo smartphone, conferma la tua partecipazione a una delle corse che hai programmato in precedenza sul computer e guarda il conteggio dei partecipanti aggiornarsi in tempo reale, grazie al database Cloud SQL condiviso.
8. (Bonus) Esamina le risorse nella console Google Cloud
Quando Google AI Studio crea e implementa la tua app, non la blocca all'interno di una scatola nera privata, ma crea servizi Google Cloud reali e pronti per la produzione per tuo conto. Considera la console Google Cloud come il centro di controllo in cui puoi visualizzare la tua app e il tuo database live.
Passaggio 1: apri la console Google Cloud
- In una nuova scheda del browser, apri la console Google Cloud.
- Nella parte superiore dello schermo, fai clic sul menu a discesa del progetto e seleziona il progetto creato per l'app AI Studio (il cui nome di solito inizia con
continual-run-).
Passaggio 2: scopri dove viene eseguita la tua app web (Cloud Run)
- Nella barra di ricerca in alto, digita
Cloud Rune selezionala dai risultati.
- Fai clic sul nome dell'app (ad esempio
running-club).
- Qui puoi esplorare il motore che ospita il tuo sito web:
- Metriche: grafici utili che mostrano il numero di persone che visitano il tuo sito web.
- Log: un registro in tempo reale dell'attività che mostra cosa succede quando i visitatori interagiscono con la tua app.
Passaggio 3: visualizza il database in azione (Cloud SQL)
- Nella barra di ricerca in alto, digita
Cloud SQLe selezionala dai risultati. - Fai clic sull'istanza del database PostgreSQL.
- Qui puoi visualizzare i dettagli del database live, confermando che il database è attivo e pronto per archiviare i dati del tuo running club.
9. Libera spazio
Se hai creato questa app come progetto di esercitazione, puoi eliminarla facilmente. Se prevedi di continuare a utilizzare l'app Running Club con la tua community, puoi lasciarla in esecuzione.
- In Google AI Studio, fai clic su Le mie app nella barra laterale a sinistra.
- Trova l'app Running Club.
- Fai clic su Elimina app (o sull'icona del cestino). In questo modo, la pagina web live viene disattivata e il database di test viene rimosso in un unico passaggio.
10. Complimenti
Hai creato, personalizzato e pubblicato la tua prima app web basata su database utilizzando Google AI Studio e Cloud SQL.
Visita questo link per ottenere il badge Percorso del Builder completato.
Per continuare il tuo percorso, vai alla pagina goo.gle/builders per il prossimo lab.
Che cosa hai realizzato
- Creazione di un'app con un linguaggio semplice: è stata creata un'app completa per un club di corsa della community con prompt semplici.
- Accesso con Google attivato: configura automaticamente l'accesso sicuro con gli Account Google.
- Connessione di un database reale: percorsi memorizzati, corse pianificate, conferme di partecipazione e discussioni archiviati in modo sicuro in Cloud SQL.
- Funzionalità aggiunte in modo conversazionale: è stata creata una raccolta di itinerari e il monitoraggio delle conferme di partecipazione semplicemente chattando con l'AI.
- Pubblicata live sul web: hai eseguito il deployment della tua app su internet con un clic e l'hai testata su più dispositivi.
- Esaminato il funzionamento interno: ha esplorato il modo in cui Google Cloud ospita l'app web live e il database.
Passaggi successivi
Puoi continuare a chattare con l'AI in Google AI Studio per espandere la tua app con nuove funzionalità:
- Mappe interattive: chiedi all'AI di aggiungere anteprime di mappe e percorsi GPS.
- Abbinamento di compagni di corsa: chiedi all'AI di suggerire compagni di corsa con obiettivi di ritmo simili.
- Previsioni meteo: chiedi all'AI di mostrare le previsioni meteo del fine settimana nelle schede delle corse imminenti.
- Condivisione di foto: chiedi all'AI di consentire ai runner di condividere foto dopo una corsa di gruppo.