मैं चाहता हूँ कि मेरे लक्ष्यों के लिए ठोस मीट्रिक निर्धारित किए जाएँ। आदर्श रूप से, इन्हें स्वचालित रूप से ट्रैक किया जाएगा, और मुझे जवाबदेह बनाए रखने के लिए एक तंत्र होगा।

इस साल मेरा एक लक्ष्य है कि मैं ज़्यादा से ज़्यादा प्रकाशित करूँ और अपने काम करने के तरीके और अपनी विशेषज्ञता के क्षेत्रों में मुझे क्या दिलचस्प लगता है, इस बारे में ज़्यादा खुलकर बात करूँ। मैं इसके लिए क्या मापदंड जोड़ सकता हूँ? एक तो निश्चित रूप से पोस्ट की संख्या है; दूसरा यह हो सकता है कि कितने लोगों को वे इतने दिलचस्प लगते हैं कि वे मुझे फ़ॉलो करें।

यह देखने के लिए कि समय के साथ ये मीट्रिक कैसे बदलते हैं, मैंने एक छोटा डैशबोर्ड बनाने का फैसला किया जो उनके ऐतिहासिक मूल्यों को ट्रैक करेगा। मैंने X/Twitter से शुरुआत करने का फैसला किया।

इस ट्यूटोरियल में बनाए गए डैशबोर्ड को यहां देखें: https://horosin.github.io/metrics-dashboard/

पूरा कोड: https://github.com/horosin/metrics-dashboard

आपने सुना होगा कि एक्स ने पिछले साल अपने एपीआई तक पहुंच को प्रतिबंधित कर दिया था। उन्होंने ऐसा किया, लेकिन वे अभी भी हमें अपने स्वयं के बुनियादी मीट्रिक तक पहुंचने की अनुमति देते हैं (लिंक्डइन जैसे प्लेटफ़ॉर्म के विपरीत - माइक्रोसॉफ्ट, शर्म की बात है; मुझे अपने डेटा तक पहुंचने के लिए स्क्रैप करना पड़ता है)।

हम क्या बनाने जा रहे हैं

लिखने/कॉन्फ़िगर करने के लिए कुछ सॉफ्टवेयर होंगे:

• X से डेटा लाने के लिए कोड.

• एक स्क्रिप्ट जो डेटा को कहीं सहेजती है (इस मामले में, GitHub रिपोजिटरी में JSON फ़ाइल में)।

• कोड को समय-समय पर चलाने का कार्यक्रम बनाएं - प्रतिदिन एक निश्चित समय पर।

• डेटा प्रस्तुत करने के लिए डैशबोर्ड (chart.js का उपयोग करके सरल एकल HTML फ़ाइल)।

• डैशबोर्ड को होस्ट करने के लिए GitHub पेज का उपयोग करें।

  
  

सबसे अच्छी बात यह है कि हम यह सब मुफ्त में कर सकते हैं (कंप्यूटिंग सहित)।

स्थापित करना

ट्विटर एप्लीकेशन

डेवलपर सेक्शन में Twitter एप्लिकेशन सेट करना Twitter के API तक पहुँचने के लिए एक शर्त है, जो फ़ॉलोअर की संख्या, ट्वीट पोस्ट करने या प्रोग्रामेटिक रूप से अन्य Twitter संसाधनों तक पहुँचने जैसे डेटा प्राप्त करने के लिए आवश्यक है। यहाँ आपको आरंभ करने के लिए चरण-दर-चरण मार्गदर्शिका दी गई है।

1. ट्विटर डेवलपर साइट पर जाएँ : ट्विटर डेवलपर पर जाएँ, और अपने ट्विटर अकाउंट से साइन इन करें। अगर आपके पास ट्विटर अकाउंट नहीं है, तो आपको एक बनाना होगा। आवेदन पूरा करें/साइन अप करें।

   
   

2. डेवलपर डैशबोर्ड पर जाएं : अपने ट्विटर डेवलपर डैशबोर्ड तक पहुंचें।

   
   

3. प्रोजेक्ट बनाएँ : "प्रोजेक्ट बनाएँ" पर क्लिक करें। आपसे प्रोजेक्ट का नाम, विवरण और उपयोग का मामला बताने के लिए कहा जाएगा। अपनी प्रोजेक्ट की ज़रूरतों के हिसाब से इन्हें भरें।

   
   

4. अपने प्रोजेक्ट के भीतर एक ऐप बनाएँ : अपना प्रोजेक्ट बनाने के बाद, आपके पास इस प्रोजेक्ट के भीतर एक ऐप बनाने का विकल्प होगा। "ऐप बनाएँ" पर क्लिक करें, और ऐप नाम जैसी ज़रूरी जानकारी भरें।

   
   

5. अपनी API कुंजियाँ और टोकन प्राप्त करें : एक बार आपका ऐप बन जाने के बाद, आपको अपने ऐप के विवरण वाले पेज पर निर्देशित किया जाएगा, जिसमें API कुंजी, API गुप्त कुंजी, एक्सेस टोकन और एक्सेस टोकन गुप्त शामिल हैं। इन क्रेडेंशियल को सुरक्षित रूप से सहेजें; आपको Twitter API को अपने अनुरोधों को प्रमाणित करने के लिए इनकी आवश्यकता होगी।

परियोजना

अब, कोडिंग शुरू करते हैं। अपने सिस्टम पर एक नई डायरेक्टरी बनाएं, और वहां कंसोल खोलें।

 mkdir metrics-dashboard cd metrics-dashboard

Git रिपोजिटरी को आरंभ करना सुनिश्चित करें, तथा बाद में उसे GitHub प्रोजेक्ट से कनेक्ट करें।

node.js प्रोजेक्ट को आरंभ करें, और कुछ पैकेज स्थापित करें जिनकी हमें API के साथ प्रमाणीकरण करने की आवश्यकता होगी।

 npm init npm i dotenv oauth-1.0a crypto

X से पहले प्राप्त सभी कुंजियों के साथ एक .env फ़ाइल बनाएँ। इसे रिपॉजिटरी में कमिट न करें। यह केवल स्क्रिप्ट को स्थानीय रूप से परीक्षण करने के लिए है।

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

इससे बचने के लिए .gitignore फ़ाइल बनाएँ। नीचे दिए गए नमूने में अन्य पथ हैं जिन्हें हम अनदेखा करना चाहेंगे।

 node_modules/ .env .DS_Store dashboard/data/

डेटा प्राप्त करना

सबसे पहले, हम आपके प्लेटफ़ॉर्म के API से फ़ॉलोअर के आँकड़े प्राप्त करने के लिए Node.js स्क्रिप्ट लिखेंगे। हम API कॉल करने के लिए मानक फ़ेच लाइब्रेरी का उपयोग करेंगे और X के साथ प्रमाणीकरण करने के लिए oauth-1.0a उपयोग करेंगे। डेटा प्राप्त करने के बाद, हम परिणामों को JSON फ़ाइल में लिखेंगे जो हमारे डेटाबेस के रूप में काम करेगी।

इसे एक अलग स्क्रिप्ट द्वारा नियंत्रित किया जाएगा। आउटपुट को इसके लिए सुलभ बनाने के लिए, हम इसे GitHub Actions में उपलब्ध एक पर्यावरण फ़ाइल में लिखेंगे।

मैं नोड 20 का उपयोग कर रहा हूँ.

हमारे प्रोजेक्ट के रूट में 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));

स्क्रिप्ट का परीक्षण करने के लिए, आप चला सकते हैं:

 GITHUB_OUTPUT=testoutput node x_fetch_data.js

आपको अपने एक्स मेट्रिक्स आउटपुट में, साथ ही testoutput फ़ाइल में भी दिखाई देने चाहिए:

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

डेटा सहेजना

डेटा को सहेजने के लिए, x_save_data.js फ़ाइल में एक और स्क्रिप्ट बनाएँ। यह पर्यावरण से आउटपुट लेगा और इसे ./data/x.json में जोड़ देगा।

पहले इस फ़ाइल को बनाना सुनिश्चित करें और इसे git रिपॉजिटरी में कमिट करें। इसकी सामग्री के रूप में एक खाली सरणी होनी चाहिए।

 []

