Déboguer les applications Google Chat

Node.js

Python

Java

Node.js

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

• La dernière version de nodemon installée dans votre environnement local est utilisée pour la recharge automatique :

  npm install -g nodemon

• Application de 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 quelle valeur, 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 installed in your local environment.

• Un compte ngrok.

Python

• La dernière version de python3 installée dans votre environnement local.
• La dernière version de pip et virtualenv doit être installée dans votre environnement local. Elles sont utilisées pour gérer respectivement les packages Python et les environnements virtuels.
• Application de 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 quelle valeur, 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 installed in your local environment.
• Un compte ngrok.
• La dernière version de gcloud doit être installée et initialisée dans votre environnement local.

Java

• La dernière version stable de Java SE 11's JDK installée dans votre environnement local.
• La dernière version de Apache Maven installée dans votre environnement local, utilisée pour gérer les projets Java.
• Application de 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 du déclencheur Message sur une valeur telle que 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 installed in your local environment.
• Un compte ngrok.
• La dernière version de gcloud doit être installée et initialisée dans votre environnement local.

Node.js

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

   git clone https://github.com/googleworkspace/add-ons-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 add-ons-samples/node/chat/avatar-app.

   2. Configurez l'application pour le débogage de la recharge 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. Depuis le 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 des requêtes HTTP dans le fichier index.js, puis lancez l'exécution et le débogage avec la configuration Debug Watch ajoutée précédemment. L'application est désormais 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.

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 hôte local par l'application ngrok. Vous pouvez surveiller toutes les activités en l'ouvrant dans un navigateur.

   

   Figure 5. L'interface Web hébergée par l'application ngrok n'affiche aucune requête HTTP.

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

   • Ouvrez Google Chat.

     Accéder à Google Chat

   • Cliquez sur Nouvelle discussion add.

   • 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 et appuyez sur enter. Votre application de chat ne répond pas, car elle est en cours de débogage.

6. Dans Visual Studio Code dans votre environnement local, vous pouvez voir que l'exécution est suspendue au niveau du point d'arrêt défini.

   

   Figure 6. L'exécution est suspendue au niveau du 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 à votre message.

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

   

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

9. Pour modifier le comportement de l'application, mettez à jour le texte de la réponse dans le fichier index.js. 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 est en cours d'exécution et écoute les requêtes HTTP sur le port 9000 avec la modification du code chargée.

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 dans 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 à partir de 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.

Python

1. Obtenez de nouveaux identifiants utilisateur à utiliser pour les identifiants par défaut de l'application :

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

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

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

   git clone https://github.com/googleworkspace/add-ons-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 add-ons-samples/python/chat/avatar-app.

   2. Créez un environnement virtuel pour Python env et 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 des requêtes HTTP dans le fichier main.py, puis lancez l'exécution et le débogage avec la configuration Debug Watch ajoutée précédemment. L'application est désormais 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 hôte local par l'application ngrok. Vous pouvez surveiller toutes les activités en l'ouvrant dans un navigateur.

   

   Figure 5. L'interface Web hébergée par l'application ngrok n'affiche aucune requête HTTP.

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

   • Ouvrez Google Chat.

     Accéder à Google Chat

   • Cliquez sur Nouvelle discussion add.

   • 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! et appuyez sur enter. Votre application de chat ne répond pas, car elle est en cours de débogage.

7. Dans Visual Studio Code dans votre environnement local, vous pouvez voir que l'exécution est suspendue au niveau du point d'arrêt défini.

   

   Figure 6. L'exécution est suspendue au niveau du 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 photo d'avatar dans le message.

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

   

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

10. Pour modifier le comportement de l'application, remplacez Hello par Hey dans le 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 est en cours d'exécution et écoute les requêtes HTTP sur le port 9000 avec la modification du code chargée.

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 dans 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 à partir de 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. Obtenez de nouveaux identifiants utilisateur à utiliser pour les identifiants par défaut de l'application :

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

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

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

   git clone https://github.com/googleworkspace/add-ons-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 add-ons-samples/java/chat/avatar-app.

   2. Configurez le projet Maven pour exécuter l'application App sur le port 9000 en local en ajoutant le plug-in de compilation Google Cloud Functions Framework 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 s'attache à l'application précédemment lancée 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 des requêtes 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 hôte local par l'application ngrok. Vous pouvez surveiller toutes les activités en l'ouvrant dans un navigateur.

   

   Figure 5. L'interface Web hébergée par l'application ngrok n'affiche aucune requête HTTP.

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

   • Ouvrez Google Chat.

     Accéder à Google Chat

   • Cliquez sur Nouvelle discussion add.

   • 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! et appuyez sur enter. Votre application de chat ne répond pas, car elle est en cours de débogage.

7. Dans Visual Studio Code dans votre environnement local, vous pouvez voir que l'exécution est suspendue au niveau du point d'arrêt défini.

   

   Figure 6. L'exécution est suspendue au niveau du 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 photo d'avatar dans le message.

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

   

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

10. Pour modifier le comportement de l'application, remplacez Hello par Hey dans la ligne 55 du fichier App.java, redémarrez le processus mvnDebug, puis relancez Remote Debug Watch pour rattacher 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 dans 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 à partir de 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.