Déboguer les applications Google Chat

En tant que développeur d'applications Google Chat, vous devrez peut-être déboguer du code pour tester des modifications ou résoudre des problèmes complexes. Vous pouvez déboguer les applications Chat de différentes manières, en fonction de l'architecture de votre application, de ses fonctionnalités, de son déploiement et de vos préférences.

Cette page explique comment déboguer une application HTTP Chat à l'aide de ngrok, une plate-forme d'entrée unifiée que vous pouvez utiliser pour tester des environnements de développement locaux. Dans ce guide, vous allez tester des modifications de code dans un environnement local et résoudre des problèmes dans un environnement distant.

Remarque :Si votre application Chat est compilée avec Google Apps Script, utilisez plutôt ce qui suit :

• Tester un déploiement
• Utiliser le débogueur et les points d'arrêt

Déboguer depuis l'environnement de développement local

Dans cette section, vous allez interagir avec votre application Chat qui s'exécute dans votre environnement local.

Figure 1. Déboguer dans un environnement de développement local

Atelier

Node.js

Python

Java

Prérequis

Node.js

• Dernières versions de node et npm installées dans votre environnement local.

• Dernière version de nodemon installée dans votre environnement local, elle est utilisée à des fins de rechargement automatique:

  npm install -g nodemon

• Une application Chat HTTP configurée pour la messagerie Vous pouvez suivre les sections Conditions préalables, Configurer l'environnement et Publier l'application sur Google Chat du guide de démarrage rapide. Les seules différences sont que vous devez définir le nom de l'application sur Debug App et l'URL du point de terminaison HTTP sur n'importe quoi, par exemple http://example.com.

• Un IDE configuré dans votre environnement local et capable de déboguer Dans ce guide, nous utilisons l'IDE Visual Studio Code et ses fonctionnalités de débogage par défaut à des fins d'illustration.

• Git doit être installé dans votre environnement local.

• Un compte ngrok.

Python

• Dernière version de python3 installée dans votre environnement local.
• Dernière version de pip et virtualenv installée dans votre environnement local. Ils sont utilisés pour gérer respectivement les packages Python et les environnements virtuels.
• Une application Chat HTTP configurée pour la messagerie Vous pouvez suivre les sections Conditions préalables, Configurer l'environnement et Publier l'application sur Google Chat du guide de démarrage rapide. Les seules différences sont que vous devez définir le nom de l'application sur Debug App et l'URL du point de terminaison HTTP sur n'importe quoi, par exemple http://example.com.
• Un IDE configuré dans votre environnement local et capable de déboguer Dans ce guide, nous utilisons l'IDE Visual Studio Code et ses fonctionnalités de débogage par défaut à des fins d'illustration.
• Git doit être installé dans votre environnement local.
• Un compte ngrok.
• Dernière version de gcloud installée et initialisée dans votre environnement local.

Java

• Dernière version stable de Java SE 11's JDK installée dans votre environnement local.
• Dernière version de Apache Maven installée dans votre environnement local, elle permet de gérer les projets Java.
• Une application Chat HTTP configurée pour la messagerie Vous pouvez suivre les sections Conditions préalables, Configurer l'environnement et Publier l'application sur Google Chat du guide de démarrage rapide. Les seules différences sont que vous devez définir le nom de l'application sur Debug App et l'URL du point de terminaison HTTP sur n'importe quel élément, par exemple http://example.com.
• Un IDE configuré dans votre environnement local et capable de déboguer Dans ce guide, nous utilisons l'IDE Visual Studio Code et ses fonctionnalités de débogage par défaut à des fins d'illustration.
• Git doit être installé dans votre environnement local.
• Un compte ngrok.
• Dernière version de gcloud installée et initialisée dans votre environnement local.

Rendre le service localhost disponible publiquement

Vous devez connecter votre environnement local à Internet pour que l'application Chat puisse y accéder. L'application ngrok permet de rediriger les requêtes HTTP envoyées à une URL publique vers votre environnement local.

1. Dans un navigateur de votre environnement local, connectez-vous à votre compte ngrok.
2. Installez l'application et configurez votre authtoken dans votre environnement local.
3. Créez un domaine statique dans votre compte ngrok, référencé sous le nom NGROK_STATIC_DOMAIN dans les instructions de ce guide.

Configurer l'application Chat

Configurez l'application Chat pour qu'elle envoie toutes ses requêtes HTTP à votre domaine statique.

