iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 10
1
Modern Web

我每天都接一個API系列 第 10

[30apis] Day 9 : Behance API + JSONP 用法

其實,一開始會有使用 API 的需求,除了需要更進一步的學習之外,最主要是因為有朋友來問我怎麼做網站。我有許多朋友都從是藝術相關工作,他們有做作品集的需求,但可能沒有什麼預算。雖然說架一個 Wordpress 給他們彈性高、對沒有程式背景的人來說也好修改,但如果只是個如名片般的靜態一頁網站,好像沒有需要使用到 Wordpress,何況租虛擬主機來架站也是一筆錢。
可是,如果直接給他們一張 HTML 檔,他們要修改更新作品的時候,又相當麻煩。

如果,他們可以使用現有的服務,比方說 Instagram 、Behance 或 Dribbble,然後將他們已經發表的作品跟作品集網站連起來,只要有人造訪作品集網站,都可以直接看到最新的作品近況,那是不是輕鬆許多?

所以今天就來使用 Behance API 來做這件事情。
Behance 是一個讓設計師跟藝術家分享作品的社群,是 Adobe 旗下的服務之一,以工程師的語彙來說,就是設計師的 Github 了。

來註冊一個帳號取得 API Key:

現在來看看文件:

在這邊,Behance 說如果要在 AJAX application 上使用這個 API 的話,必須以 JSONP 的方式呼叫 API。我還沒使用過 JSONP 呢。
來個教學:JSONP (JSON with Padding)

簡單來說,由於瀏覽器有個**同源政策 (Same Origin Policy),**如果 AJAX 請求要跨網域就會被擋下來。JSONP 是一個可以繞過此限制的做法。

一如 Behance API 文件 上面所寫,在 request url 後面加上 callback={你的callback},傳回來的資料就會被丟進 {你的callback} 裡面。

實作之前,我們來看看使用這個 API 可以抓到什麼東西。因為我想做的是個作品集,所以我需要的是抓特定用戶的作品,分類在 User 裡面:

一個抓特定使用者作品列的 API Request URL 是這樣的:

'GET', 'https://api.behance.net/v2/users/{username}/projects?client_id={API Key}

唯一必要的參數就是 username,剩下可選的參數有

  • sort :可依照 featured_date (default)appreciationsviewscommentspublished_date 來排列傳回來的物件
  • time:限制抓取的時間範圍,可以是 all (default)todayweekmonth
  • page:回傳結果頁面的頁數

現在來嘗試實作一下。

首先來把 Request URL 放進一個變數裡,在URL 後面加上 callback=myCallback ,然後寫一個在 HTML 裡產生一個 <script> 的 function:

var url =
  "https://api.behance.net/v2/users/vivianychen/projects?client_id=XrTXvo7P59I8TcXEqP0DDRgxi6Jmx5Rd&callback=myCallback";
  
function sendRequest() {
  var scriptTag = document.createElement("script");
  scriptTag.src = url;
  document.body.appendChild(scriptTag);
}

接著寫出那個 callback,在裡面把 Response log 出來:

function myCallback(response){
  console.log(response);
}

成功~

接下來試著把圖片放進網頁上。首先在 HTML 裡寫出要把圖片放進去的 div container:

// HTML

<div class="img"></div>
<div class="img"></div>
<div class="img"></div>

在 JS 裡抓取這些元素:

//因為 .img 有很多個,所以 imgBoxes 會抓出一個 array 來放所有的 div
var imgBoxes = document.querySelectorAll(".img");

myCallback 裡面寫一個傳圖的 function,再寫一個 loop 把取得的圖片一一放進 imgBoxes 這個抓到的 div container:

function myCallback(response) {

    function createImg(i){
    
    //製作要放入 imgBoxes 的 a tag 跟 img tag
    var cover = document.createElement("img");
    var url2img = document.createElement("a");

    //使 img tag 的 source attribute 等於 傳回來 response 裡第 i 個 project 的圖
    //使 a tag 的 href 等於 response 的第 i 個 project 的 url
    cover.src = response.projects[i].covers.original;
    url2img.href = response.projects[i].url;
    
    //第 i 個 imgBoxes 裡放入 a ,a 裡放入 img
    imgBoxes[i].appendChild(url2img);
    url2img.appendChild(cover);
    }
  for(var i = 0; i < 3; i++){
    //重複呼叫 createImg 並傳入 i 的值
    createImg(i);
  }
}

完成。
Codepen 連結


上一篇
[30apis] Day 8 : Wordnik API (字典)
下一篇
[30apis] Day 10 : Nutritionix API
系列文
我每天都接一個API30

尚未有邦友留言

立即登入留言