Inizia a utilizzare l'agente di prototipazione di app

Firebase Studio include un'interfaccia basata sul web che ti consente di prototipare e generare rapidamente app web basate sull'AI utilizzando prompt multimodali, tra cui linguaggio naturale, immagini e strumenti di disegno. L'agente supporta le app Next.js, mentre in futuro sono previste altre piattaforme e framework.

L'agente di prototipazione di app è un flusso di sviluppo no-code semplificato che utilizza l'AI generativa per sviluppare, testare, iterare e pubblicare un'app web agentica full-stack. Descrivi la tua idea di app in linguaggio naturale con un'immagine facoltativa e l'agente genera un progetto di app, codice e un'anteprima web. Per aiutarti nello sviluppo e nella pubblicazione della tua app full-stack, Firebase Studio può eseguire automaticamente il provisioning dei seguenti servizi per te:

  • Se la tua app utilizza l'AI:Firebase Studio aggiunge l'Gemini API per sviluppatori alla tua app, utilizzando la potenza dei flussi Genkit per interagire con Gemini. Puoi utilizzare la tua chiave Gemini API o lasciare che Firebase Studio esegua il provisioning di un progetto Firebase e di una chiave API Gemini per te.

  • Se vuoi pubblicare la tua app sul web: Firebase Studio crea un progetto e fornisce un modo rapido per pubblicare la tua app con Firebase App Hosting.

Puoi perfezionare l'app utilizzando il linguaggio naturale, immagini e strumenti di disegno, modificare direttamente il codice, ripristinare le modifiche, pubblicare l'app e monitorarne il rendimento, tutto da Firebase Studio.

Inizia

Per iniziare a utilizzare App Prototyping agent, segui questi passaggi:

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

  2. Nel campo Prototipa un'app con l'AI, descrivi la tua idea di app in linguaggio naturale.

    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 allegare al prompt. Ad esempio, puoi caricare un'immagine che contiene la combinazione di colori che vuoi che la tua app utilizzi e dire a Firebase Studio di utilizzarla. Le immagini devono avere dimensioni inferiori a 3 MiB.

  4. Fai clic su Prototipo con l'AI.

    Gemini genera un progetto di app in base al tuo prompt, restituendo un nome dell'app proposto, le funzionalità richieste e le linee guida di 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 il blueprint direttamente. Apporta le modifiche e fai clic su Salva.

    • Nel campo Descrivi… nel riquadro della chat, aggiungi domande e contesto chiarificatori. Puoi anche caricare immagini aggiuntive.

  6. Fai clic su Prototipa questa app.

  7. L'agente di prototipazione di app inizia a programmare la tua app.

    • Se la tua app utilizza l'AI, 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.

Testare, perfezionare, eseguire il debug e ripetere

Dopo aver generato l'app iniziale, puoi testarla, perfezionarla, eseguirne il debug e iterarla.

  • Rivedi e interagisci con la tua app:al termine della generazione del codice, viene visualizzata un'anteprima della tua app. Puoi interagire direttamente con l'anteprima per testarla. Scopri di più in Anteprima 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 eseguire la correzione automatica, copia l'errore e qualsiasi contesto pertinente (ad esempio, "Puoi correggere questo errore nel mio codice di inizializzazione di Firebase?") nella finestra di chat e invialo a Gemini.

  • Testa ed esegui l'iterazione utilizzando il linguaggio naturale:testa a fondo la tua app e lavora con App Prototyping agent per eseguire l'iterazione del codice e del progetto finché non sei soddisfatto.

    Durante il soggiorno a Prototyper mode, you can also use the following features:

    • Fai clic su Icona Annota Annota per disegnare direttamente nella finestra di anteprima. Utilizza gli strumenti disponibili per forme, immagini e testo, 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 specifica, un pulsante, un testo o un altro elemento. Quando fai clic su un'immagine, hai anche la possibilità di cercare e selezionare un'immagine di stock da Unsplash.

    (Facoltativo) 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 e le iterazioni direttamente nel codice: fai clic su Icona Cambio codice Passa al codice per aprire la visualizzazione Code, dove puoi vedere tutti i file della tua 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 il rendimento della tua 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 Genkit nella UI per sviluppatori di Genkit e iniziare i test:

    1. Dal terminale dello spazio di lavoro Firebase Studio, esegui il comando seguente 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'UI per sviluppatori di Genkit si apre in una nuova finestra con i tuoi flussi, prompt, incorporatori e una selezione di diversi modelli disponibili.

    Scopri di più sulla UI per sviluppatori di Genkit in Strumenti per sviluppatori di Genkit.

