1.1 Wie funktioniert ein Webdienst?
Hallo! Nutzen Sie täglich KakaoTalk, schauen YouTube und kaufen bei Coupang ein, oder? Aber haben Sie sich nicht gefragt, wie diese Apps funktionieren?
Heute werden wir das Geheimnis der Webdienste, die wir selbstverständlich nutzen, enthüllen!
Ein Webdienst ist wie ein 3-stöckiges Haus
Lassen Sie uns einen Webdienst mit einem 3-stöckigen Haus vergleichen. Auf jeder Etage leben Menschen, die unterschiedliche Aufgaben erledigen.
┌─────────────────────────────────────┐
│ 3. Etage: Datenbank │
│ Speicherort für alle Informationen│
│ - Mitgliedsinformationen, Produktinformationen, Bestellverlauf│
├─────────────────────────────────────┤
│ 2. Etage: Backend │
│ Unsichtbare Arbeiter │
│ - Berechnung, Verarbeitung, Geschäftslogik│
├─────────────────────────────────────┤
│ 1. Etage: Frontend │
│ Die schöne Oberfläche, die wir sehen│
│ - Schaltflächen, Bilder, Benutzeroberfläche│
└─────────────────────────────────────┘
1. Etage: Frontend - Die schöne Oberfläche, die wir sehen
Die 1. Etage ist das Frontend. Hier ist der Ort, den wir direkt sehen und berühren können.
- Smartphone-App-Oberfläche: Schaltflächen, Bilder, Text usw.
- Website-Oberfläche: Naver-Startseite, YouTube-Video-Oberfläche
- Design: Schöne Farben, Schriftarten, Animationen
Im Haus entspricht dies der Haustür und dem Wohnzimmer. Es ist der Raum, den Gäste (Benutzer) zuerst sehen!
2. Etage: Backend - Unsichtbare Arbeiter
Die 2. Etage ist das Backend. Hier passiert die eigentliche Arbeit, die für uns unsichtbar ist.
- Berechnung und Verarbeitung: Überprüfung der Anmeldung, Produktsuche, Zahlungsabwicklung
- Geschäftslogik: "Kann dieser Benutzer dieses Produkt kaufen?", "Sollte ein Rabatt angewendet werden?"
- Verkehrsregelung: Bearbeitung von Anfragen vieler Benutzer in der Reihenfolge
Im Haus entspricht dies der Küche. Es ist der Ort, an dem leckere Gerichte (Datenverarbeitung) zubereitet werden, aber Gäste können nicht direkt eintreten!
3. Etage: Datenbank - Das Lagerhaus, das sich an alles erinnert
Die 3. Etage ist die Datenbank. Hier sind alle Informationen ordentlich gespeichert.
- Mitgliedsinformationen: Name, E-Mail, Passwort, Adresse
- Produktinformationen: Preis, Lagerbestand, Beschreibung, Bild
- Aufzeichnungen: Bestellverlauf, Zahlungsinformationen, Lieferstatus
Im Haus entspricht dies dem Lager und dem Arbeitszimmer. Alle wichtigen Gegenstände und Aufzeichnungen werden systematisch aufbewahrt!
Ein praktisches Beispiel: Bestellung von "drahtlosen Ohrhörern" bei Coupang
Lassen Sie uns nun den Prozess durchgehen, wie Sie bei Coupang drahtlose Ohrhörer bestellen, und sehen, was auf jeder Etage passiert!
Die Reise der Daten: Der Prozess der Suche nach "drahtlosen Ohrhörern"
Benutzer Webdienst 3-stöckiges Haus
┌─────────────────────────┐
"Drahtlose Ohrhörer" │ 3. Etage: Datenbank │
Suche! ──────┐ │ SELECT * FROM Produkte │
│ │ WHERE Produktname LIKE │
↓ │ │ '%Drahtlose Ohrhörer%'... │
│ ├─────────────────────────┤
Ergebnis auf │ │ 2. Etage: Backend │
dem Bildschirm ←─────┘ │ • Suche verarbeiten │
│ • Sortieren & Filtern │
│ • Rabattpreis berechnen │
├─────────────────────────┤
│ 1. Etage: Frontend │
│ • Suchfeld │
│ • Ladebildschirm │
│ • Ergebnisbildschirm │
└─────────────────────────┘
Schritt 1: Geben Sie "drahtlose Ohrhörer" in das Suchfeld ein!
Frontend (1. Etage):
- Sie berühren das Suchfeld
- Geben Sie "drahtlose Ohrhörer" ein
- Drücken Sie die Suchtaste
- Ein Ladebildschirm erscheint mit der Meldung "Einen Moment, wir suchen nach den Ergebnissen..."
Schritt 2: Das Backend arbeitet hart!
Backend (2. Etage):
Backend: "Oh, jemand sucht nach drahtlosen Ohrhörern!"
Backend: "Datenbank, könntest du nach drahtlosen Ohrhörerprodukten suchen?"
Backend: "Oh, und wähle Produkte aus, die dieser Benutzer mögen würde!"
Backend: "Sortiere sie nach niedrigstem Preis!"
Schritt 3: Die Datenbank antwortet!
Datenbank (3. Etage):
```sql
Datenbank: "Einen Moment, ich werde suchen..."
SELECT Produktname, Preis, Bild, Bewertung, Lagerbestand
FROM Produktliste
WHERE Produktname LIKE '%Drahtlose Ohrhörer%'
AND Lagerbestand > 0
ORDER BY Preis ASC;
Datenbank: "Gefunden! Es gibt insgesamt 347 Produkte!"
```
Schritt 4: Das Backend verpackt die Ergebnisse schön!
Backend (2. Etage):
Backend: "347 sind zu viele. Wählen Sie nur die beliebtesten 20 Produkte aus"
Backend: "Berechnen Sie auch Rabattinformationen und überprüfen Sie die Versandkosten..."
Backend: "Berechnen Sie auch das voraussichtliche Lieferdatum basierend auf dem Standort des Benutzers!"
Backend: "Nun, schicken wir es zur 1. Etage!"
Schritt 5: Zeigen Sie es auf dem schönen Bildschirm an!
Frontend (1. Etage):
- Die Produktliste wird schön sortiert angezeigt
- Bilder, Preise und Bewertungen jedes Produkts werden angezeigt
- Tags wie "Expressversand", "Kostenloser Versand" sind ebenfalls vorhanden
- Wenn Sie scrollen, werden mehr Produkte angezeigt
Schritt 6: Klicken Sie auf ein Produkt und fügen Sie es dem Warenkorb hinzu!
Dieser Prozess findet ebenfalls in der Reihenfolge 1. Etage → 2. Etage → 3. Etage → 2. Etage → 1. Etage statt!
Benutzer Webdienst-Verarbeitungsprozess
┌─────────────────────┐
"Zum Warenkorb hinzufügen" │ 3. Etage: Datenbank │
Klick! ──────1──→ │ UPDATE Lager SET │
│ Menge = Menge - 1 │
↓ │ INSERT INTO Warenkorb │
├─────────────────────┤
"Es wurde hinzugefügt!" ←──5── │ 2. Etage: Backend │
Nachricht anzeigen │ • Lagerbestand überprüfen ←──3─┘│
│ • Berechtigung überprüfen ──4──→│
│ • Gutschein berechnen │
├─────────────────────┤
│ 1. Etage: Frontend │
│ • Klick auf Schaltfläche ──2─┘│
│ • Erfolgsmeldung anzeigen │
└─────────────────────┘
- 1. Etage: Klicken Sie auf die Schaltfläche "AirPods Pro in den Warenkorb legen"
- 2. Etage: "Kann dieser Benutzer dieses Produkt kaufen? Ist es auf Lager?"
- 3. Etage: "Verringern Sie den Lagerbestand um 1 und fügen Sie ihn dem Warenkorb hinzu!"
- 2. Etage: "Überprüfen Sie, ob ein Rabattgutschein vorhanden ist, und berechnen Sie den Gesamtbetrag!"
- 1. Etage: "Es wurde dem Warenkorb hinzugefügt!"
Warum ist es so kompliziert aufgeteilt?
Sie könnten denken: "Warum nicht einfach alles in einem Programm machen?" Aber es gibt Gründe, warum es so aufgeteilt ist!
1. Effizienz durch Rollenteilung!
- Designer: Erstellen Sie auf der 1. Etage (Frontend) eine schöne Oberfläche
- Backend-Entwickler: Implementieren Sie auf der 2. Etage die Geschäftslogik
- Datenbankexperte: Entwerfen Sie auf der 3. Etage die Datenstruktur
Durch die Konzentration auf ihre jeweiligen Fachgebiete erzielen sie bessere Ergebnisse!
2. Schnelle Problembehebung, wenn Probleme auftreten!
Wenn die Oberfläche langsam ist?
- Ist es ein Problem der 1. Etage (Frontend)?
- Ist es ein Problem der 2. Etage (Backend)?
- Ist es ein Problem der 3. Etage (Datenbank)?
Sie können es leicht finden und beheben!
3. Einfache Skalierbarkeit!
Wenn die Benutzerzahl zunimmt?
- Bereiten Sie mehr Server für die 2. Etage (Backend) vor
- Ersetzen Sie die 3. Etage (Datenbank) durch eine schnellere
- Lassen Sie die 1. Etage (Frontend) wie sie ist!
Sie müssen nur die erforderlichen Teile aktualisieren.
4. Verbesserte Sicherheit!
- Wichtige Informationen (Passwörter, Zahlungsinformationen) werden nur in der 2. und 3. Etage aufbewahrt
- Die 1. Etage zeigt nur die erforderlichen Informationen an
- Selbst wenn Sie gehackt werden, können die Schäden minimiert werden
Was macht ein Backend-Entwickler?
Was macht also ein Backend-Entwickler konkret?
1. Erstellen von APIs
Definieren Sie Regeln, nach denen das Frontend kommuniziert.
"Gib mir Benutzerinformationen" → GET /user/123
"Suche nach Produkten für mich" → GET /products?search=Drahtlose Ohrhörer
"Bestellen Sie für mich" → POST /orders
2. Implementierung der Geschäftslogik
if (Benutzer ist VIP) {
Rabatt = 20%;
} else if (Erstkunde) {
Rabatt = 10%;
} else {
Rabatt = 0%;
}
3. Kommunikation mit der Datenbank
-- Bestellung erstellen
INSERT INTO Bestellung (KundenID, ProduktID, Menge, Gesamtbetrag)
VALUES (123, 456, 1, 89000);
-- Lagerbestand reduzieren
UPDATE Produkt SET Lagerbestand = Lagerbestand - 1 WHERE ProduktID = 456;
4. Leistungsoptimierung
- Langsame Bereiche finden und schnell machen
- Sicherstellen, dass viele Benutzer gleichzeitig verbunden werden können
- Serverkosten sparen
5. Sicherheitsmanagement
- Nur angemeldete Benutzer können zugreifen
- Hacking-Versuche verhindern
- Persönliche Informationen verschlüsseln
Zusammenfassung...
Ein Webdienst ist wie ein 3-stöckiges Haus:
- 1. Etage Frontend: Die schöne Oberfläche, die wir sehen
- 2. Etage Backend: Der Ort, an dem die eigentliche Arbeit stattfindet (die wir nicht sehen)
- 3. Etage Datenbank: Das Lagerhaus, in dem alle Informationen gespeichert sind
Diese drei Etagen kommunizieren miteinander und erstellen die großartigen Apps und Websites, die wir nutzen!
Und dass Sie dieses Buch lesen, bedeutet... dass Sie sich darauf vorbereiten, Teil dieser großartigen Welt zu werden!
Im nächsten Abschnitt werden wir besonders herausfinden, warum die Datenbank so wichtig ist und warum sie unerlässlich ist. Sind Sie bereit?