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 do Chat pode ser feita de várias formas, 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 ngrok, uma plataforma de entrada unificada que pode ser usada para testar ambientes de desenvolvimento local. Neste guia, você vai testar as mudanças no código em um ambiente local e resolver problemas em um ambiente remoto.

Depurar do ambiente de desenvolvimento local

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

Depurar do ambiente de desenvolvimento local

Figura 1. Depure em um ambiente de desenvolvimento local.

Workshop

Node.js

Python

Java

Pré-requisitos

Node.js

As versões mais recentes do node e do npm instaladas no seu ambiente local.
A versão mais recente do nodemon instalada no seu ambiente local é usada para fins de recarregamento automático:
```
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 a Visual Studio Code IDE e os recursos de depuração padrão 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 seu ambiente local.
A versão mais recente do pip e do virtualenv instalados no seu ambiente local. Eles são usados 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 a Visual Studio Code IDE e os recursos de depuração padrão neste guia para fins de ilustração.
Git instalado no ambiente local.
Uma conta do ngrok.
A versão mais recente do gcloud instalada e inicializada no seu ambiente local.

Java

A versão estável mais recente do Java SE 11's JDK instalado no seu ambiente local.
A versão mais recente do Apache Maven instalado no seu 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 a Visual Studio Code IDE e os recursos de depuração padrão neste guia para fins de ilustração.
Git instalado no ambiente local.
Uma conta do ngrok.
A versão mais recente do gcloud instalada e inicializada no seu ambiente local.

Disponibilizar o serviço localhost publicamente

Conecte seu ambiente local à Internet para que o app Chat possa acessá-lo. O aplicativo ngrok é usado para redirecionar solicitações HTTP feitas a 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 do ngrok. Ele é referenciado como NGROK_STATIC_DOMAIN nas instruções deste guia.

Configurar o app do Chat

Configure o app Chat para enviar todas as solicitações HTTP ao 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 do ngrok.
Clique em Salvar.

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

Figura 2. O app 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 seu app de 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 seu 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 recarregamento automático 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 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 pause o processamento da solicitação HTTP no arquivo index.js e comece a executar e depurar com a configuração Debug Watch adicionada anteriormente. O aplicativo está em execução e recebendo 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 ambiente local:
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
Substitua NGROK_STATIC_DOMAIN pelo domínio estático na sua conta do ngrok. Todas as solicitações agora são redirecionadas para seu 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 seu host local pelo aplicativo ngrok. Abra em um navegador para monitorar todas as atividades.

Figura 5. A interface da Web hospedada pelo aplicativo ngrok sem mostrar 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 seu app de chat.
- Nos resultados da pesquisa, encontre o app Chat, clique em Adicionar > Chat.
- No espaço de mensagem direta, digite Hello e pressione enter. Seu app de chat não responde porque está sendo depurado ativamente.
No Visual Studio Code do seu ambiente local, é possível ver que a execução está 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 atinja o tempo limite do app 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 in-line 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.
Desta 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 Chat não responde porque está sendo depurado.
Ao retomar a execução do depurador de Visual Studio Code, você pode ver na interface da Web hospedada pelo aplicativo ngrok no 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 seu ambiente local. Ele 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 seu 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 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 um lançamento chamado 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 pause o processamento da solicitação HTTP no arquivo main.py e comece a executar e depurar com a configuração Debug Watch adicionada anteriormente. O aplicativo está em execução e recebendo 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 ambiente local:
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
Substitua NGROK_STATIC_DOMAIN pelo domínio estático na sua conta do ngrok. Todas as solicitações agora são redirecionadas para seu 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 seu host local pelo aplicativo ngrok. Abra em um navegador para monitorar todas as atividades.

Figura 5. A interface da Web hospedada pelo aplicativo ngrok sem mostrar 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 seu app de chat.
- Nos resultados da pesquisa, encontre o app Chat, clique em Adicionar > Chat.
- No espaço de mensagem direta, digite Hey! e pressione enter. Seu app de chat não responde porque está sendo depurado ativamente.
No Visual Studio Code do seu ambiente local, é possível ver que a execução está 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 atinja o tempo limite do app Chat ele responde com seu nome e foto 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.
Desta 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, o app Chat não responde porque está sendo depurado ativamente.
Ao retomar a execução do depurador de Visual Studio Code, você pode ver 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. Ele 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 seu 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 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>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 um lançamento chamado Remote Debug Watch que se conecta ao aplicativo lançado 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 pause o processamento da solicitação HTTP no arquivo App.java e comece a anexar e depurar com a configuração Remote Debug Watch adicionada antes. 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 ambiente local:
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
Substitua NGROK_STATIC_DOMAIN pelo domínio estático na sua conta do ngrok. Todas as solicitações agora são redirecionadas para seu 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 seu host local pelo aplicativo ngrok. Abra em um navegador para monitorar todas as atividades.

Figura 5. A interface da Web hospedada pelo aplicativo ngrok sem mostrar 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 seu app de chat.
- Nos resultados da pesquisa, encontre o app Chat, clique em Adicionar > Chat.
- No espaço de mensagem direta, digite Hey! e pressione enter. Seu app de chat não responde porque está sendo depurado ativamente.
No Visual Studio Code do seu ambiente local, é possível ver que a execução está 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 atinja o tempo limite do app Chat ele responde com seu nome e foto 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 na linha 55 do arquivo App.java, reinicie o processo mvnDebug e reinicie Remote Debug Watch para reconectar e reiniciar a depuração.
Desta 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, o app Chat não responde porque está sendo depurado.
Ao retomar a execução do depurador de Visual Studio Code, você pode ver 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 de um ambiente remoto

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

Depurar de um ambiente remoto

Figura 9. Depurar de um ambiente remoto.

Pré-requisitos

Um espaço de mensagem direta com seu app do Chat. Você pode seguir a seção Testar seu app do Chat do Guia de início rápido e pesquisar seu app do Chat para iniciar um.
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.
Seu 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 padrão de depuração neste guia para fins de ilustração.

Conectar ambientes locais e remotos

No ambiente local em que 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 seu 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 um lançamento chamado Debug Remote que se conecta à porta de depuração no seu 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 seu ambiente local.

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

No espaço de mensagem direta com o app Chat, digite qualquer coisa que você queira testar e pressione enter. Seu app de chat não responde porque está sendo depurado ativamente na IDE Visual Studio Code.

Temas relacionados

Saiba como ativar e consultar registros de erros.
Saiba como corrigir erros do app 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 cartão, como mensagens de cartão, caixas de diálogo ou prévias de links que não estão sendo renderizadas ou funcionando como esperado.

Depurar apps do Google Chat Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Depurar do ambiente de desenvolvimento local

Workshop

Node.js

Python

Java

Pré-requisitos

Node.js

Python

Java

Disponibilizar o serviço localhost publicamente

Configurar o app do Chat

Teste o app do Chat

Node.js

Python

Java

Depurar de um ambiente remoto

Pré-requisitos

Conectar ambientes locais e remotos

Começar a depurar

Node.js

Python

Java

Temas relacionados

Depurar apps do Google Chat