1.1 Comment fonctionne le service Web?

Bonjour! Vous utilisez tous les jours KakaoTalk, regardez des vidéos sur YouTube et faites du shopping sur Coupang avec votre smartphone, n'est-ce pas? Mais vous ne vous êtes jamais demandé comment ces applications fonctionnent?

Aujourd'hui, nous allons découvrir le secret des services Web que nous utilisons naturellement!

Les services Web sont comme une maison à trois étages

Je vais comparer les services Web à une maison à trois étages. Chaque étage abrite des personnes qui font des choses différentes.

┌─────────────────────────────────────┐
│    3ème étage: Base de données        │
│     Entrepôt de stockage de toutes les informations  │
│    - Informations des membres, informations sur les produits, historique des commandes       │
├─────────────────────────────────────┤
│    2ème étage: Backend             │  
│     Travailleurs invisibles               │
│    - Calculs, traitements, logique métier          │
├─────────────────────────────────────┤
│    1er étage: Frontend         │
│     L'écran joli que nous voyons             │
│    - Boutons, images, interface utilisateur    │
└─────────────────────────────────────┘

1er étage: Frontend - L'écran joli que nous voyons

Le 1er étage est le Frontend. C'est là que nous pouvons voir et toucher directement.

Écran de l'application smartphone: boutons, images, texte, etc.
Écran du site Web: page d'accueil de Naver, écran de vidéo YouTube
Design: belles couleurs, polices, animations

C'est comme le hall d'entrée et le salon de la maison. C'est l'espace que les invités (utilisateurs) voient en premier!

2ème étage: Backend - Les travailleurs invisibles

Le 2ème étage est le Backend. C'est là que le vrai travail se fait, mais nous ne le voyons pas.

Calculs et traitements: vérification de la connexion, recherche de produits, traitement des paiements
Logique métier: "Cet utilisateur peut-il acheter ce produit?", "Devrions-nous appliquer une réduction?"
Gestion du trafic: traitement des demandes de nombreux utilisateurs dans l'ordre

C'est comme la cuisine de la maison. C'est là que de délicieux plats (traitements de données) sont préparés, mais les invités ne peuvent pas y entrer directement!

3ème étage: Base de données - L'entrepôt qui se souvient de tout

Le 3ème étage est la base de données. C'est là que toutes les informations sont soigneusement stockées.

Informations des membres: nom, e-mail, mot de passe, adresse
Informations sur les produits: prix, stock, description, image
Enregistrements: historique des commandes, informations de paiement, état de livraison

C'est comme le débarras et la bibliothèque de la maison. Toutes les choses et les enregistrements importants sont soigneusement conservés!

Exemple concret: Commander des "écouteurs sans fil" sur Coupang

Maintenant, suivons le processus de commande d'écouteurs sans fil sur Coupang pour voir ce qui se passe à chaque étage!

Voyage des données: Processus de recherche des "écouteurs sans fil"

 Utilisateur               Maison à trois étages du service Web
                    ┌─────────────────────────┐
  "Écouteurs sans fil"         │ 3ème étage:  Base de données      │
     Recherche! ──────┐   │ SÉLECTIONNER * DE produits     │
                  │   │ OÙ nom du produit COMME      │
     ↓             │   │ '%écouteurs sans fil%'...      │
                  │   ├─────────────────────────┤
   Affiché à l'écran        │   2ème étage:  Backend         │
   des résultats ←─────┘   │ • Traitement de recherche             │
                      │   │ • Tri & Filtrage         │
                      │   │ • Calcul de la réduction           │
                      ├─────────────────────────┤
                      │   1er étage:  Frontend       │
                      │ • Champ de recherche               │
                      │ • Écran de chargement             │
                      │ • Écran de résultats             │
                      └─────────────────────────┘

Étape 1: Saisissez "écouteurs sans fil" dans la barre de recherche!

Frontend (1er étage):
- Vous touchez la barre de recherche
- Vous saisissez "écouteurs sans fil"
- Vous appuyez sur le bouton de recherche
- Un écran de chargement apparaît avec le message "Attendez, je cherche des résultats de recherche..."

Étape 2: Le Backend travaille dur! ‍

Backend (2ème étage):
Backend: "Oh, quelqu'un cherche des écouteurs sans fil!" Backend: "Base de données, peux-tu trouver des produits d'écouteurs sans fil?" Backend: "Ah, et sélectionne des produits que cet utilisateur pourrait aimer!" Backend: "Trie-les par prix croissant!"

Étape 3: La base de données répond!

Base de données (3ème étage):
```sql
Base de données: "Attends, je vais chercher..."
SÉLECTIONNER nom du produit, prix, image, évaluation, quantité en stock
DE la liste des produits
OÙ nom du produit COMME '%écouteurs sans fil%'
ET quantité en stock > 0
ORDRE PAR prix ASC;

Base de données: "Trouvé! Il y a 347 produits au total!"
```

Étape 4: Le Backend emballe joliment les résultats!

Backend (2ème étage):
Backend: "347, c'est trop. Choisissez seulement les 20 produits populaires" Backend: "Calculez les informations de réduction, vérifiez les frais de livraison..." Backend: "Calculer la date de livraison estimée en fonction de l'emplacement de l'utilisateur!" Backend: "Maintenant, envoyons cela au 1er étage!"

Étape 5: Affichez-le sur un bel écran!

Frontend (1er étage):
- La liste des produits est joliment affichée
- Les photos, les prix et les évaluations de chaque produit sont affichés
- Des balises comme "Livraison express", "Livraison gratuite" sont ajoutées
- Faites défiler pour voir plus de produits

Étape 6: Cliquez sur un produit pour l'ajouter au panier!

Ce processus se déroule également dans l'ordre 1er étage → 2ème étage → 3ème étage → 2ème étage → 1er étage!

 Utilisateur                   Processus de traitement du service Web
                        ┌─────────────────────┐
"Ajouter au panier"         │ 3ème étage:  Base de données   │
      Cliquez! ──────1──→   │ METTRE À JOUR stock SET      │
                        │ quantité = quantité - 1      │
  ↓                     │ INSÉRER DANS panier  │
                        ├─────────────────────┤
"A été ajouté!" ←──5── │ 2ème étage:  Backend       │
    Afficher un message           │ • Vérifier le stock    ←──3─┘│
                        │ • Vérifier les autorisations    ──4──→│
                        │ • Calculer les coupons          │
                        ├─────────────────────┤
                        │ 1er étage:  Frontend       │
                        │ • Détection du clic sur le bouton ──2─┘│
                        │ • Afficher un message de succès    │
                        └─────────────────────┘

1er étage: Cliquez sur le bouton "Ajouter les AirPods Pro au panier"
2ème étage: "Cet utilisateur peut-il acheter ce produit? Le stock est-il disponible?"
3ème étage: "Déduire un article du stock et l'ajouter au panier!"
2ème étage: "Vérifiez s'il y a des coupons de réduction, calculez le montant total!"
1er étage: "Ajouté au panier!"

Pourquoi une telle division complexe?

Vous pourriez vous demander: "Pourquoi ne pas simplement tout faire dans un seul programme?" Cependant, il y a une raison à cette division!

1. Augmentation de l'efficacité grâce à la répartition des rôles! ‍‍‍

Designer: Créer un bel écran au 1er étage (Frontend)
Développeur Backend: Implémenter la logique métier au 2ème étage (Backend)
Expert en bases de données: Concevoir la structure des données au 3ème étage (Base de données)

En se concentrant sur leur domaine d'expertise, de meilleurs résultats sont obtenus!

2. Résolution rapide des problèmes!

Si l'écran est lent?
- Est-ce un problème du 1er étage (Frontend)?
- Est-ce un problème du 2ème étage (Backend)?
- Est-ce un problème du 3ème étage (Base de données)?

Il est facile de trouver et de corriger!

3. Facilité d'extension!

Si le nombre d'utilisateurs augmente?
- Préparez plus de serveurs au 2ème étage (Backend)
- Remplacez la base de données au 3ème étage par une plus rapide
- Laissez le 1er étage (Frontend) tel quel!

Il suffit de mettre à niveau les parties nécessaires.

4. Renforcement de la sécurité!

Les informations importantes (mots de passe, informations de paiement) sont stockées uniquement aux 2ème et 3ème étages
Le 1er étage ne montre que les informations nécessaires
Même en cas de piratage, les dommages peuvent être minimisés

Que fait un développeur Backend?

Alors, que fait concrètement un développeur Backend?

1. Créer des API

Établir des règles de communication avec le Frontend.
"Obtenir les informations de l'utilisateur" → GET /utilisateur/123 "Recherchez des produits pour moi" → GET /produits?recherche=écouteurs sans fil "Passer une commande" → POST /commandes

2. Implémenter la logique métier

si (l'utilisateur est un client VIP) {
    Taux de réduction = 20%;
} else if (nouveau client) {
    Taux de réduction = 10%;
} else {
    Taux de réduction = 0%;
}

3. Communiquer avec la base de données

-- Créer une commande
INSERT INTO commandes (ID_client, ID_produit, quantité, montant total) 
VALEURS (123, 456, 1, 89000);

-- Déduire du stock
UPDATE produits SET quantité en stock = quantité en stock - 1 WHERE ID_produit = 456;

4. Optimiser les performances

Identifier les parties lentes et les rendre rapides
Permettre de gérer de nombreux utilisateurs se connectant simultanément
Économiser sur les coûts du serveur

5. Gérer la sécurité

Autoriser uniquement l'accès aux utilisateurs connectés
Empêcher les tentatives de piratage
Chiffrer les informations personnelles

En conclusion...

Les services Web sont comme une maison à trois étages:

1er étage Frontend: L'écran joli que nous voyons
2ème étage Backend: L'endroit où le travail réel se fait (nous ne le voyons pas)
3ème étage Base de données: L'entrepôt où toutes les informations sont stockées

Ces trois étages dialoguent entre eux pour créer les superbes applications et sites Web que nous utilisons!

Et le fait que vous lisiez ce livre... signifie que vous vous préparez à devenir une partie de ce merveilleux monde!

Dans la prochaine section, nous verrons pourquoi la base de données est si importante dans ce contexte et pourquoi elle est essentielle. Êtes-vous prêt?

Comment fonctionne le service web?