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

Preview : Firebase Studio est en version Preview, ce qui signifie que le produit n'est soumis à aucun contrat de niveau de service ni à aucun règlement relatif aux abandons, et qu'il peut être modifié de manière à entraîner des incompatibilités ascendantes.

Ce guide vous explique comment utiliser App Prototyping agent pour développer et publier rapidement une application full stack à l'aide de Gemini. Vous allez utiliser une requête en langage naturel pour générer une application Next.js qui identifie les aliments à partir d'une photo ou de la caméra du navigateur fournie par un utilisateur connecté, et 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 n'est peut-être pas encore disponible partout.

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

Voici d'autres technologies que vous utiliserez tout au long de ce guide :

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

Important : App Prototyping agent est compatible avec la création d'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érez votre application

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

2. Dans le champ Prototyper une application avec l'IA, saisissez la requête suivante, qui créera une application de recettes basée sur des images qui utilise l'appareil photo 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.
   

   Conseil : Pour obtenir de meilleurs résultats, soyez aussi précis que possible dans votre prompt. Incluez les fonctionnalités souhaitées, les workflows utilisateur et les exigences en matière de données. Si vous le souhaitez, cliquez sur Améliorer le prompt pour demander à Gemini d'affiner votre prompt initial. 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. Découvrez comment créer des prompts efficaces.

3. Si vous le souhaitez, importez une image pour accompagner votre prompt. Par exemple, vous pouvez importer une image contenant le jeu de couleurs que vous souhaitez que votre application utilise et indiquer à Firebase Studio de l'utiliser. Les images doivent être inférieures à 3 Mio.

4. Cliquez sur Prototyper avec l'IA.

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

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

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

   • Dans le champ Décrivez… du volet de discussion, ajoutez des questions de clarification et du contexte. Vous pouvez également importer des images supplémentaires.

6. Cliquez sur Prototyper cette application.

   Important : Gemini peut générer des résultats qui semblent plausibles, mais qui sont en fait incorrects. Il peut fournir des réponses inexactes qui ne représentent pas les points de vue 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. App Prototyping agent commence à coder votre application.

   • Comme votre application utilise l'IA, vous êtes invité à ajouter ou à générer une clé Gemini API. Si vous cliquez sur "Générer automatiquement", App Prototyping agent provisionne un projet Firebase et une clé Gemini API pour vous.
   Important : Si vous choisissez Générer automatiquement, 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 clé Gemini API dans le projet. Il stocke également la clé dans votre espace de travail Firebase Studio dans un fichier .env. 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.

• Examinez votre application et interagissez avec elle : une fois la génération du code terminée, un aperçu de votre application s'affiche. Vous pouvez interagir directement avec l'aperçu pour le tester. Pour en savoir plus, consultez Prévisualiser 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, donnez aux utilisateurs la possibilité 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.
  

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

• Corrigez les erreurs au fur et à mesure qu'elles se produisent : dans la plupart des cas, App Prototyping agent vous invite à corriger les erreurs qui se produisent. Cliquez sur Corriger l'erreur pour qu'il tente de la corriger.

  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.

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

• Testez et effectuez des itérations en langage naturel : testez minutieusement votre application et utilisez App Prototyping agent pour effectuer des itérations 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 Annoter pour dessiner directement dans la fenêtre d'aperçu. Utilisez les outils de forme, d'image et de texte disponibles, ainsi qu'un prompt textuel facultatif, pour décrire visuellement ce que vous souhaitez que App Prototyping agent modifie.

  • Cliquez sur Sélectionner pour sélectionner un élément spécifique et saisir des instructions pour 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 pouvez également rechercher et sélectionner une image de stock sur Unsplash.

  Vous pouvez également cliquer sur 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 : App Prototyping agent provisionne un projet Firebase en votre nom lorsque vous :

  • Générer automatiquement une clé API Gemini
  • Demander à associer votre application à un projet Firebase
  • Demandez de l'aide pour connecter votre application aux services Firebase, tels que Cloud Firestore ou Firebase Authentication.
  • Cliquez sur le bouton Publier et configurez Firebase App Hosting.

  Pour modifier le projet Firebase connecté à votre espace de travail, indiquez à App Prototyping agent l'ID du 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, et à 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 à App Prototyping agent d'ajouter Cloud Firestore, il écrit et déploie des règles de base de données Cloud Firestore pour vous. Examinez les règles dans la consoleFirebase.

• Déboguez et améliorez directement dans le code : cliquez sur 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 :

  • fonctionnalités de débogage et de reporting intégrées de Firebase Studio pour inspecter, déboguer et auditer votre application.

  • Assistance IA avec 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, proposer des solutions et exécuter des outils pour vous aider à corriger votre application plus rapidement. Pour accéder au chat, cliquez sur l'icône Étincelle Gemini 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 le chat interactif Gemini, sous Gemini, cliquez sur +, puis sélectionnez Nouveau chat. Pour revenir à la discussion Prototyper, cliquez sur Discussions récentes, puis sélectionnez Discussion Prototyper.

  • Accédez à 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+' sur macOS).

    2. Faites défiler la page jusqu'à Ports de backend et développez la section.

    3. Dans la colonne Actions correspondant au port 4000, cliquez sur Ouvrir dans une nouvelle fenêtre.

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

  Pour charger vos flux Genkit dans Genkit Developer UI et commencer les tests :

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

      npm run genkit:watch
     

  2. Cliquez sur le lien Genkit Developer UI. Genkit Developer UI s'ouvre dans une nouvelle fenêtre avec vos flux, vos requêtes, vos embedders et une sélection de différents modèles disponibles.

  Pour en savoir plus sur Genkit Developer UI, consultez Outils pour les développeurs Genkit.

(Facultatif) Étape 3 : Publiez 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 passe automatiquement au forfait Blaze avec paiement à l'usage, et votre utilisation de Gemini API et d'autres services Firebase et Google Cloud passe au niveau payant. L'utilisation des services payants au-delà du quota sans frais vous sera facturée. Pour en savoir plus, consultez Comprendre les coûts de App Hosting, Tarifs de Firebase et Tarifs de l'API Gemini Developer.

Lorsque vous configurez App Hosting, Firebase Studio crée un projet Firebase pour vous (si un projet n'a pas 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 Publier pour configurer votre projet Firebase et publier votre application. Le volet Publier votre application s'affiche.

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

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

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

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

   • Si vous n'avez pas de compte Cloud Billing ou si vous souhaitez en créer un, cliquez sur Créer un compte Cloud Billing. La console Google Cloud s'ouvre. Vous pouvez alors créer un compte Cloud Billing en libre-service. Après avoir créé le compte, revenez à Firebase Studio et sélectionnez le compte dans la liste Associer Cloud Billing.

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

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

5. Cliquez sur Configurer les services. App Prototyping agent commence à provisionner les services Firebase.

6. Cliquez sur 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 Processus de compilation App Hosting.

   Conseil : Si vous ne souhaitez pas publier maintenant, vous pouvez cliquer sur Publier plus tard.

7. Une fois l'étape de publication terminée, la page Présentation de l'application s'affiche avec une URL et des insights sur l'application optimisés par l'observabilité App Hosting. Pour utiliser un domaine personnalisé (comme 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.

Conseil : 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 identifier et corriger les erreurs de publication.

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

Étape 4 (recommandée) : Testez 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 base de données Cloud Firestore

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.

Cette erreur peut s'afficher dans les messages d'erreur ou dans la console de développement de votre navigateur.

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

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

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

2. Testez tous les flux de votre application. Un message d'erreur peut s'afficher, par exemple "Erreur lors du chargement des recettes. La requête nécessite un index. Vous pouvez en créer un ici :" avec un lien vers la console Firebase.

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

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

5. Revenez dans votre application et actualisez la page.

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

Conseil : Vous pouvez demander à Gemini de générer vos index, mais veillez à vérifier le résultat.

Pour en savoir plus, consultez Gérer les index dans 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 active, ouvrez la console Firebase, puis sélectionnez Build > Firestore Database (Compilation > Base de données Firestore) dans le menu de navigation.

  Vous pouvez alors inspecter les données stockées, afficher et tester vos règles de sécurité, et créer des index. 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 (Authentification) dans le menu de navigation.

  Vous pouvez alors inspecter votre configuration d'authentification et les utilisateurs de l'application. Pour en savoir plus, consultez Firebase Authentication.

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. Cela permet de s'assurer que vos données sont accessibles aux utilisateurs autorisés et protégées contre les accès non autorisés.

Vous pouvez tester vos règles à l'aide de toutes les méthodes suivantes :

• Test de l'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. Ces tests en conditions réelles permettent de confirmer que vos règles sont correctement appliquées dans la pratique.

• Espace de test dédié aux règles : pour les vérifications ciblées, utilisez l'espace de test dédié aux règles dans la console Firebase. Cet outil vous permet de simuler des requêtes (lectures, écritures, suppressions) sur votre base de données Cloud Firestore à l'aide de vos règles de production. 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 vérifier 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 la CLI Firebase, les règles définies dans le répertoire de votre projet écrasent toutes les règles existantes dans la console Firebase. Par conséquent, si vous choisissez de définir ou de modifier vos règles de sécurité à l'aide de la console Firebase, veillez à mettre également à 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é. Le backend d'aperçu Firebase Studio optimisé par Firebase Local Emulator Suite vous permet d'exécuter ces tests localement, en simulant le comportement de vos règles de production. Il s'agit d'un moyen efficace de vérifier la logique de règles complexes et de confirmer la couverture de différents scénarios. Après le déploiement, vérifiez que vos tests unitaires utilisant l'émulateur fonctionnent comme prévu et couvrent tous les scénarios.