Testar e depurar complementos HTTP do Google Workspace

Node.js

• Versões mais recentes do node e do npm instalado no seu ambiente local.

• A versão mais recente do nodemon instalada no seu local da Web, ele é usado para fins de atualização automática:

  npm install -g nodemon
  

• Um projeto do Google Cloud. Siga as seções Pré-requisitos e Configure ambiente do Guia de início rápido guia.

• O código do complemento do Google Workspace para depurar no seu ambiente local de nuvem. Usamos os recursos do link de visualização do exemplo de código 3p-resources do repositório do GitHub googleworkspace/add-ons-samples neste guia para fins ilustrativos.

• Um ambiente de desenvolvimento integrado configurado no ambiente local para depuração. Usamos o Visual Studio Code IDE e os respectivos recursos de depuração na neste guia para fins ilustrativos.

• Uma conta do ngrok.

• Versão mais recente do app gcloud instalado e inicializado no no ambiente local.

Python

• Versão mais recente do app python3 instalado no seu ambiente local.
• Versão mais recente do pip e virtualenv instalado no seu ambiente local, elas são usadas para gerenciar pacotes Python e ambientes, respectivamente.
• Um projeto do Google Cloud. Siga as seções Pré-requisitos e Configure ambiente do Guia de início rápido guia.
• O código do complemento do Google Workspace para depurar no seu ambiente local de nuvem. Usamos os recursos do link de visualização do exemplo de código 3p-resources do repositório do GitHub googleworkspace/add-ons-samples neste guia para fins ilustrativos.
• Um ambiente de desenvolvimento integrado configurado no ambiente local para depuração. Usamos o Visual Studio Code IDE e os respectivos recursos de depuração na neste guia para fins ilustrativos.
• Uma conta do ngrok.
• Versão mais recente do app gcloud instalado e inicializado no no ambiente local.

Java

• Versão estável mais recente do Java SE 11's JDK instalado no seu sistema local de nuvem.
• Versão mais recente do app Apache Maven instalado no seu ambiente local, que é usada para gerenciar projetos Java.
• Um projeto do Google Cloud. Siga as seções Pré-requisitos e Configure ambiente do Guia de início rápido guia.
• O código do complemento do Google Workspace para depurar no seu ambiente local de nuvem. Usamos os recursos do link de visualização do exemplo de código 3p-resources do repositório do GitHub googleworkspace/add-ons-samples neste guia para fins ilustrativos.
• Um ambiente de desenvolvimento integrado configurado no ambiente local para depuração. Usamos o Visual Studio Code IDE e os respectivos recursos de depuração na neste guia para fins ilustrativos.
• Uma conta do ngrok.
• Versão mais recente do app gcloud instalado e inicializado no no ambiente local.

Node.js

1. No ambiente de desenvolvimento integrado Visual Studio Code instalado no ambiente local, faça o seguinte:

   1. Em uma nova janela, abra a pasta add-ons-samples/node/3p-resources:

   2. Configure o aplicativo para depuração de execução local e atualização automática usando adicionando uma dependência e dois scripts no arquivo 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. No diretório raiz, instale o aplicativo:

      npm install
      

   4. Crie e configure uma inicialização chamada Debug Watch que acione o script debug-watch criando o arquivo .vscode/launch.json diretório raiz:

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

   5. Adicione um ponto de interrupção que interrompa o processamento da solicitação HTTP no index.js arquivo e comece a executar e depurando com o Configuração Debug Watch adicionada antes. Agora o aplicativo está executar e detectar solicitações HTTP na porta 9000.

      

      Figura 3. O aplicativo está em execução e detectando HTTP solicitações na porta 9000.

2. Inicie o aplicativo ngrok no seu ambiente local:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Substitua NGROK_STATIC_DOMAIN pelo domínio estático em sua conta ngrok. Todas as solicitações agora são redirecionadas ao seu local e a porta usada pelo aplicativo.

   

   Figura 4. O terminal com o servidor do ngrok em execução e redirecionando.

3. Uma interface da Web também é iniciada no localhost pelo ngrok. você pode monitorar todas as atividades abrindo-o em um navegador.

   

   Figura 5. A interface da Web hospedada pelo aplicativo ngrok sem mostrar solicitações HTTP.

