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.    :   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. Twitter Geliştirici Sitesine gidin Twitter Geliştirici'ye    :   Panelinize erişin. Geliştirici Kontrol Paneline gidin Twitter Geliştirici Kontrol    : "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. Proje 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. Projeniz İçinde Bir Uygulama Oluşturun    : 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. API Anahtarlarınızı ve Belirteçlerinizi Alın  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   dosyası oluşturun. Bunu depoya taahhüt ETMEYİN. Bu yalnızca betiği yerel olarak test etmek içindir. .env   TWITTER_API_KEY='' TWITTER_API_SECRET='' TWITTER_ACCESS_TOKEN='' TWITTER_ACCESS_SECRET=''  Bunu önlemek için   dosyasını oluşturun. Aşağıdaki örnek, göz ardı etmek isteyeceğimiz diğer yolları içermektedir. .gitignore   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   kullanacağız. Verileri getirdikten sonra sonuçları veritabanımız olarak hizmet verecek bir JSON dosyasına yazacağız. oauth-1.0a  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   adında bir dosya oluşturun. 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));  Komut dosyasını test etmek için şunları çalıştırabilirsiniz:   GITHUB_OUTPUT=testoutput node x_fetch_data.js  X metriklerinizi çıktıda ve   dosyasında görmelisiniz: testoutput   metrics={"followers_count":288,"following_count":302,"tweet_count":1381,"listed_count":0,"like_count":591}  Verileri Kaydetmek  Verileri kaydetmek için   dosyasında başka bir komut dosyası oluşturun. Çıktıyı ortamdan alacak ve   dosyasına ekleyecektir. x_save_data.js ./data/x.json  Ö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   altına kaydedin. .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  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.    klasöründe bir   dosyası oluşturun. Veri alma kodunu HTML'nin yanında barındırmamak için projemizin ana dizinini kullanmıyoruz. dashboard index.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>  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   dosyası oluşturun. .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  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   üzerinden takip etmeyi ve daha fazla ipucu ve bilgi için blog   abone olmayı unutmayın! @horosin haber bültenime  Twitter'ınız yoksa beni   de takip edebilirsiniz. LinkedIn'den

2022 - HackerNoon Contributor of the Year - Cicd

Join free programming newsletter!

Nominated for 2022 - HackerNoon Contributor of the Year - Cicd

Software Team Lead

Bu ses hikayenin orijinal dilinde üretilmiştir!

Çok uzun; Okumak

Make resilience your competitive advantage

API'ler ve GitHub Eylemleriyle Twitter/X Takipçi İstatistiklerinizi Takip Etmek için Kontrol Paneli Nasıl Oluşturulur

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

Bu 18 Geliştirici Aracıyla Üretkenliğinizi Artırın 🚀🔥

Floki'den Valhalla Hindistan'ın Sri Lanka Turuna Yardımcı Sponsor Olarak Katıldı

HackerNoon Kendi Ana Dilinizde 🆕 ‼️ Teknoloji Blog Yazıları için 77 Dil Ana Sayfası

İş Akışınızı 10 Kat Nasıl İyileştirirsiniz: 17 Temel Uygulama

Bu 18 Geliştirici Aracıyla Üretkenliğinizi Artırın 🚀🔥

Floki'den Valhalla Hindistan'ın Sri Lanka Turuna Yardımcı Sponsor Olarak Katıldı

HackerNoon Kendi Ana Dilinizde 🆕 ‼️ Teknoloji Blog Yazıları için 77 Dil Ana Sayfası

İş Akışınızı 10 Kat Nasıl İyileştirirsiniz: 17 Temel Uygulama

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps