JavaScript에서 Unsplash API에 대한 초보자 안내서

요약:

이 안내서에서는 JavaScript에서 Unsplash API를 사용하는 과정을 안내합니다. API 키 얻기, 필요한 NPM 패키지 설치 및 API 호출을 위해 사진 검색과 같은 주제를 다룹니다. 또한 반환 된 이미지를 로컬 드라이브에 저장하는 방법을 배웁니다.

키 포인트:

1. Unsplash API는 JavaScript 개발자가 프로젝트에서 고품질 이미지를 찾고 사용할 수있는 강력한 도구입니다.

2. 이 안내서는 노드에 Unsplash 라이브러리 설치 및 사용에 중점을 둡니다.JS 프로젝트.

삼. Unsplash API를 시작하기 전에 JavaScript에 대한 기본 지식을 갖는 것이 좋습니다.

4. API에 액세스하려면 Unsplash 개발자 계정이 필요합니다.

5. JavaScript를 사용하여 블로깅을 자동화하는 자습서에는 OpenAI API에 대한 이전 자습서가 포함되어 있습니다.

6. 이 안내서의 전체 코드는 Github에서 찾을 수 있습니다.

7. Unsplash API를 사용하려면 Unsplash-JS 및 Node-Fetch와 같은 관련 NPM 패키지를 설치하십시오.

8. 프로젝트의 폴더 구조에는 이미지 및 Unsplash 폴더가 포함되어야합니다.

9. 계정에 가입하고 Unsplash 웹 사이트에 새 응용 프로그램을 등록하여 Unsplash API 키를 얻을 수 있습니다.

10. API 키를 얻은 후 JavaScript 코드에서 Unsplash API 인스턴스를 만듭니다.

11. Unsplash API를 사용하여 사진을 검색하고 API 전화를 걸고 JavaScript에서 반환 된 사진을 가져 오십시오.

12. 페이지, PER_PAGE 및 방향과 같은 API 호출의 매개 변수를 사용자 정의 할 수 있습니다.

13. 응답에서 임의의 사진을 선택하고 URL 검색.

14. 노드 페치 패키지를 사용하여 사진을 다운로드하고 로컬 드라이브에 저장하십시오.

15. Unsplash 지침에 따라 사진에 대한 적절한 속성을 포함해야합니다.

질문:

1. Unsplash API는 무엇입니까??
Unsplash API는 JavaScript 개발자가 프로젝트에서 고품질 이미지를 찾고 사용할 수있는 도구입니다.

2. Unsplash API 사용을 시작하는 데 필요한 지식?
Unsplash API를 사용하기 전에 JavaScript에 대한 기본 지식이 권장됩니다.

삼. Unsplash API 키를 얻으려면 어떻게해야합니까??
Unsplash API 키를 얻으려면 Unsplash 웹 사이트에서 계정에 가입하고 새 응용 프로그램을 등록해야합니다.

4. Unsplash API를 통합하는 데 필요한 NPM 패키지?
Unsplash API를 JavaScript 프로젝트에 통합하려면 Unsplash-JS 및 Node-Fetch 패키지를 설치해야합니다.

5. Unsplash API를 사용하여 프로젝트의 폴더 구조를 제공 할 수 있습니까??
프로젝트에는 이미지 및 Unsplash와 같은 폴더와 다른 필수 파일이 포함되어야합니다.

6. ?
Unsplash API가 제공 한 메소드를 사용하여 API 호출을 할 수 있으며 쿼리 및 페이지와 같은 매개 변수를 지정합니다.

7. Unsplash API에서 내 로컬 드라이브로 반환 된 사진을 저장할 수 있습니까??
.

8. ?
캡션에는 Unsplash 지침에 따라 사진 작가에 대한 귀속이 포함되어야합니다.

9. 이 안내서의 전체 코드에 어떻게 액세스 할 수 있습니까??
이 안내서의 전체 코드는 제공된 링크를 사용하여 Github에서 찾을 수 있습니다.

