Gosto de ter métricas tangíveis atribuídas aos meus objetivos. Idealmente, estes seriam rastreados automaticamente e haveria um mecanismo para me responsabilizar.  Um dos meus objetivos este ano é publicar mais e ser mais aberto sobre como trabalho e o que acho interessante nas minhas áreas de atuação. Que métricas posso anexar a ele? Uma é certamente uma série de postagens; a outra poderia ser quantas pessoas os acham interessantes o suficiente para me seguir.  Para ver como essas métricas mudam ao longo do tempo, decidi criar um pequeno painel que rastrearia seus valores históricos. Decidi começar com o X/Twitter.  Confira o painel criado neste tutorial aqui:  https://horosin.github.io/metrics-dashboard/  Código completo: https://github.com/horosin/metrics-dashboard  Você deve ter ouvido falar que o X restringiu o acesso à sua API no ano passado. Sim, mas ainda nos permitem acessar nossas próprias métricas básicas (ao contrário de plataformas como o LinkedIn - que vergonha, Microsoft; tenho que raspar para acessar meus dados).  O que vamos construir  Haverá alguns softwares para escrever/configurar:  O código para buscar os dados do X.  Um script salvando os dados em algum lugar (neste caso, no arquivo JSON no repositório GitHub).  Programe para executar o código periodicamente - todos os dias em um determinado horário.  Painel para apresentar os dados (arquivo HTML simples e único usando chart.js).  Páginas do GitHub para hospedar o painel.  A melhor parte é que podemos fazer tudo isso de graça (incluindo computação).  Configurar  Aplicativo Twitter  Configurar um aplicativo do Twitter na seção de desenvolvedores é um pré-requisito para acessar a API do Twitter, que é essencial para buscar dados como contagens de seguidores, postar tweets ou acessar outros recursos do Twitter de forma programática. Aqui está um guia passo a passo para você começar.    : Vá para   e faça login com sua conta do Twitter. Se você não possui uma conta no Twitter, precisará criar uma. Preencha a inscrição/inscreva-se. Navegue até o site do desenvolvedor do Twitter Twitter Developer    : Acesse o   . Vá para o Painel do Desenvolvedor Painel do Desenvolvedor do Twitter    : Clique em “Criar Projeto”. Você será solicitado a fornecer um nome do projeto, uma descrição e um caso de uso. Preencha-os de acordo com as necessidades do seu projeto. Criar um Projeto    : após criar seu projeto, você terá a opção de criar um aplicativo dentro deste projeto. Clique em “Criar aplicativo” e preencha os dados necessários, como o nome do aplicativo. Crie um aplicativo dentro do seu projeto    : assim que seu aplicativo for criado, você será direcionado para uma página com os detalhes do seu aplicativo, incluindo a chave de API, a chave secreta de API, o token de acesso e o segredo do token de acesso. Salve essas credenciais com segurança; você precisará deles para autenticar suas solicitações na API do Twitter. Obtenha suas chaves e tokens de API  Projeto  Agora, vamos à codificação. Crie um novo diretório em seu sistema e abra um console lá.   mkdir metrics-dashboard cd metrics-dashboard  Certifique-se de inicializar um repositório Git e, posteriormente, conectá-lo a um projeto GitHub.  Inicialize o projeto node.js e instale alguns pacotes que precisaremos para autenticar com a API.   npm init npm i dotenv oauth-1.0a crypto  Crie um arquivo   com todas as chaves adquiridas do X anteriormente. NÃO envie isso para o repositório. Isso serve apenas para testar o script localmente. .env   TWITTER_API_KEY='' TWITTER_API_SECRET='' TWITTER_ACCESS_TOKEN='' TWITTER_ACCESS_SECRET=''  Crie o arquivo   para evitar isso. O exemplo abaixo contém outros caminhos que gostaríamos de ignorar. .gitignore   node_modules/ .env .DS_Store dashboard/data/  Buscando os dados  Primeiro, escreveremos um script Node.js chamado para buscar estatísticas de seguidores na API da sua plataforma. Usaremos a biblioteca fetch padrão para fazer as chamadas de API e   para autenticar com X. Após buscar os dados, gravaremos os resultados em um arquivo JSON que servirá como nosso banco de dados. oauth-1.0a  Isso será tratado por um script separado. Para tornar a saída acessível a ele, iremos gravá-la em um arquivo de ambiente disponível em GitHub Actions.  Estou usando o nó 20.  Crie um arquivo chamado   na raiz do nosso projeto. x_fetch_data.js   require('dotenv').config(); const OAuth = require('oauth-1.0a'); const crypto = require('crypto'); const fs = require('fs'); // Initialize OAuth 1.0a const oauth = OAuth({ consumer: { key: process.env.TWITTER_API_KEY, // Read from environment variable secret: process.env.TWITTER_API_SECRET // Read from environment variable }, signature_method: 'HMAC-SHA1', hash_function(base_string, key) { return crypto.createHmac('sha1', key).update(base_string).digest('base64'); } }); const token = { key: process.env.TWITTER_ACCESS_TOKEN, // Read from environment variable secret: process.env.TWITTER_ACCESS_SECRET // Read from environment variable }; const url = 'https://api.twitter.com/2/users/me?user.fields=public_metrics'; const fetchTwitterFollowerCount = async () => { const requestData = { url, method: 'GET', }; // OAuth header const headers = oauth.toHeader(oauth.authorize(requestData, token)); headers['User-Agent'] = 'v2UserLookupJS'; const response = await fetch(url, { method: 'GET', headers }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); console.log(data); // Extract the metrics const metrics = data?.data?.public_metrics; // Write the metrics to the environment file fs.appendFileSync(process.env.GITHUB_OUTPUT, `METRICS=${JSON.stringify(metrics)}\n`); }; fetchTwitterFollowerCount().catch(err => console.error(err));  Para testar o script, você pode executar:   GITHUB_OUTPUT=testoutput node x_fetch_data.js  Você deverá ver suas métricas X na saída, bem como no arquivo   : testoutput   metrics={"followers_count":288,"following_count":302,"tweet_count":1381,"listed_count":0,"like_count":591}  Salvando os dados  Para salvar os dados, crie outro script em um arquivo   . Ele pegará a saída do ambiente e a anexará ao   . x_save_data.js ./data/x.json  Certifique-se de criar este arquivo primeiro e enviá-lo para o repositório git. Deve ter um array vazio como conteúdo.   []  O script também não adiciona um registro duplicado se os dados já tiverem sido buscados naquele dia. Em vez disso, ele substitui o antigo.   const fs = require('fs'); // Parse the JSON string from the environment variable const metrics = JSON.parse(process.env.METRICS); const path = './data/x.json'; const now = new Date(); const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`; let data = []; if (fs.existsSync(path)) { data = JSON.parse(fs.readFileSync(path)); } const todayIndex = data.findIndex(entry => entry.date === today); if (todayIndex > -1) { data[todayIndex] = { date: today, ...metrics }; } else { data.push({ date: today, ...metrics }); } fs.writeFileSync(path, JSON.stringify(data, null, 2));  Você pode testar o script editando o arquivo testouput adicionando aspas simples ao redor do JSON e executando o seguinte. Edite o arquivo conforme necessário, pois o ambiente GitHub Actions se comporta de maneira diferente e não precisa de aspas.   # load output from the previous script set -a; source testoutput; set +a; node x_save_data.js  Ação agendada do GitHub  Agora, vamos criar um arquivo com o código de ação do GitHub. Ele será executado todos os dias em um horário especificado e buscará nossas métricas. Em seguida, ele irá salvá-los e enviá-los para o repositório.  Salve o código a seguir em   . .github/workflows/fetch_x_data.yml   name: Fetch X Data on: schedule: # Runs at 4 AM UTC - cron: '0 4 * * *' workflow_dispatch: # This line enables manual triggering of the action jobs: fetch_data: runs-on: ubuntu-latest permissions: contents: write pull-requests: write steps: - name: Check out the repository uses: actions/checkout@v4 - name: Set up Node.js uses: actions/setup-node@v4 with: node-version: "20" - name: Install dependencies run: npm install - name: Fetch Data from Platform X id: fetch_data run: node x_fetch_data.js env: TWITTER_API_KEY: ${{ secrets.TWITTER_API_KEY }} TWITTER_API_SECRET: ${{ secrets.TWITTER_API_SECRET }} TWITTER_ACCESS_TOKEN: ${{ secrets.TWITTER_ACCESS_TOKEN }} TWITTER_ACCESS_SECRET: ${{ secrets.TWITTER_ACCESS_SECRET }} - name: Save data run: node x_save_data.js env: METRICS: ${{ steps.fetch_data.outputs.METRICS }} - name: Commit and push if there's changes run: | git config --global user.email "action@github.com" git config --global user.name "GitHub Action" git add data/x.json git commit -m "Update data for Platform X" || exit 0 # exit 0 if no changes git push  Execute a ação manualmente confirmando o código e indo para a seção “Ações” do seu projeto no GitHub e acionando-o a partir daí.  Painel  Ok, que tal apresentar os dados? Eu não queria mexer com HTML simples, então pedi ao ChatGPT para gerá-lo para mim.  Crie um arquivo   na pasta   . Não estamos usando o diretório principal do nosso projeto para evitar hospedar o código de busca de dados junto com o HTML. index.html dashboard   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Twitter Dashboard</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; } .chart-container { width: 80%; max-width: 1000px; } canvas { max-width: 100%; } h1 { text-align: center; margin-top: 20px; } h2 { text-align: center; margin-top: 20px; } </style> </head> <body> <h1>Twitter Dashboard</h1> <h2>Number of Followers</h2> <div class="chart-container"> <canvas id="followersChart"></canvas> </div> <h2>Number of Tweets</h2> <div class="chart-container"> <canvas id="tweetsChart"></canvas> </div> <script> fetch('data/x.json') .then(response => response.json()) .then(data => { const dates = data.map(item => item.date); const followers = data.map(item => item.followers_count); const tweets = data.map(item => item.tweet_count); const minFollowers = Math.min(...followers) - 100; const minTweets = Math.min(...tweets) - 100; const followersCtx = document.getElementById('followersChart').getContext('2d'); const tweetsCtx = document.getElementById('tweetsChart').getContext('2d'); new Chart(followersCtx, { type: 'line', data: { labels: dates, datasets: [{ label: 'Followers', data: followers, backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor: 'rgba(54, 162, 235, 1)', borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: false, min: minFollowers } } } }); new Chart(tweetsCtx, { type: 'line', data: { labels: dates, datasets: [{ label: 'Tweets', data: tweets, backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255, 99, 132, 1)', borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: false, min: minTweets } } } }); }); </script> </body> </html>  Envie-o para o repositório.  (opcional) Se quiser testá-lo localmente, copie a pasta de dados para a pasta do painel e inicie um servidor simples dentro dela.   cp -r data dashboard/ cd dashboard # start server with Python if you have it installed (version 3) # otherwise, use other way eg https://gist.github.com/willurd/5720255 python -m http.server 8000  Implantação de painel em páginas do GitHub  Agora que temos nosso dashboard, é hora de apresentá-lo à web!  Se você estiver usando uma conta gratuita no GitHub, sua página precisa ser pública, assim como todo o repositório.  Crie um arquivo   . .github/workflows/deploy_dashboard.yml   name: Deploy to GitHub Pages on: schedule: # redeploy after data update - cron: '0 5 * * *' push: branches: - main workflow_dispatch: # This line enables manual triggering of the action permissions: contents: read pages: write id-token: write # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. concurrency: group: "pages" cancel-in-progress: false jobs: deploy: permissions: pages: write # to deploy to Pages id-token: write # to verify the deployment originates from an appropriate source environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Setup Pages uses: actions/configure-pages@v4 - name: Copy data to dashboard folder run: cp -r data dashboard/ - name: Update pages artifact uses: actions/upload-pages-artifact@v3 with: path: dashboard/ - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v4 # or specific "vX.XX" version tag for this action  A ação deve implantar a página. Você pode encontrar a URL nas configurações do seu projeto GitHub ou na seção Ações na saída do fluxo de trabalho.  Novamente, você pode encontrar o meu aqui:   . https://horosin.github.io/metrics-dashboard/  Resumo  E aí está! Um sistema completo e automatizado para rastrear suas métricas de mídia social (X), automatizar a busca de dados, salvar dados históricos e visualizar as tendências. Com esta configuração, você pode estender a funcionalidade para outras plataformas e métricas, criando um painel abrangente para todas as suas necessidades analíticas. Deixe-me saber se é algo que você gostaria de ler.  Assine meu perfil preenchendo seu endereço de e-mail à esquerda e fique atualizado com meus artigos!  Não se esqueça de me seguir no Twitter   e assinar a   do meu blog para mais dicas e insights! @horosin newsletter  Se você não tem Twitter, também pode me seguir no   . LinkedIn

2022 - HackerNoon Contributor of the Year - Cicd

Join free programming newsletter!

Nominated for 2022 - HackerNoon Contributor of the Year - Cicd

Software Team Lead

Este áudio é produzido no idioma original da história!

Como criar um painel para rastrear estatísticas de seguidores do Twitter/X com APIs e ações do GitHub

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps