Depurar apps do Google Chat

Como desenvolvedor de apps do Google Chat, talvez você precise depurar o código para: testar alterações ou resolver problemas complexos. Como depurar apps do Chat pode ser feito de várias maneiras diferentes dependendo da arquitetura do app, quais o que o app faz, como ele é implantado e suas preferências.

Esta página explica como depurar um app de chat HTTP usando ngrok, que é uma plataforma de entrada unificada que pode ser usada para testar ambientes de desenvolvimento de software. Neste guia, você vai testar mudanças de código em uma e solucionar problemas em um ambiente remoto.

Depurar a partir do ambiente de desenvolvimento local

Nesta seção, você vai interagir com o app do Chat que é executado no seu ambiente local.

Depurar a partir do desenvolvimento local
meio ambiente

Figura 1. Depurar em um ambiente de desenvolvimento local.

Workshop

Node.js

Python

Java

Pré-requisitos

Node.js

Python

Java

Tornar o serviço localhost disponível publicamente

Você precisa conectar seu ambiente local à internet para que o o app do Chat pode acessá-lo. O aplicativo ngrok é usado para redirecionar solicitações HTTP feitas em um URL público para seu ambiente local.

  1. Em um navegador no seu ambiente local, faça login na conta ngrok.
  2. Instale o aplicativo e configure o authtoken no seu local de nuvem.
  3. Crie um domínio estático no seu ngrok, é referenciada como NGROK_STATIC_DOMAIN nas instruções deste guia.

Configurar o app do Chat

Configure o app do Chat para enviar todas as solicitações HTTP dele a seu domínio estático.

  1. No console do Google Cloud, abra a página da API Google Chat:

    Acessar a página da API Google Chat

  2. Clique na guia Configuração.

  3. Acesse Recursos interativos > Configurações de conexão e defina o valor do campo de texto App Url para:

    https://NGROK_STATIC_DOMAIN
    

    Substitua NGROK_STATIC_DOMAIN pelo domínio estático em sua conta ngrok.

  4. Clique em Salvar.

O app do Chat envia todas as solicitações HTTP para o
domínio estático

Figura 2. O app do Chat envia todas as solicitações HTTP ao domínio estático. O serviço público ngrok atua como uma ponte entre as App do Chat e o código do aplicativo executado localmente.

Teste o app do Chat

Implante, configure, teste, depure e atualize automaticamente App Chat.

Node.js

  1. Clone o repositório googleworkspace/google-chat-samples do GitHub ao seu ambiente local, ele contém o código do aplicativo para execute:

    git clone https://github.com/googleworkspace/google-chat-samples.git
    
  2. No ambiente de desenvolvimento integrado Visual Studio Code instalado no ambiente local, faça o seguinte:

    1. Em uma nova janela, abra a pasta google-chat-samples/node/basic-app:
    2. Configure o aplicativo para depuração de atualização automática adicionando dois scripts no arquivo package.json:

      {
          ...
          "scripts": {
              ...
              "debug": "node --inspect index.js",
              "debug-watch": "nodemon --watch ./ --exec npm run debug"
          }
          ...
      }
      
    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 anteriormente. Agora o aplicativo está executar e detectar solicitações HTTP na porta 9000.

      O aplicativo está em execução e recebendo solicitações HTTP no
porta `9000`

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

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

    O terminal com o servidor "ngrok" em execução e
redirecionando

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

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

    A interface da Web hospedada pelo aplicativo "ngrok" sem mostrar HTTP
solicitações

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

  5. Envie uma mensagem direta para testar o app do Chat mensagem:

    • Abra o Google Chat.

      Acessar o Google Chat

    • Clique em Nova conversa .

    • Na caixa de diálogo, insira o nome do seu App Chat.

    • Nos resultados da pesquisa, encontre seu app do Chat. Clique em Adicionar > Chat.

    • No espaço da mensagem direta, digite Hello e pressione enter. Seu O app do Chat não responde porque está sendo depurados ativamente.

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

    A execução é pausada no ponto de interrupção que foi
desencadear

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

  7. Quando você retomar a execução do depurador de Visual Studio Code antes que o app do Google Chat expire responde Your message : Hello.

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

    A solicitação HTTP da interface da Web hospedada pelo `ngrok`
aplicativo

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

  9. Para mudar o comportamento do aplicativo, substitua Your message por Here was your message in-line 35 do index.json. Ao salvar o arquivo, o nodemon recarrega automaticamente o aplicativo com o o código-fonte atualizado e Visual Studio Code permanece no modo de depuração.

    O aplicativo está em execução e recebendo solicitações HTTP na porta
`9000` com a mudança no código
carregado

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

  10. Desta vez, em vez de enviar uma segunda mensagem Hello no espaço, você podemos selecionar a última solicitação HTTP registrada na interface da Web hospedada pelo ngrok no ambiente local e clique em Replay. Igual à última vez, seu app do Chat não responde porque está sendo depurado ativamente.

  11. 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 da mensagem Here was your message : Hello.

Python

  1. Consiga novas credenciais de usuário que serão usadas no Application Default Credenciais:

    gcloud config set project PROJECT_ID
    gcloud auth application-default login
    

    Substitua PROJECT_ID pelo ID do projeto para o projeto do app na nuvem.

  2. Clone o repositório googleworkspace/google-chat-samples do GitHub ao seu ambiente local, ele contém o código do aplicativo:

    git clone https://github.com/googleworkspace/google-chat-samples.git
    
  3. No ambiente de desenvolvimento integrado Visual Studio Code instalado no ambiente local, faça o seguinte:

    1. Em uma nova janela, abra a pasta google-chat-samples/python/avatar-app:
    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 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", "avatar_app",
                  "--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.

      O aplicativo está em execução e recebendo solicitações HTTP no
porta `9000`

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

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

    O terminal com o servidor "ngrok" em execução e
redirecionando

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

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

    A interface da Web hospedada pelo aplicativo "ngrok" sem mostrar HTTP
solicitações

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

  6. Envie uma mensagem direta para testar o app do Chat mensagem:

    • Abra o Google Chat.

      Acessar o Google Chat

    • Clique em Nova conversa .

    • Na caixa de diálogo, insira o nome do seu App Chat.

    • Nos resultados da pesquisa, encontre seu app do Chat. Clique em Adicionar > Chat.

    • No espaço da mensagem direta, digite Hey! e pressione enter. Seu O app do Chat não responde porque está sendo depurados ativamente.

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

    A execução é pausada no ponto de interrupção que foi
desencadear

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

  8. Quando você retomar a execução do depurador de Visual Studio Code antes que o app do Google Chat expire responde com seu nome e a foto do avatar na mensagem.

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

    A solicitação HTTP da interface da Web hospedada pelo `ngrok`
aplicativo

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

  10. Para mudar o comportamento do aplicativo, substitua Hello por Hey inline 51 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.

    O aplicativo está em execução e recebendo solicitações HTTP na porta
`9000` com a mudança no código
carregado

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

  11. Desta vez, em vez de enviar uma segunda mensagem Hey! no espaço, você podemos selecionar a última solicitação HTTP registrada na interface da Web hospedada pelo ngrok no ambiente local e clique em Replay. Igual à última vez, seu app do Chat não responde porque está sendo depurado ativamente.

  12. 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 da mensagem.

Java

  1. Consiga novas credenciais de usuário que serão usadas no Application Default Credenciais:

    gcloud config set project PROJECT_ID
    gcloud auth application-default login
    

    Substitua PROJECT_ID pelo ID do projeto para o projeto do app na nuvem.

  2. Clone o repositório googleworkspace/google-chat-samples do GitHub no seu ambiente local, ele contém o código do aplicativo:

    git clone https://github.com/googleworkspace/google-chat-samples.git
    
  3. No ambiente de desenvolvimento integrado Visual Studio Code instalado no ambiente local, faça o seguinte:

    1. Em uma nova janela, abra a pasta google-chat-samples/java/avatar-app:
    2. Configure o projeto Maven para executar o aplicativo App em porta 9000 localmente adicionando o build do Cloud Functions Framework plug-in 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>App</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 App.java arquivo e comece a anexar e depurando com o Configuração Remote Debug Watch adicionada anteriormente. O aplicativo é Agora em execução e detectando solicitações HTTP na porta 9000.

      O aplicativo está em execução e recebendo solicitações HTTP no
porta `9000`

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

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

    O terminal com o servidor &quot;ngrok&quot; em execução e
