Руководство для начинающих по API: как их интегрировать и использовать

2022-03-02 · 3683 слов · 18 минут читать

Хотите получать данные о погоде для своих пользователей? Получить их последние спортивные результаты для вашего приложения? Хотите сделать сайт, который рассказывает вашему пользователю случайную шутку?

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

Когда вы научитесь использовать API, вы сможете использовать службы, которые в противном случае заняли бы у вас много времени для самостоятельного написания кода. Вы можете добавить на свой сайт надежный поиск с помощью API Algolia или полный опыт электронной коммерции с помощью SaaS Snipcart .

В этой статье мы рассмотрим:

Что такое API?
Как сделать интеграцию API?
Как сделать простое приложение с API?
Как устранить проблемы с API?
Лучшие интеграции API для начала работы

Платформы интеграции API без кода

Я рад помочь вам начать работу с интеграцией API! Прежде чем создавать демонстрационное приложение с API, давайте узнаем…

Что такое API?

API расшифровывается как Application Programming Interface , поэтому мы начнем с изучения того, что такое интерфейс.

Что такое интерфейс?

Каждое используемое нами устройство имеет какой -то интерфейс. На вашей микроволновой печи есть цифры и кнопка запуска, а выключатель света имеет еще более простой интерфейс.

Мы используем эти интерфейсы, чтобы заставить устройство делать то, что мы хотим. Нам не нужно понимать основные схемы и науку, чтобы нагреть буррито с фасолью. Нам нужно использовать только тот интерфейс, который нам открыт.

Сравните внутреннюю работу автомобильного двигателя с тем, с чем мы взаимодействуем .

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

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

Что такое «программирование приложений» в API

Теперь, когда мы знаем, что означает интерфейсная часть, часть прикладного программирования стала легче понять.

API — это то, как приложения взаимодействуют друг с другом .

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

Когда веб-разработчики говорят о «попадании в API», они обычно имеют в виду веб-службу, которая позволяет отправлять запросы и получать данные в ответ. Мы коснемся их в ближайшее время.

Всякий раз, когда я задаюсь вопросом: «Как заставить этот код делать то, что я хочу?» Я искал документацию API, связанную с этим кодом.

Возможно, вы смотрели документацию по библиотекам JavaScript, таким как Lodash , чтобы понять, как вам нужно форматировать свой код. В документации рассказывается, как использовать API для этой библиотеки.

Как работают веб-API?

В ваш веб-браузер встроено множество API, которые мы можем использовать! Они называются веб-API. В Chrome, Firefox, Safari и т. д. они встроены, чтобы использовать их для добавления функций на наши сайты.

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

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

Это API-интерфейсы, которые находятся между вашим кодом и некоторыми источниками данных или функциями на сервере, к которому вы хотите получить доступ. Чаще всего они используют архитектурный стиль REST API для соответствия определенным критериям при выполнении HTTP-запросов.

API обычно делает две вещи: - Во-первых, он устанавливает правила взаимодействия с ним.

«Правила» — это API, говорящее: «Если вы структурируете свой запрос следующим образом , я пришлю вам данные, структурированные таким образом ». Если вы не структурируете свой запрос так, как ожидает API, он не будет знаете, что вы хотите, и вы получите ошибку в ответ.

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

Как только он получит действительный запрос, он запустит функцию (или несколько функций). Это сложность, которую API абстрагирует для пользователя. В зависимости от того, что вы запрашиваете, он может вернуть изображение, некоторые данные или просто сообщить вам, что он успешно получил ваш запрос.

Давайте коснемся некоторых концепций, которые вы должны понимать при работе с HTTP API.

Конечные точки

API-интерфейсы предоставляют вам конечную точку или конкретный URL-адрес, где отображаются нужные вам данные или функции. Для исходного API Unsplash вы получаете доступ к изображениям через их конечную точку по адресу https://source.unsplash.com/, добавляя параметры запроса после косой черты в конце.

В следующем разделе мы рассмотрим некоторую документацию по API, в которой описывается это соглашение.

Аутентификация

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

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

При аутентификации вы передаете API секретный ключ, который идентифицирует конкретного пользователя или запрос приложения. Затем сервер может определить, можете ли вы получить доступ к данным или нет.

Если API требует аутентификации, в документации к API объясняется, как это работает.

Глаголы HTTP

Вместе с каждым созданным HTTP-запросом всегда существует HTTP-глагол . Наиболее распространены GET, POST, PUTи DELETE.

