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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стандарты вызовов API

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

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

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

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

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

Как вызвать API: практические примеры

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

Например, у нас есть подробная статья о Как вызвать API Serpstack , который дает вам доступ к геоданным в реальном времени.

Давайте посмотрим на несколько примеров короткого кода о том, как вызвать API.

Как использовать API палитры цветов Iro.Js

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

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

<!DOCTYPE html>
<html>
<head>
 <title>Practice Slider</title>
 <script src=”https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
</head>
<body>
 <button id=”color-button” onclick=”sample()”>Display color picker</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’, {
 // Set the size of the color picker
 width: 320,
 // Set the initial color to pure red
 color:”#ff0000"
 });
 colorPicker.on([‘color:change’, ‘color:init’], function(color) {
 // log the current color as a HEX string
 colors.innerHTML=color.hexString;
 });
};
</script>
</html>

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

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

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

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

var colorPicker = new iro.ColorPicker(‘#color-pick’, {
 // Set the size of the color picker
 width: 400,
 // Set the initial color to pure red
 color:”#ff0000"
 });
const myColor =(color)=>{
 console.log(color.hexString);
};
colorPicker.on(“color:change”, myColor);

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

NB: Код примера был сгенерирован в соответствии с инструкциями в документации API.

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

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

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

На следующей странице нажмите Сделать API обмена валют. Затем введите предпочтительное имя для API и нажмите построить.

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

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

<!DOCTYPE html>
<html>
<head>
 <title>Currency converter</title>
</head>
 <div id=”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>

Приведенный выше код - это всего лишь модифицированная версия кода, приведенного в документации. Однако обратите особое внимание на параметры преобразования в переменной ответа 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”}

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

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

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

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

Источник
Перейти к верхней кнопке