Questa pagina è stata tradotta dall'API Cloud Translation.

Firebase MCP in Firebase Studio

1. Panoramica

In questo codelab, ti eserciterai a utilizzare l'agente di prototipazione delle app insieme al server Firebase MCP in Firebase Studio per creare un'app web full stack che utilizza Firebase Realtime Database.

GIF animata dell'app finale

Obiettivi didattici

Generare un'app web statica utilizzando l'agente di prototipazione di app
Configurare il server MCP Firebase
Aggiungi Firebase Realtime Database utilizzando Firebase MCP

Che cosa ti serve

Un browser a tua scelta, ad esempio Google Chrome
Un Account Google per la creazione e la gestione del tuo progetto Firebase

2. Genera l'app utilizzando l'agente di prototipazione di app

L'agente Prototipazione app utilizza Gemini in Firebase per creare la tua app. Anche utilizzando prompt identici, i risultati possono variare. Se hai difficoltà, abbiamo fornito un insieme di file che puoi aggiungere al tuo spazio di lavoro per riprendere il lab in diversi checkpoint di questo codelab.

Accedi al tuo Account Google, registrati al programma per sviluppatori Google e apri Firebase Studio.
Nel campo Crea il prototipo di un'app con l'AI, inserisci una descrizione dell'app:
```
An app for a picker wheel that allows custom input.
```
Fai clic su Migliora prompt. Rivedi il prompt migliorato.
Fai clic su Prototipo con l'AI.
Esamina il progetto di app suggerito. Fai clic su Personalizza per modificarlo.
Fai clic su Salva.
Quando il progetto termina di incorporare gli aggiornamenti, fai clic su Prototipo di questa app.
Se il tuo progetto contiene elementi di AI, l'agente ti chiede una chiave Gemini Gemini. Aggiungi la tua chiave API Gemini o fai clic su Genera automaticamente per generare una chiave API Gemini. Se fai clic su Genera automaticamente, Firebase Studio crea un progetto Firebase e genera una chiave API Gemini per te.
L'agente di prototipazione di app utilizza il progetto per creare una prima versione dell'app. Al termine, viene visualizzata l'anteprima dell'app insieme a un'interfaccia di chat di Gemini. Prenditi un momento per esaminare e testare la tua app. Se riscontri errori, fai clic su Correggi errore nella chat per consentire all'agente di correggere i propri errori.

3. Configura Firebase MCP in Firebase Studio

Il server Firebase MCP estende le funzionalità dell'agente di prototipazione delle app fornendo strumenti che l'agente può chiamare per configurare, gestire ed estrarre dati dai servizi Firebase, tra cui Firebase Authentication, Cloud Firestore e Firebase Data Connect. Ecco come configurarlo.

In Firebase Studio, fai clic su Passa al codice per aprire la Vista codice.
Nel terminale (Shift+Ctrl+C), esegui il seguente comando per accedere al tuo account Firebase, seguendo le istruzioni sullo schermo e lasciando tutte le opzioni predefinite:
```
firebase login --no-localhost
```
In Esplora risorse (Ctrl+Shift+E), fai clic con il tasto destro del mouse sulla cartella .idx e seleziona Nuovo file. Assegna al file il nome mcp.json e premi Invio.

Aggiungi le configurazioni del server a .idx/mcp.json.

{
    "mcpServers": {
        "firebase": {
            "command": "npx",
            "args": [
                "-y",
                "firebase-tools@latest",
                "experimental:mcp"
            ]
        }
    }
}

Verifica di essere connesso al server MCP di Firebase. Nel riquadro Output dovresti visualizzare voci di log simili, con "Gemini" selezionato come canale corretto. MCPManager dai log di Gemini

4. Aggiungi Firebase Realtime Database utilizzando Firebase MCP

Obiettivo 1: aggiungi Firebase alla tua app

