Prueba y depura complementos de Google Workspace HTTP

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

• Un proyecto de Google Cloud. Puedes seguir las secciones Requisitos previos y Configura el entorno de la guía de inicio rápido.

• El código del complemento de Google Workspace para depurar en tu entorno local En esta guía, usamos las funciones de vínculo de vista previa del ejemplo de código 3p-resources del repositorio de GitHub googleworkspace/add-ons-samples a modo de ejemplo.

• 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.

• Una cuenta de ngrok

• La versión más reciente de gcloud instalada y inicializada en tu entorno local

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
• Un proyecto de Google Cloud. Puedes seguir las secciones Requisitos previos y Configura el entorno de la guía de inicio rápido.
• El código del complemento de Google Workspace para depurar en tu entorno local En esta guía, usamos las funciones de vínculo de vista previa del ejemplo de código 3p-resources del repositorio de GitHub googleworkspace/add-ons-samples a modo de ejemplo.
• 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.
• 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.
• Un proyecto de Google Cloud. Puedes seguir las secciones Requisitos previos y Configura el entorno de la guía de inicio rápido.
• El código del complemento de Google Workspace para depurar en tu entorno local En esta guía, usamos las funciones de vínculo de vista previa del ejemplo de código 3p-resources del repositorio de GitHub googleworkspace/add-ons-samples a modo de ejemplo.
• 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.
• Una cuenta de ngrok
• La versión más reciente de gcloud instalada y inicializada en tu entorno local

Node.js

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

   1. En una ventana nueva, abre la carpeta add-ons-samples/node/3p-resources.

   2. Para configurar la aplicación para la ejecución local y la depuración de recarga automática, añade una dependencia y dos secuencias de comandos en el archivo package.json:

      {
          ...
          "dependencies": {
            ...
            "@google-cloud/functions-framework": "^3.3.0"
          },
          "scripts": {
              ...
              "start": "npx functions-framework --target=createLinkPreview --port=9000",
              "debug-watch": "nodemon --watch ./ --exec npm start"
          }
          ...
      }
      

   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.

2. 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

3. 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

4. Para probar tu complemento de Google Workspace, obtén una vista previa de la URL de un caso en un nuevo Doc de Google con una cuenta de verificador:

   • Crea un nuevo Documento de Google.

     Crea un nuevo documento de Google

   • Escribe el siguiente vínculo y presiona enter:

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • Haga clic en el vínculo.

5. 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ó.

6. Cuando reanudas la ejecución desde el depurador de Visual Studio Code antes de que se agote el tiempo de espera de los complementos de Google Workspace, el complemento de Google Workspace muestra la vista previa del vínculo en el Documento de Google desde la caché.

7. 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

8. Para cambiar el comportamiento de la aplicación, reemplaza Case por Case: intercalado 51 de index.js. 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.

9. Esta vez, en lugar de hacer clic en el vínculo y esperar unos segundos en un nuevo Documento de Google, 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 complemento de Google Workspace no responde porque se está depurando de forma activa.

10. Cuando reanudas la ejecución desde el depurador de Visual Studio Code, puedes ver en 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 de la tarjeta de vista previa.

Python

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

   1. En una ventana nueva, abre la carpeta add-ons-samples/python/3p-resources/create_link_preview.

   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", "create_link_preview",
                  "--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.

2. 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

3. 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

4. Para probar tu complemento de Google Workspace, obtén una vista previa de la URL de un caso en un nuevo Doc de Google con una cuenta de verificador:

   • Crea un nuevo Documento de Google.

     Cómo crear un nuevo documento de Google

   • Escribe el siguiente vínculo y presiona enter:

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • Haga clic en el vínculo.

5. 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ó.

6. Cuando reanudas la ejecución desde el depurador de Visual Studio Code antes de que se agote el tiempo de espera de los complementos de Google Workspace, el complemento de Google Workspace muestra la vista previa del vínculo en el Documento de Google desde la caché.

7. 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

8. Para cambiar el comportamiento de la aplicación, reemplaza Case por Case: intercalado 56 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.

9. Esta vez, en lugar de hacer clic en el vínculo y esperar unos segundos en un nuevo Documento de Google, 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 complemento de Google Workspace no responde porque se está depurando de forma activa.

10. Cuando reanudas la ejecución desde el depurador de Visual Studio Code, puedes ver en 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 de la tarjeta de vista previa.

Java

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

   1. En una ventana nueva, abre la carpeta add-ons-samples/java/3p-resources.

   2. Para configurar el proyecto de Maven de modo que ejecute la aplicación CreateLinkPreview en el puerto 9000 de forma local, agrega el complemento de compilación function-maven-plugin del marco de trabajo de Cloud Functions en el archivo pom.xml:

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>CreateLinkPreview</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 CreateLinkPreview.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.

2. 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

3. 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

4. Para probar tu complemento de Google Workspace, obtén una vista previa de la URL de un caso en un nuevo Doc de Google con una cuenta de verificador:

   • Crea un nuevo Documento de Google.

     Cómo crear un nuevo documento de Google

   • Escribe el siguiente vínculo y presiona enter:

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • Haga clic en el vínculo.

5. 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ó.

6. Cuando reanudas la ejecución desde el depurador de Visual Studio Code antes de que se agote el tiempo de espera de los complementos de Google Workspace, el complemento de Google Workspace muestra la vista previa del vínculo en el Documento de Google desde la caché.

7. 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

8. Para cambiar el comportamiento de la aplicación, reemplaza Case por Case: intercalado 78 del archivo CreateLinkPreview.java, reinicia el proceso mvnDebug y reinicia Remote Debug Watch para volver a conectar y reiniciar la depuración.

9. Esta vez, en lugar de hacer clic en el vínculo y esperar unos segundos en un nuevo Documento de Google, 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 complemento de Google Workspace no responde porque se está depurando de forma activa.

10. Cuando reanudas la ejecución desde el depurador de Visual Studio Code, puedes ver en 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 de la tarjeta de vista previa.