Client-Server-Architekturen und Web-Anwendungen

Aktive Lernformen eignen sich besonders gut, um Client-Server-Architekturen zu verstehen, weil Schülerinnen und Schüler die abstrakten Kommunikationsprozesse durch eigenes Handeln begreifen. Durch das Erleben von Request-Response-Zyklen als Entwickler oder Nutzer verankern sie das Wissen nachhaltig, da sie die Konsequenzen ihrer Code-Entscheidungen direkt sehen und reflektieren können.

• Klasse 12
• Informatik Oberstufe: Von Algorithmen zur vernetzten Gesellschaft
• 4 Aktivitäten
• 30 Min.–50 Min.

Lernziele

1. Analysieren Sie die Kommunikationsschritte zwischen einem Webbrowser und einem Webserver unter Verwendung des HTTP-Protokolls.
2. Vergleichen Sie die Aufgabenverteilung zwischen Client und Server für verschiedene Web-Anwendungsfunktionen.
3. Entwerfen Sie das Datenmodell und die grundlegende Interaktion für eine einfache Web-Anwendung (z. B. ein einfaches Formular).
4. Bewerten Sie die Vor- und Nachteile der Verteilung von Verarbeitungslogik auf Client- und Serverseite.

Projektbasiertes Lernen

⏱ 45 Min.·Partnerarbeit

Pair Programming: Einfache Chat-App

Paare entwickeln eine Client-Server-Chat-Anwendung mit HTML, JavaScript und Node.js. Der Client sendet Nachrichten per Fetch-API, der Server speichert und antwortet. Testen Sie den Austausch live und protokollieren Sie den Datenfluss.

Vorbereitung & Details

Wie wird eine Anfrage im Browser bis zum Server und zurück verarbeitet?

Moderationstipp: Legen Sie während der Pair-Programming-Aktivität klare Zeitvorgaben fest, z. B. 20 Minuten pro Rolle, damit beide Partner die Perspektive des Clients und Servers aktiv erleben.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Projektbasiertes Lernen

⏱ 50 Min.·Kleingruppen

Stationsrotation: HTTP-Simulation

Richten Sie Stationen ein: Browser-Anfrage schreiben, Server-Antwort parsen, Fehler simulieren, Caching demonstrieren. Gruppen rotieren alle 10 Minuten, notieren Beobachtungen und diskutieren Unterschiede.

Vorbereitung & Details

Welche Aufgaben sollten auf dem Client und welche auf dem Server ausgeführt werden?

Moderationstipp: Stellen Sie für die Stationsrotation vorbereitete HTTP-Header-Karten bereit, damit die Schüler die Simulation ohne technische Hürden beginnen können.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Rollenspiel

⏱ 30 Min.·Ganze Klasse

Rollenspiel: Request-Response-Kette

Die Klasse simuliert eine Web-Anfrage: Einige sind Browser, andere Router, Server, Datenbank. Schauspielen Sie den vollen Ablauf inklusive Fehlerfällen, dann modellieren Sie es diagrammatisch.

Vorbereitung & Details

Entwerfen Sie eine einfache Client-Server-Anwendung und erklären Sie die Interaktion.

Moderationstipp: Weisen Sie im Rollenspiel jedem Schüler eine konkrete Rolle mit festen Aufgaben zu, z. B. 'Browser', 'DNS-Server' oder 'Datenbank', um die Komplexität handhabbar zu halten.

Setup: Spielfläche oder entsprechend angeordnete Tische für das Szenario

Materials: Rollenkarten mit Hintergrundinfos und Zielen, Szenario-Briefing

• Anwenden
• Analysieren
• Bewerten
• Sozialbewusstsein
• Selbstwahrnehmung

Fallstudienanalyse

⏱ 35 Min.·Einzelarbeit

Fallstudienanalyse: Web-Proxy bauen

Individuell erweitern Schüler eine gegebene Client-App um einen Proxy-Server mit Express.js. Senden Sie Requests darüber, messen Latenz und vergleichen mit direktem Zugriff.

Vorbereitung & Details

Wie wird eine Anfrage im Browser bis zum Server und zurück verarbeitet?

Setup: Gruppentische mit Platz für die Fallunterlagen

Materials: Fallstudien-Paket (3-5 Seiten), Arbeitsblatt mit Analyseraster, Präsentationsvorlage

• Analysieren
• Bewerten
• Erschaffen
• Entscheidungsfähigkeit
• Selbststeuerung

Dieses Thema unterrichten

Erfahrene Lehrkräfte setzen auf eine Kombination aus Hands-on-Erfahrung und Reflexion, um die abstrakte Architektur greifbar zu machen. Vermeiden Sie reine Frontalunterrichtung, da die dynamischen Prozesse zwischen Client und Server erst durch eigenes Handeln verstanden werden. Nutzen Sie analoge Methoden wie Rollenspiele, bevor Sie in die Programmierung einsteigen, um die Grundlagen zu legen. Forschung zeigt, dass Schülerinnen und Schüler technische Konzepte besser behalten, wenn sie sie aus einer Nutzerperspektive erleben und anschließend implementieren.

Was Sie erwartet

Am Ende dieses Activity Hubs können die Schülerinnen und Schüler die Rollen von Client und Server klar unterscheiden und die HTTP-Kommunikation in einer Webanwendung nachvollziehen. Sie begründen, warum bestimmte Aufgaben auf welcher Seite ausgeführt werden und können einfache Anwendungen mit dieser Architektur entwerfen. Erfolg zeigt sich in der Fähigkeit, Kommunikationsabläufe zu skizzieren und technischen Entscheidungen zu verteidigen.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Während der Pair-Programming-Aktivität zur Chat-App könnte die Beobachtung auftreten, dass Schüler annehmen, alle Berechnungen laufen nur auf dem Client.

Was Sie stattdessen lehren sollten

Fordern Sie die Schüler auf, gezielt Datenbankoperationen auf dem Server zu implementieren und die Latenz zwischen clientseitiger und serverseitiger Verarbeitung zu messen. Lassen Sie sie dokumentieren, warum bestimmte Aufgaben nicht auf dem Client ausgeführt werden sollen.

Häufige Fehlvorstellung

Während des Rollenspiels zur Request-Response-Kette könnte der Irrtum entstehen, der Server speichere den Client-Zustand automatisch.

Was Sie stattdessen lehren sollten

Nutzen Sie das Rollenspiel, um explizit Sessions oder Tokens einzuführen. Lassen Sie die Schüler den Ablauf nachstellen und beobachten, wie ohne diese Mechanismen keine Persistenz entsteht. Dokumentieren Sie dies in einem Protokoll.

Häufige Fehlvorstellung

Während der Stationsrotation zur HTTP-Simulation könnte der Eindruck entstehen, Client und Server kommunizieren direkt ohne Protokoll.

Was Sie stattdessen lehren sollten

Lassen Sie die Schüler die simulierten HTTP-Header und Statuscodes analysieren und vergleichen, wie diese die Kommunikation strukturieren. Diskutieren Sie, warum Protokolle wie HTTP notwendig sind, um Missverständnisse zu vermeiden.

Ideen zur Lernstandserhebung

Kurze Überprüfung

Nach der Pair-Programming-Aktivität zur Chat-App stellen Sie den Schülern ein Szenario vor, z. B. 'Ein Nutzer sendet eine Nachricht'. Bitten Sie sie, die Kommunikation zwischen Client und Server auf einem Whiteboard oder Blatt zu skizzieren und die beteiligten Protokolle sowie die Aufteilung der Aufgaben zu benennen.

Diskussionsfrage

Während der Stationsrotation zur HTTP-Simulation leiten Sie eine Diskussion mit der Frage: 'Welche Art von Datenverarbeitung sollte idealerweise auf dem Client stattfinden? Geben Sie konkrete Beispiele aus Ihrer Simulation.' Fordern Sie die Schüler auf, ihre Antworten mit den Prinzipien der Client-Server-Aufgabenteilung zu begründen.

Lernstandskontrolle

Nach dem Rollenspiel zur Request-Response-Kette geben Sie jedem Schüler eine Karte mit einem Begriff, z. B. 'HTTP Request', 'Server-Datenbankabfrage' oder 'Client-Rendering'. Die Schüler sollen erklären, was dieser Begriff im Kontext der Webanwendung bedeutet und welche Rolle er in der Architektur spielt.

Erweiterungen & Unterstützung

• Fordern Sie schnelle Schüler auf, die Chat-App um eine Nachrichtenhistorie zu erweitern, die serverseitig gespeichert wird.
• Unterstützen Sie Schüler mit Schwierigkeiten, indem Sie ihnen eine vorgefertigte Client-Server-Struktur geben und sie nur die Logik für eine einzelne Funktion, z. B. das Senden einer Nachricht, ergänzen lassen.
• Vertiefen Sie mit der gesamten Klasse die Analyse eines realen Web-Proxy-Tools wie Fiddler, um Unterschiede zwischen simulierten und echten HTTP-Header und Statuscodes zu vergleichen.

Schlüsselvokabular

HTTP (Hypertext Transfer Protocol)	Das Protokoll, das die Grundlage für die Datenkommunikation im World Wide Web bildet. Es definiert, wie Nachrichten zwischen Browsern und Servern formatiert und übertragen werden.
Client	Das Programm oder Gerät, das eine Anfrage an einen Server sendet, typischerweise ein Webbrowser, der Webseiten von einem Server abruft.
Server	Das Programm oder Gerät, das Anfragen von Clients entgegennimmt, verarbeitet und die angeforderten Ressourcen oder Daten zurücksendet, z. B. ein Webserver, der Webseiten bereitstellt.
Request/Response-Zyklus	Der Prozess, bei dem ein Client eine Anfrage an einen Server sendet und der Server daraufhin eine Antwort zurücksendet. Dies ist die grundlegende Interaktion im Client-Server-Modell.
API (Application Programming Interface)	Eine Schnittstelle, die es verschiedenen Softwarekomponenten ermöglicht, miteinander zu kommunizieren. Im Webkontext oft für die Kommunikation zwischen Client und Server genutzt.