Client
↔ Serveur

── REQUÊTE ──────────────────────────────
POST /api/articles HTTP/1.1
Host: localhost:3000
Content-Type: application/json
Authorization: Bearer eyJhbGci...

{
  "titre": "Mon premier article",
  "contenu": "Bonjour le monde !"
}

── RÉPONSE ──────────────────────────────
HTTP/1.1 201 Created
Content-Type: application/json
Location: /api/articles/42

{
  "id": 42,
  "titre": "Mon premier article",
  "contenu": "Bonjour le monde !",
  "createdAt": "2024-03-15T10:30:00Z"
}

# 2xx — Succès
200 OK          # GET réussi
201 Created     # POST → ressource créée
204 No Content  # DELETE réussi (pas de body)

# 3xx — Redirection
301 Moved Permanently  # URL changée définitivement
302 Found              # Redirection temporaire

# 4xx — Erreur client
400 Bad Request    # Corps invalide / champ manquant
401 Unauthorized   # Non authentifié
403 Forbidden      # Authentifié, mais pas les droits
404 Not Found      # Ressource inexistante
422 Unprocessable  # Validation échouée

# 5xx — Erreur serveur
500 Internal Server Error  # Bug côté serveur
503 Service Unavailable    # Serveur surchargé / en maintenance

┌─────────────────────────────────────────┐
│           TIER 1 — Présentation          │
│  Navigateur : Vue.js / React             │
│  → affiche les données                   │
│  → envoie les actions de l'utilisateur   │
└────────────────┬────────────────────────┘
                 │  HTTP/JSON (fetch, axios)
                 ▼
┌─────────────────────────────────────────┐
│           TIER 2 — Logique métier        │
│  API Express / Flask                     │
│  → authentification (JWT)                │
│  → validation des données                │
│  → règles métier                         │
│  → orchestration                         │
└────────────────┬────────────────────────┘
                 │  SQL / ORM
                 ▼
┌─────────────────────────────────────────┐
│           TIER 3 — Données               │
│  MySQL / PostgreSQL / MongoDB            │
│  → stockage persistant                   │
│  → transactions                          │
│  → contraintes d'intégrité              │
└─────────────────────────────────────────┘

✗ Mauvaises pratiques (verbes dans l'URL)
GET /getArticles
GET /getArticleById?id=42
POST /createArticle
POST /deleteArticle?id=42

✓ Bonnes pratiques (noms, verbes HTTP)
GET    /articles
GET    /articles/42
POST   /articles
DELETE /articles/42

✓ Relations imbriquées
GET    /utilisateurs/1/articles    # articles de l'utilisateur 1
POST   /utilisateurs/1/articles    # créer un article pour user 1
DELETE /utilisateurs/1/articles/5  # supprimer article 5 de user 1

✓ Versions d'API
GET /api/v1/articles
GET /api/v2/articles   # nouvelle version sans casser l'ancienne

✓ Filtres via query string
GET /articles?categorie=tech&publie=true&page=2&limite=10

// Appel asynchrone — le navigateur n'est PAS bloqué
async function chargerArticles() {
  try {
    const reponse = await fetch('/api/articles');
    if (!reponse.ok) throw new Error(`HTTP ${reponse.status}`);
    const articles = await reponse.json();
    afficher(articles);
  } catch (err) {
    console.error('Erreur réseau :', err);
  }
}

// POST avec corps JSON
async function creerArticle(data) {
  const reponse = await fetch('/api/articles', {
    method:  'POST',
    headers: { 'Content-Type': 'application/json',
               'Authorization': `Bearer ${token}` },
    body:    JSON.stringify(data),
  });
  return reponse.json();
}

// Plusieurs requêtes en parallèle
const [articles, utilisateurs] = await Promise.all([
  fetch('/api/articles').then(r => r.json()),
  fetch('/api/utilisateurs').then(r => r.json()),
]);

# pip install requests
import requests

BASE = 'http://localhost:3000/api'
token = 'eyJhbGci...'
headers = {'Authorization': f'Bearer {token}'}

# GET — lire
rep = requests.get(f'{BASE}/articles', headers=headers)
rep.raise_for_status()  # lève une exception si 4xx/5xx
articles = rep.json()

# POST — créer
rep = requests.post(f'{BASE}/articles',
    json={'titre': 'Test', 'contenu': '...'},
    headers=headers
)
nouvel_article = rep.json()

# Asynchrone Python — httpx
# pip install httpx
import httpx, asyncio

async def charger():
    async with httpx.AsyncClient() as client:
        rep = await client.get(f'{BASE}/articles')
        return rep.json()

asyncio.run(charger())

// npm install socket.io
const http = require('http');
const { Server } = require('socket.io');
const express = require('express');

const app    = express();
const serveur = http.createServer(app);
const io     = new Server(serveur, {
  cors: { origin: '*' }
});

io.on('connection', socket => {
  console.log(`Client connecté : ${socket.id}`);

  // Recevoir un message du client
  socket.on('message', data => {
    console.log('Reçu :', data);
    // Envoyer à tous les clients connectés
    io.emit('message', { ...data, id: socket.id });
  });

  socket.on('rejoindre-salon', salon => {
    socket.join(salon);                      // groupe de clients
    io.to(salon).emit('info', 'Nouveau membre');
  });

  socket.on('disconnect', () => {
    console.log(`Déconnexion : ${socket.id}`);
  });
});

serveur.listen(3000);

// Dans le navigateur — Socket.io client
import { io } from 'socket.io-client';

const socket = io('http://localhost:3000');

// Événements de connexion
socket.on('connect', () => {
  console.log('Connecté !', socket.id);
  socket.emit('rejoindre-salon', 'salon-general');
});

// Recevoir un message du serveur
socket.on('message', data => {
  afficherMessage(data);
});

// Envoyer un message au serveur
function envoyer(texte) {
  socket.emit('message', {
    texte,
    auteur: 'Alice',
    horodatage: new Date().toISOString()
  });
}

socket.on('disconnect', () => console.log('Déconnecté'));

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # autoriser les appels depuis le front

articles = [
    {'id': 1, 'titre': 'Premier', 'contenu': '...'}
]

@app.route('/api/articles', methods=['GET'])
def lister():
    return jsonify(articles), 200

@app.route('/api/articles', methods=['POST'])
def creer():
    data = request.get_json()
    if not data.get('titre'):
        return jsonify({'erreur': 'Titre requis'}), 400
    nouvel = {'id': len(articles) + 1, **data}
    articles.append(nouvel)
    return jsonify(nouvel), 201

@app.route('/api/articles/<int:id>', methods=['DELETE'])
def supprimer(id):
    global articles
    articles = [a for a in articles if a['id'] != id]
    return '', 204

if __name__ == '__main__':
    app.run(debug=True, port=5000)

# pip install fastapi uvicorn
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel

app = FastAPI()
app.add_middleware(CORSMiddleware, allow_origins=["*"],
                   allow_methods=["*"], allow_headers=["*"])

class ArticleIn(BaseModel):
    titre:   str
    contenu: str

class Article(ArticleIn):
    id: int

articles: list[Article] = []

@app.get("/api/articles")  # doc auto sur /docs !
def lister() -> list[Article]:
    return articles

@app.post("/api/articles", status_code=201)
def creer(data: ArticleIn) -> Article:
    nouvel = Article(id=len(articles)+1, **data.dict())
    articles.append(nouvel)
    return nouvel

@app.delete("/api/articles/{id}", status_code=204)
def supprimer(id: int):
    global articles
    articles = [a for a in articles if a.id != id]

# Lancer : uvicorn main:app --reload

const express = require('express');
const cors    = require('cors');
const app = express();

app.use(cors());
app.use(express.json());

let articles = [{ id: 1, titre: 'Premier' }];
let nextId = 2;

app.get('/api/articles', (req, res) => {
  const { categorie, page = 1, limite = 10 } = req.query;
  let resultats = articles;
  if (categorie) resultats = resultats.filter(a => a.categorie === categorie);
  res.json({ data: resultats.slice((page-1)*limite, page*limite), total: resultats.length });
});

app.get('/api/articles/:id', (req, res) => {
  const article = articles.find(a => a.id === Number(req.params.id));
  if (!article) return res.status(404).json({ erreur: 'Non trouvé' });
  res.json(article);
});

app.post('/api/articles', (req, res) => {
  const { titre, contenu } = req.body;
  if (!titre) return res.status(400).json({ erreur: 'Titre requis' });
  const article = { id: nextId++, titre, contenu };
  articles.push(article);
  res.status(201).json(article);
});

app.delete('/api/articles/:id', (req, res) => {
  articles = articles.filter(a => a.id !== Number(req.params.id));
  res.status(204).send();
});

app.listen(3000, () => console.log('Port 3000'));

# Tester avec curl (terminal)
curl http://localhost:3000/api/articles

curl -X POST http://localhost:3000/api/articles \
  -H "Content-Type: application/json" \
  -d '{"titre":"Test","contenu":"..."}'

curl -X DELETE http://localhost:3000/api/articles/1

// Tester avec fetch (console navigateur)
const r = await fetch('http://localhost:3000/api/articles');
const data = await r.json();
console.log(data);

// Outils recommandés pour tester les API :
// - Thunder Client (extension VS Code, gratuit)
// - Postman (desktop, gratuit)
// - Insomnia (desktop, gratuit)
// - Hoppscotch (web, gratuit)

// api.js — couche d'abstraction sur fetch
const BASE = 'http://localhost:3000/api';

async function requete(url, options = {}) {
  const token = localStorage.getItem('token');
  const reponse = await fetch(BASE + url, {
    ...options,
    headers: {
      'Content-Type': 'application/json',
      ...(token ? { Authorization: `Bearer ${token}` } : {}),
      ...options.headers,
    },
    body: options.body ? JSON.stringify(options.body) : undefined,
  });

  if (reponse.status === 204) return null;  // pas de body
  if (!reponse.ok) {
    const erreur = await reponse.json();
    throw new Error(erreur.message || `Erreur ${reponse.status}`);
  }
  return reponse.json();
}

export const ArticleAPI = {
  lister:     ()         => requete('/articles'),
  voir:       (id)       => requete(`/articles/${id}`),
  creer:      (data)     => requete('/articles', { method: 'POST',   body: data }),
  modifier:   (id, data) => requete(`/articles/${id}`, { method: 'PUT',    body: data }),
  supprimer:  (id)       => requete(`/articles/${id}`, { method: 'DELETE' }),
};

import { ArticleAPI } from '../api';

// Charger
const articles = await ArticleAPI.lister();

// Créer
const nouvel = await ArticleAPI.creer({
  titre: 'Nouveau', contenu: 'Contenu...'
});

// Supprimer
await ArticleAPI.supprimer(42);

// CORS = Cross-Origin Resource Sharing
// Le navigateur bloque par défaut les requêtes vers un
// domaine différent de la page (sécurité same-origin policy)
//
// Ex : front sur http://localhost:5173
//      back  sur http://localhost:3000
// → Le navigateur bloque sans CORS configuré !
//
// Solution : le SERVEUR autorise explicitement les origines

// Node.js — cors middleware
const cors = require('cors');
app.use(cors({
  origin:  ['http://localhost:5173', 'https://monsite.com'],
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
}));

# Python Flask
from flask_cors import CORS
CORS(app, origins=["http://localhost:5173"])