Accédez à plus de 700 ateliers et cours

Créer des applications avec Gemini Code Assist

Atelier 1 heure 30 minutes universal_currency_alt 1 crédit show_chart Débutant
info Cet atelier peut intégrer des outils d'IA pour vous accompagner dans votre apprentissage.
Accédez à plus de 700 ateliers et cours

Présentation

Dans cet atelier, vous allez utiliser Gemini Code Assist, un assistant de développement d'applications optimisé par l'IA pour Google Cloud, afin d'expliquer, de tester, de documenter et d'améliorer une application.

Vous utiliserez Cloud Workstations afin de créer un environnement de développement utilisant Code OSS en tant qu'IDE (environnement de développement intégré).

Cet atelier s'adresse aux développeurs de tous niveaux d'expérience qui créent des applications. Vous n'avez pas besoin de maîtriser le développement d'applications cloud.

Remarque : Comme il s'agit d'une technologie encore à un stade précoce, il se peut que Gemini génère des résultats qui semblent plausibles, mais qui sont en fait incorrects. Nous vous recommandons de valider tous les résultats de Gemini avant de les utiliser. Pour en savoir plus, consultez Gemini pour Google Cloud et l'IA responsable.

Objectifs

Dans cet atelier, vous allez apprendre à effectuer les tâches suivantes :

  • Créer un environnement de développement d'applications cloud à l'aide de Cloud Workstations
  • Utiliser Gemini Code Assist pour expliquer du code
  • Générer des tests unitaires avec Gemini Code Assist
  • Demander à Gemini d'améliorer l'interface d'une application
  • Utiliser Gemini Code Assist pour rendre le code plus lisible
  • Utiliser Gemini Code Assist pour ajouter des commentaires au code, en anglais ou dans une autre langue

Prérequis

Pour chaque atelier, nous vous attribuons un nouveau projet Google Cloud et un nouvel ensemble de ressources pour une durée déterminée, sans frais.

  1. Connectez-vous à Qwiklabs dans une fenêtre de navigation privée.

  2. Vérifiez le temps imparti pour l'atelier (par exemple : 01:15:00) : vous devez pouvoir le terminer dans ce délai.
    Une fois l'atelier lancé, vous ne pouvez pas le mettre en pause. Si nécessaire, vous pourrez le redémarrer, mais vous devrez tout reprendre depuis le début.

  3. Lorsque vous êtes prêt, cliquez sur Démarrer l'atelier.

  4. Notez vos identifiants pour l'atelier (Nom d'utilisateur et Mot de passe). Ils vous serviront à vous connecter à Google Cloud Console.

  5. Cliquez sur Ouvrir la console Google.

  6. Cliquez sur Utiliser un autre compte, puis copiez-collez les identifiants de cet atelier lorsque vous y êtes invité.
    Si vous utilisez d'autres identifiants, des messages d'erreur s'afficheront ou des frais seront appliqués.

  7. Acceptez les conditions d'utilisation et ignorez la page concernant les ressources de récupération des données.

Activer Cloud Shell

Cloud Shell est une machine virtuelle qui contient des outils pour les développeurs. Elle comprend un répertoire d'accueil persistant de 5 Go et s'exécute sur Google Cloud. Google Cloud Shell vous permet d'accéder via une ligne de commande à vos ressources Google Cloud. gcloud est l'outil de ligne de commande associé à Google Cloud. Il est préinstallé sur Cloud Shell et permet la saisie semi-automatique via la touche Tabulation.

  1. Dans Google Cloud Console, dans le volet de navigation, cliquez sur Activer Cloud Shell (Icône Cloud Shell).

  2. Cliquez sur Continuer.
    Le provisionnement et la connexion à l'environnement prennent quelques instants. Une fois connecté, vous êtes en principe authentifié, et le projet est défini sur votre ID_PROJET. Exemple :

Terminal Cloud Shell

Exemples de commandes

  • Afficher le nom du compte actif :

gcloud auth list

(Résultat)

Credentialed accounts: - <myaccount>@<mydomain>.com (active)

(Exemple de résultat)

Credentialed accounts: - google1623327_student@qwiklabs.net
  • Afficher l'ID du projet :

gcloud config list project

(Résultat)

[core] project = <ID_Projet>

(Exemple de résultat)

[core] project = qwiklabs-gcp-44776a13dea667a6

Tâche 1 : Configurer votre environnement et votre compte

Dans cette tâche, vous allez activer l'API Cloud AI Companion pour Gemini et attribuer les rôles nécessaires à un compte utilisateur.

