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

Questa guida illustra 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 genera una ricetta contenente gli ingredienti identificati.

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 il seguente prompt, che creerà un'app di ricette basata su immagini che utilizza la fotocamera del browser e l'IA generativa.

    Ad esempio, potresti inserire un prompt come il seguente per creare un'app per la generazione di ricette:

    Use secure coding practices to create an error-free web app that lets
users upload a photo or take a picture with their browser
camera. The app identifies the food in the picture and generates a
recipe and accompanying image that includes that food.

If no food product is identified, generate a random dessert recipe.

  3. Se vuoi, carica un'immagine da associare al prompt. Ad esempio, puoi caricare un'immagine contenente la combinazione di colori che vuoi utilizzare per la tua app e chiedere a Firebase Studio di utilizzarla. Le immagini devono avere dimensioni inferiori a 3 MiB.

  4. Fai clic su Prototipo con l'IA.

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

  5. Esamina il progetto. Se necessario, apporta alcune modifiche. Ad esempio, puoi modificare 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.

  6. Fai clic su Crea un prototipo di questa app.

  7. L'agente di prototipazione di app inizia a codificare l'app.

    • Poiché la tua app utilizza l'IA, ti viene chiesto di aggiungere o generare una chiave Gemini API. Se fai clic su Genera automaticamente, App Prototyping agent esegue il provisioning di un progetto Firebase e di una chiave Gemini API per te.

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.

  • 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. Scopri di più su come anteprime dell'app.

  • Correggi gli errori man mano che si verificano: nella maggior parte dei casi, App Prototyping agent ti chiede di correggere gli errori che si verificano. Fai clic su Correggi errore per consentire al sistema di tentare una correzione.

    Se ricevi errori per i quali non ti viene chiesto di correggerli automaticamente, copia l'errore e qualsiasi contesto pertinente (ad esempio, "Puoi correggere questo errore nel mio codice di inizializzazione di Firebase?") nella finestra della chat e invialo a Gemini.

  • Esegui test e iterazioni utilizzando il linguaggio naturale:testa attentamente l'app e utilizza App Prototyping agent per eseguire l'iterazione sul codice e sul blueprint finché non sei soddisfatto.

    Mentre ti trovi a Prototyper mode, you can also use the following features:

    • Fai clic su Icona Aggiungi annotazione Aggiungi annotazioni per disegnare direttamente nella finestra Anteprima. Utilizza gli strumenti di testo, immagini e forme disponibili, insieme a un prompt di testo facoltativo, per descrivere visivamente cosa vuoi che App Prototyping agent modifichi.

    • Fai clic su Seleziona un'icona Seleziona per selezionare un elemento specifico e inserire le istruzioni per il App Prototyping agent. In questo modo puoi scegliere rapidamente come target un'icona, un pulsante, un testo o un altro elemento specifico. Quando fai clic su un'immagine, hai anche la possibilità di cercare e selezionare un'immagine stock da Unsplash.

    Se vuoi, puoi fare clic su Icona link Condividi link di anteprima per condividere la tua app pubblicamente e temporaneamente utilizzando Firebase Studio anteprime pubbliche.

  • Esegui il debug ed esegui l'iterazione direttamente nel codice: fai clic su Icona di opzione di 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:

  • Testa e misura le prestazioni delle funzionalità di AI generativa:puoi utilizzare la UI per sviluppatori di Genkit per eseguire i flussi di AI di Genkit, testare, eseguire il debug, interagire con diversi modelli, perfezionare i prompt e altro ancora.

    Per caricare i flussi di Genkit nell'interfaccia utente per sviluppatori di Genkit e iniziare i test:

    1. Dal terminale nello spazio di lavoro Firebase Studio, esegui il seguente comando per recuperare la chiave Gemini API e avviare il server Genkit:

       npm run genkit:watch

    2. Fai clic sul link all'interfaccia utente per sviluppatori di Genkit. L'interfaccia utente per gli sviluppatori di Genkit si apre in una nuova finestra con i tuoi flussi, prompt, inserzionisti e una selezione di diversi modelli disponibili.

    Scopri di più sull'interfaccia utente per sviluppatori di Genkit nella pagina Strumenti per sviluppatori Genkit.

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

Dopo aver testato l'app e averla trovata soddisfacente nella tua area di lavoro, puoi pubblicarla sul web con Firebase App Hosting.

Quando configuri App Hosting, Firebase Studio crea per te un progetto Firebase (se non ne è già stato creato uno generando automaticamente una chiave Gemini API) e ti guida nella procedura di collegamento di un account Cloud Billing.

Per pubblicare l'app:

  1. Fai clic su Pubblica per configurare il progetto Firebase e pubblicare l'app. Viene visualizzato il riquadro Pubblica la tua app.

  2. Nel passaggio Progetto Firebase, App Prototyping agent mostra Firebase associato allo spazio di lavoro. Se non è stato creato un progetto durante la generazione della chiave Gemini API, ne verrà creato uno nuovo. Fai clic su Avanti per continuare.

  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.

  5. Fai clic su Configura servizi. L'agente di prototipazione di app inizia a eseguire il provisioning dei servizi Firebase.

  6. Fai clic su Pubblica ora. Firebase Studio configura i servizi Firebase. L'operazione può richiedere diversi minuti. Per scoprire di più su cosa succede dietro le quinte, consulta La procedura di compilazione di App Hosting.

  7. Al termine del passaggio di pubblicazione, viene visualizzata la Panoramica dell'app con un URL e approfondimenti sull'app basati sull'osservabilità di App Hosting. Per utilizzare un dominio personalizzato (come example.com o app.example.com) anziché il dominio generato da Firebase, puoi aggiungere un dominio personalizzato nella console Firebase.

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

