Sviluppare, pubblicare e monitorare un'app web full stack con l'agente di prototipazione di app

Questa guida mostra come utilizzare il App Prototyping agent per sviluppare e pubblicare rapidamente un'app full-stack con l'aiuto di Gemini in Firebase. Utilizzerai un prompt in linguaggio naturale per generare un'app Next.js che identifica gli alimenti da un'immagine o dalla fotocamera del browser e fornisce una ricetta contenente gli ingredienti identificati. Poi perfezionerai e migliorerai l'app, per poi pubblicarla su Firebase App Hosting.

Altre tecnologie che utilizzerai man mano che avanzi nella guida sono:

Passaggio 1: genera l'app

  1. Accedi al tuo Account Google e apri Firebase Studio.

  2. Nel campo Prototipa un'app con l'IA, inserisci una descrizione dell'app che vuoi creare. Per questa soluzione, se stai creando un'app di ricette basata su immagini, puoi utilizzare un prompt come il seguente per realizzare il prototipo di un'app che utilizza la fotocamera e l'IA generativa:

    Build a web app that can identify food products from an uploaded picture or
in-browser camera. The app should provide a recipe that contains the
identified ingredients.

  3. Fai clic su Prototipo con l'IA.

    Gemini genera un blueprint dell'app in base al tuo prompt, restituisce un nome dell'app proposto, le funzionalità richieste e le linee guida per lo stile.

  4. Esamina il blueprint e apporta alcune modifiche. Ad esempio, puoi cambiare il nome o la combinazione di colori dell'app proposta utilizzando una di queste opzioni:

    • Fai clic su Personalizza e modifica direttamente il blueprint. Apporta le modifiche e fai clic su Salva.

    • Nel campo Descrivi… del riquadro della chat, aggiungi domande per chiarire e fornire contesto. Puoi anche caricare altre immagini.

  5. Fai clic su Crea un prototipo di questa app. Gemini inizia a scrivere il codice dell'app. Poiché la descrizione dell'app descrive funzionalità che richiedono l'IA generativa, Gemini ti chiede una chiave Gemini API.

  6. Aggiungi la tua chiave Gemini API o fai clic su Genera automaticamente per generare una chiave Gemini API.

Passaggio 2: testa, perfeziona, esegui il debug e esegui l'iterazione

Dopo aver generato l'app iniziale, puoi testarla, perfezionarla, eseguire il debug e eseguire l'iterazione.

  1. Esamina e interagisci con la tua app:al termine della generazione del codice, viene visualizzata un'anteprima dell'app. Puoi interagire direttamente con l'anteprima per verificarla.

  2. Esegui l'iterazione dell'app utilizzando il linguaggio naturale: continua a utilizzare l'interfaccia chat per chiedere a Gemini di aggiungere funzionalità e perfezionare l'app.

  3. Testa l'app: nel riquadro di anteprima dell'app, carica un'immagine che mostri diversi alimenti per testare la capacità della tua app di identificare gli ingredienti e fornire una ricetta. Se vuoi, puoi utilizzare la visualizzazione Code per condividere la tua app pubblicamente e temporaneamente utilizzando le Firebase Studio anteprime pubbliche.

  4. Esegui il debug e l'iterazione direttamente nel codice:fai clic su Icona di impostazione del codice Passa a Codice per aprire la visualizzazione Code, in cui puoi vedere tutti i file dell'app e modificare direttamente il codice. Puoi tornare a Prototyper mode at any time.

    Nella visualizzazione Code puoi anche utilizzare le seguenti funzionalità utili:

(Facoltativo) Passaggio 3: pubblica la tua app con App Hosting

Dopo aver testato l'app e averla ritenuta soddisfacente, puoi pubblicarla sul web con Firebase App Hosting.

Quando configuri App Hosting, Firebase Studio crea un progetto Firebase per te e ti guida nella procedura di collegamento di un account Cloud Billing.

