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

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 Firestore 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 Firestore utilizzando Firebase MCP

Obiettivo 1: aggiungi Firebase alla tua app

Passa a Prototyper. Nell'interfaccia di chat, chiedi all'agente di creare un progetto Firebase.
```
Create a Firebase project.
```
Ignora 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 utilizzare il tuo progetto Firebase per lo sviluppo locale.
```
Use `spinsync-3y3c6` as my Firebase project in my local environment.
```
Assicurati di visualizzare un file .firebaserc che imposta il progetto Firebase predefinito. Questo file indica all'interfaccia a riga di comando di Firebase quale progetto Firebase utilizzare. Se non vedi questo file, chiedilo di nuovo in modo specifico.
Chiedi all'agente di creare un'app web nel tuo progetto Firebase.
```
Create a web app in my Firebase project.
```
L'agente chiamerà lo strumento firebase_create_app. Se l'agente non riesce a farlo, riprova o segui queste istruzioni per completare il passaggio nella console Firebase.L'agente potrebbe chiamare lo strumento firebase_get_sdk_config e creare i file necessari per connettere il progetto all'app web Firebase. In caso contrario, chiedigli di farlo.
```
Add my Firebase SDK configuration to my app.
```
L'agente spesso inserisce direttamente la chiave API e altre configurazioni in src/lib/firebase.ts. Chiedi di spostarli dal codice dell'applicazione per mantenere sicura la tua app.
```
Secure my code by moving my Firebase config to my `.env` file.
```

Obiettivo 2: aggiungi Firestore

Passa al codice. Nell'interfaccia di chat, chiedi all'agente di utilizzare Firestore nella tua app.
```
Use Firestore for user entries. Give anyone read and write access.
```
L'agente aggiornerà il codice sorgente in modo che utilizzi Firestore anziché l'archiviazione locale per le voci degli utenti e creerà regole di sicurezza Firestore. Tieni presente che potrebbe chiamare lo strumento Firebase MCP firebase_init o chiederti di eseguire il comando firebase init nel terminale per inizializzare Firestore. In ogni caso, prima di continuare, assicurati di visualizzare il file firestore.rules con i seguenti contenuti.
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if 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.
Nel terminale (Shift+Ctrl+C), inizializza Firestore se l'agente non ti ha chiesto di farlo prima.
```
firebase init firestore
```
Segui le istruzioni sullo schermo e lascia le opzioni predefinite. Non sovrascrivere le regole di sicurezza del passaggio precedente, poi implementa le regole di sicurezza per l'istanza del database.
```
firebase deploy --only firestore
```
Verrà eseguito il provisioning di un'istanza del database Firestore.

Obiettivo 3: prova

Ricarica l'app, crea ed elimina voci nella ruota di selezione e guarda questi aggiornamenti nella pagina Firestore della console Firebase.

App in Studio e nella console

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.