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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Связано: интеграция полетных данных в ваш проект с помощью API Aviationstack

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

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

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

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

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

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

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

Iro.js – это простой API, который позволяет вам добавить бесплатную подборку цветов на ваш сайт. Когда вы выбираете цветовую точку на цветовом круге, API возвращает шестнадцатеричный код или код RGB этого цвета. Чтобы подключиться к API iro.js, все, что вам нужно сделать, это вставить его конечную точку сети доставки контента (CDN) в раздел head вашего 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 легко подключиться, потому что его разработчики проделали дополнительную работу по написанию кода класса для своих пользователей. Изображение ниже является результатом приведенного выше примера кода.

Чтобы увидеть, как происходит событие изменения цвета, вы можете открыть другой файл 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);

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

Связанный: Развлекайте посетителей вашего сайта с помощью Marketstack API

NB: Весь пример кода является результатом выполнения инструкций в документации API.

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

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

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

На следующей странице нажмите Make Currency Exchange 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.