Depurar apps do Google Chat

Node.js

Python

Java

Node.js

• Versões mais recentes de node e npm 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, como http://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 do virtualenv 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, como http://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, como http://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.

Node.js

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

2. 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 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 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 detectando solicitações HTTP na porta 9000.

      

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

3. 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 o ambiente local e para a porta usada pelo aplicativo.

   

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

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

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

   • Abra o Google Chat.

     Acessar o Google Chat

   • Clique em Novo chat add.

   • 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 pressione enter. Seu app do Chat não responde porque está sendo depurado ativamente.

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

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

8. É 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.

9. Para mudar o comportamento do aplicativo, substitua Your message pelo 35 inline Here was your message 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.

10. 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 aplicativo ngrok no ambiente local e clicar em Replay. Assim como na última vez, seu app do Chat não respondeu porque está sendo depurado ativamente.

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

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

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

3. 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 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 no ambiente virtual:

      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", "hello_chat",
                  "--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 detectando solicitações HTTP na porta 9000.

      

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

4. 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 o ambiente local e para a porta usada pelo aplicativo.

   

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

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

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

   • Abra o Google Chat.

     Acessar o Google Chat

   • Clique em Novo chat add.

   • 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 pressione enter. Seu app do Chat não responde porque está sendo depurado ativamente.

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

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

9. É 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.

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

11. 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 aplicativo ngrok no ambiente local e clicar em Replay. Assim como na última vez, seu app do Chat não respondeu porque está sendo depurado ativamente.

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

Java

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

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

3. 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 localmente o aplicativo HelloChat na porta 9000 adicionando o plug-in de build do Cloud Functions Framework function-maven-plugin ao arquivo pom.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>
      ...
      

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

   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 pause o processamento da solicitação HTTP no arquivo HelloChat.java e comece a anexar e depurar com a configuração Remote 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.

4. 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 o ambiente local e para a porta usada pelo aplicativo.

   

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

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

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

   • Abra o Google Chat.

     Acessar o Google Chat

   • Clique em Novo chat add.

   • 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 pressione enter. Seu app do Chat não responde porque está sendo depurado ativamente.

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

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

9. É 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.

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

11. 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 aplicativo ngrok no ambiente local e clicar em Replay. Assim como na última vez, seu app do Chat não respondeu porque está sendo depurado ativamente.

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