Лучшие API для разработчиков

Руководство по интеграции API Google Таблиц v4 Изучение

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

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

Что такое API?

API означает интерфейс прикладного программирования и может описывать все, что позволяет двум программам взаимодействовать друг с другом. Например, такие методы, как document.insertNodeна самом деле не являются частью JavaScript: они являются частью API DOM, который позволяет вашей программе взаимодействовать с DOM.

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

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

APILayer

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

Читайте также:  Что такое CORS (совместное использование ресурсов между источниками)?

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

Взаимодействие с API

Самый простой способ взаимодействия с API через JavaScript — использовать fetch. Это асинхронно запрашивает данные из URL-адреса и возвращает обещание, которое позволяет нам получить доступ к возвращаемым данным.

Давайте посмотрим на простой пример:

fetch("https://geek-jokes.sameerkumar.website/api?format=json")
  .then(response => response.json())
  .then(result => console.log(result.joke))
  .catch(error => console.log('error', error.message))

Этот код будет запрашивать данные у Geek Jokes API, который возвращает случайную шутку в формате JSON. Мы передаем URL-адрес API в fetchфункцию. Это возвращает промис, и мы можем связать с thenним метод — прежде всего, чтобы с помощью метода преобразовать возвращенный JSON в объект JavaScript json(), а затем просто вывести jokeсвойство этого объекта в консоль. Мы также добавляем блок catch в конец, чтобы регистрировать любые ошибки.

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

const headers = new Headers()

const requestOptions = {
  method: 'GET',
  redirect: 'follow',
  headers
}

Затем их можно добавить к запросу:

fetch("https://geek-jokes.sameerkumar.website/api?format=json", requestOptions)
  .then(response => response.json())
  .then(result => console.log(result.joke))
  .catch(error => console.log('error', error.message))

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

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

Шесть лучших

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

Spotify

API Spotify — один из самых больших (и самых крутых) API, доступных на APILayer. Это позволяет вам получить доступ к множеству музыкальных данных и данных подкастов, доступных на Spotify.

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

Вот пример, который возвращает все альбомы данного исполнителя:

const headers = new Headers()
headers.append("apikey", "YOUR_API_KEY")

const getAlbums = event => {
  event.preventDefault()
  const requestOptions = {
    method: 'GET',
    redirect: 'follow',
    headers
  }
  fetch("https://api.apilayer.com/spotify/search?q=" + encodeURIComponent(event.target.artist.value), requestOptions)
    .then(response => response.json())
    .then(result => {document.getElementById("albums").innerHTML = result.albums.items.map(x => `<li>${x.data.name}</li>`).join``})
    .catch(error => console.log(error.message))
}

document.getElementById("music").addEventListener("submit", getAlbums)

World News

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

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

Вот пример, который возвращает пять самых популярных новостей за сегодня:

const headers = new Headers()
headers.append("apikey", "YOUR_API_KEY")

const requestOptions = {
  method: 'GET',
  redirect: 'follow',
  headers
}

const today = new Date()
const date = `${today.getFullYear()}-${today.getMonth()+1}-${String(today.getDate()).padStart(2,'0')}`

fetch(`https://api.apilayer.com/world_news/search-news?number=5&language=en&earliest-publish-date=${date}`, requestOptions)
  .then(response => response.json())
  .then(result => render(result))
  .catch(error => console.log('error', error))

const render = data => document.getElementById("news").innerHTML = data.news.map(story => `<h2>${story.title}</h2><img src=${story.image}/><section>${story.summary}</section>`).join``

Weatherstack

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

Здесь можно получить доступ к огромному количеству данных, особенно в исторической функции погоды, которая датируется июлем 2008 года, что означает, что вы можете получить статистику погоды для любого места с любой даты после июля 2008 года. Место и дата должны быть указаны как параметры. Историческая функция также имеет необязательный параметр «почасовой», который может быть установлен на 1 или 0, в зависимости от того, хотите ли вы, чтобы данные о погоде разбивались по часам. Если вы решите разделить данные по часам, вы также можете установить необязательный параметр «интервал» на 1, 3 (по умолчанию), 6, 12 или 24, в зависимости от того, как вы хотите разделить данные.

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