यदि डेटा उस दिन पहले ही प्राप्त कर लिया गया था, तो स्क्रिप्ट डुप्लिकेट रिकॉर्ड नहीं जोड़ती है। इसके बजाय यह पुराने रिकॉर्ड को अधिलेखित कर देती है।

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

आप JSON के चारों ओर सिंगल कोट्स जोड़कर testouput फ़ाइल को संपादित करके और फिर निम्नलिखित चलाकर स्क्रिप्ट का परीक्षण कर सकते हैं। आवश्यकतानुसार फ़ाइल को संपादित करें, क्योंकि GitHub Actions वातावरण अलग तरीके से व्यवहार करता है और उसे कोट्स की आवश्यकता नहीं होती है।

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

अनुसूचित GitHub कार्रवाई

अब, GitHub एक्शन कोड वाली एक फ़ाइल बनाएँ। यह हर दिन एक निर्दिष्ट समय पर चलेगी और हमारे मेट्रिक्स को प्राप्त करेगी। फिर यह उन्हें सहेज कर रिपॉजिटरी में जमा कर देगी।

निम्नलिखित कोड को .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

कोड को कमिट करके मैन्युअल रूप से एक्शन चलाएं और फिर GitHub पर अपने प्रोजेक्ट के "एक्शन" अनुभाग पर जाएं और वहां से इसे ट्रिगर करें।

डैशबोर्ड

ठीक है, डेटा प्रस्तुत करने के बारे में क्या ख्याल है? मैं सरल HTML के साथ खिलवाड़ नहीं करना चाहता था, इसलिए मैंने ChatGPT से इसे मेरे लिए तैयार करने को कहा।

dashboard फ़ोल्डर में index.html फ़ाइल बनाएँ। 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>

इसे रिपोजिटरी में जमा करें।

(वैकल्पिक) यदि आप इसे स्थानीय स्तर पर परीक्षण करना चाहते हैं, तो डेटा फ़ोल्डर को डैशबोर्ड फ़ोल्डर में कॉपी करके और उसके अंदर एक सरल सर्वर लॉन्च करके ऐसा करें।

 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

GitHub पेजों पर डैशबोर्ड परिनियोजन

अब जब हमारे पास डैशबोर्ड है, तो इसे वेब पर प्रस्तुत करने का समय आ गया है!

यदि आप GitHub पर निःशुल्क खाते का उपयोग कर रहे हैं, तो आपका पेज तथा संपूर्ण रिपोजिटरी सार्वजनिक होनी चाहिए।

.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

कार्रवाई से पेज को तैनात किया जाना चाहिए। आप अपने GitHub प्रोजेक्ट सेटिंग्स में या वर्कफ़्लो आउटपुट में क्रियाएँ अनुभाग में URL पा सकते हैं।

फिर से, आप मेरा यहां पा सकते हैं: https://horosin.github.io/metrics-dashboard/ ।

सारांश

और अब यह आपके लिए है! आपके सोशल मीडिया (X) मेट्रिक्स को ट्रैक करने, डेटा फ़ेचिंग को स्वचालित करने, ऐतिहासिक डेटा को सहेजने और रुझानों को विज़ुअलाइज़ करने के लिए एक पूर्ण, स्वचालित प्रणाली। इस सेटअप के साथ, आप अपनी सभी विश्लेषणात्मक आवश्यकताओं के लिए एक व्यापक डैशबोर्ड बनाते हुए, अन्य प्लेटफ़ॉर्म और मेट्रिक्स तक कार्यक्षमता का विस्तार कर सकते हैं। मुझे बताएं कि क्या यह ऐसा कुछ है जिसके बारे में आप पढ़ना चाहते हैं।

बाईं ओर अपना ईमेल पता भरकर मेरी प्रोफ़ाइल की सदस्यता लें, और मेरे लेखों के साथ अद्यतन रहें!

ट्विटर पर मुझे @ horosin पर फॉलो करना न भूलें, और अधिक सुझावों और जानकारियों के लिए मेरे ब्लॉग के न्यूज़लेटर की सदस्यता लें!

यदि आपके पास ट्विटर नहीं है तो आप मुझे लिंक्डइन पर भी फॉलो कर सकते हैं।