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 à l'aide de Gemini dans Firebase. Vous allez utiliser une requête en langage naturel pour générer une application Next.js qui identifie des aliments à partir d'une photo ou d'une caméra dans le navigateur, puis génère une recette contenant les ingrédients identifiés.

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

Étape 1: Générez votre application

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

  2. Dans le champ Prototyper une application avec l'IA, saisissez l'invite suivante, qui créera une application de recettes basée sur des images qui utilise la caméra du navigateur et l'IA générative.

    Par exemple, vous pouvez saisir une requête semblable à 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.

  3. Si vous le souhaitez, importez une image pour accompagner votre requête. Par exemple, vous pouvez importer une image contenant le jeu de couleurs que vous souhaitez utiliser pour votre application et demander à Firebase Studio de l'utiliser. Les images ne doivent pas dépasser 3 Mo.

  4. Cliquez sur Prototyper avec l'IA.

    Gemini génère un plan d'application en fonction de votre requête, et renvoie 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ée à l'aide de l'une des options suivantes:

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

    • Dans le champ Décrivez… du volet de chat, ajoutez des questions de clarification et du contexte. Vous pouvez également importer d'autres images.

  6. Cliquez sur Créer un prototype de cette application.

  7. 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", App Prototyping agent provisionne un projet Firebase et une clé Gemini API pour vous.

É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 itérer.

  • Révisez et interagissez avec votre application: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.

  • 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, puis envoyez-la à Gemini.

  • 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 mode, you can also use the following features:

    • Cliquez sur Icône Annoter Annoter pour dessiner directement dans la fenêtre d'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 App Prototyping agent modifie.

    • Cliquez sur Sélectionner une icône Sélectionner pour sélectionner un élément spécifique et saisir des instructions pour le App Prototyping agent. Vous pouvez ainsi 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 banque de données sur Unsplash.

    Vous pouvez également cliquer sur Icône de lien Partager le lien d'aperçu pour partager votre application publiquement et temporairement à l'aide des versions Preview publiques Firebase Studio.

  • Déboguer et itérer directement dans le code:cliquez sur Icône de bascule de code > Passer à Code pour ouvrir la vue Code, dans laquelle vous pouvez afficher tous les fichiers de votre application et modifier directement votre code. Vous pouvez revenir à Prototyper mode at any time..

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

  • Testez et mesurez les performances de vos fonctionnalités d'IA générative:vous pouvez utiliser l'UI pour les développeurs de Genkit 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 l'UI pour les développeurs de Genkit et commencer les tests:

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

       npm run genkit:watch

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

    Pour en savoir plus sur l'UI pour les développeurs de Genkit, consultez les outils pour les développeurs de Genkit.

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

Une fois que vous avez testé votre application et que vous êtes satisfait de son fonctionnement 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 (s'il n'en a pas déjà été créé en générant automatiquement une clé Gemini API) 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.

  2. À l'étape Projet Firebase, App Prototyping agent affiche le Firebase associé à l'espace de travail. Si aucun projet n'a été créé lors de la génération de la clé Gemini API, un projet vous sera créé. Cliquez sur Suivant pour continuer.

  3. À l'étape Associer un compte Cloud Billing, sélectionnez 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 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 à Firebase Studio et sélectionnez-le 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.

  5. Cliquez sur Configurer les services. L'agent de prototypage d'applications commence à provisionner les services Firebase.

  6. Cliquez sur Publier maintenant. Firebase Studio configure les services Firebase. Cette opération peut prendre plusieurs minutes. Pour en savoir plus sur ce qui se passe en coulisses, consultez la section Processus de compilation App Hosting.

  7. 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 optimisés par l'observabilité App Hosting. Pour utiliser un domaine personnalisé (par exemple, 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.

(Recommandé) Étape 6: Ajouter Firebase App Check à votre application

Si vous avez intégré des services Firebase ou Google Cloud à votre application, Firebase App Check vous aide à protéger les backends de votre application contre toute utilisation abusive en empêchant les clients non autorisés d'accéder à vos ressources Firebase. Il fonctionne à la fois avec les services Google (y compris les services Firebase et Google Cloud) et vos propres backends personnalisés pour protéger vos ressources.

Nous vous recommandons d'ajouter App Check à toute application que vous publiez publiquement pour protéger vos ressources backend contre les utilisations abusives.

Cette section vous explique comment configurer App Check dans Firebase Studio à l'aide de reCAPTCHA Enterprise pour une application Web créée par App Prototyping agent. Vous pouvez toutefois configurer App Check dans n'importe quelle application implémentant des services Firebase et pouvant implémenter des fournisseurs personnalisés. Pour en savoir plus, consultez Firebase App Check.

ReCAPTCHA Enterprise fournit jusqu'à 10 000 évaluations sans frais.

Étape 1: Configurez reCAPTCHA Enterprise pour votre application

  1. Ouvrez la section reCAPTCHA Enterprise de la console Google Cloud.

  2. Sélectionnez le nom de votre projet Firebase dans l'outil de sélection de projets de la console Google Cloud.

  3. Si vous êtes invité à activer l'API reCAPTCHA Enterprise, faites-le.

  4. Cliquez sur Get started (Commencer) et ajoutez un Display name (Nom à afficher) pour votre clé de site reCAPTCHA.

  5. Acceptez la clé Type d'application Web par défaut.

  6. Cliquez sur Ajouter un domaine, puis ajoutez un domaine. Ajoutez votre domaine App Hosting (par exemple, studio--PROJECT_ID.REGION.hosted.app) et tous les domaines personnalisés que vous utilisez ou que vous prévoyez d'utiliser avec votre application.

  7. Cliquez sur Étape suivante.

  8. Laissez la case Allez-vous utiliser des tests ? non cochée.

  9. Cliquez sur Créer une clé.

  10. Copiez et enregistrez votre ID de clé, puis passez à la section Configurer App Check.

Étape 2: Configurer App Check

  1. Ouvrez la console Firebase, puis cliquez sur Build > App Check (Compilation > Vérification de l'application) dans le menu de navigation.

  2. Cliquez sur Commencer, puis sur Enregistrer à côté de votre application.

  3. Cliquez pour développer ReCAPTCHA et collez l'ID de clé que vous avez généré pour reCAPTCHA Enterprise.

  4. Cliquez sur Enregistrer.

Étape 3: Ajoutez App Check à votre code

  1. Revenez à Firebase Studio et, dans la vue Code, ajoutez la clé de site que vous avez générée à votre fichier .env:

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  2. Si votre configuration Firebase n'est pas encore enregistrée dans .env, obtenez-la:

    • Dans la console Firebase, ouvrez Project settings (Paramètres du projet) et recherchez-le dans la section correspondant à votre application.

    • Dans le terminal, dans la vue Code:

      1. Connectez-vous à Firebase: firebase auth login.
      2. Sélectionnez votre projet : firebase use FIREBASE_PROJECT_ID
      3. Obtenez la configuration Firebase: firebase apps:sdkconfig

  3. Ajoutez la configuration à votre fichier .env afin qu'il ressemble à ce qui suit:

    NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN
NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID
NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  4. Ajoutez App Check au code de votre application. Vous pouvez demander à Gemini d'ajouter App Check avec reCAPTCHA Enterprise à votre application (assurez-vous de spécifier "reCAPTCHA Enterprise" et de bien le vérifier), ou suivre la procédure décrite dans la section Initialiser App Check.

  5. Publiez à nouveau votre site sur App Hosting. Essayez de tester vos fonctionnalités Firebase pour générer des données.

  6. Vérifiez que App Check reçoit des requêtes dans la console Firebase en ouvrant Build > App Check (Créer > Vérification de l'application).

  7. Cliquez pour inspecter les services Firebase. Après avoir vérifié que les requêtes arrivent, cliquez sur Enforce (Appliquer) pour appliquer App Check.

  8. Répétez la validation et l'application des règles pour Firebase Authentication.

Si, après avoir enregistré votre application pour App Check, vous souhaitez l'exécuter dans un environnement que App Check ne classerait normalement pas comme valide, par exemple localement pendant le développement ou à partir d'un environnement d'intégration continue (CI), vous pouvez créer un build de débogage de votre application qui utilise le fournisseur de débogage App Check au lieu d'un véritable fournisseur d'attestation. Pour en savoir plus, consultez Utiliser App Check avec le fournisseur de débogage dans les applications Web.

(Facultatif) Étape 7: Surveiller votre application

Le panneau Vue d'ensemble de l'application de Firebase Studio fournit des métriques et des informations clés sur votre application, ce qui vous permet de surveiller les performances de votre application Web à l'aide des outils d'observabilité intégrés de App Hosting. Une fois votre site déployé, vous pouvez accéder à la vue d'ensemble en cliquant sur Publier. Dans ce panneau, vous pouvez:

  • Cliquez sur Publier pour publier une nouvelle version de votre application.
  • Partagez le lien vers votre application ou ouvrez-la directement dans Accéder à votre application.
  • Consultez un résumé des performances de votre application au cours des sept derniers jours, y compris le nombre total de requêtes et l'état de votre dernier déploiement. Cliquez sur Afficher les détails pour accéder à encore plus d'informations dans la console Firebase.
  • Affichez un graphique du nombre de requêtes reçues par votre application au cours des dernières 24 heures, ventilées par code d'état HTTP.

Si vous fermez le panneau "Aperçu de l'application", vous pouvez le rouvrir à tout moment en cliquant sur Publier.

Pour en savoir plus sur la gestion et la surveillance des déploiements App Hosting, consultez la page Gérer les déploiements et les versions.

(Facultatif) Étape 8: Annuler votre déploiement

Si vous avez déployé des versions successives de votre application sur App Hosting, vous pouvez la rétablir à l'une des versions précédentes. Vous pouvez également la supprimer.

  • Pour annuler la publication d'un site:

    1. Ouvrez App Hosting dans la console Firebase.

    2. Recherchez le backend de votre application, cliquez sur Afficher, puis sur Déploiements.

    3. À côté du déploiement auquel vous souhaitez revenir, cliquez sur Plus , puis sélectionnez Revenir à ce build et confirmez.

    Pour en savoir plus, consultez Gérer les déploiements et les versions.

  • Pour supprimer votre domaine App Hosting du Web:

    1. Dans la console Firebase, ouvrez App Hosting, puis cliquez sur Afficher dans la section de l'application Firebase Studio.

    2. Dans la section Informations sur le backend, cliquez sur Gérer. La page Domains (Domaines) s'affiche.

    3. À côté de votre domaine, cliquez sur Plus , puis sélectionnez Désactiver le domaine et confirmez.

    Votre domaine sera alors supprimé du Web. Pour supprimer complètement votre backend App Hosting, suivez les instructions de la section Supprimer un backend.

(Facultatif) Étape 9: Utiliser la surveillance Genkit pour vos fonctionnalités déployées

Vous pouvez surveiller les étapes, les entrées et les sorties de votre fonctionnalité Genkit en activant la télémétrie dans votre code de flux d'IA. La fonctionnalité de télémétrie de Genkit vous permet de surveiller les performances et l'utilisation de vos flux d'IA. Ces données peuvent vous aider à identifier les axes d'amélioration, à résoudre les problèmes, à optimiser vos invites et vos flux pour améliorer les performances et l'efficacité des coûts, et à suivre l'utilisation de vos flux au fil du temps.

Pour configurer la surveillance dans Genkit, vous devez ajouter de la télémétrie aux flux d'IA Genkit, puis afficher les résultats dans la console Firebase.

Étape 1: Ajoutez la télémétrie à votre code de flux Genkit dans Firebase Studio

Pour configurer la surveillance dans votre code:

  1. Si vous n'êtes pas déjà en vue Code, cliquez sur Icône de bascule de code Passer à Code pour l'ouvrir.

  2. Vérifiez package.json pour vérifier la version de Genkit installée.

  3. Ouvrez le terminal (Ctrl-Shift-C ou Cmd-Shift-C sous macOS).

  4. Cliquez dans le terminal et installez le plug-in Firebase à l'aide de la version correspondant à votre fichier package.json. Par exemple, si les packages Genkit de votre package.json sont à la version 1.0.4, vous devez exécuter la commande suivante pour installer le plug-in:

    npm i --save @genkit-ai/firebase@1.0.4

  5. Dans Explorer, développez src > ai > flows. Un ou plusieurs fichiers TypeScript contenant vos flux Genkit apparaissent dans le dossier flows.

  6. Cliquez sur l'un des flux pour l'ouvrir.

  7. Au bas de la section "Importations" du fichier, ajoutez ce qui suit pour importer et activer FirebaseTelemetry:

    import { enableFirebaseTelemetry } from '@genkit-ai/firebase';

enableFirebaseTelemetry();

Étape 2: Configurez les autorisations

Firebase Studio a activé les API requises pour vous lors de la configuration de votre projet Firebase, mais vous devez également accorder des autorisations au compte de service App Hosting.

Pour configurer les autorisations:

  1. Ouvrez la console IAM Google Cloud, sélectionnez votre projet, puis attribuez les rôles suivants au compte de service App Hosting:

    • Rédacteur de métriques Monitoring (roles/monitoring.metricWriter)
    • Agent Cloud Trace (roles/cloudtrace.agent)
    • Rédacteur de journaux (roles/logging.logWriter)

  2. Publiez à nouveau votre application sur App Hosting.

  3. Une fois la publication terminée, chargez votre application et commencez à l'utiliser. Au bout de cinq minutes, votre application doit commencer à consigner des données de télémétrie.

Étape 3: Surveillez vos fonctionnalités d'IA générative dans la console Firebase

Lorsque la télémétrie est configurée, Genkit enregistre le nombre de requêtes, le succès et la latence pour tous vos flux. Pour chaque flux spécifique, Genkit collecte des métriques de stabilité, affiche des graphiques détaillés et consigne les traces capturées.

Pour surveiller vos fonctionnalités d'IA implémentées avec Genkit:

  1. Au bout de cinq minutes, ouvrez Genkit dans la console Firebase et examinez les requêtes et les réponses de Genkit.

    Genkit compile les métriques de stabilité suivantes:

    • Nombre total de requêtes:nombre total de requêtes reçues par votre flux.
    • Taux de réussite:pourcentage de requêtes traitées avec succès.
    • Latence au 95e centile:latence au 95e centile de votre flux, c'est-à-dire le temps nécessaire pour que 95% des requêtes soient traitées.

    • Utilisation des jetons:

      • Jetons d'entrée: nombre de jetons envoyés au modèle dans l'invite.
      • Jetons de sortie: nombre de jetons générés par le modèle dans la réponse.

    • Utilisation de l'image:

      • Images d'entrée:nombre d'images envoyées au modèle dans la requête.
      • Images de sortie:nombre d'images générées par le modèle dans la réponse.

    Si vous développez les métriques de stabilité, des graphiques détaillés sont disponibles:

    • Volume des requêtes au fil du temps.
    • Taux de réussite au fil du temps.
    • Jetons d'entrée et de sortie au fil du temps.
    • Latence (95e et 50e centiles) au fil du temps.

Pour en savoir plus sur Genkit, consultez Genkit.

Étapes suivantes