Présentation des tests avec Gemini Code Assist

1. Introduction

Dans cet atelier, vous allez utiliser Gemini Code Assist, un collaborateur optimisé par l'IA dans Google Cloud, pour ajouter des tests à une application Web Python existante, et trouver et corriger les erreurs de cette application révélées par les tests. Vous utiliserez ensuite Code Assist pour créer des tests pour les nouvelles fonctionnalités et générer du code pour réussir ces tests et étendre l'application.

Ce que vous allez effectuer...

  • Vous utiliserez l'éditeur Cloud Shell pour télécharger le code d'une application Web existante.
  • Vous utiliserez le chat Gemini Code Assist dans l'éditeur Cloud Shell pour poser des questions d'ordre général sur Google Cloud.
  • Vous utiliserez l'aide au codage intégrée de Gemini Code Assist dans l'éditeur Cloud Shell pour générer des tests pour l'application, les exécuter, trouver et corriger les erreurs, puis étendre les fonctionnalités de l'application.

Ce que vous allez apprendre...

  • Utiliser Gemini Code Assist pour plusieurs tâches de développement (par exemple, générer du code et des tests)
  • Utiliser Gemini Code Assist pour en savoir plus sur Google Cloud

Ce dont vous avez besoin...

  • Navigateur Web Chrome
  • Un compte Gmail
  • Un projet Cloud pour lequel la facturation est activée
  • Gemini Code Assist activé pour votre projet cloud

Cet atelier s'adresse aux développeurs de tous niveaux, y compris aux débutants. Bien que l'exemple d'application soit en langage Python, vous n'avez pas besoin de maîtriser la programmation Python pour comprendre le processus. L'objectif est de vous familiariser avec les fonctionnalités de Gemini Code Assist pour les développeurs.

2. Configuration

Pour cet atelier, vous devriez déjà disposer d'un projet Cloud pour lequel la facturation est activée. Nous allons maintenant activer l'API Gemini dans notre projet Google Cloud. Suivez les étapes ci-dessous :

  1. Accédez à https://console.cloud.google.com et veillez à sélectionner le projet Google Cloud que vous comptez utiliser dans cet atelier. Cliquez sur l'icône Gemini située en haut à droite.

GeminiBanner.png

  1. La fenêtre Gemini pour la console Cloud s'ouvre sur le côté droit de la console. Cliquez sur le bouton Activer si vous le voyez ci-dessous. Si le bouton Activer n'est pas affiché et que vous voyez à la place une interface de chat, vous avez déjà activé Gemini pour Cloud pour le projet. Vous pouvez alors passer directement à l'étape suivante.

GeminiApiEnable.png

  1. Une fois Gemini activé, vous pouvez effectuer un test en lui posant une ou deux questions. Vous en trouverez ci-dessous quelques exemples. Vous pouvez demander Qu'est-ce que Cloud Run ?.

GeminiChatWindow.png

Code Assist répondra à votre question. Pour fermer la fenêtre de chat de l'assistance au codage, vous pouvez cliquer sur l'icône f68286b2b2ea5c0a.png située en haut à droite.

Activer Gemini dans l'éditeur Cloud Shell

Gemini Code Assist est disponible et se comporte de manière similaire dans plusieurs IDE populaires. Dans cet atelier de programmation, vous allez utiliser l'éditeur Google Cloud Shell, qui s'exécute entièrement dans votre navigateur Web. Pour cela, vous devez activer et configurer Gemini dans l'éditeur Cloud Shell comme suit :

  1. Lancez Cloud Shell en cliquant sur l'icône ci-dessous. Comptez une ou deux minutes pour que l'instance Cloud Shell démarre.

72dc3df7b007fcde.png

  1. Cliquez sur le bouton Éditeur ou Ouvrir l'éditeur (selon le cas) et attendez que l'éditeur Cloud Shell s'affiche. Si le bouton Essayer le nouvel éditeur est affiché, cliquez dessus.

