Projeto prático que responde a evento de webhook com testes
Você irá criar nessa news um projeto práticando que responde a eventos de pull request do github e testá-lo unitáriamente 🔥
Muito bom te ter na news de hoje, conteúdo será prático com pitadas de conceitos sobre webhooks e testes, espero que goste!
Não esqueça de divulgar o conteúdo caso tenha gostado, pois dá muito trabalho e apenas sua divulgação me ajuda muito.
O que é um wehbook 🧐
Imagine o serviço de envio do correios, o sedex.
Webhooks são como o carteiro da sedex.
Em vez de você constantemente verificar a caixa de correio (fazer requisições) para ver se há alguma correspondência (dados ou eventos), você deixa um endereço de entrega (URL) com o carteiro (o serviço que fornece o webhook). Quando há algo novo, o carteiro automaticamente entrega a correspondência na sua porta (envia os dados para a URL configurada).
Isso permite que seus apps recebam informações em tempo real sem a necessidade de fazer verificações constantes. É uma maneira eficiente de manter seus sistemas atualizados sobre o que está acontecendo em outro lugar na web.
Dito isso vamos criar nosso serviço de de resposta aos eventos do github!
Pré requisitos
Necessário que você tenha Node 16.0.0 instalado localmente, conhecimento básico de JavaScript ES6 e um editor de texto.
Crie um repositório previamente para já armazenar o código
No seu terminal digite mkdir nome-app
Vá até o github e clique em criar um repositório
O próprio github irá fornecer um script para que você tenha esse repositório remotamente, apenas siga esse script
Cole esse script dentro da pasta vazia nome-app
dentro do projeto incluia. o.gitignore
As próximas etapas que irei te mostrar deverão ser armazenados nesse repositório.
Proxy da url do webhook
Para desenvolver local você pode utilizar uma URL de proxy de webhook para que você encaminhe webhooks do github para seu computador local.
Neste tutorial você pode utilizar o https://smee.io/.
Nele clique em start a new channel
Copie a URL completa e salve num bloco de notas que será utilizados posteriormente.
Registrando um Github App
Um GitHub App é uma aplicação que pode ser instalada diretamente nas contas e organizações do GitHub para automatizar tarefas e interagir com os repositórios. Esses aplicativos são desenvolvidos por terceiros e podem oferecer uma ampla variedade de funcionalidades, desde integrações com serviços externos até automações complexas no ambiente GitHub.
Para criação do Github app siga esses passos
No canto superior direito do github acesse as configurações da sua conta
Em configurações da sua conta acesse “developer settings“
Só seguir os passos no vídeo e se atentar com essas seguintes configurações que seu Github app deve ter
GitHub App name, insira um nome do seu app mais o seu usuário do Github
Homepage URL, insira url do seu repositório do seu github na qual você criou anteriormente
Verifique se está marcado como Ativo em webhooks
Webhook URL, insira a URL de proxy do webhook que foi configurada no smee.io
Webhook secret, adicione cacarteres aleatórios ou não na qual você se lembre depois.
Em Repository permissions, selecione permissão de leitura e escrita para Pull Requests
Em Webhoks selecione leitura e escrita
No local Where can this GitHub App be installed?, selecione somente nessa conta
No Subscripe to events selecione Pull Request
Por fim clique em Cretae Github App
Criação do código que responde ao webhook
Instalação de dependências
Execute npm init --yes para criar o arquivo package.json
Execute o npm install octokit
Será utilizado aqui o módulo octokit do próprio github para lidar com eventos de webhook que permite solicitações de API.
Execute npm install dotenv
Será utilizado o módulo dotenv para ler o que estiver vindo do arquivo .env que iremos criar mais a frente
Execute npm install smee-client --save-dev
No seu arquivo .gitignore adicione o node modules e o arquivo .env
Armazenamento de informações de credenciais
Crie um arquivo .env no seu projeto
E adicione essas informações nele
APP_ID="12345"WEBHOOK_SECRET="inhascret"PRIVATE_KEY_PATH="./pem/ananeri-webhook-test-app.2023-10-16.private-key.pem"Para buscar o APP_ID siga esses passos
Confgurações da sua conta
Developer Settings
Por fim clique em edit do seu Github App
VOcê achará seu App ID logo no início
Bora codar!
Crie um arquivo js, no meu caso nomeei como app, e importe todas as dependências necessárias no seu arquivo:
import dotenv from 'dotenv'import { App } from 'octokit'import { createNodeMiddleware } from '@octokit/webhooks'import fs from 'fs'import http from 'http'
dotenv.config()
Agora vamos para a criação da interação com o webhook de fato e seu código deverá ficar dessa forma
Por fim crie a função que irá lidar com a chamada do evento de fato
Esse código adiciona um manipulador de eventos que seu código irá chamar posteriormente. Quando este manipulador de eventos é chamado, ele registrará o evento no console. Em seguida, utilizará a API REST do GitHub para adicionar um comentário à solicitação de pull que desencadeou o evento.
O restante do código será o responsável de criar uma estrutura para receber notificações em tempo real sobre eventos no GitHub, especialmente quando novas solicitações de pull são abertas.
No arquivo package.json crie o script de execução do código e do teste
TERMINEI SÓ FALTA TESTAR
Crie o teste unitário que valide esse código, para executá-lo só digitar npm run test
Executando o projeto 🔥
Entre no seu Github App através desse caminho settings > developer settings > Github Apps ao lado do seu Github App clique em editar
Clique em public page e instale apenas o repositório que você colocou na URL
Agora veja a execução na prática
Executando os comandos
npx smee -u https://smee.io/eck6YNQmOaZYztb -t http://localhost:3000/api/webhooknpm run server
Deverá aparecer as PRs criadas no console
No vídeo mostro na prática, porém irá mostrar erros que no meu caso é por conta do proxy ter expirado
Espero que tenha gostado, deixe nos comentários seu feedback e compartilhe com sua rede!
Repositório completo do código desenvolvido → https://github.com/ananeridev/github-webhook
Dicas para a semana 🔥
Curso
Semana JS Expert do Erick Wendel GRATUITA→ https://cursos.erickwendel.com.br/semana-javascript-expert/cadastro/v3
Música
Amo começar a semana do 220v