10. OpenAI API에서 이전 자습서의 목적을 설명해 주시겠습니까??
이 시리즈의 이전 튜토리얼은 프로젝트 설정을 다루고 JavaScript 자동화로 우리가 달성하려는 것에 대한 아이디어를 제공합니다.

11. 페이지 및 방향과 같은 API 호출의 매개 변수를 사용자 정의하려면 어떻게해야합니까??
.

12. Unsplash API로 제가 할 수있는 API 요청 수에 제한이 있습니까??
. 자세한 내용은 문서를 확인하십시오.

답변:

1. Unsplash API는 JavaScript 개발자가 프로젝트에서 고품질 이미지를 쉽게 찾고 사용할 수있는 강력한 도구입니다. 초보자이든 숙련 된 개발자이든, Unsplash API는 방대한 무료 사용 이미지 라이브러리를 제공하여 프로젝트를 크게 향상시킬 수 있습니다. 이미지를 수동으로 검색 할 필요가 없으며 이미지를 코드에 직접 통합하는 쉬운 방법을 제공합니다.

2. Unsplash API를 사용하기 전에 JavaScript에 대한 기본 지식을 갖는 것이 좋습니다. 이 안내서에 사용 된 JavaScript 코드 스 니펫을 이해하고 작업하는 데 도움이됩니다. JavaScript를 처음 사용하는 경우 시작하는 데 도움이되는 수많은 온라인 리소스와 튜토리얼이 있습니다. 더 진행하기 전에 JavaScript의 기본 사항을 배우는 데 시간을 투자 할 가치가 있습니다.

삼. Unsplash API에 액세스하려면 API 키가 필요합니다. API 키를 얻는 것은 간단한 프로세스입니다. 먼저 Unsplash 웹 사이트로 이동하여 계정에 가입하십시오. 계정이 있으면 웹 사이트의 개발자 섹션으로 이동하십시오. 여기에서 새 응용 프로그램을 등록하는 옵션을 찾을 수 있습니다. “새 응용 프로그램 등록”버튼을 클릭하고 필요한 세부 정보를 작성하십시오. .

4. Unsplash API를 JavaScript 프로젝트에 통합하려면 설치 해야하는 몇 가지 NPM 패키지가 있습니다. . . 노드 페치 패키지는 Unsplash API에 HTTP 요청을 작성하고 원하는 데이터를 검색하는 데 사용됩니다. 이 패키지를 설치하려면 터미널의 프로젝트 디렉토리로 이동하여 “NPM 설치 UNSPLASH-JS 노드 페치”명령을 실행하십시오. 필요한 패키지를 설치하고 프로젝트의 종속성에 추가합니다.

. 노드에서 Unsplash API로 작업 할 때.JS 프로젝트, 파일과 폴더를 올바르게 구성하는 것이 중요합니다. . “이미지”폴더는 Unsplash API에서 다운로드 된 사진을 저장하는 데 사용되며 “Unsplash”폴더에는 API와 상호 작용하기위한 JavaScript 코드가 포함됩니다. 이 폴더가 프로젝트 디렉토리 구조 내에 적절한 위치에 배치되어 있는지 확인하십시오.

6. Unsplash API를 사용하여 사진을 검색하기 위해 API 호출을하는 것은 비교적 간단합니다. Unsplash-JS 패키지를 사용하여 API 키를 매개 변수로 전달하여 Unsplash API의 인스턴스를 만들 수 있습니다. API 인스턴스가 있으면 메소드를 사용하여 다양한 유형의 API 호출을 할 수 있습니다. 예를 들어 “검색을 사용할 수 있습니다.query를 기반으로 사진을 검색하는 GetPhotos “메소드. 페이지, PER_PAGE 및 방향과 같은 추가 매개 변수를 제공하여 검색 결과를 개선 할 수 있습니다. 각 API 호출은 응답을 반환합니다. 여기에는 사진의 URL과 같이 작업 해야하는 데이터가 포함되어 있습니다.

7. 예, 반환 된 사진을 Unsplash API에서 로컬 드라이브로 저장할 수 있습니다. 이를 달성하려면 원격 서버에서 파일을 가져오고 다운로드 할 수있는 노드 페치 패키지를 사용할 수 있습니다. API 호출을하고 저장하려는 사진의 URL을 얻은 후 Node-Fetch 패키지를 사용하여 사진을 다운로드 할 수 있습니다. .. 다운로드 된 사진을 저장하고 사용할 때 Unsplash API의 이용 약관을 사용해야합니다.

8. 다운로드 된 사진을 저장할 때는 Unsplash 지침에 따라 적절한 속성을 포함시키는 것이 중요합니다. Unsplash는 무료 사용을 위해 이미지를 제공하는 사진 작가에게 신용을 제공하기 위해 귀속에 대한 구체적인 요구 사항이 있습니다. . Unsplash가 언급 한 특정 속성 가이드 라인을 두 번 확인하고 프로젝트에서 사진을 사용할 때 준수해야합니다. .

9. 이 가이드의 전체 코드는 추가 리소스와 함께 Github에서 찾을 수 있습니다. 제공된 링크는 코드 및 관련 문서에 액세스 할 수있는 Github 저장소로 안내합니다. 코드에는 Unsplash API 키를 얻는 방법에 대한 예제가 포함되어 있으며 필요한 NPM 패키지를 설치하고 API 호출을 통해 사진 검색. 또한, 반환 된 사진을 Unsplash Adatribution Guidelines 및 Unsplash API 사용의 기타 관련 측면을 준수하는 지역 드라이브에 반환 된 사진을 저장하는 것을 다룹니다.

10. 이 시리즈의 이전 튜토리얼은 JavaScript의 OpenAI API 사용에 중점을 둡니다. JavaScript를 사용하여 블로그 작업을 자동화하고 OpenAI API 작업을위한 프로젝트를 설정하는 방법을 보여줍니다. Unsplash API와 직접 관련이 없지만 이전 자습서는 일반적으로 API 작업에 대한 귀중한 통찰력을 제공하고 JavaScript를 사용하여 다양한 작업을 자동화하는 힘을 보여줍니다. 이전 자습서를 아직 겪지 않았다면이 시리즈에 사용 된 개념과 기술에 대한 포괄적 인 이해를 얻으려면 확인하는 것이 좋습니다.

11. Unsplash API를 사용하여 API 호출을 할 때 사진을 검색 할 때 다양한 매개 변수를 사용자 정의 할 수있는 유연성이 있습니다. 예를 들어, 다른 검색 결과 세트를 검색하기 위해 페이지 매개 변수를 지정할 수 있습니다. 페이지 매김을 구현하거나 검색 결과의 다른 페이지에서 이미지를 얻으려면 유용 할 수 있습니다. 마찬가지로 API 응답 당 반환 된 사진 수를 제어하기 위해 PER_PAGE 매개 변수를 설정할 수 있습니다. . 또한 방향 매개 변수를 사용하면 풍경이나 초상화와 같은 방향을 기반으로 사진을 필터링 할 수 있습니다. .

. 예, Unsplash API를 사용하여 특히 데모 앱의 API 요청 수에 제한이 있습니다. 이 한도는 학대를 방지하고 API의 공정한 사용을 보장하도록 설계되었습니다. 응용 프로그램을 등록하고 API 키를 얻는 경우 일반적으로 시간당 또는 하루에 허용되는 요청 수에 미리 정의 된 제한이 있습니다. 신청서에 적용되는 특정 제한 사항을 이해하려면 Unsplash API의 문서 또는 서비스 약관을 검토하는 것이 필수적입니다. 기본 제한을 초과 할 것으로 예상되는 경우, 비소 규모의 대체 옵션을 조사해야 할 수도 있습니다.

초보자’s javaScript에서 unsplash API에 대한 s 안내서

Unsplash를 볼 수 있습니다’S 통계는 실시간이지만 다음은 몇 가지 총알 포인트가 있습니다

Unsplash에는 API가 있습니다

м е р р регистрировали подо 착취 ay rzа ф징퍼, исход 넘추 타 ay сети. с пом거나 ю это인지 страницы м주는 сможем определить, что з просы отправляете именно, а не робот. почему это могло произойти?

эта страница отобр은 Âется в тех Â сл 나아가 · 추, ∈огда автомати인지 скими системи Google регтрирр곽막우 ся 테 추 법구추 추 님. котор ое нарушают условия использования. странира перестанет отобр은 жаться после того, как эти запросы прекратся. до отого момента для использования слу 갑기 Google необ 영향.

источником запросов может служить вредоносное по, подключаемые модули браузера или скрипт, насое 밑 밑 밑보관 сзлку ыапросов. если вл используете общий доступ в интернет, проблема 갑새 갑새 딘 악 с сомпером с с с с с саким 테 IP-адесом → Â 궤. обратитесь к своему системному администратору. подроб 변태.

проверка по слову может татак뿐 아니라 자기 появляться, если вы В 갑 갑격적 В Â водите слож ные запросы, об협 ораспронон혁 ™ rапротототототототото술도 있습니다. емами, или вводите запросы очень часто.

초보자’

Unsplash API는 경험 수준에 관계없이 모든 JavaScript 개발자에게 훌륭한 도구입니다. 프로젝트에서 고품질 이미지를 쉽게 찾고 사용할 수 있습니다. 이 안내서는 단계별로 노드에 Unsplash 라이브러리를 설치하는 방법을 보여줍니다.JS Project, API 호출을 통해 사진을 검색하고 반환 된 이미지를 로컬 드라이브에 저장하십시오. 이 가이드를 사용하면 Unsplash API 사용 전문가가됩니다.

헤드 업,이 튜토리얼. 첫 번째 튜토리얼을 확인하는 것이 좋습니다, “JavaScript의 OpenAI API 소개” ’여기에서 성취하려고합니다.

이 링크에서 Github에서 전체 코드를 찾을 수 있습니다.

전제 조건

  • 준비된 노드.
  • Unsplash 개발자 계정

