Comment utiliser une API ?

Qu’est-ce qu’une API ?

Une API (Application Programming Interface) est un ensemble de fonctionnalités

open-source qu’une application permet à ses clients,

aux consommateurs et aux développeurs web du monde entier.

Une API permet de partager les fonctionnalités d’une application

et ses données déjà existantes afin que d’autres

fonctionnalités puissent être créées autour de ce code source.

Les nouvelles applications basées

sur ces données et codes sont des satellites

de l’application de base.

L’utilisation d’une API permet de travailler

davantage sur le développement d’une application

ou d’un service existant afin de gagner du temps

de travail au lieu de créer une application entièrement nouvelle.

Utilisation d’une API publique pour obtenir des données

  • Nous allons maintenant nous intéresser à l’API basée sur le web et nous attendons avec impatience les cas d’utilisation spécifiques. Notez que nous utiliserons l’outil d’application Postman dans nos exemples. Pour compléter le tutoriel avec nous, vous devez télécharger Postman en cliquant sur ce lien.

  • A titre d’exemple, nous utiliserons le PokeAPI (ce site web référence des informations sur les pokémons, leurs mouvements, leurs sorts, leur type, leurs groupes d’œufs et bien d’autres encore !)

  • Cette API est drôle mais elle ne nécessite pas non plus d’authentification.  Nous pouvons voir qu’il s’agit d’une API HTTP REST, ce qui signifie qu’il s’agit d’une API web.

  • Postman est lié à cet environnement, il nous oblige à suivre certaines spécifications de protocole : dans ce cas, les méthodes de requête HTTP (GET, PUT, POST, DELETE…etc). Dans notre exemple, nous allons faire le travail en utilisant la méthode la plus simple et les fonctionnalités les plus compréhensibles en utilisant la requête GET. Cette API ne permet aucune autre méthode de requête de toute façon. La plupart des API publiques vous permettent d’utiliser des données mais ne vous permettent généralement pas de télécharger vos propres données, c’est pourquoi nous utiliserons GET.

Ouvrons postman.

Connecter vous avec un compte Google ou autre:

Sélectionner GET request

Choisissez la méthode GET et copiez/collez ce lien URL : 

https://pokeapi.co/api/v2/pokemon

Cliquez sur « Envoyer » et vous devriez recevoir une réponse avec les données appropriées.

Bien joué ! Vous venez de faire votre premier appel API.

Affichage des données API

Les fichiers devront être placer dans un serveur local ou en ligne, dans cette exemple nous allons utiliser easy php.

Créez maintenant les fichiers suivants :

  • index.html
  • style.css

Ainsi qu’un dossier JS qui contiendra un fichier js :

  • JS/app.js

Le fichier index.html  :

Copier / Coller le code :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Pokedex</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css"/>
    <title>POKE API</title>
</head>

<body>
    <div class="container">
        <h1>Pokedex</h1>
        <ul data-js="pokedex" class="pokedex"></ul>
    </div>

    <script src="./JS/app.js"></script>

</body>

</html>

Que fait ce code ? 

Feuille de style :

    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap" rel="stylesheet">

L’appel JavaScript :

<script src="./JS/app.js"></script>

Le fichier app.js :

Maintenant que nous avons créé le fichier .html, la structure de notre page est faite. Nous allons maintenant appeler l’API elle-même pour récupérer les données.

const getPokemonUrl = id => `https://pokeapi.co/api/v2/pokemon/${id}` //appelle API


const generatePokemonPromises = () => Array(150).fill().map((_, index) => //Pokemon générer dans un tableau
    fetch(getPokemonUrl(index + 1)).then(response => response.json()))

    const generateHTML = pokemons => pokemons.reduce((accumulator, {name, id, types}) => {
            const elementTypes = types.map(typeInfo => typeInfo.type.name)

            accumulator += 
                `<li class="card ${elementTypes[0]}">
            <img class="card-image" alt="${name}" src="https://pokeres.bastionbot.org/images/pokemon/${id}.png"
            </br>
            <h2 class="card-title">${id}. ${name}</h2>
            <p class="card-subtitle">${elementTypes.join(' | ')}</p>
            </li>
            `  
            return accumulator
        }, '')
      
    

const insertPokemonsIntoPage = pokemons => {
    const ul = document.querySelector('[data-js="pokedex"]')
    ul.innerHTML = pokemons
}

    const pokemonPromises = generatePokemonPromises()

    Promise.all(pokemonPromises)
        .then(generateHTML)
        .then(insertPokemonsIntoPage)
        

Félicitations ! Vous venez de créer un site, de le concevoir et d’appeler une API !

____________________________________________

Si vous souhaitez aller plus loin, essayez de développer votre propre API, vos outils et votre site web.

Bonne chance et amusez-vous bien !

Rendu final:

Credits : 

-API : https://pokeapi.co/

-Content creators : GARCIA / DANEL

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *