Questa pagina è stata tradotta dall'API Cloud Translation.

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

Questa guida mostra come utilizzare 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 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 consultabile.

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

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 Prototipa 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, 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.
```
Suggerimento: per ottenere risultati ottimali, fornisci informazioni quanto più specifiche possibili nel prompt. Includi le funzionalità che ti interessano, i flussi di lavoro degli utenti e i requisiti dei dati. (Facoltativo) Fai clic su Migliora prompt per chiedere a Gemini di migliorare il prompt iniziale. Tieni inoltre 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ù su come creare prompt efficaci.
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 utilizzarla. Le immagini devono avere dimensioni inferiori a 3 MiB.
Fai clic su Prototipo con l'AI.

L'agente di prototipazione di app 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.
Rivedi 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 progetto 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.
Fai clic su Prototipa questa app.

Importante:Gemini può generare output che sembrano plausibili, ma sono oggettivamente errati. Potrebbe rispondere con informazioni imprecise che non rappresentano l'opinione di Google. Verifica tutti gli output 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.
L'agente di prototipazione di app 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.
Importante: se scegli Genera automaticamente, App Prototyping agent crea un progetto Firebase per tuo conto con un prefisso corrispondente al nome del tuo spazio di lavoro Firebase Studio e crea una nuova chiave Gemini API nel progetto. Memorizza anche la chiave all'interno del tuo workspace 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: esegui test, perfeziona, esegui il debug e itera

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.
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, dai agli utenti la possibilità 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'agente Prototipazione app 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 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.

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 a fondo la tua app e lavora con App Prototyping agent per eseguire l'iterazione del codice e del progetto finché non sei soddisfatto.

Mentre ti trovi a Prototyper view, you can also use the following features:
- Fai clic su 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 cambi.
- Fai clic su 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 Condividi link di anteprima per condividere la tua app pubblicamente e temporaneamente utilizzando Firebase Studio anteprime pubbliche.
Crea un progetto Firebase:l'agente Prototipazione app esegue il provisioning di un progetto Firebase per tuo conto quando:
- Generare automaticamente una chiave API Gemini
- Chiedere di connettere la tua app a un progetto Firebase
- Chiedi aiuto per connettere la tua app ai servizi Firebase, ad esempio Cloud Firestore o Firebase Authentication
- Fai clic sul pulsante Pubblica e configura Firebase App Hosting
Per modificare il progetto Firebase collegato al tuo spazio 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 mostri diversi alimenti per testare la capacità dell'app di identificare gli ingredienti e generare e salvare ricette.

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

Quando chiedi a App Prototyping agent di aggiungere Cloud Firestore, scrive e implementa le regole del database Cloud Firestore per te. Esamina le regole nella console Firebase.
Esegui il debug e le iterazioni 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 a Prototyper mode at any time.

Nella visualizzazione Code, puoi anche utilizzare le seguenti funzionalità utili:
- 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 in linea all'interno del codice o tramite la Geminichat interattiva (entrambe sono disponibili per impostazione predefinita). La chat interattiva può diagnosticare i problemi, fornire soluzioni ed eseguire strumenti per aiutarti a risolvere i problemi della tua app più rapidamente. Per accedere alla chat, fai clic su sparkGemini in fondo all'area di lavoro.
  
  Nota: Le app create con App Prototyping agent utilizzano per impostazione predefinita Prototyper chat in Code view. To use Gemini interactive chat. In Gemini, fai clic su + e poi seleziona Nuova chat. Per tornare a Prototyper chat, click history Recent chats, and then choose Prototyper chat.
- Accedi a Firebase Local Emulator Suite per visualizzare i dati del database e di autenticazione. Per aprire l'emulatore nel tuo spazio 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 di backend ed espandila.
  3. Nella colonna Azioni corrispondente a Porta 4000, fai clic su Apri in una nuova finestra.
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'interfaccia utente per sviluppatori di Genkit si apre in una nuova finestra con i flussi, i prompt, gli incorporatori e una selezione di diversi modelli disponibili.
Scopri di più sulla UI 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 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 o altri servizi di backend) e ti guida nel collegamento di un account Cloud Billing.

Per pubblicare la tua app:

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

Importante: se non hai generato automaticamente una Gemini API chiave o richiesto 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.
Nel passaggio Progetto Firebase, App Prototyping agent mostra il progetto Firebase associato allo spazio di lavoro. Se non esiste già un progetto Firebase, App Prototyping agent ne crea uno nuovo per te. Fai clic su Avanti per continuare.
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.
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.

Importante: Firebase App Hosting richiede un account Cloud Billing. Quando colleghi un account di fatturazione a un progetto Firebase, il progetto viene automaticamente sottoposto all'upgrade al piano tariffario Blaze con pagamento a consumo e l'utilizzo di Gemini API e di altri servizi Firebase e Google Cloud viene sottoposto all'upgrade al livello a pagamento. Ti verrà addebitato l'utilizzo dei servizi a pagamento che eccedono la quota senza costi aggiuntivi. Scopri di più su Informazioni sui costi di App Hosting, prezzi di Firebase e Geminiprezzi delle API per sviluppatori.
Fai clic su Configura servizi. L'agente di prototipazione dell'app inizia il provisioning dei servizi Firebase.
Fai clic su Pubblica ora. 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 La App Hosting procedura di build.

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

(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.

Visualizzare 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 database Cloud Firestore live, apri la console Firebase e scegli Build > Firestore Database 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 live di Firebase Authentication, apri la console Firebase e scegli Build > Autenticazione dal menu di navigazione.

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

Testare le regole di Cloud Firestore in produzione

Dopo aver pubblicato l'app, devi testare di nuovo le regole di sicurezza di Cloud Firestore nell'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 è stato eseguito il deployment, eseguendo operazioni che attivano vari pattern di accesso ai dati (letture, scritture, eliminazioni) per diversi ruoli o stati utente. Questi test sul campo consentono di verificare che le regole vengano applicate correttamente nella pratica.
Playground regole: per i 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 la procedura di pubblicazione o con la CLI 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 tue regole di sicurezza. Il backend di anteprima Firebase Studio basato su Firebase Local Emulator Suite ti consente di eseguire questi test localmente, simulando il comportamento delle regole di produzione. Si tratta di un modo efficace per verificare la logica complessa delle regole e confermare la copertura per vari scenari. Dopo il deployment, devi verificare che i test unitari che utilizzano l'emulatore funzionino come previsto e coprano tutti gli scenari.