Мне нравится, когда моим целям присваиваются осязаемые показатели. В идеале, это должно автоматически отслеживаться, и должен быть механизм привлечения меня к ответственности.  Одна из моих целей в этом году — публиковать больше и более открыто рассказывать о том, как я работаю и что мне интересно в моей области знаний. Какие метрики я могу к этому прикрепить? Один из них — это, конечно, несколько постов; другой может заключаться в том, сколько людей находят их достаточно интересными, чтобы подписаться на меня.  Чтобы увидеть, как эти показатели меняются со временем, я решил создать небольшую панель мониторинга, которая будет отслеживать их исторические значения. Я решил начать с 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. Вот пошаговое руководство, которое поможет вам начать.    : перейдите на   и войдите в свою учетную запись Twitter. Если у вас нет учетной записи Twitter, вам необходимо ее создать. Заполните заявку/зарегистрируйтесь. Перейдите на сайт разработчика Twitter сайт разработчика Twitter    : получите доступ к   . Перейдите на панель разработчика панели разработчика в Твиттере    : нажмите «Создать проект». Вам будет предложено указать название проекта, описание и вариант использования. Заполните их в соответствии с потребностями вашего проекта. Создать проект    . После создания проекта у вас будет возможность создать приложение в этом проекте. Нажмите «Создать приложение» и введите необходимые данные, такие как имя приложения. Создайте приложение в своем проекте    . После создания приложения вы будете перенаправлены на страницу со сведениями о нем, включая ключ 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/  Получение данных  Сначала мы напишем скрипт Node.js, который будет получать статистику подписчиков из API вашей платформы. Мы будем использовать стандартную библиотеку выборки для вызовов API и   для аутентификации с помощью X. После получения данных мы запишем результаты в файл JSON, который будет служить нашей базой данных. oauth-1.0a  Это будет обрабатываться отдельным скриптом. Чтобы сделать вывод доступным для него, мы запишем его в файл среды, доступный в 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 "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  Запустите действие вручную, зафиксировав код, а затем перейдя в раздел «Действия» вашего проекта на GitHub и запустив его оттуда.  Панель приборов  Хорошо, а как насчет представления данных? Я не хотел возиться с простым HTML, поэтому попросил ChatGPT сгенерировать его для меня.  Создайте файл   в папке   . Мы не используем основной каталог нашего проекта, чтобы избежать размещения кода получения данных рядом с HTML. index.html dashboard   <!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

2022 - HackerNoon Contributor of the Year - Cicd

Join free programming newsletter!

Nominated for 2022 - HackerNoon Contributor of the Year - Cicd

Software Team Lead

Этот звук создан на языке оригинала истории!

Как создать панель мониторинга для отслеживания статистики ваших подписчиков в Twitter/X с помощью API и действий GitHub

About Author

КОММЕНТАРИИ

БИРКИ

ЭТА СТАТЬЯ БЫЛА ПРЕДСТАВЛЕНА В

Related Stories

Telegram: мост Крипто-острова на материк

Нажмите, чтобы заработать: Telegram может привлечь следующие 10 миллиардов пользователей криптовалюты до Соланы

Хотите выиграть конкурс HackerNoon? Вот что рекомендуют победители конкурса #crypto-api

Краткое введение в теорию мозга Больцмана

Telegram: мост Крипто-острова на материк

Нажмите, чтобы заработать: Telegram может привлечь следующие 10 миллиардов пользователей криптовалюты до Соланы

Хотите выиграть конкурс HackerNoon? Вот что рекомендуют победители конкурса #crypto-api

Краткое введение в теорию мозга Больцмана

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps