Comment fonctionnent les interfaces de programmation d'application (API) et comment les intégrer dans votre application

Les interfaces de programmation d'applications (API) sont l'un des derniers raccourcis pour créer des applications intelligentes. C'est un canal de communication entre deux applications. Que ce soit intentionnel ou non, vous avez utilisé des API à un moment donné en naviguant sur Internet ou en utilisant diverses applications dans votre vie quotidienne.

Même si le API En général, des données complexes sont envoyées en réponse, comment pouvez-vous comprendre ces informations et les utiliser pour servir les utilisateurs? Les interfaces de programmation d'applications (API) facilitent la vie des développeurs expérimentés et débutants. Vous devez donc savoir comment l'utiliser avec votre application.

Ici, avec quelques cas d'utilisation et exemples, nous verrons comment utiliser les API pour servir vos applications en tant que développeur.

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

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 d'entreprise.

La plupart des entreprises s'appuient désormais sur des API tierces pour mieux résoudre les problèmes et 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 placez une requête HTTP spécifique.

Utiliser l'API équivaut à 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 livrer à la cuisine avant de revenir avec votre pizza.

Vous pouvez assimiler l'API au lien entre vous et la cuisine. Dans ce cas, vous êtes un client qui visite le restaurant qui en fait la demande au serveur (API). Ensuite, le serveur répond avec votre choix de pizza (données). Dans une véritable API, votre application Web est le client qui demande que le contenu du fournisseur soit consommé via son API en servant des requêtes HTTP au point de terminaison.

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

La connexion à l'API nécessite que vous connectiez votre application au point de terminaison de l'API. Vous pouvez comparer cela comme une communication bidirectionnelle. Le point de terminaison connecté à votre application envoie une requête, tandis que le point connecté au bit API vous fournit une réponse spécifique.

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

En plus d'obtenir des données à l'aide de l'API, vous pouvez également publier des demandes du fournisseur au client, utiliser la méthode PUT pour obtenir plus d'informations du fournisseur et utiliser la méthode DELETE pour supprimer les données existantes de votre application. Chacune de ces méthodes est généralement disponible dans la documentation de l'API.

En bref, les API représentent, à un niveau élevé, la façon dont les applications informatiques «se parlent» entre elles afin qu'elles puissent demander et fournir des informations. Cela se fait en permettant à une application logicielle d'appeler un point de terminaison: une adresse qui correspond à un type spécifique d'informations affichées par le fournisseur (les points de terminaison sont généralement uniques en tant que numéros de téléphone). Le fournisseur autorise l'accès à certaines parties de ses services via des API pour permettre aux gens de créer des applications qui s'intègrent à son application.

Normes de communication API

L'intégration d'une API à votre application n'est pas qu'une décision spontanée - elle doit avoir été étudiée au préalable. Vous devez savoir quelles informations vous voulez et combien vous en voulez. Cela réduit la complexité, en particulier si vous travaillez avec 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 application.

Il existe des centaines d'API avec des règles différentes pour les appeler. 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 création d'une clé API ou l'inscription à un compte de développeur avant de pouvoir vous connecter à leurs points de terminaison.

Cependant, l'un des aspects les plus importants de toute API est la documentation fournie. La meilleure pratique consiste à lire et à suivre la documentation de toute API que vous souhaitez contacter pour obtenir des instructions sur la façon d'écrire du code et d'utiliser ses ressources. En effet, chaque API a ses propres méthodes et instructions de connexion.

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

Comment appeler l'API: exemples pratiques

Il n'y a pas de moyen spécifique de se connecter à l'API, mais quelques exemples vous montreront les concepts de base de la façon dont les données d'API sont consommées avec votre application.

Par exemple, nous avons un article détaillé sur Comment se connecter à l'API Serpstack , Qui vous donne accès à des données géographiques en temps réel.

Jetons un coup d'œil à quelques exemples de code court sur la façon de se connecter à l'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 spécifiez un point de couleur sur la roue chromatique, l'API renvoie le code hexadécimal ou le code RVB pour cette couleur. Pour vous connecter à l'API iro.js, tout ce que vous avez à faire est de coller son point de terminaison CDN dans la section d'en-tête du DOM.

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

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

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

Il est facile de se connecter au point de terminaison de l'API iro.js 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 du code de l'exemple ci-dessus.

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

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

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.

Note: L'exemple de code a été généré en suivant les instructions de la documentation de l'API.

Comment utiliser l'API NoCodeAPI Currency Exchange

NoCodeAPI fournit plusieurs API, dont l'API Currency Converter. Pour vous connecter à son point de terminaison de convertisseur de devises, accédez à Marketplace - NoCodeAPI et créez un compte.

Une fois connecté, il y a une barre de recherche en haut de la page. Dans cette barre de recherche, saisissez un bureau de change Une fois que votre requête apparaît, cliquez sur Activer.

Sur la page suivante, appuyez sur Créer une API de change de devises. Ensuite, saisissez le nom de votre API préféré et cliquez sur Créer.

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

Jetez un œil à l'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 rien d'autre qu'une version modifiée de ceux des documents. Cependant, portez une attention particulière aux paramètres de transformation dans la variable de réponse JavaScript.

Voici à quoi ressemble la sortie brute JSON:

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

Profitez des API

L'utilisation des 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 plusieurs qui sont utiles pour les nouveaux arrivants.

Cependant, comme mentionné précédemment, pour tirer le meilleur parti de toute API à partir de laquelle vous souhaitez obtenir des données, vous devez étudier attentivement sa documentation et respecter ses 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 à partir de n'importe quelle documentation API. Notez également que les exemples que nous avons utilisés ici ne sont que quelques-uns des cas d'utilisation de nombreuses API. Tu peux voir Obtenez des fonctionnalités utiles pour le géocodage avec l'API Positionstack.

source
Aller au bouton supérieur