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.    : Gehen Sie zu   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. Navigieren Sie zur Twitter-Entwicklerseite Twitter Developer    : Greifen Sie auf Ihr   zu. Gehen Sie zum Entwickler-Dashboard Twitter-Entwickler-Dashboard    : 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. Projekt erstellen    : 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. Erstellen Sie eine App innerhalb Ihres Projekts    : 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. Holen Sie sich Ihre API-Schlüssel und Token  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   Datei mit allen zuvor von X erhaltenen Schlüsseln. Übertragen Sie diese NICHT in das Repository. Dies dient nur zum lokalen Testen des Skripts. .env   TWITTER_API_KEY='' TWITTER_API_SECRET='' TWITTER_ACCESS_TOKEN='' TWITTER_ACCESS_SECRET=''  Erstellen Sie die Datei   , um dies zu vermeiden. Das folgende Beispiel enthält andere Pfade, die wir ignorieren möchten. .gitignore   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   für die Authentifizierung mit X. Nach dem Abrufen der Daten schreiben wir die Ergebnisse in eine JSON-Datei, die als unsere Datenbank dient. oauth-1.0a  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   sehen: testoutput   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   . Es übernimmt die Ausgabe aus der Umgebung und hängt sie an   an. x_save_data.js ./data/x.json  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 "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  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   im   Ordner. Wir verwenden nicht das Hauptverzeichnis unseres Projekts, um zu vermeiden, dass der Datenabrufcode zusammen mit dem HTML gehostet wird. 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>  Ü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   zu folgen und den   meines Blogs zu abonnieren, um weitere Tipps und Einblicke zu erhalten! @horosin Newsletter  Wenn Sie kein Twitter haben, können Sie mir auch auf   folgen. LinkedIn

2022 - HackerNoon Contributor of the Year - Cicd

Join free programming newsletter!

Nominated for 2022 - HackerNoon Contributor of the Year - Cicd

Software Team Lead

Dieses Audio ist in der Originalsprache der Geschichte produziert!

So erstellen Sie ein Dashboard zum Verfolgen Ihrer Twitter/X-Follower-Statistiken mit APIs und GitHub-Aktionen

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Celebrating Our Writing Community!

HackerNoon's DeFi Writing Contest with SORA Network: XSTUSD Use Cases

HackerNoon Decoded 2024: Celebrating Our Life Hacking Community!

HackerNoon Decoded 2024: Celebrating Our Writing Community!

HackerNoon's DeFi Writing Contest with SORA Network: XSTUSD Use Cases

HackerNoon Decoded 2024: Celebrating Our Life Hacking Community!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps