Как работают API и как интегрировать их в ваше приложение

Интерфейсы прикладного программирования (API) – один из самых удобных путей для создания интеллектуальных приложений. Это канал связи между двумя приложениями. Осознанно или нет, но вы в какой-то момент использовали API при работе в Интернете или при использовании программ в повседневной жизни.

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

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

Как работают API?

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

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

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

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

Что такое конечная точка API?

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

Конечная точка – это URL-адрес, который запрашивает и предоставляет клиенту прямой доступ к ресурсам API.

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

Критерии для подключения к API

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

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

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

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

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

Как подключиться к API: Практические примеры

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

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

Как использовать API Iro.js Color Picker

Iro.js – это простой API, который позволяет вам добавить на свой сайт бесплатный цветоподборщик. Когда вы выбираете точку цвета на цветовом круге, API возвращает шестнадцатеричный или RGB-код этого цвета. Чтобы подключиться к API iro.js, достаточно вставить его конечную точку сети доставки контента (CDN) в раздел head вашего DOM.

Полная документация по этому API доступна на сайте iro.js.org. Давайте посмотрим, как можно подключиться к этому API на примере приведенного ниже фрагмента кода:

<!DOCTYPE html>
<html>
<head>
<title>Слайдерпрактики</title>
<script src=”https://cdn.jsdelivr.net/npm/@jaames/iro@5″></script>
</head>
<body>
<button id=”color-button” onclick=”sample()”>Показатьвыбор цвета</button>
<div id=”color-circle”> </div>
<div id=”color-code”> </div>
</body>

<script>
let colors= document.getElementById(‘color-code’);
const sample= ()=>{
var colorPicker = new iro.ColorPicker(‘#color-circle’, {
// Устанавливаем размер выборки цветов
width: 320,
// Задайте начальный цвет чисто красным
color: “#ff0000”
});
colorPicker.on([‘color:change’, ‘color:init’], function(color) {
// регистрируем текущий цвет в виде HEX-строки
colors.innerHTML=color.hexString;
});
};
</script>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Слайдерпрактики</title>

</head>

<body>

<button id=“color-button” onclick=“sample()”>Показатьвыбор цвета</button>

</body>

let colors= document.getElementById(‘color-code’);

const sample= ()=>{

var colorPicker = new iro.ColorPicker(‘#color-circle’, {

// Устанавливаем размер выборки цветов

width: 320,

// Задайте начальный цвет чисто красным

color: “#ff0000”

});

colorPicker.on([‘color:change’, ‘color:init’], function(color) {

// регистрируем текущий цвет в виде HEX-строки

colors.innerHTML=color.hexString;

});

};

</script>

</html>

В случае приведенного выше примера API вам не нужен API-ключ для подключения к нему. Однако, чтобы лучше понять это, взгляните на JavaScript. Для подключения к этому API нам нужно только вызвать функцию ColorPicker из класса iro, затем передать в класс id контейнера цветового колеса.

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

Чтобы увидеть, как происходит событие изменения цвета, вы можете открыть другой HTML-файл и вставить следующий код в его раздел scripts:

var colorPicker = new iro.ColorPicker(‘#color-pick’, {
// Устанавливаем размер окна выбора цвета
width: 400,
// Установите начальный цвет – чисто красный
color:”#ff0000″
});
const myColor =(color)=>{
console.log(color.hexString);

};
colorPicker.on(“color:change”, myColor);

var colorPicker = new iro.ColorPicker(‘#color-pick’, {

// Устанавливаем размер окна выбора цвета

width: 400,

// Установите начальный цвет – чисто красный

color:“#ff0000”

});

const myColor =(color)=>{

console.log(color.hexString);

};

colorPicker.on(“color:change”, myColor);

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

Как использовать API конвертера валют NoCodeAPI

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

Как только вы войдете в систему, в верхней части страницы появится строка поиска. В этой строке поиска введите currency exchange, как только запрос появится, нажмите на Activate.

На следующей странице нажмите на Make Currency Exchange API. Далее введите предпочтительное название API и нажмите кнопку Создать.

После создания API нажмите на View Documentation. Далее выберите предпочтительный язык, чтобы просмотреть код для подключения к конечной точке API. Затем вы можете скопировать этот пример кода и вставить его в свое приложение для дальнейшей настройки.

Посмотрите на приведенный ниже пример кода для конвертации валюты:

<!DOCTYPE html>
<html>
<head>
<title>Конвертервалют</title>

</head>

<divid=”currency”></div>
</body>

<script>
let currency= document.getElementById(‘currency’);
async function callingFn() {
try {
const response = await fetch(“https://v1.nocodeapi.com/techyprem/cx/FHNXhKRkWDCvMehl/rates/convert?amount=10&from=USD&to=Eur”, {
method: “get”,
headers: {
“Content-Type”: “application/json”
}
});
const json = await response.json();
currency.innerHTML=”Success:” + JSON.stringify(json);
} catch (error) {
console.error(“Error:”, error);
}
}
callingFn();
<script>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Конвертервалют</title>

</head>

<divid=“currency”></div>

</body>

let currency= document.getElementById(‘currency’);

async function callingFn() {

try {

const response = await fetch(“https://v1.nocodeapi.com/techyprem/cx/FHNXhKRkWDCvMehl/rates/convert?amount=10&from=USD&to=Eur”, {

method: “get”,

headers: {

“Content-Type”: “application/json”

}

});

const json = await response.json();

currency.innerHTML=“Success:” + JSON.stringify(json);

} catch (error) {

console.error(“Error:”, error);

}

callingFn();

</html>

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

Вот как выглядит необработанный вывод JSON:

Success:{“query”:{“from”:”USD”,”to”:”EUR”,”amount”:10},”info”:{“time”:1604587505388,”rate”:0.844865},”result”:8.44865,”text”:”10 USD = 8.44865 EUR”}

1	Success:{“query”:{“from”:“USD”,“to”:“EUR”,“amount”:10},“info”:{“time”:1604587505388,“rate”:0.844865},“result”:8.44865,“text”:“10 USD = 8.44865 EUR”}

Воспользуйтесь преимуществами API

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

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

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