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

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

Ce guide vous explique comment utiliser App Prototyping agent pour développer et publier rapidement une application Full Stack avec l'aide de Gemini dans Firebase. Vous utiliserez une requête en langage naturel pour générer une application Next.js qui identifie les aliments à partir d'une photo 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 consultable.

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

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

Étape 1 : Générez votre application

Connectez-vous à votre compte Google et ouvrez Firebase Studio.
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 et 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.
```
Conseil : Pour obtenir de 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 termes de données. Si vous le souhaitez, cliquez sur 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. Vous pouvez continuer à affiner et à ajouter des fonctionnalités en collaboration avec Gemini. Découvrez comment rédiger des requêtes efficaces.
Si vous le souhaitez, importez une image pour accompagner votre requête. Par exemple, vous pouvez importer une image contenant la palette de couleurs que vous souhaitez utiliser dans votre application et demander à Firebase Studio de l'utiliser. Les images doivent être inférieures à 3 Mio.
Cliquez sur Prototyper avec l'IA.

L'agent de prototypage d'applications génère un modèle d'application en fonction de votre requête, en renvoyant un nom d'application proposé, les fonctionnalités requises et les consignes de style.
Examinez le plan. Si nécessaire, apportez quelques modifications. Par exemple, vous pouvez modifier le nom ou le jeu de couleurs proposés pour l'application à l'aide de l'une des options suivantes :
- Cliquez sur Personnaliser et modifiez directement le plan. Apportez les modifications nécessaires, puis cliquez sur Enregistrer.
- Dans le champ Décrivez... du volet de chat, ajoutez des questions et du contexte pour clarifier votre demande. Vous pouvez également importer d'autres images.
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 en production du code généré que vous n'avez pas testé. Ne saisissez pas d'informations permettant d'identifier personnellement l'utilisateur ni de données utilisateur dans le chat.
L'agent de prototypage d'applications commence à coder votre application.
- Étant donné que 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", le App Prototyping agent provisionne un projet Firebase et une clé Gemini API pour vous.
Important : Si vous sélectionnez 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'améliorer.

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. 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 une authentification utilisateur 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 invite 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'agent de prototypage d'applications 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 : dans la plupart des cas, App Prototyping agent vous invite à corriger les erreurs qui se produisent. Cliquez sur Corriger l'erreur pour permettre à l'outil de tenter de résoudre le problème.

Si vous recevez des erreurs pour lesquelles vous n'êtes pas invité à les 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, puis envoyez-la à Gemini.

Conseil : Gemini explique son raisonnement, mais vous pouvez également lui demander d'expliquer son plan avant de l'exécuter.
Testez et itérez à l'aide du langage naturel : testez votre application de manière approfondie et utilisez App Prototyping agent pour itérer sur le code et le plan jusqu'à ce que vous soyez satisfait.

Pendant votre séjour à Prototyper view, you can also use the following features:
- 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 le App Prototyping agent. Cela vous permet de cibler rapidement une icône, un bouton, un élément de 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 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 aperçus publics de Firebase Studio.
Créer un projet Firebase : l'agent de prototypage d'applications 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 associé à votre espace de travail, invitez App Prototyping agent avec l'ID du projet que vous souhaitez utiliser à la place. Par exemple, "Passe au projet Firebase avec l'ID <your-project-id>".
Testez l'application et vérifiez 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. Consultez les règles dans la console Firebase.
Déboguer et itérer 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 à Prototyper mode at any time.

En mode Code, vous pouvez également utiliser les fonctionnalités utiles suivantes :
- Les fonctionnalités de débogage et de création de rapports intégrées de Firebase Studio vous permettent d'inspecter, de déboguer et d'auditer votre application.
- Assistance IA avec Gemini, soit en ligne dans votre code, soit avec le 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 Prototyper chat in Code view. To use Gemini interactive chat par défaut. Sous Gemini, cliquez sur +, puis sélectionnez Nouveau Chat. Pour revenir à Prototyper chat, click history Recent chats, and then choose Prototyper chat.
- Accédez à Firebase Local Emulator Suite pour afficher les données d'authentification et de base de données. 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, puis développez cette section.
  3. Dans la colonne Actions correspondant à Port 4000, cliquez sur Ouvrir dans une nouvelle fenêtre.
Testez et mesurez les performances de votre fonctionnalité d'IA générative : vous pouvez utiliser l'UI 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 et plus encore.

Pour charger vos flux Genkit dans l'UI pour les développeurs Genkit et commencer les tests :
1. Depuis le terminal de votre espace de travail Firebase Studio, exécutez la commande suivante pour obtenir votre clé Gemini API et démarrer le serveur Genkit :
```
 npm run genkit:watch
```
2. Cliquez sur le lien vers 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'UI pour les développeurs Genkit, 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 qu'elle vous convient dans votre espace de travail, vous pouvez la publier sur le Web avec Firebase App Hosting.

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 :

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 Gemini API clé ou invité App Prototyping agent à 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.
À l'étape Projet Firebase, App Prototyping agent affiche le projet Firebase associé à l'espace de travail. Si aucun projet Firebase n'existe déjà, App Prototyping agent en crée un pour vous. Cliquez sur Suivant pour continuer.
À l'étape Associer le 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, dans laquelle vous pouvez créer un compte Cloud Billing en libre-service. Une fois le compte créé, revenez sur Firebase Studio et sélectionnez-le dans la liste Associer Cloud Billing.
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, celui-ci est automatiquement mis à niveau vers le forfait Blaze avec paiement à l'usage. Votre utilisation de Gemini API et d'autres services Firebase et Google Cloud est également mise à niveau vers le niveau payant. Vous serez facturé pour l'utilisation des services payants qui dépassent le quota sans frais. Pour en savoir plus, consultez Comprendre les coûts de App Hosting, Tarification Firebase et Tarification de l'API Gemini.
Cliquez sur Configurer les services. L'agent de prototypage d'applications commence à provisionner les services Firebase.
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 votre vidéo maintenant, vous pouvez cliquer sur Publier plus tard.
Une fois l'étape de publication terminée, l'aperçu de l'application s'affiche avec une URL et des insights sur l'application fournis 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.

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.

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 sélectionnez Build > Firestore Database (Créer > Base de données Firestore) dans le menu de navigation.

Vous pouvez y 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 (Créer > Authentification) dans le menu de navigation.

Vous pouvez y inspecter votre configuration d'authentification et les utilisateurs de votre 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 tout accès non autorisé.

Vous pouvez tester vos règles à l'aide des 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. Ces tests en conditions réelles permettent de vérifier que vos règles sont correctement appliquées en 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 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é lors du processus de publication ou avec la CLI Firebase, les règles définies dans le répertoire de votre projet remplacent toutes les règles existantes dans la console Firebase. Si vous choisissez de définir ou de modifier les règles de sécurité dans la console Firebase, n'oubliez pas de reporter également ces modifications dans les règles définies au niveau de votre répertoire de 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 fourni par Firebase Local Emulator Suite vous permet d'exécuter ces tests en local, en simulant le comportement de vos règles de production. Il s'agit d'un moyen efficace de vérifier la logique complexe des règles et de confirmer la couverture pour différents scénarios. Après le déploiement, vous devez vérifier que vos tests unitaires utilisant l'émulateur fonctionnent comme prévu et couvrent tous les scénarios.