1. Dans la console Google Cloud, ouvrez la page de l'API Google Chat:

   Accéder à la page de l'API Google Chat

2. Cliquez sur l'onglet Configuration.

3. Accédez à Fonctionnalités interactives > Paramètres de connexion et définissez la valeur du champ de texte URL du point de terminaison HTTP sur:

   https://NGROK_STATIC_DOMAIN
   

   Remplacez NGROK_STATIC_DOMAIN par le domaine statique de votre compte ngrok.

4. Cliquez sur Enregistrer.

Figure 2. L'application Chat envoie toutes ses requêtes HTTP au domaine statique. Le service public ngrok sert de pont entre l'application Chat et le code d'application qui s'exécute localement.

Tester l'application Chat

Vous pouvez déployer, configurer, tester, déboguer et recharger automatiquement votre application Chat localement.

Remarque :L'application Chat s'exécute avec le framework Cloud Functions dans les exemples pour Python et Java, et avec le framework Express dans l'exemple pour Node.js.

Node.js

1. Clonez le dépôt googleworkspace/google-chat-samples depuis GitHub vers votre environnement local. Il contient le code de l'application à exécuter:

   git clone https://github.com/googleworkspace/google-chat-samples.git

2. Dans l'IDE Visual Studio Code installé dans votre environnement local, procédez comme suit:

   1. Dans une nouvelle fenêtre, ouvrez le dossier google-chat-samples/node/basic-app.

   2. Configurez l'application pour le débogage du rechargement automatique en ajoutant deux scripts dans le fichier package.json:

      {
          ...
          "scripts": {
              ...
              "debug": "node --inspect index.js",
              "debug-watch": "nodemon --watch ./ --exec npm run debug"
          }
          ...
      }
      

   3. À partir du répertoire racine, installez l'application:

      npm install

   4. Créez et configurez un lancement nommé Debug Watch qui déclenche le script debug-watch en créant le fichier .vscode/launch.json dans le répertoire racine:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Debug Watch",
              "cwd": "${workspaceRoot}",
              "runtimeExecutable": "npm",
              "runtimeArgs": ["run-script", "debug-watch"]
          }]
      }
      

   5. Ajoutez un point d'arrêt qui met en pause le traitement de la requête HTTP dans le fichier index.js, puis démarrez l'exécution et le débogage avec la configuration Debug Watch ajoutée précédemment. L'application est maintenant en cours d'exécution et écoute les requêtes HTTP sur le port 9000.

      

      Figure 3. L'application s'exécute et écoute les requêtes HTTP sur le port 9000.

3. Lancez l'application ngrok dans votre environnement local:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Remplacez NGROK_STATIC_DOMAIN par le domaine statique de votre compte ngrok. Toutes les requêtes sont désormais redirigées vers votre environnement local et le port utilisé par l'application.

   

   Figure 4. Terminal avec le serveur ngrok en cours d'exécution et de redirection.

4. Une interface Web est également lancée sur votre localhost par l'application ngrok. Vous pouvez surveiller toutes les activités en l'ouvrant dans un navigateur.

   

   Figure 5. Interface Web hébergée par l'application ngrok n'affichant aucune requête HTTP.

5. Testez votre application Chat en lui envoyant un message privé:

   • Ouvrez Google Chat.

     Accéder à Google Chat

   • Cliquez sur Nouveau chat .

   • Dans la boîte de dialogue, saisissez le nom de votre application Chat.

   • Dans les résultats de recherche, recherchez votre application Chat, puis cliquez sur Ajouter > Chat.

   • Dans l'espace de message privé, saisissez Hello, puis appuyez sur enter. Votre application Chat ne répond pas, car elle est en cours de débogage.

6. Dans Visual Studio Code de votre environnement local, vous pouvez voir que l'exécution est mise en pause au point d'arrêt défini.

   

   Figure 6. L'exécution est suspendue au point d'arrêt défini.

7. Lorsque vous reprenez l'exécution à partir du débogueur de Visual Studio Code avant que Google Chat n'expire, l'application Chat répond Your message : Hello.

8. Vous pouvez consulter les journaux des requêtes et des réponses HTTP à partir de l'interface Web hébergée par l'application ngrok dans votre environnement local.

   

   Figure 7. Requête HTTP de l'interface Web hébergée par l'application ngrok.

9. Pour modifier le comportement de l'application, remplacez Your message par le 35 intégré Here was your message de index.json. Lorsque vous enregistrez le fichier, nodemon recharge automatiquement l'application avec le code source mis à jour, et Visual Studio Code reste en mode débogage.

   

   Figure 8. L'application s'exécute et écoute les requêtes HTTP sur le port 9000 avec le changement de code chargé.

10. Cette fois, au lieu d'envoyer un deuxième message Hello dans l'espace, vous pouvez sélectionner la dernière requête HTTP enregistrée sur l'interface Web hébergée par l'application ngrok dans votre environnement local, puis cliquer sur Replay. Comme la dernière fois, votre application Chat ne répond pas, car elle est en cours de débogage.

11. Lorsque vous reprenez l'exécution à partir du débogueur de Visual Studio Code, vous pouvez voir dans l'interface Web hébergée par l'application ngrok dans votre environnement local que l'application génère une réponse avec la version mise à jour du message Here was your message : Hello.

Python

1. Procurez-vous de nouveaux identifiants utilisateur à utiliser comme identifiants par défaut de l'application:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   Remplacez PROJECT_ID par l'ID de projet du projet Cloud de l'application.

2. Clonez le dépôt googleworkspace/google-chat-samples depuis GitHub vers votre environnement local. Il contient le code de l'application:

   git clone https://github.com/googleworkspace/google-chat-samples.git

3. Dans l'IDE Visual Studio Code installé dans votre environnement local, procédez comme suit:

   1. Dans une nouvelle fenêtre, ouvrez le dossier google-chat-samples/python/avatar-app.

   2. Créez un environnement virtuel pour Python env, puis activez-le:

      virtualenv env
      source env/bin/activate

   3. Installez toutes les dépendances du projet à l'aide de pip dans l'environnement virtuel:

      pip install -r requirements.txt

   4. Créez le fichier .vscode/launch.json dans le répertoire racine et configurez un lancement nommé Debug Watch qui déclenche l'application à partir du module functions-framework sur le port 9000 en mode débogage sur l'environnement virtuel env:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "python",
              "request": "launch",
              "name": "Debug Watch",
              "python": "${workspaceFolder}/env/bin/python3",
              "module": "functions_framework",
              "args": [
                  "--target", "avatar_app",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

   5. Ajoutez un point d'arrêt qui met en pause le traitement de la requête HTTP dans le fichier main.py, puis démarrez l'exécution et le débogage avec la configuration Debug Watch ajoutée précédemment. L'application est maintenant en cours d'exécution et écoute les requêtes HTTP sur le port 9000.

      

      Figure 3. L'application s'exécute et écoute les requêtes HTTP sur le port 9000.

4. Lancez l'application ngrok dans votre environnement local:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Remplacez NGROK_STATIC_DOMAIN par le domaine statique de votre compte ngrok. Toutes les requêtes sont désormais redirigées vers votre environnement local et le port utilisé par l'application.

   

   Figure 4. Terminal avec le serveur ngrok en cours d'exécution et de redirection.

5. Une interface Web est également lancée sur votre localhost par l'application ngrok. Vous pouvez surveiller toutes les activités en l'ouvrant dans un navigateur.

   

   Figure 5. Interface Web hébergée par l'application ngrok n'affichant aucune requête HTTP.

6. Testez votre application Chat en lui envoyant un message privé:

   • Ouvrez Google Chat.

     Accéder à Google Chat

   • Cliquez sur Nouveau chat .

   • Dans la boîte de dialogue, saisissez le nom de votre application Chat.

   • Dans les résultats de recherche, recherchez votre application Chat, puis cliquez sur Ajouter > Chat.

   • Dans l'espace de message privé, saisissez Hey!, puis appuyez sur enter. Votre application Chat ne répond pas, car elle est en cours de débogage.

7. Dans Visual Studio Code de votre environnement local, vous pouvez voir que l'exécution est mise en pause au point d'arrêt défini.

   

   Figure 6. L'exécution est suspendue au point d'arrêt défini.

8. Lorsque vous reprenez l'exécution à partir du débogueur de Visual Studio Code avant que Google Chat n'expire, l'application Chat répond avec votre nom et votre avatar dans le message.

9. Vous pouvez consulter les journaux des requêtes et des réponses HTTP à partir de l'interface Web hébergée par l'application ngrok dans votre environnement local.

   

   Figure 7. Requête HTTP de l'interface Web hébergée par l'application ngrok.

10. Pour modifier le comportement de l'application, remplacez Hello par Hey 51 intégré au fichier main.py. Lorsque vous enregistrez le fichier, Visual Studio Code recharge automatiquement l'application avec le code source mis à jour et reste en mode débogage.

    

    Figure 8. L'application s'exécute et écoute les requêtes HTTP sur le port 9000 avec le changement de code chargé.

11. Cette fois, au lieu d'envoyer un deuxième message Hey! dans l'espace, vous pouvez sélectionner la dernière requête HTTP enregistrée sur l'interface Web hébergée par l'application ngrok dans votre environnement local, puis cliquer sur Replay. Comme la dernière fois, votre application Chat ne répond pas, car elle est en cours de débogage.

12. Lorsque vous reprenez l'exécution à partir du débogueur de Visual Studio Code, vous pouvez voir dans l'interface Web hébergée par l'application ngrok dans votre environnement local que l'application génère une réponse avec la version mise à jour du message.

Java

1. Procurez-vous de nouveaux identifiants utilisateur à utiliser comme identifiants par défaut de l'application:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   Remplacez PROJECT_ID par l'ID de projet du projet Cloud de l'application.

2. Clonez le dépôt googleworkspace/google-chat-samples depuis GitHub dans votre environnement local. Il contient le code de l'application:

   git clone https://github.com/googleworkspace/google-chat-samples.git

3. Dans l'IDE Visual Studio Code installé dans votre environnement local, procédez comme suit:

   1. Dans une nouvelle fenêtre, ouvrez le dossier google-chat-samples/java/avatar-app.

   2. Configurez le projet Maven pour exécuter l'application App sur le port 9000 localement en ajoutant le plug-in de compilation du framework Cloud Functions function-maven-plugin dans le fichier pom.xml:

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>App</functionTarget>
              <port>9000</port>
          </configuration>
      </plugin>
      ...
      

   3. Vous pouvez maintenant le lancer localement en mode débogage:

      mvnDebug function:run
      Preparing to execute Maven in debug mode
      Listening for transport dt_socket at address: 8000

   4. Créez le fichier .vscode/launch.json dans le répertoire racine et configurez un lancement nommé Remote Debug Watch qui se connecte à l'application lancée précédemment avec le port 8000:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "java",
              "request": "attach",
              "name": "Remote Debug Watch",
              "projectName": "http-function",
              "hostName": "localhost",
              "port": 8000
          }]
      }
      

   5. Ajoutez un point d'arrêt qui met en pause le traitement de la requête HTTP dans le fichier App.java, puis commencez à associer et à déboguer avec la configuration Remote Debug Watch ajoutée précédemment. L'application est maintenant en cours d'exécution et écoute les requêtes HTTP sur le port 9000.

      

      Figure 3 : L'application est en cours d'exécution et écoute les requêtes HTTP sur le port 9000.

4. Lancez l'application ngrok dans votre environnement local:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Remplacez NGROK_STATIC_DOMAIN par le domaine statique de votre compte ngrok. Toutes les requêtes sont désormais redirigées vers votre environnement local et le port utilisé par l'application.

   

   Figure 4. Terminal avec le serveur ngrok en cours d'exécution et de redirection.

5. Une interface Web est également lancée sur votre localhost par l'application ngrok. Vous pouvez surveiller toutes les activités en l'ouvrant dans un navigateur.

   

   Figure 5. Interface Web hébergée par l'application ngrok n'affichant aucune requête HTTP.

6. Testez votre application Chat en lui envoyant un message privé:

   • Ouvrez Google Chat.

     Accéder à Google Chat

   • Cliquez sur Nouveau chat .

   • Dans la boîte de dialogue, saisissez le nom de votre application Chat.

   • Dans les résultats de recherche, recherchez votre application Chat, puis cliquez sur Ajouter > Chat.

   • Dans l'espace de message privé, saisissez Hey!, puis appuyez sur enter. Votre application Chat ne répond pas, car elle est en cours de débogage.

7. Dans Visual Studio Code de votre environnement local, vous pouvez voir que l'exécution est mise en pause au point d'arrêt défini.

   

   Figure 6. L'exécution est suspendue au point d'arrêt défini.

8. Lorsque vous reprenez l'exécution à partir du débogueur de Visual Studio Code avant que Google Chat n'expire, l'application Chat répond avec votre nom et votre avatar dans le message.

9. Vous pouvez consulter les journaux des requêtes et des réponses HTTP à partir de l'interface Web hébergée par l'application ngrok dans votre environnement local.

   

   Figure 7. Requête HTTP de l'interface Web hébergée par l'application ngrok.

