J'aime que des mesures tangibles soient attribuées à mes objectifs. Idéalement, ceux-ci seraient automatiquement suivis et il y aurait un mécanisme pour me tenir responsable.

L’un de mes objectifs cette année est de publier davantage et d’être plus ouvert sur ma façon de travailler et sur ce que je trouve intéressant dans mes domaines d’expertise. Quelles métriques puis-je y attacher ? L’un est certainement un certain nombre de messages ; l’autre pourrait être le nombre de personnes qui les trouvent suffisamment intéressantes pour me suivre.

Pour voir comment ces métriques évoluent au fil du temps, j'ai décidé de créer un petit tableau de bord qui suivrait leurs valeurs historiques. J'ai décidé de commencer avec X/Twitter.

Consultez le tableau de bord créé dans ce tutoriel ici : https://horosin.github.io/metrics-dashboard/

Code complet : https://github.com/horosin/metrics-dashboard

Vous avez peut-être entendu dire que X avait restreint l'accès à son API l'année dernière. Ils l'ont fait, mais ils nous permettent toujours d'accéder à nos propres métriques de base (contrairement à des plateformes comme LinkedIn - honte à vous Microsoft ; je dois gratter pour accéder à mes données).

Ce que nous allons construire

Il y aura quelques logiciels à écrire/configurer :

• Le code pour récupérer les données de X.

• Un script enregistrant les données quelque part (dans ce cas, dans le fichier JSON du référentiel GitHub).

• Planifiez l'exécution du code périodiquement - chaque jour à une heure donnée.

• Tableau de bord pour présenter les données (simple fichier HTML unique utilisant chart.js).

• Pages GitHub pour héberger le tableau de bord.

  
  

Le meilleur, c’est que nous pouvons faire tout cela gratuitement (y compris le calcul).

Installation

Application Twitter

La configuration d'une application Twitter dans la section développeur est une condition préalable pour accéder à l'API de Twitter, qui est essentielle pour récupérer des données telles que le nombre de followers, publier des tweets ou accéder à d'autres ressources Twitter par programme. Voici un guide étape par étape pour vous aider à démarrer.

1. Accédez au site des développeurs Twitter : accédez à Twitter Developer et connectez-vous avec votre compte Twitter. Si vous n'avez pas de compte Twitter, vous devrez en créer un. Remplissez la demande/inscrivez-vous.

   
   

2. Accédez au tableau de bord du développeur : accédez à votre tableau de bord du développeur Twitter .

   
   

3. Créer un projet : Cliquez sur "Créer un projet". Il vous sera demandé de fournir un nom de projet, une description et un cas d'utilisation. Remplissez-les en fonction des besoins de votre projet.

   
   

4. Créez une application dans votre projet : Après avoir créé votre projet, vous aurez la possibilité de créer une application dans ce projet. Cliquez sur « Créer une application » et remplissez les détails nécessaires comme le nom de l'application.

   
   

5. Obtenez vos clés et jetons API : une fois votre application créée, vous serez dirigé vers une page contenant les détails de votre application, y compris la clé API, la clé secrète API, le jeton d'accès et le secret du jeton d'accès. Enregistrez ces informations d'identification en toute sécurité ; vous en aurez besoin pour authentifier vos demandes auprès de l'API Twitter.

Projet

Passons maintenant au codage. Créez un nouveau répertoire sur votre système et ouvrez-y une console.

 mkdir metrics-dashboard cd metrics-dashboard

Assurez-vous d'initialiser un référentiel Git, puis de le connecter à un projet GitHub.

Initialisez le projet node.js et installez certains packages dont nous aurons besoin pour nous authentifier auprès de l'API.

 npm init npm i dotenv oauth-1.0a crypto

Créez un fichier .env avec toutes les clés acquises auprès de X auparavant. NE PAS valider cela dans le référentiel. Il s'agit uniquement de tester le script localement.

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

Créez le fichier .gitignore pour éviter cela. L'exemple ci-dessous contient d'autres chemins que nous voudrions ignorer.

 node_modules/ .env .DS_Store dashboard/data/

