Développer, publier et surveiller une application Web full stack avec l'agent de prototypage d'applications

Aperçu Firebase Studio est en version Preview, ce qui signifie que le produit n'est soumis à aucun contrat de niveau de service ni à aucune règle d'abandon, et qu'il peut faire l'objet de modifications susceptibles d'affecter la compatibilité ascendante.

Ce guide vous explique comment utiliser le App Prototyping agent pour développer et publier rapidement une application Full Stack à l'aide de Gemini. Vous utiliserez une requête en langage naturel pour générer une application Next.js qui identifie les aliments à partir d'une image ou d'une caméra intégrée au navigateur fournie par un utilisateur connecté, et qui génère une recette contenant les ingrédients identifiés. Les utilisateurs peuvent ensuite choisir de stocker la recette dans une base de données interrogeable.

Vous affinerez et améliorerez ensuite l'application avant de la publier sur Firebase App Hosting.

Important : La persistance des données avec Cloud Firestore et Firebase Authentication est déployée progressivement et peut ne pas être universellement disponible.

Si la persistance des données n'est pas encore disponible dans votre espace de travail, Gemini peut utiliser le stockage local du navigateur et des données d'authentification simulées si vous demandez une base de données et/ou une authentification dans votre plan. Vous pouvez toujours utiliser des requêtes supplémentaires ou la Code vue pour implémenter la persistance des données.

Voici d'autres technologies que vous utiliserez dans ce guide :

• Un espace de travail Firebase Studio
• Un projet Firebase
• Firebase App Hosting
• Cloud Firestore
• Firebase Authentication
• Firebase App Check

Important : Le App Prototyping agent permet de créer des applications avec le framework Next.js. Pour utiliser l'assistance IA avec d'autres frameworks dans Firebase Studio, consultez Essayer Gemini avec Firebase Studio.

Étape 1 : Générer votre application

1. Connectez-vous à votre compte Google et ouvrez Firebase Studio.

