Como depuramos os bots do FB Messenger localmente

Uma história baseada em eventos reais

Mike Nikles Blocked Desbloquear Seguir Seguindo 20 de março de 2017

Começando

Isso é basicamente o que fizemos para obter o primeiro bot de conversação on-line (veja o Guia Rápido do Facebook):

  1. Crie um aplicativo e uma página do Facebook.
  2. Obtenha um token de acesso à página.
  3. Implemente algum tipo de aplicativo Node.js no Heroku.
  4. Receba e envie mensagens.

Não há necessidade de obter o seu bot aprovado nesta fase, basta colocá-lo em prática e você está pronto para ir.

É ótimo, até que não seja

Que sucesso uma vez que você abra o FB Messenger e fale com o seu bot. Parece tão real, é ótimo. Você diz a alguns amigos para instalar o bot, eles fazem e começam a brincar com ele.

Seus amigos enviam alguns comentários, solicitações de recursos e relatam um bug ou dois. Insetos? Não é nada demais, aqui está o que você faz:

  1. heroku logs -t
  2. Encontre o rastreamento da pilha do bug, leia com atenção, pense, leia de novo.
  3. Olhe para o código, faça um palpite sobre o que causou o bug.
  4. Para tornar a depuração mais fácil, adicione um console.log('That thing that was undefined is now: ', thing)
  5. git commit -am "Fix that bug" && git push heroku bugfix:master
  6. Tente reproduzir o bug. Repita os passos 1 a 6 até que o erro seja esmagado.

Bastante direto, apenas meio irritante e bastante demorado. Então, ei, podemos fazer melhor! Eu quero que você pense sobre o seu fluxo de trabalho por um minuto e anote quanto tempo leva para encontrar um bug até a implantação de uma correção, supondo que você conserte o bug na primeira tentativa.

Diga Olá para o VS Code, ngrok e depuração do bot de chat local

Lá vai você, o título do capítulo contém todos os ingredientes secretos que você precisa para fazê-lo funcionar. Mais abaixo.

Esta é a carne deste post do blog, esteja pronto!

Requisitos

Isto é baseado em nossa configuração, sua milhagem pode variar, mas você terá a essência disso.

Configurar um túnel

 # Iniciar um túnel ngrok 
$ ngrok http <porta>

ngrok http 5000

O que acabou de acontecer? ngrok fez sua mágica. Ele criou um subdomínio público ngrok.io que encaminha o tráfego para localhost:3000 , tanto em HTTP quanto em HTTPS.

Atualize seu aplicativo do Facebook

Em algum momento, quando você criou seu bot, você tinha que especificar um webhook de assinatura de página "URL de retorno". Ele requer uma conexão HTTPS segura acessada publicamente, provavelmente algo como https://my-bot.herokuapp.com/webhook . Vamos descobrir isso nas configurações do seu aplicativo do Facebook e, em seguida, alterar o "URL de retorno" para o URL do ngrok que você vê no seu console. A configuração final é assim:

Sua página de configurações do aplicativo FB -> PRODUTOS -> Webhooks

Certifique-se de que seu código bot rode localmente antes de configurar o acima; O Facebook validará o endpoint.

Neste ponto, você deve ser capaz de testar seu bot no Facebook Messenger e ver a saída de log em seu host local.

Lembra quando eu pedi para você anotar quanto tempo você demora para encontrar um bug para implantar uma correção? Aqui está o novo fluxo de trabalho:

  1. <não é mais necessário>
  2. Encontre o rastreamento da pilha do bug, leia com atenção, pense, leia de novo.
  3. Olhe para o código, faça um palpite sobre o que causou o bug.
  4. Para tornar a depuração mais fácil, adicione um console.log('That thing that was undefined is now: ', thing)
  5. <não é mais necessário>
  6. Tente reproduzir o bug. Repita os passos 1 a 6 até que o erro seja esmagado.

Nós cortamos os passos 1 e 5. Vamos melhorar ainda mais esse fluxo de trabalho, certo?

Depuração no Código VS

Conheça o VS Code da Microsoft. Mais especificamente, conheça sua visualização Debug:

Código VS – Debug View Icon

Depois de ter mudado para ele, você verá isso na parte superior da exibição:

Código VS – Debug View

Clique na roda dentada para criar um arquivo launch.json . Provavelmente, é tudo o que você precisa para começar. Feito isso, clique no triângulo verde para iniciar uma sessão de depuração.

Abra seu arquivo de escolha e defina pontos de interrupção como faria no seu navegador ou em qualquer outra ferramenta de depuração.

Quando você envia mensagens do FB Messenger para o seu bot, o depurador irá parar nos pontos de interrupção especificados, você pode inspecionar as variáveis, olhar para a pilha de chamadas, etc.

Conclusão

O que costumava levar vários minutos para depurar e implantar código para um bot do FB Messenger agora se resume a:

  1. Reproduza o bug.
  2. Depure o código, passo a passo.

Em outras palavras, você pode depurar seu bot do Facebook Messenger em tempo real.

Nota : O comando ngrok cria uma nova URL toda vez que inicia. Portanto, certifique-se de atualizar o webhook do aplicativo FB de acordo.

Atualização : É possível obter uma conta ngrok paga que permita subdomínios personalizados que não mudam ao reiniciar o ngrok. Obrigado por MOUSSAOUI abderahman por apontar nos comentários!

Se você souber de outras maneiras de fazer isso ou tiver dúvidas ou comentários, sinta-se à vontade para publicá-las abaixo.