---
# System prepended metadata

title: Concept API
tags: [cours, ' good practice']

---

---
title: Cours API
tags: cours, api, good practice
robots: noindex, nofollow
author: Giuseppe Militello
---
# Interface de programmation : API
![cover](https://open-prod.com/wp-content/uploads/2022/01/visuel-api.png)

> &copy;  [Giuseppe Militello](https://www.linkedin.com/in/giuseppe-militello-22406ab0/) - All rights reserved for educational purposes only

Nous avons l’habitude de voir toutes ces données défiler sans arrêt sous vos yeux comme par magie, que ce soit sur les réseaux sociaux ou les applications de comparatifs en tout genre. De votre point de vue, c’est assez simple : les informations arrivent au fur et à mesure sans effort; sauf qu’en coulisse, c’est autre chose! En effet, un gros travail est effectué pour rendre cela possible et pour que cela fonctionne, il nous faut l’un des outils les plus importants : une **API**

## Roy Fielding 

Roy Fielding est notamment connu pour être l'un des principaux auteurs de la spécification HTTP, et a aidé au développement des premiers serveurs web. Basés sur le protocole HTTP 1.0, les règles qui distinguent une API d'une API REST

REST, pour REpresentational State Transfer, est un type architectural définissant un ensemble de contraintes à mettre en place sur des services web. Se basant sur le protocole HTTP ou HTTP(s), ce style d’architecture est aujourd’hui devenu une norme dans le monde du développement back-end.

## Caractéristiques spécifique API RESTfull
Les API ne sont pas RESTful et les API REST ont des lignes directrices architecturales spécifiques.

* Les avantages clés des API REST sont les suivants :

* la séparation du client et du serveur, qui aide à scaler plus facilement les applications ;

* le fait d’être stateless, ce qui rend les requêtes API très spécifiques et orientées vers le détail ;

* la possibilité de mise en cache, qui permet aux clients de sauvegarder les données, et donc de ne pas devoir constamment faire des requêtes aux serveurs.

* SOAP est un autre type d’API, mais est plus utilisé dans les grandes entreprises.


**Exemple requête API** : 
```js=
    https://api-adresse.data.gouv.fr/search/?q=8+bd+du+port
```

La réponse est :

![](https://hackmd.io/_uploads/BktEvxUkT.png)

Une structure informationnelle dans un ficnier jSON

## Qu'est-ce que un API

API est une abbréviation et signifie Application Programming Interface (ou interface de programmation d’application, en français). Pour faire simple : c’est un moyen de communication entre deux programmes, que ce soit entre différents composants d’une application ou entre deux applications différentes.

Par exemple, lorsque que vous consultez la météo sur votre téléphone, vous utilisez une API. L’application vient récupérer les données météorologiques depuis un serveur, pour être manipulé et retransmis sur votre téléphone. La même API peut être appélé par une autre application sur votre PC ou votre montre connecté et ainsi de suite.

![](https://hackmd.io/_uploads/H1ovV_QCn.png)

## Quel est l’objectif d’une API ?


1. Simplifier le développement de certaines applications

> Afin de conserver une compétitivité face au changement rapide du numérique, il est important de favoriser le développement et le déploiement d’une application rapidement. Grâce aux API, les développeurs pourront intégrer des composants dans une architecture existante.



2. Faciliter la connexion et le partage de données

> Grâce au système d’API publique, l’API est accessible à tous, permettant d’autoriser un tiers à développer une application qui interagit avec l’API et ainsi permettre d’élargir les innovations.



3. Ouvrir l'accès des ressources de façon sécurisée

> Les API permettent d’ouvrir votre infrastructure, tout en garantissant un contrôle et une sécurité. En effet, vous choisissez les ressources que vous voulez partager et avec qui vous voulez. De plus, la communication entre l’API et l’application peut se faire par l’intermédiaire d’une plateforme d’intégration distribuée.

## Un exemple concret
>Imaginez une application de comparateur de vols. Celle-ci ne peut pas accéder directement aux informations d'Air France KLM ou de toute autre compagnie aérienne. En effet, l’application n’a pas accès à leurs base de données directement. Mais si la compagnie a une API à qui on peut demander des informations et qui partage certaines données de la BDD avec d’autres applications, alors le Comparateur peut demander des informations à l’API d'Air France KLM. L’API lui renvoie alors des données que le Comparateur peut partager.

>Un exemple plus proche de votre quotidien. Sur certains sites, vous pouvez utiliser votre compte Google ou Meta pour vous identifier sans avoir à créer un identifiant et un mot de passe. Cela est dû au fait que ces sites partage la même API de connection
>
>Les API peuvent communiquer:
>d’un logiciel à un logiciel
>d’un client à un serveur
>ou d’un logiciel à des développeurs

## Création d'une API REST en Express.js (Node.js)

```js=
const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

let products = [
    { id: 1, name: "Laptop", price: 1200 },
    { id: 2, name: "Mouse", price: 25 }
];

// Endpoint GET
app.get('/products', (req, res) => {
    res.json(products);
});

// Endpoint POST
app.post('/products', (req, res) => {
    const newProduct = req.body;
    products.push(newProduct);
    res.status(201).json(newProduct);
});

app.listen(port, () => console.log(`API running on http://localhost:${port}`));
```
## Test avec la méthode fetch()
```js=
fetch('http://localhost:3000/products')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Erreur:', error));

```

## Amusez vous avec l'API de GitHub
![api](https://hackmd.io/_uploads/SyWy7u_8T.png)

>testez la requête avec votre dépôt gitHub
```js=
https://api.github.com/users/votre_nom_depot_git
```


🧐 [Analyser la requête](https://api.github.com/users/giusmili)


---


# 🚀 Historique XHR (XMLHttpRequest)
![68747470733a2f2f7777772e636f6465696d6d657273697665732e636f6d2f77702d636f6e74656e742f75706c6f6164732f323031382f30362f4a532d4a534f4e2d414a41582d6a51756572792d6c6f676f732e6a706721](https://hackmd.io/_uploads/BJhAWdu86.jpg)


## 📝Ajax : Asynchronous Javascript And XML (Jesse James Garrett)
> L'objet XMLHttpRequest permet d'envoyer des requêtes HTTP vers le serveur, de recevoir
des réponses et de mettre à jour une partie de la page web. En mode asynchrone, cette
mise à jour se réalise sans avoir à recharger la page et donc de façon totalement
transparente pour l'utilisateur.
L'objet XMLHttpRequest s'utilise donc dans une architecture de type client/serveur.



## L'object XMLHttpRequest
```js=
const  xhr = new XMLHttpRequest();
const  url = "./api/produit.json";

 xhr.onreadystatechange = () => {

        // Vérifier si la requête de récupération est terminée
        if (xhr.readyState == 4 && xhr.status == 200) { 
        
          // Parse jSon, pour transformer le fichier txt en flux json
          let jsonData = JSON.parse(xhr.responseText);
            console.log(jsonData)
          // appel de la méthode, passage en paramètre de la requete  
          showProd(jsonData);
        }
        else{
        console.log("erreur de requête");
        warning.innerHTML = `<p>Erreur de requête : ${xhr.status}</p>`
    }
};
```


## 📝Mode de fonctionnement :
* L'objet XMLHttpRequest est créé par le moteur Javascript du navigateur
* Cet objet est alors utilisé pour effectuer une requête HTTP vers le serveur.
* La réponse est fournie par ce dernier au navigateur.
* A l'aide du html le résultat est ensuite affiché dans le navigateur

## Image ci-dessous
![cover-ajax](https://hackmd.io/_uploads/HyNzG_O8T.png)


## 📝Acronyme AJAX (Asynchronous, Javascript And XML)
> AJAX est une méthode utilisant différentes technologies ajoutées aux navigateurs web entre 1995 et 2005, et dont la particularité est de permettre d'effectuer des requêtes au serveur web

<small><em>By Militello Giuseppe</em></small>

[![forthebadge](https://forthebadge.com/images/badges/made-with-javascript.svg)](https://forthebadge.com)



> Source:
> [wikipedia](https://fr.wikipedia.org/wiki/Interface_de_programmation) : historique
> [Openclassroom](https://openclassrooms.com/) : partie pratique
> [picsum photo](https://picsum.photos/) : partie applicative
> [API.gouv](https://adresse.data.gouv.fr/api-doc/adresse) : partie applicative


