Как показать количество хэштегов из Twitter на веб-странице - PullRequest
Новая
       90

Как показать количество хэштегов из Twitter на веб-странице

0 голосов
/ 07 сентября 2018

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

У меня есть аккаунт в Twitter Dev, но я не понимаю, как получить счетчик хешей где-нибудь в документации.

https://developer.twitter.com/en/docs

Я также нашел это: https://github.com/cstephen/hashtag-count, который делает то, что я хочу, но через npm. Я не знаю, как бы я взял этот объект из gulpfile в vanilla javascript, чтобы показать его в html. Кроме того, наличие его в gulp означало бы, что мне нужно настроить бегун на сервере.

Пока у меня есть это:

Путь глотка: 

var hc = new HashtagCount({
  'consumer_key': '...',
  'consumer_secret': '...',
  'access_token': '...',
  'access_token_secret': '...'
});

// Array of hashtags to tally. Do not include # prefix.
var hashtags = ['superbowl', 'pizza', 'beer'];

// Hashtag tallies for each time interval will be added to the results object.
var interval = '30 seconds';

// Delete data older than this.
var history = '5 minutes';

// Called at the end of each time interval.
var intervalCb = function (err, results) {
  if (err) {
    console.error(err);
  } else {
    console.log(results);
  }
};

// Open a connection to Twitter's Streaming API and start capturing tweets!
hc.start({
  hashtags: hashtags,       // required
  interval: interval,       // required
  history: history,         // optional
  intervalCb: intervalCb,   // optional
});

Если я пойду по этому маршруту,

A: Как я могу получить этот объект в JavaScript, чтобы показать целое число в HTML?

B: Как бы я настроил это на сервере для постепенного запуска задачи gulp?

Мне не хватает более простого решения?

UPDATE enter image description here

У меня работает версия npm exmaple. Мне просто нужно получить эти данные из Gulp в HTML.

Мой HTML пока 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hashtag Counter</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <h1>Total Hashtag Count</h1>
    <p id="hashCount">Replace this string with the hashtag count</p>
</body>
</html>

1 Ответ

0 голосов
/ 07 сентября 2018

Если вы прочтете далее страницу github, вы найдете Объект результата

Объект результатов

Объект результатов имеет одинаковую структуру независимо от того, появляется ли он вintervalCb или готовые обратные вызовы.Он принимает следующую форму, где отметка времени является строкой ISO во времени UTC, представляющей начало каждого интервала: 

{
  '2017-01-16T00:00:10.606Z': { 'superbowl': 6, 'pizza': 1, 'beer': 8 },
  '2017-01-16T00:01:10.610Z': { 'superbowl': 7, 'pizza': 1, 'beer': 4 },
  '2017-01-16T00:02:10.612Z': { 'superbowl': 3, 'pizza': 1, 'beer': 0 }
}

Зная, что мы можем использовать ее в разделе результатов, как этот 

// Called at the end of each time interval.
var intervalCb = function (err, results) {
  if (err) {

    console.error(err);

  } else {

    console.log( results );

    showHashTagsCount( twitterResults );
  }
};

Со всей информацией, вот пример функции: 

const twitterResults = {
  '2017-01-16T00:00:10.606Z': { 'superbowl': 6, 'pizza': 1, 'beer': 8 },
  '2017-01-16T00:01:10.610Z': { 'superbowl': 7, 'pizza': 1, 'beer': 4 },
  '2017-01-16T00:02:10.612Z': { 'superbowl': 3, 'pizza': 1, 'beer': 0 }
};

function showHashTagsCount ( results )
{
  let totalTagsCount = 
    // Get the tags name and count from results
    Object.values( results ).map( hashTags => {
      
      // Get the tags count from hashTags and reduce to get the total
      return Object.values( hashTags ).reduce( ( acc, tagCount ) => acc + tagCount, 0 );
    
    // Reduce to get the total tags count
    }).reduce( ( acc, tagsCount ) => acc + tagsCount, 0 );
  
  // Show hash tags count
  document.getElementById( 'hashCount' ).textContent = totalTagsCount;
}

// Usage example
showHashTagsCount( twitterResults );
<h1>Total Hashtag Count</h1>
<p id="hashCount">Replace this string with the hashtag count</p>
...