Como desenvolvedor de apps do Google Chat, talvez você precise depurar o código para testar alterações 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, que é uma plataforma de entrada unificada que pode ser usada para testar ambientes de desenvolvimento locais. Neste guia, você vai testar alterações de código em um ambiente local e resolver 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 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 de
nodemon
instalada no seu ambiente local. Ela é usada para fins de atualização 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 app comohttp://example.com
.Um ambiente de desenvolvimento integrado configurado no ambiente local para depuração. Usamos o ambiente de desenvolvimento integrado
Visual Studio Code
e os recursos padrão de depuraçã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. - A versão mais recente de
pip
evirtualenv
instaladas no 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 app comohttp://example.com
. - Um ambiente de desenvolvimento integrado configurado no ambiente local para depuração. Usamos o
ambiente de desenvolvimento integrado
Visual Studio Code
e os recursos padrão de depuraçã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 seu 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 comohttp://example.com
. - Um ambiente de desenvolvimento integrado configurado no ambiente local para depuração. Usamos o
ambiente de desenvolvimento integrado
Visual Studio Code
e os recursos padrão de depuraçã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.
Tornar o serviço localhost disponível publicamente
Você precisa conectar seu ambiente local à Internet para que o app do 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 conta
ngrok
. - Instale o aplicativo e configure o
authtoken
no ambiente local. - Crie um domínio estático na sua
conta
ngrok
. Ele é referenciado 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 ao 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 contangrok
.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
Implante, configure, teste, depure e atualize automaticamente seu app do Chat localmente.
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 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 acione 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. Agora, o aplicativo está em execução e recebendo solicitações HTTP na porta9000
.Figura 3. O aplicativo está em execução e recebendo solicitações HTTP na porta
9000
.
- Em uma nova janela, abra a pasta
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 contangrok
. Todas as solicitações serão redirecionadas para o ambiente local e a porta usada pelo aplicativo.Figura 4. O terminal com o servidor do
ngrok
em execução e redirecionando.Uma interface da Web também é iniciada no 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
sem solicitações HTTP.Envie uma mensagem direta para testar o app do Chat:
Abra o Google Chat.
Clique em Nova conversa
.Na caixa de diálogo, digite o nome do app do Chat.
Nos resultados da pesquisa, encontre seu app do Chat, clique em Adicionar > Chat.
No espaço da mensagem direta, digite
Hello
e pressioneenter
. O app do Chat não responde porque está sendo depurado ativamente.
No
Visual Studio Code
no seu ambiente local, é possível observar que a execução está pausada no ponto de interrupção que foi 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 do Google Chat expirar, o app responde aYour 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
porHere was your message
35
in-line 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 seu ambiente local e clicar emReplay
. Assim como da última vez, o app do Chat não responde porque está sendo depurado ativamente.Ao retomar a execução do depurador de
Visual Studio Code
, é possível 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 do aplicativo.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 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 a partir 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. Agora, o aplicativo está em execução e recebendo solicitações HTTP na porta9000
.Figura 3. O aplicativo está em execução e recebendo solicitações HTTP na porta
9000
.
- Em uma nova janela, abra a pasta
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 contangrok
. Todas as solicitações serão redirecionadas para o ambiente local e a porta usada pelo aplicativo.Figura 4. O terminal com o servidor do
ngrok
em execução e redirecionando.Uma interface da Web também é iniciada no 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
sem solicitações HTTP.Envie uma mensagem direta para testar o app do Chat:
Abra o Google Chat.
Clique em Nova conversa
.Na caixa de diálogo, digite o nome do seu app do Chat.
Nos resultados da pesquisa, encontre seu app do Chat, clique em Adicionar > Chat.
No espaço da mensagem direta, digite
Hey!
e pressioneenter
. O app do Chat não responde porque está sendo depurado ativamente.
No
Visual Studio Code
no seu ambiente local, é possível observar que a execução está pausada no ponto de interrupção que foi 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 de o Google Chat expirar, o app 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 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
porHey
inline51
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 seu ambiente local e clicar emReplay
. Assim como da última vez, seu app do Chat não responde porque está sendo depurado ativamente.Ao retomar a execução do depurador de
Visual Studio Code
, é possível ver na interface da Web hospedada pelo aplicativongrok
em 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 aplicativo.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 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 buildfunction-maven-plugin
do framework do Cloud Functions 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 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
Crie o arquivo
.vscode/launch.json
no diretório raiz e configure uma inicialização chamadaRemote Debug Watch
que seja 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. Agora, o aplicativo está em execução e recebendo solicitações HTTP na porta9000
.Figura 3.O aplicativo está em execução e recebendo solicitações HTTP na porta
9000
.
- Em uma nova janela, abra a pasta
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 contangrok
. Todas as solicitações serão redirecionadas para o ambiente local e a porta usada pelo aplicativo.Figura 4. O terminal com o servidor do
ngrok
em execução e redirecionando.Uma interface da Web também é iniciada no 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
sem solicitações HTTP.Envie uma mensagem direta para testar o app do Chat:
Abra o Google Chat.
Clique em Nova conversa
.Na caixa de diálogo, digite o nome do seu app do Chat.
Nos resultados da pesquisa, encontre seu app do Chat, clique em Adicionar > Chat.
No espaço da mensagem direta, digite
Hey!
e pressioneenter
. O app do Chat não responde porque está sendo depurado ativamente.
No
Visual Studio Code
no seu ambiente local, é possível observar que a execução está pausada no ponto de interrupção que foi 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 de o Google Chat expirar, o app 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 seu ambiente local.Figura 7. A solicitação HTTP da interface da Web hospedada pelo aplicativo
ngrok
.Para mudar o comportamento do app, substitua
Hello
porHey
inline55
do arquivoHelloChat.java
, reinicie o processomvnDebug
e reinicieRemote Debug Watch
para anexar novamente 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 seu ambiente local e clicar emReplay
. Assim como da última vez, o app do Chat não responde porque está sendo depurado ativamente.Ao retomar a execução do depurador de
Visual Studio Code
, é possível ver na interface da Web hospedada pelo aplicativongrok
em seu ambiente local que o aplicativo gera uma resposta com a versão atualizada da mensagem.
Depurar a partir do ambiente remoto
Nesta seção, você interage com o app do Chat que é executado em um ambiente remoto.
Figura 9. Depurar do ambiente remoto.
Pré-requisitos
- Um espaço de mensagem direta com seu app do Chat. Siga a seção Testar o app do Chat do Guia de início rápido e procure 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. - O ambiente local pode
ssh
para o ambiente remoto. - Um ambiente de desenvolvimento integrado configurado no ambiente local para depuração. Usamos o
ambiente de desenvolvimento integrado
Visual Studio Code
e os recursos padrão de depuração neste guia para fins ilustrativos.
Conecte seus ambientes local e remoto
No ambiente local a partir do qual 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 do 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 chamadaDebug Remote
que seja anexada à 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 seu ambiente local.Adicione um ponto de interrupção no código-fonte do app que pause o processamento da solicitação HTTP e comece a executar e depurar com a configuração
Debug Remote
adicionada anteriormente.
No espaço de mensagem direta com o app do Chat, digite
o que você quiser testar e pressione enter
. O
app do Chat não responde porque está sendo
depurado
ativamente no ambiente de desenvolvimento integrado Visual Studio Code
.
Temas relacionados
- Saiba como enable e consultar registros de erros.
- Saiba como corrigir erros no app do Google Chat, como "O app não está respondendo", "A API Google Chat só está disponível para usuários do Google Workspace" ou "Os usuários podem ser excluídos de espaços".
- Saiba como corrigir erros de cards, como mensagens, caixas de diálogo ou visualizações de links que não são renderizadas ou funcionam como esperado.