আমি আমার লক্ষ্যের জন্য বাস্তব মেট্রিক্স বরাদ্দ করতে চাই। আদর্শভাবে, এগুলি স্বয়ংক্রিয়ভাবে ট্র্যাক করা হবে, এবং আমাকে জবাবদিহি করার জন্য একটি ব্যবস্থা থাকবে।

এই বছর আমার লক্ষ্যগুলির মধ্যে একটি হল আরও প্রকাশ করা এবং আমি কীভাবে কাজ করি এবং আমার দক্ষতার ক্ষেত্রে কী আকর্ষণীয় বলে মনে করি সে সম্পর্কে আরও খোলামেলা হওয়া। আমি এটির সাথে কি মেট্রিক্স সংযুক্ত করতে পারি? একটি অবশ্যই পোস্টের সংখ্যা; অন্যটি হতে পারে কতজন লোক আমাকে অনুসরণ করার জন্য যথেষ্ট আকর্ষণীয় বলে মনে করে।

সময়ের সাথে এই মেট্রিক্সগুলি কীভাবে পরিবর্তিত হয় তা দেখতে, আমি একটি ছোট ড্যাশবোর্ড তৈরি করার সিদ্ধান্ত নিয়েছি যা তাদের ঐতিহাসিক মানগুলিকে ট্র্যাক করবে। আমি এক্স/টুইটার দিয়ে শুরু করার সিদ্ধান্ত নিয়েছি।

এই টিউটোরিয়ালে তৈরি ড্যাশবোর্ডটি এখানে দেখুন: https://horosin.github.io/metrics-dashboard/

সম্পূর্ণ কোড: https://github.com/horosin/metrics-dashboard

আপনি হয়তো শুনেছেন যে X গত বছর তাদের API-তে অ্যাক্সেস সীমাবদ্ধ করেছে। তারা করেছে, কিন্তু তারা এখনও আমাদের নিজস্ব মৌলিক মেট্রিক্স অ্যাক্সেস করার অনুমতি দেয় (লিঙ্কডইনের মতো প্ল্যাটফর্মের বিপরীতে - আপনার জন্য মাইক্রোসফ্ট লজ্জা; আমার ডেটা অ্যাক্সেস করার জন্য আমাকে স্ক্র্যাপ করতে হবে)।

আমরা কি নির্মাণ করতে যাচ্ছি

লিখতে/কনফিগার করার জন্য কয়েকটি সফ্টওয়্যার থাকবে:

• X থেকে ডেটা আনার জন্য কোড।

• একটি স্ক্রিপ্ট কোথাও ডেটা সংরক্ষণ করে (এই ক্ষেত্রে, GitHub সংগ্রহস্থলের JSON ফাইলে)।

• পর্যায়ক্রমে কোড চালানোর সময়সূচী করুন - একটি নির্দিষ্ট সময়ে প্রতিদিন।

• ডেটা উপস্থাপনের জন্য ড্যাশবোর্ড (chart.js ব্যবহার করে সহজ একক HTML ফাইল)।

• ড্যাশবোর্ড হোস্ট করতে গিটহাব পেজ।

  
  

সর্বোত্তম অংশ হল যে আমরা বিনামূল্যে (গণনা সহ) এটি সব করতে পারি।

সেট আপ

টুইটার অ্যাপ্লিকেশন

বিকাশকারী বিভাগে একটি টুইটার অ্যাপ্লিকেশন সেট আপ করা হল টুইটারের API অ্যাক্সেস করার জন্য একটি পূর্বশর্ত, যা অনুসরণকারীর সংখ্যা, টুইট পোস্ট করা বা প্রোগ্রামগতভাবে অন্যান্য টুইটার সংস্থানগুলি অ্যাক্সেস করার মতো ডেটা আনার জন্য অপরিহার্য। আপনাকে শুরু করার জন্য এখানে একটি ধাপে ধাপে নির্দেশিকা রয়েছে৷

1. টুইটার ডেভেলপার সাইটে নেভিগেট করুন : টুইটার ডেভেলপার- এ যান এবং আপনার টুইটার অ্যাকাউন্ট দিয়ে সাইন ইন করুন। আপনার যদি টুইটার অ্যাকাউন্ট না থাকে তবে আপনাকে একটি তৈরি করতে হবে। আবেদন/সাইন আপ সম্পূর্ণ করুন।

   
   

2. বিকাশকারী ড্যাশবোর্ডে যান : আপনার টুইটার বিকাশকারী ড্যাশবোর্ড অ্যাক্সেস করুন।

   
   

3. একটি প্রকল্প তৈরি করুন : "প্রকল্প তৈরি করুন" এ ক্লিক করুন। আপনাকে একটি প্রকল্পের নাম, বিবরণ এবং ব্যবহারের কেস প্রদান করতে বলা হবে। আপনার প্রকল্পের চাহিদা অনুযায়ী এইগুলি পূরণ করুন।

   
   

4. আপনার প্রকল্পের মধ্যে একটি অ্যাপ তৈরি করুন : আপনার প্রকল্প তৈরি করার পরে, আপনার কাছে এই প্রকল্পের মধ্যে একটি অ্যাপ তৈরি করার বিকল্প থাকবে। "অ্যাপ তৈরি করুন"-এ ক্লিক করুন এবং অ্যাপের নামের মতো প্রয়োজনীয় বিবরণ পূরণ করুন।

   
   