4. Teste seu complemento do Google Workspace visualizando o URL de um caso em uma nova Documento Google com uma conta de testador:

   • Crie um novo documento Google.

     Criar um novo documento Google

   • Digite o seguinte link e pressione enter:

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

   • Clique no link.

5. No Visual Studio Code do seu ambiente local, é possível observar que a execução é pausada no ponto de interrupção definido.

   

   Figura 6. A execução é pausada no ponto de interrupção definido.

6. Quando você retomar a execução do depurador de Visual Studio Code antes que os complementos do Google Workspace expirem o tempo limite do complemento do Google Workspace. exibe a visualização do link no arquivo do Documentos Google armazenado em cache.

7. É possível verificar os registros de solicitação e resposta HTTP na interface da Web hospedado pelo aplicativo ngrok no seu ambiente local.

   

   Figura 7. A solicitação HTTP da interface da Web hospedada pelo ngrok.

8. Para mudar o comportamento do aplicativo, substitua Case por Case: inline 51 de index.js. Quando você salvar o arquivo, nodemon automaticamente recarrega o aplicativo com o código-fonte atualizado e Visual Studio Code permanece no modo de depuração.

   

   Figura 8. O aplicativo está em execução e recebendo solicitações HTTP na porta 9000 com a mudança de código carregada.

9. Desta vez, em vez de clicar no link e aguardar alguns segundos um novo documento Google, poderá selecionar a última solicitação HTTP registrada na Web de interface hospedada pelo aplicativo ngrok no seu ambiente local e clique em Replay. Igual à última vez, seu complemento do Google Workspace não responde porque está sendo depurado ativamente.

10. Quando você retomar a execução do depurador de Visual Studio Code como podemos ver na interface da Web hospedada pelo aplicativo ngrok em seu ambiente local para o qual o aplicativo gera uma resposta a versão atualizada do card de visualização.

Python

1. No ambiente de desenvolvimento integrado Visual Studio Code instalado no ambiente local, faça o seguinte:

   1. Em uma nova janela, abra a pasta add-ons-samples/python/3p-resources/create_link_preview:

   2. Crie um novo ambiente virtual para o Python env e ative-o:

      virtualenv env
      source env/bin/activate
      

   3. Instale todas as dependências do projeto usando pip na VM de nuvem:

      pip install -r requirements.txt
      

   4. Crie o arquivo .vscode/launch.json no diretório raiz e configure uma inicialização chamada Debug Watch que aciona o aplicativo do módulo functions-framework na porta 9000 no modo de depuração no ambiente 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. Adicione um ponto de interrupção que interrompa o processamento da solicitação HTTP no main.py arquivo e comece a executar e depurando com o Configuração Debug Watch adicionada anteriormente. Agora o aplicativo está executar e detectar solicitações HTTP na porta 9000.

      

      Figura 3. O aplicativo está em execução e detectando HTTP solicitações na porta 9000.

2. Inicie o aplicativo ngrok no seu ambiente local:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Substitua NGROK_STATIC_DOMAIN pelo domínio estático em sua conta ngrok. Todas as solicitações agora são redirecionadas ao seu local e a porta usada pelo aplicativo.

   

   Figura 4. O terminal com o servidor do ngrok em execução e redirecionando.

3. Uma interface da Web também é iniciada no localhost pelo ngrok. você pode monitorar todas as atividades abrindo-o em um navegador.

   

   Figura 5. A interface da Web hospedada pelo aplicativo ngrok sem mostrar solicitações HTTP.

4. Teste seu complemento do Google Workspace visualizando o URL de um caso em uma nova Documento Google com uma conta de testador:

   • Crie um novo documento Google.

     Criar um novo documento Google

   • Digite o seguinte link e pressione enter:

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

   • Clique no link.

5. No Visual Studio Code do seu ambiente local, é possível observar que a execução é pausada no ponto de interrupção definido.

   

   Figura 6. A execução é pausada no ponto de interrupção definido.

6. Quando você retomar a execução do depurador de Visual Studio Code antes que os complementos do Google Workspace expirem o tempo limite do complemento do Google Workspace. exibe a visualização do link no arquivo do Documentos Google armazenado em cache.

7. É possível verificar os registros de solicitação e resposta HTTP na interface da Web hospedado pelo aplicativo ngrok no seu ambiente local.

   

   Figura 7. A solicitação HTTP da interface da Web hospedada pelo ngrok.

