Мне нравится, когда моим целям присваиваются осязаемые показатели. В идеале, это должно автоматически отслеживаться, и должен быть механизм привлечения меня к ответственности.

Одна из моих целей в этом году — публиковать больше и более открыто рассказывать о том, как я работаю и что мне интересно в моей области знаний. Какие метрики я могу к этому прикрепить? Один из них — это, конечно, несколько постов; другой может заключаться в том, сколько людей находят их достаточно интересными, чтобы подписаться на меня.

Чтобы увидеть, как эти показатели меняются со временем, я решил создать небольшую панель мониторинга, которая будет отслеживать их исторические значения. Я решил начать с X/Twitter.

Посмотрите панель мониторинга, созданную в этом уроке, здесь: https://horosin.github.io/metrics-dashboard/ .

Полный код: https://github.com/horosin/metrics-dashboard.

Возможно, вы слышали, что X ограничил доступ к своему API в прошлом году. Они это сделали, но они по-прежнему позволяют нам получить доступ к нашим собственным базовым показателям (в отличие от таких платформ, как LinkedIn — позор вам, Microsoft; мне приходится парсить, чтобы получить доступ к своим данным).

Что мы собираемся построить

Нам нужно будет написать/настроить несколько программ:

• Код для получения данных из X.

• Скрипт, сохраняющий данные куда-либо (в данном случае в JSON-файл в репозитории GitHub).

• Запланируйте периодический запуск кода — каждый день в заданное время.

• Панель мониторинга для представления данных (простой отдельный HTML-файл с использованиемchart.js).

• Страницы GitHub для размещения информационной панели.

  
  

Самое приятное то, что мы можем делать все это бесплатно (включая вычисления).

Настраивать

Приложение Твиттера

Настройка приложения Twitter в разделе для разработчиков является обязательным условием для доступа к API Twitter, который необходим для получения таких данных, как количество подписчиков, публикация твитов или программный доступ к другим ресурсам Twitter. Вот пошаговое руководство, которое поможет вам начать.

1. Перейдите на сайт разработчика Twitter : перейдите на сайт разработчика Twitter и войдите в свою учетную запись Twitter. Если у вас нет учетной записи Twitter, вам необходимо ее создать. Заполните заявку/зарегистрируйтесь.

   
   

2. Перейдите на панель разработчика : получите доступ к панели разработчика в Твиттере .

   
   

3. Создать проект : нажмите «Создать проект». Вам будет предложено указать название проекта, описание и вариант использования. Заполните их в соответствии с потребностями вашего проекта.

   
   

4. Создайте приложение в своем проекте . После создания проекта у вас будет возможность создать приложение в этом проекте. Нажмите «Создать приложение» и введите необходимые данные, такие как имя приложения.

   
   

5. Получите ключи и токены API . После создания приложения вы будете перенаправлены на страницу со сведениями о нем, включая ключ API, секретный ключ API, токен доступа и секрет токена доступа. Надежно сохраните эти учетные данные; они понадобятся вам для аутентификации ваших запросов к API Twitter.

Проект

Теперь приступим к кодированию. Создайте новый каталог в своей системе и откройте там консоль.

 mkdir metrics-dashboard cd metrics-dashboard

Обязательно инициализируйте репозиторий Git, а затем подключите его к проекту GitHub.

Инициализируйте проект node.js и установите несколько пакетов, которые нам понадобятся для аутентификации с помощью API.

 npm init npm i dotenv oauth-1.0a crypto

Создайте файл .env со всеми ключами, полученными от X ранее. НЕ фиксируйте это в репозитории. Это сделано только для локального тестирования сценария.

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

Чтобы избежать этого, создайте файл .gitignore . Пример ниже содержит другие пути, которые мы хотели бы игнорировать.

 node_modules/ .env .DS_Store dashboard/data/

Получение данных

Сначала мы напишем скрипт Node.js, который будет получать статистику подписчиков из API вашей платформы. Мы будем использовать стандартную библиотеку выборки для вызовов 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

Вы должны увидеть свои показатели X в выходных данных, а также в файле testoutput :

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

Вы можете протестировать скрипт, отредактировав файл testouput, добавив одинарные кавычки вокруг JSON, а затем выполнив следующую команду. При необходимости отредактируйте файл, поскольку среда 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 сгенерировать его для меня.

Создайте файл index.html в папке dashboard . Мы не используем основной каталог нашего проекта, чтобы избежать размещения кода получения данных рядом с 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

Действие должно развернуть страницу. URL-адрес можно найти в настройках проекта GitHub или в разделе «Действия» выходных данных рабочего процесса.

Опять же, вы можете найти мой здесь: https://horosin.github.io/metrics-dashboard/ .

Краткое содержание

И вот оно! Полноценная автоматизированная система для отслеживания показателей социальных сетей (X), автоматического получения данных, сохранения исторических данных и визуализации тенденций. Благодаря этой настройке вы можете расширить функциональность на другие платформы и показатели, создав комплексную панель мониторинга для всех ваших аналитических потребностей. Дайте мне знать, если вы хотели бы об этом прочитать.

Подпишитесь на мой профиль, указав свой адрес электронной почты слева, и будьте в курсе моих статей!

Не забудьте подписаться на меня в Твиттере @horosin и подписаться на рассылку новостей моего блога, чтобы получать больше советов и идей!

Если у вас нет Twitter, вы также можете подписаться на меня в LinkedIn .