Récupérer les données

Tout d'abord, nous allons écrire un script Node.js appelé pour récupérer les statistiques des abonnés à partir de l'API de votre plateforme. Nous utiliserons la bibliothèque de récupération standard pour effectuer les appels API et oauth-1.0a pour nous authentifier auprès de X. Après avoir récupéré les données, nous écrirons les résultats dans un fichier JSON qui servira de base de données.

Cela sera géré par un script séparé. Pour lui rendre la sortie accessible, nous l'écrirons dans un fichier d'environnement disponible dans GitHub Actions.

J'utilise le nœud 20.

Créez un fichier appelé x_fetch_data.js à la racine de notre projet.

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

Pour tester le script, vous pouvez exécuter :

 GITHUB_OUTPUT=testoutput node x_fetch_data.js

Vous devriez voir vos métriques X dans la sortie, ainsi que dans le fichier testoutput :

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

Sauvegarde des données

Pour enregistrer les données, créez un autre script dans un fichier x_save_data.js . Il prendra la sortie de l'environnement et l'ajoutera au ./data/x.json .

Assurez-vous d'abord de créer ce fichier et de le valider dans le référentiel git. Il devrait avoir un tableau vide comme contenu.

 []

Le script n'ajoute pas non plus d'enregistrement en double si les données ont déjà été récupérées ce jour-là. Il écrase l'ancien à la place.

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

Vous pouvez tester le script en modifiant le fichier testouput en ajoutant des guillemets simples autour du JSON, puis en exécutant ce qui suit. Modifiez le fichier si nécessaire, car l'environnement GitHub Actions se comporte différemment et n'a pas besoin des guillemets.

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

Action GitHub planifiée

Maintenant, créons un fichier avec le code d'action GitHub. Il s'exécutera tous les jours à une heure spécifiée et récupérera nos métriques. Il les enregistrera ensuite et les validera dans le référentiel.

Enregistrez le code suivant sous .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

Exécutez l'action manuellement en validant le code, puis en accédant à la section « Actions » de votre projet sur GitHub et en la déclenchant à partir de là.

Tableau de bord

D'accord, que diriez-vous de présenter les données ? Je ne voulais pas m'embêter avec du HTML simple, j'ai donc demandé à ChatGPT de le générer pour moi.

Créez un fichier index.html dans le dossier dashboard . Nous n'utilisons pas le répertoire principal de notre projet afin d'éviter d'héberger le code de récupération de données à côté du 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>

Validez-le dans le référentiel.

(facultatif) Si vous souhaitez le tester localement, faites-le en copiant le dossier de données dans le dossier du tableau de bord et en lançant un simple serveur à l'intérieur.

 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

Déploiement du tableau de bord sur les pages GitHub

Maintenant que nous avons notre tableau de bord, il est temps de le présenter au web !

Si vous utilisez un compte gratuit sur GitHub, votre page doit être publique, ainsi que l'ensemble du référentiel.

Créez un fichier .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

L'action doit déployer la page. Vous pouvez trouver l'URL dans les paramètres de votre projet GitHub ou dans la section Actions de la sortie du workflow.

Encore une fois, vous pouvez trouver le mien ici : https://horosin.github.io/metrics-dashboard/ .

Résumé

Et voila! Un système complet et automatisé pour suivre vos métriques de médias sociaux (X), automatiser la récupération de données, enregistrer les données historiques et visualiser les tendances. Avec cette configuration, vous pouvez étendre les fonctionnalités à d'autres plates-formes et métriques, créant ainsi un tableau de bord complet pour tous vos besoins analytiques. Faites-moi savoir si c'est quelque chose que vous aimeriez lire.

Abonnez-vous à mon profil en renseignant votre adresse email à gauche, et soyez au courant de mes articles !

N'oubliez pas de me suivre sur Twitter @horosin et de vous abonner à la newsletter de mon blog pour plus de conseils et d'informations !

Si vous n'avez pas Twitter, vous pouvez également me suivre sur LinkedIn .