Como desenvolvedor de apps do Google Chat, talvez você precise depurar código para testar mudanças ou resolver problemas complexos. A depuração de apps do Chat pode ser feita de várias maneiras diferentes, dependendo da arquitetura do app, do que ele faz, de como ele é implantado e das suas preferências.
Nesta página, explicamos como depurar um app de chat HTTP usando o ngrok, uma plataforma de entrada unificada que pode ser usada para testar ambientes de desenvolvimento locais. Neste guia, você testará alterações de código em um ambiente local 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 executado no seu ambiente local.
Figura 1. Depurar em um ambiente de desenvolvimento local.
Workshop
Node.js
Python
Java
Pré-requisitos
Node.js
- Versões mais recentes de
node
enpm
instaladas no ambiente local. Versão mais recente do
nodemon
instalada no ambiente local, ela é usada para atualizações automáticas: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 app como qualquer valor, comohttp://example.com
.Um IDE configurado no seu ambiente local que pode depurar. Usamos o ambiente de desenvolvimento integrado
Visual Studio Code
e os recursos de depuração padrão neste guia para fins ilustrativos.Git
instalado no seu ambiente local.Uma conta do
ngrok
.
Python
- Versão mais recente do
python3
instalada no ambiente local. - Com a versão mais recente do
pip
e dovirtualenv
instaladas no ambiente local, eles são usados para gerenciar pacotes do 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 app como qualquer valor, comohttp://example.com
. - Um IDE configurado no seu ambiente local que pode depurar. Usamos o
ambiente de desenvolvimento integrado
Visual Studio Code
e os recursos de depuração padrão neste guia para fins ilustrativos. Git
instalado no seu ambiente local.- Uma conta do
ngrok
. - Versão mais recente do
gcloud
instalada e inicializada no ambiente local.
Java
- Versão estável mais recente do
Java SE 11's JDK
instalada no ambiente local. - Versão mais recente do
Apache Maven
instalada no ambiente local. Ela é 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 app como qualquer valor, comohttp://example.com
. - Um IDE configurado no seu ambiente local que pode depurar. Usamos o
ambiente de desenvolvimento integrado
Visual Studio Code
e os recursos de depuração padrão neste guia para fins ilustrativos. Git
instalado no seu ambiente local.- Uma conta do
ngrok
. - Versão mais recente do
gcloud
instalada e inicializada no ambiente local.
Disponibilizar o serviço de localhost publicamente
Você precisa conectar seu ambiente local à Internet para que o
app Chat tenha acesso a ele. O aplicativo ngrok
é usado
para redirecionar solicitações HTTP feitas a um URL público para seu ambiente local.
- Em um navegador no ambiente local, faça login na conta do
ngrok
. - Instale o aplicativo e configure o
authtoken
no ambiente local. - Crie um domínio estático na sua
conta
ngrok
, que é mencionado comoNGROK_STATIC_DOMAIN
nas instruções deste guia.
Configurar o app do Chat
Configure o app do Chat para enviar todas as solicitações HTTP para seu domínio estático.
No console do Google Cloud, abra 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 app como:
https://NGROK_STATIC_DOMAIN
Substitua
NGROK_STATIC_DOMAIN
pelo domínio estático na sua conta dongrok
.Clique em Salvar.
Figura 2. O app do Chat envia todas as solicitações HTTP
para o domínio estático. O serviço público ngrok
funciona como uma ponte entre o
app do Chat e o código do aplicativo executado
localmente.
Teste o app do Chat
Você pode implantar, configurar, testar, depurar e recarregar automaticamente seu app do Chat.
Node.js
Clone o repositório
googleworkspace/google-chat-samples
do GitHub para o 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:- Em uma nova janela, abra a pasta
google-chat-samples/node/basic-app
. 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" } ... }
No diretório raiz, instale o aplicativo:
npm install
Crie e configure uma inicialização chamada
Debug Watch
que aciona o scriptdebug-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"] }] }
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çãoDebug Watch
adicionada anteriormente. O aplicativo está em execução e detectando solicitações HTTP na porta9000
.Figura 3. O aplicativo está em execução e detectando solicitações HTTP na porta
9000
.
- Em uma nova janela, abra a pasta
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 dongrok
. Todas as solicitações agora são redirecionadas para o ambiente local e para a porta usada pelo aplicativo.Figura 4. O terminal com o servidor
ngrok
em execução e redirecionando.Uma interface da Web também é iniciada no seu localhost pelo aplicativo
ngrok
. É possível monitorar todas as atividades abrindo-a em um navegador.Figura 5. A interface da Web hospedada pelo aplicativo
ngrok
que não mostra solicitações HTTP.Envie uma mensagem direta para o app do Chat:
Abra o Google Chat.
Clique em Novo chat
.Na caixa de diálogo, digite o nome do seu app do Chat.
Nos resultados da pesquisa, encontre seu app do Chat e clique em Add > Chat.
No espaço da mensagem direta, digite
Hello
e pressioneenter
. Seu app do Chat não responde porque está sendo depurado ativamente.
No
Visual Studio Code
do seu ambiente local, é possível conferir que a execução foi pausada no ponto de interrupção definido.Figura 6. A execução é pausada no ponto de interrupção que foi definido.
Quando você retoma a execução do depurador de
Visual Studio Code
antes de o Google Chat expirar, o app do Chat respondeYour message : Hello
.É possível verificar os registros de solicitação e resposta HTTP na interface da Web hospedada pelo aplicativo
ngrok
no 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
pelo35
inlineHere was your message
doindex.json
. Quando você salva o arquivo, onodemon
recarrega automaticamente o aplicativo com o código-fonte atualizado e oVisual 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, é possível selecionar a última solicitação HTTP registrada na interface da Web hospedada pelo aplicativongrok
no ambiente local e clicar emReplay
. Assim como na última vez, seu app do Chat não respondeu 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 aplicativongrok
no ambiente local que o aplicativo gera uma resposta com a versão atualizada da mensagemHere 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 para o app.Clone o repositório
googleworkspace/google-chat-samples
do GitHub para o 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:- Em uma nova janela, abra a pasta
google-chat-samples/python/avatar-app
. Crie um novo ambiente virtual para o Python
env
e ative-o:virtualenv env
source env/bin/activate
Instale todas as dependências do projeto usando
pip
no ambiente virtual:pip install -r requirements.txt
Crie o arquivo
.vscode/launch.json
no diretório raiz e configure uma inicialização chamadaDebug Watch
que aciona o aplicativo do módulofunctions-framework
na porta9000
no modo de depuração no ambiente virtualenv
:{ "version": "0.2.0", "configurations": [{ "type": "python", "request": "launch", "name": "Debug Watch", "python": "${workspaceFolder}/env/bin/python3", "module": "functions_framework", "args": [ "--target", "hello_chat", "--port", "9000", "--debug" ] }] }
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çãoDebug Watch
adicionada anteriormente. O aplicativo está em execução e detectando solicitações HTTP na porta9000
.Figura 3. O aplicativo está em execução e detectando solicitações HTTP na porta
9000
.
- Em uma nova janela, abra a pasta
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 dongrok
. Todas as solicitações agora são redirecionadas para o ambiente local e para a porta usada pelo aplicativo.Figura 4. O terminal com o servidor
ngrok
em execução e redirecionando.Uma interface da Web também é iniciada no seu localhost pelo aplicativo
ngrok
. É possível monitorar todas as atividades abrindo-a em um navegador.Figura 5. A interface da Web hospedada pelo aplicativo
ngrok
que não mostra solicitações HTTP.Envie uma mensagem direta para o app do Chat:
Abra o Google Chat.
Clique em Novo chat
.Na caixa de diálogo, digite o nome do seu app do Chat.
Nos resultados da pesquisa, encontre seu app do Chat e clique em Add > Chat.
No espaço da mensagem direta, digite
Hey!
e pressioneenter
. Seu app do Chat não responde porque está sendo depurado ativamente.
No
Visual Studio Code
do seu ambiente local, é possível conferir que a execução foi pausada no ponto de interrupção definido.Figura 6. A execução é pausada no ponto de interrupção que foi definido.
Quando você retoma a execução do depurador de
Visual Studio Code
antes de o Google Chat expirar, o app do Chat responde com seu nome e 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 ambiente local.Figura 7. A solicitação HTTP da interface da Web hospedada pelo aplicativo
ngrok
.Para mudar o comportamento do aplicativo, substitua
Hello
porHey
in-line51
do arquivomain.py
. Quando você salva o arquivo, oVisual 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, é possível selecionar a última solicitação HTTP registrada na interface da Web hospedada pelo aplicativongrok
no ambiente local e clicar emReplay
. Assim como na última vez, seu app do Chat não respondeu 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 aplicativongrok
no 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 para o app.Clone o repositório
googleworkspace/google-chat-samples
do GitHub no 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:- Em uma nova janela, abra a pasta
google-chat-samples/java/avatar-app
. Configure o projeto Maven para executar localmente o aplicativo
HelloChat
na porta9000
adicionando o plug-in de build do Cloud Functions Frameworkfunction-maven-plugin
ao arquivopom.xml
:... <plugin> <groupId>com.google.cloud.functions</groupId> <artifactId>function-maven-plugin</artifactId> <version>0.11.0</version> <configuration> <functionTarget>HelloChat</functionTarget> <port>9000</port> </configuration> </plugin> ...
Agora é possível iniciá-la localmente no modo de depuração:
mvnDebug function:run Preparing to execute Maven in debug mode Listening for transport dt_socket at address: 8000
Crie o arquivo
.vscode/launch.json
no diretório raiz e configure uma inicialização chamadaRemote Debug Watch
que é anexada ao aplicativo iniciado anteriormente com a porta8000
:{ "version": "0.2.0", "configurations": [{ "type": "java", "request": "attach", "name": "Remote Debug Watch", "projectName": "http-function", "hostName": "localhost", "port": 8000 }] }
Adicione um ponto de interrupção que pause o processamento da solicitação HTTP no arquivo
HelloChat.java
e comece a anexar e depurar com a configuraçãoRemote Debug Watch
adicionada anteriormente. O aplicativo está em execução e recebendo solicitações HTTP na porta9000
.Figura 3.O aplicativo está em execução e detectando solicitações HTTP na porta
9000
.
- Em uma nova janela, abra a pasta
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 dongrok
. Todas as solicitações agora são redirecionadas para o ambiente local e para a porta usada pelo aplicativo.Figura 4. O terminal com o servidor
ngrok
em execução e redirecionando.Uma interface da Web também é iniciada no seu localhost pelo aplicativo
ngrok
. É possível monitorar todas as atividades abrindo-a em um navegador.Figura 5. A interface da Web hospedada pelo aplicativo
ngrok
que não mostra solicitações HTTP.Envie uma mensagem direta para o app do Chat:
Abra o Google Chat.
Clique em Novo chat
.Na caixa de diálogo, digite o nome do seu app do Chat.
Nos resultados da pesquisa, encontre seu app do Chat e clique em Add > Chat.
No espaço da mensagem direta, digite
Hey!
e pressioneenter
. Seu app do Chat não responde porque está sendo depurado ativamente.
No
Visual Studio Code
do seu ambiente local, é possível conferir que a execução foi pausada no ponto de interrupção definido.Figura 6. A execução é pausada no ponto de interrupção que foi definido.
Quando você retoma a execução do depurador de
Visual Studio Code
antes de o Google Chat expirar, o app do Chat responde com seu nome e 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 ambiente local.Figura 7. A solicitação HTTP da interface da Web hospedada pelo aplicativo
ngrok
.Para mudar o comportamento do aplicativo, substitua
Hello
porHey
in-line55
do arquivoHelloChat.java
, reinicie o processomvnDebug
e reinicie oRemote Debug Watch
para reanexar e reiniciar a depuração.Desta vez, em vez de enviar uma segunda mensagem
Hey!
no espaço, é possível selecionar a última solicitação HTTP registrada na interface da Web hospedada pelo aplicativongrok
no ambiente local e clicar emReplay
. Assim como na última vez, seu app do Chat não respondeu 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 aplicativongrok
no ambiente local que o aplicativo gera uma resposta com a versão atualizada da mensagem.
Depurar do ambiente remoto
Nesta seção, você vai interagir com seu app do Chat executado em um ambiente remoto.
Figura 9. Depurar em ambiente remoto.
Pré-requisitos
- Um espaço de mensagens diretas com o app do Chat. Siga a seção Testar o app do Chat do Guia de início rápido e pesquise o 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. - O ambiente local pode
ssh
para o ambiente remoto. - Um IDE configurado no seu ambiente local que pode depurar. Usamos o
ambiente de desenvolvimento integrado
Visual Studio Code
e os recursos de depuração padrão neste guia para fins ilustrativos.
Conecte seus ambientes locais e remotos
No ambiente local em que você quer iniciar uma conexão do 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 seu 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 chamadoDebug Remote
, que é conectado à 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 ao código-fonte do app que pause o processamento da solicitação HTTP e comece a execução e depuração com a configuração
Debug Remote
adicionada anteriormente.
No espaço da mensagem direta com o app do Chat, digite
o que você quiser testar e pressione enter
. Seu
app do Chat não responde porque está sendo ativamente
depurado
no ambiente de desenvolvimento integrado Visual Studio Code
.
Temas relacionados
- Saiba como enable e consultar registros de erros.
- Saiba como corrigir erros no 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".
- Aprenda a corrigir erros de cards, como mensagens de cards, caixas de diálogo ou visualizações de links que não são renderizadas ou funcionam como esperado.