Fermer

décembre 2, 2022

Meilleures API pour les développeurs –


Les API sont partout sur Internet, et savoir comment interagir avec elles est une compétence importante pour le développeur Web moderne. Pouvoir accéder et interagir avec des données tierces peut faire passer vos applications au niveau supérieur de nombreuses façons intéressantes !

Dans cet article, nous allons examiner certaines des meilleures API auxquelles les développeurs peuvent accéder et comment APILayer facilite cette tâche.

Nous avons créé cet article en partenariat avec APILayer. Merci de soutenir les partenaires qui rendent SitePoint possible.

Qu’est-ce qu’une API ?

API signifie Interface de programmation d’applications, et il peut décrire tout ce qui permet à deux programmes de communiquer entre eux. Par exemple, des méthodes telles que document.insertNode ne font pas réellement partie de JavaScript : ils font partie de l’API DOM qui permet à votre programme de communiquer avec le DOM.

Les API Web permettent à votre code de communiquer et d’interagir avec les sites Web et les services en ligne de manière contrôlée. Dans la plupart des cas, cela se fait en envoyant une requête qui renvoie des données, qui sont presque toujours au format JSON. Ces données peuvent ensuite être utilisées dans votre code.

De nombreuses API vous permettent également de décharger une partie de la charge de travail de votre application vers un service externe. Par exemple, si vous vouliez traduire un document, vous pourriez éviter d’avoir à écrire tout le code pour faire cela et utiliser à la place une API.

APILayer

APILayer est un marché d’API organisé. Chaque API est soigneusement sélectionnée par l’équipe de développeurs d’APILayer pour s’assurer qu’elle est sécurisée et stable, avec la possibilité d’évoluer à mesure que votre site se développe. Toutes les API ont un plan gratuit et vous n’avez pas besoin de fournir de détails de paiement pour commencer. APILayer propose actuellement près de 100 API, et d’autres sont ajoutées en permanence. Ces API couvrent une gamme de catégories, de la finance à l’alimentation, ainsi qu’un certain nombre d’outils de développement Web tels que le traitement d’image et la vérification orthographique.

Chaque API a différents niveaux de paiement, commençant par gratuit et augmentant le prix en fonction du nombre de demandes que vous ferez. Certains des forfaits payants peuvent également offrir une plus grande variété de données à demander. APILayer facilite l’inscription à une API que vous trouvez intéressante et offre une fonctionnalité de démonstration en direct qui vous permet de tester le fonctionnement de l’API directement dans votre navigateur, ainsi que de fournir un exemple de code pour vous aider à démarrer. Il propose également une documentation complète et des critiques pour chaque API.

Interagir avec une API

Le moyen le plus simple d’interagir avec les API via JavaScript est d’utiliser fetch. Cela demande de manière asynchrone des données à partir d’une URL et renvoie un promettre qui nous permet d’accéder aux données renvoyées.

Voyons un exemple simple :

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))

Ce code demandera des données à l’API Geek Jokes, qui renvoie une blague aléatoire au format JSON. Nous transmettons l’URL de l’API au fetch fonction. Cela renvoie une promesse, et nous pouvons enchaîner les then méthode – tout d’abord, pour convertir le JSON renvoyé en un objet JavaScript à l’aide de la json() méthode, puis de simplement enregistrer la joke propriété de cet objet à la console. Nous ajoutons également un bloc catch à la fin pour consigner les éventuelles erreurs.

Les demandes de récupération acceptent un deuxième paramètre dans lequel vous pouvez spécifier toutes les options de la demande, y compris les en-têtes. Un ensemble d’options assez standard est présenté ci-dessous :

const headers = new Headers()

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

Ceux-ci peuvent ensuite être ajoutés à la demande :

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))

La plupart des services nécessiteront la fourniture d’une clé afin d’accorder l’accès à l’API. Cela peut être inclus dans les en-têtes ou dans l’URL.

Il est extrêmement important de garder vos clés API cachées. En règle générale, ils doivent être stockés et chiffrés sur un serveur. Ceci afin d’éviter qu’ils soient visibles dans le code source et utilisés par quelqu’un d’autre. C’est généralement plus un problème lorsque vous payez un abonnement à l’entreprise, car l’entreprise ne voudrait pas donner un accès gratuit à son code.

Six des meilleurs

Jetons un coup d’œil à six des meilleures API auxquelles les développeurs peuvent accéder sur APILayer. Veuillez noter que pour tous les exemples ci-dessous, vous devrez modifier la clé d’accès (la clé API) pour qu’elle corresponde à la vôtre.

Spotify

La API Spotify est l’une des API les plus importantes (et les plus cool) disponibles sur APILayer. Il vous permet d’accéder à une multitude de données musicales et de podcasts disponibles sur Spotify.

À l’aide de cette API, vous pouvez obtenir des données telles que des albums, des pistes d’album, des artistes, des albums d’artistes, des listes de lecture, des pistes et des paroles de piste. Cela signifie que vous pouvez rechercher un artiste et recevoir des informations sur tous ses travaux/albums publiés, y compris la date de sortie et les auteurs et musiciens crédités.

Voici un exemple qui renvoie tous les albums d’un artiste donné :

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)

Nouvelles du monde

La API d’actualités mondiales vous donne accès à des milliers de sources d’information du monde entier. Les résultats proviennent de divers organes de presse, ce qui signifie que vous pouvez obtenir le même reportage à partir de différents points de vue.

L’API renvoie également une grande quantité de données, y compris le titre, la signature, l’auteur et le résumé de chaque article d’actualité, ainsi que toutes les images disponibles. L’API vous permet de rechercher des histoires par date et lieu, ce qui signifie que vous pouvez obtenir des nouvelles à la minute près ainsi que des histoires historiques d’un lieu particulier. La langue et le pays d’origine peuvent également être spécifiés dans la recherche. Il existe également une fonction d’intelligence artificielle astucieuse qui classe les histoires comme étant « positives » ou « négatives », vous permettant de conserver les histoires qui sont renvoyées encore plus loin.

Voici un exemple qui renvoie les cinq principales actualités d’aujourd’hui :

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``

Cheminée

L’API Weatherstack vous permet d’accéder aux statistiques météorologiques actuelles et historiques pour n’importe quel endroit donné, de n’importe où dans le monde. La fonction actuelle vous donne accès à des statistiques météorologiques en temps réel, telles que la température, la direction du vent, la pression et la visibilité.

Il y a une énorme quantité de données accessibles ici, en particulier dans la fonction météo historique qui remonte à juillet 2008, ce qui signifie que vous pouvez obtenir les statistiques météorologiques pour n’importe quel endroit à partir de n’importe quelle date après juillet 2008. Le lieu et la date doivent être spécifiés comme paramètres. La fonction historique dispose également d’un paramètre optionnel « horaire » qui peut être défini sur 1 ou 0, selon que vous souhaitez ou non que les données météorologiques soient réparties toutes les heures. Si vous choisissez de fractionner les données toutes les heures, vous pouvez également définir un paramètre facultatif d' »intervalle » sur 1, 3 (par défaut), 6, 12 ou 24, selon la manière dont vous souhaitez que les données soient fractionnées.

Les fonctionnalités historiques et actuelles ont un paramètre « unités » facultatif, dans lequel vous pouvez définir les unités des données sur « m » pour métrique, « f » pour Fahrenheit ou « s » pour scientifique.

Voici un exemple de code qui renvoie la température actuelle d’un emplacement donné :

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)

Vérification du numéro

La API de vérification de numéro vous permet de rechercher des numéros de téléphone de plus de 200 pays et de vérifier leur authenticité. L’API renverra également des détails sur le pays, l’indicatif du pays, l’opérateur de téléphonie mobile et le type de ligne (mobile ou fixe). Cela vous permettra de vérifier en temps réel un numéro de téléphone fourni par un utilisateur de votre application Web.

Vous trouverez ci-dessous un exemple qui vous permet de saisir un numéro de téléphone dans un formulaire. La soumission du formulaire indiquera si le numéro est valide ou non. S’il est valide, il affichera également le pays dans lequel le numéro de téléphone est basé :

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

La API Zenserp est une API SERP (page de résultats des moteurs de recherche) qui vous permet de gratter les pages de résultats des moteurs de recherche dans un format d’objet beaucoup plus propre. Ses terminaux incluent Google, Image Reverse Search, YouTube, Bing et DuckDuckGo. Le point de terminaison Google comprend également des sous-points de terminaison Image, Maps, Video, News et Shopping. Les résultats incluent également des informations de classement qui vous aideront à identifier les pages populaires et les tendances.

Il existe également des points de terminaison de liste qui peuvent être utilisés pour créer votre propre génération de requêtes. Ceux-ci incluent : les langues Google, les pays Google, les emplacements géographiques et les moteurs de recherche Google.

Étant donné un élément de recherche, l’API renverra toutes les pages qui apparaîtraient, y compris son URL et sa description.

Voici un exemple qui renverra la première recherche Google pour un sujet :

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

La API Zenscrape est une API de grattage Web qui, pour son utilisation de base, renverra le contenu HTML d’un site Web donné. Pour cela, il vous suffit de fournir un paramètre – l’URL du site Web cible – et la clé API. Il générera également tout code HTML dynamique sur la page à partir de n’importe quel framework JavaScript ou frontal tel que React ou Vue. Cela signifie que le code HTML renvoyé sera le même contenu qu’un utilisateur verrait.

Au début, cela peut ne pas sembler être quelque chose que vous auriez besoin d’utiliser. Mais le web scraping — et donc cette API — peut être vraiment utile pour interagir et analyser des statistiques. Par exemple, vous pouvez utiliser cette API pour créer une application qui compare les prix d’un produit sur plusieurs sites différents et montre à l’utilisateur le site d’achat qui offre le meilleur rapport qualité-prix pour ce produit.

L’API fournit également une interface proxy HTTP. Un proxy HTTP est un filtre de contenu hautes performances qui filtre tout le trafic Web, signalant tout contenu suspect pouvant être un virus ou des données intrusives et indésirables. L’interface vous permet d’utiliser n’importe quelle application qui repose déjà sur des proxies, il vous suffit d’utiliser la clé API comme nom d’utilisateur et d’inclure tous les paramètres normalement fournis comme mot de passe.

Cela vous permet également de spécifier un emplacement proxy spécifique pour obtenir le retour d’un contenu spécifique basé sur la géolocalisation. Le proxy utilisé est également automatiquement tourné pour aider à garder le bot de grattage anonyme et empêcher les sites de limiter le nombre de fois que vous pouvez les gratter.

Voici un exemple qui permet de saisir une URL et qui renverra le HTML à la console :

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)

Conclusion

Ces six exemples ne font qu’effleurer la surface de ce que APILayer a à offrir. Il y a beaucoup plus d’API disponibles, alors assurez-vous d’explorer pleinement le site et de vous amuser avec certaines d’entre elles. Par exemple, nous recommandons vivement le API des mots grossiersavec lequel nous nous sommes beaucoup amusés tous les deux !




Source link