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.    : vaya a   e inicie sesión con su cuenta de Twitter. Si no tiene una cuenta de Twitter, deberá crear una. Complete la solicitud/regístrese. Navegue al sitio para desarrolladores de Twitter Desarrollador de Twitter    : acceda a su   . Vaya al Panel de desarrollador Panel de desarrollador de Twitter    : 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. Crear un 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. Cree una aplicación dentro de su proyecto    : 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. Obtenga sus claves y tokens API  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   con todas las claves adquiridas de X anteriormente. NO envíe esto al repositorio. Esto es sólo para probar el script localmente. .env   TWITTER_API_KEY='' TWITTER_API_SECRET='' TWITTER_ACCESS_TOKEN='' TWITTER_ACCESS_SECRET=''  Crea el archivo   para evitar esto. El siguiente ejemplo contiene otras rutas que nos gustaría ignorar. .gitignore   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   para autenticarnos con X. Después de recuperar los datos, escribiremos los resultados en un archivo JSON que servirá como nuestra base de datos. oauth-1.0a  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   en la raíz de nuestro proyecto. 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 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   . Tomará el resultado del entorno y lo agregará al   . x_save_data.js ./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 "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  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   en la carpeta   . No utilizamos el directorio principal de nuestro proyecto para evitar alojar el código de obtención de datos junto con el 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>  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   y suscribirte al   de mi blog para obtener más consejos e ideas! @ horosin boletín  Si no tienes Twitter, también puedes seguirme en   . 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 audio es producido en el idioma original de la historia!

Cómo crear un panel para realizar un seguimiento de las estadísticas de sus seguidores de Twitter/X con API y acciones de GitHub

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Una breve introducción a la teoría del cerebro de Boltzmann

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Una breve introducción a la teoría del cerebro de Boltzmann

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps