GSP1330

Présentation

Gemini est un collaborateur optimisé par l'IA qui aide les équipes de développement à créer, déployer et exploiter des applications plus rapidement et plus efficacement.

Dans cet atelier, vous allez découvrir comment Gemini pour les développeurs peut vous aider à déboguer votre code et à générer des tests unitaires, par exemple pour vérifier les conditions limites dans votre code.

Les ateliers de ce cours couvrent un cycle de vie du développement logiciel (SDLC) typique du point de vue des développeurs d'applications. Les autres aspects du SDLC (exigences, sécurité, surveillance, etc.) seront abordés dans d'autres cours.

Objectifs

Cet atelier explique comment utiliser Gemini pour les développeurs aux fins suivantes :

• Identifier et résoudre les erreurs d'exécution
• Générer des tests unitaires pour des fonctions

Points abordés

Cymbal Superstore est une plate-forme d'achat en ligne en pleine croissance qui cherche à s'améliorer en permanence pour rester compétitive. Dans le cadre de son développement, une nouvelle fonctionnalité appelée "Nouveaux produits" a été conçue, permettant aux utilisateurs de découvrir facilement les derniers articles ajoutés à l'inventaire.

Le nouveau point de terminaison newproducts a été déployé en préproduction, mais il ne correspond pas tout à fait aux attentes du dirigeant de l'entreprise. Vous devez apporter quelques modifications et déboguer le nouveau code. Afin de centrer l'atelier sur l'aide que Gemini pour les développeurs peut vous apporter, le nouveau code sera intégré à la base de code existante. Vous devrez également développer des tests unitaires pour les services de backend.

Préparation

Avant de cliquer sur le bouton "Démarrer l'atelier"

Lisez ces instructions. Les ateliers sont minutés, et vous ne pouvez pas les mettre en pause. Le minuteur, qui démarre lorsque vous cliquez sur Démarrer l'atelier, indique combien de temps les ressources Google Cloud resteront accessibles.

Cet atelier pratique vous permet de suivre les activités dans un véritable environnement cloud, et non dans un environnement de simulation ou de démonstration. Des identifiants temporaires vous sont fournis pour vous permettre de vous connecter à Google Cloud le temps de l'atelier.

Pour réaliser cet atelier :

