Sviluppa, pubblica e monitora un'app web full stack con l'agente Prototipazione app

Anteprima: Firebase Studio è in anteprima, il che significa che il prodotto non è soggetto ad alcun SLA o norme sul ritiro e potrebbe subire modifiche incompatibili con le versioni precedenti.

Questa guida mostra come utilizzare App Prototyping agent per sviluppare e pubblicare rapidamente un'app full-stack con l'aiuto di Gemini. Utilizzerai un prompt in linguaggio naturale per generare un'app Next.js che identifica gli alimenti da un'immagine o dalla fotocamera nel browser fornita da un utente che ha eseguito l'accesso e genera una ricetta che contiene gli ingredienti identificati. Gli utenti possono quindi scegliere di archiviare la ricetta in un database in cui è possibile eseguire ricerche.

Poi perfezionerai e migliorerai l'app, prima di pubblicarla su Firebase App Hosting.

Importante: la persistenza dei dati con Cloud Firestore e Firebase Authentication è in fase di implementazione incrementale e potrebbe non essere disponibile universalmente.

Se la persistenza dei dati non è ancora disponibile nel tuo workspace, Gemini potrebbe utilizzare l'archiviazione del browser locale e dati di autenticazione fittizi se richiedi un database e/o l'autenticazione nel tuo blueprint. Puoi comunque utilizzare prompt aggiuntivi o la visualizzazione Code per implementare la persistenza dei dati.

Altre tecnologie che utilizzerai nel corso di questa guida includono:

• un workspace Firebase Studio
• un progetto Firebase
• Firebase App Hosting
• Cloud Firestore
• Firebase Authentication
• Firebase App Check

Importante: App Prototyping agent supporta la creazione di app con il framework Next.js. Per utilizzare l'Assistenza AI con altri framework in Firebase Studio, consulta Prova Gemini con Firebase Studio.

Passaggio 1: genera l'app

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

2. Nel campo Crea il prototipo di un'app con l'AI, inserisci il seguente prompt, che creerà un'app di ricette basata su immagini che utilizza la fotocamera del browser e l'AI generativa.

   Ad esempio, puoi inserire un prompt come il seguente per creare un'app di 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.
   

   Suggerimento: per ottenere risultati ottimali, fornisci informazioni quanto più possibile specifiche nel prompt. Includi le funzionalità che vuoi, i workflow degli utenti e i requisiti dei dati. Se vuoi, fai clic su Migliora il prompt per chiedere a Gemini di perfezionare il prompt iniziale. Tieni inoltre presente che i processi di sviluppo più efficaci con l'AI sono iterativi e che puoi continuare a perfezionare e aggiungere funzionalità in modo collaborativo con Gemini. Scopri di più sulla creazione di prompt efficaci.

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 chiedere a Firebase Studio di usarla. Le immagini devono essere inferiori a 3 MiB.

4. Fai clic su Crea prototipo con l'AI.

   App Prototyping agent genera un progetto dell'app in base al tuo prompt, restituendo un nome proposto per l'app, 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 proposti utilizzando una di queste opzioni:

   • Fai clic su Personalizza e modifica direttamente il progetto di base. Apporta le modifiche e fai clic su Salva.

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

6. Fai clic su Crea prototipo di questa app.

   Importante: Gemini può generare output apparentemente plausibili, ma di fatto errati. Potrebbe rispondere con informazioni imprecise che non rappresentano l'opinione di Google. Verifica tutti i risultati di Gemini prima di utilizzarli e non utilizzare in produzione il codice generato non testato. Non inserire nella chat informazioni che consentono l'identificazione personale (PII) o dati utente.

7. App Prototyping agent inizia a programmare la tua app.

   • Poiché 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 per te.
   Importante: se scegli Genera automaticamente, App Prototyping agent crea un progetto Firebase per tuo conto con un prefisso che corrisponde al nome della tua area di lavoro Firebase Studio e crea una nuova chiave Gemini API nel progetto. Inoltre, archivia la chiave all'interno dell'area di lavoro Firebase Studio in un file .env. Per accedere al nuovo progetto in qualsiasi momento, fai clic sul nome del progetto nella parte superiore della pagina. Per accedere alla chiave Gemini API per copiarla o eliminarla in futuro, utilizza la console Google Cloud.

Passaggio 2: testa, perfeziona, esegui il debug e ripeti

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

• Esamina e interagisci con l'app: al termine della generazione del codice, viene visualizzata un'anteprima dell'app. Puoi interagire direttamente con l'anteprima per testarla. Scopri di più nella pagina Visualizza l'anteprima dell'app.

• Aggiungi Cloud Firestore e Firebase Authentication: durante la fase di iterazione, puoi chiedere a App Prototyping agent di aggiungere l'autenticazione utente e un database utilizzando Cloud Firestore e Firebase Authentication. Ad esempio, offri agli utenti la possibilità di salvare e scaricare le ricette con un prompt simile al seguente:

  Add user authentication to the app. Authenticated users can:
  
    - Download the recipe and its generated image as a PDF (Print).
  
    - Save the recipe as public or private and make accessible to a search
      feature. For now, just save the text, not the image, to the database.
  
  Important: Only authenticated users can download the PDF.
  

  Suggerimento: App Prototyping agent può aggiungere Cloud Firestore e Firebase Authentication alla tua app durante la fase di iterazione, non nel progetto iniziale 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 un tentativo di correzione.

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

  Suggerimento: Gemini spiega il suo ragionamento, ma puoi anche chiedergli di spiegare il suo piano prima di eseguirlo.

• Testa ed esegui l'iterazione utilizzando il linguaggio naturale: testa l'app in modo approfondito e collabora con App Prototyping agent per eseguire l'iterazione del codice e del progetto finché non sei soddisfatto.

  Nella visualizzazione Prototyper, puoi anche utilizzare le seguenti funzionalità:

  • Fai clic su Annota per disegnare direttamente nella finestra Anteprima. Utilizza gli strumenti disponibili per forme, immagini e testo, insieme a un prompt testuale facoltativo, per descrivere visivamente ciò che vuoi che App Prototyping agent modifichi.

  • Fai clic su Seleziona per selezionare un elemento specifico e inserire le istruzioni per App Prototyping agent. In questo modo puoi scegliere rapidamente 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 Condividi link di anteprima per condividere la tua app pubblicamente e temporaneamente utilizzando Firebase Studio anteprime pubbliche.

• Crea un progetto Firebase: App Prototyping agent esegue il provisioning di un progetto Firebase per tuo conto quando:

  • Genera automaticamente una chiave API Gemini
  • Chiedi di collegare la tua app a un progetto Firebase
  • Chiedi aiuto per connettere la tua app ai servizi Firebase, come Cloud Firestore o Firebase Authentication
  • Fai clic sul pulsante Pubblica e configura Firebase App Hosting

  Per modificare il progetto Firebase collegato al tuo workspace, chiedi a App Prototyping agent di utilizzare l'ID progetto che vuoi usare. Ad esempio, "Passa al progetto Firebase con ID <your-project-id>".

• Testa l'app e verifica le regole del database Cloud Firestore: nel riquadro di anteprima dell'app, carica un'immagine che mostra diversi alimenti per testare la capacità dell'app di identificare gli ingredienti e generare e salvare le ricette.

  Accedi come utenti diversi e genera ricette: assicurati che gli utenti autenticati possano visualizzare le proprie ricette private e che tutti gli utenti possano visualizzare le ricette pubbliche.

  Quando chiedi a App Prototyping agent di aggiungere Cloud Firestore, scrive ed esegue il deployment delle regole del database Cloud Firestore per te. Esamina le regole nella console Firebase.

• Esegui il debug e l'iterazione direttamente nel codice: fai clic su Passa al codice per aprire la visualizzazione Code, dove puoi vedere tutti i file della tua app e modificare direttamente il codice. Puoi tornare alla modalità Prototyper in qualsiasi momento.

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

  • Le funzionalità di debug e generazione di report integrate di Firebase Studio per ispezionare, eseguire il debug e controllare la tua app.

  • Assistenza AI tramite Gemini direttamente nel codice o tramite la chat interattiva di Gemini (entrambe le opzioni sono disponibili per impostazione predefinita). La chat interattiva può diagnosticare i problemi, fornire soluzioni ed eseguire strumenti per aiutarti a correggere l'app più velocemente. Per accedere alla chat, fai clic su sparkGemini nella parte inferiore dell'area di lavoro.

    Nota: Le app create con App Prototyping agent utilizzano per impostazione predefinita la chat Prototyper nella visualizzazione Code. Per utilizzare invece la chat interattiva di Gemini, fai clic su + in Gemini, quindi seleziona Nuova chat. Per tornare alla chat di Prototyper, fai clic su Chat recenti, quindi scegli Chat di Prototyper.

  • Accedi alla Firebase Local Emulator Suite per visualizzare i dati del database e dell'autenticazione. Per aprire l'emulatore nel tuo workspace:

    1. Fai clic su Passa a Code e apri l'estensione Firebase Studio (Ctrl+',Ctrl+' o Cmd+',Cmd+' su MacOS).

    2. Scorri fino a Porte di backend ed espandi la sezione.

    3. Nella colonna Azioni corrispondente a Porta 4000, fai clic su Apri in una nuova finestra.

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

  Per caricare i flussi Genkit in Genkit Developer UI e iniziare i test:

  1. Dal terminale nel tuo workspace 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 Genkit Developer UI. Genkit Developer UI si apre in una nuova finestra con i tuoi flussi, prompt, embedder e una selezione di diversi modelli disponibili.

  Scopri di più su Genkit Developer UI negli strumenti per sviluppatori Genkit.

(Facoltativo) Passaggio 3: pubblica l'app con App Hosting

Dopo aver testato l'app e averne verificato il funzionamento nello spazio di lavoro, puoi pubblicarla sul web con Firebase App Hosting.

Importante: Firebase App Hosting richiede un account Cloud Billing. Quando colleghi un account di fatturazione a un progetto Firebase, viene eseguito automaticamente l'upgrade del progetto al piano tariffario Blaze con pagamento a consumo e viene eseguito l'upgrade al livello a pagamento dell'utilizzo di Gemini API e di altri servizi Firebase e Google Cloud. Ti verrà addebitato l'utilizzo dei servizi a pagamento che superano la quota senza costi aggiuntivi. Scopri di più in Informazioni sui costi di App Hosting, Prezzi di Firebase e Prezzi dell'API Gemini Developer.

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

Per pubblicare la tua app:

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

   Importante: se non hai generato automaticamente una chiave Gemini API o chiesto a App Prototyping agent di creare un progetto Firebase, Firebase Studio esegue il provisioning di un progetto Firebase per tuo conto quando fai clic su Pubblica. Puoi accedere al progetto Firebase facendo clic sul nome del progetto nella parte superiore della pagina.

2. Nel passaggio Progetto Firebase, App Prototyping agent mostra il progetto Firebase associato all'area di lavoro. Se non esiste già un progetto Firebase, App Prototyping agent ne crea uno nuovo per te. 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 apre la console Google Cloud, dove 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 workspace, creato quando hai generato automaticamente una chiave Gemini API o quando hai fatto clic su Pubblica.

   Importante: Firebase App Hosting richiede un account Cloud Billing. Quando colleghi un account di fatturazione a un progetto Firebase, viene eseguito automaticamente l'upgrade del progetto al piano tariffario Blaze con pagamento a consumo e viene eseguito l'upgrade al livello a pagamento dell'utilizzo di Gemini API e di altri servizi Firebase e Google Cloud. Ti verrà addebitato l'utilizzo dei servizi a pagamento che superano la quota senza costi aggiuntivi. Scopri di più in Informazioni sui costi di App Hosting, Prezzi di Firebase e Prezzi dell'API per sviluppatori Gemini.

5. Fai clic su Configura i servizi. App Prototyping agent inizia il provisioning dei servizi Firebase.

6. Fai clic su Pubblica ora. Firebase Studio configura i servizi Firebase e poi lancia l'implementazione di App Hosting. L'operazione può richiedere diversi minuti. Per scoprire di più su cosa succede dietro le quinte, consulta Il processo di build di App Hosting.

   Suggerimento: se non vuoi pubblicare ora, puoi fare clic su Pubblica più tardi.

7. Al termine del passaggio di pubblicazione, viene visualizzata la Panoramica dell'app con un URL e insight 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.

Suggerimento: se ricevi errori durante la pubblicazione, consulta l'articolo Ho ricevuto l'errore "Impossibile pubblicare l'app" dopo la pubblicazione per istruzioni su come trovare e correggere gli errori di pubblicazione.

Per saperne di più su App Hosting, consulta Informazioni su App Hosting e sul suo funzionamento.

(Consigliato) Passaggio 4: testa l'app pubblicata

Al termine della pubblicazione e del deployment dell'app su Firebase, Cloud Firestore e Firebase Authentication sono pronti per il test in produzione.

Genera indici per il tuo database Cloud Firestore

Quando esegui il deployment dell'app in Cloud Firestore, gli indici non vengono generati automaticamente. Ciò significa che, dopo la pubblicazione, potresti dover generare indici per le tue query.

Potresti visualizzare questo problema nei messaggi di errore o nella console per gli sviluppatori del browser.

Per generare gli indici dopo la pubblicazione:

1. Da un'app pubblicata: nel riquadro Panoramica app (fai clic su Pubblica se non è visibile), individua e fai clic sul link Visita la tua app.

   Dall'anteprima di Firebase Studio: apri la console per sviluppatori del browser e individua il messaggio di errore 200 generato da Cloud Firestore.

2. Testa tutti i flussi all'interno dell'app. Potrebbe essere visualizzato un messaggio di errore simile a "Errore durante il caricamento delle ricette. La query richiede un indice. Puoi crearla qui:" con un link alla console Firebase.

3. Segui il link per accedere alla console Firebase, dove viene visualizzato un indice consigliato.

4. Fai clic su Salva per accettare l'indice consigliato.

5. Torna alla tua app e ricarica la pagina.

6. Continua a testare tutti i flussi della tua app per aggiungere indici dove necessario.

Suggerimento: puoi chiedere a Gemini di generare gli indici per te, ma assicurati di controllare l'output.

Scopri di più in Gestisci gli indici in Cloud Firestore.

Visualizza i dati di Cloud Firestore e Firebase Authentication nella console Firebase

Puoi visualizzare i dati in tempo reale della tua app nella console Firebase dopo la pubblicazione.

• Per visualizzare il tuo database Cloud Firestore attivo, apri la console Firebase e scegli Build > Database Firestore dal menu di navigazione.

  Da qui puoi ispezionare i dati archiviati, visualizzare e testare le regole di sicurezza e creare indici. Scopri di più all'indirizzo Cloud Firestore.

• Per visualizzare i dati Firebase Authentication in tempo reale, apri la console Firebase e scegli Build > Authentication dal menu di navigazione.

  Da qui puoi esaminare la configurazione dell'autenticazione e gli utenti dell'app. Scopri di più all'indirizzo Firebase Authentication.

Testa le regole di Cloud Firestore in produzione

Dopo aver pubblicato l'app, devi testare nuovamente le regole di sicurezza di Cloud Firestore nel tuo ambiente di produzione. In questo modo, i tuoi dati sono accessibili agli utenti autorizzati e protetti da accessi non autorizzati.

Puoi testare le regole utilizzando tutti i seguenti metodi:

• Test dell'applicazione: interagisci con l'applicazione di cui hai eseguito il deployment, eseguendo operazioni che attivano vari pattern di accesso ai dati (letture, scritture, eliminazioni) per diversi ruoli o stati utente. Questo test reale aiuta a confermare che le regole vengono applicate correttamente nella pratica.

• Playground regole: per controlli mirati, utilizza il Playground regole nella console Firebase. Questo strumento ti consente di simulare richieste (letture, scritture, eliminazioni) nel tuo database Cloud Firestore utilizzando le regole di produzione. Puoi specificare lo stato di autenticazione dell'utente, il percorso dei dati e il tipo di operazione per verificare se le regole consentono o negano l'accesso come previsto.

  Nota: quando esegui il deployment delle regole di sicurezza durante il processo di pubblicazione o con l'interfaccia a riga di comando Firebase, le regole definite nella directory del progetto sovrascrivono le regole esistenti nella console Firebase. Pertanto, se scegli di definire o modificare le regole di sicurezza utilizzando la console Firebase, assicurati di aggiornare anche le regole definite nella directory del progetto.

• Test delle unità: per test più completi, puoi scrivere test delle unità per le regole di sicurezza. Il backend di anteprima di Firebase Studio, basato su Firebase Local Emulator Suite, ti consente di eseguire questi test localmente, simulando il comportamento delle regole di produzione. Questo è un modo efficace per verificare la logica delle regole complesse e confermare la copertura per vari scenari. Dopo il deployment, devi verificare che i test delle unità che utilizzano l'emulatore funzionino come previsto e coprano tutti gli scenari.