Вот пример кода, который возвращает текущую температуру в заданном месте:

const getWeather = event => {
  event.preventDefault()
  const requestOptions = {
    method: 'GET',
    redirect: 'follow',
  }
    fetch("https://api.weatherstack.com/current?access_key=YOUR_API_KEY&query="+encodeURIComponent(event.target.city.value), requestOptions)
    .then(response => response.json())
    .then(result => document.getElementById("weather").innerHTML = `<h1>The current temperature in ${result.location.name} is ${result.current.temperature}</h1>`)
    .catch(error => console.log(error.message))
}

document.getElementById("place").addEventListener("submit", getWeather)

Number Verification

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

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

const headers = new Headers()
headers.append("apikey", "YOUR_API_KEY")

const verify = event => {
  event.preventDefault()
  const requestOptions = {
    method: 'GET',
    redirect: 'follow',
    headers
  }
  fetch(`https://api.apilayer.com/number_verification/validate?number=${event.target.number.value}`, requestOptions)
  .then(response => response.json())
  .then(result => render(result))
  .catch(error => console.log('error', error.message))
}

document.getElementById("phone").addEventListener("submit",verify)

const render = data => document.getElementById("verification").textContent = data.valid ? `This is a valid phone number from ${data.country_name}` : `This is not a valid phone number`

Zenserp

Zenserp API — это API SERP (страницы результатов поисковой системы), который позволяет вам очищать страницы результатов поисковой системы в гораздо более чистом объектном формате. Его конечные точки включают Google, Image Reverse Search, YouTube, Bing и DuckDuckGo. Конечная точка Google также включает дополнительные конечные точки изображений, карт, видео, новостей и покупок. Результаты также включают информацию о ранжировании, которая поможет вам определить популярные страницы и тенденции.

Есть также несколько конечных точек списка, которые можно использовать для создания собственных запросов. К ним относятся: языки Google, страны Google, геолокации и поисковые системы Google.

При наличии элемента поиска API вернет все страницы, которые могут появиться, включая их URL и описание.

Вот пример, который вернет топ поисковых запросов Google по теме:

const headers = new Headers()

const serp = event => {
  event.preventDefault()
  const requestOptions = {
    method: 'GET',
    redirect: 'follow',
    headers
  }
  fetch(`https://app.zenserp.com/api/v2/search?apikey=YOUR_API_KEY&q=${encodeURIComponent(event.target.q.value)}`, requestOptions)
  .then(response => response.json())
  .then(result => render(result))
  .catch(error => console.log('error', error.message))
}

document.getElementById("search").addEventListener("submit",serp)

const render = data => document.getElementById("result").innerHTML = `The top search result on Google is: <a href="${data.organic[0].url}"><h1>${data.organic[0].title}</h1></a><p>${data.organic[0].description}</p>`

Zenscrape

Zenscrape API — это API веб-скрейпинга, который для базового использования возвращает HTML-контент любого заданного веб-сайта. Для этого вам нужно указать только один параметр — URL-адрес целевого веб-сайта — и ключ API. Он также будет генерировать любой динамический HTML на странице из любого JavaScript или фреймворка, такого как React или Vue. Это означает, что возвращенный HTML будет тем же контентом, который увидит пользователь.

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

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

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

Вот пример, который позволяет вам ввести URL-адрес и вернуть HTML-код в консоль:

const headers = new Headers()

const scrape = event => {
  event.preventDefault()
  const requestOptions = {
    method: 'GET',
    redirect: 'follow',
    headers
  }
  fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(`https://app.zenscrape.com/api/v1/get?apikey=YOUR_API_KEY&url=${encodeURIComponent(event.target.url.value)}`)}`,requestOptions)
  .then(response => response.json())
  .then(result => console.log(result.contents))
  .catch(error => console.log('error', error.message))
}

document.getElementById("scrape").addEventListener("submit",scrape)

Заключение

Эти шесть примеров лишь малая часть того, что может предложить APILayer. Доступно гораздо больше API, поэтому убедитесь, что вы полностью изучили сайт и повеселились с некоторыми из них. Например, мы настоятельно рекомендуем Bad Words API, с которым нам обоим было очень весело возиться!

Оцените статью
bestprogrammer.ru
Добавить комментарий