Per pubblicare la tua app su Firebase App Hosting:

  1. Fai clic su Pubblica per creare un nuovo progetto Firebase e iniziare la App Hosting configurazione. Viene visualizzato il riquadro Pubblica la tua app.

  2. Nel passaggio Progetto Firebase, prendi nota del nome del progetto Firebase che è stato creato per te, quindi fai clic su Avanti.

  3. Nel passaggio Collega l'account Cloud Billing, scegli una delle seguenti opzioni:

    • Seleziona l'account Cloud Billing che vuoi collegare al tuo progetto Firebase.

    • Se non hai un account Cloud Billing o vuoi crearne uno nuovo, fai clic su Crea un account Cloud Billing. Si aprirà la console Google Cloud, in cui puoi creare un nuovo accountCloud Billing autonomo. Dopo aver creato l'account, torna a Firebase Studio e selezionalo dall'elenco Collega Cloud Billing.

  4. Fai clic su Avanti. Firebase Studio collega l'account di fatturazione al progetto associato allo spazio di lavoro, creato quando hai generato automaticamente una chiave Gemini API o quando hai fatto clic su Pubblica. App Hosting configura un ambiente completamente gestito per la tua app in Google Cloud.

  5. Fai clic su Crea il tuo primo implementazione. Firebase Studio avvia l'implementazione di App Hosting. L'operazione potrebbe richiedere fino a dieci minuti. Per scoprire di più su cosa succede dietro le quinte, consulta La procedura di compilazione di App Hosting.

  6. Al termine dell'implementazione, viene visualizzata la Panoramica dell'app con un URL e approfondimenti sull'app basati sull'osservabilità di App Hosting. Per utilizzare un dominio personalizzato (ad esempio example.com o app.example.com) anziché il dominio generato da Firebase, puoi aggiungerne uno nella console Firebase.

Per saperne di più su App Hosting, consulta Informazioni su App Hosting e su come funziona.

(Facoltativo) Passaggio 4: monitora l'app

Il riquadro App Hosting Panoramica dell'app fornisce metriche e informazioni chiave sulla tua app, consentendoti di monitorare le prestazioni della tua app web utilizzando gli strumenti di osservabilità integrati di App Hosting. Dopo l'implementazione del sito, puoi accedere alla panoramica facendo clic su Pubblica. In questo riquadro puoi:

  • Fai clic su Crea implementazione per rilasciare una nuova versione della tua app.
  • Condividi il link alla tua app o apri l'app direttamente in Visita la tua app.
  • Esamina un riepilogo del rendimento della tua app negli ultimi 7 giorni, incluso il numero totale di richieste e lo stato dell'ultimo implementazione. Fai clic su Visualizza dettagli per accedere ad altre informazioni nella Firebase console.
  • Visualizza un grafico del numero di richieste ricevute dalla tua app nelle ultime 24 ore, suddivise per codice di stato HTTP.

Se chiudi il riquadro Panoramica dell'app, puoi riaprirlo in qualsiasi momento facendo clic su Pubblica.

Scopri di più sulla gestione e sul monitoraggio dell'implementazione di App Hosting in Gestire implementazioni e release.

(Facoltativo) Passaggio 5: esegui il rollback del deployment

Se hai implementato versioni successive della tua app in App Hosting, puoi eseguire il rollback a una delle versioni precedenti. Puoi anche rimuoverlo.

  • Per eseguire il rollback di un sito pubblicato:

    1. Apri App Hosting nella consoleFirebase.

    2. Individua il backend dell'app, fai clic su Visualizza e poi su Implementazioni.

    3. Accanto al deployment a cui vuoi eseguire il rollback, fai clic su Altro , poi scegli Esegui rollback a questa build e conferma.

    Scopri di più in Gestire implementazioni e release.

  • Per rimuovere il tuo dominio App Hosting dal web:

    1. Dalla console Firebase, apri App Hosting e fai clic su Visualizza nella sezione dell'app Firebase Studio.

    2. Nella sezione Informazioni di backend, fai clic su Gestisci. Viene caricata la pagina Domains (Domini).

    3. Accanto al tuo dominio, fai clic su Altro , poi scegli Disattiva dominio e conferma.

    Il tuo dominio viene rimosso dal web. Per rimuovere completamente il backendApp Hosting, segui le istruzioni riportate in Eliminare un backend.

(Facoltativo) Passaggio 6: utilizza il monitoraggio di Genkit per le funzionalità di cui è stato eseguito il deployment