8. Para mudar o comportamento do aplicativo, substitua Case por Case: inline 56 do arquivo main.py. Quando você salvar o arquivo, Visual Studio Code recarrega automaticamente o aplicativo com o código-fonte atualizado e permanece no modo de depuração.

   

   Figura 8. O aplicativo está em execução e recebendo solicitações HTTP na porta 9000 com a mudança de código carregada.

9. Desta vez, em vez de clicar no link e aguardar alguns segundos um novo documento Google, poderá selecionar a última solicitação HTTP registrada na Web de interface hospedada pelo aplicativo ngrok no seu ambiente local e clique em Replay. Igual à última vez, seu complemento do Google Workspace não responde porque está sendo depurado ativamente.

10. Quando você retomar a execução do depurador de Visual Studio Code como podemos ver na interface da Web hospedada pelo aplicativo ngrok em seu ambiente local para o qual o aplicativo gera uma resposta a versão atualizada do card de visualização.

Java

1. No ambiente de desenvolvimento integrado Visual Studio Code instalado no ambiente local, faça o seguinte:

   1. Em uma nova janela, abra a pasta add-ons-samples/java/3p-resources:

   2. Configurar o projeto Maven para executar o aplicativo CreateLinkPreview na porta 9000 localmente adicionando o Cloud Plug-in de build function-maven-plugin do Functions Framework no Arquivo 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. Agora você pode iniciá-lo localmente no modo de depuração:

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

   4. Crie o arquivo .vscode/launch.json no diretório raiz e configure uma inicialização chamada Remote Debug Watch que é anexada ao aplicativo iniciado anteriormente com a porta 8000:

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

   5. Adicione um ponto de interrupção que interrompa o processamento da solicitação HTTP no CreateLinkPreview.java arquivo e comece a anexar e depurando com o Configuração Remote Debug Watch adicionada antes. O aplicativo é Agora em execução e detectando solicitações HTTP na porta 9000.

      

      Figura 3. O aplicativo está em execução e detectando HTTP solicitações na porta 9000.

2. Inicie o aplicativo ngrok no seu ambiente local:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Substitua NGROK_STATIC_DOMAIN pelo domínio estático em sua conta ngrok. Todas as solicitações agora são redirecionadas ao seu local e a porta usada pelo aplicativo.

   

   Figura 4. O terminal com o servidor do ngrok em execução e redirecionando.

3. Uma interface da Web também é iniciada no localhost pelo ngrok. você pode monitorar todas as atividades abrindo-o em um navegador.

   

   Figura 5. A interface da Web hospedada pelo aplicativo ngrok sem mostrar solicitações HTTP.

4. Teste seu complemento do Google Workspace visualizando o URL de um caso em uma nova Documento Google com uma conta de testador:

   • Crie um novo documento Google.

     Criar um novo documento Google

   • Digite o seguinte link e pressione enter:

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

   • Clique no link.

5. No Visual Studio Code do seu ambiente local, é possível observar que a execução é pausada no ponto de interrupção definido.

   

   Figura 6. A execução é pausada no ponto de interrupção definido.

6. Quando você retomar a execução do depurador de Visual Studio Code antes que os complementos do Google Workspace expirem o tempo limite do complemento do Google Workspace. exibe a visualização do link no arquivo do Documentos Google armazenado em cache.

7. É possível verificar os registros de solicitação e resposta HTTP na interface da Web hospedado pelo aplicativo ngrok no seu ambiente local.

   

   Figura 7. A solicitação HTTP da interface da Web hospedada pelo ngrok.

8. Para mudar o comportamento do aplicativo, substitua Case por Case: inline 78 do arquivo CreateLinkPreview.java, reinicie o mvnDebug processo e reinicie Remote Debug Watch para reanexar e reiniciar depuração.

9. Desta vez, em vez de clicar no link e aguardar alguns segundos um novo documento Google, poderá selecionar a última solicitação HTTP registrada na Web de interface hospedada pelo aplicativo ngrok no seu ambiente local e clique em Replay. Igual à última vez, seu complemento do Google Workspace não responde porque está sendo depurado ativamente.

10. Quando você retomar a execução do depurador de Visual Studio Code como podemos ver na interface da Web hospedada pelo aplicativo ngrok em seu ambiente local para o qual o aplicativo gera uma resposta a versão atualizada do card de visualização.