Premiers pas avec Firebase Studio

1. Présentation

Dans cet atelier de programmation, vous allez vous entraîner à utiliser l'agent de prototypage d'applications dans Firebase Studio pour créer une application conçue pour vous aider à apprendre une nouvelle langue. Vous affinerez et améliorerez ensuite l'application, et vous pourrez éventuellement la publier sur Firebase App Hosting.

GIF animé d'une application d'apprentissage de langue

Points abordés

  • Bonnes pratiques pour les requêtes dans Firebase Studio
  • Itérer sur une application pour ajouter des fonctionnalités et corriger des bugs
  • Publier une application sur Firebase App Hosting et la partager avec d'autres utilisateurs
  • Suivre les métriques clés dans le panneau "Présentation de l'application" d'App Hosting

Prérequis

  • Un navigateur de votre choix, tel que Google Chrome
  • Un compte Google pour créer et gérer votre projet Firebase

2. Générer votre application à l'aide de l'agent de prototypage d'applications

L'agent de prototypage d'applications utilise Gemini dans Firebase pour créer votre application. Même si vous utilisez des requêtes identiques, il est possible que le résultat ne ressemble pas exactement à celui présenté dans cet atelier de programmation. Si vous êtes bloqué, nous vous fournissons un ensemble de fichiers que vous pouvez ajouter à votre espace de travail pour reprendre l'atelier de programmation à plusieurs points de contrôle.

  1. Connectez-vous à votre compte Google et ouvrez Firebase Studio.
  2. Dans le champ Prototyper une application avec l'IA, saisissez une description de l'application que vous souhaitez créer. Dans cet atelier de programmation, vous allez créer une application qui vous aidera à apprendre une nouvelle langue grâce à des histoires, des flashcards et un tuteur IA. Saisissez une requête, par exemple :
    An app to help someone learn a new language. The app should include
