Module 5 : Comment fonctionne une application web — Cas concret

Objectif du module

Voir tous les concepts précédents en action à travers un exemple concret et complet : le parcours d'un utilisateur sur un site de réservation de voyages.

Explication simple

Nous avons vu les briques (HTML, CSS, JS), la séparation frontend/backend, les API, les bases de données, HTTP... Maintenant, mettons tout ensemble. Suivons Marie, qui veut réserver un vol Paris-Barcelone.

Étape 1 : Marie ouvre le site

Marie tape www.voyages-exemple.com dans Chrome.

Ce qui se passe en coulisses :

graph LR
    A["Marie tape l'URL"] --> B["Le DNS traduit le nom en adresse IP"]
    B --> C["Le navigateur envoie une requête HTTP au serveur"]
    C --> D["Le serveur renvoie le frontend (HTML + CSS + JS)"]
    D --> E["Chrome affiche la page d'accueil"]

• Le DNS traduit www.voyages-exemple.com en adresse IP
• Le navigateur envoie une demande HTTPS au serveur
• Le serveur renvoie les fichiers HTML, CSS et JavaScript
• Chrome assemble le tout et affiche la page

Marie voit : une belle page d'accueil avec un formulaire de recherche.

Étape 2 : Marie cherche un vol

Elle remplit le formulaire : Paris → Barcelone, 15 juin, 1 passager. Elle clique sur "Rechercher".

Ce qui se passe en coulisses :

graph TD
    A["Marie clique sur Rechercher"] --> B["JavaScript récupère les infos du formulaire"]
    B --> C["Envoi d'une requête au backend via l'API"]
    C --> D["Le backend interroge la base de données"]
    D --> E["La base renvoie les vols disponibles"]
    E --> F["Le backend appelle aussi l'API d'une compagnie partenaire"]
    F --> G["Le backend combine les résultats"]
    G --> H["Les résultats sont envoyés au frontend"]
    H --> I["JavaScript affiche la liste des vols"]

• JavaScript (frontend) récupère les informations du formulaire
• Il envoie une demande au backend via une API
• Le backend cherche dans sa base de données les vols disponibles
• Il interroge aussi les API de compagnies aériennes partenaires pour avoir plus de résultats
• Il combine tout et renvoie la liste au frontend
• JavaScript affiche les résultats sans recharger toute la page

Marie voit : une liste de vols avec les horaires, les prix et les compagnies.

Étape 3 : Marie se connecte à son compte

Elle clique sur "Se connecter" et entre son email et son mot de passe.

Ce qui se passe en coulisses :

• Le frontend envoie l'email et le mot de passe au backend (via HTTPS, donc chiffré)
• Le backend vérifie dans la base de données si le compte existe
• Il compare le mot de passe envoyé avec celui stocké (qui est crypté — même les employés du site ne peuvent pas le lire)
• Si tout est bon, le backend crée un jeton de session (un pass temporaire) et l'envoie au frontend
• Le frontend stocke ce jeton dans un cookie
• À chaque prochaine demande, le cookie sera envoyé automatiquement pour prouver que Marie est bien connectée

Marie voit : "Bienvenue Marie !" en haut de la page.

Étape 4 : Marie réserve un vol

Elle choisit un vol à 89 € et clique sur "Réserver". Elle remplit ses informations et entre son numéro de carte bancaire.

Ce qui se passe en coulisses :

graph TD
    A["Marie clique sur Payer"] --> B["Le frontend envoie les infos au backend"]
    B --> C["Le backend appelle l'API de paiement (Stripe)"]
    C --> D{"Paiement accepté ?"}
    D -->|Oui| E["Le backend enregistre la réservation en base de données"]
    D -->|Non| F["Le backend renvoie une erreur"]
    E --> G["Le backend appelle l'API d'email pour envoyer la confirmation"]
    G --> H["Le frontend affiche 'Réservation confirmée !'"]
    F --> I["Le frontend affiche 'Paiement refusé, réessayez'"]

• Le frontend envoie les données au backend via HTTPS
• Le backend ne traite pas le paiement lui-même — il appelle l'API du service de paiement (comme Stripe)
• Stripe vérifie la carte, effectue le prélèvement, et renvoie une confirmation
• Le backend enregistre la réservation dans la base de données
• Il appelle une autre API (service d'email) pour envoyer un email de confirmation à Marie
• Le frontend affiche "Réservation confirmée !"

Marie voit : une page de confirmation avec son numéro de réservation.

Étape 5 : Marie reçoit un email

Quelques secondes plus tard, Marie reçoit un email avec le récapitulatif de sa réservation et son billet en PDF.

Ce qui s'est passé : le backend a envoyé les informations à un service d'email via son API, qui a généré et expédié l'email automatiquement.

Vue d'ensemble

graph TD
    subgraph Client["Ce que Marie voit (Frontend)"]
        A[Page d'accueil]
        B[Résultats de recherche]
        C[Page de paiement]
        D[Confirmation]
    end
    subgraph Serveur["Ce que Marie ne voit pas (Backend)"]
        E[Serveur de l'application]
        F[Base de données]
    end
    subgraph Services["Services externes (API)"]
        G[API compagnies aériennes]
        H[API de paiement Stripe]
        I[API d'envoi d'email]
        J[API Google Maps]
    end
    A --> E
    E --> F
    E --> G
    E --> H
    E --> I
    B --> E
    C --> E
    E --> D

Exemple concret

Ce même schéma se retrouve partout :

Application	Base de données stocke...	API externes utilisées
Netflix	Vos préférences, historique	Paiement, recommandations IA
Uber	Courses, position des chauffeurs	Maps, paiement, notifications
Amazon	Produits, commandes, avis	Paiement, livraison, email
Instagram	Photos, commentaires, likes	Stockage d'images, notifications

Que ce soit un petit site ou un géant du web, les principes sont les mêmes. Ce qui change, c'est l'échelle.

Métaphore

Une application web fonctionne comme une agence de voyages :

• Le comptoir (frontend) : c'est là que le client s'assoit, regarde les brochures et fait ses choix
• L'agent (backend) : il prend la demande du client, vérifie les disponibilités, réserve le vol, encaisse le paiement
• Les classeurs (base de données) : toutes les informations sur les clients, les réservations passées, les préférences
• Le téléphone (API) : l'agent appelle la compagnie aérienne, l'hôtel, la société de paiement — il ne fait pas tout lui-même, il coordonne
• Le reçu (cookie) : un papier donné au client pour qu'il puisse revenir et dire "J'ai déjà une réservation en cours"

Résumé en 3 points clés

1. Une application web est un orchestre où frontend, backend, base de données et API travaillent ensemble en quelques fractions de seconde
2. Le backend ne fait pas tout seul — il délègue aux API externes (paiement, email, cartes, etc.)
3. Chaque action que vous faites sur un site (cliquer, chercher, acheter) déclenche une chaîne invisible de demandes et de réponses entre plusieurs systèmes