Когда веб-сайты запрашивают данные с сервера, это обычно GETзапрос. POSTи PUTиспользуются для изменения или добавления данных и DELETEудаления определенного ресурса.

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

При создании приложения

Когда вы были разработчиком, вы могли бы работать в компании, создающей приложение. Если вы работаете фронтенд-разработчиком, ваши серверные разработчики предоставят вам конечные точки API, а также инструкции о том, как делать запросы и что ожидать взамен.

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

Если вы работаете с полным стеком или создаете собственное приложение, вам может потребоваться обрабатывать обе части. К счастью, если вы используете такие сервисы, как Auth0, для управления идентификацией, создание API выполняется за вас.

Работа с JSON

Большинство используемых вами HTTP API принимают и получают данные в формате JSON (JavaScript Object Notation). Это делает обучение чтению и письму в этом формате довольно важным навыком. JSON хранит свои данные в парах ключ-значение . Давайте посмотрим на JSON, который мы получаем, когда запрашиваем данные из Star Wars API . Если мы запросим этот URL:

https://swapi.dev/api/people/5/

Мы получим этот ответ JSON:

{
    "name": "Leia Organa",
    "height": "150",
    "mass": "49",
    "hair_color": "brown",
    "skin_color": "light",
    "eye_color": "brown",
    "birth_year": "19BBY",
    "gender": "female",
    "homeworld": "<http://swapi.dev/api/planets/2/>",
    "films": [
        "<http://swapi.dev/api/films/1/>",
        "<http://swapi.dev/api/films/2/>",
        "<http://swapi.dev/api/films/3/>",
        "<http://swapi.dev/api/films/6/>"
    ],
    "species": [],
    "vehicles": [
        "<http://swapi.dev/api/vehicles/30/>"
    ],
    "starships": [],
    "created": "2014-12-10T15:20:09.791000Z",
    "edited": "2014-12-20T21:17:50.315000Z",
    "url": "<http://swapi.dev/api/people/5/>"
}

Вы можете увидеть отношение ключ/значение здесь. Ключ "name"имеет значение "Leia Organa". Мы можем использовать этот объект в нашем коде JavaScript для отображения выбранной нами информации или даже для выполнения последующих запросов API.

Если бы мы запросили https://swapi.dev/api/people/6/, ключи (имя, рост, масса) остались бы прежними, но значения (Лея Органа, 150, 49) изменились бы.

JSON — это облегченный формат, который можно использовать в JavaScript, Python, PHP и любом другом языке, который вы можете использовать в Интернете.

Как сделать API-интеграцию?

Теперь, когда мы лучше понимаем, что такое API, давайте посмотрим на процесс интеграции реального API и сделаем наши первые запросы. Мы собираемся начать с простого API шутки .

Сначала перейдите по этому URL -адресу .

Вся документация находится в этом файле README.md .

Глядя на документацию, я вижу, что нам даны три конечные точки.

Если мы хотим «поймать случайную шутку», у нас есть два возможных синтаксиса для этого. В этих двух ссылках нет ничего принципиально отличающегося; автор API предлагает вам два подхода к использованию API.

С помощью этого API вы можете посетить URL-адрес в своем браузере и увидеть ответ.

Совет разработчика: Firefox отлично подходит для форматирования данных в удобном для чтения виде.

В ответ на наш запрос мы получаем полезную нагрузку JSON с четырьмя свойствами: идентификатор этой случайной шутки, ее тип , настройку и кульминацию шутки.

Обратите внимание, что более сложные API точно описывают, что вы получите взамен. Если вы хотите увидеть более сложный ответ, взгляните на эту конечную точку Yelp API для бизнеса .

Глядя под капот

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

Все шутки хранятся здесь в файле JSON . Когда мы делаем наш запрос GET, index.js обрабатывает наш запрос, вызывая соответствующую функцию. Функции хранятся здесь в handler.js , и их всего несколько.

Я рекомендую просмотреть эти три файла, даже если вы не совсем понимаете, что они делают. Вы увидите, что API не обязательно должны быть сложными. Здесь «база данных» представляет собой один файл JSON.

Использование инструмента API — почтальон (Postman)

Когда мы делаем запросы к API, обычно это происходит не путем ввода их в браузере, а через код. Кодирование запросов API может занять много времени, когда вы просто пытаетесь проверить, работает ли API. К счастью, есть бесплатная программа Postman, которую вы можете скачать здесь .

Postman — надежная программа, в которую я не буду вдаваться слишком глубоко, но я хочу, чтобы вам было удобно создавать с ее помощью запрос GET.

Скачайте, установите и откройте Postman. Глагол действия HTTP по умолчанию имеет значение GET, поэтому вы можете оставить его и вставить https://official-joke-api.appspot.com/random_jokeв качестве URL-адреса запроса.

Нажмите «Отправить», чтобы отправить запрос, и вы увидите ответ на нижней панели.

Вот и все! Вы получаете много информации, легко доступной с Postman. Вы можете увидеть статус, 200 OKвремя, которое потребовалось для выполнения запроса, и многое другое, если вы перемещаетесь по различным вкладкам.

Теперь нажмите эту конечную точку в Postman:https://official-joke-api.appspot.com/random_ten

Теперь мы запрашиваем массив из десяти объектов шутки, поэтому форма ответа изменилась.

Обратите внимание, что текст ответа теперь начинается с квадратных скобок, [ ]а не с фигурных скобок, как { }.

Некоторые API, такие как Unsplash API, возвращают фактическое изображение для полезной нагрузки ответа. Попробуйте эту конечную точку и посмотрите, что вы получите:https://source.unsplash.com/random

Знакомство с Postman поможет, если вы продолжите использовать API и когда-нибудь создадите свой собственный.

Как использовать API для создания веб-приложения Joke

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

Мы хотим, чтобы в нашем приложении была кнопка «Получить шутку», которая запускает запрос API. Когда ответ возвращается из API, мы можем отобразить настройку и изюминку для пользователя. При повторном нажатии кнопки выполняется новый запрос и отображается новая шутка.

Для этого нам не нужны никакие библиотеки или плагины. Мы будем использовать обычный JavaScript для выполнения запроса.

Я создал стартер CodePen, в котором уже настроен CSS. Нажмите здесь, чтобы открыть стартовую ручку, и нажмите «Вилка» в правом нижнем углу, чтобы создать ее копию.

Вот окончательная версия , если вы хотите проверить, что мы делаем.

Здесь будет полезно иметь небольшой опыт работы с HTML и JavaScript, но я надеюсь, что вы все равно сможете следовать этому курсу, если вы только начинаете.

Добавление HTML

Мы начнем с создания нашего HTML. Для этой демонстрации нам не нужно много: всего лишь кнопка и два элемента абзаца.

<button id="button" type='button'>Get Joke</button>
<p id="setup"></p>
<p id="punchline"></p>

Убедитесь, что вы указали идентификаторы и type="button" как показано. К идентификаторам привязаны некоторые стили, и мы собираемся ссылаться на них позже в нашем JavaScript. type="button" сообщает браузеру, что это не обычная кнопка отправки формы.

Ваше окно CodePen должно выглядеть примерно так:

Добавление JavaScript

Теперь мы перейдем в окно JavaScript и задействуем эту кнопку. Во-первых, мы собираемся добавить в документ прослушиватель кликов.

document.addEventListener("click", function (event) {
  // Checking if the button was clicked
  if (!event.target.matches("#button")) return;

  console.log("Button was clicked!");
});

Здесь мы прослушиваем все клики. Если что-то, что неreturn является кнопкой, будет нажато , мы console.log()не запустим. Но если это кнопка target, то мы увидим наше сообщение в консоли. Нажмите кнопку «Консоль» в левом нижнем углу пользовательского интерфейса CodePen, чтобы увидеть этот вывод.

На данный момент мы знаем, что наша кнопка работает. Давайте заставим его запросить нашу шутку. Мы удалим строку с console.log()и заменим ее fetch()командой.

Fetch — это веб-API! Он предоставляет нам интерфейс для выполнения запросов и получения ресурсов. Он встроен в современные браузеры и значительно упрощает запрос данных. Подробнее читайте здесь .

document.addEventListener("click", function (event) {
  // Checking if the button was clicked
  if (!event.target.matches("#button")) return;

  fetch("<https://official-joke-api.appspot.com/random_joke>")
    .then((response) => response.json())
    .then((data) => console.log(data));
});

Мы добавили здесь три строки, fetch()и два экземпляра .then(). Давайте рассмотрим каждую строку одну за другой.

 fetch("<https://official-joke-api.appspot.com/random_joke>")

Здесь мы используем Fetch API для запроса конечной точки шутки. Как и в случае с Postman, GETглагол используется по умолчанию, поэтому нам не нужно его указывать. fetch()отправит этот запрос, и когда он разрешится или завершится, он передаст данные ответа нашему первому .then().

.then((response) => response.json())

Точка перед then()функцией означает, что мы связываем наш запрос на выборку. Эта строка кода будет выполняться только после разрешения выборки. fetch()возвращает объект Response, но нам просто нужен объект JavaScript, поэтому мы запускаем response.json()команду. Результат этого передается в нашу следующую строку кода.

.then((data) => console.log(data));

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

Это круто; мы успешно извлекаем данные из API с помощью JavaScript! Теперь мы отобразим шутку в наших элементах HTML.

Мы добавим функцию в конец нашего JavaScript с именем renderJoke. Он возьмет объект, который мы получили из конечной точки, и добавит к каждому элементу innerHTML.

function renderJoke(data) {
  const setup = document.getElementById("setup");
  const punchline = document.getElementById("punchline");
  setup.innerHTML = data.setup;
  punchline.innerHTML = data.punchline;
}

Теперь измените последнюю строку нашей fetch()цепочки с этой:

.then((data) => console.log(data));

К этому:

.then((data) => renderJoke(data));

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

document.addEventListener("click", function (event) {
  // Checking if the button was clicked
  if (!event.target.matches("#button")) return;

  fetch("<https://official-joke-api.appspot.com/random_joke>")
    .then((response) => response.json())
    .then((data) => renderJoke(data));
});

function renderJoke(data) {
  const setup = document.getElementById("setup");
  const punchline = document.getElementById("punchline");
  setup.innerHTML = data.setup;
  punchline.innerHTML = data.punchline;
}

Когда вы нажимаете кнопку, она должна возвращать шутку, подобную этой:

Если у вас это работает, поздравляем! Теперь вы делаете запрос API с помощью JavaScript, обрабатываете ответ и отображаете результаты в HTML! Это огромное достижение. 👏

Обработка ошибок

Иногда запросы API не выполняются, и нам нужны наши веб-сайты или приложения, чтобы сообщить пользователю, что что-то пошло не так, как планировалось. Это довольно плохой пользовательский опыт, когда вы нажимаете кнопку, и ничего не происходит. Давайте смоделируем это, добавив опечатку в конечную точку API. Я изменил свою строку, “https://official-joke-api.appspot.com/random_jo“чтобы вызвать ошибку.

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

Давайте добавим код, чтобы пользователь знал, когда наш API возвращает ошибку.

Сначала давайте добавим в наш HTML новый элемент абзаца с расширением id=“error”.

<button id="button" type='button'>Get Joke</button>
<p id="setup"></p>
<p id="punchline"></p>
<p id="error"></p>

Затем мы создадим renderError()функцию для добавления сообщения к этому HTML-элементу при возникновении ошибки.

function renderError() {
  const error = document.getElementById("error");
  error.innerHTML = "Whoops, something went wrong. Please try again later!";
}

Теперь мы добавим в нашу fetch()цепочку специальную функцию, которая отлавливает любые ошибки.

fetch("<https://official-joke-api.appspot.com/random_jo>")
    .then((response) => response.json())
    .then((data) => renderJoke(data))
    .catch(() => renderError());

Если запрос на выборку выполнен успешно, .then()функции будут вызываться по порядку, а .catch()функция вызываться не будет. Но если запрос завершится ошибкой, он пропустит .then()функции и вызовет .catch()единственную.

Нажмите кнопку; теперь пользователь уведомляется о том, что запрос не выполнен

Наконец, нам нужно очистить сообщение об ошибке, если пользователь попытается снова и запрос будет успешным. Добавьте этот код в нашу renderJoke()функцию.

const error = document.getElementById("error");
  error.innerHTML = "";

Исправьте конечную точку API, чтобы она была “ https://official-joke-api.appspot.com/random_joke“еще раз.

Все готово! Вот финальное приложение, если вы хотите сравнить его со своим кодом.

Дополнительный кредит

Вы можете продолжить работу над этим приложением и добавить еще несколько функций.

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

Я хотел бы увидеть, что вы придумали!

Устранение неполадок API

В конце концов, вы столкнетесь с некоторыми проблемами с API, и вам нужно будет отладить проблему в своем коде. Вот несколько советов по устранению неполадок, когда API работает не так, как вы ожидаете. Проверить документацию