당신이’LL 배우십시오

  • Unsplash API 키를 얻는 방법 : .
  • 관련 NPM 패키지를 설치하는 방법 : 너’ll Unsplash API를 JavaScript 프로젝트에 통합하는 데 도움이되는 다양한 패키지에 대해 알아보십시오.
  • Unsplash API 호출에 대한 JavaScript 코드 스 니펫 : 이 가이드를 통해, 당신’ll Unsplash API에 대한 이해를 더 잘 이해하고 JavaScript에서 사진을 검색하고 반환하기 위해 통화하는 방법. 또한 J반환 된 사진을 로컬 드라이브에 저장하기위한 avaScript 코드.

  1. Unsplash 웹 사이트로 이동하여 계정에 가입하십시오.
  2. 계정이 있으면 웹 사이트의 개발자 섹션으로 이동하여 클릭하십시오 “새 응용 프로그램을 등록하십시오” . (참고 : 데모 앱은 제한됩니다 50 시간당 가장 인사.
  3. 양식을 제출 한 후에는 Unsplash API에 액세스하는 데 사용할 수있는 API 키가 제공됩니다.

NPM 패키지를 설치하십시오

좋아,이 시리즈의 마지막 자습서에 대한 후속 조치로’LL을 실행해야합니다. NPM을 실행해야합니다. 이것은 빠른 단계입니다’당신을 확인하십시오’이 튜토리얼을 통해 앞으로 나아가고 당신이 무엇을 바탕으로하는지’전에 배웠습니다.

NPM Unsplash-JS 노드 페치를 설치하십시오

우리의 폴더 구조에는 이제 새로운 것을 포함합니다 이미지 그리고 Unsplash 프로젝트의 폴더. 

�� wordpress-automation 
 
┣src 
┃ ┃ 이미지 
노트북에서 코딩.JPG 
┃ ┃ �� 오페나이 
┃ ┃ ┗ Openai.JS 
┃ ┃ �� ��splash 
┃ ┃ ┗ ┃ ┃splash. 
┣ .env 
┣ .Gitignore 
┣ .Prettierrc 
┣ 색인.JS 
┣ 패키지 잠금.JSON 
┗ 패키지.JSON

Unsplash API를 호출하고 반환 된 사진을 저장하십시오

// unsplash.JS

수입 < createApi >
'노드 페치'에서 가져온 가져 오기;
'fs'에서 fs 가져 오기;


Export Class Unsplash 생성자 (Accesskey) // 제공된 액세스 키를 사용하여 Unsplash API 인스턴스 생성 
이것.unsplash = createapi (< accessKey, fetch >); 

 
Async getPhoto (유형, 쿼리, page = 1, per_page = 8, Orientation = 'landscape') 시도를 시도하지 않으려면 Unsplash API에 요청을 보내서 사진을 검색하십시오 
.Unsplash.찾다.GetPhotos (쿼리, 
페이지, 
페이지 당, 
정위, 
>);
 
 
Const Arandomphoto = 응답.응답..바닥 (수학.랜덤 () * 8); 
// 일반 크기 사진 URL을 얻습니다 
.URL. 
// 사진을 가져옵니다 
const photo = 기다려서 페치 (Photourl); 
// 사진 버퍼를 가져옵니다 
const photobuffer = 기다립니다.ArrayBuffer (); 
// 사진의 캡션 생성 - Unsplash 속성 스타일로 
const 캡션 =` 
 
~의 사진 
 
"rel ="noopener ugc nofollow "target ="_ blank "> 
$ 
 
~에 
 
Unsplash 
 
`;;
 
// "type"매개 변수의 값을 확인하고 해당 코드 블록을 실행합니다 
스위치 (유형) 케이스 '버퍼': 
// 사진 버퍼를 UINT8ARRAY로 변환합니다 
const data = new uint8array (Photobuffer); 
콘솔.로그 (`$.JPG 버퍼 준비`); 
// 사진의 버퍼와 속성이 포함 된 개체를 반환합니다 
반환 속성 : 캡션 : 캡션, 
제목 : 쿼리.tolowercase (), 
alt_text :`$`의 이미지, 
, 
버퍼 : 데이터 
>; 
 
 
const image = 버퍼.(Photobuffer)에서; 
// 사진의 파일 경로를 만듭니다 
const filepath =`src/images/$.jpg` 
// 사진을 파일 시스템에 쓰십시오 
.약속.WriteFile (Filepath, image); 
콘솔..JPG Saved`); 
 
기본: 
.로그 (`유효하지 않은 유형 : $`); 
널 리턴; 
> 
> 캐치 (오류) 콘솔.로그 (오류); 
 
> 
>

.JS,

  • Unsplash-JS 패키지의 CreateApi 메소드는 Unsplash API 인스턴스를 만드는 데 사용됩니다.
  • 가져 오기 패키지는 사진 다운로드를 요청하는 데 사용됩니다.
  • .

그런 다음 전체 코드를 감싸는 비동기 기능 getphoto를 정의합니다. 기능 내부에서는 Try-Catch 블록을 사용하여 요청을하거나 사진 저장 중에 발생할 수있는 오류를 처리합니다.

시도 블록 내에서 검색을 사용합니다.getphotos (params) Unsplash API의 매개 변수 쿼리, 페이지, PER_PAGE 및 방향으로 사진을 검색하는 방법 .

또한 PER_Page, Page, Orientation 및 Query를 사용자 정의하여 원하는 특정 사진을 얻을 수 있으며 결과에 대한 JSON 응답을 확인하고 URL을 변경하여 다른 크기의 이미지를 사용할 수 있습니다.생, URL.전체, URL.정기적 인 등.

..정기적으로 응답을 기다립니다.

ArrayBuffer () 메소드는 사진 버퍼를 얻는 것입니다.

나는 FS를 사용합니다.약속.writefile (filepath, image) 메소드 사진을 로컬 드라이브에 저장하려면 버퍼를 파일에 작성합니다.

.

팁 : API에서 반환 한 사진 중 하나를 무작위로 선택하려면 수학을 사용할 수 있습니다.바닥 (수학.. 이것은 0과 9 사이의 난수를 생성하며, 이는 선택하려는 결과의 색인으로 사용할 수 있습니다.

// 색인.JS

수입 < Unsplash >에서 "./src/unsplash/unsplash.JS ";
'dotenv'에서 dotenv 가져 오기;
.config ();

const unsplash = 새로운 unsplash (프로세스.env.
unsplash를 기다리고 있습니다.getPhoto ( '파일', '랩톱에서 코딩');

색인.JS 파일, 우리는 가져 왔습니다 Unsplash.JS Unsplash_key를 통과하여 클래스 및 새 인스턴스를 만들었습니다 . API 키를 a에 저장했습니다 .env 추가 보안을위한 파일. 그런 다음 우리는 원하는 응답 유형과 사진 검색 문구를 전달하여 GetPhoto 방법을 실행했습니다. 그리고 Voila! 우리는 이름이 지정된 이미지를 저장했습니다 노트북에서 코딩. SRC/ 이미지/ 폴더에서.

결론

Unsplash API는 프로젝트에서 아름다운 이미지를 쉽게 찾고 사용할 수있는 강력한 도구입니다. Unsplash-JS 패키지는 JavaScript에서 API 호출 프로세스를 단순화합니다.

이 안내서에서는 필요한 패키지를 설치하고 API 호출을하여 사진 검색을 수행하고 반환 된 이미지를 로컬 드라이브에 저장하는 방법을 배웠습니다. 또한 오류를 처리하는 방법과 API가 반환 한 결과에서 임의의 사진에 액세스하는 방법을 배웠습니다.

다음 단계로,이를 바탕으로 Pagination과 같은 Unsplash API에서 제공되는 더 많은 옵션을 탐색하고, 다양한 크기의 사진을 다운로드하고, 다른 방향의 사진을 다운로드하며, Unsplash가 제공 한 지침을 따르면 상업용 및 비상업적 사용에 사진을 사용할 수 있습니다. Axios와 같은 다양한 라이브러리와 함께 API를 사용하고 Unsplash API가 제공하는 다른 기능을 탐색 할 수도 있습니다.

추가 읽기

JavaScript 튜토리얼 시리즈를 사용한 블로그 자동화

  • Openai API (&이었다) : 자동화 된 컨텐츠 생성
  • Unsplash API: 블로그 게시물의 자동 이미지 선택
  • WordPress API: 손쉬운 블로그 컨텐츠 업로드
  • 블로깅 자동화: 모든 것을 하나로 모으십시오

공식 문서화

splash&rsquo;S API

Unsplash는 세계에서 900k 이상의 무료, 품질, 고화질, 면허없는 사진의 가장 빠르게 성장하는 라이브러리입니다. Unsplash의 모든 사진은 개인 및 상업용으로 무료로 사용할 수 있습니다. 지불금 및 라이센스 가입이 필요하지 않습니다.

Unsplash는 품질, 유용한 사진을 찾는 경험을 더 쉽고 빠르며 그 어느 때보 다 더 좋게 만드는 경험을 제공합니다&rsquo;&rsquo;.

통계

Unsplash를 볼 수 있습니다&rsquo;S 통계는 실시간이지만 다음은 몇 가지 총알 포인트가 있습니다

127K+ 사진 작가 그리고 사용합니다 70 만 이상의 크리에이티브
⚡ 110 억+ 사진 매달 제공됩니다
⬇️ 5 천 5 백만+ 사진 매월 다운로드됩니다
20 장의 사진 매 순간마다 다운로드됩니다 (상황에 따라&rsquo;

Unsplash 라이브러리

라이브러리의 품질과 접근성은 오늘날 존재하는 전통적인 재고 사진 사이트와 비 플래시를 차별화하는 것입니다.

  • 수동 큐 레이션
    우리의 편집 팀은 Unsplash에 배포 된 모든 사진을 선별하여 도서관이 정통, 세계적 수준의 고해상도, 사진으로 업데이트되도록합니다. 더 이상 치즈 맛이없고 스톡 사진. .

  • . 만료 날짜로 지불 또는 혼란스러운 라이센스가 필요하지 않습니다.
  • 콘텐츠는 작업에 안전합니다
    Unsplash 사진은 PG-13이며 Unsplash에 노출되거나 Unsplash를 통해 배포되기 전에 수동으로 검토됩니다&rsquo;S API. 우리의 API는 또한 품질과 보안을 추가로 보장하기 위해 맞춤형 사진 모음을 가져올 수 있습니다.
  • 사진 독점
    Unsplash&rsquo;S 라이브러리는 Unsplash에만 전적으로 제공됩니다. 즉, 다른 재고 사진 사이트는 해당 사이트에서 이러한 사진을 호스팅하거나 배포 할 수 없습니다. Unsplash와의 파트너십은 독특하고 아름다운 콘텐츠에 액세스 할 수 있음을 의미합니다.

API 사례 연구

Unsplash&rsquo; 가장 강력한 사진 엔진 1000 명 이상의 파트너, 한 달에 10 억 명 이상 이상의 전화, 99 개 이상의 전화가있는 세계에서.지난 30 일 동안 998% 가동 시간.

Unsplash API를 사용하여 React 앱에서 사진을 검색합니다

최근에 앱에 기능을 추가하는 작업이 제공되어 사용자에게 객체와 함께 저장할 이미지를 선택할 수 있습니다. 다행히 API의 선택은 나에게 달려있었습니다! 불행히도, 나는했다&rsquo;t는 이전에 모든 이미지 API와 함께 작업했습니다! &rsquo;M은이 매우 사용하기 쉬운 인터페이스, 특히 React 프로젝트에 통합하는 맥락에서 내 경험을 공유합니다.

시작하기

API에 액세스하려면 먼저 Unsplash 개발자 페이지로 이동하여 계정을 만듭니다. &rsquo;. 그런 다음 방금 등록한 앱의 페이지에서 두 개의 고유 키를 기록하십시오&rsquo;API에 액세스하기 위해 주어졌습니다 &lsquo;&rsquo; 그리고 &lsquo;비밀 키,&rsquo; 당신이&rsquo;필요한 권한에 따라 특정 요청을 할 때 필요합니다.

우리는&rsquo;&rsquo;s API의 JavaScript 래퍼를 사용합니다. 프로젝트/패키지에 추가하려면.

$ npm Unsplash-JS를 설치하십시오

이 라이브러리는 App/Auth 키가 포함 된 Unsplash 객체의 인스턴스를 작성하여 API와 상호 작용할 수 있습니다. 여기에는 특정 엔드 포인트를 치고 특정 작업을 수행하기 위해 다양한 메소드를 호출 할 수 있습니다.

키워드로 검색

API는 놀라운 기능 깊이를 가지고 있지만 우리는&rsquo;. &rsquo;이 경우에 인기는 다음과 같습니다

https : // api를 얻으십시오..com/검색/사진

요청과 함께 보낼 수있는 매개 변수에는 다음이 포함됩니다. 검색어, 페이지 및 PER_PAGE 인 쿼리는 검색 할 페이지 번호 및 귀하의 항목 수입니다&rsquo;d 페이지 당 반환하는 것을 좋아합니다. 이 두 매개 변수는 각각 선택 사항이며 각각 1과 10으로 기본값입니다. 또한 컬렉션 ID를 전달하여 특정 컬렉션으로 검색을 좁히고 지형, 초상화 또는 정사각형 지향적 사진 만 검색 할 수 있습니다.

예를 들어 키워드가있는 사진 검색 &lsquo;개,&rsquo; Page 및 PER_Page의 기본값을 포함하면 다음과 같습니다

https : // api를 얻으십시오.Unsplash.com/검색/사진?

그런 다음 다음과 같은 객체를 반환합니다

 "총": 30536, 
"Total_Pages": 3054, 
"결과": [ 
 "ID": "do2wtawctc4", 
, 
"Updated_at": "2019-05-17T19 : 52 : 55-04 : 00", 
, 
, 
"색상": "#261D16", 
"설명": null, 
"Alt_description": "박스형 물 상자에서 회색과 흰색 허스키 식수", 
.Unsplash.?IXLIB = RB-1.2.1 & ixid = eyjhchbfawqiojcymdi4fq ", 
"전체": "https : // 이미지.Unsplash.?IXLIB = RB-1.2.1 & q = 85 & fm = jpg & crop = altropy & cs = srgb & ixid = eyjhchbfawqiojcymdi4fq ", 
.Unsplash.com/photo-153531384-411a247ccd73?.2.1 & q = 80 & fm = jpg & crup = altropy & cs = tinysrgb & w = 1080 & fit = max & ixid = eyjhchbfawqiojcymdi4fq ", 
"작은": "https : // 이미지..?IXLIB = RB-1.2., 
"엄지": "https : // 이미지..com/photo-153531384-411a247ccd73?.2.1 & q = 80 & fm = jpg & crup = altropy & cs = tinysrgb & w = 200 & fit = max & ixid = eyjhchbfawqiojcymdi4fq " 
>, 
"링크": "self": "https : // api..com/photos/do2wtawctc4 ", 
"html": "https : // unsplash.com/photos/do2wtawctc4 ", 
"다운로드": "https : // unsplash.com/photos/do2wtawctc4/다운로드 ", 
.Unsplash.com/photos/do2wtawctc4/다운로드 " 
,// .

따라서 결과 배열에서 링크, 태그, 설명 등을 가져올 수 있습니다. 각 사진에서 꽤 쉽게 돌아 왔습니다.

그러나 우리가 멀리 가기 전에 먼저 React 앱에 물건을 설정해야합니다. 액세스 키 및 비밀 키로 Unsplash 인스턴스를 만듭니다

'unsplash-js'에서 unsplash 가져 오기;

, 
비밀: ""
>);

이 라이브러리는 또한 React Native Integration도 포함되어 있습니다.

이제 API의 엔드 포인트에 대한 액세스를 제공하는 Unsplash에서 다양한 인스턴스 메소드를 호출 할 수 있습니다. &rsquo;키워드로 사진을 검색하십시오&rsquo;검색을 사용합니다.사진 (키워드, 페이지, per_page) . 이 방법은 최대 세 가지 인수, 즉 키워드, 문자열이 필요하며 다른 두 인수, 페이지 및 per_page는 선택 사항입니다.

Unsplash.찾다.사진 ( "고양이", 1) 
. 
. 
>);

위의 코드는 또한 API 응답을 JSON 데이터로 변환하는 작업을 수행하는 편리한 헬퍼 방법 Tojson을 사용합니다. . 

Unsplash 가져 오기, < toJson >'unsplash-js에서

그리고 그&rsquo;그게! 이제 당신&rsquo;Ve는 당신의 작은 마음이 원하는 것을 할 수있는 사진 객체를 얻었습니다!