Passa a Prototyper. Nell'interfaccia di chat, chiedi all'agente di creare un progetto.
```
Create a Firebase project for my app.
```
L'agente chiamerà lo strumento Firebase MCP firebase_create_project.Salta questo passaggio se hai già creato un progetto Firebase utilizzando l'opzione di generazione automatica per ottenere una chiave API Gemini. L'ID progetto dovrebbe comparire accanto al nome dello spazio di lavoro nell'angolo in alto a sinistra dello schermo. In alternativa, chiedi all'agente di elencare i tuoi progetti e annota quello che vuoi utilizzare.
```
List my Firebase projects
```
L'agente chiamerà lo strumento Firebase MCP firebase_list_projects.
Chiedi all'agente di connettersi a questo progetto.
```
Connect my app to my project `spinsync-3y3c6`.
```
Assicurati di visualizzare un file .firebaserc che imposta il progetto attivo. In caso contrario, chiedi all'agente di aggiornare il tuo ambiente Firebase.
```
Update my Firebase environment to use this project.
```
L'agente chiamerà lo strumento Firebase MCP firebase_update_environment . Tuttavia, è possibile che l'agente lo faccia senza chiamare lo strumento.Infine, verifica che il tuo ambiente Firebase abbia il progetto attivo corretto e che tu sia l'utente autenticato.
```
Show me my current Firebase environment.
```
L'agente chiamerà lo strumento Firebase MCP firebase_get_environment.
Chiedi all'agente di creare un'app web nel tuo progetto Firebase.
```
Create a web app in my active Firebase project.
```
L'agente chiamerà lo strumento firebase_create_app e restituirà l'ID app. Se l'agente non riesce a farlo, riprova facendo clic su o segui queste istruzioni per completare il passaggio in Firebase Console.
```
Use the App ID to get the SDK configuration and add to my app.
```
L'agente chiamerà lo strumento firebase_get_sdk_config e aggiornerà il codice con la configurazione di Firebase.Se la chiave API e altre configurazioni vengono visualizzate in src/lib/firebase.ts dopo che l'agente dichiara il completamento dell'attività, chiedigli di spostarle per proteggere la tua app.
```
Secure my code by moving my Firebase config to the `.env` file.
```

Obiettivo 2: aggiungi Firebase Realtime Database

Rimani o passa a Prototyper. Nell'interfaccia di chat, chiedi all'agente di configurare Firebase Realtime Database nel tuo progetto.
```
Set up Firebase Realtime Database in my active project. Give anyone
read and write access.
```
L'agente chiamerà lo strumento Firebase MCP firebase_init e creerà regole di sicurezza in database.rules.json nell'ambito delle modifiche ai file alla fine di questo turno di conversazione.
```
{
    "rules": {
        ".read": true,
        ".write": true
    }
}
```
Qui concedi a tutti l'accesso in lettura e scrittura al tuo database. Al di fuori di questo CodeLab, devi sempre proteggere i tuoi database. Scopri di più su questo argomento nella nostra documentazione.
Passa al codice. Nel terminale (Shift+Ctrl+C), inizializza Firebase Realtime Database.
```
firebase init database
```
Segui le istruzioni sullo schermo e lascia le opzioni predefinite.Poi, implementa le regole di sicurezza per l'istanza del database.
```
firebase deploy --only database
```
Passa a Prototyper. Chiedi all'agente di utilizzare l'istanza di database predefinita per le voci dell'utente.
```
Use my default Realtime Database instance for user entries.
```
L'agente aggiornerà il resto del codice sorgente per connettere l'app all'istanza del database.

Obiettivo 3: prova

Crea alcune nuove voci per la ruota della selezione e guardale apparire nella pagina Firebase Realtime Database nella console Firebase.

Firebase Realtime Database nella console Firebase

5. Conclusione

Complimenti! Hai creato correttamente un'app web full-stack utilizzando l'agente Prototipazione app con Firebase MCP. Prova gli altri strumenti offerti dal server MCP di Firebase ed espandi le funzionalità della tua app.