Utiliser Duet AI tout au long du cycle de développement logiciel

1. Présentation

Les développeurs Google Cloud utilisent quotidiennement plusieurs des produits et services de la plate-forme. Ces produits leur permettent de développer, de tester, de déployer et de gérer des applications dans le cloud. Avec l'aide de Duet AI, les développeurs peuvent gagner en productivité lorsqu'ils utilisent les produits Google Cloud grâce au chat interactif de Duet AI, à l'assistance au codage et aux intégrations intégrées.

Remarque:Comme il s'agit d'une technologie qui n'en est qu'à ses débuts, Duet AI peut générer des résultats qui semblent plausibles, mais qui sont en fait incorrects. Nous vous recommandons de valider tous les résultats de Duet AI avant de les utiliser. Pour en savoir plus, consultez Duet AI dans Google Cloud et l'IA responsable.

Cet atelier utilise l'assistance Duet AI pour déployer le "Superstore Cymbal" application Web d'épicerie. Vous développerez ensuite et déploierez une nouvelle fonctionnalité, puis créerez l'interface et le backend de l'application. Vous bénéficierez également de l'aide de Duet pour rédiger des tests pour votre application et découvrirez comment Duet peut s'intégrer à d'autres outils Google Cloud.

Objectifs

Vous allez apprendre à effectuer les opérations suivantes :

• Améliorez une application Web existante à l'aide de Duet AI.
• Déployer cette application dans Cloud Run
• Demander à Duet AI d'expliquer une erreur dans l'application et de la corriger.
• Développez des tests pour l'application avec l'aide de Duet AI.
• Afficher les journaux d'application avec l'aide de Duet AI.

Prérequis

• Un compte Google Cloud Platform et un projet pour lequel la facturation est activée
• Expérience de base sur Linux

2. Préparation

Cette section décrit tout ce que vous devez faire pour commencer cet atelier.

Créer un projet

Pour faciliter le nettoyage, nous allons créer un projet Google Cloud.

• Accédez à https://console.cloud.google.com.
• Cliquez sur le menu déroulant du sélecteur de projet.
• Sélectionnez "Créer un projet".
• Donnez-lui un nom facile à retenir, comme intro-to-containers

Activer Duet AI dans le projet Google Cloud

Nous allons maintenant activer l'API Duet AI dans notre projet Google Cloud. Suivez les étapes ci-dessous :

1. Accédez au tableau de bord de votre rendez-vous sur https://console.cloud.google.com et assurez-vous d'avoir sélectionné le projet Google Cloud avec lequel vous prévoyez de travailler pour cet atelier. Cliquez sur l'icône Duet AI située en haut à droite.

2. La fenêtre de chat de Duet AI s'ouvre sur le côté droit de la console. Cliquez sur le bouton "Enable" (Activer) comme illustré ci-dessous. Si le bouton "Activer" n'apparaît pas, mais qu'une interface Chat s'affiche à la place, cela signifie que vous avez probablement déjà activé Duet AI pour le projet et que vous pouvez passer directement à l'étape suivante.

3. Une fois Duet AI activé, vous pouvez effectuer un test en lui posant une ou deux questions. Quelques exemples de requêtes sont présentés, mais vous pouvez essayer quelque chose comme "Qu'est-ce que Cloud Run ?"

Duet AI répondra à votre question. Vous pouvez cliquer sur l'icône _ en haut à droite pour fermer la fenêtre de chat de Duet AI.

Activer Duet AI dans Cloud Shell IDE

Pour le reste de l'atelier de programmation, nous allons utiliser Cloud Shell IDE. Pour cela, nous devons activer et configurer Duet AI dans Cloud Shell IDE 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.

2. Cliquez sur le bouton "Éditeur" ou "Ouvrir l'éditeur" (selon le cas) et attendez que l'IDE Cloud Shell s'affiche. Vous utiliserez le "nouveau" et non dans l'ancien éditeur.

3. Cliquez sur le bouton Cloud Code - Sign in dans la barre d'état inférieure, comme illustré. Autorisez le plug-in comme indiqué. Si vous voyez "Cloud Code : aucun projet" dans la barre d'état, sélectionnez-le, puis choisissez le projet Google Cloud spécifique dans la liste des projets avec lesquels vous prévoyez de travailler.

4. Cliquez sur le bouton Duet AI en bas à droite comme illustré, puis sélectionnez le projet Google Cloud pour lequel nous avions activé l'API Cloud AI Companion.

5. Une fois que vous avez sélectionné et autorisé votre projet Google Cloud, assurez-vous qu'il apparaît dans le message d'état Cloud Code de la barre d'état et que Duet AI est également activé à droite, dans la barre d'état, comme illustré ci-dessous:

Duet AI est prêt à l'emploi !

3. Utiliser Duet AI

Dans cet atelier, vous allez créer une application Web. L'atelier met en avant de nombreuses façons d'essayer Duet AI. Mais si vous êtes curieux, vous pouvez aussi prendre le temps de poser une question à Duet n'importe où dans l'atelier.

Par exemple, vous utiliserez Terraform pour créer et déployer l'application de base. Si vous ne savez pas ce qu'est Terraform, vous pouvez demander à Duet AI. Si vous souhaitez comprendre le fonctionnement de chacune de ces étapes, Duet peut vous les expliquer. Vous voulez ouvrir le code et poser des questions sur des lignes spécifiques ? Essayez Duet.

Remarque:Comme il s'agit d'une technologie qui n'en est qu'à ses débuts, Duet AI peut générer des résultats qui semblent plausibles, mais qui sont en fait incorrects. Nous vous recommandons de valider tous les résultats de Duet AI avant de les utiliser. Pour en savoir plus, consultez Duet AI dans Google Cloud et l'IA responsable.

4. Créer l'application Web

Cet atelier utilise le "Superstore Cymbal" application Web d'épicerie. Dans les tâches suivantes de cet atelier, vous utiliserez Duet AI pour développer et déployer une nouvelle fonctionnalité dans cette application. Avant de voir comment Duet AI vous aide à comprendre le code existant, vous avez besoin de code existant pour travailler. Vous allez donc créer dès maintenant les composants frontend et backend de cette application.

Vous passerez de Cloud Shell à l'éditeur Cloud Shell pendant que vous travaillerez sur ce projet. Pour ce faire, il vous suffit d'utiliser les boutons situés en haut de l'écran:

Configurer l'environnement

Exécutez les commandes dans Cloud Shell.

1. Définissez l'ID du projet :

gcloud config set project <Google Cloud Project ID>

2. Pour lancer l'assistant d'identification Docker, exécutez la commande suivante :

gcloud auth configure-docker

3. Si vous y êtes invité, saisissez "Y" si vous souhaitez continuer.
4. Pour télécharger Cymbal Superstore, code d'application, exécutez la commande suivante à partir du répertoire racine dans Cloud Shell. Elle recevra le code Cymbal Superstore à partir de GitHub.

git clone https://github.com/GoogleCloudPlatform/cymbal-superstore

5. Vous devez activer plusieurs API pour que ce code s'exécute correctement. Dans Cloud Shell, saisissez la commande ci-dessous:

gcloud services enable cloudresourcemanager.googleapis.com compute.googleapis.com artifactregistry.googleapis.com serviceusage.googleapis.com run.googleapis.com bigquery.googleapis.com 

6. Accédez au répertoire Terraform dans le code que vous avez téléchargé:

cd cymbal-superstore/terraform

5. Étant donné que cet atelier n'utilise pas Spanner, nous allons utiliser une version des instructions Terraform qui n'installe pas Spanner. Dans Cloud Shell, saisissez la commande ci-dessous:

mv main.tf.nospanner main.tf

8. Pour ne pas avoir à saisir le nom et le numéro de votre projet chaque fois que vous exécutez une commande Terraform, créez un fichier nommé terraform.tfvars dans ce répertoire terraform. Ajoutez deux lignes à ce fichier avec les informations ci-dessous et enregistrez le fichier. Vous trouverez ces informations dans le tableau de bord du projet.

project_id="Your project id"
project_number=Your project number

9. Initialisez Terraform à l'aide de la ligne suivante:

terraform init

10. Enfin, déployez les ressources Terraform sur votre projet à l'aide de la commande ci-dessous. Vous serez peut-être invité à saisir "yes" (oui). pendant ce déploiement. Cela peut prendre jusqu'à 10 minutes. Nous vous conseillons de prendre le temps d'examiner le schéma de l'architecture disponible à l'adresse https://github.com/GoogleCloudPlatform/cymbal-superstore/blob/main/assets/architecture.png. Vous pouvez également consulter le code existant et utiliser Duet pour nous aider à le comprendre.

terraform apply

Une fois cette commande exécutée, un résultat semblable aux lignes suivantes doit s'afficher:

11. Mettez à jour votre interface pour communiquer avec le backend inventory_cr_endpoint dans votre sortie. Pour ce faire, copiez la valeur de votre inventory_cr_endpoint, ouvrez cymbal-superstore/frontend/.env.production et remplacez la valeur de REACT_APP_INVENTORY_URL.
12. Réexécutez terraform apply. Cela ne devrait prendre qu'une minute, car votre application React frontend sera redéployée sur Cloud Storage à l'aide de l'URL du backend mise à jour.
13. Ouvrez votre frontend_ip dans un navigateur. L'interface de Cymbal Superstore doit s'afficher. L'application des modifications peut prendre quelques minutes. Vous devrez donc peut-être effectuer plusieurs vérifications.