redirecionando

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

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

    A interface da Web hospedada pelo aplicativo &quot;ngrok&quot; sem mostrar HTTP
solicitações

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

  6. Envie uma mensagem direta para testar o app do Chat mensagem:

    • Abra o Google Chat.

      Acessar o Google Chat

    • Clique em Nova conversa .

    • Na caixa de diálogo, insira o nome do seu App Chat.

    • Nos resultados da pesquisa, encontre seu app do Chat. Clique em Adicionar &gt; Chat.

    • No espaço da mensagem direta, digite Hey! e pressione enter. Seu O app do Chat não responde porque está sendo depurados ativamente.

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

    A execução é pausada no ponto de interrupção que foi
desencadear

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

  8. Quando você retomar a execução do depurador de Visual Studio Code antes que o app do Google Chat expire responde com seu nome e a foto do avatar na mensagem.

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

    A solicitação HTTP da interface da Web hospedada pelo `ngrok`
aplicativo

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

  10. Para mudar o comportamento do aplicativo, substitua Hello por Hey inline 55 do arquivo App.java, reinicie o processo mvnDebug e reinicie Remote Debug Watch para reanexar e reiniciar depuração.

  11. Desta vez, em vez de enviar uma segunda mensagem Hey! no espaço, você podemos selecionar a última solicitação HTTP registrada na interface da Web hospedada pelo ngrok no ambiente local e clique em Replay. Igual à última vez, seu app do Chat não responde porque está sendo depurado ativamente.

  12. 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 da mensagem.

Depurar a partir do ambiente remoto

Nesta seção, você vai interagir com o app do Chat que é executado em um ambiente remoto.

Depurar a partir do controle remoto
meio ambiente

Figura 9. Depurar do ambiente remoto.

Pré-requisitos

  • Um espaço de mensagem direta com seu app do Chat. Você pode siga a seção Teste o app do Chat do Guia de início rápido e pesquise pelo Chat para iniciar um.
  • O aplicativo em execução no ambiente remoto com o depurador ativado em uma determinada porta, ele é referenciado como REMOTE_DEBUG_PORT nas instruções deste guia.
  • O ambiente local pode ssh para o ambiente remoto.
  • Um ambiente de desenvolvimento integrado configurado no ambiente local para depuração. Usamos o Visual Studio Code IDE e os respectivos de depuração nessa para fins ilustrativos.

Conecte seus ambientes local e remoto

No ambiente local a partir do qual você quer iniciar um cliente de depuração configure um túnel SSH:

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

Substitua:

  • LOCAL_DEBUG_PORT: a porta de depuração no seu diretório local de nuvem.
  • REMOTE_USERNAME: o nome de usuário no ambiente remoto.
  • REMOTE_ADDRESS: o endereço do ambiente remoto.
  • REMOTE_DEBUG_PORT: a porta de depuração no controle remoto de nuvem.

A porta de depuração no seu ambiente local agora está vinculada à porta de depuração do seu ambiente remoto.

Começar a depurar

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

  1. Em uma nova janela, abra o código-fonte do app.
  2. Crie o arquivo .vscode/launch.json no diretório raiz e configure um inicialização chamada Debug Remote, que é anexada à porta de depuração no de nuvem:

    Node.js

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "node",
            "request": "attach",
            "name": "Debug Remote",
            "address": "127.0.0.1",
            "port": LOCAL_DEBUG_PORT
        }]
    }
    

    Python

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "python",
            "request": "attach",
            "name": "Debug Remote",
            "connect": {
                "host": "127.0.0.1",
                "port": LOCAL_DEBUG_PORT
            }
        }]
    }
    

    Java

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "java",
            "request": "attach",
            "name": "Debug Remote",
            "hostName": "127.0.0.1",
            "port": LOCAL_DEBUG_PORT
        }]
    }
    

    Substitua LOCAL_DEBUG_PORT pela porta de depuração no no ambiente local.

  3. Adicionar um ponto de interrupção no código-fonte do app que pause a solicitação HTTP e começar a executar depuração com a configuração Debug Remote adicionada antes.

No espaço da mensagem direta com seu app do Chat, digite tudo o que você quiser testar e pressione enter. Seu O app do Chat não responde porque está participando depurado no ambiente de desenvolvimento integrado Visual Studio Code.