CloudShellEditor.png

  1. Cliquez sur le bouton Cloud Code – Se connecter dans la barre d'état inférieure (voir ci-dessous). Autorisez le plug-in comme indiqué. Si Cloud Code – Aucun projet est affiché dans la barre d'état, cliquez dessus. Dans la liste des projets, sélectionnez le projet Google Cloud que vous comptez utiliser.

CloudCodeSignIn.png

  1. Si l'icône Gemini n'est pas affichée dans la barre d'état en bas à droite, vous devez l'activer dans Cloud Code. Avant cela, assurez-vous que Gemini (anciennement Duet AI pour les développeurs) est activé dans l'IDE en accédant à l'extension Cloud Code → Paramètres, puis en saisissant le texte Duet AI : Activer, comme illustré ci-dessous. Assurez-vous que la case est cochée. Vous devez actualiser votre IDE. Gemini est alors activé dans Cloud Code, et la barre d'état Gemini s'affiche dans votre IDE.

EnableDuetAiSetting.png

  1. Cliquez sur le bouton Gemini en bas à droite, comme illustré, puis sélectionnez le projet Google Cloud approprié pour lequel vous avez activé l'API Cloud AI Companion.

GeminiSelectGoogleCloudProject.png

  1. Une fois que vous avez sélectionné votre projet Google Cloud, vérifiez que le message d'état Cloud Code s'affiche dans la barre d'état et que Gemini est également activé à droite, dans la barre d'état, comme illustré ci-dessous :

GeminiEnabledStatusBar.png

Gemini Code Assist est prêt à être utilisé.

3. Télécharger et examiner l'application

