Ich möchte, dass meine Ziele mit konkreten Messgrößen verknüpft werden. Im Idealfall werden diese automatisch verfolgt und es gibt einen Mechanismus, der mich zur Rechenschaft zieht.

Eines meiner Ziele für dieses Jahr ist, mehr zu veröffentlichen und offener darüber zu sprechen, wie ich arbeite und was ich in meinen Fachgebieten interessant finde. Welche Maßstäbe kann ich daran ansetzen? Ein Maßstab ist sicherlich die Anzahl der Beiträge; ein anderer könnte sein, wie viele Leute sie interessant genug finden, um mir zu folgen.

Um zu sehen, wie sich diese Kennzahlen im Laufe der Zeit ändern, habe ich beschlossen, ein kleines Dashboard zu erstellen, das ihre historischen Werte verfolgt. Ich habe beschlossen, mit X/Twitter zu beginnen.

Sehen Sie sich hier das in diesem Tutorial erstellte Dashboard an: https://horosin.github.io/metrics-dashboard/

Vollständiger Code: https://github.com/horosin/metrics-dashboard

Sie haben vielleicht gehört, dass X im letzten Jahr den Zugriff auf seine API eingeschränkt hat. Das haben sie zwar getan, aber sie erlauben uns immer noch, auf unsere eigenen grundlegenden Kennzahlen zuzugreifen (im Gegensatz zu Plattformen wie LinkedIn – Schande über Sie, Microsoft; ich muss scrapen, um auf meine Daten zuzugreifen).

Was wir bauen werden

Es müssen einige Softwareteile geschrieben/konfiguriert werden:

• Der Code zum Abrufen der Daten von X.

• Ein Skript, das die Daten irgendwo speichert (in diesem Fall in der JSON-Datei im GitHub-Repository).

• Planen Sie die regelmäßige Ausführung des Codes – jeden Tag zu einer bestimmten Zeit.

• Dashboard zur Darstellung der Daten (einfache einzelne HTML-Datei mit chart.js).

• GitHub Pages zum Hosten des Dashboards.

  
  

Das Beste daran ist, dass wir das alles kostenlos machen können (einschließlich der Rechenleistung).

Aufstellen

Twitter-Anwendung

Das Einrichten einer Twitter-Anwendung im Entwicklerbereich ist Voraussetzung für den Zugriff auf die API von Twitter, die für das Abrufen von Daten wie Follower-Zahlen, das Posten von Tweets oder den programmgesteuerten Zugriff auf andere Twitter-Ressourcen unerlässlich ist. Hier finden Sie eine Schritt-für-Schritt-Anleitung für den Einstieg.

1. Navigieren Sie zur Twitter-Entwicklerseite : Gehen Sie zu Twitter Developer und melden Sie sich mit Ihrem Twitter-Konto an. Wenn Sie kein Twitter-Konto haben, müssen Sie eines erstellen. Füllen Sie die Bewerbung aus bzw. registrieren Sie sich.

   
   

2. Gehen Sie zum Entwickler-Dashboard : Greifen Sie auf Ihr Twitter-Entwickler-Dashboard zu.

   
   

3. Projekt erstellen : Klicken Sie auf „Projekt erstellen“. Sie werden aufgefordert, einen Projektnamen, eine Beschreibung und einen Anwendungsfall anzugeben. Füllen Sie diese entsprechend den Anforderungen Ihres Projekts aus.

   
   

4. Erstellen Sie eine App innerhalb Ihres Projekts : Nachdem Sie Ihr Projekt erstellt haben, haben Sie die Möglichkeit, eine App innerhalb dieses Projekts zu erstellen. Klicken Sie auf „App erstellen“ und geben Sie die erforderlichen Details wie den App-Namen ein.

   
   

5. Holen Sie sich Ihre API-Schlüssel und Token : Sobald Ihre App erstellt ist, werden Sie auf eine Seite mit den Details Ihrer App weitergeleitet, einschließlich API-Schlüssel, geheimem API-Schlüssel, Zugriffstoken und geheimem Zugriffstoken. Speichern Sie diese Anmeldeinformationen sicher; Sie benötigen sie, um Ihre Anfragen an die Twitter-API zu authentifizieren.

Projekt

Nun können wir mit dem Programmieren beginnen. Erstellen Sie ein neues Verzeichnis auf Ihrem System und öffnen Sie dort eine Konsole.

 mkdir metrics-dashboard cd metrics-dashboard

Stellen Sie sicher, dass Sie ein Git-Repository initialisieren und es später mit einem GitHub-Projekt verbinden.

Initialisieren Sie das node.js-Projekt und installieren Sie einige Pakete, die wir zur Authentifizierung bei der API benötigen.

 npm init npm i dotenv oauth-1.0a crypto

Erstellen Sie eine .env Datei mit allen zuvor von X erhaltenen Schlüsseln. Übertragen Sie diese NICHT in das Repository. Dies dient nur zum lokalen Testen des Skripts.

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

