Présentation des tests avec Gemini Code Assist

1. Introduction

Dans cet atelier, vous allez utiliser Gemini Code Assist, un collaborateur de Google Cloud optimisé par l'IA, pour ajouter des tests à une application Web Python existante, ainsi que pour détecter et corriger les erreurs exposées dans cette application. Vous utiliserez ensuite Code Assist pour créer des tests pour de nouvelles fonctionnalités, puis 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.
  • Pour poser des questions d'ordre général sur Google Cloud, vous utiliserez le chat de Gemini Code Assist dans l'éditeur Cloud Shell.
  • Vous utiliserez l'assistance intégrée au code de Gemini Code Assist dans l'éditeur Cloud Shell pour générer des tests pour l'application, exécuter ces tests, rechercher et corriger les erreurs, puis étendre les fonctionnalités de l'application.

Ce que vous allez apprendre...

  • Comment utiliser Gemini Code Assist pour effectuer plusieurs tâches de développement telles que la génération de tests et de code
  • 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, il n'est pas nécessaire de connaître la programmation Python pour comprendre le processus. Notre objectif est de vous familiariser avec les fonctionnalités de Gemini Code Assist pour les développeurs.

2. Préparation

Pour réaliser cet atelier, vous devez 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 qui s'affiche en haut à droite.

GeminiBanner.png

  1. La fenêtre de la console Gemini pour Cloud s'ouvre sur le côté droit de la console. Cliquez sur le bouton Activer s'il apparaît ci-dessous. Si le bouton Activer ne s'affiche pas, mais qu'une interface Chat s'affiche à la place, cela signifie que vous avez déjà activé Gemini pour Cloud pour le projet et que vous pouvez passer directement à l'étape suivante.

GeminiApiEnable.png

  1. Une fois cette fonctionnalité activée, vous pouvez tester Gemini en lui posant une ou deux requêtes. Quelques exemples de requêtes sont affichés, mais vous pouvez essayer, par exemple, Qu'est-ce que Cloud Run ?

GeminiChatWindow.png

Code Assist vous donnera la réponse à votre question. Vous pouvez cliquer sur l'icône f68286b2b2ea5c0a.png en haut à droite pour fermer la fenêtre de chat de Code Assist.

Activer Gemini dans l'éditeur Cloud Shell

Gemini Code Assist est disponible et se comporte de la même manière dans plusieurs IDE courants. Dans cet atelier de programmation, vous allez utiliser l'éditeur Google Cloud Shell, qui s'exécute entièrement dans votre navigateur Web. Vous devez activer et configurer Gemini dans l'éditeur Cloud Shell. Voici la procédure à suivre:

  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 ne s'affiche pas dans la barre d'état en bas à droite, vous devez l'activer dans Cloud Code. Avant cela, assurez-vous que Gemini (anciennement Duet AI for Developers) est activé dans l'IDE. Pour ce faire, accédez à Cloud Code Extension → Settings (Extension Cloud Code → Paramètres), puis saisissez le texte Duet AI : Enable (Duet AI : Activer) comme illustré ci-dessous. Assurez-vous que la case est cochée. Vous devez actualiser votre IDE. Cela active Gemini 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 pour lequel nous avions activé l'API Cloud AI Companion.

GeminiSelectGoogleCloudProject.png

  1. Après avoir sélectionné votre projet Google Cloud, vérifiez que le message d'état Cloud Code de la barre d'état s'affiche et que Gemini est activé à droite dans la barre d'état, comme illustré ci-dessous:

GeminiEnabledStatusBar.png

Gemini Code Assist est prêt à l'emploi.

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

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

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

Ouvrez le fichier main.py dans l'éditeur, puis ouvrez la fenêtre Gemini Chat en cliquant sur l'icône de chat Geniaux située à gauche de l'éditeur. Cette fenêtre Gemini Chat se trouve dans l'IDE et le code de celui-ci peut être utilisé comme contexte pour la discussion. Saisissez l'invite Expliquez cela et affichez la réponse:

GeminiChatExplainThis.png

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

4. Exécuter localement

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

3bf558e9cea15375.png

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

fb06f382a4c03e4c.png

L'application s'exécute "localement". En fait, l'éditeur Cloud Shell a fait un peu de magie à ce niveau. L'application s'exécute dans Cloud Shell, et non sur votre propre ordinateur. Lorsque vous avez cliqué sur le lien, un onglet s'est ouvert et non pas vers l'adresse locale réelle http://127.0.0.1:8080, mais vers un serveur proxy configuré uniquement à 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 et cliquez sur Convert! (Convertir).

e1b9d5832f6d0058.png

C'est exact, 25 fait XXV en chiffres romains ! Vous devez avoir terminé cette étape.

Vérifiez peut-être d'autres numéros. 25 ont travaillé, mais qu’en est-il du 24 ?

37982e385e17baac.png

Nous étions peut-être un peu hâtifs en pensant que tout allait bien. La valeur XXIIII est-elle la bonne conversion pour 24 ? N'est-ce pas XXIV ?

On pourrait affirmer que XXIIII a raison, mais ce n'est pas vraiment ce que les gens attendent habituellement. Cependant, ce n'est pas vraiment mauvais (notez que de nombreuses horloges indiquent 4 en chiffre romain IIII), laissez ce problème pour une amélioration ultérieure.

Pourquoi ne pas essayer les nombres négatifs ? Zéro ? Il n'est pas possible de les représenter en chiffres romains. Rien ne semble revenir à l'utilisateur, ce qui ressemble à une erreur devant être corrigée.

Les tests peuvent vous aider à détecter et éliminer les erreurs, tandis que Gemini Code Assist nous aide à écrire et à utiliser des tests.

5. Ajouter des tests

Revenez à la fenêtre de chat Gemini et demandez

How can I test the number_to_roman function?

Lisez la réponse, qui doit inclure une description des modules unittest et pytest.

Vous souhaitez peut-être que Gemini Code Assist écrit ces tests pour vous. Ouvrez calendar.py, où se trouve le code de conversion réel, dans l'éditeur, revenez à la fenêtre du chat Gemini, puis redemandez

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 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 autre ensemble de code, vous pouvez maintenant choisir de poursuivre avec les exemples présentés dans cet atelier de programmation en copiant le code affiché ici, ou vous pouvez essayer la réponse de Gemini Code Assist. Si vous avez le temps, vous pouvez même essayer les deux méthodes. 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 de chat Gemini pour créer un fichier contenant le code du test unitaire, ou utilisez l'IDE pour créer un fichier et coller le code indiqué dans cet atelier. Appuyez sur CTRL+S ou sur CMD-S dans cette fenêtre pour l'enregistrer, puis appelez 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 précédemment et obtenir une invite shell. Saisissez la commande

python3 calendar-unittest.py

pour exécuter les nouveaux tests.

Il n'y a aucun résultat. Ce n'est pas ce à quoi je m'attendais. Est-ce que tout s'est déroulé sans bruit ? Vous voudriez en être sûr. Consultez la réponse de Gemini Code Assist qui inclut le code de test. Sous le code, vous trouverez des informations supplémentaires sur l'exécution du scénario 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'alias pas la commande python3 pour python, auquel cas exécutez la commande suivante:

python3 -m unittest discover

La commande s'exécute, mais elle renvoie Ran 0 tests in 0.000s. Le module comporte plusieurs tests. Qu'est-ce qui change ?

C'est le dernier mot de la commande, discover. D'où cela vient-il ? Il semblerait que Gemini Code Assist s'attend à ce que le code de test soit enregistré dans un fichier nommé discover ou discover.py, mais n'ait pas spécifié cette procédure. Puisque vous avez en fait enregistré le fichier dans calendar-unittest.py, essayez d'exécuter la commande suivante:

python3 -m unittest calendar-unittest

Vous obtenez un grand nombre de résultats, qui commencent 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 indique un point pour chaque test réussi et une valeur F pour chaque test ayant échoué. La plupart des tests échouent. Il liste ensuite individuellement les tests ayant échoué, en affichant le résultat attendu et le résultat réel. L'ordre dans lequel ces tests ont été exécutés n'est pas clair. Ils ont été classés par ordre alphabétique en fonction du nom du test, et non selon l'ordre dans lequel ils apparaissent dans le fichier. Ainsi, test_convert_1 a été exécuté en premier, test_convert_1990, puis test_convert_2023, et ainsi de suite. Les scénarios de test pour 1 et 2023 sont les seuls à avoir réussi.

Lorsque vous avez essayé ce code pour la première fois, vous avez remarqué qu'il a converti 24 en XXIIII, ce qui n'était pas exactement faux, mais ce n'est pas le format courant où IIII est converti en IV. Tous les tests ayant échoué concernaient des cas similaires. Lorsque ce problème a été noté pour la première fois, l'atelier a déclaré : "Comme ce n'est pas vraiment mauvais (notez que de nombreuses horloges indiquent 4 en chiffres romains IIII), nous allons aborder ce problème pour une amélioration ultérieure."

Vous pouvez modifier les scénarios de test de sorte qu'ils attendent et acceptent les réponses"pas vraiment mauvaises" auxquelles le code est donné, ou accepter que le moment est venu pour cette "nouvelle amélioration". L'étape suivante consiste donc à corriger le code, avec l'aide de Gemini Code Assist, afin d'obtenir les réponses les plus acceptables attendues par les tests.

6. Améliorer le code

N'oubliez pas que les réponses comme XXIIII pour 24, au lieu de la XXIV plus courante, ont été considérées comme "pas vraiment incorrectes" et ont été différées pour une amélioration ultérieure. Cet avenir, c'est maintenant. Les réponses « pas vraiment mauvaises » sont toujours ennuyeuses.

La première règle pour 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 suivis par le chiffre 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 de 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?

Nous vous suggérons d'ajouter du code à la fin:

6437c3fa2c5fabd1.png

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