AI-generated stories in the target language, where users can click vocab
words or the entire story to see it in English. A different section
includes flashcards, where the user is shown a word in the chosen language
and can click it to flip the card and see the word in English. The final
section includes an AI chatbot that allows the user to have simple
conversations in the chosen language or ask questions in English about
what a word means or how to form a sentence in the chosen language. All
content should be beginner-friendly, focusing on basic greetings, common
questions/answers, and vocabulary relevant to the lessons or stories.
To start, the app should teach the user French, although we might add
additional languages in the future.
  3. Cliquez sur Prototyper avec l'IA.
  4. Examinez le plan d'application suggéré. Cliquez sur Icône de personnalisationPersonnaliser pour modifier le plan :
    1. Remplacez le nom de l'application par Speak Easy.
    2. Remplacez le jeu de couleurs par ce qui suit :
    Primary color: Asparagus green (#98BF64) for a calm and friendly feel.
Secondary color: Light parchment (#F5EBCD) to complement the primary color.
Accent: Marigold (#FFB833) for interactive elements and call-to-action buttons.
    Si vous préférez envoyer votre palette de couleurs ou votre mise en page sous forme d'image, cliquez sur l'option Icône Pièce jointe Pièce jointe pour importer une image lors du processus de requête ou de plan. Les images doivent être inférieures à 3 Mio.
  5. Cliquez sur Enregistrer.
  6. Une fois que le plan a intégré vos modifications, cliquez sur Prototyper cette application.Plan de l'application
  7. Comme cette application inclut des éléments d'IA, l'agent vous demande une clé Gemini. Ajoutez votre propre clé API Gemini ou cliquez sur Générer automatiquement pour en générer une. Si vous cliquez sur Générer automatiquement, Firebase Studio crée un projet Firebase et génère une clé API Gemini pour vous.
  8. L'agent de prototypage d'applications utilise le plan d'application pour créer une première version de votre application. Une fois cette version créée, l'aperçu de votre application s'affiche à côté d'une interface de chat Gemini. Prenez le temps de tester votre application. Même si elle ne ressemble pas exactement à ce que vous aviez imaginé, la section suivante décrit comment ajouter de nouvelles fonctionnalités et affiner la conception.GIF animé du prototype initial de l'application

3. (Facultatif) Obtenir le code

Si vous êtes bloqué ou si vous souhaitez suivre plus précisément l'application exemple, utilisez les fichiers exemples fournis à plusieurs points de contrôle tout au long de l'atelier de programmation.

  1. Téléchargez les fichiers du dossier.
  2. Dans Firebase Studio, cliquez sur icône de la vue Code Passer à la vue Code pour ouvrir la vue Code.
  3. Faites glisser les fichiers que vous avez téléchargés dans le volet "Explorateur" de Firebase Studio. Autorisez les fichiers à remplacer les fichiers existants.
  4. Cliquez sur Passer à Prototyper pour continuer l'atelier de programmation en utilisant la version exemple de l'application.

4. Tester, itérer et déboguer les fonctionnalités de votre application

Lorsque vous prévisualisez l'application, vous pouvez remarquer des bugs ou des fonctionnalités inattendues. Dans l'exemple de version de l'application, nous allons ajouter les modifications et les corrections suivantes :

  • Dans le générateur d'histoires par IA, les utilisateurs doivent pouvoir cliquer sur les mots de vocabulaire pour obtenir leur définition en anglais.
  • Les flashcards doivent s'afficher en français, puis passer à l'anglais lorsque vous cliquez dessus.
  • L'utilisateur doit pouvoir accéder à une page de paramètres et passer à l'apprentissage du japonais au lieu du français.

Objectif 1 : Ajouter des mots de vocabulaire au générateur d'histoires par IA

Facultatif : Pour utiliser l'exemple de version de l'application à partir de ce point, téléchargez et faites glisser ces fichiers dans le volet "Explorateur" de Firebase Studio en mode Code.

  1. Dans l'interface de chat, décrivez la fonctionnalité que vous souhaitez ajouter :
    In the AI Story Generator, users should be able to click vocab words or
phrases to get the definition in English. Words or phrases should be
underlined to indicate they can be clicked.
  2. Testez l'application dans la fenêtre d'aperçu. Vous mettrez à jour l'apparence de l'application plus tard. Pour l'instant, concentrez-vous uniquement sur la fonctionnalité.
  3. Si votre application ne fonctionne pas comme prévu, continuez à demander à l'agent de prototypage d'applications d'apporter des modifications. Exemple :
    IMPORTANT: Be sure to underline and provide a definition for most words
and phrases, and ESPECIALLY all nouns and verbs. If a word or phrase in the
story appears multiple times, only underline and define the first instance.
  4. Cliquez sur icône de la vue CodePasser à la vue Code pour ouvrir la vue Code, dans laquelle vous pouvez voir tous les fichiers de votre application et modifier directement votre code. Si Gemini ne parvient pas à résoudre un bug, il est parfois plus facile de modifier un fichier manuellement. Lorsque vous êtes prêt, passez en mode Prototyper pour continuer à utiliser l'agent de prototypage d'applications.

GIF animé du générateur d'histoires IA créant une histoire en français avec des mots soulignés

Objectif 2 : Ajouter des traductions aux fiches

Facultatif : Pour utiliser l'exemple de version de l'application à partir de ce point, téléchargez et faites glisser ces fichiers dans le volet "Explorateur" de Firebase Studio en mode Code.

Suivez la même procédure que ci-dessus, en utilisant l'interface de chat pour décrire la fonctionnalité, testez-la dans la fenêtre d'aperçu, puis utilisez des requêtes supplémentaires ou la vue Code pour ajouter des traductions aux cartes flash. Essayez une requête comme :

 The flash cards should appear in the target language to start, then switch to
 English when clicked.

Il arrive parfois que l'agent de prototypage d'applications ne reconnaisse pas la présence d'un bug. Il peut être plus efficace de décrire ce que vous voyez et ce qui doit être corrigé. Par exemple :

 The flip button for the flash cards isn't working. Can you debug it? All flash
 cards are only showing in English.

GIF animé montrant des flashcards basculant entre le français et l'anglais

Objectif 3 : Ajouter une langue

Facultatif : Pour utiliser l'exemple de version de l'application à partir de ce point, téléchargez et faites glisser ces fichiers dans le volet "Explorateur" de Firebase Studio en mode Code.

Essayez une requête comme :

 Add a settings section to the app, where users can swap to a new language
 to learn. Add Japanese to the list of languages the user can pick from. If
 the user selects Japanese, the AI-generated stories, flash cards, and chatbot
 tutor should all use Japanese instead of French.

GIF animé montrant comment passer à la langue japonaise dans l'application

5. Itérer sur la conception de votre application

Facultatif : Pour utiliser l'exemple de version de l'application à partir de ce point, téléchargez et faites glisser ces fichiers dans le volet "Explorateur" de Firebase Studio en mode Code.

Maintenant que votre application dispose de toutes les fonctionnalités souhaitées, il est temps de travailler sur le style.

Modifier le jeu de couleurs de l'application

Vous pouvez préciser les couleurs que vous souhaitez utiliser ou laisser l'agent App Prototyping prendre les devants. Dans l'interface de chat, vous pouvez également cliquer sur l'option Pièce jointe Icône Pièce jointe pour importer une image des couleurs ou du style que vous souhaitez utiliser. Si vous préférez utiliser un prompt, essayez :

 Add color to the design of the app. Use modern, clean colors that adhere
 to accessibility standards and have a calming feel.

Modifier le texte utilisé dans l'application

Par exemple, au lieu de "Tuteur chatbot IA", vous pouvez simplement indiquer "Chat" :

 Change the text "AI Chatbot Tutor" to "Chat".

Ajuster l'interface utilisateur de l'application pour la rendre plus intuitive

Par exemple, au lieu de demander à l'utilisateur d'appuyer sur un bouton pour envoyer du texte, vous pouvez lui permettre d'appuyer sur Return sur son clavier :

 In the story generator section, allow the user to press the return key on
 the keyboard to submit the text.

Ajouter une option permettant à l'utilisateur de choisir entre le mode clair et le mode sombre

De nombreux utilisateurs préfèrent avoir le choix entre un thème clair ou sombre pour l'application. Réfléchissez à l'emplacement logique de ce bouton bascule :

 Add an icon in the upper right corner to dynamically switch the color theme of
 the app between dark mode and light mode.

Conseils pour les prompts et le débogage

  • Obtenir de l'aide pour les requêtes : si vous avez du mal à expliquer à l'agent de prototypage d'applications ce que vous voulez, essayez de demander à Gemini pour Google de vous aider à affiner votre requête. En savoir plus sur les requêtes efficaces
  • Tester sur d'autres appareils : en mode Prototype, cliquez sur icône Lien Partager le lien d'aperçu pour tester votre application sur d'autres appareils.
  • Utilisez les outils intégrés : en mode Code, utilisez les fonctionnalités de débogage et de reporting intégrées de Firebase Studio pour inspecter, déboguer et auditer votre application.
  • Commencez simplement : travaillez sur une fonctionnalité à la fois. Envisagez de commencer par un ensemble de fonctionnalités de base dans votre prototype, puis de l'étendre une fois qu'elles fonctionnent comme prévu.
  • Décrivez les bugs : si quelque chose ne fonctionne pas, décrivez le comportement actuel à l'agent App Prototyping, suivi du comportement souhaité.
  • Effectuez un rollback si nécessaire : si l'agent de prototypage d'applications ne comprend pas une requête ou introduit un problème difficile à résoudre, cliquez sur le bouton Restaurer pour revenir à une version antérieure de l'application et réessayez avec une autre requête.

6. (Facultatif) Publier votre application

Facultatif : Pour utiliser l'exemple de version de l'application à partir de ce point, téléchargez et faites glisser ces fichiers dans le volet "Explorateur" de Firebase Studio en mode Code.

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.

  1. Cliquez sur Publier pour créer un projet Firebase et commencer la configuration d'App Hosting. Le volet Publier votre application s'affiche.
  2. À l'étape Projet Firebase, notez le nom du projet Firebase qui a été créé pour vous, puis cliquez sur Suivant.
  3. À l'étape Associer un compte de facturation Cloud, choisissez l'une des options suivantes :
    1. Sélectionnez le compte de facturation Cloud que vous souhaitez associer à votre projet Firebase.
    2. Si vous ne possédez pas de compte de facturation Cloud ou si vous souhaitez en créer un, cliquez sur Créer un compte de facturation Cloud. Le texte Google Cloud s'ouvre, et vous pouvez créer un compte de facturation Cloud en libre-service. Une fois le compte créé, revenez à Firebase Studio et sélectionnez-le dans la liste "Associer la facturation Cloud".
  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é API Gemini 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 d'App Hosting. Cette opération peut prendre jusqu'à 10 minutes. Pour en savoir plus sur ce qui se passe en coulisses, consultez Processus de compilation App Hosting.
  6. Une fois le déploiement terminé, 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 exemple.com ou app.exemple.com) au lieu du domaine généré par Firebase, vous pouvez ajouter un domaine personnalisé dans le texte Firebase.

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

7. (Facultatif) Surveiller votre application

Le panneau Vue d'ensemble de l'application d'App Hosting fournit des métriques et des informations clés sur votre application. Il vous permet de surveiller les performances de votre application Web à l'aide des outils d'observabilité intégrés d'App Hosting. Une fois votre site déployé, vous pouvez accéder à l'aperçu 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écapitulatif 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 le texte 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 Gérer les déploiements et les versions.

8. Conclusion

Félicitations ! Vous avez créé une application à l'aide de Firebase Studio. Vous pouvez ajouter beaucoup d'autres éléments à l'application, comme un dictionnaire plus complet, d'autres langues, de l'audio, des animations ou une sélection de difficulté. N'hésitez pas à continuer à jouer avec votre application ou à créer quelque chose de nouveau.

En savoir plus :