Exemplo de URL de retorno de chamada para testar webhooks

É possível clonar nosso exemplo de app de retorno de chamada para criar uma URL de retorno de chamada pública nos servidores do Glitch de modo que você possa testar webhooks. Com o Glitch, é possível gravar a carga do webhook em um arquivo de registro que pode ser visualizado em tempo real à medida que webhooks são acionados.

Antes de configurar um ponto de extremidade para testar webhook na API de Nuvem

Este guia faz parte de um processo em várias etapas. Você precisa ter concluído diversas etapas antes de configurar o exemplo de ponto de extremidade do app usando o Glitch. É preciso ter concluído o seguinte:

1. Configurar ativos de desenvolvedor e acesso à plataforma
2. Enviar uma mensagem de teste
3. Configurar Webhook

Veja as instruções completas sobre como começar a usar a API de Nuvem do WhatsApp Business para enviar a primeira mensagem de teste em Introdução à API de Nuvem do WhatsApp Business.

Configurar Glitch

1. Acesse glitch.com e crie uma conta. Isso permite que você use os recursos e garante que a interface do usuário vista seja consistente com o que descrevemos neste guia. Se você não criar uma conta, muitos recursos da interface do usuário não aparecerão ou serão diferentes.
2. Após configurar a conta no Glitch, abra o modelo de projeto inicial neste link: WhatsApp Platform Quick Start.
3. Clique em Remix to Edit no canto superior direito da página do Glitch para clonar o exemplo de app.
   

   Clicar em "Remix to Edit" para criar o próprio projeto do Glitch
   Uma cópia do projeto será criada na sua conta.
4. No arquivo .env, atualize o valor de WEBHOOK_VERIFY_TOKEN para uma string aleatória da sua escolha. Depois, é possível copiar o valor do token de acesso temporário/permanente em WhatsApp > Configuração da API no Painel de Apps e colá-lo em GRAPH_API_TOKEN.
   

   Atualizar as variáveis de ambiente no Glitch para seu projeto
5. Clique em Compartilhar no canto superior direito para obter a URL do site publicado. Adicione /webhook no final da URL para obter a URL completa do retorno de chamada. Ela será semelhante a https://<project-name>.glitch.me/webhook.

Com o ponto de extremidade pronto, é preciso voltar ao Painel de Aplicativos.

Configurar o Painel de Aplicativos com o ponto de extremidade do Glitch e o token de verificação

1. No Painel de Aplicativos, encontre o produto WhatsApp e clique em Configuração.
   
2. Em Webhook, clique em Editar. Após o clique, um diálogo será exibido na sua tela e solicitará a URL de retorno de chamada e o Verificar token. Você precisa inserir os valores usados no projeto do Glitch na seção Configurar Glitch. Por exemplo, (https://<project-name>.glitch.me/webhook) no URL de retorno de chamada e ("HAPPY") em Verificar token.
   
3. De volta à página de Configuração, clique em Gerenciar para abrir o diálogo dos campos do webhook no Painel de Aplicativos.
   

   Gerenciar diálogo de campos do webhook
4. Na coluna da extrema direita da tabela de campo, clique em Assinar em todos os eventos de webhook a serem assinados. Recomendamos que você assine todos eles.
5. Depois, na linha messages, clique em Testar para enviar uma notificação ao ponto de extremidade.

   Para confirmar que uma notificação do webhook foi acionada, volte ao Glitch e selecione LOGS. A saída deve ter a aparência da imagem a seguir.

   
   A carga completa de notificações do webhook deverá ter esta aparência:

   {
     "object": "whatsapp_business_account",
     "entry": [
       {
         "id": "0",
         "changes": [
           {
             "field": "messages",
             "value": {
               "messaging_product": "whatsapp",
               "metadata": {
                 "display_phone_number": "16505551111",
                 "phone_number_id": "123456123"
               },
               "contacts": [
                 {
                   "profile": {
                     "name": "test user name"
                   },
                   "wa_id": "16315551181"
                 }
               ],
               "messages": [
                 {
                   "from": "16315551181",
                   "id": "ABGGFlA5Fpa",
                   "timestamp": "1504902988",
                   "type": "text",
                   "text": {
                     "body": "this is a text message"
                   }
                 }
               ]
             }
           }
         ]
       }
     ]
   }

API Local da Plataforma do WhatsApp Business

1. Acesse o nosso projeto inicial de webhook no Glitch: Remix on Glitch
2. Na navegação à esquerda, clique em server.js para ver a implementação do ponto de extremidade do Webhook.
3. Clique em Compartilhar no canto superior direito para obter a URL do site publicado. Essa será a sua URL de retorno de chamada. Ela será semelhante a https://<project-name.glitch.me/webhook.
4. Clique no botão Status no painel de navegação à esquerda. Você verá que o app está escutando em uma porta específica.
5. Para ver a notificação, envie uma mensagem para si ou para outra pessoa. O exemplo de registro a seguir mostra um SMS com corpo "Hi" (Olá), além de uma mensagem enviada em que o status é atualizado: enviada, entregue e lida.

   Incoming webhook: {"messages":[{"from":"1234567890","id":"ABGGhSkIc2B_Ago-sDy5BNm-1gI5","text":{"body":"Hi"},"timestamp":"1529381066","type":"text"}]}
   Incoming webhook: {"statuses":[{"id":"gBGGhSkIc2B_AgkXDygfSDwgG5s","recipient_id":"1234567890","status":"sent","timestamp":"1529381072"}]}
   Incoming webhook: {"statuses":[{"id":"gBGGhSkIc2B_AgkXDygfSDwgG5s","recipient_id":"1234567890","status":"delivered","timestamp":"1529381072"}]}
   Incoming webhook: {"statuses":[{"id":"gBGGhSkIc2B_AgkXDygfSDwgG5s","recipient_id":"1234567890","status":"read","timestamp":"1529381076"}]}