Hedeflerime somut ölçümler atanmasını seviyorum. İdeal durumda bunlar otomatik olarak takip edilecek ve beni sorumlu tutacak bir mekanizma bulunacaktı.

Bu yılki hedeflerimden biri daha fazla yayınlamak ve nasıl çalıştığım ve uzmanlık alanlarımda neleri ilginç bulduğum konusunda daha açık olmak. Buna hangi ölçümleri ekleyebilirim? Bunlardan biri kesinlikle bir dizi gönderidir; diğeri ise kaç kişinin onları beni takip edecek kadar ilginç bulduğu olabilir.

Bu metriklerin zaman içinde nasıl değiştiğini görmek için geçmiş değerlerini takip edecek küçük bir kontrol paneli oluşturmaya karar verdim. X/Twitter ile başlamaya karar verdim.

Bu eğitimde oluşturulan kontrol paneline buradan göz atın: https://horosin.github.io/metrics-dashboard/

Tam kod: https://github.com/horosin/metrics-dashboard

Geçen yıl X'in API'lerine erişimi kısıtladığını duymuş olabilirsiniz. Yaptılar, ancak yine de kendi temel ölçümlerimize erişmemize izin veriyorlar (LinkedIn gibi platformların aksine - yazıklar olsun Microsoft; verilerime erişmek için kazıma yapmam gerekiyor).

Ne İnşa Edeceğiz

Yazılacak/yapılandırılacak birkaç yazılım parçası olacaktır:

• X'ten veri alma kodu.

• Verileri bir yere (bu durumda GitHub deposundaki JSON dosyasına) kaydeden bir komut dosyası.

• Kodu periyodik olarak, her gün, belirli bir saatte çalıştırmayı planlayın.

• Verileri sunan kontrol paneli (chart.js'yi kullanan basit tek HTML dosyası).

• Kontrol panelini barındırmak için GitHub Sayfaları.

  
  

En iyi yanı, bunların hepsini ücretsiz olarak yapabilmemizdir (bilgi işlem dahil).

Kurmak

Twitter Uygulaması

Geliştirici bölümünde bir Twitter uygulaması kurmak, takipçi sayıları gibi verileri almak, tweet göndermek veya diğer Twitter kaynaklarına programlı olarak erişmek için gerekli olan Twitter API'sine erişim için bir ön koşuldur. İşte başlamanıza yardımcı olacak adım adım bir kılavuz.

1. Twitter Geliştirici Sitesine gidin : Twitter Geliştirici'ye gidin ve Twitter hesabınızla oturum açın. Twitter hesabınız yoksa bir tane oluşturmanız gerekir. Başvuruyu tamamlayın/kaydolun.

   
   

2. Geliştirici Kontrol Paneline gidin : Twitter Geliştirici Kontrol Panelinize erişin.

   
   

3. Proje Oluşturun : "Proje Oluştur"a tıklayın. Sizden bir proje adı, açıklaması ve kullanım senaryosu sağlamanız istenecektir. Bunları projenizin ihtiyaçlarına göre doldurun.

   
   

4. Projeniz İçinde Bir Uygulama Oluşturun : Projenizi oluşturduktan sonra, bu proje içinde bir uygulama oluşturma seçeneğine sahip olacaksınız. "Uygulama Oluştur"a tıklayın ve Uygulama adı gibi gerekli ayrıntıları doldurun.

   
   

5. API Anahtarlarınızı ve Belirteçlerinizi Alın : Uygulamanız oluşturulduktan sonra, API Anahtarı, API Gizli Anahtarı, Erişim Belirteci ve Erişim Belirteci Sırrı dahil olmak üzere uygulamanızın ayrıntılarını içeren bir sayfaya yönlendirileceksiniz. Bu kimlik bilgilerini güvenli bir şekilde kaydedin; Twitter API'sine yönelik isteklerinizi doğrulamak için bunlara ihtiyacınız olacak.

Proje

Şimdi kodlamaya geçelim. Sisteminizde yeni bir dizin oluşturun ve orada bir konsol açın.

 mkdir metrics-dashboard cd metrics-dashboard

Git deposunu başlattığınızdan ve daha sonra onu bir GitHub projesine bağladığınızdan emin olun.

Node.js projesini başlatın ve API ile kimlik doğrulaması yapmamız gereken bazı paketleri yükleyin.

 npm init npm i dotenv oauth-1.0a crypto

Daha önce X'ten alınan tüm anahtarları içeren bir .env dosyası oluşturun. Bunu depoya taahhüt ETMEYİN. Bu yalnızca betiği yerel olarak test etmek içindir.

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

Bunu önlemek için .gitignore dosyasını oluşturun. Aşağıdaki örnek, göz ardı etmek isteyeceğimiz diğer yolları içermektedir.

 node_modules/ .env .DS_Store dashboard/data/

Verilerin Getirilmesi

İlk olarak, platformunuzun API'sinden takipçi istatistiklerini almak için çağrılan bir Node.js betiği yazacağız. API çağrılarını yapmak için standart fetch kütüphanesini ve X ile kimlik doğrulaması yapmak için oauth-1.0a kullanacağız. Verileri getirdikten sonra sonuçları veritabanımız olarak hizmet verecek bir JSON dosyasına yazacağız.

Bu, ayrı bir komut dosyasıyla ele alınacaktır. Çıktıyı erişilebilir kılmak için onu GitHub Eylemlerinde bulunan bir ortam dosyasına yazacağız.

Düğüm 20'yi kullanıyorum.

Projemizin kök dizininde x_fetch_data.js adında bir dosya oluşturun.

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

Komut dosyasını test etmek için şunları çalıştırabilirsiniz:

 GITHUB_OUTPUT=testoutput node x_fetch_data.js

X metriklerinizi çıktıda ve testoutput dosyasında görmelisiniz:

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

Verileri Kaydetmek

Verileri kaydetmek için x_save_data.js dosyasında başka bir komut dosyası oluşturun. Çıktıyı ortamdan alacak ve ./data/x.json dosyasına ekleyecektir.

Önce bu dosyayı oluşturduğunuzdan ve git deposuna kaydettiğinizden emin olun. İçeriği olarak boş bir diziye sahip olmalıdır.

 []

Komut dosyası ayrıca, veriler o gün zaten getirilmişse yinelenen bir kayıt eklemez. Bunun yerine eskisinin üzerine yazar.

 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'un etrafına tek tırnak işaretleri ekleyerek testouput dosyasını düzenleyip ardından aşağıdakileri çalıştırarak betiği test edebilirsiniz. GitHub Actions ortamı farklı davrandığından ve tırnak işaretlerine ihtiyaç duymadığından, gerektiği şekilde dosya düzenleyin.

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

Planlanmış GitHub Eylemi

Şimdi GitHub eylem kodunu içeren bir dosya oluşturalım. Her gün belirli bir saatte çalışacak ve ölçümlerimizi getirecek. Daha sonra onları kaydedecek ve depoya gönderecektir.

Aşağıdaki kodu .github/workflows/fetch_x_data.yml altına kaydedin.

 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

Kodu işleyerek ve ardından GitHub'da projenizin "Eylemler" bölümüne giderek ve oradan tetikleyerek eylemi manuel olarak çalıştırın.

Gösterge Paneli

Tamam, verileri sunmaya ne dersiniz? Basit HTML ile uğraşmak istemedim, bu yüzden ChatGPT'den bunu benim için oluşturmasını istedim.

dashboard klasöründe bir index.html dosyası oluşturun. Veri alma kodunu HTML'nin yanında barındırmamak için projemizin ana dizinini kullanmıyoruz.

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

Bunu depoya kaydedin.

(isteğe bağlı) Yerel olarak test etmek istiyorsanız, bunu veri klasörünü kontrol paneli klasörüne kopyalayıp içinde basit bir sunucu başlatarak yapın.

 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 Sayfalarına Kontrol Paneli Dağıtımı

Artık kontrol panelimize sahip olduğumuza göre, onu web'e sunmanın zamanı geldi!

GitHub'da ücretsiz bir hesap kullanıyorsanız sayfanızın ve tüm havuzun herkese açık olması gerekir.

Bir .github/workflows/deploy_dashboard.yml dosyası oluşturun.

 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

Eylem sayfayı dağıtmalıdır. URL'yi GitHub proje ayarlarınızda veya iş akışı çıktısının Eylemler bölümünde bulabilirsiniz.

Yine benimkini burada bulabilirsiniz: https://horosin.github.io/metrics-dashboard/ .

Özet

İşte buyur! Sosyal medya (X) ölçümlerinizi takip etmek, veri almayı otomatikleştirmek, geçmiş verileri kaydetmek ve trendleri görselleştirmek için eksiksiz, otomatik bir sistem. Bu kurulumla işlevselliği diğer platformlara ve ölçümlere genişleterek tüm analitik ihtiyaçlarınız için kapsamlı bir kontrol paneli oluşturabilirsiniz. Okumak istediğiniz bir konu varsa bana bildirin.

Soldaki e-posta adresinizi doldurarak profilime abone olun, yazılarımdan haberdar olun!

Beni Twitter'da @horosin üzerinden takip etmeyi ve daha fazla ipucu ve bilgi için blog haber bültenime abone olmayı unutmayın!

Twitter'ınız yoksa beni LinkedIn'den de takip edebilirsiniz.