iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
1

今天來嘗試一下關於新聞的 API,選的是 News API

說起來,為了要湊 30 個 API,我現在每天都在逛 ProgrammableWeb
我列了超過 10 個不同的主題類別,從鐵人賽前,就把 ProgrammableWeb 上的 API Categories 點開,一個個點開,看每個類別裡有哪些 API 特別有人在關注。而在新聞類別裡面,除了幾大歐美傳統新聞像是衛報(Guardian)、BBC、紐約時報(NY Times) ,更多的是網路新聞如 Reddit 、Hacker News 。

News API 不同於上述的新聞媒體自己生產內容,而是以超過 5000 個新聞媒體跟部落格作為來源做成索引,當然也包括上述所有知名新聞媒體。

感覺很棒吧。

來看看 News API 的文件

News API 的文件寫得非常簡潔易懂,他本身就是一個挺簡單的 API 。更好的是,在你註冊得到 API Key 之後,文件裡面全部的 code 都會自動補上你的 API Key,如此一來文件裡的範例都成了可以直接利用、剪下貼上的程式碼。

News API 有三個 endpoint

  • /v2/top-headlines 頭條:由一或多個來源產生的的頭條快報
  • /v2/everything 索引:可以搜索所有的超過 5000 筆來源產生的文章
  • /v2/sources 來源:從特定的來源獲取資訊

今天的作品裡面,我要用這個 API 在我做的網頁上 PO 出關於 Web API 最新的 20 條新聞。
在文件的 Get Started 頁面,就有範例使用關鍵字來列出相關文章。

直接跳到實作部分吧

由於是想要特地關鍵字,如果用頭條 endpoint 去找,大概找不到幾條,所以應該要用 /v2/everything
而 everything endpoint 一定要加上的參數是

  • q={ 關鍵字 }

可自己選擇要加的參數則是

  • sources 來源
  • from = { 年-月-日 } , to = { 年-月-日 }
  • sortBy 排序:選項有 relevancypopularitypublishedAt.

(還有很多其他參數,詳細請見文件)

var url = 'https://newsapi.org/v2/everything?' +
          'q=Web+API' +
          'apiKey=bdbf694617cf4656ba54e8f095033e16';

function makeRequest() {
  xhr = new XMLHttpRequest();
  xhr.onload = function() {
   var response = JSON.parse(this.responseText); 
   console.log(response);
  };
  xhr.open("GET",url,true);
  xhr.send();
}
makeRequest();

傳回來的 response:

我發現,傳回來的 Response 裏居然有一萬七千多條新聞,便再加上from={時間}&to={時間}sortBy 參數,花了一些時間調整時間格式:

var currentDate = new Date();
var year = currentDate.getFullYear();
var month = currentDate.getMonth()+1;
var date = currentDate.getDate();

var toNow = year + '-' + month + '-'+ date;
var daysAgo = 3;
var fromDaysAgo = year + '-' + month + '-'+ (date-daysAgo) ;

var url = 'https://newsapi.org/v2/everything?' +
          'q=Web+API' +
          '&sortBy=popularity'+
          '&from='+ fromDaysAgo +
          '&to='+ toNow +
          '&apiKey=bdbf694617cf4656ba54e8f095033e16';

然後在 .onload 裡面把標題、敘述、時間、作者、縮圖、URL 都 loop 出來:

  xhr.onload = function() {
   var response = JSON.parse(this.responseText); 
    for(let i=0; i<20; i++){
      var news = response.articles[i];
      var div = document.createElement('div');
      var a = document.createElement('a');
      var title = document.createElement('h2');
      var desc = document.createElement('p');
      var metadata = document.createElement('p');
      var img = document.createElement('img');
      
      container.appendChild(div);
      div.appendChild(img);
      div.appendChild(a);
      a.appendChild(title);
      div.appendChild(desc);
      div.appendChild(metadata);
      
      img.setAttribute('src',news.urlToImage);
      img.height = 200;
      a.setAttribute('href',news.url)
     
      title.innerHTML = news.title;
      desc.innerHTML = news.description;
      metadata.innerHTML = 'source: '+ news.source.name + " | " +'publish at: ' + news.publishedAt;
      
    }
  }

得到以下畫面:

完成。 Codepen Demo


上一篇
[30apis] Day 3 : Mapbox GL JS & Mapbox Direction API
下一篇
[30apis] Day 5 : Unsplash API
系列文
我每天都接一個API30

1 則留言

0
larrykkk
iT邦新手 5 級 ‧ 2018-11-20 20:47:46

這api好像沒反應了

我要留言

立即登入留言