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.

1. Navegue até o site do desenvolvedor do Twitter : Vá para Twitter Developer 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.

   
   

2. Vá para o Painel do Desenvolvedor : Acesse o Painel do Desenvolvedor do Twitter .

   
   

3. Criar um Projeto : 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.

   
   

4. Crie um aplicativo dentro do seu 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.

   
   

5. Obtenha suas chaves e tokens de API : 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.

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 .env com todas as chaves adquiridas do X anteriormente. NÃO envie isso para o repositório. Isso serve apenas para testar o script localmente.

 TWITTER_API_KEY='' TWITTER_API_SECRET='' TWITTER_ACCESS_TOKEN='' TWITTER_ACCESS_SECRET=''

Crie o arquivo .gitignore para evitar isso. O exemplo abaixo contém outros caminhos que gostaríamos de ignorar.

 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 oauth-1.0a para autenticar com X. Após buscar os dados, gravaremos os resultados em um arquivo JSON que servirá como nosso banco de dados.

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 x_fetch_data.js na raiz do nosso projeto.

 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 x_save_data.js . Ele pegará a saída do ambiente e a anexará ao ./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 "[email protected]" 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 index.html na pasta dashboard . 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.

 <!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 @horosin e assinar a newsletter do meu blog para mais dicas e insights!

Se você não tem Twitter, também pode me seguir no LinkedIn .