Руководство для начинающих по UNSPLASH API в JavaScript

Краткое содержание:

В этом руководстве я проведу вас через процесс использования UNSPLASH API в JavaScript. Мы рассмотрим темы, такие как получение ключа API, установка необходимых пакетов NPM и сделаем вызовы API для поиска фотографий. Кроме того, мы узнаем, как сохранить возвращенные изображения на ваш местный диск.

Ключевые моменты:

1. Unsplash API является мощным инструментом для разработчиков JavaScript, чтобы найти и использовать высококачественные изображения в своих проектах.

2. Это руководство фокусируется на установке и использовании библиотеки Unsplash в узле.JS Project.

3. Рекомендуется иметь базовые знания JavaScript, прежде чем начать работу с Unsplash API.

4. Вам понадобится учетная запись разработчика Unsplash для доступа к API.

5. Серия учебных пособий по использованию JavaScript для автоматизации блогов включает в себя предыдущий учебник по API OpenAI, который стоит проверить.

6. Полный код для этого руководства можно найти на GitHub.

7. Чтобы использовать API UNSPLASH, установите соответствующие пакеты NPM, такие как Unsplash-JS и Node-Fetch.

8. Структура папок для вашего проекта должна включать изображения и папки с непредвиденной точки зрения.

9. Вы можете получить ключ UNSPLASH API, зарегистрировавшись на учетную запись и зарегистрировав новое приложение на веб -сайте Unsplash.

10. После получения ключа API создайте экземпляр UNSPLASH API в коде JavaScript.

11. Сделайте вызовы API для поиска фотографий, используя API UNSPLASH, и принести возвращенные фотографии в JavaScript.

12. Вы можете настроить параметры вызова API, такие как страница, per_page и ориентация.

13. Выберите случайную фотографию из ответа и получите его URL.

14. Используйте пакет Node-Quech, чтобы загрузить фотографию и сохранить его на локальный диск.

15. Не забудьте включить надлежащую атрибуцию для фотографии в соответствии с руководящими принципами Unsplash.

Вопросы:

1. Что такое Unsplash API?
API UNSPLASH-это инструмент, который позволяет разработчикам JavaScript находить и использовать высококачественные изображения в своих проектах.

2. Какие знания требуются, чтобы начать использовать API UNSPLASH?
Основные знания JavaScript рекомендуются перед использованием API UNSPLASH.

3. Как я могу получить ключ Unsplash API?
Чтобы получить ключ UNSPLASH API, вам необходимо зарегистрироваться на учетную запись на веб -сайте Unsplash и зарегистрировать новое приложение.

4. Какие пакеты NPM необходимы для интеграции UNSPLASH API?
Вам необходимо установить пакеты Unsplash-JS и Node-Quech, чтобы интегрировать API UNSPLASH в свой проект JavaScript.

5. Можете ли вы предоставить структуру папок для проекта, используя API UNSPLASH?
Проект должен включать папки, такие как изображения и Unsplash, вместе с другими необходимыми файлами.

6. Как я могу сделать вызов API для поиска фотографий, используя Unsplash API?
Вы можете сделать вызовы API, используя методы, предоставленные API UNSPLASH, указав такие параметры, как запрос и страница.

7. Можно ли сохранить возвращенные фотографии от Unsplash API на мой местный диск?
Да, вы можете использовать пакет Node-Quech для загрузки фотографий и сохранить их на свой локальный диск.

8. Что я должен включить в подпись для загруженной фотографии?
Подпись должна включать в себя атрибуцию фотографа в соответствии с руководящими принципами Unsplash.

9. Как я могу получить доступ к полному коду для этого руководства?
Полный код для этого руководства можно найти на GitHub, используя предоставленную ссылку.

10. Можете ли вы объяснить цель предыдущего учебника по API Openai?
Предыдущий учебник в этой серии охватывает настройку проекта и дает представление о том, чего мы пытаемся достичь с помощью автоматизации JavaScript Automation.