Configurer les API et les rôles

  1. Connectez-vous à la console Google Cloud avec vos identifiants d'atelier, puis ouvrez un terminal Cloud Shell en appuyant successivement sur la touche G puis sur la touche S de votre clavier.

  2. Pour définir les variables d'environnement correspondant à l'ID de votre projet, l'utilisateur et la région, exécutez les commandes suivantes dans Cloud Shell :

    export PROJECT_ID=$(gcloud config list project --format="value(core.project)") export USER=$(gcloud config list account --format "value(core.account)") export REGION={{{project_0.startup_script.lab_region| Lab Region}}} echo "PROJECT_ID=${PROJECT_ID}" echo "USER=${USER}" echo "REGION=${REGION}"
  3. Pour activer l'API Cloud AI Companion pour Gemini et attribuer les rôles nécessaires à votre compte utilisateur, exécutez les commandes suivantes :

    gcloud services enable cloudaicompanion.googleapis.com --project ${PROJECT_ID} gcloud projects add-iam-policy-binding ${PROJECT_ID} --member user:${USER} --role=roles/cloudaicompanion.user gcloud projects add-iam-policy-binding ${PROJECT_ID} --member user:${USER} --role=roles/serviceusage.serviceUsageViewer

Cliquez sur Vérifier ma progression pour valider l'objectif. Activer les API nécessaires et définir les rôles IAM

Tâche 2 : Créer une station de travail Cloud Workstations

Cet atelier fait appel à Gemini pour vous aider à développer une application avec le plug-in Cloud Code pour l'IDE Cloud Workstations. Cloud Workstations est un environnement de développement intégré entièrement géré qui comprend une intégration native avec Gemini.

Dans cette tâche, vous allez configurer et provisionner votre environnement Cloud Workstations, et activer le plugin Cloud Code pour Gemini.

Afficher le cluster de stations de travail

Un cluster de stations de travail nommé my-cluster a été préalablement créé pour cet atelier. Ce cluster est utilisé pour configurer et créer une station de travail.

  1. Pour ouvrir la page "Workstations", dans la barre de titre de la console Google Cloud, saisissez Cloud Workstations dans le champ de recherche, puis cliquez sur Cloud Workstations.

  2. Si Cloud Workstations n'est pas épinglé (bouton représentant une épingle pour un produit épinglé), dans le menu de navigation (Menu de navigation), cliquez sur Épingler (bouton représentant une épingle pour un produit non épinglé).

  3. Dans le volet de navigation, cliquez sur Gestion des clusters.

  4. Vérifiez l'état du cluster. Si le cluster présente l'état Rapprochement ou Mise à jour, patientez en actualisant la page de temps en temps jusqu'à ce que l'état soit défini sur Prêt, puis passez à l'étape suivante.

Créer une configuration et une station de travail

  1. Pour créer la configuration de station de travail et la station proprement dite, exécutez les commandes suivantes dans Cloud Shell :

    export CLUSTER_NAME=my-cluster export CONFIG_NAME=my-config export WS_NAME=my-workstation export REGION={{{project_0.startup_script.lab_region| Lab Region}}} gcloud workstations configs create ${CONFIG_NAME} --cluster=${CLUSTER_NAME} --region=${REGION} --machine-type="e2-standard-4" --pd-disk-size=200 --pd-disk-type="pd-standard" --pool-size=1 gcloud workstations create ${WS_NAME} --cluster=${CLUSTER_NAME} --config=${CONFIG_NAME} --region=${REGION}

    Attendez que l'exécution des commandes soit terminée.

  2. Dans le volet de navigation, cliquez sur Stations de travail.

    Une fois la station de travail créée, elle apparaît dans la liste figurant sous Mes stations de travail avec l'état Arrêté.

  3. Pour démarrer la station de travail, cliquez sur Démarrer.

    Pendant le démarrage, l'état de la station de travail indique Démarrage. Attendez que l'état passe à Exécution, ce qui indique que la station de travail est prête à être utilisée.

Lancer l'IDE

Pour fonctionner correctement, certaines extensions nécessitent l'activation de cookies tiers dans votre navigateur.

  1. Pour activer les cookies tiers dans Chrome, dans le menu Chrome, cliquez sur Paramètres.

  2. Dans la barre de recherche, saisissez Cookies tiers.

  3. Cliquez sur le paramètre Cookies tiers et sélectionnez Autoriser les cookies tiers.

    Remarque : Si vous souhaitez rétablir la configuration de votre navigateur après l'atelier, notez les paramètres actuels pour les cookies tiers.
  4. Pour lancer l'IDE Code OSS sur la station de travail, accédez à la page Stations de travail de la console Google Cloud et cliquez sur Lancer.

    L'IDE s'ouvre dans un autre onglet du navigateur.

    IDE OSS avec barres d&#39;activité et d&#39;état mises en évidence

Cliquez sur Vérifier ma progression pour valider l'objectif. Créer et démarrer une station de travail Cloud Workstations

Tâche 3 : Mettre à jour l'extension Cloud Code pour activer Gemini

Dans cette tâche, vous allez activer Gemini dans Cloud Code pour votre IDE de station de travail.

Se connecter à Google Cloud