Puoi monitorare i passaggi, gli input e gli output della funzionalità Genkit attivando la telemetria nel codice del flusso di IA. La funzionalità di telemetria di Genkit ti consente di monitorare le prestazioni e l'utilizzo dei tuoi flussi di AI. Questi dati possono aiutarti a identificare le aree di miglioramento, risolvere i problemi, ottimizzare i prompt e i flussi per migliorare il rendimento e l'efficienza in termini di costi e monitorare l'utilizzo dei flussi nel tempo.

Per configurare il monitoraggio in Genkit, aggiungi la telemetria ai flussi di AI di Genkit e poi visualizza i risultati nella console Firebase.

Passaggio 1: aggiungi la telemetria al codice del flusso Genkit in Firebase Studio

Per configurare il monitoraggio nel codice:

  1. Se non sei già nella visualizzazione Code, fai clic su Icona di impostazione del codice Passa a Codice per aprirla.

  2. Controlla package.json per verificare la versione di Genkit installata.

  3. Apri il terminale (Ctrl-Shift-C o Cmd-Shift-C su macOS).

  4. Fai clic all'interno del terminale e installa il plug-in Firebase utilizzando la versione corrispondente al tuo file package.json. Ad esempio, se i pacchetti Genkit in package.json sono alla versione 1.0.4, devi eseguire il seguente comando per installare il plug-in:

    npm i --save @genkit-ai/firebase@1.0.4

  5. In Explorer, espandi src > ai > flows. Nella cartella flows vengono visualizzati uno o più file TypeScript che contengono i tuoi flussi Genkit.

  6. Fai clic su uno dei flussi per aprirlo.

  7. Nella parte inferiore della sezione delle importazioni del file, aggiungi quanto segue per importare e attivare FirebaseTelemetry:

    import { enableFirebaseTelemetry } from '@genkit-ai/firebase';

enableFirebaseTelemetry();

Passaggio 2: configura le autorizzazioni

Firebase Studio ha attivato le API obbligatorie per te durante la configurazione del progetto Firebase, ma devi anche fornire le autorizzazioni all'account di servizio App Hosting.

Per configurare le autorizzazioni:

  1. Apri la console IAM di Google Cloud, seleziona il tuo progetto e poi concedi i seguenti ruoli all'account di servizio App Hosting:

    • Monitoring Metric Writer (roles/monitoring.metricWriter)
    • Agente Cloud Trace (roles/cloudtrace.agent)
    • Logs Writer (roles/logging.logWriter)

  2. Ripubblicare l'app su App Hosting.

  3. Al termine della pubblicazione, carica l'app e inizia a utilizzarla. Dopo cinque minuti, l'app dovrebbe iniziare a registrare i dati di telemetria.

Passaggio 3: monitora le funzionalità di AI generativa nella console Firebase

Quando la telemetria è configurata, Genkit registra il numero di richieste, il successo e la latenza per tutti i tuoi flussi e, per ogni flusso specifico, raccoglie le metriche di stabilità, mostra grafici dettagliati e registra le tracce acquisite.Genkit

Per monitorare le funzionalità di IA implementate con Genkit:

  1. Dopo cinque minuti, apri Genkit nella console Firebase e rivedi i prompt e le risposte di Genkit.

    Genkit compila le seguenti metriche di stabilità:

    • Richieste totali:il numero totale di richieste ricevute dal flusso.
    • Tasso di successo:la percentuale di richieste elaborate correttamente.
    • Latenza del 95° percentile:la latenza del 95° percentile del flusso, ovvero il tempo necessario per l'elaborazione del 95% delle richieste.

    • Utilizzo dei token:

      • Token di input: il numero di token inviati al modello nel prompt.
      • Token di output: il numero di token generati dal modello nella risposta.

    • Utilizzo delle immagini:

      • Immagini di input:il numero di immagini inviate al modello nel prompt.
      • Immagini di output:il numero di immagini generate dal modello nella risposta.

    Se espandi le metriche sulla stabilità, sono disponibili grafici dettagliati:

    • Volume delle richieste nel tempo.
    • Percentuale di successo nel tempo.
    • Token di input e output nel tempo.
    • Latenza (95° e 50° percentile) nel tempo.

Scopri di più su Genkit all'indirizzo Genkit.

Passaggi successivi