Dans la fenêtre du terminal, exécutez la commande pour cloner le dépôt avec le code de départ, puis passez au nouveau répertoire (si la fenêtre du terminal n'est plus ouverte, cliquez sur le bouton Terminal ou Ouvrir le terminal pour la restaurer) :

git clone https://github.com/GoogleCloudPlatform/testing-with-duet-ai-codelab.git
cd testing-with-duet-ai-codelab

Ouvrez main.py dans l'éditeur, puis ouvrez la fenêtre Gemini Chat en cliquant sur l'icône Gemini Chat à gauche de l'éditeur. Cette fenêtre Chat Gemini se trouve dans l'IDE et le code de l'IDE est disponible comme contexte pour la discussion. Saisissez la requête Explique-moi ça et consultez la réponse :

GeminiChatExplainThis.png

Vous pouvez faire défiler cette fenêtre de chat pour voir l'intégralité de la réponse. L'explication indique que nous pouvons exécuter ce programme en local avec la commande python3 main.py dans la fenêtre du terminal.

4. Exécuter localement

Si nécessaire, accédez au répertoire du dépôt avec cd ~/testing-with-duet-ai-codelab, puis saisissez la commande python3 main.py dans la fenêtre du terminal :

3bf558e9cea15375.png

Cliquez sur le lien http://127.0.0.1:8080 pour ouvrir un nouvel onglet de navigateur sur la page d'accueil de l'application :

fb06f382a4c03e4c.png

L'application s'exécute "localement". En fait, l'éditeur Cloud Shell a fait un peu de magie ici. L'application s'exécute dans Cloud Shell, et non sur votre ordinateur. Lorsque vous avez cliqué sur le lien, un onglet s'est ouvert, non pas sur l'adresse locale réelle http://127.0.0.1:8080, mais sur un serveur proxy configuré à cet effet par Cloud Shell. L'effet est le même que si vous l'exécutiez réellement en local.

Essayez-le ! Saisissez 25, puis appuyez sur Convertir.

e1b9d5832f6d0058.png

C'est exact ! 25 s'écrit XXV en chiffres romains. Vous devez avoir terminé.

Vérifiez peut-être d'autres numéros. 25 a fonctionné, mais qu'en est-il de 24 ?

37982e385e17baac.png

Peut-être avons-nous été un peu trop hâtifs en pensant que tout allait bien. XXIIII est-il la bonne conversion pour 24 ? Ne devrait-il pas s'agir de XXIV ?

On pourrait soutenir que XXIIII est correct, mais ce n'est pas vraiment ce à quoi les gens s'attendent habituellement. Comme ce n'est pas vraiment faux (notez que de nombreuses horloges affichent 4 sous la forme du chiffre romain IIII), nous laisserons ce problème pour une future amélioration.

Et si vous essayiez les nombres négatifs ? Zéro ? Il n'existe aucun moyen de représenter ces nombres en chiffres romains. Rien ne semble revenir à l'utilisateur, ce qui ressemble à une erreur à corriger.

Les tests peuvent aider à trouver et à éliminer les erreurs. Gemini Code Assist peut nous aider à écrire et à utiliser des tests.

5. Ajouter des tests

Retournez dans la fenêtre Gemini Chat et saisissez

How can I test the number_to_roman function?

Lisez la réponse, qui devrait inclure une discussion sur le module unittest et le module pytest.

Vous pouvez demander à Gemini Code Assist d'écrire ces tests pour vous. Ouvrez calendar.py, où se trouve le code de conversion, dans l'éditeur, revenez à la fenêtre Gemini Chat et demandez à nouveau

How can I test the number_to_roman function?

La réponse est désormais plus spécifique et inclut même un module unittest que vous pouvez copier ou injecter dans un nouveau fichier :

import unittest
import calendar

class NumberToRomanTest(unittest.TestCase):

    def test_convert_1(self):
        self.assertEqual(calendar.number_to_roman(1), "I")

    def test_convert_4(self):
        self.assertEqual(calendar.number_to_roman(4), "IV")

    def test_convert_9(self):
        self.assertEqual(calendar.number_to_roman(9), "IX")

    def test_convert_40(self):
        self.assertEqual(calendar.number_to_roman(40), "XL")

    def test_convert_90(self):
        self.assertEqual(calendar.number_to_roman(90), "XC")

    def test_convert_400(self):
        self.assertEqual(calendar.number_to_roman(400), "CD")

    def test_convert_900(self):
        self.assertEqual(calendar.number_to_roman(900), "CM")

    def test_convert_1990(self):
        self.assertEqual(calendar.number_to_roman(1990), "MCMXC")

    def test_convert_2023(self):
        self.assertEqual(calendar.number_to_roman(2023), "MMXXIII")

Le code que vous verrez peut être différent de celui de l'exemple ci-dessus. Les modèles sous-jacents de Gemini Code Assist sont mis à jour de temps en temps. Les réponses ne seront donc pas toujours les mêmes. Si vous voyez un ensemble de code différent, vous pouvez maintenant choisir de continuer avec les exemples présentés dans cet atelier de programmation en copiant le code affiché ici, ou vous pouvez essayer la réponse alternative que Gemini Code Assist vous donne maintenant. Si vous avez le temps, vous pouvez même essayer les deux chemins. Gemini Code Assist est un assistant de codage que vous pouvez utiliser comme bon vous semble.

Cliquez sur la double flèche en haut à droite de la fenêtre Gemini Chat pour créer un fichier contenant le code de test unitaire, ou utilisez l'IDE pour créer un fichier et collez-y le code affiché dans cet atelier. Appuyez sur Ctrl+S ou Cmd+S dans cette fenêtre pour l'enregistrer, puis nommez le fichier enregistré calendar-unittest.py.

Revenez au terminal et appuyez sur CTRL+C pour arrêter le serveur Web que vous avez laissé en cours d'exécution plus tôt, et obtenir une invite de commande. Saisissez la commande.

python3 calendar-unittest.py

pour exécuter les nouveaux tests.

Aucun résultat n'est produit. Ce n'est pas ce qui était attendu. Tout s'est-il passé silencieusement ? Vous voulez en être sûr. Recherchez la réponse de Gemini Code Assist qui inclut le code de test. Sous le code, des informations supplémentaires expliquaient comment exécuter le cas de test :

run-unittest.png

Essayez d'exécuter la commande recommandée :

python -m unittest discover

Vous pouvez rencontrer un problème si votre machine n'associe pas la commande python3 à python. Dans ce cas, exécutez la commande suivante :

python3 -m unittest discover

La commande s'exécute, mais renvoie Ran 0 tests in 0.000s. Le module contient plusieurs tests. Que se passe-t-il ?

Il s'agit du dernier mot de la commande, discover. D'où vient-il ? Apparemment, Gemini Code Assist s'attendait à ce que le code de test soit enregistré dans un fichier nommé discover ou discover.py, mais ne l'a pas précisé. Puisque vous avez enregistré le fichier dans calendar-unittest.py, essayez d'exécuter la commande suivante :

python3 -m unittest calendar-unittest

Vous devriez maintenant voir de nombreux résultats, en commençant par quelque chose comme ceci :

$ python3 -m unittest calendar-unittest
.F.FFFFFF
======================================================================
FAIL: test_convert_1990 (calendar-unittest.NumberToRomanTest)
----------------------------------------------------------------------
Traceback (most recent call last):
  File "/home/charles_engelke/testing-with-duet-ai-codelab/calendar-unittest.py", line 28, in test_convert_1990
    self.assertEqual(calendar.number_to_roman(1990), "MCMXC")
AssertionError: 'MDCCCCLXXXX' != 'MCMXC'
- MDCCCCLXXXX
+ MCMXC

La première ligne affiche un point pour chaque test réussi et un F pour chaque test échoué. La plupart des tests échouent. Il liste ensuite les tests ayant échoué individuellement, en affichant le résultat attendu et le résultat réel. L'ordre dans lequel ces tests ont été effectués n'est pas très clair. Ils étaient classés par ordre alphabétique du nom du test, et non dans l'ordre dans lequel ils apparaissaient dans le fichier. test_convert_1 s'est exécuté en premier, puis test_convert_1990, puis test_convert_2023, et ainsi de suite. Seuls les cas de test pour 1 et 2023 ont réussi.

Lorsque vous avez essayé ce code pour la première fois, vous avez remarqué qu'il convertissait 24 en XXIIII. Ce n'était pas tout à fait faux, mais ce n'était pas la forme courante où IIII est converti en IV. Tous les tests qui ont échoué concernaient des cas similaires. Lorsque ce problème a été constaté pour la première fois, le laboratoire a déclaré : "Comme ce n'est pas vraiment faux (notez que de nombreuses horloges affichent 4 comme chiffre romain IIII), nous laisserons ce problème pour une future amélioration."

Vous pouvez modifier les cas de test pour qu'ils s'attendent à recevoir les réponses "pas vraiment fausses" que le code fournit et les acceptent, ou accepter qu'il soit temps de mettre en place cette "amélioration future". Votre prochaine étape consiste donc à corriger le code, avec l'aide de Gemini Code Assist, pour fournir les réponses plus acceptables attendues par les tests.

6. Améliorer le code

Rappelons que les réponses telles que XXIIII pour 24, au lieu de la réponse plus courante XXIV, ont été jugées "pas vraiment fausses" et ont été reportées pour une future amélioration. Ce futur est désormais une réalité. Ces réponses "pas vraiment fausses" restent agaçantes.

La première règle concernant les chiffres romains répétés est la suivante : chaque fois que vous avez quatre chiffres identiques à la suite, ils doivent être remplacés par l'un des chiffres suivi du chiffre immédiatement supérieur. XXIIII doit donc être remplacé par XXIV. De même, XXXX doit être remplacé par XL, et CCCC doit devenir CD.

Demandez à Gemini Code Assist comment modifier la valeur de la variable roman de cette manière juste avant qu'elle ne soit renvoyée par number_to_roman :

If the final value of roman has IIII in it, that should be replaced by IV. Similarly XXXX should be replaced by XL, and CCCC should become CD. How can I make those changes?

La suggestion consiste à ajouter du code à la fin :

6437c3fa2c5fabd1.png

Copiez/collez ou saisissez ces lignes dans l'éditeur, puis regardez ce qui se passe :

dcefa568cab82fb7.png

Gemini Code Assist a ajouté des lignes pour gérer les cas auxquels vous pouvez être confronté après avoir effectué le premier ensemble de substitutions. Par exemple, 19 serait converti en XVIIII, puis en XVIV, et enfin en XIX, qui est la forme correcte.

Si Gemini Code Assist a fait des suggestions apparemment utiles, appuyez sur Tabulation pour les accepter, enregistrez le fichier et exécutez à nouveau le serveur Web. Dans le cas contraire, ajoutez manuellement les lignes indiquées dans l'exemple ci-dessous, puis enregistrez le fichier. Essayez une conversion difficile : 1999 :

a206999587fdc9.png

Bonne réponse.

Exécutez à nouveau les tests. Elles sont toutes valides !

L'application Web semble prête à être mise en production.

7. Déployer dans Cloud Run

Cloud Run exécutera une application conteneurisée sur Internet pour vous. Pour les applications écrites à l'aide de frameworks courants, comme Flash, la commande gcloud run deploy compilera même ce conteneur pour vous avant de le déployer. Exécutez la commande suivante :

gcloud run deploy

Dans le terminal. Lorsque vous êtes invité à indiquer l'emplacement du code source, appuyez sur la touche Entrée pour accepter l'emplacement suggéré. De même, lorsque vous êtes invité à saisir un nom de service, appuyez sur Entrée pour accepter la suggestion.

La commande peut échouer, car gcloud ne parvient pas à déterminer le projet à utiliser. Dans ce cas, exécutez la commande suivante :

gcloud config set core/project <project-id>

est remplacé par l'ID de votre projet, qui peut être identique à son nom. Exécutez ensuite à nouveau la commande gcloud run deploy.

  • La commande vous indiquera que certaines API sont nécessaires et ne sont pas encore activées. Saisissez "y" pour les activer.
  • Lorsque vous êtes invité à sélectionner une région, choisissez-en une qui vous convient. Saisir le numéro correspondant à us-central1 est un choix sûr.
  • Lorsque vous y êtes invité, saisissez "Y" pour continuer.
  • Vous devez autoriser les appels non authentifiés de ce service Cloud Run. L'option d'authentification utilisée par Cloud Run convient aux programmes appelant le service. Comme il s'agit d'un site Web, vous n'utiliserez pas l'authentification.

Google Cloud créera le conteneur, le déploiera, y acheminera le trafic et définira les règles d'accès, puis vous montrera le lien vers la page d'accueil :

94ba7d8d63a44afd.png

Vous pouvez accéder à votre application en cliquant sur ce lien.

a2e51666dfd33a9f.png

Saisissez un nombre et appuyez sur Entrée. Et voilà !

5021535ac991a95c.png

Quoi ?!

Et c'est une réussite ! Pourquoi cette opération n'est-elle pas terminée ?

En savoir plus Demander à Gemini Code Assist,

Why am I getting an internal server error on cloud run?

4b24321251d6eddf.png

Apparemment, Gemini Code Assist peut lire le fichier journal, qui indique quelque chose de similaire. Demandons à Gemini Code Assist comment consulter les journaux :

92d1855be73ef1d.png

Faites-le. Recherchez les lignes comportant des indicateurs d'erreur rouges !!, comme ci-dessous :

9bed4f9ed82de21c.png

De nombreuses lignes de détails sur la pile d'appels sont ensuite affichées, mais voici ce qui suit :

47fc93be845f4e3f.png

Lorsque vous examinez votre fichier calendar.py, vous voyez la fonction number_to_roman. Vous savez que c'est la bonne réponse, car elle a fonctionné sur votre machine. Quelles différences peuvent exister dans Cloud Run ?

La réponse est délicate. Un module standard est inclus avec Python3, appelé calendar, tout comme le fichier calendar.py dans lequel la fonction number_to_roman est définie. Sur votre ordinateur local, lorsque Python recherchait un module appelé calendar, il commençait par parcourir le répertoire de votre application. Apparemment, Python sur Cloud Run a d'abord recherché les modules standards, les a importés et n'a pas trouvé de fonction number_to_roman.

Ces types de différences entre les environnements sont toujours possibles. Heureusement, lorsqu'une application est conteneurisée, elle transporte son environnement avec elle. Vous pouvez donc vous attendre au même comportement où que vous l'exécutiez. Si vous aviez exécuté la même application conteneurisée localement que Cloud Run, vous auriez rencontré le même problème.

Résoudre ce problème Vous devez remplacer le nom de votre module d'agenda local par un nom qui n'est pas également un nom de module standard. Renommez le fichier calendar.py en my_calendar.py, puis remplacez les lignes import calendar dans main.py et calendar-unittest.py par import my_calendar. Enfin, modifiez la ligne

roman = calendar.number_to_roman(number)

pour

roman = my_calendar.number_to_roman(number)

Testez-le localement, exécutez les tests, puis redéployez :

gcloud run deploy

Et maintenant, ça marche :

ed288801c6825eb1.png

Vous pouvez partager cette URL. Toute personne ayant besoin d'un outil de conversion en chiffres romains peut utiliser le vôtre.

8. Facultatif : Améliorer l'apparence

Votre application fonctionne correctement et est accessible à tous les internautes. Mais il est un peu simple. Avant de le montrer à tout le monde, pourquoi ne pas demander à Gemini Code Assist d'améliorer son apparence ?

Ouvrez le fichier templates/index.html. Dans la fenêtre de chat Gemini, posez la question suivante :

Make this index.html file use material design.

La réponse consiste à ajouter des éléments au fichier actuel, ce qui donne un résultat semblable à ce qui suit :

<!DOCTYPE html>
<html>
<head>
    <title>Roman Numerals</title>
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">   
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>     
</head>
<body>
    <h1 class="mdl-typography--title">Roman Numerals</h1>
    <form action="/convert" method="post">
        <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text" id="number" name="number" required />
            <label class="mdl-textfield__label" for="number">Enter a number:</label>
          </div>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
            Convert!
          </button>
    </form>
</body>
</html>

Utilisez l'icône pour copier le code suggéré et le coller sur le contenu existant de index.html. Dans le terminal, exécutez python3 main.py et cliquez sur le lien pour ouvrir une fenêtre d'aperçu. La page est désormais un peu moins simple :

295643ec03fcaafc.png

Vous pouvez répéter cette opération avec le fichier convert.html si vous le souhaitez.

Gemini Code Assist connaît bien le CSS et peut vous aider à styliser les pages de l'application de différentes manières. Ce n'est qu'un début.

Comme vous souhaitez partager cette application, n'oubliez pas de la redéployer sur Cloud Run :

gcloud run deploy

Vous pouvez transmettre l'URL aux personnes qui ont besoin de convertir des nombres en chiffres romains.

9. Félicitations !

Félicitations ! Vous avez utilisé Gemini Code Assist pour ajouter des tests à une application, corriger des erreurs et ajouter des fonctionnalités améliorées.

Lorsque vous avez terminé d'utiliser l'application que vous avez créée, vous pouvez la supprimer du tableau de bord de la console Cloud pour éviter d'éventuels frais futurs.

Documents de référence...