Если вы используете общедоступный API, должна быть документация, которая расскажет вам, как структурировать ваш запрос. Убедитесь, что вы следуете описанному там синтаксису. Сравните их примеры с тем, что есть в вашем запросе, чтобы увидеть, что отличается. Проверьте вкладку «Сеть»

Если вы делаете запросы API в браузере, одним из лучших инструментов устранения неполадок API является вкладка «Сеть». В Chrome вы можете нажать Control+ Shift+ Jв Windows или Command+ Option+ Jна Mac, чтобы открыть DevTools. Щелкните вкладку «Сеть» вверху. Теперь вкладка «Сеть» будет прослушивать каждый запрос, который делает веб-сайт.

Вот запрос от приложения-шутки, которое мы сделали ранее.

Это показывает нам URL-адрес, к которому мы сделали запрос, наш метод (или глагол) и код состояния, который мы получили в ответ. Вы можете увидеть, что API вернуло на вкладках Preview и Response .

Если ваш код состояния не 200, читайте дальше.

Проверьте код состояния

Вы видели сообщение «404 File Not Found» на веб-сайте, когда щелкали неработающую ссылку или вводили что-то неправильно. Этот 404 — это особый код, который сервер передает вашему браузеру в ответ на его запрос.

Либо на вкладке сети, либо в Postman вы всегда будете получать код состояния от API.

Это один из многих кодов состояния HTTP, которые помогают нам понять, как поступают наши запросы. Ответы сгруппированы в сотни:

1xx информационный ответ – запрос получен, процесс продолжается

2xx Success — запрос успешно получен, понят и принят.

Перенаправление 3xx — необходимо предпринять дальнейшие действия для выполнения запроса.

Ошибка клиента 4xx — запрос содержит неправильный синтаксис или не может быть выполнен

Вообще говоря, ответ 200 или что-то около 200 — это успех.

Что-либо в 400’s означает, что запрос не выполнен, и причиной, вероятно, является наша ошибка. Проверьте список кодов состояния HTTP для конкретного кода, который вы получили. Если это 400вы должны проверить, что ваш запрос отформатирован правильно.

Что-либо в 500’ означает, что что-то пошло не так на сервере, который обрабатывал ваш запрос API. Возможно, сервер не работает или в коде есть ошибка. Повторите запрос через некоторое время.

КОРС

При работе с API вы, вероятно, когда-нибудь столкнетесь с так называемой ошибкой CORS (Cross-Origin Resource Sharing). У вас есть ошибка CORS, если вы проверяете свою консоль и видите сообщение о том, что в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

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

Проблемы с обещаниями

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

Лучшие интеграции API для начала работы

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

Unsplash

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

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

API покемонов

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

Вот пример приложения «Поймать покемонов », основанный на нашем приложении «Шутка», которое вы использовали ранее, чтобы помочь вам начать работу.

API для собак

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

Если вам нужна базовая концепция, вы можете сделать что-то похожее на приложение Pokemon, но с другим уровнем сложности. Взгляните на несколько каркасов для этой идеи приложения.

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

Во-первых, ваше приложение может использовать эту конечную точку для получения всех пород, которые есть у API:https://dog.ceo/api/breeds/list/all

Затем вы можете включить их выбор в запрос к этой конечной точке: https://dog.ceo/api/breed/hound/images, заменив houndих выбором.

Прочитайте документы здесь, чтобы увидеть, что это вернет. Это должно заставить вас начать!

Платформы интеграции API без кода

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

Некоторые сервисы, такие как Zapier или IFTTT , предоставляют людям простой интерфейс для подключения различных API к своей экосистеме. Они также уменьшают потребность в управлении API.

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

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

Пора закругляться

Мы многое затронули в этой статье, так что поздравляем, что дочитали до конца.

Мы рассмотрели концепции интерфейсов и то, как API абстрагируется от сложности. Мы коснулись веб-API, а затем углубились в HTTP API. Мы использовали Postman для отправки запросов и даже создали наше приложение Joke! Мы изучили еще несколько API-интерфейсов, с которыми вы могли поиграть, и увидели, что иногда решения без кода могут быть выходом.

Я надеюсь, что вы многому научились и чувствуете себя более уверенно, работая с API в будущем. Хотя некоторые API могут быть невероятно сложными, основные концепции остаются прежними.

перевод статьи (с)https://snipcart.com/blog/integrating-apis-introduction