Pubblicare l'app con Firebase App Hosting

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

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

Per pubblicare la tua 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, verrà creato un nuovo progetto. Fai clic su Avanti per continuare.

  3. Nel passaggio Collega 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 apre la console Google Cloud, in cui puoi creare un nuovo account Cloud Billing self-service. Dopo aver creato l'account, torna a Firebase Studio e seleziona l'account dall'elenco Collega Cloud Billing.

  4. Fai clic su Avanti. Firebase Studio collega l'account di fatturazione al progetto associato al tuo 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 delle app inizia 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 Il App Hosting processo di build.

  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 (ad esempio example.com o app.example.com) anziché il dominio generato da Firebase, puoi aggiungere un dominio personalizzato nella console Firebase.

Per ulteriori informazioni su App Hosting, vedi Informazioni su App Hosting e sul suo funzionamento.

Proteggere l'app con Firebase App Check e reCAPTCHA Enterprise

Se hai integrato i servizi Firebase o Google Cloud nella tua app, Firebase App Check aiuta a proteggere i backend dell'app da comportamenti illeciti impedendo ai client non autorizzati di accedere alle 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 risorse di backend da abusi.

Questa sezione ti guida alla configurazione di App Check all'interno di Firebase Studio utilizzando reCAPTCHA Enterprise per un'app web creata da App Prototyping agent, ma puoi configurare App Check all'interno di qualsiasi app che implementi i servizi Firebase e possa 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 console Google Cloud.

  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. Ti consigliamo di aggiungere il tuo dominio App Hosting (ad esempio, studio--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 il tuo ID chiave e vai a Configura App Check.

Passaggio 2: configura App Check

  1. Apri la console Firebase e fai clic su Build > App Check dal 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 Firebase in .env, recuperala:

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

    • Dalla visualizzazione Terminale in 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 alla 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 Inizializza 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 riceva richieste nella console Firebase aprendo Build > App Check.

  7. Fai clic per esaminare i servizi Firebase. Dopo aver verificato che le richieste arrivino, 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 normalmente App Check 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 utilizza il provider di debug App Check anziché un vero provider di attestazione. Scopri di più in Utilizzare App Check con il provider di debug nelle app web.

Monitora la tua app

Il riquadro Panoramica app in Firebase Studio fornisce metriche e informazioni chiave sulla tua app, consentendoti di monitorare il rendimento 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. Da questo pannello puoi:

  • Fai clic su Pubblica per rilasciare una nuova versione della tua app.
  • Condividi il link alla tua app o aprirla 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 lancio. Fai clic su Visualizza dettagli per accedere a ulteriori informazioni nella console Firebase.
  • 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 app, puoi riaprirlo in qualsiasi momento facendo clic su Pubblica.

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

Eseguire il rollback del deployment

Se hai eseguito il deployment di versioni successive della tua app su 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 Firebase console.

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

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

    Scopri di più su Gestire i rollout e le 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 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 backend di App Hosting, segui le istruzioni riportate in Eliminare un backend.

Utilizzare Genkit Monitoring 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 AI. La funzionalità di telemetria di Genkit ti consente di monitorare le prestazioni e l'utilizzo dei tuoi flussi AI. Questi dati possono aiutarti a identificare le aree di miglioramento, risolvere i problemi, ottimizzare i prompt e i flussi per ottenere prestazioni e un'efficienza in termini di costi migliori e monitorare l'utilizzo dei flussi nel tempo.

Per configurare il monitoraggio in Genkit, aggiungi la telemetria ai flussi di Genkit AI 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 Cambio codice Passa al 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 in macOS).

  4. Fai clic all'interno del terminale e installa il plug-in Firebase utilizzando la versione corrispondente al 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. Uno o più file TypeScript che contengono i tuoi flussi Genkit vengono visualizzati nella cartella flows.

  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 abilitato le API richieste 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, quindi concedi i seguenti ruoli al service account di App Hosting:

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

  2. Ripubblica la tua 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, Genkit raccoglie metriche di stabilità, mostra grafici dettagliati e registra le tracce acquisite.

Per monitorare le funzionalità di AI implementate con Genkit:

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

    Genkit compila le seguenti metriche di stabilità:

    • Richieste totali:il numero totale di richieste ricevute dal tuo 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 di 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