FRFAM.COM >> Famille >> Technologie &Innovation >> Informatique

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

Les interfaces de programmation d'applications (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 et débutants. 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 qui peuvent servir d'autres développeurs. L'objectif est de rendre les processus de développement Web complexes simples, 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 leurs 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. Tu ne peux pas aller dans la cuisine pour leur dire ce que tu veux. Vous avez besoin d'un serveur pour prendre votre commande et la communiquer à la cuisine avant de revenir avec votre pizza.

Vous pouvez voir une API comme ce lien entre vous et la cuisine. Dans ce cas, vous êtes un client patronnant le restaurant fournissant un serveur (API). Le serveur répond ensuite 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 faisant des requêtes HTTP au 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 qu'utiliser la méthode DELETE pour supprimer des 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, c'est prémédité. Vous devez savoir quelles informations vous voulez et quelle quantité vous 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 différentes règles pour s'y connecter. Alors que certaines API sont gratuites et open source, d'autres ne sont accessibles que sur 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 à 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 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'y a pas de manière 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 sur la façon dont vous pouvez les exploiter.

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

Examinons quelques brefs exemples de code sur la façon dont vous pouvez vous connecter à une API.

Comment utiliser l'API de sélection de couleurs 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 de réseau de diffusion de contenu (CDN) dans le head section 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 :

 


Curseur de pratique








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, regardez de plus près le JavaScript. Pour se connecter à cette API, il suffit d'appeler le ColorPicker fonction de l'iro classe, puis nous passons l'id du conteneur de la roue chromatique dans 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.

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

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

var colorPicker =new iro.ColorPicker('#color-pick', { 
// Définit la taille du sélecteur de couleurs
largeur :400,
// Fixe la couleur initiale au rouge pur
couleur :"#ff0000"
});
const maCouleur =(couleur)=>{
console.log(color.hexString);
} ;
colorPicker.on("couleur:changer", maCouleur);

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.

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

Comment utiliser l'API d'échange de devises NoCodeAPI

NoCodeAPI propose de nombreuses API, dont l'API de conversion de devises. Pour vous connecter à son terminal de change, rendez-vous sur la place de marché NoCodeAPI et créez un compte.

Une fois connecté, une barre de recherche apparaît en haut de la page. Dans cette barre de recherche, saisissez change de devises , une fois votre requête affichée, 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 plus poussée.

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

 


Convertisseur de devises