Le developpement web

Mais c’est quoi une application web ?

Une application web

Ca répond à des requêtes HTTP
C’est accessible via internet (pas toujours => intranet)
C’est utilisable avec un navigateur (pas toujours => API)

Une requête HTTP

GET /gp/cart/view.html?ref_=nav_cart
Host: www.amazon.fr
Accept: text/html
User-Agent: Chrome/27.0.1453.110

La réponse

HTTP/2 200 
content-type: text/html; charset=UTF-8
Content-Length: 155
date: Wed, 26 Aug 2020 13:59:36 GMT

<html>...</html>

Les verbes HTTP

Verbe	Définition
GET	Lecture d’une ressource
POST	Création d’une ressources
PUT	Mise à jour d’une ressource
DELETE	Suppression d’une ressource

Les headers HTTP

Headers	Définition
Accept	Format des données attendues
Content-Type	Format des données envoyées
Cache-Control	Politique de cache
Authorization	Token d’authentification
Origin	L’origine de la consultation

Les codes de retour

Headers	Définition
1xx	Informational
2xx	Success
200	Ok
201	Created
3xx	Redirection
4xx	Client errors
400	Bad Request
401	Unauthorized
403	Forbidden
404	Not found
5xx	Server errors
500	Internal Server Error

La norme REST

REpresentational State Transfer
Créer par Roy Fielding en 2000
Se base sur les url, les verbes et les headers
Permet de faire une API facilement utilisable
Simple à comprendre

Pourtant ça à l’air compliqué…

Récupérer toutes les pizzas

GET /pizzas
Host: www.pizzima.fr
Accept: application/json

// Status code 200
[
    {id: 1, name: "Classique jambon" },
    {id: 2, name: "Bellachô" },
    {id: 3, name: "Super veggie" },
    ...
]

Récupérer la pizza n°42

GET /pizzas/42
Host: www.pizzima.fr
Accept: application/json

// Status code 200
{
    id: 42, 
    name: "4 Fromages",
}

Ajouter une pizza

POST /pizzas
Host: www.pizzima.fr
Accept: application/json

{
    name: "Pepperoni",
    description: "Une pizza au pepperoni"
}

// Status code 201
{
    id: 50,
    name: "Pepperoni",
    description: "Une pizza au pepperoni"
}

Modifier la pizza n°42

PUT /pizzas/42
Host: www.pizzima.fr
Accept: application/json

{
    name: "5 Fromages",
    description: "Une pizza au fromage"
}

// Status code 200
{
    id: 42,
    name: "5 Fromages",
    description: "Une pizza au fromage"
}

Supprimer la pizza n°42

DELETE /pizzas/42
Host: www.pizzima.fr
Accept: application/json

// Status code 200
{
    id: 42,
    name: "5 Fromages",
    description: "Une pizza au fromage"
}

Récupérer les ingrédients de la pizza n°42

GET /pizzas/42/ingredients
Host: www.pizzima.fr
Accept: application/json

// Status code 200
["Sauce tomate", "Mozzarella", "Jambon"]

Ok, mais en Javascript, on fait ça comment ?

ExpressJS

app.get('/pizzas', (req, res) => {
    const pizzas = pizzaService.findAll()
    res.status(200).json(pizzas)
})

app.get('/pizzas/:id', (req, res) => {
    const pizza = pizzaService.findOneById(req.params.id)
    if(!pizza) return res.status(404).send("Not found")
    res.status(200).json(updatedPizza)
})

app.post('/pizzas', (req, res) => {
    const newPizza = pizzaService.create(req.body)
    res.status(201).json(newPizza)
})

app.delete('/pizzas/:id', (req, res) => {
    const removedPizza = pizzaService.delete(req.params.id)
    res.status(200).json(removedPizza)
})