Cette page a été traduite par l'API Cloud Translation.

Firebase MCP dans Firebase Studio

1. Présentation

Dans cet atelier de programmation, vous allez vous entraîner à utiliser l'agent de prototypage d'applications avec le serveur MCP Firebase dans Firebase Studio pour créer une application Web full stack qui utilise Firestore.

GIF animé de l'application finale

Points abordés

Générer une application Web statique à l'aide de l'agent de prototypage d'applications
Configurer le serveur MCP Firebase
Ajouter Firestore à l'aide de Firebase MCP

Prérequis

Un navigateur de votre choix, tel que Google Chrome
Un compte Google pour créer et gérer votre projet Firebase

2. Générer votre application à l'aide de l'agent de prototypage d'applications

L'agent de prototypage d'applications utilise Gemini dans Firebase pour créer votre application. Même en utilisant des requêtes identiques, les résultats peuvent varier. Si vous êtes bloqué, nous vous fournissons un ensemble de fichiers que vous pouvez ajouter à votre espace de travail pour reprendre l'atelier de programmation à plusieurs points de contrôle.

Connectez-vous à votre compte Google, rejoignez le programme Google Developers et ouvrez Firebase Studio.
Dans le champ Prototyper une application avec l'IA, saisissez une description de l'application :
```
An app for a picker wheel that allows custom input.
```
Cliquez sur Améliorer la requête. Examinez la requête améliorée.
Cliquez sur Prototyper avec l'IA.
Examinez le plan d'application suggéré. Cliquez sur Personnaliser pour le modifier.
Cliquez sur Enregistrer.
Une fois que le plan a intégré vos modifications, cliquez sur Prototyper cette application.
Si votre plan contient des éléments d'IA, l'agent vous invite à fournir une clé Gemini. Ajoutez votre propre clé API Gemini ou cliquez sur Générer automatiquement pour en générer une. Si vous cliquez sur Générer automatiquement, Firebase Studio crée un projet Firebase et génère une clé API Gemini pour vous.
L'agent de prototypage d'applications utilise le plan pour créer une première version de votre application. Une fois cette version créée, l'aperçu de votre application s'affiche à côté d'une interface de chat Gemini. Prenez le temps d'examiner et de tester votre application. Si vous rencontrez des erreurs, cliquez sur Corriger l'erreur dans le chat pour permettre à l'agent de corriger ses propres erreurs.

3. Configurer Firebase MCP dans Firebase Studio

Le serveur Firebase MCP étend les capacités de l'agent de prototypage d'applications en fournissant des outils que l'agent peut appeler pour configurer, gérer et extraire des données des services Firebase, y compris Firebase Authentication, Cloud Firestore et Firebase Data Connect. Voici comment la configurer.

Dans Firebase Studio, cliquez sur Passer à la vue Code pour ouvrir la vue Code.
Dans le terminal (Shift+Ctrl+C), exécutez la commande suivante pour vous connecter à votre compte Firebase, en suivant les instructions à l'écran et en laissant toutes les options par défaut :
```
firebase login --no-localhost
```
Dans l'explorateur de fichiers (Ctrl+Shift+E), effectuez un clic droit sur le dossier .idx, puis sélectionnez Nouveau fichier. Nommez le fichier mcp.json, puis appuyez sur Entrée.

Ajoutez les configurations du serveur à .idx/mcp.json.

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

Vérifiez que vous êtes connecté au serveur MCP Firebase. Des entrées de journal semblables devraient s'afficher dans le panneau "Sortie", avec "Gemini" sélectionné comme canal approprié. Journaux MCPManager de Gemini

4. Ajouter Firestore à l'aide de Firebase MCP

Objectif 1 : Ajouter Firebase à votre application

Passez à Prototyper. Dans l'interface de chat, demandez à l'agent de créer un projet Firebase.
```
Create a Firebase project.
```
Ignorez cette étape si vous avez déjà créé un projet Firebase en utilisant l'option de génération automatique pour obtenir une clé API Gemini. L'ID de votre projet doit s'afficher à côté du nom de votre espace de travail, en haut à gauche de l'écran. Vous pouvez également demander à l'agent de lister vos projets et noter celui que vous souhaitez utiliser.
```
List my Firebase projects.
```
L'agent doit appeler l'outil Firebase MCP firebase_list_projects.
Demandez à l'agent d'utiliser votre projet Firebase pour votre développement local.
```
Use `spinsync-3y3c6` as my Firebase project in my local environment.
```
Assurez-vous de voir un fichier .firebaserc qui définit votre projet Firebase par défaut. Ce fichier indique à la CLI Firebase le projet Firebase à utiliser. Si vous ne voyez pas ce fichier, demandez-le à nouveau.
Demandez à l'agent de créer une application Web dans votre projet Firebase.
```
Create a web app in my Firebase project.
```
L'agent devrait appeler l'outil firebase_create_app. Si l'agent ne le fait pas, réessayez ou suivez ces instructions pour effectuer l'étape dans la console Firebase.L'agent peut ensuite appeler l'outil firebase_get_sdk_config et créer les fichiers nécessaires pour connecter votre projet à votre application Web Firebase. Si ce n'est pas le cas, demandez-lui de le faire.
```
Add my Firebase SDK configuration to my app.
```
L'agent place souvent votre clé API et d'autres configurations directement dans src/lib/firebase.ts. Demandez-lui de les déplacer hors du code de votre application pour la sécuriser.
```
Secure my code by moving my Firebase config to my `.env` file.
```

Objectif 2 : Ajouter Firestore

Passer au code Dans l'interface de chat, demandez à l'agent d'utiliser Firestore dans votre application.
```
Use Firestore for user entries. Give anyone read and write access.
```
L'agent devrait mettre à jour votre code source pour utiliser Firestore au lieu du stockage local pour les entrées utilisateur, et créer des règles de sécurité Firestore. Notez qu'il peut appeler l'outil MCP Firebase firebase_init ou vous inviter à exécuter la commande firebase init dans le terminal pour initialiser Firestore. Dans tous les cas, assurez-vous de voir le fichier firestore.rules avec le contenu suivant avant de continuer.
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
```
Ici, vous accordez à tous les utilisateurs un accès en lecture et en écriture à votre base de données. En dehors de cet atelier de programmation, vous devez toujours sécuriser vos bases de données. Pour en savoir plus sur ce sujet, consultez notre documentation.
Dans le terminal (Shift+Ctrl+C), initialisez Firestore si l'agent ne vous y a pas invité auparavant.
```
firebase init firestore
```
Suivez les instructions à l'écran et conservez les options par défaut. Ne remplacez pas les règles de sécurité de l'étape précédente, puis déployez les règles de sécurité pour votre instance de base de données.
```
firebase deploy --only firestore
```
Cela provisionnera une instance de base de données Firestore pour vous.

Objectif 3 : Testez-le

Rechargez votre application, créez et supprimez des entrées sur votre sélecteur, puis observez ces modifications sur la page Firestore de la console Firebase.

Application dans Studio et la console

5. Conclusion

Félicitations ! Vous avez créé une application Web full stack à l'aide de l'agent de prototypage d'applications avec Firebase MCP. N'hésitez pas à essayer d'autres outils proposés par le serveur MCP Firebase et à étendre les fonctionnalités de votre application.