Comment fonctionnent les API et comment les intégrer dans votre application

Les interfaces de programmation d'application (API) sont l'un des raccourcis ultimes pour créer des applications intelligentes. C'est un canal de communication entre deux applications. Que ce soit délibérément ou non, vous avez utilisé des API à certains moments en naviguant sur Internet ou en utilisant des programmes dans votre vie quotidienne.

Bien qu'une API envoie généralement des données complexes en réponse, comment pouvez-vous comprendre et utiliser ces informations pour servir vos utilisateurs? Les API facilitent la vie des développeurs expérimentés comme des nouveaux. Vous devez donc savoir comment les utiliser avec votre application.

Ici, avec quelques cas d'utilisation et exemples, nous examinons comment vous pouvez utiliser une API pour servir vos programmes en tant que développeur.

Comment fonctionnent les API?

Les développeurs créent des API en tant que produits pouvant servir d'autres développeurs. L'objectif est de rendre les processus de développement Web complexes faciles, plus efficaces et plus rapides pour les développeurs grand public ou les entreprises.

La plupart des entreprises dépendent désormais d'API tierces pour résoudre les problèmes et mieux servir leurs clients. Cependant, l'utilisation des API n'est pas aussi compliquée que beaucoup de gens le pensent. Vous pouvez le considérer comme une solution tierce qui vous donne une réponse spécifique sous forme de données lorsque vous effectuez une requête HTTP particulière.

Utiliser une API, c'est comme passer une commande dans une pizzeria. Vous ne pouvez pas aller dans la cuisine pour leur dire ce que vous voulez. Vous avez besoin d'un serveur pour prendre votre commande et la communiquer à la cuisine avant de revenir avec votre pizza.

Vous pouvez afficher une API comme lien entre vous et la cuisine. Dans ce cas, vous êtes un client fréquentant le restaurant fournissant un serveur (API). Le serveur répond alors avec votre choix de pizza (données). Dans une véritable API, votre application Web est le client qui demande à consommer le contenu du fournisseur via son API en effectuant des requêtes HTTP de point de terminaison.

Qu'est-ce qu'un point de terminaison d'API?

La connexion à une API nécessite que vous connectiez votre programme à un point de terminaison d'API. Vous pouvez voir cela comme une connexion bidirectionnelle. Le point de terminaison connecté à votre programme envoie une requête, tandis que celui connecté à l'API vous renvoie une réponse spécifique.

Le point de terminaison est une URL qui demande et donne au client un accès direct aux ressources d'une API.

En plus d'obtenir des données avec une API, vous pouvez également POSTER des requêtes d'un fournisseur à un client, utiliser la méthode PUT pour obtenir plus d'informations d'un fournisseur, ainsi que la méthode DELETE pour supprimer les données existantes de votre programme. Chacune de ces méthodes est généralement disponible dans la documentation d'une API.

Critères de connexion à une API

L'intégration d'une API à votre programme n'est pas seulement une décision spontanée, elle est pré-méditée. Vous devez savoir quelles informations vous voulez et quelle quantité vous en voulez. Cela réduit la complexité, surtout si vous avez affaire à des données JSON qui se présentent sous la forme d'un tableau multidimensionnel. Cette pratique vous permet également d'obtenir les informations spécifiques dont vous avez besoin pour votre programme.

Il existe des centaines d'API avec des règles différentes pour s'y connecter. Alors que certaines API sont gratuites et open source, d'autres ne sont accessibles que sur la base d'un abonnement.

Bien que certaines soient transparentes et simples et ne nécessitent aucun pré-requis, d'autres API peuvent exiger que vous remplissiez des conditions telles que la génération d'une clé API ou l'inscription au compte d'un développeur avant de pouvoir vous connecter à leurs points de terminaison.

En relation: Intégration des données de vol dans votre projet avec l'API Aviationstack

Cependant, l'un des aspects les plus importants de toute API est sa documentation. La meilleure pratique consiste à lire et à suivre la documentation de toute API avec laquelle vous avez l'intention de vous connecter pour obtenir des guides sur la façon de coder et d'utiliser ses ressources. En effet, chaque API a ses propres méthodes et instructions de connexion.

Pour vous connecter à n'importe quelle API, vous devez également connaître les langages de programmation qu'elle prend en charge.

Comment se connecter à une API: exemples pratiques

Il n'existe pas de moyen spécifique de se connecter à une API, mais quelques exemples vous exposeront aux concepts de base de la façon dont vous pouvez consommer des données d'API avec votre application. Mais avant d'aller plus loin, nous avons écrit quelques articles sur les API et comment vous pouvez les exploiter.

Par exemple, nous avons un article détaillé sur la façon dont vous pouvez vous connecter à l'API Weatherstack , qui vous donne accès à des données météorologiques en temps réel. Nous avons également expliqué comment utiliser l'API Mediastack , une API payante que vous pouvez utiliser pour ajouter des titres d'actualité à votre site Web.

Jetons un coup d'œil à quelques brefs exemples de code sur la façon dont vous pouvez vous connecter à une API.

Comment utiliser l'API Color Picker Iro.js

Iro.js est une API simple qui vous permet d'ajouter un sélecteur de couleurs gratuit à votre site Web. Lorsque vous sélectionnez un point de couleur sur la roue chromatique, l'API renvoie le code hexadécimal ou RVB de cette couleur. Pour vous connecter à l'API iro.js, il vous suffit de coller son point de terminaison CDN (Content Delivery Network) dans la section head de votre DOM.

La documentation complète de cette API est disponible sur iro.js.org . Voyons comment vous pouvez vous connecter à cette API avec l'exemple d'extrait de code ci-dessous:

 <!DOCTYPE html>
<html>
<head>
<title>Practice Slider</title>
<script src="https://cdn.jsdelivr.net/npm/@jaames/[email protected]"></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>

Dans le cas de l'exemple d'API ci-dessus, vous n'avez pas besoin d'une clé API pour vous y connecter. Cependant, pour mieux le comprendre, examinez de plus près le JavaScript. Pour nous connecter à cette API, il suffit d'appeler la fonction ColorPicker à partir de la classe iro , puis nous transmettons l' id du conteneur de roue chromatique à la classe.

Le point de terminaison de l'API iro.js est facile à connecter car ses développeurs ont effectué le travail supplémentaire de codage de la classe pour ses utilisateurs. L'image ci-dessous est le résultat de l'exemple de code ci-dessus.

Pour voir comment se produit l'événement de changement de couleur, vous pouvez ouvrir un autre fichier HTML et coller le code suivant dans sa section scripts :

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

Le code ci-dessus enregistre les valeurs de couleur hexadécimales chaque fois que vous modifiez la position du sélecteur de couleur sur la roue.

Connexes: divertissez les visiteurs de votre site avec l'API Marketstack

NB: Tous les exemples de code sont le résultat de suivre les instructions de la documentation de l'API.

Comment utiliser l'API NoCodeAPI Currency Exchange

NoCodeAPI propose de nombreuses API, y compris l'API de conversion de devises. Pour vous connecter à son point de terminaison de change, accédez à la place de marché NoCodeAPI et créez un compte.

Une fois que vous vous connectez, il y a une barre de recherche dans la partie supérieure de la page. Dans cette barre de recherche, tapez change de devises , une fois que votre requête apparaît, cliquez sur Activer .

Sur la page suivante, cliquez sur Make Currency Exchange API . Ensuite, saisissez un nom préféré pour l'API et cliquez sur Créer .

Une fois que vous avez créé l'API, cliquez sur Afficher la documentation . Ensuite, sélectionnez une langue préférée pour afficher le code de connexion au point de terminaison de l'API. Vous pouvez ensuite copier cet exemple de code et le coller dans votre application pour une personnalisation supplémentaire.

Jetez un œil à notre exemple de code ci-dessous pour la conversion de devises:

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

Le code ci-dessus n'est qu'une version modifiée de celui de la documentation. Cependant, portez une attention particulière aux paramètres de conversion dans la variable de réponse du JavaScript.

Voici à quoi ressemble la sortie JSON brute:

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

Tirez parti des API

L'utilisation d'API pour votre application vous permet de réaliser des projets plus rapidement. Bien que la documentation de l'API puisse être technique, il y en a beaucoup qui sont utiles pour les nouveaux arrivants.

Cependant, comme nous l'avons indiqué précédemment, pour tirer le meilleur parti de toute API à partir de laquelle vous souhaitez exploiter des données, vous devez étudier attentivement sa documentation et respecter les règles de connexion.

Bien que nous ayons utilisé JavaScript pour nos exemples ici, en fonction du type d'API, la plupart d'entre eux prennent également en charge d'autres langages de programmation. Vous pouvez obtenir des informations sur la prise en charge des langues dans la documentation de n'importe quelle API. Notez également que les exemples que nous avons utilisés ici ne sont que quelques-uns des nombreux cas d'utilisation des API.