(Consigliato) Passaggio 6: aggiungi Firebase App Check all'app

Se hai integrato servizi Firebase o Google Cloud nella tua app, Firebase App Check ti aiuta a proteggere i backend dell'app da comportamenti illeciti impedendo ai clienti non autorizzati di accedere alle tue risorse Firebase. Funziona sia con i servizi Google (inclusi i servizi Firebase e Google Cloud) sia con i tuoi backend personalizzati per proteggere le tue risorse.

Ti consigliamo di aggiungere App Check a qualsiasi app che pubblichi pubblicamente per proteggere le tue risorse di backend da abusi.

Questa sezione illustra la procedura di configurazione di App Check in Firebase Studio utilizzando reCAPTCHA Enterprise per un'app web creata dal App Prototyping agent, ma puoi configurare App Check in qualsiasi app che implementa i servizi Firebase e può implementare provider personalizzati. Scopri di più all'indirizzo Firebase App Check.

reCAPTCHA Enterprise fornisce fino a 10.000 valutazioni senza costi.

Passaggio 1: configura reCAPTCHA Enterprise per la tua app

  1. Apri la sezione reCAPTCHA Enterprise della console Google Cloud.

  2. Seleziona il nome del tuo progetto Firebase dal selettore di progetti della Google Cloudconsole.

  3. Se ti viene chiesto di abilitare l'API reCAPTCHA Enterprise, fallo.

  4. Fai clic su Inizia e aggiungi un Nome visualizzato per la chiave del sito reCAPTCHA.

  5. Accetta la chiave Tipo di applicazione Web predefinita.

  6. Fai clic su Aggiungi un dominio e aggiungi un dominio. Aggiungi il tuo dominioApp Hosting (ad esempiostudio--PROJECT_ID.REGION.hosted.app) e tutti i domini personalizzati che utilizzi o prevedi di utilizzare con la tua app.

  7. Fai clic su Passaggio successivo.

  8. Lascia deselezionata l'opzione Utilizzerai le verifiche?.

  9. Fai clic su Crea chiave.

  10. Copia e salva l'ID chiave e vai a Configura App Check.

Passaggio 2: configura App Check

  1. Apri la console Firebase e fai clic su Build > Controllo app nel menu di navigazione.

  2. Fai clic su Inizia, quindi su Registra accanto alla tua app.

  3. Fai clic per espandere reCAPTCHA e incolla l'ID chiave che hai generato per reCAPTCHA Enterprise.

  4. Fai clic su Salva.

Passaggio 3: aggiungi App Check al codice

  1. Torna a Firebase Studio e, nella visualizzazione Code, aggiungi la chiave del sito che hai generato al file .env:

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  2. Se non hai ancora salvato la configurazione di Firebase in .env, ottenila:

    • Dalla console Firebase, apri Impostazioni progetto e individua la sezione corrispondente alla tua app.

    • Dal terminale nella visualizzazione Code:

      1. Accedi a Firebase: firebase auth login
      2. Seleziona il tuo progetto: firebase use FIREBASE_PROJECT_ID
      3. Ottieni la configurazione di Firebase: firebase apps:sdkconfig

  3. Aggiungi la configurazione al file .env in modo che sia simile al seguente:

    NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN
NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID
NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  4. Aggiungi App Check al codice dell'app. Puoi chiedere a Gemini di aggiungere App Check con reCAPTCHA Enterprise alla tua app (assicurati di specificare "reCAPTCHA Enterprise" e di ricontrollare) oppure segui i passaggi descritti in Eseguire l'inizializzazione App Check.

  5. Ripubblica il sito su App Hosting. Prova a testare le funzionalità di Firebase per generare alcuni dati.

  6. Verifica che App Check stia ricevendo richieste nella console Firebase aprendo Build > Controllo app.

  7. Fai clic per controllare i servizi Firebase. Dopo aver verificato che le richieste arrivano, fai clic su Applica per applicare App Check.

  8. Ripeti la verifica e l'applicazione per Firebase Authentication.

Se, dopo aver registrato la tua app per App Check, vuoi eseguirla in un ambiente che App Check normalmente non classificherebbe come valido, ad esempio localmente durante lo sviluppo o da un ambiente di integrazione continua (CI), puoi creare una build di debug della tua app che utilizzi il fornitore di debug App Check anziché un fornitore di attestazione reale. Scopri di più su come utilizzare App Check con il provider di debug nelle app web.

(Facoltativo) Passaggio 7: monitora l'app

Il riquadro Panoramica dell'app in Firebase Studio fornisce informazioni e metriche chiave sulla tua app, consentendoti di monitorarne il rendimento utilizzando gli strumenti di osservabilità integrati di App Hosting. Dopo aver implementato il sito, puoi accedere alla panoramica facendo clic su Pubblica. Da questo pannello puoi:

  • Fai clic su Pubblica per rilasciare una nuova versione della tua app.
  • Condividi il link all'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 8: 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 9: 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 le prestazioni 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 opzione di 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