• Vous devez avoir accès à un navigateur Internet standard (nous vous recommandons d'utiliser Chrome).

Remarque : Ouvrez une fenêtre de navigateur en mode incognito (recommandé) ou de navigation privée pour effectuer cet atelier. Vous éviterez ainsi les conflits entre votre compte personnel et le compte temporaire de participant, qui pourraient entraîner des frais supplémentaires facturés sur votre compte personnel.

• Vous disposez d'un temps limité. N'oubliez pas qu'une fois l'atelier commencé, vous ne pouvez pas le mettre en pause.

Remarque : Utilisez uniquement le compte de participant pour cet atelier. Si vous utilisez un autre compte Google Cloud, des frais peuvent être facturés à ce compte.

Démarrer l'atelier et se connecter à la console Google Cloud

1. Cliquez sur le bouton Démarrer l'atelier. Si l'atelier est payant, une boîte de dialogue s'affiche pour vous permettre de sélectionner un mode de paiement. Sur la gauche, vous trouverez le panneau "Détails concernant l'atelier", qui contient les éléments suivants :

   • Le bouton "Ouvrir la console Google Cloud"
   • Le temps restant
   • Les identifiants temporaires que vous devez utiliser pour cet atelier
   • Des informations complémentaires vous permettant d'effectuer l'atelier

2. Cliquez sur Ouvrir la console Google Cloud (ou effectuez un clic droit et sélectionnez Ouvrir le lien dans la fenêtre de navigation privée si vous utilisez le navigateur Chrome).

   L'atelier lance les ressources, puis ouvre la page "Se connecter" dans un nouvel onglet.

   Conseil : Réorganisez les onglets dans des fenêtres distinctes, placées côte à côte.

   Remarque : Si la boîte de dialogue Sélectionner un compte s'affiche, cliquez sur Utiliser un autre compte.

3. Si nécessaire, copiez le nom d'utilisateur ci-dessous et collez-le dans la boîte de dialogue Se connecter.

   {{{user_0.username | "Username"}}}

   Vous trouverez également le nom d'utilisateur dans le panneau "Détails concernant l'atelier".

4. Cliquez sur Suivant.

5. Copiez le mot de passe ci-dessous et collez-le dans la boîte de dialogue Bienvenue.

   {{{user_0.password | "Password"}}}

   Vous trouverez également le mot de passe dans le panneau "Détails concernant l'atelier".

6. Cliquez sur Suivant.

   Important : Vous devez utiliser les identifiants fournis pour l'atelier. Ne saisissez pas ceux de votre compte Google Cloud. Remarque : Si vous utilisez votre propre compte Google Cloud pour cet atelier, des frais supplémentaires peuvent vous être facturés.

7. Accédez aux pages suivantes :

   • Acceptez les conditions d'utilisation.
   • N'ajoutez pas d'options de récupération ni d'authentification à deux facteurs (ce compte est temporaire).
   • Ne vous inscrivez pas à des essais sans frais.

Après quelques instants, la console Cloud s'ouvre dans cet onglet.

Remarque : Pour accéder aux produits et services Google Cloud, cliquez sur le menu de navigation ou saisissez le nom du service ou du produit dans le champ Recherche.

Activer Cloud Shell

Cloud Shell est une machine virtuelle qui contient de nombreux outils pour les développeurs. Elle comprend un répertoire d'accueil persistant de 5 Go et s'exécute sur Google Cloud. Cloud Shell vous permet d'accéder via une ligne de commande à vos ressources Google Cloud.

1. Cliquez sur Activer Cloud Shell  en haut de la console Google Cloud.

2. Passez les fenêtres suivantes :

   • Accédez à la fenêtre d'informations de Cloud Shell.
   • Autorisez Cloud Shell à utiliser vos identifiants pour effectuer des appels d'API Google Cloud.

Une fois connecté, vous êtes en principe authentifié et le projet est défini sur votre ID_PROJET : . Le résultat contient une ligne qui déclare l'ID_PROJET pour cette session :

Your Cloud Platform project in this session is set to {{{project_0.project_id | "PROJECT_ID"}}}

gcloud est l'outil de ligne de commande pour Google Cloud. Il est préinstallé sur Cloud Shell et permet la complétion par tabulation.

3. (Facultatif) Vous pouvez lister les noms des comptes actifs à l'aide de cette commande :

gcloud auth list

4. Cliquez sur Autoriser.

Résultat :

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} To set the active account, run: $ gcloud config set account `ACCOUNT`

5. (Facultatif) Vous pouvez lister les ID de projet à l'aide de cette commande :

gcloud config list project

Résultat :

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} Remarque : Pour consulter la documentation complète sur gcloud, dans Google Cloud, accédez au guide de présentation de la gcloud CLI.

Tâche 1 : Examiner, générer et tester le code

Définir des variables d'environnement

1. Dans Cloud Shell, exécutez la commande suivante pour définir les variables d'environnement nécessaires.

export PROJECT_ID=$(gcloud config get-value project) export REGION={{{project_0.default_region|Lab Region}}} export ZONE={{{project_0.startup_script.lab_zone|Lab Zone}}}

2. Copiez les fichiers nécessaires dans Cloud Shell à partir du bucket Cloud Storage.

gsutil -m cp -r gs://duet-appdev/cymbal-superstore .

Examiner le code

Outre sa capacité à expliquer les segments de code que vous ne connaissez pas, Gemini peut aussi créer des commentaires à ajouter à votre code pour en faciliter la compréhension lors des futurs cycles de maintenance.

3. Ouvrez l'éditeur en cliquant sur l'option Ouvrir l'éditeur en haut à droite de la fenêtre Cloud Shell.

L'éditeur Visual Studio Code s'ouvre. Vous pouvez afficher l'éditeur dans une nouvelle fenêtre à l'aide de l'option disponible dans la barre de menu de Cloud Shell.

4. Accédez à File > Open Folder... (Fichier > Ouvrir un dossier…).

5. Sélectionnez le répertoire cymbal-superstore, puis cliquez sur OK.

Le dossier sélectionné doit maintenant être visible dans la section Explorer (Explorateur) de l'éditeur Visual Studio Code.

6. Ouvrez le fichier index.ts situé dans le dossier backend.

7. En haut à droite du fichier, cliquez sur la flèche à côté de Gemini .

8. Cliquez sur Select Gemini Code Assist Project (Sélectionner un projet Gemini Code Assist) afin de sélectionner le projet à utiliser pour Gemini. Dans la liste, sélectionnez l'ID de projet .

9. Si une invite s'affiche en bas de l'éditeur indiquant que Gemini Code Assist n'est pas activé pour le projet sélectionné, cliquez sur le bouton Enable API (Activer l'API) dans celle-ci.

Générer le code

10. Dans le fichier index.ts, descendez jusqu'à la ligne 102, où vous trouverez le texte suivant : /newproducts endpoint code goes here. Remplacez cette ligne par le commentaire ci-dessous.

{{{project_0.startup_script.prompt_1 | "Comment 1"}}} {{{project_0.startup_script.prompt_2 | "Comment 2"}}}

11. Sélectionnez le commentaire que vous venez d'ajouter, puis cliquez sur l'icône représentant une ampoule jaune qui s'affiche. Dans la liste, cliquez sur l'option Gemini: Generate code (Gemini : générer du code).

12. Gemini affiche des suggestions de code. Examinez le code suggéré et acceptez-le en cliquant sur Accepter ou en appuyant sur la touche Tabulation. Le code devrait ressembler à cet exemple.

Remarque :

1. Gemini a compris la signification de l'expression "are in stock". Il s'agit d'une expression assez courante, dont le sens est bien connu. C'est pourquoi Gemini l'a utilisée ici. Si votre exigence était moins courante, un exemple aurait pu être nécessaire.
2. Grâce à la propriété de données "quantity", Gemini a pu faire le lien avec le concept de disponibilité en stock. Si vous nommez vos variables, propriétés et méthodes avec des raccourcis, des abréviations ou d'autres termes non conventionnels, non seulement votre code sera plus difficile à maintenir par d'autres développeurs, mais les suggestions de Gemini seront également moins précises.
3. Bien que cela n'ait pas été spécifié, Gemini a suggéré un code intégrant une vérification de l'état de la base de données pour assurer la cohérence avec les autres points de terminaison du fichier.

Tester le code

13. Revenez au terminal Cloud Shell en cliquant sur le bouton Ouvrir le terminal dans la barre d'outils de la fenêtre Cloud Shell. Dans le terminal Cloud Shell, exécutez la commande suivante :

cd ~/cymbal-superstore/backend npm run start

Le résultat doit ressembler à ceci :

14. Ouvrez un autre terminal dans Cloud Shell en cliquant sur l'option + dans la barre d'outils de la fenêtre Cloud Shell, puis appelez le point de terminaison sur localhost.

curl localhost:8000/newproducts

Observez le résultat dans le premier terminal. Vous constatez que l'opération a été annulée et qu'une erreur s'est produite.

Le résultat doit ressembler à ceci :

Cliquez sur Vérifier ma progression pour valider l'objectif. Générer et tester le code

Tâche 2 : Enquêter avec Gemini Chat

1. Ouvrez le fichier index.ts dans l'éditeur.

2. Ouvrez Gemini Chat (comme indiqué dans la capture d'écran) et saisissez le message d'erreur rencontré dans la zone de saisie.

{{{project_0.startup_script.prompt_2_1 | "Error message to be entered in the prompt"}}}

Le résultat doit ressembler à ceci :

Remarque : Gemini génère des résultats différents à chaque exécution. Il est donc possible que les résultats que vous obtenez ne correspondent pas à cette réponse.

3. Examinez le code pour résoudre le problème. Vous identifiez l'origine de l'erreur dans la commande ci-dessous :

const query = firestore const products = await firestore .collection("inventory") .where("timestamp", ">", new Date(Date.now() - 604800000)) .where("quantity", ">", 0); .where("timestamp", ">=", sevenDaysAgo) .where("quantity", ">", 0) .get();

Gemini vous suggère de modifier les filtres pour qu'ils deviennent des filtres d'égalité ou de supprimer l'un des filtres d'inégalité.

Commençons par supprimer le filtre de quantité de l'appel Firestore pour résoudre l'erreur.

4. Pour supprimer le filtre d'inégalité sur la quantité, supprimez l'extrait de code suivant du fichier index.ts :

.where("quantity", ">", 0);

Vous pouvez supprimer ce code pour que la fonction s'exécute sans erreur. Cependant, les produits dont la quantité est de 0 ne pourront pas être exclus de la réponse de l'API. Par conséquent, ils ne respecteront pas l'exigence métier et entraîneront un échec. Nous devons donc veiller à exclure les articles en rupture de stock. Plusieurs approches sont possibles, avec des niveaux d'efficacité différents. Nous allons donc solliciter l'aide de Gemini.

5. Posez la question ci-dessous dans Gemini Chat, en vous assurant que le fichier index.ts est ouvert.

{{{project_0.startup_script.prompt_2_2 | "Question to the Gemini Chat"}}}

Le résultat doit ressembler à ceci :

Même après avoir réinitialisé la discussion, si Gemini persiste à vous suggérer d'ajouter deux clauses "where", voici une technique pour obtenir une réponse différente.

{{{project_0.startup_script.prompt_2_3 | "Different question approach to the Gemini Chat"}}}

Gemini vous proposera souvent une solution que vous pouvez tester. Vous devrez peut-être réinitialiser la discussion et modifier votre prompt à plusieurs reprises pour obtenir une option qui ne soit pas liée à Firestore.

Remarque : Gemini peut parfois s'obstiner et ne proposer que des options Firestore aléatoires (et non valides). Dans ce cas, vous devrez simplement accepter la suggestion et passer à l'étape suivante.

Le résultat doit ressembler à ceci :

6. Modifiez le code existant en ajoutant l'extrait de code dans le fichier index.ts.

if (p.quantity > 0) { productsArray.push(p); }

Après modification, le code doit se présenter comme suit :

Tester le code après les modifications ci-dessus

7. Ouvrez le terminal Cloud Shell et collez la commande ci-dessous.

cd ~/cymbal-superstore/backend npm run start

8. Ouvrez un deuxième onglet de terminal et appelez le point de terminaison localhost.

curl localhost:8000/newproducts

Le résultat doit ressembler à ceci :

9. Essayons une autre méthode avec un commentaire en ligne et supprimons la condition ajoutée précédemment. Le code final doit ressembler à ceci :

10. Avant la ligne productsArray.push(p), ajoutez le commentaire ci-dessous. Appuyez sur Ctrl+Entrée pour générer du code. Acceptez le code s'il renvoie if (p.quantity > 0).

{{{project_0.startup_script.prompt_2_4 | "Comment message"}}}

Mettez le filtre en commentaire, ce qui devrait donner ceci :

Cliquez sur Vérifier ma progression pour valider l'objectif. Enquêter avec Gemini Chat

Remarque : Étant donné qu'il existe de nombreuses façons de coder cette correction, Gemini peut offrir plusieurs suggestions. Dans ce cas, vous devez évaluer les options. Cela peut également nécessiter des corrections de syntaxe, comme illustré ci-dessus.

Tâche 3 : Exécuter les tests

1. Accédez au terminal Cloud Shell et exécutez la commande ci-dessous.

cd cymbal-superstore/backend npm run test

Le résultat doit ressembler à ceci :

2. Ouvrez le fichier index.test.ts dans le dossier "backend". Ce fichier contient quelques tests simples développés avec l'outil supertest et le framework de test Jest. Examinez les tests existants et demandez à Gemini de vous expliquer tout ce qui n'est pas clair.

Tâche 4 : Développer des tests avec l'aide de Gemini

Dans cette tâche, vous allez écrire un test pour l'API des nouveaux produits du backend avec l'aide de Gemini.

Développer le test

1. Ouvrez le fichier index.test.ts dans le dossier "backend". Ajoutez les commentaires ci-dessous en bas du fichier.

{{{project_0.startup_script.prompt_3_1 | "Comment message 1 in index.test.ts"}}} {{{project_0.startup_script.prompt_3_2 | "Comment message 2 in index.test.ts"}}}

2. Sélectionnez le commentaire que vous venez d'ajouter, puis cliquez sur l'icône représentant une ampoule jaune qui s'affiche. Dans la liste, cliquez sur l'option Gemini: Generate code (Gemini : générer du code). Appuyez sur Tabulation pour accepter la suggestion.

Voici un exemple de code généré. Vous pouvez également coller le code ci-dessous.

describe('GET /newproducts', () => { it('should return a 200 status code', async () => { const response = await request(app) .get('/newproducts'); {{{project_0.startup_script.prompt_3_3 | "Generated code line from Gemini"}}}; }); it('should return a list of new products with length 8', async () => { const response = await request(app) .get('/newproducts'); expect(response.body.length).toBe(8); }); });

Exécuter le test

3. Exécutez les commandes ci-dessous dans le terminal Cloud Shell.

cd ~/cymbal-superstore/backend npm run test

Le résultat doit ressembler à ceci :

4. Examinez la sortie du terminal pour identifier quel test a échoué.

Remarque : Vous devriez voir une réponse indiquant que le test a échoué. La valeur 10 correspond au nombre de nouveaux produits, incluant ceux dont la quantité est égale à 0. Les nouvelles exigences métier stipulent que les articles en rupture de stock doivent être filtrés, mais le test révèle une anomalie.

Cliquez sur Vérifier ma progression pour valider l'objectif. Écrire des tests pour l'API des nouveaux produits

Corriger le bug

5. Ouvrez le fichier index.ts dans le dossier "backend" et supprimez le commentaire du filtre ajouté lors de la tâche précédente. Le code mis à jour doit ressembler à ceci :

//do not insert products that are out of stock if (p.quantity > 0) productsArray.push(p);

6. Réexécutez le test à partir du terminal Cloud Shell :

cd ~/cymbal-superstore/backend npm run test

Le résultat doit ressembler à ceci :

Tâche 5 : Tester les conditions limites

Les tests de conditions limites peuvent s'avérer complexes. Cette complexité vient de la nécessité de tenir compte de situations inattendues, comme des listes vides ou des soldes négatifs, qui ne devraient pas se produire, mais qui peuvent survenir lors de l'exécution. Voyons si Gemini peut nous aider dans ce contexte.

1. Pour obtenir la réponse la plus générique, fermez tous les fichiers ouverts. Réinitialisez Gemini Chat en cliquant sur l'icône New Chat (Nouvelle discussion) (+) située au-dessus de la discussion, puis saisissez le prompt suivant :

{{{project_0.startup_script.prompt_4_1 | "Prompt for boundary conditions"}}}

Le résultat doit ressembler à ceci :

Yes, I can definitely help you create tests for boundary conditions! Boundary value analysis is a crucial part of software testing. It involves testing at the "edges" or "boundaries" of input domains. These are often the places where errors lurk. To help you best, I'd need a little more information. For example: - What programming language are you using? - Could you provide the code (or a snippet of it) that you'd like to test? - What are the inputs and their expected valid ranges?

2. Ouvrez le fichier index.ts dans le dossier backend pour fournir des informations de contexte à Gemini. Demandez à Gemini des tests de conditions limites pour le point de terminaison /newproducts. Ouvrez Gemini Chat et saisissez le prompt suivant :

{{{project_0.startup_script.prompt_4_2 | "Prompt for boundary tests for the /newproducts endpoint"}}}

Le résultat doit ressembler à ceci :

Remarque : Il est évident que ces suggestions proviennent en partie du code lui-même (comme les critères "ajoutés au cours des sept derniers jours" et "en stock") et en partie de conditions limites plus générales que Gemini considère typiques pour ce type de code. C'est une excellente base pour commencer à créer un ensemble solide de conditions limites.

3. Pour transformer ces suggestions en tests concrets, ouvrez le fichier index.test.ts. Copiez le commentaire ci-dessous et ajoutez-le à la fin du fichier.

{{{project_0.startup_script.prompt_4_3 | "Comment message in index.test.ts file"}}}

Le résultat doit ressembler à ceci :

4. Ajoutez le code ci-dessous après le commentaire ci-dessus dans le fichier index.test.ts.

describe('GET /newproducts', () => { it('should not return products that are out of stock', async () => { const response = await request(app) .get('/newproducts'); response.body.forEach((product: any) => { expect(product.quantity).toBeGreaterThan(0); }); }); });

5. Réexécutez le test dans le terminal Cloud Shell. Vous devriez obtenir le résultat suivant.

Le résultat doit ressembler à ceci :

Cliquez sur Vérifier ma progression pour valider l'objectif. Tester les conditions limites

Félicitations !

À la fin de cet atelier, vous maîtrisez l'utilisation de Gemini pour les développeurs, ce qui vous permettra d'améliorer vos capacités de débogage de code et d'optimiser la génération de tests unitaires, en particulier lors de l'évaluation des conditions limites du code.

Dernière mise à jour du manuel : 17 octobre 2025

Dernier test de l'atelier : 17 octobre 2025

Copyright 2025 Google LLC. Tous droits réservés. Google et le logo Google sont des marques de Google LLC. Tous les autres noms d'entreprises et de produits peuvent être des marques des entreprises auxquelles ils sont associés.