나는 내 목표에 실질적인 지표를 할당하는 것을 좋아합니다. 이상적으로는 이러한 정보가 자동으로 추적되고 나에게 책임을 묻는 메커니즘이 있을 것입니다.

올해 내 목표 중 하나는 내가 일하는 방식과 내 전문 분야에서 내가 흥미로운 점을 더 많이 공개하고 공개하는 것입니다. 어떤 측정항목을 연결할 수 있나요? 하나는 확실히 여러 게시물입니다. 다른 하나는 얼마나 많은 사람들이 나를 팔로우할 만큼 흥미롭다고 생각하는지일 수 있습니다.

이러한 지표가 시간에 따라 어떻게 변하는지 확인하기 위해 과거 값을 추적하는 작은 대시보드를 만들기로 결정했습니다. 나는 X/Twitter로 시작하기로 결정했습니다.

이 튜토리얼에서 생성된 대시보드를 여기에서 확인하세요: https://horosin.github.io/metrics-dashboard/

전체 코드: https://github.com/horosin/metrics-dashboard

X가 작년에 API에 대한 액세스를 제한했다는 소식을 들어보셨을 것입니다. 그렇게 했지만 여전히 우리 자신의 기본 측정 항목에 액세스할 수 있습니다(LinkedIn과 같은 플랫폼과는 반대로 Microsoft는 부끄러운 일입니다. 내 데이터에 액세스하려면 스크랩해야 합니다).

우리가 만들려는 것

작성/구성할 소프트웨어가 몇 가지 있습니다:

• X에서 데이터를 가져오는 코드입니다.

• 데이터를 어딘가(이 경우 GitHub 저장소의 JSON 파일)에 저장하는 스크립트입니다.

• 매일 특정 시간에 정기적으로 코드를 실행하도록 예약합니다.

• 데이터를 표시하는 대시보드(chart.js를 사용하는 간단한 단일 HTML 파일)

• 대시보드를 호스팅하는 GitHub 페이지입니다.

  
  

가장 좋은 점은 이 모든 작업을 무료로 수행할 수 있다는 것입니다(컴퓨팅 포함).

설정

트위터 애플리케이션

개발자 섹션에서 Twitter 애플리케이션을 설정하는 것은 Twitter API에 액세스하기 위한 전제 조건입니다. 이는 팔로어 수와 같은 데이터 가져오기, 트윗 게시 또는 기타 Twitter 리소스에 프로그래밍 방식으로 액세스하는 데 필수적입니다. 시작하는 데 도움이 되는 단계별 가이드는 다음과 같습니다.

1. Twitter 개발자 사이트로 이동합니다 . Twitter 개발자 로 이동하여 Twitter 계정으로 로그인합니다. 트위터 계정이 없다면 계정을 만들어야 합니다. 신청/가입을 완료하세요.

   
   

2. 개발자 대시보드로 이동 : Twitter 개발자 대시보드에 액세스합니다.

   
   

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 호출을 하고 oauth-1.0a 하여 X로 인증합니다. 데이터를 가져온 후 데이터베이스 역할을 할 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 파일에서 X 메트릭을 볼 수 있습니다.

 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에 HTML을 생성해 달라고 요청했습니다.

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) 지표를 추적하고, 데이터 가져오기를 자동화하고, 기록 데이터를 저장하고, 추세를 시각화하는 완전하고 자동화된 시스템입니다. 이 설정을 사용하면 기능을 다른 플랫폼 및 지표로 확장하여 모든 분석 요구 사항에 맞는 포괄적인 대시보드를 만들 수 있습니다. 읽고 싶은 내용이 있으면 알려주세요.

왼쪽에 이메일 주소를 입력하여 내 프로필을 구독하고 내 기사에 대한 최신 소식을 받아보세요!

Twitter @horosin 에서 저를 팔로우하고 더 많은 팁과 통찰력을 얻으려면 제 블로그 뉴스레터 를 구독하는 것을 잊지 마세요!

Twitter가 없다면 LinkedIn 에서 나를 팔로우할 수도 있습니다.