Déboguer les applications Google Chat

Node.js

Python

Java

Node.js

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

• Dernière version de nodemon installée sur votre ordinateur est utilisé pour l'actualisation automatique:

  npm install -g nodemon
  

• Une application de chat HTTP configurée pour messagerie. Vous pouvez suivre les sections Conditions préalables, Configurez environnement, et publiez l'application sur Google. Chat de Guide de démarrage rapide. La seule la différence est que vous devez définir le nom de l'application sur Debug App. l'URL de l'application vers un élément tel que http://example.com.

• Un IDE configuré dans votre environnement local et capable de déboguer Nous utilisons les Visual Studio Code IDE et son IDE par défaut fonctionnalités de débogage ce guide à titre d'illustration.

• Git installée dans votre environnement local.

• Un compte ngrok

Python

• Dernière version de python3 installée dans votre environnement local.
• La dernière version de pip et virtualenv installé dans votre dans l'environnement local, ils permettent de gérer les packages Python et les respectivement.
• Une application de chat HTTP configurée pour messagerie. Vous pouvez suivre les sections Conditions préalables, Configurez environnement, et publiez l'application sur Google. Chat de Guide de démarrage rapide. La seule la différence est que vous devez définir le nom de l'application sur Debug App. l'URL de l'application vers un élément tel que http://example.com.
• Un IDE configuré dans votre environnement local et capable de déboguer Nous utilisons les Visual Studio Code IDE et son IDE par défaut fonctionnalités de débogage ce guide à titre d'illustration.
• Git installée dans votre environnement local.
• Un compte ngrok
• Dernière version de gcloud installée et initialisées dans votre environnement local.

Java

• La dernière version stable de Java SE 11's JDK installée sur votre environnement.
• Dernière version de Apache Maven installée dans votre environnement local ; il est utilisé pour gérer les projets Java.
• Une application de chat HTTP configurée pour messagerie. Vous pouvez suivre les sections Conditions préalables, Configurez environnement, et publiez l'application sur Google. Chat de Guide de démarrage rapide. La seule la différence est que vous devez définir le nom de l'application sur Debug App. l'URL de l'application vers un élément tel que http://example.com.
• Un IDE configuré dans votre environnement local et capable de déboguer Nous utilisons les Visual Studio Code IDE et son IDE par défaut fonctionnalités de débogage ce guide à titre d'illustration.
• Git installée dans votre environnement local.
• Un compte ngrok
• Dernière version de gcloud installée et initialisées dans votre environnement local.

Node.js

1. Cloner le dépôt googleworkspace/google-chat-samples depuis GitHub dans votre environnement local, il contient le code de l'application exécuter:

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

2. Depuis l'IDE Visual Studio Code installé dans votre environnement local, effectuer les opérations suivantes:

   1. Ouvrez le dossier dans une nouvelle fenêtre. google-chat-samples/node/basic-app

   2. Configurez l'application pour le débogage par actualisation automatique en ajoutant deux 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 l'événement 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 suspend le traitement de la requête HTTP dans le index.js, puis lancez l'exécution et le débogage avec Configuration Debug Watch ajoutée précédemment. L'application est maintenant en cours d'exécution et à l'écoute des requêtes HTTP sur le port 9000.

      

      Figure 3. L'application est en cours d'exécution et écoute le trafic HTTP requêtes 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 dans votre compte ngrok. Toutes les requêtes sont désormais redirigées vers votre et le port utilisé par l'application.

   

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

4. Une interface Web est également démarrée sur votre localhost par 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 directement message:

   • Ouvrez Google Chat.

     Accéder à Google Chat

   • Cliquez sur Nouveau chat add.

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

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

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

6. Dans le fichier 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 de requêtes et de réponses HTTP depuis l'interface Web hébergé par l'application ngrok dans votre environnement local.

   

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

9. Pour modifier le comportement de l'application, remplacez Your message par Here was your message a intégré 35 de index.json. Lorsque vous enregistrez le fichier, nodemon actualise 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 de code chargée.

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

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 l'environnement local avec lequel l'application génère une réponse la version mise à jour du message Here was your message : Hello.

Python

1. Procurez-vous de nouveaux identifiants utilisateur à utiliser pour les paramètres par défaut de l'application Identifiants:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login
   

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

2. Cloner 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. Depuis l'IDE Visual Studio Code installé dans votre environnement local, effectuer les opérations suivantes:

   1. Ouvrez le dossier dans une nouvelle fenêtre. google-chat-samples/python/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 le environnement:

      pip install -r requirements.txt
      

   4. Créez le fichier .vscode/launch.json dans le répertoire racine. configurer 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", "hello_chat",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

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

      

      Figure 3. L'application est en cours d'exécution et écoute le trafic HTTP requêtes 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 dans votre compte ngrok. Toutes les requêtes sont désormais redirigées vers votre et le port utilisé par l'application.

   

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

5. Une interface Web est également démarrée sur votre localhost par 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 directement message:

   • Ouvrez Google Chat.

     Accéder à Google Chat

   • Cliquez sur Nouveau chat add.

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

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

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

7. Dans le fichier 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 photo d'avatar dans le message.

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

   

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

10. Pour modifier le comportement de l'application, remplacez Hello par Hey intégré 51 du fichier main.py. Lorsque vous enregistrez le fichier, Visual Studio Code actualise automatiquement l'application avec le code source mis à jour 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 de code chargée.

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

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 l'environnement local avec lequel l'application génère une réponse la version mise à jour du message.

Java

1. Procurez-vous de nouveaux identifiants utilisateur à utiliser pour les paramètres par défaut de l'application Identifiants:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login
   

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

2. Cloner le dépôt googleworkspace/google-chat-samples depuis GitHub dans votre environnement local, il contient le code d'application:

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

3. Depuis l'IDE Visual Studio Code installé dans votre environnement local, effectuer les opérations suivantes:

   1. Ouvrez le dossier dans une nouvelle fenêtre. google-chat-samples/java/avatar-app

   2. Configurer le projet Maven sur lequel exécuter l'application HelloChat portez 9000 localement en ajoutant le build du framework Cloud Functions Plug-in 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>HelloChat</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. configurez un lancement nommé Remote Debug Watch qui s'associe 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 suspend le traitement de la requête HTTP dans le HelloChat.java, puis commencez à joindre et le débogage avec Configuration Remote Debug Watch ajoutée précédemment. L'application est en cours d'exécution et à l'écoute des requêtes HTTP sur le port 9000.

      

      Figure 3 : L'application est en cours d'exécution et écoute le protocole 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 dans votre compte ngrok. Toutes les requêtes sont désormais redirigées vers votre et le port utilisé par l'application.

   

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

5. Une interface Web est également démarrée sur votre localhost par 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 directement message:

   • Ouvrez Google Chat.

     Accéder à Google Chat

   • Cliquez sur Nouveau chat add.

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

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

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

7. Dans le fichier 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 photo d'avatar dans le message.

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

   

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

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

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

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 l'environnement local avec lequel l'application génère une réponse la version mise à jour du message.