2. Dans le champ Prototype an app with AI (Prototyper une application avec l'IA), saisissez la requête suivante, qui créera une application de recettes basée sur des images utilisant la caméra du navigateur et l'IA générative.

   Par exemple, vous pouvez saisir une requête comme celle-ci pour créer une application de génération de recettes :

   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.
   

   Remarque : Pour obtenir les meilleurs résultats, soyez aussi précis que possible dans votre requête. Incluez les fonctionnalités souhaitées, les workflows utilisateur et les exigences en matière de données. Si vous le souhaitez, cliquez sur Improve prompt (Améliorer la requête) pour demander à Gemini à d'affiner votre requête initiale. Sachez également que les processus de développement les plus efficaces avec l'IA sont itératifs et que vous pouvez continuer à affiner et à ajouter des fonctionnalités en collaboration avec Gemini. En savoir plus sur la création de requêtes efficaces.

3. Si vous le souhaitez, importez une image pour accompagner votre requête. Par exemple, vous pouvez importer une image contenant le schéma de couleurs que vous souhaitez utiliser pour votre application et demander à Firebase Studio de l'utiliser. Les images doivent peser moins de 3 Mio.

4. Cliquez sur Prototype with AI (Prototyper avec l'IA).

   Le App Prototyping agent génère un plan d'application en fonction de votre requête, en renvoyant un nom d'application proposé, les fonctionnalités requises, et les consignes de style.

5. Examinez le plan. Si nécessaire, apportez quelques modifications. Par exemple, vous pouvez modifier le nom d'application ou le schéma de couleurs proposé à l'aide de l'une des options suivantes :

   • Cliquez sur Customize (Personnaliser) et modifiez directement le plan. Apportez les modifications nécessaires, puis cliquez sur Save (Enregistrer).

   • Dans le champ Describe... (Décrivez...) du volet de chat, ajoutez des questions et du contexte pour clarifier. Vous pouvez également importer des images supplémentaires.

6. Cliquez sur Prototype this app (Prototyper cette application).

   Important : Gemini peut générer des résultats qui semblent plausibles, mais qui sont en fait incorrects. Il peut répondre avec des informations inexactes qui ne représentent pas l'opinion de Google. Validez tous les résultats de Gemini avant de les utiliser et n'utilisez pas de code généré non testé en production. Ne saisissez pas d'informations permettant d'identifier personnellement l'utilisateur ni de données utilisateur dans le chat.

7. Le App Prototyping agent commence à coder votre application.

   • Étant donné que votre application utilise l'IA, vous êtes invité à ajouter ou à générer une Gemini API clé. Si vous cliquez sur "Auto-generate" (Générer automatiquement), le App Prototyping agent provisionne un projet Firebase et une Gemini API clé pour vous.
   Important : Si vous choisissez Auto-generate (Générer automatiquement), le App Prototyping agent crée un projet Firebase en votre nom avec un préfixe correspondant au nom de votre espace de travail Firebase Studio et crée une nouvelle clé Gemini API dans le projet. Il stocke également la clé dans votre Firebase Studio espace de travail dans un .env fichier. Pour accéder à votre nouveau projet à tout moment, cliquez sur son nom en haut de la page. Pour accéder à votre clé Gemini API afin de la copier ou de la supprimer ultérieurement, utilisez la console Google Cloud.

Étape 2 : Tester, affiner, déboguer et itérer

Une fois l'application initiale générée, vous pouvez la tester, l'affiner, la déboguer et l'itérer.

• Examiner votre application et interagir avec elle : une fois la génération de code terminée, un aperçu de votre application s'affiche. Vous pouvez interagir directement avec l'aperçu pour le tester. En savoir plus sur l'aperçu de votre application.

• Ajouter Cloud Firestore et Firebase Authentication: pendant la phase d'itération, vous pouvez demander à App Prototyping agent d'ajouter l'authentification des utilisateurs et une base de données à l'aide de Cloud Firestore et Firebase Authentication. Par exemple, vous pouvez permettre aux utilisateurs d'enregistrer et de télécharger des recettes avec une requête comme celle-ci :

  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.
  

  Remarque : L'App Prototyping agent peut ajouter Cloud Firestore et Firebase Authentication à votre application pendant la phase d'itération, et non dans le plan d'application initial.

• Corriger les erreurs au fur et à mesure : dans la plupart des cas, le App Prototyping agent vous invite à corriger les erreurs qui surviennent. Cliquez sur Fix Error (Corriger l'erreur) pour lui permettre de tenter une correction.

  Si vous recevez des erreurs que vous n'êtes pas invité à corriger automatiquement, copiez l'erreur et tout contexte pertinent (par exemple, "Pouvez-vous corriger cette erreur dans mon code d'initialisation Firebase ?") dans la fenêtre de chat et envoyez-le à Gemini.

  Remarque : Gemini explique son raisonnement, mais vous pouvez également lui demander d' expliquer son plan avant de l’exécuter.

• Tester et itérer en langage naturel : testez votre application de manière approfondie et collaborez avec le App Prototyping agent pour itérer sur le code et le plan jusqu'à ce que vous soyez satisfait.

  Dans la vue Prototyper, vous pouvez également utiliser les fonctionnalités suivantes :

  • Cliquez sur Annotate (Annoter) pour dessiner directement dans la fenêtre "Preview" (Aperçu). Utilisez les outils de forme, d'image et de texte disponibles , ainsi qu'une requête textuelle facultative, pour décrire visuellement ce que vous souhaitez que le App Prototyping agent modifie.

  • Cliquez sur Select pour sélectionner un élément spécifique et saisir des instructions pour the App Prototyping agent. Cela vous permet de cibler rapidement une icône, un bouton, un texte ou un autre élément spécifique. Lorsque vous cliquez sur une image, vous avez également la possibilité de rechercher et de sélectionner une image d'archive sur Unsplash.

  Si vous le souhaitez, vous pouvez cliquer sur Share preview link (Partager le lien d'aperçu) pour partager votre application publiquement et temporairement à l'aide des Firebase Studio aperçus publics.

• Créer un projet Firebase : le App Prototyping agent provisionne un projet Firebase en votre nom lorsque vous :

  • générez automatiquement une clé API Gemini ;
  • demandez à associer votre application à un projet Firebase ;
  • demandez de l'aide pour associer votre application à des services Firebase, tels que Cloud Firestore ou Firebase Authentication
  • cliquez sur le bouton Publish (Publier) et configurez Firebase App Hosting.

  Pour modifier le projet Firebase associé à votre espace de travail, demandez au App Prototyping agent l'ID de projet que vous souhaitez utiliser à la place. Par exemple, "Passer au projet Firebase avec l'ID <your-project-id>."

• Tester l'application et vérifier les règles de la base de données Cloud Firestore: dans le volet d'aperçu de l'application , importez une image montrant différents aliments pour tester la capacité de votre application à identifier les ingrédients, à générer et à enregistrer des recettes.

  Connectez-vous en tant qu'utilisateurs différents et générez des recettes : assurez-vous que les utilisateurs authentifiés peuvent voir leurs recettes privées et que tous les utilisateurs voient les recettes publiques.

  Lorsque vous demandez au App Prototyping agent d'ajouter Cloud Firestore, il écrit et déploie les règles de la base de données Cloud Firestore pour vous. Examinez les règles dans la Firebase console.

• Déboguer et itérer directement dans le code : cliquez sur Switch to Code (Passer au code) pour ouvrir la vue Code, où vous pouvez voir tous les fichiers de votre application et modifier directement votre code. Vous pouvez revenir au mode Prototyper à tout moment.

  Dans la vue Code, vous pouvez également utiliser les fonctionnalités utiles suivantes :

  • Firebase Studio Les fonctionnalités de débogage et de création de rapports intégrées à pour inspecter, déboguer et auditer votre application.

  • L'assistance IA à l'aide de Gemini soit de manière intégrée dans votre code, soit à l'aide du chat interactif Gemini (les deux sont disponibles par défaut). Le chat interactif peut diagnostiquer les problèmes, fournir des solutions et exécuter des outils pour vous aider à corriger votre application plus rapidement. Pour accéder au chat, cliquez sur sparkGemini en bas de l'espace de travail.

    Remarque Les applications créées avec App Prototyping agent utilisent par défaut le chat Prototyper dans la vue Code. Pour utiliser Gemini chat interactif à la place, sous Gemini, cliquez sur +, puis sélectionnez New Chat (Nouveau chat). Pour revenir au Prototyper chat, cliquez sur history**Recent chats** (historique**Chats récents**), puis choisissez Prototyper chat (Chat Prototyper).

  • Accédez à la Firebase Local Emulator Suite pour afficher les données de la base de données et d'authentification. Pour ouvrir l'émulateur dans votre espace de travail :

    1. Cliquez sur Passer au code et ouvrez l'extension Firebase Studio (Ctrl+',Ctrl+', ou Cmd+',Cmd+' sous macOS).

    2. Faites défiler la page jusqu'à Backend ports (Ports de backend) et développez-la.

    3. Dans la colonne Actions correspondant à Port 4000, cliquez sur Open in new window (Ouvrir dans une nouvelle fenêtre).

• Tester et mesurer les performances de votre fonctionnalité d'IA générative : vous pouvez utiliser l'interface utilisateur pour les développeurs Genkit afin d'exécuter vos flux d'IA Genkit, de tester, de déboguer, d'interagir avec différents modèles, d'affiner vos requêtes, etc.

  Pour charger vos flux Genkit dans l'interface utilisateur pour les développeurs Genkit et commencer les tests :

  1. Dans le terminal de votre Firebase Studio espace de travail, exécutez la commande suivante pour obtenir votre Gemini API clé et démarrer le serveur Genkit :

      npm run genkit:watch
     

  2. Cliquez sur le lien de l'interface utilisateur pour les développeurs Genkit. L'interface utilisateur pour les développeurs Genkit s'ouvre dans une nouvelle fenêtre avec vos flux, vos requêtes, vos intégrateurs et une sélection de différents modèles disponibles.

  Pour en savoir plus sur l'interface utilisateur pour les développeurs Genkit, consultez Outils pour les développeurs Genkit.

(Facultatif) Étape 3 : Publier votre application avec App Hosting

Une fois que vous avez testé votre application et que vous en êtes satisfait dans votre espace de travail, vous pouvez la publier sur le Web avec Firebase App Hosting.

Important : Firebase App Hosting nécessite un compte Cloud Billing. Lorsque vous associez un compte de facturation à un projet Firebase, votre projet est automatiquement mis à niveau vers le plan de tarification Blaze avec paiement à l'usage et votre Gemini API et utilisation d'autres services Firebase et Google Cloud sont mis à niveau vers le niveau payant. L'utilisation des services payants qui dépasse le quota sans frais vous sera facturée. Pour en savoir plus, consultez Comprendre App Hosting les coûts, la tarification Firebase, et Gemini la tarification de l'API Developer.

Lorsque vous configurez App Hosting, Firebase Studio crée un projet Firebase pour vous (si aucun n'a déjà été créé en générant automatiquement une clé Gemini API ou d'autres services de backend) et vous guide pour associer un compte Cloud Billing.

Pour publier votre application :

1. Cliquez sur Publish (Publier) pour configurer votre projet Firebase et publier votre application. Le volet Publish your app (Publier votre application) s'affiche.

   Important : Si vous n'avez pas généré automatiquement de Gemini API clé ni demandé à App Prototyping agent de créer un projet Firebase, Firebase Studio provisionne un projet Firebase en votre nom lorsque vous cliquez sur Publish (Publier). Vous pouvez accéder au projet Firebase en cliquant sur son nom en haut de la page.

2. À l'étape Firebase project (Projet Firebase), le App Prototyping agent affiche le projet Firebase associé à l'espace de travail. Si aucun projet Firebase n'existe déjà, le App Prototyping agent en crée un pour vous. Cliquez sur Next (Suivant) pour continuer.

3. À l'étape Link Cloud Billing account (Associer un compte), choisissez l'une des options suivantes :

   • Sélectionnez le compte Cloud Billing que vous souhaitez associer à votre projet Firebase.

   • Si vous ne possédez pas de compte Cloud Billing ou si vous souhaitez en créer un, cliquez sur Create a Cloud Billing account (Créer un compte Cloud Billing). La console s'ouvre, où vous pouvez créer un compte en libre-service Cloud Billing.Google Cloud Une fois le compte créé, revenez à Firebase Studio et sélectionnez le compte dans la liste Link Cloud Billing.

4. Cliquez sur Next (Suivant). Firebase Studio associe le compte de facturation au projet associé à votre espace de travail, créé lorsque vous avez généré automatiquement une Gemini API clé ou lorsque vous avez cliqué sur Publish (Publier).

   Important : Firebase App Hosting nécessite un compte Cloud Billing. Lorsque vous associez un compte de facturation à un projet Firebase, votre projet est automatiquement mis à niveau vers le plan de tarification Blaze avec paiement à l'usage et votre Gemini API et utilisation d'autres services Firebase et Google Cloud sont mis à niveau vers le niveau payant. L'utilisation des services payants qui dépasse le quota sans frais vous sera facturée. Pour en savoir plus, consultez Comprendre App Hosting les coûts, la tarification Firebase et Gemini la tarification de l'API Developer.

5. Cliquez sur Set up services (Configurer les services). Le App Prototyping agent commence à provisionner les services Firebase.

6. Cliquez sur Publish now (Publier maintenant). Firebase Studio configure les services Firebase puis lance le déploiement App Hosting. Cette opération peut prendre plusieurs minutes. Pour en savoir plus sur ce qui se passe en arrière-plan, consultez Le processus de compilation.App Hosting

   Remarque : Si vous ne souhaitez pas publier maintenant, vous pouvez cliquer sur Publish later (Publier plus tard).

7. Une fois l'étape de publication terminée, la App overview (Présentation de l'application) s'affiche avec une URL et des insights sur l'application fournis par App Hosting observabilité. Pour utiliser un domaine personnalisé (tel que example.com ou app.example.com) au lieu du domaine généré par Firebase, vous pouvez ajouter un domaine personnalisé dans la console Firebase.

Remarque : Si vous recevez des erreurs lors de la publication, consultez J’ai reçu une erreur « Échec de la publication de l’application » après la publication pour savoir comment trouver et corriger les erreurs de publication.

Pour en savoir plus sur App Hosting, consultez Comprendre App Hosting et son fonctionnement.

Étape 4 (recommandée) : Tester votre application publiée

Une fois la publication terminée et votre application déployée sur Firebase, Cloud Firestore et Firebase Authentication sont prêts à être testés en production.

Générer des index pour votre Cloud Firestore base de données

Lorsque vous déployez votre application sur Cloud Firestore, les index ne sont pas générés automatiquement. Cela signifie qu'après la publication, vous devrez peut-être générer des index pour vos requêtes.

Vous pouvez voir cela apparaître dans des messages d'erreur ou dans la console pour les développeurs de votre navigateur .

Pour générer des index après la publication :

1. À partir d'une application publiée : dans le volet App overview (Présentation de l'application) (cliquez sur Publish (Publier) s'il n'est pas visible), recherchez et cliquez sur le lien Visit your app (Accéder à votre application).

   À partir de l'Firebase Studio aperçu : ouvrez la console pour les développeurs de votre navigateur et recherchez le message d'erreur 200 généré par Cloud Firestore.

2. Testez tous les flux de votre application. Une erreur peut s'afficher, par exemple : "Error loading recipes. The query requires an index. You can create it here:" with a link to the Firebase console.

3. La requête nécessite un index.Firebase

4. Cliquez sur Enregistrer pour accepter l'index recommandé.

5. Suivez le lien pour accéder à la console Firebase. Un index recommandé s'affiche.

6. Cliquez sur **Save** (Enregistrer) pour accepter l'index recommandé.

Astuce : Vous pouvez demander à Gemini de générer vos index pour vous, mais assurez-vous de vérifier attentivement le résultat.

Continuez à tester tous les flux de votre application pour ajouter des index si nécessaire.Cloud Firestore

Afficher les données Cloud Firestore et Firebase Authentication dans la console Firebase

Vous pouvez afficher les données en direct de votre application dans la console Firebase après la publication.

• Pour afficher votre base de données Cloud Firestore en direct, ouvrez la console Firebase et choisissez Build > Firestore Database dans le menu de navigation.

  Vous pouvez afficher les données en direct de votre application dans la console Firebase après la publication. Pour afficher votre base de données Cloud Firestore en direct, ouvrez la console Firebase et sélectionnez **Build** > **Firestore Database** (Créer > Base de données Firestore) dans le menu de navigation. Cloud Firestore.

• Pour afficher vos données Firebase Authentication en temps réel, ouvrez la console Firebase et choisissez Build > Authentication dans le menu de navigation.

  Pour en savoir plus, consultez Cloud Firestore. Pour afficher vos données Firebase Authentication en direct, ouvrez la console Firebase et sélectionnez **Build** > **Authentication** (Créer > Authentification) dans le menu de navigation.

Vous pouvez alors inspecter votre configuration d'authentification et les utilisateurs de votre application.

Après avoir publié votre application, vous devriez tester vos règles de sécurité Cloud Firestore à nouveau, par rapport à votre environnement de production. Tester les règles Cloud Firestore en production

Après avoir publié votre application, vous devez tester à nouveau vos règles de sécurité Cloud Firestore dans votre environnement de production.

• Test d'application : Interagissez avec votre application déployée, en effectuant des opérations qui déclenchent divers modèles d'accès aux données (lectures, écritures, suppressions) pour différents rôles ou états d'utilisateur. Vous pouvez tester vos règles à l'aide de toutes les méthodes suivantes :

• Test d'application : interagissez avec votre application déployée en effectuant des opérations qui déclenchent différents modèles d'accès aux données (lectures, écritures, suppressions) pour différents rôles ou états d'utilisateur.Firebase Ces tests en conditions réelles permettent de vérifier que vos règles sont correctement appliquées dans la pratique.Cloud Firestore Vous pouvez spécifier l' état d'authentification de l'utilisateur, le chemin d'accès aux données et le type d' opération pour voir si vos règles autorisent ou refusent l'accès comme prévu.

  Remarque : Lorsque vous déployez des règles de sécurité pendant le processus de publication ou avec l' Firebase CLI, les règles définies dans le répertoire de votre projet remplacent les règles existantes dans la console Firebase. Ainsi, si vous choisissez de définir ou de modifier vos règles de sécurité à l'aide de la console Firebase, assurez-vous de également mettre à jour les règles définies dans le répertoire de votre projet.

• Tests unitaires : Pour des tests plus complets, vous pouvez écrire des tests unitaires pour vos règles de sécurité rules. Le backend de prévisualisation Firebase Studio optimisé par Firebase Local Emulator Suite vous permet d'exécuter ces tests en local, simulant le comportement de vos règles de production. **Tests unitaires** : pour des tests plus complets, vous pouvez écrire des tests unitaires pour vos règles de sécurité. This is a robust way to verify complex rule logic and confirm coverage for various scenarios. Le backend d'aperçu de Firebase Studio, optimisé par la suite d'émulateurs locaux Firebase, vous permet d'exécuter ces tests localement, en simulant le comportement de vos règles de production.