Me gusta tener métricas tangibles asignadas a mis objetivos. Idealmente, estos serían rastreados automáticamente y habría un mecanismo para responsabilizarme.

Uno de mis objetivos este año es publicar más y ser más abierto sobre cómo trabajo y qué encuentro interesante en mis áreas de especialización. ¿Qué métricas puedo adjuntarle? Se trata, sin duda, de varias publicaciones; la otra podría ser cuántas personas los encuentran lo suficientemente interesantes como para seguirme.

Para ver cómo cambian estas métricas con el tiempo, decidí crear un pequeño panel que rastrearía sus valores históricos. Decidí empezar con X/Twitter.

Consulte el panel creado en este tutorial aquí: https://horosin.github.io/metrics-dashboard/

Código completo: https://github.com/horosin/metrics-dashboard

Es posible que hayas escuchado que X restringió el acceso a su API el año pasado. Lo hicieron, pero aún nos permiten acceder a nuestras propias métricas básicas (a diferencia de plataformas como LinkedIn; la culpa es tuya, Microsoft; tengo que raspar para acceder a mis datos).

Lo que vamos a construir

Habrá algunas piezas de software para escribir/configurar:

• El código para recuperar los datos de X.

• Un script que guarda los datos en algún lugar (en este caso, en el archivo JSON en el repositorio de GitHub).

• Programe la ejecución del código periódicamente, todos los días a una hora determinada.

• Panel de control para presentar los datos (archivo HTML simple y único usando chart.js).

• Páginas de GitHub para alojar el panel.

  
  

La mejor parte es que podemos hacer todo eso de forma gratuita (incluido el cálculo).

Configuración

Aplicación Twitter

Configurar una aplicación de Twitter en la sección de desarrolladores es un requisito previo para acceder a la API de Twitter, que es esencial para obtener datos como recuentos de seguidores, publicar tweets o acceder a otros recursos de Twitter mediante programación. Aquí hay una guía paso a paso para comenzar.

1. Navegue al sitio para desarrolladores de Twitter : vaya a Desarrollador de Twitter e inicie sesión con su cuenta de Twitter. Si no tiene una cuenta de Twitter, deberá crear una. Complete la solicitud/regístrese.

   
   

2. Vaya al Panel de desarrollador : acceda a su Panel de desarrollador de Twitter .

   
   

3. Crear un proyecto : haga clic en "Crear proyecto". Se le pedirá que proporcione el nombre del proyecto, una descripción y un caso de uso. Llénelos según las necesidades de su proyecto.

   
   

4. Cree una aplicación dentro de su proyecto : después de crear su proyecto, tendrá la opción de crear una aplicación dentro de este proyecto. Haga clic en "Crear aplicación" y complete los detalles necesarios, como el nombre de la aplicación.

   
   

5. Obtenga sus claves y tokens API : una vez creada su aplicación, se le dirigirá a una página con los detalles de su aplicación, incluida la clave API, la clave secreta API, el token de acceso y el secreto del token de acceso. Guarde estas credenciales de forma segura; los necesitará para autenticar sus solicitudes en la API de Twitter.

Proyecto

Ahora, vayamos a la codificación. Cree un nuevo directorio en su sistema y abra una consola allí.

 mkdir metrics-dashboard cd metrics-dashboard

Asegúrese de inicializar un repositorio de Git y, luego, conectarlo a un proyecto de GitHub.

Inicialice el proyecto node.js e instale algunos paquetes que necesitaremos para autenticarnos con la API.

 npm init npm i dotenv oauth-1.0a crypto

Cree un archivo .env con todas las claves adquiridas de X anteriormente. NO envíe esto al repositorio. Esto es sólo para probar el script localmente.

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

Crea el archivo .gitignore para evitar esto. El siguiente ejemplo contiene otras rutas que nos gustaría ignorar.

 node_modules/ .env .DS_Store dashboard/data/

Obteniendo los datos

Primero, escribiremos un script Node.js llamado para obtener estadísticas de seguidores de la API de su plataforma. Usaremos la biblioteca de recuperación estándar para realizar las llamadas API y oauth-1.0a para autenticarnos con X. Después de recuperar los datos, escribiremos los resultados en un archivo JSON que servirá como nuestra base de datos.

Esto será manejado por un script separado. Para que pueda acceder a la salida, la escribiremos en un archivo de entorno disponible en GitHub Actions.

Estoy usando el nodo 20.

Cree un archivo llamado x_fetch_data.js en la raíz de nuestro proyecto.

 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 probar el script, puede ejecutar:

 GITHUB_OUTPUT=testoutput node x_fetch_data.js

Deberías ver tus métricas X en el resultado, así como en el archivo testoutput :

 metrics={"followers_count":288,"following_count":302,"tweet_count":1381,"listed_count":0,"like_count":591}

Guardar los datos

Para guardar los datos, cree otro script en un archivo x_save_data.js . Tomará el resultado del entorno y lo agregará al ./data/x.json .

Asegúrese de crear este archivo primero y enviarlo al repositorio de git. Debería tener una matriz vacía como contenido.

 []

El script tampoco agrega un registro duplicado si los datos ya se obtuvieron ese día. En su lugar, sobrescribe el anterior.

 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));

Puede probar el script editando el archivo testouput agregando comillas simples alrededor del JSON y luego ejecutando lo siguiente. Edite el archivo según sea necesario, ya que el entorno de GitHub Actions se comporta de manera diferente y no necesita comillas.

 # load output from the previous script set -a; source testoutput; set +a; node x_save_data.js

Acción programada de GitHub

Ahora, creemos un archivo con el código de acción de GitHub. Se ejecutará todos los días a una hora específica y recuperará nuestras métricas. Luego los guardará y los enviará al repositorio.

Guarde el siguiente código en .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

Ejecute la acción manualmente confirmando el código y luego yendo a la sección "Acciones" de su proyecto en GitHub y activándola desde allí.

Panel

Bien, ¿qué tal si presentamos los datos? No quería perder el tiempo con HTML simple, así que le pedí a ChatGPT que lo generara por mí.

Cree un archivo index.html en la carpeta dashboard . No utilizamos el directorio principal de nuestro proyecto para evitar alojar el código de obtención de datos junto con el 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>

Confírmelo en el repositorio.

(opcional) Si desea probarlo localmente, hágalo copiando la carpeta de datos en la carpeta del panel e iniciando un servidor simple dentro de ella.

 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

Implementación del panel en páginas de GitHub

Ahora que tenemos nuestro panel de control, ¡es hora de presentarlo en la web!

Si está utilizando una cuenta gratuita en GitHub, su página debe ser pública, así como todo el repositorio.

Cree un archivo .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

La acción debería implementar la página. Puede encontrar la URL en la configuración de su proyecto GitHub o en la sección Acciones en la salida del flujo de trabajo.

Nuevamente, puedes encontrar el mío aquí: https://horosin.github.io/metrics-dashboard/ .

Resumen

¡Y ahí lo tienes! Un sistema completo y automatizado para realizar un seguimiento de las métricas de sus redes sociales (X), automatizar la obtención de datos, guardar datos históricos y visualizar las tendencias. Con esta configuración, puede ampliar la funcionalidad a otras plataformas y métricas, creando un panel completo para todas sus necesidades analíticas. Déjame saber si es algo sobre lo que te gustaría leer.

Suscríbete a mi perfil ingresando tu dirección de correo electrónico a la izquierda y ¡mantente actualizado con mis artículos!

¡No olvides seguirme en Twitter @ horosin y suscribirte al boletín de mi blog para obtener más consejos e ideas!

Si no tienes Twitter, también puedes seguirme en LinkedIn .