We're sunsetting Firebase Studio on March 22, 2027. To continue building and deploying new versions of your app, migrate your Firebase Studio projects to Google AI Studio or Google Antigravity before that date. Learn how to migrate.

Any apps already deployed to Firebase will continue to run even after the sunset date. Also, all our core Firebase products (like Firestore, Authentication, App Hosting, etc.) are not impacted by the Firebase Studio sunset.

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

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 del 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 ricercabile.

Prima di pubblicare l'app su Firebase App Hosting, la perfezionerai e la migliorerai.

Altre tecnologie che utilizzerai man mano che procedi con questa guida includono:

Passaggio 1: genera l'app

Accedi al tuo Account Google e apri Firebase Studio.
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 risultati ottimali, fornisci informazioni quanto più specifiche possibile nel prompt. Includi le funzionalità che vuoi, i workflow utente e i requisiti dei dati. Se vuoi, fai clic su Migliora prompt per chiedere a Gemini di perfezionare il prompt iniziale. Tieni presente che i processi di sviluppo più efficaci con l'AI sono iterativi e puoi continuare a perfezionare e aggiungere funzionalità in collaborazione con Gemini. Scopri di più sulla creazione di prompt efficaci.
Se vuoi, carica un'immagine da accompagnare 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 utilizzarla. Le immagini devono avere dimensioni inferiori a 3 MiB.
Fai clic su Crea prototipo con l'AI.

Il App Prototyping agent genera un progetto di app basato sul tuo prompt, restituendo un nome dell'app proposto, le funzionalità richieste, e le linee guida di stile.
Esamina il progetto. Se necessario, apporta alcune modifiche. Ad esempio, puoi modificare il nome dell'app o la combinazione di colori proposta utilizzando una di queste opzioni:
- Fai clic su Personalizza e modifica direttamente il progetto. Apporta le modifiche desiderate e fai clic su Salva.
- Nel campo Descrivi... nel riquadro della chat, aggiungi domande e contesto chiarificatori. Puoi anche caricare altre immagini.
Fai clic su Crea prototipo di questa app.

Importante: Gemini è in grado di generare risultati apparentemente plausibili, ma di fatto errati. e potrebbe rispondere con informazioni imprecise che non rappresentano l'opinione di Google. Verifica tutti gli output di Gemini prima di utilizzarli ed evita di utilizzare in produzione il codice generato non testato. Non inserire nella chat informazioni che consentono l'identificazione personale (PII) o dati utente.
Il App Prototyping agent inizia a codificare l'app.
- Poiché la tua app utilizza l'AI, ti viene chiesto di aggiungere o generare una Gemini API chiave. Se fai clic su Genera automaticamente, il App Prototyping agent esegue il provisioning di un progetto Firebase e di una Gemini API chiave.
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. Memorizza anche la chiave all'interno del tuo Firebase Studio spazio di lavoro 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 Google Cloud console.

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

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

Esamina l'app e interagisci con essa: al termine della generazione del codice, viene visualizzata un'anteprima dell'app. Puoi interagire direttamente con l'anteprima per testarla. Scopri di più in Visualizzare 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, puoi consentire agli utenti di salvare e scaricare le ricette con un prompt come il 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: L'App Prototyping agent può aggiungere Cloud Firestore e Firebase Authentication alla tua app durante la fase di iterazione, non nel progetto dell'app iniziale.
Correggi eventuali errori man mano che si verificano: nella maggior parte dei casi, l'App Prototyping agent ti chiede di correggere eventuali errori che si verificano. Fai clic su Correggi errore per consentire all'agente 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.

Suggerimento: Gemini spiega il suo ragionamento, ma puoi anche chiedergli di spiegare il suo piano prima di eseguirlo.
Testa e itera utilizzando il linguaggio naturale: testa a fondo l'app e collabora con App Prototyping agent per iterare il codice e il 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 di forma, immagine e testo disponibili , insieme a un prompt di testo facoltativo, per descrivere visivamente le modifiche che vuoi che App Prototyping agent apporti.
- Fai clic su Seleziona per selezionare un elemento specifico e inserire le istruzioni per il 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: il App Prototyping agent esegue il provisioning di un progetto Firebase per tuo conto quando:
- Generi automaticamente una chiave API Gemini
- Chiedi di collegare la tua app a un progetto Firebase
- Chiedi assistenza per collegare 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 alla tua area di lavoro, chiedi a App Prototyping agent l'ID progetto che vuoi utilizzare. 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 vedere le loro ricette private e che tutti gli utenti vedano le ricette pubbliche.

Quando chiedi a App Prototyping agent di aggiungere Cloud Firestore, questo scrive ed esegue il deployment delle regole del database Cloud Firestore per tuo conto. Esamina le regole nella Firebase console.
Esegui il debug ed esegui l'iterazione direttamente nel codice: fai clic su Passa al codice per aprire la Code vista, dove puoi vedere tutti i file dell'app e modificare direttamente il codice. Puoi tornare alla modalità Prototyper in qualsiasi momento.

Nella vista Code, puoi anche utilizzare le seguenti funzionalità utili:
- Le funzionalità di debug e reporting integrate di Firebase Studio's per ispezionare, eseguire il debug e controllare l'app.
- Assistenza AI tramite Gemini direttamente nel codice o utilizzando la chat interattiva Gemini (entrambe sono disponibili per impostazione predefinita). La chat interattiva può diagnosticare i problemi, fornire soluzioni ed eseguire strumenti per aiutarti a correggere l'app più rapidamente. Per accedere alla chat, fai clic su sparkGemini nella parte inferiore dell'area di lavoro.
  
  Nota: per impostazione predefinita, le app create con App Prototyping agent utilizzano la chat Prototyper nella vista Code. Per utilizzare Gemini chat interattiva invece, in Gemini fai clic su +, quindi seleziona Nuova chat. Per tornare alla Prototyper chat, fai clic su Chat recenti, quindi scegli Chat Prototyper.
- Accedi a Firebase Local Emulator Suite per visualizzare i dati del database e di autenticazione. Per aprire l'emulatore nell'area di lavoro:
  1. Fai clic su Passa al codice e apri l'estensione Firebase Studio (Ctrl+',Ctrl+' o Cmd+',Cmd+' su macOS).
  2. Scorri fino a Porte backend ed espandila.
  3. Nella colonna Azioni corrispondente a Porta 4000, fai clic Apri in una nuova finestra.
Testa e misura il rendimento della funzionalità di AI generativa: puoi utilizzare l'interfaccia utente per sviluppatori di Genkit per eseguire i flussi AI di Genkit, testare, eseguire il debug, interagire con modelli diversi, perfezionare i prompt e altro ancora.

Per caricare i flussi Genkit nell'interfaccia utente per sviluppatori di Genkit e iniziare a testare:
1. Dal terminale nell'area 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 dell'interfaccia utente per sviluppatori di Genkit. L'interfaccia utente per sviluppatori di Genkit si apre in una nuova finestra con i flussi, i prompt, gli incorporatori e una selezione di modelli diversi disponibili.
Scopri di più sull'interfaccia utente per sviluppatori di Genkit in Strumenti per sviluppatori di Genkit.

(Facoltativo) Passaggio 3: pubblica l'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 un progetto Firebase per te (se non ne è stato già creato uno tramite la generazione automatica di una Gemini API chiave o di altri servizi di backend) e ti guida nel collegamento di un account Cloud Billing.

Per pubblicare l'app:

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

Importante: se non hai generato automaticamente una Gemini API chiave o non hai chiesto all'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.
Nel passaggio Progetto Firebase, App Prototyping agent visualizza il progetto Firebase associato all'area di lavoro. Se non esiste già un progetto Firebase, il App Prototyping agent crea un nuovo progetto per te. Fai clic su Avanti per continuare.
Nel passaggio Collega Cloud Billing account, scegli una delle seguenti opzioni:
- Seleziona l'Cloud Billing account 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. Viene aperta la Google Cloud console, dove puoi creare un nuovo account self-service Cloud Billing. Dopo aver creato l'account, torna a Firebase Studio e seleziona l'account dall'elenco Collega Cloud Billing.
Fai clic su Avanti. Firebase Studio collega l'account di fatturazione al progetto associato alla tua area di lavoro, creato quando hai generato automaticamente una Gemini API chiave 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, il progetto viene automaticamente sottoposto a upgrade al piano tariffario Blaze con pagamento a consumo e l'utilizzo dell' Gemini API e di altri servizi Firebase e Google Cloud viene sottoposto a upgrade al livello a pagamento. Ti verranno addebitati i costi di utilizzo dei servizi a pagamento che superano la quota senza costi aggiuntivi. Scopri di più su Understand App Hosting costi, prezzi di Firebase e Gemini prezzi dell'API Developer.
Fai clic su Configura servizi. Il App Prototyping agent inizia a eseguire il provisioning dei servizi Firebase.
Fai clic su Pubblica adesso. Firebase Studio configura i servizi Firebase e poi avvia l'implementazione di App Hosting. Il completamento dell'operazione può richiedere diversi minuti. Per scoprire di più su cosa succede dietro le quinte, consulta Il processo di compilazione.App Hosting

Suggerimento: se non vuoi pubblicare subito, puoi fare clic su Pubblica più tardi.
Al termine del passaggio di pubblicazione, viene visualizzata la Panoramica dell'app con un URL e insight sull'app basati sull'App Hosting osservabilità. Per utilizzare un dominio personalizzato (ad es. example.com o app.example.com) anziché il dominio generato da Firebase, puoi aggiungere un dominio personalizzato nella Firebase console.

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

(Consigliato) Passaggio 4: testa l'app pubblicata

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

Genera indici per il database Cloud Firestore

Quando esegui il deployment dell'app su Cloud Firestore, gli indici non vengono generati automaticamente. Ciò significa che, dopo la pubblicazione, potrebbe essere necessario generare indici per le query.

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

Per generare gli indici dopo la pubblicazione:

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

Dall'Firebase Studio anteprima: apri la console per gli sviluppatori del browser e individua il messaggio di errore 200 generato da Cloud Firestore
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 crearlo qui:" con un link alla Firebase console.
Segui il link per accedere alla Firebase console e viene visualizzato un indice consigliato.
Fai clic su Salva per accettare l'indice consigliato.
Torna all'app e ricarica la pagina.
Continua a testare tutti i flussi dell'app per aggiungere gli indici dove necessario.

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

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

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

Per visualizzare il database Cloud Firestore in tempo reale, apri la Firebase console 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ù in Cloud Firestore.
Per visualizzare i dati Firebase Authentication in tempo reale, apri la Firebase console e scegli Build > Autenticazione dal menu di navigazione.

Da qui puoi ispezionare la configurazione dell'autenticazione e gli utenti dell'app. Scopri di più in Firebase Authentication.

Testa le regole di Cloud Firestore in produzione

Dopo aver pubblicato l'app, devi testare di nuovo le regole di sicurezza Cloud Firestore nell'ambiente di produzione. In questo modo, puoi assicurarti che i tuoi dati siano 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 in condizioni reali ti aiuta a verificare che le regole vengano applicate correttamente in pratica.
Playground regole: per controlli mirati, utilizza il Playground regole nella console Firebase. Questo strumento ti consente di simulare le richieste (letture, scritture, eliminazioni) al tuo Cloud Firestore database 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'Firebase CLI, le regole definite nella directory del progetto sovrascrivono le regole esistenti nella console Firebase. Pertanto, se scegli di definire o modificare le tue 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 rules. Il backend di anteprima Firebase Studio basato su Firebase Local Emulator Suite ti consente di eseguire questi test in locale, 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.