仿Trello - 串接Unsplash API - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 18

Modern Web

React + GraphQL 全端練習筆記系列第 18 篇

仿Trello - 串接Unsplash API

12th鐵人賽 react reactjs unsplash

Jasper

團隊Outcome First

2020-10-01 11:18:01

3600 瀏覽

分享至

本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。

Trello看板有個功能是隨機從Unsplash抓照片，用作看板背景，讓畫面變得美觀，我在專案中也試著仿製這個功能，這篇就筆記些如何使用Unsplash API的要點。

Unsplash Source

Unsplash Source是簡易式的Unsplash API，免費使用，在網址中串上一些簡單的參數就能取得照片連結。

這邊做一個Wallpaper部件，在裡面串Unsplash Source。

import React, { useState, useEffect } from "react";

export default function Wallpaper() {
    return (
        <img
          src="https://source.unsplash.com/1600x900/?nature,water"
          alt=""
          className="wallpaper"
        />
    );
}

用 img 標籤連結 unsplash source，就能顯示圖片。

筆記部分連結裡用的關鍵字:

隨機照片

https://source.unsplash.com/random

如果加上random關鍵字就會取得隨機照片

指定照片大小

https://source.unsplash.com/random/1600x900/

寬x高用來指定照片大小，固定串在最後面。

搜尋主題

https://source.unsplash.com/featured/?nature,water

以featured做結尾後在?後代入的字串用於主題式搜尋，多的主題以逗號分隔。

如果同時指定大小的話就不用featured關鍵字了

https://source.unsplash.com/1600x900/?nature,water

指定特定 id 照片

https://source.unsplash.com/WLUHO9A_xik/1600x900

如果有照片id串在根網址後面就能存取，如果要裁切大小依樣將寬x高串在最後面。

Unsplash API

Unsplash source只能取用部分 Unsplash API的功能，如果需要更多功能，就要辦Unsplash帳號，取得key後才能存取API。

辦好Unsplash帳號後在選單裡找到API頁面:

進頁面後點下大大的 New Application按鈕，答應使用條款後App端口就建立好了，在App頁面裡往下拉可以找到金鑰:

存取API用的是Access Key，這邊先記下來待會用。

unsplash-js

官方提供了一些套件，封裝好fetch照片的方法。

安裝:

npm i --save unsplash-js

除了js以外也有提供Ruby跟其他語言的套件。

套件安裝好後先建立unsplash實例，這裡要提供Access Key。

import Unsplash, { toJson } from "unsplash-js";

const unsplash = new Unsplash({
  accessKey: process.env.REACT_APP_UNSPLASH_ACCESS_KEY,
});

題外話: create-react-app建立的專案，在根目錄加入.env檔後，新建立的環境變數必須以 REACT_APP_ 起頭，不然編譯的時候會被忽略。

取得隨機照片

為了提供背景照片的選擇，這裡隨機搜尋 20 張照片。

unsplash.photos
      .getRandomPhoto({
        count: "20",    //回傳的照片數量，預設 1 ，最高 30
        query: "nature water",  //搜尋字串，用空白隔開
        orientation: "landscape",  //目標照片方向，可用值: landscape (橫向), portrait (縱向), squarish (方形)
      })
      .then(toJson)
      .then((json) => {
        //對json檔的處理
      })

取得的json檔裡有很多資訊，而最重要的莫過於照片連結，urls。

"urls": {
    "raw": "https://images.unsplash.com/photo-1417325384643-aac51acc9e5d",
    "full": "https://images.unsplash.com/photo-1417325384643-aac51acc9e5d?q=75&fm=jpg",
    "regular": "https://images.unsplash.com/photo-1417325384643-aac51acc9e5d?q=75&fm=jpg&w=1080&fit=max",
    "small": "https://images.unsplash.com/photo-1417325384643-aac51acc9e5d?q=75&fm=jpg&w=400&fit=max",
    "thumb": "https://images.unsplash.com/photo-1417325384643-aac51acc9e5d?q=75&fm=jpg&w=200&fit=max"
  },

API很貼心的提供不同大小、解析度的照片連結，不過如果有不同需求，可以用 raw的連結加上參數自己裁切。

//處理json檔案
const flitteredData = json.map((picData) => ({
          id: picData.id,
          url: `${picData.urls.raw}&fm=jpg&w=800&h=450&fit=min`,
        }));

fm: 照片格式
w , h: 限制照片寬高
fit: 指定照片變形成目標寬高的方法，min會將照片裁切成目標寬高的比例。

其他還有像是

crop: 裁切方式，要搭配fit=crop，跟設定w ,h使用
q: 壓縮品質， 0 - 100 ，預設 75

以上這些參數目前是以 imgix 的服務支撐，只要 imgix有支援的參數基本都能使用，不過Unsplash文件裡備註未來可能會取消使用imgix。

取得指定照片

當使用者在清單裡選擇了照片後，就用照片的id取得大小符合、解析度高的照片給背景用。

 unsplash.photos.getPhoto(id)
      .then(toJson)
      .then((json) => {
        updateWallpaperUrl(
          `${json.urls.raw}&fm=jpg&w=${window.innerWidth}&h=${window.innerHeight}&fit=min`
        );
      })

到這邊簡單舉例兩個 API的使用方式，Unsplash API還有許多其他功能，可以到文件裡看看。