Pour vous connecter à Google Cloud dans votre station de travail, procédez comme suit :

  1. Pour lancer le flux Cloud Code - Connexion, cliquez sur Cloud Code - Connexion dans la barre d'état en bas de la fenêtre, puis ouvrez le lien affiché dans le terminal à l'aide de votre navigateur.

  2. S'il vous est demandé de confirmer l'ouverture du site web externe, cliquez sur Ouvrir.

  3. Choisissez un compte pour accéder à Gemini Code Assist, puis cliquez sur Se connecter.

    Votre code de vérification s'affiche dans l'onglet du navigateur.

    Remarque : Un avertissement indiquant que vous avez exécuté une commande "gcloud auth login" peut s'afficher. Ce processus est normal. L'IDE a exécuté cette commande pour vous.
  4. Cliquez sur Copier.

  5. De retour dans l'IDE, dans le terminal, collez le code à l'endroit où est indiqué Saisissez le code d'autorisation.

  6. Si un message vous demande d'approuver la copie à partir du presse-papiers, cliquez sur Autoriser.

  7. Appuyez sur Entrée, puis attendez que la barre d'état affiche Cloud Code - Aucun projet.

    Vous êtes désormais connecté à Google Cloud.

Activer Gemini dans Cloud Code

Pour activer Gemini dans Cloud Code pour votre IDE de station de travail, procédez comme suit :

  1. Dans votre IDE de station de travail, cliquez sur le menu (Menu principal de Code OSS), puis accédez à Fichier > Préférences > Paramètres.

  2. Dans Paramètres de recherche, saisissez Gemini.

  3. Dans l'onglet Utilisateur de la boîte de dialogue "Paramètres", sélectionnez Extensions > Gemini Code Assist.

  4. Sur la page des paramètres de Cloud Code, pour Geminicodeassist: Project, saisissez l'ID de projet Google Cloud .

    Activer Gemini

  5. Afin de sélectionner le projet pour Cloud Code, cliquez sur Cloud Code - Aucun projet dans la barre d'état en bas de la fenêtre. Ensuite, choisissez l'option Sélectionner un projet Google Cloud et choisissez .

    Sélectionner un projet pour cloud code

    L'ID du projet est désormais affiché dans la barre d'état. Gemini est maintenant prêt à être utilisé.

Tâche 4 : Télécharger une application Python Flask, l'examiner et l'exécuter

Le code d'une application Python Flask a été enregistré pour vous dans un bucket Cloud Storage.

Dans cette tâche, vous allez télécharger une application Python Flask, l'examiner et l'exécuter dans l'IDE. Gemini Code Assist vous explique le code.

Connexion au terminal

  1. Dans le menu de l'IDE (Menu principal de Code OSS), sélectionnez Terminal > Nouveau terminal.

  2. Dans le terminal, exécutez la commande suivante :

    gcloud auth login

    Ouvrez le lien affiché dans le terminal dans votre navigateur.

  3. Choisissez un compte pour vous connecter à Google Cloud SDK, puis cliquez sur Continuer.

  4. Enfin, cliquez sur Autoriser dans la fenêtre qui affiche le message Google Cloud SDK souhaite accéder à votre compte Google.

    Votre code de vérification s'affiche dans l'onglet du navigateur.

    Remarque : Un avertissement indiquant que vous avez exécuté une commande "gcloud auth login" peut s'afficher. Ce processus est normal. L'IDE a exécuté cette commande pour vous.
  5. Cliquez sur Copier.

  6. De retour dans l'IDE, collez le code dans le terminal à l'endroit où est indiqué Enter the verification code provided in your browser (Saisissez le code de validation fourni dans votre navigateur), puis appuyez sur Entrée.

    Votre session de terminal est maintenant connectée à Google Cloud.

Installer l'environnement virtuel Python

  1. Pour installer Python localement dans un environnement virtuel, exécutez les commandes suivantes :

    sudo apt update sudo apt -y upgrade sudo apt install -y python3-venv python3 -m venv ~/env source ~/env/bin/activate
  2. Pour vérifier l'emplacement Python qui sera utilisé, exécutez les commandes suivantes :

    which python3