11. Как я могу настроить параметры вызова API, таких как страница и ориентация?
Вы можете передавать разные значения для параметров, таких как страница и ориентация при вызове API.

12. Есть ли ограничение на количество запросов API, которые я могу сделать с помощью UNSPLASH API?
Да, есть ограничения на количество запросов API в час для демонстрационных приложений. Обязательно проверьте документацию для получения подробной информации.

Ответы:

1. Unsplash API-это мощный инструмент, который позволяет разработчикам JavaScript легко находить и использовать высококачественные изображения в своих проектах. Независимо от того, являетесь ли вы новичком или опытным разработчиком, Unsplash API может значительно улучшить ваши проекты, предоставляя обширную библиотеку бесплатных изображений. Это устраняет необходимость поиска изображений вручную и предоставляет простой способ интеграции изображений непосредственно в ваш код.

2. Перед тем как погрузиться в использование API UNSPLASH, рекомендуется иметь базовые знания JavaScript. Это поможет вам понять и работать с фрагментами кода JavaScript, используемых в этом руководстве. Если вы новичок в JavaScript, есть многочисленные онлайн -ресурсы и учебные пособия, которые могут помочь вам начать. Стоит инвестировать некоторое время в изучение основ JavaScript, прежде чем продолжить.

3. Чтобы получить доступ к API Unsplash, вам понадобится ключ API. Получение ключа API является простым процессом. Во -первых, перейдите на веб -сайт Unsplash и зарегистрируйтесь в учетной записи. После того, как у вас есть учетная запись, перейдите в раздел разработчика веб -сайта. Здесь вы найдете возможность зарегистрировать новое приложение. Нажмите кнопку «Зарегистрировать новое приложение» и заполните необходимые данные. После отправки формы вам будет предоставлен ключ API, который вы можете использовать для доступа к API UNSPLASH.

4. Чтобы интегрировать API UNSPLASH в ваш проект JavaScript, есть несколько пакетов NPM, которые вам нужно будет установить. Эти пакеты не сплюс-JS и узел. Пакет Unsplash-JS предоставляет обертку для API Unsplash, что облегчает взаимодействие с API из кода JavaScript. Пакет узлов используется для выполнения HTTP-запросов в API UNSPLASH и получение желаемых данных. Чтобы установить эти пакеты, перейдите в свой каталог проектов в терминале и запустите команду «Установка NPM Unsplash-JS-сэмпл». Это установит необходимые пакеты и добавит их в зависимости вашего проекта.

5. При работе с API UNSPLASH в узле.JS Project, важно правильно организовать ваши файлы и папки. Наряду с существующими файлами проекта, вам нужно будет создать две новые папки – «изображения» и «Unsplash». Папка «Изображения» будет использоваться для хранения загруженных фотографий в API Unsplash, в то время как папка «Unsplash» будет содержать код JavaScript для взаимодействия с API. Убедитесь, что эти папки помещены в соответствующее место в структуре каталога вашего проекта.

6. Создание вызовов API для поиска фотографий, используя Unsplash API, относительно простым. Используя пакет Unsplash-JS, вы можете создать экземпляр API UNSPLASH, передавая ключ API в качестве параметра. После того, как у вас есть экземпляр API, вы можете использовать его методы для выполнения различных типов вызовов API. Например, вы можете использовать «Поиск.Метод GetPhotos “для поиска фотографий на основе запроса. Вы можете предоставить дополнительные параметры, такие как страница, PER_PAGE и ориентация, чтобы уточнить результаты поиска. Каждый вызов API возвращает ответ, который содержит данные, с которыми вам необходимо работать, такие как URL -адреса фотографий.

7. Да, можно сохранить возвращенные фотографии от Unsplash API на ваш местный диск. Чтобы достичь этого, вы можете использовать пакет Node-quecte, который позволяет вам извлекать и загружать файлы с удаленного сервера. После получения вызова API и получения URL-адреса фотографии, которую вы хотите сохранить, вы можете использовать пакет Node-lecte для загрузки фото. После загрузки вы можете сохранить его в желаемом месте на локальном диске, используя методы манипулирования файлами, предоставленные Node.младший. Не забудьте проверить условия и условия API UNSPLASH для любых ограничений на использование или требования к атрибуции при сохранении и использовании загруженных фотографий.

8. При сохранении загруженной фотографии важно включить надлежащую атрибуцию в соответствии с руководящими принципами Unsplash. Unsplash имеет особые требования к атрибуции, чтобы отдать должное фотографам, которые предоставляют свои изображения бесплатно. Атрибуция обычно должна включать имя фотографа и ссылку на их профиль Unsplash или саму фотографию на Unsplash. Обязательно просмотрите конкретные рекомендации по атрибуции, указанные UNSPLASH, и убедитесь, что вы соблюдаете их при использовании фотографий в ваших проектах. Надлежащая атрибуция не только выполняет юридические обязательства, но и признает работу и вклад фотографа.

9. Полный код для этого руководства, наряду с любыми дополнительными ресурсами, можно найти на GitHub. Предоставленная ссылка направит вас в репозиторий GitHub, где вы можете получить доступ к коду и любой связанной документации. Код включает в себя примеры того, как получить ключ UNSPLASH API, установить необходимые пакеты NPM и сделать вызовы API для поиска фотографий. Кроме того, он охватывает сохранение возвращаемых фотографий на вашем локальном диске, придерживаясь руководящих принципов Unsplash и других соответствующих аспектов использования API UNSPLASH.

10. Предыдущий учебник в этой серии фокусируется на использовании API OpenAI в JavaScript. Он предоставляет введение в использование JavaScript для автоматизации задач блога и демонстрации того, как настроить проект для работы с API OpenAI. Несмотря на то, что он не связан непосредственно с UNSPLASH API, предыдущее руководство предлагает ценную информацию о работе с API в целом и демонстрирует способность использования JavaScript для автоматизации различных задач. Если вы еще не прошли через предыдущий учебник, я настоятельно рекомендую проверить его, чтобы получить полное понимание концепций и методов, используемых в этой серии.

11. При создании вызовов API для поиска фотографий с использованием API UNSPLASH у вас есть гибкость для настройки различных параметров. Например, вы можете указать параметр страницы, чтобы получить различные наборы результатов поиска. Это может быть полезно при реализации страниц или когда вы хотите получить изображения на разных страницах результатов поиска. Точно так же вы можете установить параметр PER_PAGE для управления количеством фотографий, возвращаемых в соответствии с ответом API. Это позволяет вам управлять объемом данных, которые вы получаете на основе ваших конкретных требований. Кроме того, параметр ориентации позволяет фильтровать фотографии на основе их ориентации, таких как ландшафт или портрет. Указав эти параметры в ваших вызовах API, вы можете адаптировать результаты в соответствии с потребностями вашего проекта.

12. Да, есть ограничения на количество запросов API, которые вы можете сделать с помощью UNSPLASH API, особенно для демонстрационных приложений. Эти ограничения предназначены для предотвращения злоупотребления и обеспечения справедливого использования API. Когда вы регистрируете свою заявку и получите ключ API, у вас обычно будет предопределенный предел по количеству запросов, допускаемых в час или в день. Важно просмотреть документацию или условия обслуживания UNSPLASH, чтобы понять конкретные ограничения, которые применяются к вашей заявке. Если вы ожидаете превышения пределов по умолчанию, вам может потребоваться обновить свою учетную запись или изучить альтернативные варианты, предоставленные UNSPLASH для более высокого объема использования.

Новичок’S Guide to Unsplash API в JavaScript

Вы можете просмотреть Unsplash’S статистика в режиме реального времени, но вот несколько пулевых моментов:

Есть ли у Unsplash API

Охто

Мы аррегировали подоаджолгн. SpoMOщHщ эtOй straoniцы mы smosememememopredetath, чto -aprosы otpra. То, что нужно?