14. Cliquez sur New Arrivals (Nouveaux arrivants) à gauche de la page d'accueil de Cymbal. Vous devriez voir une page d'interface fictive avec des espaces réservés occupés par des produits également fictifs. C'est normal, car vous allez implémenter le code de l'API Inventory en backend pour diffuser la nouvelle page de produits dans la prochaine tâche de cet atelier.

Si vous ne parvenez pas à voir l'application dans le navigateur, vérifiez que Cloud Run s'est correctement déployé. Pour ce faire :

• Accédez à Cloud Run à partir du menu principal de la console Cloud.
• Sélectionnez le service inventory dans la liste des services.
• Sélectionnez REVISIONS dans les onglets de la page "Inventaire".

• Assurez-vous que l'application Cloud Run est déployée comme prévu:

S'il n'est pas déployé, vous pouvez le déployer en sélectionnant MODIFIER et DÉPLOYER LA NOUVELLE RÉVISION en haut de la page et accepter les valeurs par défaut.

5. Modifier le backend de l'application Web

Utilisons maintenant Duet AI pour ajouter des fonctionnalités au backend de notre application Web.

Dans cette tâche, vous allez demander à Duet AI de saisir du code pour implémenter le point de terminaison /newproducts dans l'application. Vous allez créer un point de terminaison dans le backend pour récupérer les nouveaux produits depuis Firestore et tester ce point de terminaison avant de déployer la modification.

Développer le point de terminaison /newproducts

1. Ouvrez le fichier cymbal-superstore/backend/index.ts dans l'éditeur Cloud Shell.
2. Dans le fichier index.ts, faites défiler la page jusqu'au commentaire DEMO TASK START, vers la ligne 95, où vous voyez un groupe de lignes commentées pour cette tâche. Supprimez toutes les lignes commentées et remplacez-les par l'invite Duet AI suivante:

// Get new products from Firestore (added < 7 days ago) and quantity > 0 (in stock)

3. Pour inviter Duet AI à générer le code de la fonction, sélectionnez l'intégralité du commentaire, puis cliquez sur l'ampoule ( ).
4. Dans le menu "Autres actions", sélectionnez "Générer le code".
5. Pointez sur le code généré, puis dans la barre d'outils Duet AI, cliquez sur "Accepter". Duet AI renseigne le code de fonction pour le point de terminaison /newproducts.

Remarque: Duet AI peut générer plusieurs versions du code pour votre requête. Pour choisir une version spécifique, faites défiler la liste dans la barre d'outils.

6. Le code généré devrait ressembler à ce qui suit :

app.get("/newproducts", async (req: Request, res: Response) => {
  const products = await firestore
    .collection("inventory")
    .where("timestamp", ">", new Date(Date.now() - 604800000))
    .where("quantity", ">", 0)
    .get();
  const productsArray: any[] = [];
  products.forEach((product) => {
    const p: Product = {
      id: product.id,
      name: product.data().name,
      price: product.data().price,
      quantity: product.data().quantity,
      imgfile: product.data().imgfile,
      timestamp: product.data().timestamp,
      actualdateadded: product.data().actualdateadded,
    };
    productsArray.push(p);
  });
  res.send(productsArray);
});

Un grand nombre de lignes peuvent être soulignées pour vous avertir de problèmes potentiels liés aux licences. Pour cet atelier, vous pouvez appliquer une solution rapide, mais nous vous invitons à consulter ces avertissements à l'avenir.

7. Si le code généré n'est pas équivalent à l'exemple de l'étape précédente, vous pouvez le remplacer maintenant ou voir comment Duet peut vous aider à déboguer plus tard. Il existe également une version du code avec l'erreur attendue dans le fichier scripts/solutioncode-with-bug.ts ..
8. Enregistrez le fichier index.ts.

Tester et déboguer le point de terminaison /``newproducts

1. Dans Cloud Shell, accédez au répertoire cymbal-superstore/backend. Saisissez la commande suivante:

npm run start

Le point de terminaison est alors démarré.

2. Pour afficher les résultats du point de terminaison, ouvrez un autre terminal à l'aide du signe + de la barre de menu de Cloud Shell, puis exécutez la commande suivante:

curl localhost:8000/newproducts

L'erreur curl: (52) Empty reply from server peut s'afficher dans le nouveau terminal, et un long message d'erreur avec les détails 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' peut s'afficher dans le terminal exécutant le point de terminaison.

3. Corrigeons cette erreur. Mais d'abord, nous devons comprendre ce que signifie le message d'erreur. Pour cela, nous allons demander à Duet. Ouvrez le chat Duet AI dans le menu situé à gauche de l'éditeur Cloud Shell et posez les questions suivantes:

I'm querying Cloud Firestore and getting this error: 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' What does it mean?

Duet devrait vous proposer des options pour résoudre le problème, y compris supprimer l'un des filtres d'inégalité. Pour résoudre le problème, supprimez la ligne .where("quantity", ">", 0) de index.ts pour n'avoir qu'un seul filtre dans notre requête.

4. Répétez les deux premières étapes ci-dessus pour redémarrer le serveur et obtenir la liste des produits. L'opération devrait maintenant être réussie. Si ce n'est pas le cas, utilisez Duet pour comprendre le problème (ou utilisez la solution corrigée dans scripts/solutioncode-bug-fixed.ts pour continuer).

Déployer la modification

Pour déployer l'application modifiée, il vous suffit d'exécuter à nouveau terraform apply à partir du répertoire terraform dans Cloud Shell. Vous pouvez ensuite afficher l'application à l'adresse IP fournie par Terraform.

6. Écriture des tests

Créer des tests pour le code d'un projet est une tâche importante qui n'est souvent pas hiérarchisée. Comme vous l'avez peut-être compris, Duet peut vous aider à créer ces tests.

Créons des tests pour le code newproducts que nous venons de créer.

1. Ouvrez backend/index.test.ts. Utilisez le chat Duet AI pour générer un test pour la fonction newproducts() avec la requête:

Help me write an Express.js test using Jest, in typescript, for the GET /newproducts handler in index.ts. Should check if the response code is 200 and the list of new products is length 8.

Vous remarquerez qu'il contient import lignes déjà présentes dans le fichier. Copiez uniquement le test describe() dans le fichier, aux lignes indiquées. Enregistrez le fichier.

Vous pouvez aussi améliorer l'invite et indiquer à Duet de n'inclure aucune instruction d'importation. Vous devriez donc obtenir uniquement le code dont vous avez besoin.

2. Pour afficher les résultats du test, accédez à Cloud Shell, remplacez le répertoire par le dossier backend et exécutez la commande suivante:

npm run test

7. Journalisation

Duet AI peut vous aider dans votre projet, même après son déploiement. Dans cette section, nous allons examiner les journaux à l'aide de Duet AI.

Retournez dans la console Cloud et vérifiez que Duet est en cours d'exécution. Demandez à Duet où trouver les journaux. N'hésitez pas à essayer votre propre requête, mais si elle ne donne pas de réponse appropriée, la requête suivante devrait fonctionner.

How can I view the Cloud Run logs for the service called 'inventory'?

Duet AI devrait vous suggérer d'accéder à la page Cloud Run, de sélectionner le service d'inventaire, puis d'examiner les journaux de ce service. Vous devriez obtenir un résultat semblable au suivant :

Sélectionnez l'un des éléments et demandez à Duet AI de l'expliquer. Vous devriez obtenir une description de l'entrée en langage naturel.

Vous pouvez également afficher les entrées de journal dans l'explorateur de journaux, que vous pouvez ouvrir à l'aide de l'option "Journalisation" du menu principal. L'affichage des entrées de journal à partir de l'explorateur de journaux présente l'avantage de disposer d'une option d'explication intégrée, comme illustré ci-dessous:

8. Félicitations !

Félicitations ! Vous savez désormais utiliser Duet AI pour comprendre du code que vous n'avez peut-être jamais vu auparavant. Vous avez amélioré ce code, créé des tests pour celui-ci et utilisé Duet pour faciliter la compréhension des entrées de journaux.

Nettoyage

Supprimer le projet

Pour effectuer un nettoyage, il nous suffit de supprimer le projet.

• Dans le menu de navigation, sélectionnez "IAM et Administrateur
• Cliquez ensuite sur "Paramètres" dans le sous-menu.
• Cliquez sur l'icône de la corbeille avec le texte "Supprimer le projet".
• Suivez les instructions.

Dans cet atelier, nous avons appris à effectuer les tâches suivantes:

• Améliorez une application Web existante à l'aide de Duet AI.
• Déployer cette application dans Cloud Run
• Demander à Duet AI d'expliquer une erreur dans l'application et de la corriger.
• Développez des tests pour l'application avec l'aide de Duet AI.
• Afficher les journaux d'application avec l'aide de Duet AI.