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

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

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, et fournit une recette contenant les ingrédients identifiés. Vous allez ensuite affiner et améliorer l'application, puis la publier sur Firebase App Hosting.

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

• un espace de travail Firebase Studio
• un projet Firebase ;
• Firebase App Hosting

É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 une description de l'application que vous souhaitez créer. Pour cette solution, dans laquelle vous créez une application de recettes basée sur des images, vous pouvez utiliser une invite comme celle-ci pour créer un prototype d'une application qui utilise l'appareil photo et l'IA générative:

   Build a web app that can identify food products from an uploaded picture or
   in-browser camera. The app should provide a recipe that contains the
   identified ingredients.
   

3. 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 les consignes de style.

4. Examinez le plan et 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 editPersonnaliser 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 des images supplémentaires.

5. Cliquez sur Prototyper cette application. Gemini commence à coder votre application. Étant donné que la description de l'application décrit des fonctionnalités nécessitant l'IA générative, Gemini vous demande une clé Gemini API.

6. Ajoutez votre propre clé Gemini API ou cliquez sur Générer automatiquement pour générer une clé Gemini API.

É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.

1. Vérifiez 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.

2. Itérer sur votre application à l'aide du langage naturel:continuez à utiliser l'interface de chat pour demander à Gemini d'ajouter des fonctionnalités et d'affiner l'application.

3. Testez l'application: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 à fournir une recette. Si vous le souhaitez, vous pouvez utiliser la vue Code pour partager votre application publiquement et temporairement à l'aide des previews publics Firebase Studio.

4. Déboguer et itérer directement dans le code:cliquez sur  > Passer au 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:

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

   • Assistance IA à l'aide de Gemini dans Firebase, soit de manière intégrée dans votre code, soit à l'aide de la discussion interactive (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 à résoudre plus rapidement les problèmes de votre application. Pour accéder au chat, cliquez sur étincelleGemini en bas de l'espace de travail.

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

Une fois que vous avez testé l'application et que vous en êtes satisfait, 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 et vous explique comment associer un compte Cloud Billing.

Pour publier votre application sur Firebase App Hosting:

1. Cliquez sur Publier pour créer un projet Firebase et commencer la configuration de App Hosting. Le volet Publier votre application s'affiche.

2. À l'étape Projet Firebase, notez le nom du projet Firebase créé pour vous, puis cliquez sur Suivant.

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. App Hosting configure ensuite un environnement entièrement géré pour votre application dans Google Cloud.

5. Cliquez sur Créer votre premier déploiement. Firebase Studio lance le déploiement de App Hosting. Cette opération peut prendre jusqu'à dix minutes. Pour en savoir plus sur ce qui se passe en coulisses, consultez la section Processus de compilation App Hosting.

6. Une fois le déploiement terminé, la page Vue d'ensemble 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.

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

(Facultatif) Étape 4: Surveillez votre application

Le panneau Vue d'ensemble de l'application de App Hosting 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 Créer un déploiement 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 5: 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 more_vert, 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 more_vert, 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 6: 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é en termes de coûts, et à suivre l'utilisation de vos flux au fil du temps.

Pour configurer la surveillance dans Genkit, vous devez ajouter 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 Passer au 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. Après 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 l'invite.
     • 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

• Découvrez comment développer des applications dans un espace de travail Firebase Studio.
• En savoir plus sur l'assistance IA dans Firebase Studio