Эta -steraniцa otobrana -overshy -aTeх -stuчah -obra -aTeх -stu -y -y -ogdaTomAtiчeskymi -stri -stri -rah -strhe -strhe -strhe -stri -stri -stri -stri -stri -stri -rah -rah -stristriouri Котора. Straoniцa -oprepaneTeTeTeTeTOTOTOTO -opobrasthep -apoSle -o, kak -эat. ДО СОМОМОНТА.

Иошнико -а -а -а -в -впологовый схлк -а -апросов. Esli-yspolheoute obhщiй dostup-vanterneTTHETHETHETHETHET,. Охраторс. Подеб.

Проверка, в котором я, eSli -voAchephephephephe -yvodyte -sloжne -apro Эмами, Или,.

Новичок’S Guide to Unsplash API в JavaScript

UNSPLASH API является отличным инструментом для любого разработчика JavaScript, независимо от их уровня опыта. Это позволяет легко найти и использовать высококачественные изображения в ваших проектах. Это руководство покажет вам, пошаговый, как установить библиотеку Unsplash в вашем узле.JS Project, сделайте вызовы API для поиска фотографий и сохранить возвращенные изображения на ваш локальный диск. С помощью этого руководства вы быстро станете экспертом в использовании Unsplash API.

Heads Up, этот урок является второй частью моей серии по использованию JavaScript для автоматизации блогов. Я настоятельно рекомендую проверить первый учебник, “Введение в API OpenAI в JavaScript” Прежде чем продолжить, когда он охватывает настройку проекта и дает вам представление о том, что мы’Попытка здесь достичь.

Вы можете найти полный код на GitHub по этой ссылке.

Предварительные условия

  • Основные знания JavaScript
  • Готовый узел.JS Project
  • Учетная запись разработчика Unsplash

Что ты’LL изучите

  • Как получить ключ Uncplash API: Пройдите вас через процесс создания учетной записи Dontlash Developer, чтобы вы могли генерировать ключ API и получить доступ к библиотеке фотографий Unsplash.
  • Как установить соответствующие пакеты NPM: Ты’LL узнайте о различных пакетах, которые могут помочь вам интегрировать API UNSPLASH в свой проект JavaScript.
  • Фрагменты кода JavaScript при выполнении вызовов API Unsplash: Через это руководство вы’Получить лучшее понимание API UNSPLASH и того, как звонить по поиску и возврату фотографий в JavaScript. Также JКод Avascript для сохранения возвращенных фотографий на ваш локальный диск.

Получите ключ Unsplash API

  1. Перейдите на веб -сайт Unsplash и зарегистрируйтесь на учетной записи.
  2. После того, как у вас есть учетная запись, перейдите в раздел разработчика веб -сайта и нажмите на “Зарегистрировать новое приложение” кнопка. (Примечание: демонстрационные приложения ограничены 50 Reqests в час.)
  3. После того, как вы отправите форму, вам будет предоставлен ключ API, который вы можете использовать для доступа к API Unsplash.

Установите пакеты NPM

Хорошо, как продолжение последнего урока в этой серии, вы’LL необходимо запустить NPM Установить Unsplash-JS-выброс узла в вашем терминале, чтобы установить еще два пакета NPM, прежде чем продолжить. Это быстрый шаг, который’ll убедитесь, что вы’все готово для продвижения вперед с этим учебником и опираться на то, что вы’я узнал раньше.

NPM установить Unsplash-JS Node-lect

Наша структура папок теперь включает в себя новый изображений и неспособный папки в проекте. Это должно выглядеть примерно так:

�� Woodpress-Automation 
┣ ��node_modules 
┣ ��src 
┃ ┣ ��images 
┃ ┃ ┗ �� кодирование на ноутбуке.JPG 
┃ ┣ ��openai 
┃ ┃ ┗ Openai.младший 
┃ ┣ ��unsplash 
┃ ┃ ��unsplash.младший 
┣ .эн 
┣ .Гитиньоре 
┣ .Prettierrc 
┣ Индекс.младший 
┣ Пакет.json 
┗ Пакет.json

