Cómo depurar apps de Google Chat

Node.js

Python

Java

Node.js

• Las versiones más recientes de node y npm instaladas en tu entorno local

• La versión más reciente de nodemon instalada en tu entorno local, que se usa para la recarga automática:

  npm install -g nodemon

• Una app de chat HTTP que esté configurada para el envío de mensajes Puedes seguir las secciones Requisitos previos, Configura el entorno y Publica la app en Google Chat de la Guía de inicio rápido. Las únicas diferencias son que debes configurar el Nombre de la app en Debug App y la URL del extremo HTTP en cualquier valor, como http://example.com.

• Un IDE configurado en tu entorno local que pueda depurar En esta guía, usamos el IDE Visual Studio Code y sus funciones predeterminadas de depuración a modo de ejemplo.

• Git instalado en tu entorno local.

• Una cuenta de ngrok

Python

• La versión más reciente de python3 instalada en tu entorno local
• La versión más reciente de pip y virtualenv instalada en tu entorno local, que se usan para administrar paquetes de Python y entornos virtuales, respectivamente
• Una app de chat HTTP que esté configurada para el envío de mensajes Puedes seguir las secciones Requisitos previos, Configura el entorno y Publica la app en Google Chat de la Guía de inicio rápido. Las únicas diferencias son que debes configurar el Nombre de la app en Debug App y la URL del extremo HTTP en cualquier cosa, como http://example.com.
• Un IDE configurado en tu entorno local que pueda depurar En esta guía, usamos el IDE Visual Studio Code y sus funciones predeterminadas de depuración a modo de ejemplo.
• Git instalado en tu entorno local.
• Una cuenta de ngrok
• La versión más reciente de gcloud instalada y inicializada en tu entorno local

Java

• Es la versión estable más reciente de Java SE 11's JDK instalada en tu entorno local.
• Es la versión más reciente de Apache Maven instalada en tu entorno local, que se usa para administrar proyectos de Java.
• Una app de chat HTTP que esté configurada para el envío de mensajes Puedes seguir las secciones Requisitos previos, Configura el entorno y Publica la app en Google Chat de la Guía de inicio rápido. Las únicas diferencias son que debes configurar el Nombre de la app en Debug App y la URL del extremo HTTP en cualquier valor, como http://example.com.
• Un IDE configurado en tu entorno local que pueda depurar En esta guía, usamos el IDE Visual Studio Code y sus funciones predeterminadas de depuración a modo de ejemplo.
• Git instalado en tu entorno local.
• Una cuenta de ngrok
• La versión más reciente de gcloud instalada y inicializada en tu entorno local

Node.js

1. Clona el repositorio de googleworkspace/google-chat-samples de GitHub a tu entorno local, ya que contiene el código de la aplicación que se ejecutará:

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

2. Desde el IDE de Visual Studio Code instalado en tu entorno local, haz lo siguiente:

   1. En una ventana nueva, abre la carpeta google-chat-samples/node/basic-app.

   2. Para configurar la aplicación para la depuración de recarga automática, agrega dos secuencias de comandos en el archivo package.json:

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

   3. Desde el directorio raíz, instala la aplicación:

      npm install

   4. Crea y configura un inicio llamado Debug Watch que active la secuencia de comandos debug-watch. Para ello, crea el archivo .vscode/launch.json en el directorio raíz:

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

   5. Agrega un punto de interrupción que detenga el procesamiento de la solicitud HTTP en el archivo index.js y comienza a ejecutar y depurar con la configuración de Debug Watch que agregaste antes. La aplicación ahora está en ejecución y detecta solicitudes HTTP en el puerto 9000.

      

      Figura 3: La aplicación se está ejecutando y a la escucha de solicitudes HTTP en el puerto 9000.

3. Inicia la aplicación ngrok en tu entorno local:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Reemplaza NGROK_STATIC_DOMAIN por el dominio estático en tu cuenta de ngrok. Todas las solicitudes ahora se redireccionan a tu entorno local y al puerto que usa la aplicación.

   

   Figura 4: La terminal con el servidor ngrok en ejecución y redireccionamiento

4. La aplicación ngrok también inicia una interfaz web en tu localhost. Puedes abrirla en un navegador para supervisar todas las actividades.

   

   Figura 5: La interfaz web alojada por la aplicación ngrok que no muestra solicitudes HTTP

5. Para probar la app de Chat, envíale un mensaje directo:

   • Abre Google Chat.

     Ve a Google Chat

   • Haz clic en Nuevo chat add.

   • En el cuadro de diálogo, ingresa el nombre de tu app de chat.

   • En los resultados de la búsqueda, busca tu app de Chat, haz clic en Agregar > Chat.

   • En el espacio de mensajes directos, escribe Hello y presiona enter. Tu app de Chat no responde porque se está depurando de forma activa.

6. En el Visual Studio Code de tu entorno local, puedes ver que la ejecución se pausa en el punto de interrupción que se configuró.

   

   Figura 6: La ejecución se pausa en el punto de interrupción que se configuró.

7. Cuando reanudas la ejecución desde el depurador de Visual Studio Code antes de que Google Chat agote el tiempo de espera, la app de Chat responde Your message : Hello.

8. Puedes consultar los registros de solicitudes y respuestas HTTP desde la interfaz web que aloja la aplicación ngrok en tu entorno local.

   

   Figura 7: La solicitud HTTP de la interfaz web alojada por la aplicación ngrok

9. Para cambiar el comportamiento de la aplicación, reemplaza Your message por Here was your message 35 intercalado de index.json. Cuando guardas el archivo, nodemon vuelve a cargar automáticamente la aplicación con el código fuente actualizado y Visual Studio Code permanece en modo de depuración.

   

   Figura 8: La aplicación se está ejecutando y escucha solicitudes HTTP en el puerto 9000 con el cambio de código cargado.

10. Esta vez, en lugar de enviar un segundo mensaje Hello en el espacio, puedes seleccionar la última solicitud HTTP registrada en la interfaz web alojada por la aplicación ngrok en tu entorno local y hacer clic en Replay. Al igual que la última vez, tu app de Chat no responde porque se está depurando de forma activa.

11. Cuando reanudas la ejecución desde el depurador de Visual Studio Code, puedes ver desde la interfaz web alojada por la aplicación ngrok en tu entorno local que la aplicación genera una respuesta con la versión actualizada del mensaje Here was your message : Hello.

Python

1. Adquiere credenciales de usuario nuevas para usar con las Credenciales predeterminadas de la aplicación:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   Reemplaza PROJECT_ID por el ID del proyecto del proyecto de Cloud de la app.

2. Clona el repositorio de googleworkspace/google-chat-samples de GitHub a tu entorno local, ya que contiene el código de la aplicación:

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

3. Desde el IDE de Visual Studio Code instalado en tu entorno local, haz lo siguiente:

   1. En una ventana nueva, abre la carpeta google-chat-samples/python/avatar-app.

   2. Crea un entorno virtual nuevo para Python env y actívalo:

      virtualenv env
      source env/bin/activate

   3. Instala todas las dependencias del proyecto con pip en el entorno virtual:

      pip install -r requirements.txt

   4. Crea el archivo .vscode/launch.json en el directorio raíz y configura un inicio llamado Debug Watch que active la aplicación desde el módulo functions-framework en el puerto 9000 en modo de depuración en el entorno virtual 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. Agrega un punto de interrupción que detenga el procesamiento de la solicitud HTTP en el archivo main.py y comienza a ejecutar y depurar con la configuración de Debug Watch que agregaste antes. La aplicación ahora está en ejecución y detecta solicitudes HTTP en el puerto 9000.

      

      Figura 3: La aplicación se está ejecutando y a la escucha de solicitudes HTTP en el puerto 9000.

4. Inicia la aplicación ngrok en tu entorno local:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Reemplaza NGROK_STATIC_DOMAIN por el dominio estático en tu cuenta de ngrok. Todas las solicitudes ahora se redireccionan a tu entorno local y al puerto que usa la aplicación.

   

   Figura 4: La terminal con el servidor ngrok en ejecución y redireccionamiento

5. La aplicación ngrok también inicia una interfaz web en tu localhost. Puedes abrirla en un navegador para supervisar todas las actividades.

   

   Figura 5: La interfaz web alojada por la aplicación ngrok que no muestra solicitudes HTTP

6. Para probar la app de Chat, envíale un mensaje directo:

   • Abre Google Chat.

     Ve a Google Chat

   • Haz clic en Nuevo chat add.

   • En el cuadro de diálogo, ingresa el nombre de tu app de chat.

   • En los resultados de la búsqueda, busca tu app de Chat, haz clic en Agregar > Chat.

   • En el espacio de mensajes directos, escribe Hey! y presiona enter. Tu app de chat no responde porque se está depurando de forma activa.

7. En el Visual Studio Code de tu entorno local, puedes ver que la ejecución se pausa en el punto de interrupción que se configuró.

   

   Figura 6: La ejecución se pausa en el punto de interrupción que se configuró.

8. Cuando reanudas la ejecución desde el depurador de Visual Studio Code antes de que se agote el tiempo de espera de Google Chat, la app de Chat responde con tu nombre y la imagen de tu avatar en el mensaje.

9. Puedes consultar los registros de solicitudes y respuestas HTTP desde la interfaz web que aloja la aplicación ngrok en tu entorno local.

   

   Figura 7: La solicitud HTTP de la interfaz web alojada por la aplicación ngrok

10. Para cambiar el comportamiento de la aplicación, reemplaza Hello por Hey intercalado 51 del archivo main.py. Cuando guardas el archivo, Visual Studio Code vuelve a cargar automáticamente la aplicación con el código fuente actualizado y permanece en modo de depuración.

    

    Figura 8: La aplicación se está ejecutando y escucha solicitudes HTTP en el puerto 9000 con el cambio de código cargado.

11. Esta vez, en lugar de enviar un segundo mensaje Hey! en el espacio, puedes seleccionar la última solicitud HTTP registrada en la interfaz web alojada por la aplicación ngrok en tu entorno local y hacer clic en Replay. Al igual que la última vez, tu app de Chat no responde porque se está depurando de forma activa.

12. Cuando reanudas la ejecución desde el depurador de Visual Studio Code, puedes ver desde la interfaz web alojada por la aplicación ngrok en tu entorno local que la aplicación genera una respuesta con la versión actualizada del mensaje.

Java

1. Adquiere credenciales de usuario nuevas para usar con las Credenciales predeterminadas de la aplicación:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   Reemplaza PROJECT_ID por el ID del proyecto del proyecto de Cloud de la app.

2. Clona el repositorio de googleworkspace/google-chat-samples de GitHub en tu entorno local, ya que contiene el código de la aplicación:

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

3. Desde el IDE de Visual Studio Code instalado en tu entorno local, haz lo siguiente:

   1. En una ventana nueva, abre la carpeta google-chat-samples/java/avatar-app.

   2. Para configurar el proyecto de Maven de modo que ejecute la aplicación App en el puerto 9000 de forma local, agrega el complemento de compilación function-maven-plugin de Cloud Functions Framework en el archivo 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. Ahora puedes iniciarlo de forma local en modo de depuración:

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

   4. Crea el archivo .vscode/launch.json en el directorio raíz y configura un inicio llamado Remote Debug Watch que se conecte a la aplicación iniciada anteriormente con el puerto 8000:

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

   5. Agrega un punto de interrupción que detenga el procesamiento de la solicitud HTTP en el archivo App.java y comienza a adjuntar y depurar con la configuración de Remote Debug Watch que agregaste antes. La aplicación ahora se está ejecutando y detecta solicitudes HTTP en el puerto 9000.

      

      Figura 3: La aplicación se está ejecutando y detecta solicitudes HTTP en el puerto 9000.

4. Inicia la aplicación ngrok en tu entorno local:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Reemplaza NGROK_STATIC_DOMAIN por el dominio estático en tu cuenta de ngrok. Todas las solicitudes ahora se redireccionan a tu entorno local y al puerto que usa la aplicación.

   

   Figura 4: La terminal con el servidor ngrok en ejecución y redireccionamiento

5. La aplicación ngrok también inicia una interfaz web en tu localhost. Puedes abrirla en un navegador para supervisar todas las actividades.

   

   Figura 5: La interfaz web alojada por la aplicación ngrok que no muestra solicitudes HTTP

6. Para probar la app de Chat, envíale un mensaje directo:

   • Abre Google Chat.

     Ve a Google Chat

   • Haz clic en Nuevo chat add.

   • En el cuadro de diálogo, ingresa el nombre de tu app de chat.

   • En los resultados de la búsqueda, busca tu app de Chat y haz clic en Agregar > Chat.

   • En el espacio de mensajes directos, escribe Hey! y presiona enter. Tu app de chat no responde porque se está depurando de forma activa.

7. En el Visual Studio Code de tu entorno local, puedes ver que la ejecución se pausa en el punto de interrupción que se configuró.

   

   Figura 6: La ejecución se pausa en el punto de interrupción que se configuró.

8. Cuando reanudas la ejecución desde el depurador de Visual Studio Code antes de que se agote el tiempo de espera de Google Chat, la app de Chat responde con tu nombre y la imagen de tu avatar en el mensaje.

9. Puedes consultar los registros de solicitudes y respuestas HTTP desde la interfaz web que aloja la aplicación ngrok en tu entorno local.

   

   Figura 7: La solicitud HTTP de la interfaz web alojada por la aplicación ngrok

10. Para cambiar el comportamiento de la aplicación, reemplaza Hello por Hey intercalado 55 del archivo App.java, reinicia el proceso mvnDebug y reinicia Remote Debug Watch para volver a conectar y reiniciar la depuración.

11. Esta vez, en lugar de enviar un segundo mensaje Hey! en el espacio, puedes seleccionar la última solicitud HTTP registrada en la interfaz web alojada por la aplicación ngrok en tu entorno local y hacer clic en Replay. Al igual que la última vez, tu app de Chat no responde porque se está depurando de forma activa.

12. Cuando reanudas la ejecución desde el depurador de Visual Studio Code, puedes ver desde la interfaz web alojada por la aplicación ngrok en tu entorno local que la aplicación genera una respuesta con la versión actualizada del mensaje.