Erstellen Sie die Datei .gitignore , um dies zu vermeiden. Das folgende Beispiel enthält andere Pfade, die wir ignorieren möchten.

 node_modules/ .env .DS_Store dashboard/data/

Abrufen der Daten

Zuerst schreiben wir ein Node.js-Skript, das Follower-Statistiken von der API Ihrer Plattform abruft. Wir verwenden die Standard-Fetch-Bibliothek für die API-Aufrufe und oauth-1.0a für die Authentifizierung mit X. Nach dem Abrufen der Daten schreiben wir die Ergebnisse in eine JSON-Datei, die als unsere Datenbank dient.

Dies wird von einem separaten Skript erledigt. Um die Ausgabe für dieses Skript zugänglich zu machen, schreiben wir sie in eine Umgebungsdatei, die in GitHub Actions verfügbar ist.

Ich verwende Knoten 20.

Erstellen Sie im Stammverzeichnis unseres Projekts eine Datei namens 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));

Um das Skript zu testen, können Sie Folgendes ausführen:

 GITHUB_OUTPUT=testoutput node x_fetch_data.js

Sie sollten Ihre X-Metriken in der Ausgabe sowie in der testoutput sehen:

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

Speichern der Daten

Um die Daten zu speichern, erstellen Sie ein weiteres Skript in einer Datei x_save_data.js . Es übernimmt die Ausgabe aus der Umgebung und hängt sie an ./data/x.json an.

Stellen Sie sicher, dass Sie diese Datei zuerst erstellen und in das Git-Repository übertragen. Der Inhalt sollte ein leeres Array sein.

 []

Das Skript fügt auch keinen doppelten Datensatz hinzu, wenn die Daten an diesem Tag bereits abgerufen wurden. Stattdessen überschreibt es den alten.

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

Sie können das Skript testen, indem Sie die Testausgabedatei bearbeiten, indem Sie einfache Anführungszeichen um das JSON setzen und dann Folgendes ausführen. Bearbeiten Sie die Datei nach Bedarf, da sich die GitHub Actions-Umgebung anders verhält und die Anführungszeichen nicht benötigt.

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

Geplante GitHub-Aktion

Erstellen wir nun eine Datei mit GitHub-Aktionscode. Sie wird jeden Tag zu einer bestimmten Zeit ausgeführt und ruft unsere Metriken ab. Anschließend werden sie gespeichert und in das Repository übertragen.

Speichern Sie den folgenden Code unter .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

Führen Sie die Aktion manuell aus, indem Sie den Code festschreiben, dann zum Abschnitt „Aktionen“ Ihres Projekts auf GitHub gehen und sie von dort aus auslösen.

Armaturenbrett

Okay, wie wäre es mit der Präsentation der Daten? Ich wollte mich nicht mit einfachem HTML herumschlagen, also habe ich ChatGPT gebeten, es für mich zu generieren.

Erstellen Sie eine Datei index.html im dashboard Ordner. Wir verwenden nicht das Hauptverzeichnis unseres Projekts, um zu vermeiden, dass der Datenabrufcode zusammen mit dem HTML gehostet wird.

 <!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>

Übertragen Sie es in das Repository.

(optional) Wenn Sie es lokal testen möchten, kopieren Sie den Datenordner in den Dashboard-Ordner und starten Sie darin einen einfachen Server.

 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

Dashboard-Bereitstellung auf GitHub Pages

Jetzt, da wir unser Dashboard haben, ist es Zeit, es im Web zu präsentieren!

Wenn Sie ein kostenloses Konto auf GitHub verwenden, muss Ihre Seite sowie das gesamte Repository öffentlich sein.

Erstellen Sie eine Datei .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

Die Aktion sollte die Seite bereitstellen. Sie finden die URL in Ihren GitHub-Projekteinstellungen oder im Abschnitt „Aktionen“ in der Workflow-Ausgabe.

Meines finden Sie hier: https://horosin.github.io/metrics-dashboard/ .

Zusammenfassung

Und da haben Sie es! Ein vollständiges, automatisiertes System zum Verfolgen Ihrer Social-Media-Kennzahlen (X), zum Automatisieren des Datenabrufs, zum Speichern historischer Daten und zum Visualisieren der Trends. Mit diesem Setup können Sie die Funktionalität auf andere Plattformen und Kennzahlen ausweiten und so ein umfassendes Dashboard für alle Ihre Analyseanforderungen erstellen. Lassen Sie mich wissen, ob Sie darüber lesen möchten.

Abonnieren Sie mein Profil, indem Sie links Ihre E-Mail-Adresse eingeben, und bleiben Sie über meine Artikel auf dem Laufenden!

Vergessen Sie nicht, mir auf Twitter @horosin zu folgen und den Newsletter meines Blogs zu abonnieren, um weitere Tipps und Einblicke zu erhalten!

Wenn Sie kein Twitter haben, können Sie mir auch auf LinkedIn folgen.