Testar e depurar complementos HTTP do Google Workspace

Node.js

• As versões mais recentes de node e npm instaladas no seu ambiente local.

• A versão mais recente do nodemon instalada no seu ambiente local é usada para recarga automática:

  npm install -g nodemon

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

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

• Um ambiente de desenvolvimento integrado configurado no ambiente local que pode depurar. Usamos o Visual Studio Code IDE e os recursos de depuração padrão dele neste guia para fins de ilustração.

• Uma conta do ngrok.

• A versão mais recente do gcloud instalada e inicializada no ambiente local.

Python

• A versão mais recente do python3 instalada no ambiente local.
• A versão mais recente do pip e virtualenv instaladas no seu ambiente local são usadas para gerenciar pacotes Python e ambientes virtuais, respectivamente.
• Um projeto do Google Cloud. Siga as seções Pré-requisitos e Configurar o ambiente do Guia de início rápido.
• O código do complemento do Google Workspace para depurar no seu ambiente local. Usamos os recursos de link de visualização do exemplo de código 3p-resources do repositório do GitHub googleworkspace/add-ons-samples neste guia para fins de ilustração.
• Um ambiente de desenvolvimento integrado configurado no seu ambiente local que pode depurar. Usamos o Visual Studio Code IDE e os recursos de depuração padrão dele neste guia para fins de ilustração.
• Uma conta do ngrok.
• Ter a versão mais recente do gcloud instalada e inicializada no ambiente local.

Java

• A versão estável mais recente do Java SE 11's JDK instalada no seu ambiente local.
• A versão mais recente do Apache Maven instalada no ambiente local, é usada para gerenciar projetos Java.
• Um projeto do Google Cloud. Siga as seções Pré-requisitos e Configurar o ambiente do Guia de início rápido.
• O código do complemento do Google Workspace para depurar no seu ambiente local. Usamos os recursos de link de visualização do exemplo de código 3p-resources do repositório do GitHub googleworkspace/add-ons-samples neste guia para fins de ilustração.
• Um ambiente de desenvolvimento integrado configurado no seu ambiente local que pode depurar. Usamos o Visual Studio Code IDE e os recursos de depuração padrão dele neste guia para fins de ilustração.
• Uma conta do ngrok.
• Ter a versão mais recente do gcloud instalada e inicializada 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 execução local e depuração de recarga automática 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 com o nome Debug Watch que aciona o script debug-watch criando o arquivo .vscode/launch.json no 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 pausa o processamento da solicitação HTTP no arquivo index.js e inicie a execução e depuração com a configuração Debug Watch adicionada antes. O aplicativo agora está em execução e detectando solicitações HTTP na porta 9000.

      

      Figura 3. O aplicativo está em execução e detectando solicitações HTTP 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 na sua conta ngrok. Agora, todas as solicitações são redirecionadas para o ambiente local e a porta usada pelo aplicativo.

   

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

3. Uma interface da Web também é iniciada no host local pelo aplicativo ngrok. É possível monitorar todas as atividades abrindo-o em um navegador.

   

   Figura 5. A interface da Web hospedada pelo aplicativo ngrok não mostra solicitações HTTP.

4. Teste seu complemento do Google Workspace com uma prévia do URL de um caso em um novo documento do Google com uma conta de teste:

   • Crie um novo documento do Google.

     Criar um arquivo do Documentos Google

   • Digite o link a seguir e pressione enter:

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

   • Clique no link.

5. No Visual Studio Code no seu ambiente local, é possível ver 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ê retoma a execução do depurador de Visual Studio Code antes que os complementos do Google Workspace expirem, o complemento mostra a visualização do link no Google Docs do cache.

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

   

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

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

   

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

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

10. Quando você retoma a execução do depurador de Visual Studio Code, é possível notar na interface da Web hospedada pelo aplicativo ngrok no seu ambiente local que o aplicativo gera uma resposta com 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 e ative um novo ambiente virtual para o Python env:

      virtualenv env
      source env/bin/activate

   3. Instale todas as dependências do projeto usando pip no ambiente virtual:

      pip install -r requirements.txt

   4. Crie o arquivo .vscode/launch.json no diretório raiz e configure uma inicialização com o nome 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 pausa o processamento da solicitação HTTP no arquivo main.py e inicie a execução e depuração com a configuração Debug Watch adicionada antes. O aplicativo agora está em execução e detectando solicitações HTTP na porta 9000.

      

      Figura 3. O aplicativo está em execução e detectando solicitações HTTP 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 na sua conta ngrok. Agora, todas as solicitações são redirecionadas para o ambiente local e a porta usada pelo aplicativo.

   

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

3. Uma interface da Web também é iniciada no host local pelo aplicativo ngrok. É possível monitorar todas as atividades abrindo-o em um navegador.

   

   Figura 5. A interface da Web hospedada pelo aplicativo ngrok não mostra solicitações HTTP.

4. Teste seu complemento do Google Workspace com uma prévia do URL de um caso em um novo documento do Google com uma conta de teste:

   • Crie um novo documento do Google.

     Criar um arquivo do Documentos Google

   • Digite o link a seguir e pressione enter:

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

   • Clique no link.

5. No Visual Studio Code no seu ambiente local, é possível ver 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ê retoma a execução do depurador de Visual Studio Code antes que os complementos do Google Workspace expirem, o complemento mostra a visualização do link no Google Docs do cache.

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

   

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

8. Para mudar o comportamento do aplicativo, substitua Case por Case: inline 56 do arquivo main.py. Quando você salva o arquivo, o 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 detectando solicitações HTTP na porta 9000 com a mudança de código carregada.

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

10. Quando você retoma a execução do depurador de Visual Studio Code, é possível notar na interface da Web hospedada pelo aplicativo ngrok no seu ambiente local que o aplicativo gera uma resposta com 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. Configure o projeto do Maven para executar o aplicativo CreateLinkPreview na porta 9000 localmente adicionando o plug-in de build do framework do Cloud Functions function-maven-plugin 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 se conecte 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 pausa o processamento da solicitação HTTP no arquivo CreateLinkPreview.java e inicie a anexação e depuração com a configuração Remote Debug Watch adicionada anteriormente. O aplicativo está em execução e detectando solicitações HTTP na porta 9000.

      

      Figura 3.O aplicativo está em execução e detectando solicitações HTTP 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 na sua conta ngrok. Agora, todas as solicitações são redirecionadas para o ambiente local e a porta usada pelo aplicativo.

   

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

3. Uma interface da Web também é iniciada no host local pelo aplicativo ngrok. É possível monitorar todas as atividades abrindo-o em um navegador.

   

   Figura 5. A interface da Web hospedada pelo aplicativo ngrok não mostra solicitações HTTP.

4. Teste seu complemento do Google Workspace com uma prévia do URL de um caso em um novo documento do Google com uma conta de teste:

   • Crie um novo documento do Google.

     Criar um arquivo do Documentos Google

   • Digite o link a seguir e pressione enter:

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

   • Clique no link.

5. No Visual Studio Code no seu ambiente local, é possível ver 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ê retoma a execução do depurador de Visual Studio Code antes que os complementos do Google Workspace expirem, o complemento mostra a visualização do link no Google Docs do cache.

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

   

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

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

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

10. Quando você retoma a execução do depurador de Visual Studio Code, é possível notar na interface da Web hospedada pelo aplicativo ngrok no seu ambiente local que o aplicativo gera uma resposta com a versão atualizada do card de visualização.