dcefa568cab82fb7.png

Gemini Code Assist a ajouté des lignes supplémentaires pour gérer les cas auxquels vous pouvez vous retrouver après avoir effectué le premier ensemble de substitutions. Par exemple, 19 serait converti en XVIIII, puis en XVIV et enfin en XIX correct.

Si Gemini Code Assist a fait des suggestions apparemment utiles, appuyez sur la touche de tabulation pour accepter les recommandations, enregistrer le fichier et exécuter à nouveau le serveur Web. Sinon, ajoutez manuellement les lignes de l'exemple présenté ici et enregistrez le fichier. Essayez une conversion difficile: 1999:

a206999587fdc9.png

Bonne réponse.

Réexécutez les tests maintenant. Elles sont toutes acceptées !

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

7. Déployer une application dans Cloud Run

Cloud Run exécute pour vous une application conteneurisée sur Internet. Pour les applications écrites à l'aide de frameworks courants, tels que Flash, la commande gcloud run deploy crée même ce conteneur 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 Entrée pour accepter l'emplacement correct 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 peut 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. Ensuite, réexécutez la commande gcloud run deploy.

  • La commande vous indique que certaines API sont nécessaires et qu'elles 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. Il est recommandé de saisir le nombre correspondant à us-central1.
  • Lorsque vous y êtes invité, saisissez "Y" pour continuer.
  • Vous devez autoriser les appels unauthenticated de ce service Cloud Run. L'option d'authentification utilisée par Cloud Run convient à des programmes appelant au service. Comme il s'agit d'un site Web, vous n'utiliserez pas l'authentification.

Google Cloud va créer le conteneur, le déployer, y acheminer le trafic, définir des règles d'accès, puis afficher le lien vers la page d'accueil:

94ba7d8d63a44afd.png

Vous pouvez cliquer sur ce lien pour accéder à votre application.

a2e51666dfd33a9f.png

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

5021535ac991a95c.png

Quoi ?

Tout a bien fonctionné sur votre machine ! Pourquoi n'est-ce pas terminé ?

Découvrez-le. Demandez à 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 contient un texte similaire. Voyons comment vous pouvez examiner les journaux dans Gemini Code Assist:

92d1855be73ef1d.png

Recherchez les lignes contenant des indicateurs d'erreur !! rouges, comme ci-dessous:

9bed4f9ed82de21c.png

Cette section est suivie de nombreuses lignes de détails sur la pile d'appel jusqu'ici, mais il y a aussi ceci:

47fc93be845f4e3f.png

Lorsque vous consultez votre fichier calendar.py, vous voyez la fonction number_to_roman juste là. Et vous savez que c’est juste parce qu’il a fonctionné sur votre machine. Qu'est-ce qui pourrait être différent dans Cloud Run ?

La réponse est délicate. Python3 inclut un module standard appelé calendar, tout comme le fichier calendar.py dans lequel est définie la fonction number_to_roman. Sur votre ordinateur local, lorsque Python a recherché un module appelé calendar, il a d'abord recherché le répertoire de votre application. Apparemment, Python sur Cloud Run a d'abord recherché des modules standards, puis les a importés, mais n'a pas trouvé de fonction number_to_roman.

Ce genre de différences au niveau des environnements est toujours possible. Heureusement, lorsqu'une application est conteneurisée, elle contient son environnement. Vous pouvez donc vous attendre au même comportement, quel que soit l'endroit où vous l'exécutez. Si vous aviez exécuté la même application conteneurisée localement que celle utilisée par Cloud Run, vous auriez rencontré le même problème.

Régler ce problème Vous devez remplacer le nom de votre module d'agenda local par un nom qui n'est pas un nom de module standard. Renommez le fichier calendar.py en my_calendar.py, puis remplacez le nom des 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)

Essayez-le en local, exécutez les tests, puis redéployez la fonctionnalité:

gcloud run deploy

Et maintenant, cela fonctionne:

ed288801c6825eb1.png

Vous pouvez partager cette URL. Toutes les personnes ayant besoin d'un outil de conversion en chiffres romains pourront alors utiliser le vôtre.

8. Facultatif: Améliorer l'apparence

Votre application fonctionne correctement et elle est accessible à tous les internautes. Mais il a l'air un peu simple. Avant d'en parler à 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, demandez:

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 à celui-ci:

<!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>

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

295643ec03fcaafc.png

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

Gemini Code Assist maîtrise beaucoup le langage CSS. Il peut vous aider à appliquer différents styles aux pages de l'application. 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 utilisateurs qui doivent convertir l'URL en chiffres romains.

9. Félicitations !

Félicitations ! Vous avez travaillé avec Gemini Code Assist pour ajouter des tests à une application, corriger les erreurs qu'elle contient et ajouter des fonctionnalités améliorées.

Lorsque vous avez fini d'utiliser l'application que vous avez créée, vous pouvez la supprimer du tableau de bord de la console Cloud pour arrêter d'éventuels frais à venir.

Documents de référence...