Copier le code

  1. Pour copier le code de l'application, exécutez la commande suivante dans le terminal :

    export PROJECT_ID={{{project_0.project_id | Project ID}}} export BUCKET_NAME=$PROJECT_ID-code gcloud storage cp -r gs://$BUCKET_NAME/* .

    Le code a été copié dans un sous-répertoire nommé codeassist-demo.

  2. Dans la barre d'activité de l'IDE, cliquez sur Explorateur (Menu de l&#39;explorateur Code OSS) et sélectionnez Ouvrir un dossier.

  3. Dans la boîte de dialogue Ouvrir un dossier, cliquez sur codeassist-demo, puis sur OK.

    La structure de répertoires s'affiche.

Examiner le code

  1. Sélectionnez main.py.

    Le fichier Python s'ouvre dans une fenêtre de l'éditeur.

  2. Dans la barre d'activité de l'IDE, cliquez sur Gemini Code Assist (Menu Gemini Code Assist de Code OSS).

    Gemini Code Assist est un collaborateur optimisé par l'IA qui vous aide dans vos tâches de développement d'applications.

  3. Dans le volet Gemini Code Assist, saisissez le prompt suivant, puis cliquez sur Envoyer (Bouton d&#39;envoi Gemini) :

    Explain this

    Les prompts sont des questions ou instructions qui décrivent l'aide dont vous avez besoin. Ils peuvent inclure du contexte issu d'un code existant que Google Cloud analyse pour fournir des réponses plus pertinentes ou complètes. Pour savoir comment rédiger des prompts permettant de générer de bonnes réponses, consultez la section Rédiger de meilleurs prompts pour Gemini dans Google Cloud.

    Gemini expliquera le code figurant dans main.py. La réponse peut expliquer les sections suivantes :

    • Dépendances
    • Configuration de l'application
    • Routes
    • Exécution de l'application

    Lorsque vous sélectionnez du code, le même prompt conduit Gemini Code Assist à expliquer uniquement le code sélectionné.

    Remarque : L'état de l'historique des discussions est uniquement conservé en mémoire et ne persiste pas lorsque vous passez à un autre espace de travail ou lorsque vous fermez votre IDE. Gemini n'utilise pas vos requêtes ni ses réponses comme données pour entraîner son modèle. Pour en savoir plus, consultez Utilisation de vos données par Gemini pour Google Cloud.
  4. Dans l'éditeur, sélectionnez app.route et la définition de fonction correspondant à la route POST /convert, cliquez sur l'ampoule (Ampoule Gemini Code OSS), puis sur Gemini: Explain this (Expliquer).

    Code du fichier

    Gemini explique en détail le code sélectionné.

Exécuter l'application

  1. Si le terminal a été fermé, dans le menu de l'IDE (Menu principal de Code OSS), sélectionnez Terminal > Nouveau terminal.

  2. Dans le terminal, exécutez les commandes suivantes :

    cd ~/codeassist-demo source ~/env/bin/activate python3 main.py

    La commande renvoie une erreur indiquant qu'il n'existe aucun module nommé flask. Vous pouvez utiliser Gemini Code Assist pour vous aider à comprendre le problème.

  3. Dans le volet de discussion Gemini Code Assist, saisissez le prompt suivant :

    How do you install Python requirements?

    Gemini Code Assist devrait indiquer que vous pouvez utiliser le programme d'installation de packages pip et un fichier requirements.txt pour installer les exigences Python.

  4. Dans la barre d'activité de l'IDE, cliquez sur l'icône Explorateur (Menu de l&#39;explorateur Code OSS), puis sur requirements.txt.

    Flask et sa version requise sont spécifiés dans le fichier requirements.txt.

  5. Dans le terminal, exécutez la commande suivante :

    pip install -r requirements.txt

    Flask est maintenant installé.

  6. Dans le terminal, exécutez la commande suivante :

    python3 main.py

    Une boîte de dialogue indique que le service écoutant sur le port 8080 est désormais disponible pour l'aperçu sur le Web.

  7. Cliquez sur Ouvrir l'aperçu, puis sur Ouvrir.

    L'application Web "Roman Numerals" de conversion des chiffres romains s'ouvre dans un nouvel onglet.

  8. Dans la zone de saisie de nombre, indiquez 123, puis cliquez sur Convert (Convertir).

    Le nombre renvoyé est CXXIII. C correspond à 100, X à 10 et I à 1. Cela semble correct.

  9. Cliquez sur Return to home page (Retour à la page d'accueil), puis saisissez 45 et cliquez sur Convert (Convertir).

    Le nombre renvoyé est XXXXV. Techniquement, cette représentation est correcte d'un point de vue mathématique (4 fois 10, plus 5), mais la représentation normale de 40 est XL (50 moins 10). Par conséquent, la représentation en chiffres romains la plus classique est XLV.

    Nous reviendrons sur ce point.

  10. Dans la barre d'activité de l'IDE, cliquez sur l'icône Explorateur (Menu de l&#39;explorateur Code OSS), puis sur calendar.py.

    La fonction number_to_roman convertit un nombre en chiffres romains.

Cliquez sur Vérifier ma progression pour valider l'objectif. Copier le code et exécuter une application Python Flask

Tâche 5 : Ajouter des tests unitaires

Dans cette tâche, vous allez utiliser Gemini Code Assist afin de générer des tests unitaires pour votre code.

  1. Dans la barre d'activité de l'IDE, cliquez sur Gemini Code Assist (Menu Gemini Code Assist de Code OSS), puis saisissez le prompt suivant :

    Create unit tests for a fixed version of number_to_roman

    Gemini Code Assist reconnaît le code dans l'onglet ouvert pour calendar.py. Il doit fournir un exemple de code semblable à celui-ci :

    import unittest import calendar class TestNumberToRoman(unittest.TestCase): def test_basic_conversions(self): self.assertEqual(calendar.number_to_roman(1), "I") self.assertEqual(calendar.number_to_roman(5), "V") self.assertEqual(calendar.number_to_roman(10), "X") self.assertEqual(calendar.number_to_roman(50), "L") self.assertEqual(calendar.number_to_roman(100), "C") self.assertEqual(calendar.number_to_roman(500), "D") self.assertEqual(calendar.number_to_roman(1000), "M") def test_combinations(self): self.assertEqual(calendar.number_to_roman(4), "IV") self.assertEqual(calendar.number_to_roman(9), "IX") self.assertEqual(calendar.number_to_roman(14), "XIV") self.assertEqual(calendar.number_to_roman(40), "XL") self.assertEqual(calendar.number_to_roman(90), "XC") self.assertEqual(calendar.number_to_roman(400), "CD") self.assertEqual(calendar.number_to_roman(900), "CM") self.assertEqual(calendar.number_to_roman(1994), "MCMXCIV") self.assertEqual(calendar.number_to_roman(3888), "MMMDCCCLXXXVIII") def test_edge_cases(self): self.assertEqual(calendar.number_to_roman(0), "") # Should handle zero self.assertRaises(TypeError, calendar.number_to_roman, "abc") # Should handle invalid input def test_large_numbers(self): self.assertEqual(calendar.number_to_roman(3000), "MMM") self.assertEqual(calendar.number_to_roman(3999), "MMMCMXCIX") if __name__ == '__main__': unittest.main() Remarque : Il est possible que Gemini crée des tests unitaires qui réussissent pour votre code tel qu'il est actuellement implémenté, au lieu de créer des tests qui réussissent lorsque le code suit correctement l'implémentation standard des chiffres romains. Dans le cadre de cet atelier, vous allez utiliser une version correcte des tests unitaires.
  2. Pour arrêter l'application en cours d'exécution, appuyez sur CTRL + C dans le terminal.

  3. Afin de créer des tests unitaires pour la fonction "convert", exécutez les commandes suivantes dans le terminal :

    cat > ~/codeassist-demo/test_calendar.py <<EOF import unittest import calendar class TestNumberToRoman(unittest.TestCase): def test_basic_conversions(self): self.assertEqual(calendar.number_to_roman(1), "I") self.assertEqual(calendar.number_to_roman(5), "V") self.assertEqual(calendar.number_to_roman(10), "X") self.assertEqual(calendar.number_to_roman(50), "L") self.assertEqual(calendar.number_to_roman(100), "C") self.assertEqual(calendar.number_to_roman(500), "D") self.assertEqual(calendar.number_to_roman(1000), "M") def test_combinations(self): self.assertEqual(calendar.number_to_roman(4), "IV") self.assertEqual(calendar.number_to_roman(9), "IX") self.assertEqual(calendar.number_to_roman(14), "XIV") self.assertEqual(calendar.number_to_roman(40), "XL") self.assertEqual(calendar.number_to_roman(90), "XC") self.assertEqual(calendar.number_to_roman(400), "CD") self.assertEqual(calendar.number_to_roman(900), "CM") self.assertEqual(calendar.number_to_roman(1994), "MCMXCIV") self.assertEqual(calendar.number_to_roman(3888), "MMMDCCCLXXXVIII") def test_edge_cases(self): self.assertEqual(calendar.number_to_roman(0), "") # Should handle zero self.assertRaises(TypeError, calendar.number_to_roman, "abc") # Should handle invalid input def test_large_numbers(self): self.assertEqual(calendar.number_to_roman(3000), "MMM") self.assertEqual(calendar.number_to_roman(3999), "MMMCMXCIX") if __name__ == '__main__': unittest.main() EOF
  4. Pour lancer les tests, exécutez les commandes suivantes dans le terminal :

    cd ~/codeassist-demo python3 test_calendar.py

    Les tests vont échouer :

    ====================================================================== ERROR: test_edge_cases (__main__.TestNumberToRoman.test_edge_cases) ---------------------------------------------------------------------- Traceback (most recent call last): File "/home/user/codeassist-demo/test_calendar.py", line 28, in test_edge_cases self.assertRaises(TypeError, calendar.number_to_roman, "abc") # Should handle invalid input ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/usr/lib/python3.12/unittest/case.py", line 778, in assertRaises return context.handle('assertRaises', args, kwargs) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/usr/lib/python3.12/unittest/case.py", line 238, in handle callable_obj(*args, **kwargs) File "/home/user/codeassist-demo/calendar.py", line 16, in number_to_roman number = int(number) ^^^^^^^^^^^ ValueError: invalid literal for int() with base 10: 'abc' ====================================================================== FAIL: test_combinations (__main__.TestNumberToRoman.test_combinations) ---------------------------------------------------------------------- Traceback (most recent call last): File "/home/user/codeassist-demo/test_calendar.py", line 16, in test_combinations self.assertEqual(calendar.number_to_roman(4), "IV") AssertionError: 'IIII' != 'IV' - IIII + IV ====================================================================== FAIL: test_large_numbers (__main__.TestNumberToRoman.test_large_numbers) ---------------------------------------------------------------------- Traceback (most recent call last): File "/home/user/codeassist-demo/test_calendar.py", line 33, in test_large_numbers self.assertEqual(calendar.number_to_roman(3999), "MMMCMXCIX") AssertionError: 'MMMDCCCCLXXXXVIIII' != 'MMMCMXCIX' - MMMDCCCCLXXXXVIIII + MMMCMXCIX ---------------------------------------------------------------------- Ran 4 tests in 0.004s FAILED (failures=2, errors=1)

    Voici la liste des erreurs rencontrées :

    • La valeur abc n'a pas été traitée correctement.
    • Le nombre "4" a renvoyé IIII au lieu de IV.
    • Le nombre "3999" a renvoyé MMMDCCCCLXXXXVIIII au lieu de MMMCMXCIX.

    Dans chaque fonction de test, la première erreur rencontrée entraîne l'arrêt de la fonction.

    Remarque : Les résultats que vous obtenez peuvent différer si votre code de test est différent.

Cliquez sur Vérifier ma progression pour valider l'objectif. Créer des tests unitaires pour la fonction "convert"

Tâche 6 : Corriger le code et améliorer sa lisibilité

Dans cette tâche, vous allez utiliser Gemini Code Assist pour corriger le code et améliorer sa lisibilité.

  1. Dans la barre d'activité de l'IDE, cliquez sur l'icône Explorateur (Menu de l&#39;explorateur Code OSS), puis sur calendar.py.

  2. Dans la barre d'activité de l'IDE, cliquez sur Gemini Code Assist (Menu Gemini Code Assist de Code OSS), puis saisissez le prompt suivant :

    Make my code more readable and fix any errors

    Gemini Code Assist améliore la lisibilité du code et doit également corriger le problème. Voici un exemple :

    def number_to_roman(number): """Converts an integer to its Roman numeral equivalent. Args: number: An integer between 0 and 3999. Returns: A string representing the Roman numeral equivalent of the number. Returns an empty string if the input is 0. Raises TypeError if the input is not an integer or is out of range. """ try: number = int(number) except ValueError: raise TypeError("Input must be an integer.") if not 0 <= number <= 3999: raise TypeError("Input must be between 0 and 3999.") if number == 0: return "" roman_map = { 1000: 'M', 900: 'CM', 500: 'D', 400: 'CD', 100: 'C', 90: 'XC', 50: 'L', 40: 'XL', 10: 'X', 9: 'IX', 5: 'V', 4: 'IV', 1: 'I'} result = "" for value, numeral in roman_map.items(): while number >= value: result += numeral number -= value return result

    Gemini Code Assist explique aussi les modifications apportées :

    Key improvements: 1. Error Handling: Added TypeError for non-integer input and values outside the range 0-3999. This makes the function more robust. 2. Docstring: A clear docstring explains the function's purpose, arguments, return value, and error handling. This significantly improves readability and maintainability. 3. Efficiency and Correctness: Uses a roman_map dictionary and a more efficient algorithm to construct the Roman numeral. This handles subtractive notation (like "IV" for 4, "IX" for 9, etc.) correctly. The previous version had issues with these cases and was less efficient. 4. Zero Handling: Explicitly handles the case where the input number is 0, returning an empty string as expected. 5. Clarity: The code is now more concise and easier to understand. The logic is clearer and the variable names are more descriptive. This revised version addresses the limitations and errors of the original implementation and adheres to best practices for Python code. It's more robust, readable, and efficient.

    Dans cet exemple, Gemini Code Assist a fourni un algorithme qui rend le code plus lisible et corrige les problèmes du code d'origine.

  3. Pour effectuer une comparaison du code d'un nouveau fichier, dans le volet de code de Gemini Code Assist, cliquez sur Afficher les différences avec le fichier ouvert (Gemini Code Assist : Afficher les différences avec le fichier ouvert).

  4. Pour accepter les modifications, cliquez sur Accepter. Le code actualisé est accepté.

  5. Dans le terminal, exécutez les commandes suivantes :

    cd ~/codeassist-demo python3 test_calendar.py

    Si les tests échouent, essayez de les exécuter plusieurs fois pour vous assurer qu'ils n'utilisent pas une version mise en cache du module "calendar".

    Si Gemini n'a pas résolu le problème des chiffres romains, certains tests échoueront. Si cela se produit, vous pouvez corriger le code vous-même jusqu'à ce que le test réussisse, ou remplacer calendar.py par une version fonctionnelle connue.

  6. Si certains tests échouent, exécutez les commandes suivantes pour corriger le code et relancer les tests unitaires :

    cat > ~/codeassist-demo/calendar.py <<EOF def number_to_roman(number): """Converts an integer to its Roman numeral equivalent. Args: number: An integer between 0 and 3999. Returns: A string representing the Roman numeral equivalent of the number. Returns an empty string if the input is 0. Raises TypeError if the input is not an integer or is out of range. """ try: number = int(number) except ValueError: raise TypeError("Input must be an integer.") if not 0 <= number <= 3999: raise TypeError("Input must be between 0 and 3999.") if number == 0: return "" roman_map = { 1000: 'M', 900: 'CM', 500: 'D', 400: 'CD', 100: 'C', 90: 'XC', 50: 'L', 40: 'XL', 10: 'X', 9: 'IX', 5: 'V', 4: 'IV', 1: 'I'} result = "" for value, numeral in roman_map.items(): while number >= value: result += numeral number -= value return result EOF cd ~/codeassist-demo python3 test_calendar.py

    Les tests devraient maintenant réussir.

Cliquez sur Vérifier ma progression pour valider l'objectif. Mettre à jour calendar.py pour corriger les problèmes dans le code d'origine

Tâche 7 : Améliorer la lisibilité du code pour les non-anglophones

Si votre langue maternelle n'est pas l'anglais et que vous faites appel à une application de traduction, vous pouvez utiliser Gemini Code Assist pour générer des commentaires dans d'autres langues.

Dans cette tâche, vous allez utiliser Gemini Code Assist pour ajouter des commentaires au code, y compris dans une autre langue.

  1. Dans la barre d'activité de l'IDE, cliquez sur l'icône Explorateur (Menu de l&#39;explorateur Code OSS), puis sur main.py.

  2. Dans la barre d'activité de l'IDE, cliquez sur Gemini Code Assist (Menu Gemini Code Assist de Code OSS), puis saisissez le prompt suivant :

    Add comments to main.py

    Gemini Code Assist ajoute des commentaires expliquant le code :

    import os # Import the os module for environment variables from flask import Flask, render_template, request # Import Flask framework components import calendar # Import the calendar module for Roman numeral conversion # Create a Flask app instance app = Flask(__name__) # Define a route for the home page @app.route("/", methods=["GET"]) def home_page(): # Render the index.html template return render_template("index.html") # Define a route for the conversion endpoint @app.route("/convert", methods=["POST"]) def convert(): # Get the number from the form data number = request.form["number"] # Convert the number to Roman numerals using the calendar module roman = calendar.number_to_roman(number) # Render the convert.html template with the number and its Roman numeral equivalent return render_template("convert.html", number=number, roman=roman) # Run the Flask app if this script is executed directly if __name__ == "__main__": # Run the app in debug mode, listening on all interfaces (0.0.0.0) # and using the port specified in the environment variable PORT or defaulting to 8080 app.run(debug=True, host="0.0.0.0", port=int(os.environ.get("PORT", 8080)))

    Mais comment faire si l'anglais n'est pas votre langue maternelle ?

  3. Dans le volet Gemini Code Assist, saisissez le prompt suivant :

    Add Spanish comments to main.py

    Gemini Code Assist est capable de générer des commentaires dans différentes langues afin d'améliorer la lisibilité du code.

  4. Pour vérifier que seuls des commentaires ont été ajoutés, dans le volet de code de Gemini Code Assist, cliquez sur Afficher les différences avec le fichier ouvert (Gemini Code Assist : Afficher les différences avec le fichier ouvert).

    Les modifications sont comparées au code existant :

    Affichage des différences, qui montre les commentaires en espagnol

  5. Pour refuser les modifications, cliquez sur Refuser.

Tâche 8 : Améliorer l'interface de l'application

Gemini Code Assist peut également vous aider à améliorer l'interface de votre application.

Dans cette tâche, vous allez utiliser Gemini Code Assist pour améliorer la conception visuelle de votre application.

  1. Dans le terminal, exécutez la commande suivante :

    cd ~/codeassist-demo python3 main.py

    Une boîte de dialogue indique que le service écoutant sur le port 8080 est désormais disponible pour l'aperçu sur le Web.

  2. Cliquez sur Ouvrir l'aperçu, puis sur Ouvrir.

    L'application Web "Roman Numerals" de conversion des chiffres romains s'ouvre dans un nouvel onglet.

    Interface utilisateur simple

  3. Dans la barre d'activité de l'IDE, cliquez sur l'icône Explorateur (Menu de l&#39;explorateur Code OSS), puis sélectionnez templates/index.html.

    Le modèle HTML de cette application est extrêmement simple.

  4. Dans la barre d'activité de l'IDE, cliquez sur Gemini Code Assist (Menu Gemini Code Assist de Code OSS), puis saisissez le prompt suivant :

    Make this HTML template look better

    Gemini Code Assist met à jour le code pour améliorer l'apparence de la page d'entrée de l'application.

  5. Pour accepter les modifications, dans le volet de code de Gemini Code Assist, cliquez sur Afficher les différences avec le fichier ouvert (Gemini Code Assist : Afficher les différences avec le fichier ouvert), puis sur Accepter.

  6. Revenez à l'onglet du navigateur contenant l'application "Roman Numerals" et cliquez sur Refresh (Actualiser).

    L'interface de l'application devrait être plus agréable. Dans cet exemple, la boîte de dialogue est centrée sur la page et des couleurs ont été ajoutées.

    Interface utilisateur améliorée

    Remarque : Il peut y avoir des différences dans les modifications apportées par Gemini Code Assist dans votre cas.
  7. Dans la barre d'activité de l'IDE, cliquez sur l'icône Explorateur (Menu de l&#39;explorateur Code OSS), puis sur templates/convert.html.

  8. Dans la barre d'activité de l'IDE, cliquez sur Gemini Code Assist (Menu Gemini Code Assist de Code OSS), puis saisissez le prompt suivant :

    Make the convert.html template look similar to the index.html template

    Gemini Code Assist met à jour le modèle de la page de résultats pour qu'il corresponde au modèle de la page d'index.

  9. Pour accepter les modifications, dans le volet de code de Gemini Code Assist, cliquez sur Afficher les différences avec le fichier ouvert (Gemini Code Assist : Afficher les différences avec le fichier ouvert), puis sur Accepter.

  10. Revenez à l'onglet du navigateur contenant l'application "Roman Numerals", saisissez 45, puis cliquez sur Enter (Entrée).

    La nouvelle présentation de la page de résultats doit correspondre au style de la page d'index :

    Page de résultats améliorée

Cliquez sur Vérifier ma progression pour valider l'objectif. Utiliser Gemini Code Assist pour améliorer la conception visuelle de votre application

Terminer l'atelier

Une fois l'atelier terminé, cliquez sur End Lab (Terminer l'atelier). Qwiklabs supprime les ressources que vous avez utilisées, puis efface le compte.

Si vous le souhaitez, vous pouvez noter l'atelier. Sélectionnez le nombre d'étoiles correspondant à votre note, saisissez un commentaire, puis cliquez sur Submit (Envoyer).

Le nombre d'étoiles que vous pouvez attribuer à un atelier correspond à votre degré de satisfaction :

  • 1 étoile = très mécontent(e)
  • 2 étoiles = insatisfait(e)
  • 3 étoiles = ni insatisfait(e), ni satisfait(e)
  • 4 étoiles = satisfait(e)
  • 5 étoiles = très satisfait(e)

Si vous ne souhaitez pas donner votre avis, vous pouvez fermer la boîte de dialogue.

Pour soumettre des commentaires, suggestions ou corrections, veuillez utiliser l'onglet Support (Assistance).

Félicitations !

Dans cet atelier, vous avez appris à effectuer les tâches suivantes :

  • Créer un environnement de développement d'applications cloud à l'aide de Cloud Workstations
  • Utiliser Gemini Code Assist pour expliquer du code
  • Générer des tests unitaires avec Gemini Code Assist
  • Demander à Gemini d'améliorer l'interface d'une application
  • Utiliser Gemini Code Assist pour rendre le code plus lisible
  • Utiliser Gemini Code Assist pour ajouter des commentaires au code, en anglais ou dans une autre langue

Étapes suivantes et informations supplémentaires

Copyright 2024 Google LLC Tous droits réservés. Google et le logo Google sont des marques de Google LLC. Tous les autres noms de société et de produit peuvent être des marques des sociétés auxquelles ils sont associés.

Avant de commencer

  1. Les ateliers créent un projet Google Cloud et des ressources pour une durée déterminée.
  2. Les ateliers doivent être effectués dans le délai imparti et ne peuvent pas être mis en pause. Si vous quittez l'atelier, vous devrez le recommencer depuis le début.
  3. En haut à gauche de l'écran, cliquez sur Démarrer l'atelier pour commencer.

Utilisez la navigation privée

  1. Copiez le nom d'utilisateur et le mot de passe fournis pour l'atelier
  2. Cliquez sur Ouvrir la console en navigation privée

Connectez-vous à la console

  1. Connectez-vous à l'aide des identifiants qui vous ont été attribués pour l'atelier. L'utilisation d'autres identifiants peut entraîner des erreurs ou des frais.
  2. Acceptez les conditions d'utilisation et ignorez la page concernant les ressources de récupération des données.
  3. Ne cliquez pas sur Terminer l'atelier, à moins que vous n'ayez terminé l'atelier ou que vous ne vouliez le recommencer, car cela effacera votre travail et supprimera le projet.

Ce contenu n'est pas disponible pour le moment

Nous vous préviendrons par e-mail lorsqu'il sera disponible

Parfait !

Nous vous contacterons par e-mail s'il devient disponible

Un atelier à la fois

Confirmez pour mettre fin à tous les ateliers existants et démarrer celui-ci

Utilisez la navigation privée pour effectuer l'atelier

Ouvrez une fenêtre de navigateur en mode 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.