5. আপনার API কী এবং টোকেনগুলি পান : একবার আপনার অ্যাপ তৈরি হয়ে গেলে, আপনাকে API কী, API সিক্রেট কী, অ্যাক্সেস টোকেন এবং অ্যাক্সেস টোকেন সিক্রেট সহ আপনার অ্যাপের বিশদ বিবরণ সহ একটি পৃষ্ঠায় নির্দেশিত করা হবে। এই শংসাপত্রগুলি নিরাপদে সংরক্ষণ করুন; টুইটার এপিআই-এ আপনার অনুরোধগুলি প্রমাণীকরণের জন্য আপনার তাদের প্রয়োজন হবে।

প্রকল্প

এখন, কোডিং এ আসা যাক। আপনার সিস্টেমে একটি নতুন ডিরেক্টরি তৈরি করুন এবং সেখানে একটি কনসোল খুলুন।

 mkdir metrics-dashboard cd metrics-dashboard

একটি গিট রিপোজিটরি শুরু করার বিষয়টি নিশ্চিত করুন এবং পরে, এটি একটি গিটহাব প্রকল্পের সাথে সংযুক্ত করুন।

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/

ডেটা আনা হচ্ছে

প্রথমে, আমরা একটি Node.js স্ক্রিপ্ট লিখব যাকে আপনার প্ল্যাটফর্মের API থেকে অনুসরণকারীর পরিসংখ্যান আনতে বলা হয়। আমরা API কল করার জন্য স্ট্যান্ডার্ড ফেচ লাইব্রেরি এবং X এর সাথে প্রমাণীকরণের জন্য oauth-1.0a ব্যবহার করব। ডেটা আনার পরে, আমরা একটি JSON ফাইলে ফলাফল লিখব যা আমাদের ডাটাবেস হিসাবে কাজ করবে।

এটি একটি পৃথক স্ক্রিপ্ট দ্বারা পরিচালিত হবে। এটিতে আউটপুট অ্যাক্সেসযোগ্য করতে, আমরা এটিকে গিটহাব অ্যাকশনে উপলব্ধ একটি পরিবেশ ফাইলে লিখব।

আমি নোড 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 এ যুক্ত করবে।

প্রথমে এই ফাইলটি তৈরি করা নিশ্চিত করুন এবং এটি গিট সংগ্রহস্থলে প্রতিশ্রুতিবদ্ধ করুন। এটির বিষয়বস্তু হিসাবে একটি খালি অ্যারে থাকা উচিত।

 []

স্ক্রিপ্টটি একটি ডুপ্লিকেট রেকর্ড যোগ করে না যদি সেই দিন ইতিমধ্যে ডেটা আনা হয়। এটি পরিবর্তে পুরানোটিকে ওভাররাইট করে।

 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 এর চারপাশে একক উদ্ধৃতি যোগ করে এবং তারপরে নিম্নলিখিতটি চালিয়ে টেস্টআউটপুট ফাইল সম্পাদনা করে স্ক্রিপ্টটি পরীক্ষা করতে পারেন। প্রয়োজন অনুযায়ী ফাইল সম্পাদনা করুন, যেহেতু গিটহাব অ্যাকশন পরিবেশ ভিন্নভাবে আচরণ করে এবং উদ্ধৃতির প্রয়োজন নেই।

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

নির্ধারিত গিটহাব অ্যাকশন

এখন, 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

কোডটি কমিট করে ম্যানুয়ালি অ্যাকশনটি চালান এবং তারপর গিটহাবে আপনার প্রোজেক্টের "অ্যাকশন" বিভাগে যান এবং সেখান থেকে এটি ট্রিগার করুন।

ড্যাশবোর্ড

ঠিক আছে, কিভাবে তথ্য উপস্থাপন সম্পর্কে? আমি সাধারণ 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/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) মেট্রিক্স ট্র্যাক করার জন্য একটি সম্পূর্ণ, স্বয়ংক্রিয় সিস্টেম, স্বয়ংক্রিয়ভাবে ডেটা আনয়ন করা, ঐতিহাসিক ডেটা সংরক্ষণ করা এবং প্রবণতাগুলিকে কল্পনা করা৷ এই সেটআপের মাধ্যমে, আপনি অন্যান্য প্ল্যাটফর্ম এবং মেট্রিক্সে কার্যকারিতা প্রসারিত করতে পারেন, আপনার সমস্ত বিশ্লেষণাত্মক প্রয়োজনের জন্য একটি ব্যাপক ড্যাশবোর্ড তৈরি করতে পারেন। এটি এমন কিছু হলে আমাকে জানান যা আপনি পড়তে চান।

বাম দিকে আপনার ইমেল ঠিকানা পূরণ করে আমার প্রোফাইলে সদস্যতা নিন, এবং আমার নিবন্ধগুলির সাথে আপ টু ডেট থাকুন!

Twitter @horosin- এ আমাকে অনুসরণ করতে ভুলবেন না এবং আরও টিপস এবং অন্তর্দৃষ্টির জন্য আমার ব্লগের নিউজলেটারে সাবস্ক্রাইব করুন!

আপনার যদি টুইটার না থাকে, আপনি আমাকে LinkedIn- এও অনুসরণ করতে পারেন।