Tôi muốn có những số liệu hữu hình được gán cho mục tiêu của mình. Lý tưởng nhất là những điều này sẽ được theo dõi tự động và sẽ có một cơ chế để buộc tôi phải chịu trách nhiệm.

Một trong những mục tiêu của tôi trong năm nay là xuất bản nhiều hơn và cởi mở hơn về cách tôi làm việc cũng như những điều tôi thấy thú vị trong lĩnh vực chuyên môn của mình. Tôi có thể đính kèm những số liệu nào vào nó? Một chắc chắn là một số bài viết; điều còn lại có thể là có bao nhiêu người thấy chúng đủ thú vị để theo dõi tôi.

Để xem các số liệu này thay đổi như thế nào theo thời gian, tôi quyết định tạo một trang tổng quan nhỏ để theo dõi các giá trị lịch sử của chúng. Tôi quyết định bắt đầu với X/Twitter.

Xem bảng điều khiển được tạo trong hướng dẫn này tại đây: https://horosin.github.io/metrics-dashboard/

Mã đầy đủ: https://github.com/horosin/metrics-dashboard

Bạn có thể đã nghe nói rằng X đã hạn chế quyền truy cập vào API của họ vào năm ngoái. Họ đã làm vậy, nhưng họ vẫn cho phép chúng tôi truy cập vào các số liệu cơ bản của riêng mình (trái ngược với các nền tảng như LinkedIn - thật đáng xấu hổ cho bạn Microsoft; tôi phải tìm kiếm để truy cập dữ liệu của mình).

Những gì chúng tôi sẽ xây dựng

Sẽ có một vài phần mềm để viết/cấu hình:

• Mã để tìm nạp dữ liệu từ X.

• Một tập lệnh lưu dữ liệu ở đâu đó (trong trường hợp này là trong tệp JSON trong kho GitHub).

• Lên lịch chạy mã định kỳ - hàng ngày vào một thời điểm nhất định.

• Bảng điều khiển để trình bày dữ liệu (tệp HTML đơn giản sử dụng Chart.js).

• Trang GitHub để lưu trữ bảng điều khiển.

  
  

Điều tuyệt vời nhất là chúng tôi có thể thực hiện tất cả những điều đó miễn phí (bao gồm cả tính toán).

Cài đặt

Ứng dụng Twitter

Thiết lập ứng dụng Twitter trong phần dành cho nhà phát triển là điều kiện tiên quyết để truy cập API của Twitter, điều này cần thiết để tìm nạp dữ liệu như số người theo dõi, đăng tweet hoặc truy cập các tài nguyên Twitter khác theo chương trình. Đây là hướng dẫn từng bước để giúp bạn bắt đầu.

1. Điều hướng đến Trang web dành cho nhà phát triển Twitter : Đi tới Nhà phát triển Twitter và đăng nhập bằng tài khoản Twitter của bạn. Nếu chưa có tài khoản Twitter, bạn cần tạo một tài khoản. Hoàn tất đơn đăng ký/đăng ký.

   
   

2. Đi tới Bảng điều khiển dành cho nhà phát triển : Truy cập Bảng điều khiển dành cho nhà phát triển Twitter của bạn.

   
   

3. Tạo dự án : Nhấp vào "Tạo dự án." Bạn sẽ được yêu cầu cung cấp tên dự án, mô tả và trường hợp sử dụng. Điền vào những điều này theo nhu cầu của dự án của bạn.

   
   

4. Tạo ứng dụng trong dự án của bạn : Sau khi tạo dự án, bạn sẽ có tùy chọn tạo ứng dụng trong dự án này. Nhấp vào "Tạo ứng dụng" và điền các chi tiết cần thiết như tên Ứng dụng.

   
   

5. Nhận khóa API và mã thông báo của bạn : Sau khi ứng dụng của bạn được tạo, bạn sẽ được chuyển đến một trang có thông tin chi tiết về ứng dụng của bạn, bao gồm Khóa API, Khóa bí mật API, Mã thông báo truy cập và Bí mật mã thông báo truy cập. Lưu các thông tin xác thực này một cách an toàn; bạn sẽ cần chúng để xác thực yêu cầu của bạn với API Twitter.

Dự án

Bây giờ, hãy bắt đầu viết mã. Tạo một thư mục mới trên hệ thống của bạn và mở bảng điều khiển ở đó.

 mkdir metrics-dashboard cd metrics-dashboard

Đảm bảo khởi tạo kho lưu trữ Git và sau đó kết nối nó với dự án GitHub.

Khởi tạo dự án node.js và cài đặt một số gói mà chúng ta cần để xác thực bằng API.

 npm init npm i dotenv oauth-1.0a crypto

Tạo tệp .env với tất cả các khóa có được từ X trước đó. KHÔNG cam kết điều này với kho lưu trữ. Đây chỉ là để kiểm tra tập lệnh cục bộ.

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

Tạo tệp .gitignore để tránh điều này. Mẫu bên dưới chứa các đường dẫn khác mà chúng tôi muốn bỏ qua.

 node_modules/ .env .DS_Store dashboard/data/

Tìm nạp dữ liệu

Trước tiên, chúng tôi sẽ viết một tập lệnh Node.js có tên để tìm nạp số liệu thống kê về người theo dõi từ API nền tảng của bạn. Chúng tôi sẽ sử dụng thư viện tìm nạp tiêu chuẩn để thực hiện các lệnh gọi API và oauth-1.0a để xác thực bằng X. Sau khi tìm nạp dữ liệu, chúng tôi sẽ ghi kết quả vào tệp JSON sẽ dùng làm cơ sở dữ liệu của chúng tôi.

Điều này sẽ được xử lý bởi một tập lệnh riêng biệt. Để làm cho đầu ra có thể truy cập được, chúng tôi sẽ ghi nó vào một tệp môi trường có sẵn trong GitHub Actions.

Tôi đang sử dụng nút 20.

Tạo một tệp có tên x_fetch_data.js trong thư mục gốc của dự án của chúng tôi.

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

Để kiểm tra tập lệnh, bạn có thể chạy:

 GITHUB_OUTPUT=testoutput node x_fetch_data.js

Bạn sẽ thấy số liệu X của mình ở đầu ra cũng như trong tệp testoutput :

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

Lưu dữ liệu

Để lưu dữ liệu, hãy tạo một tập lệnh khác trong tệp x_save_data.js . Nó sẽ lấy đầu ra từ môi trường và nối nó vào ./data/x.json .

Hãy đảm bảo tạo tệp này trước và đưa nó vào kho git. Nó phải có một mảng trống làm nội dung của nó.

 []

Tập lệnh cũng không thêm bản ghi trùng lặp nếu dữ liệu đã được tìm nạp vào ngày hôm đó. Thay vào đó, nó ghi đè lên cái cũ.

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

Bạn có thể kiểm tra tập lệnh bằng cách chỉnh sửa tệp testouput bằng cách thêm các dấu ngoặc đơn xung quanh JSON rồi chạy đoạn mã sau. Chỉnh sửa tệp nếu cần, vì môi trường Hành động GitHub hoạt động khác và không cần dấu ngoặc kép.

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

Hành động GitHub theo lịch trình

Bây giờ, hãy tạo một tệp có mã hành động GitHub. Nó sẽ chạy hàng ngày vào một thời điểm cụ thể và lấy số liệu của chúng tôi. Sau đó nó sẽ lưu chúng và đưa chúng vào kho lưu trữ.

Lưu mã sau dưới .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

Chạy hành động theo cách thủ công bằng cách xác nhận mã, sau đó đi tới phần “Hành động” trong dự án của bạn trên GitHub và kích hoạt nó từ đó.

bảng điều khiển

Được rồi, còn việc trình bày dữ liệu thì sao? Tôi không muốn loay hoay với HTML đơn giản nên tôi đã yêu cầu ChatGPT tạo nó cho tôi.

Tạo tệp index.html trong thư mục dashboard . Chúng tôi không sử dụng thư mục chính của dự án để tránh lưu trữ mã tìm nạp dữ liệu cùng với 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>

Cam kết nó vào kho lưu trữ.

(tùy chọn) Nếu bạn muốn kiểm tra cục bộ, hãy thực hiện bằng cách sao chép thư mục dữ liệu vào thư mục bảng điều khiển và khởi chạy một máy chủ đơn giản bên trong 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

Triển khai bảng điều khiển cho các trang GitHub

Bây giờ chúng ta đã có trang tổng quan, đã đến lúc trình bày nó lên web!

Nếu bạn đang sử dụng tài khoản miễn phí trên GitHub, trang của bạn cần được công khai cũng như toàn bộ kho lưu trữ.

Tạo tệp .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

Hành động sẽ triển khai trang. Bạn có thể tìm thấy URL trong cài đặt dự án GitHub của mình hoặc trong phần Hành động ở đầu ra của quy trình làm việc.

Một lần nữa, bạn có thể tìm thấy của tôi ở đây: https://horosin.github.io/metrics-dashboard/ .

Bản tóm tắt

Và bạn có nó rồi đấy! Một hệ thống tự động, hoàn chỉnh để theo dõi số liệu truyền thông xã hội (X) của bạn, tự động tìm nạp dữ liệu, lưu dữ liệu lịch sử và trực quan hóa các xu hướng. Với thiết lập này, bạn có thể mở rộng chức năng sang các nền tảng và số liệu khác, tạo trang tổng quan toàn diện cho tất cả các nhu cầu phân tích của bạn. Hãy cho tôi biết nếu đó là điều bạn muốn đọc.

Đăng ký hồ sơ của tôi bằng cách điền địa chỉ email của bạn ở bên trái và cập nhật các bài viết của tôi!

Đừng quên theo dõi tôi trên Twitter @ horosin và đăng ký nhận bản tin blog của tôi để biết thêm mẹo và thông tin chi tiết!

Nếu bạn không có Twitter, bạn cũng có thể theo dõi tôi trên LinkedIn .