Esta página foi traduzida pela API Cloud Translation.

Depurar apps do Google Chat

Como desenvolvedor de apps do Google Chat, talvez você precise depurar o código para testar mudanças ou solucionar problemas complexos. A depuração de apps de chat pode ser feita de várias formas diferentes, dependendo da arquitetura do seu app, da função dele, da forma como o app é implantado e das suas preferências.

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

Depurar no ambiente de desenvolvimento local

Nesta seção, você interage com o app de chat que é executado no seu ambiente local.

Depurar no ambiente de
desenvolvimento local

Figura 1. Depurar em um ambiente de desenvolvimento local.

Workshop

Node.js

Python

Java

Pré-requisitos

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 app de chat HTTP configurado para mensagens. Siga as seções Pré-requisitos, Configurar o ambiente e Publicar o app no Google Chat do Guia de início rápido. As únicas diferenças são que você precisa definir o nome do app como Debug App e o URL do endpoint HTTP como qualquer coisa, como http://example.com.
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.
Git instalado no ambiente local.
Uma conta do ngrok.

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 app de chat HTTP configurado para mensagens. Siga as seções Pré-requisitos, Configurar o ambiente e Publicar o app no Google Chat do Guia de início rápido. As únicas diferenças são que você precisa definir o nome do app como Debug App e o URL do endpoint HTTP como qualquer coisa, como http://example.com.
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.
Git instalado no ambiente local.
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 app de chat HTTP configurado para mensagens. Siga as seções Pré-requisitos, Configurar o ambiente e Publicar o app no Google Chat do Guia de início rápido. As únicas diferenças são que você precisa definir o nome do app como Debug App e o URL do endpoint HTTP como qualquer coisa, como http://example.com.
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.
Git instalado no ambiente local.
Uma conta do ngrok.
Ter a versão mais recente do gcloud instalada e inicializada no ambiente local.

Disponibilizar o serviço localhost publicamente

É necessário conectar seu ambiente local à Internet para que o app de chat possa acessá-lo. O aplicativo ngrok é usado para redirecionar solicitações HTTP feitas para um URL público para seu ambiente local.

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

Configurar o app Chat

Configure o app de chat para enviar todas as solicitações HTTP ao seu domínio estático.

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

Acessar a página da API Google Chat
Clique na guia Configuração.
Acesse Recursos interativos > Configurações de conexão e defina o valor do campo de texto URL do endpoint HTTP como:
```
https://NGROK_STATIC_DOMAIN
```
Substitua NGROK_STATIC_DOMAIN pelo domínio estático na sua conta ngrok.
Clique em Salvar.

O app de chat envia todas as solicitações HTTP para o
domínio estático.

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

Teste o app do Chat

É possível implantar, configurar, testar, depurar e recarregar automaticamente o app Chat localmente.

Node.js

Clone o repositório googleworkspace/google-chat-samples do GitHub para seu ambiente local. Ele contém o código do aplicativo a ser executado:
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
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 recarga 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 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.
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.
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.
Teste o app do Chat enviando uma mensagem direta:
- Abra o Google Chat.
  
  Acessar o Google Chat
- Clique em Novo chat .
- Na caixa de diálogo, insira o nome do app de chat.
- Nos resultados da pesquisa, encontre o app de chat, clique em Adicionar > Chat.
- No espaço da mensagem direta, digite Hello e pressione enter. O app de chat não responde porque está sendo ativamente depurado.
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.
Quando você retoma a execução do depurador de Visual Studio Code antes que o Google Chat expire, o app do Chat responde Your message : Hello.
É 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.
Para mudar o comportamento do aplicativo, substitua Your message por Here was your message 35 inline do index.json. 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.
Dessa vez, em vez de enviar uma segunda mensagem Hello no espaço, você pode selecionar a última solicitação HTTP registrada na interface da Web hospedada pelo aplicativo ngrok no seu ambiente local e clicar em Replay. Assim como da última vez, o app de chat não responde porque está sendo depurado ativamente.
Quando você retoma a execução do depurador de Visual Studio Code, é possível conferir na interface da Web hospedada pelo aplicativo ngrok no seu ambiente local que o aplicativo gera uma resposta com a versão atualizada da mensagem Here was your message : Hello.

Python

Consiga novas credenciais de usuário que serão usadas no Application Default Credentials:
```
gcloud config set project PROJECT_ID
gcloud auth application-default login
```
Substitua PROJECT_ID pelo ID do projeto do projeto do Cloud do app.
Clone o repositório googleworkspace/google-chat-samples do GitHub para o ambiente local, que contém o código do aplicativo:
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
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 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", "avatar_app",
            "--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.
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.
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.
Teste o app do Chat enviando uma mensagem direta:
- Abra o Google Chat.
  
  Acessar o Google Chat
- Clique em Novo chat .
- Na caixa de diálogo, insira o nome do app de chat.
- Nos resultados da pesquisa, encontre o app de chat, clique em Adicionar > Chat.
- No espaço da mensagem direta, digite Hey! e pressione enter. Seu app de chat não responde porque está sendo ativamente depurado.
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.
Quando você retoma a execução do depurador de Visual Studio Code antes que o Google Chat expire, o app Chat responde com seu nome e a imagem do avatar na mensagem.
É 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.
Para mudar o comportamento do aplicativo, substitua Hello por Hey inline 51 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.
Dessa vez, em vez de enviar uma segunda mensagem Hey! no espaço, você pode selecionar a última solicitação HTTP registrada na interface da Web hospedada pelo aplicativo ngrok no seu ambiente local e clicar em Replay. Assim como da última vez, seu app de chat não responde porque está sendo depurado ativamente.
Quando você retoma a execução do depurador de Visual Studio Code, é possível conferir na interface da Web hospedada pelo aplicativo ngrok no seu ambiente local que o aplicativo gera uma resposta com a versão atualizada da mensagem.

Java

Consiga novas credenciais de usuário que serão usadas no Application Default Credentials:
```
gcloud config set project PROJECT_ID
gcloud auth application-default login
```
Substitua PROJECT_ID pelo ID do projeto do projeto do Cloud do app.
Clone o repositório googleworkspace/google-chat-samples do GitHub no seu ambiente local, que contém o código do aplicativo:
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
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 do Maven para executar o aplicativo App na porta 9000 localmente adicionando o plug-in de build do Cloud Functions Framework 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 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 App.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.
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.
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.
Teste o app do Chat enviando uma mensagem direta:
- Abra o Google Chat.
  
  Acessar o Google Chat
- Clique em Novo chat .
- Na caixa de diálogo, insira o nome do app de chat.
- Nos resultados da pesquisa, encontre o app de chat, clique em Adicionar > Chat.
- No espaço da mensagem direta, digite Hey! e pressione enter. O app de chat não responde porque está sendo ativamente depurado.
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.
Quando você retoma a execução do depurador de Visual Studio Code antes que o Google Chat expire, o app Chat responde com seu nome e a imagem do avatar na mensagem.
É 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.
Para mudar o comportamento do aplicativo, substitua Hello por Hey inline 55 do arquivo App.java, reinicie o processo mvnDebug e reinicie o Remote Debug Watch para reativar e reiniciar o depurador.
Dessa vez, em vez de enviar uma segunda mensagem Hey! no espaço, você pode selecionar a última solicitação HTTP registrada na interface da Web hospedada pelo aplicativo ngrok no seu ambiente local e clicar em Replay. Assim como da última vez, seu app de chat não responde porque está sendo depurado ativamente.
Quando você retoma a execução do depurador de Visual Studio Code, é possível conferir na interface da Web hospedada pelo aplicativo ngrok no seu ambiente local que o aplicativo gera uma resposta com a versão atualizada da mensagem.

Depurar no ambiente remoto

Nesta seção, você interage com o app de chat que é executado em um ambiente remoto.

Depurar no ambiente
remoto

Figura 9. Depurar do ambiente remoto.

Pré-requisitos

Um espaço de mensagem direta com o app do Chat. Você pode seguir a seção Testar o app do Chat do Guia de início rápido e pesquisar o app do Chat para iniciar uma.
O aplicativo em execução no ambiente remoto com o depurador ativado em uma determinada porta é 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 seu ambiente local que pode depurar. Usamos o Visual Studio Code IDE e os recursos de depuração padrão neste guia para fins de ilustração.

Conectar os ambientes local e remoto

No ambiente local de onde você quer iniciar uma conexão de 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 ambiente local.
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 ambiente remoto.

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

Começar a depurar

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

Em uma nova janela, abra o código-fonte do app.

Crie o arquivo .vscode/launch.json no diretório raiz e configure uma inicialização chamada Debug Remote que se conecte à porta de depuração no ambiente local:

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

Adicione um ponto de interrupção no código-fonte do app que pausa o processamento da solicitação HTTP e inicie a execução e depuração com a configuração Debug Remote adicionada antes.

No espaço de mensagem direta com o app do Chat, digite o que você quer testar e pressione enter. O app de chat não responde porque está sendo ativamente depurado no ambiente de desenvolvimento integrado Visual Studio Code.

Temas relacionados

Saiba como ativar e consultar registros de erros.
Saiba como corrigir erros do app do Google Chat, como "O app não está respondendo", "A API Google Chat está disponível apenas para usuários do Google Workspace" ou "Os usuários podem ser excluídos dos espaços".
Saiba como corrigir erros de card, como mensagens, caixas de diálogo ou visualizações de links que não são renderizadas ou não funcionam como esperado.