10. Pour modifier le comportement de l'application, remplacez Hello par Hey 55 intégré au fichier App.java, redémarrez le processus mvnDebug et relancez Remote Debug Watch pour réassocier et redémarrer le débogage.

11. Cette fois, au lieu d'envoyer un deuxième message Hey! dans l'espace, vous pouvez sélectionner la dernière requête HTTP enregistrée sur l'interface Web hébergée par l'application ngrok dans votre environnement local, puis cliquer sur Replay. Comme la dernière fois, votre application Chat ne répond pas, car elle est en cours de débogage.

12. Lorsque vous reprenez l'exécution à partir du débogueur de Visual Studio Code, vous pouvez voir dans l'interface Web hébergée par l'application ngrok dans votre environnement local que l'application génère une réponse avec la version mise à jour du message.

Déboguer à partir d'un environnement distant

Dans cette section, vous allez interagir avec votre application Chat qui s'exécute dans un environnement distant.

Figure 9. Déboguer à partir d'un environnement distant

Prérequis

• Un espace de messages privés avec votre application Chat. Pour en créer un, vous pouvez suivre la section Tester votre application Chat du guide de démarrage rapide et rechercher votre application Chat.
• Votre application s'exécute dans votre environnement distant avec le débogueur activé sur un port donné. Elle est référencée sous le nom REMOTE_DEBUG_PORT dans les instructions de ce guide.
• Votre environnement local peut ssh à votre environnement distant.
• Un IDE configuré dans votre environnement local et capable de déboguer Dans ce guide, nous utilisons l'IDE Visual Studio Code et ses fonctionnalités de débogage par défaut à des fins d'illustration.

Connecter vos environnements local et distant

Dans l'environnement local à partir duquel vous souhaitez établir une connexion de client de débogage, configurez un tunnel SSH:

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

Remplacez les éléments suivants :

• LOCAL_DEBUG_PORT: port de débogage dans votre environnement local.
• REMOTE_USERNAME: nom d'utilisateur dans votre environnement distant.
• REMOTE_ADDRESS: adresse de votre environnement distant.
• REMOTE_DEBUG_PORT: port de débogage dans votre environnement distant.

Le port de débogage de votre environnement local est désormais associé au port de débogage de votre environnement distant.

Démarrer le débogage

Dans l'IDE Visual Studio Code installé dans votre environnement local, procédez comme suit:

1. Dans une nouvelle fenêtre, ouvrez le code source de votre application.

2. Créez le fichier .vscode/launch.json dans le répertoire racine et configurez un lancement nommé Debug Remote qui se connecte au port de débogage dans votre environnement local:

   Node.js

   {
       "version": "0.2.0",
       "configurations": [{
           "type": "node",
           "request": "attach",
           "name": "Debug Remote",
           "address": "127.0.0.1",
           "port": LOCAL_DEBUG_PORT
       }]
   }
   

   Python

   {
       "version": "0.2.0",
       "configurations": [{
           "type": "python",
           "request": "attach",
           "name": "Debug Remote",
           "connect": {
               "host": "127.0.0.1",
               "port": LOCAL_DEBUG_PORT
           }
       }]
   }
   

   Java

   {
       "version": "0.2.0",
       "configurations": [{
           "type": "java",
           "request": "attach",
           "name": "Debug Remote",
           "hostName": "127.0.0.1",
           "port": LOCAL_DEBUG_PORT
       }]
   }
   

   Remplacez LOCAL_DEBUG_PORT par le port de débogage dans votre environnement local.

3. Ajoutez un point d'arrêt dans le code source de votre application qui met en pause le traitement de la requête HTTP, puis lancez l'exécution et le débogage avec la configuration Debug Remote ajoutée précédemment.

Dans l'espace de message privé de votre application Chat, saisissez tout ce que vous souhaitez tester, puis appuyez sur enter. Votre application Chat ne répond pas, car elle est en cours de débogage dans l'IDE Visual Studio Code.

Articles associés

• Découvrez comment activer et interroger les journaux d'erreurs.
• Découvrez comment résoudre les erreurs de l'application Google Chat, comme "L'application ne répond pas", "L'API Google Chat n'est disponible que pour les utilisateurs de Google Workspace" ou "Les utilisateurs peuvent être exclus des espaces".
• Découvrez comment résoudre les erreurs de carte, par exemple lorsque les messages, les boîtes de dialogue ou les aperçus de liens de la carte ne s'affichent pas ou ne fonctionnent pas comme prévu.