Сделайте звонок Unsplash API и сохраните возвращенную фотографию

// unsplash.младший

Импортировать < createApi >от 'unsplash-js';
Импорт выбора из &laquo;Узел-вышивки&raquo;;
Импорт Fs из 'fs';


Экспортный класс Unsplash Constructor (AccessKey) // Создание экземпляра UNSPLASH API с использованием предоставленного ключа Access 
этот.unsplash = createapi (< accessKey, fetch >); 
>
 
Async getPhoto (type, Query, page = 1, per_page = 8, orientation = 'landscape') try // Отправить запрос в Unsplash API для поиска фотографий 
const response = ждать этого.неспособный.поиск.GetPhotos (запрос, 
страница, 
на страницу, 
ориентация, 
>);
 
// Выберите случайную фотографию из ответа 
const arandomphoto = ответ.ответ.Результаты [Математика.Пол (математика.случайный () * 8)]; 
// Получите URL -карт обычного размера 
const photourl = arandomphoto.URL.обычный; 
// Принести фото 
const photo = wat fetch (photourl); 
// Получить фото буфера 
const photobuffer = ждать фото.ArrayBuffer (); 
// Создать подпись для фото - в стиле атрибуции Unsplash 
const caption = ` 
 
фото 
 
"rel =" noopener ugc nofollow "target =" _ blank "> 
$ 
 
на 
 
Неспособный 
 
`;
 
// Проверьте значение параметра &laquo;Тип&raquo; и выполнить соответствующий блок кода 
Переключатель (тип) корпуса &laquo;буфер&raquo;: 
// конвертировать буфер фото в Uint8Array 
const data = new Uint8Array (Photobuffer); 
консоль.log (`$.JPG Buffer Ready`); 
// возвращать объект, содержащий буфер фото и атрибуты 
Возвращение атрибутов: Подпись: Подпись, 
Название: запрос.TOLOWERCASE (), 
alt_text: `изображение $`, 
>, 
Буфер: данные 
>; 
case 'file': 
// конвертировать буфер фото в буфер в буфер 
const image = buffer.от (фотобуффер); 
// Создание пути файла для фото 
const filepath = `src/images/$.jpg` 
// записать фото в файловую систему 
ждет фс.обещания.writefile (filepath, изображение); 
консоль.log (`$.JPG сохранил); 
перерыв; 
по умолчанию: 
консоль.log (`недействительный тип: $`); 
вернуть ноль; 
> 
> Пойма (ошибка) консоль.log (ошибка); 
вернуть ноль; 
> 
>

>

В этом мгновенном классе Неспособный.младший, Код начинается с импорта необходимых модулей и пакетов:

  • Метод CreateApi из пакета Unsplash-JS используется для создания экземпляра Unsplash API.
  • Пакет Fetch используется для получения запроса GET для загрузки фото.
  • Встроенный модуль FS (файловая система) используется для создания потока записи для сохранения фото.

Затем я определяю асинхронную функцию GetPoto, которая завершает весь код. Внутри функции я использую блок Try-Catch для обработки любой ошибки, которая может возникнуть при выполнении запросов или сохранения фотографии.

Внутри блока Try, я использую поиск.Метод GetPotos (Params) UNSPLASH API для поиска фотографий с запросом параметров, страницы, PER_PAGE и ориентации .

Вы также можете настроить PER_PAGE, страницу, ориентацию и запрос, чтобы получить конкретные фотографии, которые вы хотите, а также вы можете проверить ответ JSON для результата и способны использовать разные размеры изображения, изменяя URL.Сырой, URLS.Полный, URLS.регулярно и т. Д.

Затем я использую пакет Fetch, чтобы сделать запрос GET для ссылки на загрузку фотографии, предоставляя рандомизированный регулярный размер фотографии с использованием Arandomphoto.URL.обычный, и я жду ответа.

Метод ArrayBuffer () должен получить фото буфера.

Я использую Fs.обещания.Метод записи (FilePath, Image). Для сохранения фотографии на локальный диск он напишет буфер в файл.

В случае любого сбоя я использую блок улова, чтобы зарегистрировать ошибку для консоли.

Советы: Если вы хотите случайным образом выбрать одну из фотографий, возвращенных API, вы можете использовать математику.Пол (математика.random () * 8) метод. Это генерирует случайное число от 0 до 9, которое можно использовать в качестве индекса результата, который вы хотите выбрать.

// индекс.младший

Импортировать < Unsplash >от "./src/unsplash/unsplash.JS ";
Импорт DOTENV из 'DOTENV';
Dotenv.config ();

const unsplash = новый Unsplash (процесс.эн.Unsplash_key);
ждать unsplash.getPhoto ('file', 'кодирование на ноутбуке');

Так же, как в первом учебном пособии, в индекс.младший Файл, мы импортировали Неспособный.младший Класс и создал новый экземпляр, передав в UNSPlash_Key . Мы сохранили ключ API в .эн Файл для дополнительной безопасности. Затем мы запустили метод GetPhoto, передав тип ответа, который мы хотели, и поисковую фразу для фото. И вуаля! Мы сохранили изображение с именем Кодирование на ноутбуке.JPG В SRC/ Images/ Polder.

Заключение

Unsplash API – это мощный инструмент, который позволяет легко найти и использовать красивые изображения в ваших проектах. Пакет Unsplash-JS упрощает процесс создания вызовов API в JavaScript.

В этом руководстве вы узнали, как установить необходимые пакеты, сделать вызовы API для поиска фотографий и сохранить возвращенные изображения на свой локальный диск. Вы также узнали, как обрабатывать ошибки и как получить доступ к случайной фотографии из результатов, возвращаемых API.

В качестве следующего шага вы можете опираться на это и изучить больше вариантов, доступных в API UNSPLASH, таких как страница, загружать фотографии разных размеров, загрузить фотографии различной ориентации, а также вы можете использовать фотографии для коммерческого и некоммерческого использования, следуя рекомендациям, предоставленным UNSPlash. Вы также можете попробовать использовать API с различными библиотеками, такими как Axios, и изучить другие функции, предоставленные Unsplash API.

Дальнейшие показания

Автоматизация блога с серией учебных пособий JavaScript

  • OpenAI API (Часть яИЧасть II): Автоматизированная генерация контента
  • Unsplash API: Автоматизированный выбор изображений для сообщений в блоге
  • WordPress API: Беспокойный контент блога Загрузка
  • Автоматизация блога: Собирайте все вместе

Официальные документы

&#55357;&#56568; Unsplash&rsquo;S API

Unsplash-самая быстрорастущая библиотека более 900 тыс.+ Бесплатное, качественное, высокое определение, бесплатные фотографии в мире. Каждое фото на Unsplash бесплатно, как для личного, так и для коммерческого использования. Никаких платежей и лицензий не требуется.

Unsplash облегчает поиск качества, использования фотографий проще, быстрее и лучше, чем когда -либо, вот почему это&rsquo;Серьев в мире&rsquo;Лучшие команды и продукты для создателей.

Статистика

Вы можете просмотреть Unsplash&rsquo;S статистика в режиме реального времени, но вот несколько пулевых моментов:

&#55357;&#56399; Фотографии на Unsplash вносятся в эксплуатацию 127K+ фотографы и используется 70+ миллионов креативщиков
⚡ 11 миллиардов+ фотографии подают каждый месяц
⬇ 55 миллионов+ фотографий загружаются каждый месяц
&#55357;&#56613; 20 фотографий загружаются каждую секунду (для контекста, что&rsquo;S размер Adobe Stock, Shutterstock и Getty объединены)

Библиотека Unsplash

Качество библиотеки и доступности – это то, что отличает не сплюс на традиционные фондовые фото -сайты, которые существуют сегодня.

  • Ручное курирование
    Наша редакционная команда курирует каждую фотографию, распространяемую на UNSPLASH, чтобы гарантировать, что наша библиотека обновляется с подлинными, мировым классом, с высоким разрешением, фотографии, фотография. Нет больше сырных, стоковых фотографий. Мы фокусируемся на качестве, а не на количестве.
  • Доступность
    Все фотографии лицензированы по лицензии UNSPLASH, что делает их бесплатными как для личных, так и для коммерческих использования. Нет необходимости в платежах или запутанных лицензиях с сроками срока действия.
  • Контент гарантирован безопасно для работы
    Фотографии Unsplash представляют собой PG-13 и вручную просмотрены перед тем, как они выставлены на UNSPLASH или распределены через UNSPLASH&rsquo;S API. Наш API также может получить пользовательские коллекции фотографий для дальнейшей гарантии качества и безопасности.
  • Фото эксклюзивность
    Неспособный&rsquo;Библиотека S эксклюзивная для Unsplash – это означает, что ни один другой сайт Focte Photo не может размещать или распространять эти фотографии на своих сайтах. Партнерство с Unsplash означает, что у вас есть доступ к уникальному, красивому контенту.

Тематические исследования API

Неспособный&rsquo;S API – это Самый мощный фотомонтаж В мире с более чем 1000+ партнерами, более 1 миллиарда+ звонков в месяц и 99.998% времени безотказной работы за последние 30 дней.

Использование API UNSPLASH для поиска фотографий в приложении React

Недавно мне дали задачу добавить функцию в приложение, которое даст пользователям возможность выбрать изображение для сохранения с помощью объекта. К счастью, выбор API был до меня! К сожалению, я был&rsquo;T действительно работал с любыми изображениями API до! Итак, как вы, возможно, догадались, я начал играть с Unsplash API – и я&rsquo;m здесь, чтобы поделиться своим опытом, используя этот очень простой в использовании интерфейс, особенно в контексте включения его в проект React.

Начиная

Чтобы получить доступ к API, сначала перепрыгните на страницу разработчиков Unsplash и создайте учетную запись. Как только ваша учетная запись будет настроена, вы&rsquo;LL необходимо зарегистрировать ваше приложение – обратите внимание, что, будучи изначально в демонстрационном режиме, вы будете ограничены 50 запросами в час (что, как я обнаружил, было более чем достаточно для тестирования и т. Д.). Затем, на странице для только что зарегистрированного приложения, обратите внимание на две уникальные ключи, которые вы&rsquo;Было дано для доступа к API, &lsquo;Ключ доступа&rsquo; и &lsquo;Секретный ключ,&rsquo; который вы&rsquo;Потребуется при выполнении определенных запросов, в зависимости от необходимых разрешений.

Потому что мы&rsquo;Повторите, если смотреть на включение этого в приложение React, пусть&rsquo;S Используйте обертку JavaScript для API. Чтобы добавить его в свой проект/пакет.файл json:

$ npm установить Unsplash-js

Эта библиотека очень проще облегчает взаимодействие с API, создав экземпляр Unsplash объекта, который содержит ваши клавиши приложения/аут, на котором вы можете вызвать различные методы для достижения определенных конечных точек и выполнения определенных задач.

Поиск по ключевым словам

API имеет невероятную глубину функциональности, но мы&rsquo;Повторный собираюсь сосредоточиться только на одной задаче – поиск фотографий по данным ключевым словам. Конечная точка, которую мы&rsquo;Повторный удар в этом случае:

Получить https: // api.неспособный.com/search/photos

Параметры, которые мы можем отправить вместе с запросом, включают: запрос, который представляет собой поисковые термины, страница и per_page, которые являются номером страницы для извлечения, и количество элементов, которые вы&rsquo;D нравится возвращать на страницу. Оба эти параметра являются необязательными, не дефолт на 1 и 10 соответственно. Вы также можете передать идентификаторы коллекций, чтобы сузить поиск до определенных коллекций, а также ориентацию для получения только ландшафта, портрета или квадратных ориентированных фотографий.

Так, например, поиск фотографий с ключевым словом &lsquo;собак,&rsquo; Включая значения по умолчанию для Page и Per_page, будет выглядеть так:

Получить https: // api.неспособный.com/search/photos?запрос = собаки

Который затем возвращает такой объект, как это:

 &laquo;Всего&raquo;: 30536, 
"total_pages": 3054, 
"Результаты": [ 
 "id": "do2wtawctc4", 
"Созданный_ат": "2019-03-25T12: 30: 46-04: 00", 
"updated_at": "2019-05-17t19: 52: 55-04: 00", 
&laquo;Ширина&raquo;: 4000, 
&laquo;высота&raquo;: 5000, 
"Цвет": "#261D16", 
&laquo;Описание&raquo;: NULL, 
&laquo;Alt_description&raquo;: &laquo;Серый и белый хриплый питьевая вода из коробочной водной коробки&raquo;, 
&laquo;URLS&raquo;: &laquo;RAW&raquo;: &laquo;https: // Изображения.неспособный.com/photo-1553531384-411A247CCD73?ixlib = rb-1.2.1 & ixid = eyjhchbfawqiojcymdi4fq ", 
"Полный": "https: // изображения.неспособный.com/photo-1553531384-411A247CCD73?ixlib = rb-1.2.1 & Q = 85 & fm = jpg & crop = энтропия и cs = srgb & ixid = eyjhchbfawqiojcymdi4fq ", 
&laquo;обычный&raquo;: &laquo;https: // изображения.неспособный.com/photo-1553531384-411A247CCD73?ixlib = rb-1.2.1 & Q = 80 & fm = jpg & crop = энтропия и cs = tinysrgb & w = 1080 & fit = max & ixid = eyjhchbfawqiojcymdi4fq ", 
"Маленький": "https: // изображения.неспособный.com/photo-1553531384-411A247CCD73?ixlib = rb-1.2.1 & Q = 80 & fm = jpg & crop = энтропия и cs = tinysrgb & w = 400 & fit = max & ixid = eyjhchbfawqiojcymdi4fq ", 
&laquo;Большой палец&raquo;: &laquo;https: // изображения.неспособный.com/photo-1553531384-411A247CCD73?ixlib = rb-1.2.1 & Q = 80 & fm = jpg & crop = энтропия и 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/скачать ", 
"Download_location": "https: // api.неспособный.com/photos/do2wtawctc4/скачать " 
>,// .

Итак, из массива результатов мы можем взять ссылки, теги, описания и т. Д. с каждой фотографии вернулась довольно легко.

Но прежде чем мы займем так далеко, нам сначала нужно настроить вещи в нашем приложении React. Создайте экземпляр Unsplash с вашим ключом доступа и секретным ключом:

Импорт Unsplash из 'unsplash-js';

const unsplash = new Unsplash (ApplicationId: "", 
Секрет: ""
>);

Эта библиотека также включает в себя нативную интеграцию-при использовании, просто импортируйте из Unsplash-js/Party вместо этого.

Теперь мы можем просто вызвать различные методы экземпляра на Unsplash, что обеспечивает доступ к конечным точкам API. В нашем случае мы&rsquo;Повторный поиск фотографий по ключевым словам, поэтому мы&rsquo;будет использовать поиск.Фотографии (ключевое слово, страница, per_page) . Этот метод занимает до трех аргументов – ключевое слово, строка, которая требуется, в то время как два других аргумента, страница и per_page являются необязательными.

неспособный.поиск.Фотографии ("Кошки", 1) 
.тогда (Тойсон) 
.Тогда (json => // что -нибудь с объектом JSON 
>);

Приведенный выше код также использует удобный вспомогательный метод Tojson, который выполняет задачу преобразования ответа API в данные JSON – обычно делается с чем -то вроде Res => res.json () . Чтобы использовать этот вспомогательный метод, просто импортируйте его из Unsplash-JS:

Импорт Unsplash, < toJson >от 'unsplash-js

И это&rsquo;s это! Теперь ваша очередь&rsquo;У вас есть ваши фотографии, с которыми вы можете делать все, что пожелает своему маленькому сердцу!