Informatik · Klasse 12 · Rechnernetze und Kommunikation · 2. Halbjahr

Client-Server-Architekturen und Web-Anwendungen

Die Schülerinnen und Schüler entwickeln und analysieren Web-Anwendungen und deren Kommunikationsabläufe.

• KMK Bildungsstandards
• KMK: Sekundarstufe II - Modellieren und Implementieren
• KMK: Sekundarstufe II - Strukturieren und Vernetzen

Über dieses Thema

Client-Server-Architekturen bilden das Rückgrat moderner Web-Anwendungen. Schülerinnen und Schüler der Klasse 12 verstehen, wie eine Anfrage im Browser über HTTP an den Server gesendet wird, dort verarbeitet und die Antwort zurückkehrt. Sie analysieren Kommunikationsabläufe, lernen das Client-Server-Modell kennen und entscheiden, welche Aufgaben auf dem Client (z. B. Benutzeroberfläche) und welche auf dem Server (z. B. Datenverarbeitung) ausgeführt werden. Praktische Entwürfe einfacher Anwendungen vertiefen dieses Wissen.

Im KMK-Lehrplan Sekundarstufe II verknüpft das Thema die Kompetenzen 'Modellieren und Implementieren' mit 'Strukturieren und Vernetzen'. Schülerinnen und Schüler modellieren Netzwerkinteraktionen, implementieren Prototypen und reflektieren Skalierbarkeit. Dies fördert systemisches Denken in vernetzten Systemen und bereitet auf reale Entwicklungsprozesse vor.

Aktives Lernen eignet sich hervorragend, da abstrakte Protokolle durch Simulationen und Programmieraufgaben konkret werden. Schüler bauen lauffähige Anwendungen, testen Interaktionen und debuggen Fehler gemeinsam. Solche hands-on-Aktivitäten machen Konzepte greifbar, steigern Motivation und verbessern das Verständnis für verteilte Systeme nachhaltig.

Leitfragen

1. Wie wird eine Anfrage im Browser bis zum Server und zurück verarbeitet?
2. Welche Aufgaben sollten auf dem Client und welche auf dem Server ausgeführt werden?
3. Entwerfen Sie eine einfache Client-Server-Anwendung und erklären Sie die Interaktion.

Lernziele

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

Bevor es losgeht

Grundlagen von Netzwerkprotokollen (z. B. TCP/IP)

Warum: Ein grundlegendes Verständnis von Netzwerkprotokollen ist notwendig, um die Funktionsweise von HTTP im Client-Server-Kontext zu verstehen.

Grundlagen der Webentwicklung (HTML, CSS, grundlegendes JavaScript)

Warum: Schüler müssen die clientseitigen Technologien kennen, um zu verstehen, welche Aufgaben auf dem Client ausgeführt werden können.

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.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Alle Berechnungen laufen nur auf dem Client.

Was Sie stattdessen lehren sollten

Tatsächlich übernimmt der Server datenintensive Aufgaben wie Datenbankzugriffe. Pair-Programming-Aktivitäten helfen, indem Schüler beide Seiten implementieren und Latenzunterschiede messen, was die Notwendigkeit der Aufteilung verdeutlicht.

Häufige Fehlvorstellung

Der Server speichert den Client-Zustand automatisch.

Was Sie stattdessen lehren sollten

Zustände müssen explizit verwaltet werden, z. B. via Sessions. Rollenspiele machen dies klar, da Schüler den Ablauf nachstellen und merken, dass ohne Cookies oder Tokens keine Persistenz entsteht.

Häufige Fehlvorstellung

Client und Server kommunizieren direkt ohne Protokoll.

Was Sie stattdessen lehren sollten

HTTP standardisiert den Austausch. Stationsrotationen mit Simulationen zeigen Header und Statuscodes, wodurch Schüler den Overhead und die Robustheit protokollbasierter Kommunikation erleben.

Ideen für aktives Lernen

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.

45 Min.·Partnerarbeit

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.

50 Min.·Kleingruppen

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.

30 Min.·Ganze Klasse

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.

35 Min.·Einzelarbeit

Bezüge zur Lebenswelt

• Entwickler bei Unternehmen wie Google entwerfen und implementieren die Architekturen für Webanwendungen wie Google Docs, bei denen die Benutzeroberfläche im Browser (Client) mit leistungsstarken Verarbeitungs- und Speicherressourcen auf den Servern von Google interagiert.
• Online-Banking-Plattformen nutzen Client-Server-Architekturen, um sichere Transaktionen zu ermöglichen. Der Browser des Nutzers (Client) sendet Anfragen zur Kontoinformation oder Überweisung an die hochsicheren Server der Bank, die die Daten verarbeiten und die Ergebnisse zurücksenden.

Ideen zur Lernstandserhebung

Kurze Überprüfung

Stellen Sie den Schülern ein einfaches Szenario vor (z. B. 'Ein Nutzer klickt auf 'Artikel in den Warenkorb legen''). Bitten Sie sie, auf einem Blatt Papier die wichtigsten Schritte der Kommunikation zwischen Client und Server zu skizzieren und die beteiligten Protokolle zu benennen.

Diskussionsfrage

Leiten Sie eine Diskussion mit der Frage: 'Welche Art von Datenverarbeitung sollte Ihrer Meinung nach idealerweise auf dem Client stattfinden und warum? Geben Sie konkrete Beispiele.' Fordern Sie die Schüler auf, ihre Antworten mit den Prinzipien der Client-Server-Aufgabenteilung zu begründen.

Lernstandskontrolle

Geben Sie jedem Schüler eine Karte mit einem Begriff (z. B. 'HTTP Request', 'Server-Datenbankabfrage', 'Client-Rendering'). Die Schüler sollen eine kurze Erklärung schreiben, was dieser Begriff im Kontext einer Webanwendung bedeutet und welche Rolle er spielt.

Häufig gestellte Fragen

Wie verarbeitet ein Browser eine Anfrage bis zum Server?

Der Browser parst die URL, baut ein HTTP-Request mit Headern auf und sendet es über TCP/IP an den Server. Der Server verarbeitet es, greift auf Ressourcen zu und sendet eine Response mit Statuscode zurück. Schüler können dies mit Tools wie Chrome DevTools nachvollziehen, um Header und Payload zu analysieren. Praktische Demos mit Wireshark vertiefen das Verständnis der Schichten.

Welche Aufgaben gehören zum Client und welche zum Server?

Client: UI-Rendering, Eingabevalidierung, lokale Speicherung (LocalStorage). Server: Authentifizierung, Datenpersistenz, Geschäftslogik. Diese Trennung sorgt für Skalierbarkeit. In Entwurfsaufgaben entscheiden Schüler basierend auf Performance und Sicherheit, was durch Prototyping getestet wird.

Wie hilft aktives Lernen beim Verständnis von Client-Server-Architekturen?

Aktives Lernen macht Protokolle erfahrbar: Schüler bauen und deployen Apps, debuggen Echtzeit-Interaktionen und skalieren mit mehreren Clients. Pair Programming fördert Erklärungen untereinander, Stationsrotationen decken Aspekte ab. Solche Methoden wandeln Theorie in Praxis um, reduzieren Fehlvorstellungen und bauen echtes Problemlösungsvermögen auf, wie KMK-Kompetenzen fordern.

Beispiele für einfache Client-Server-Anwendungen?

Todo-Liste: Client rendert Liste, Server speichert Tasks in DB. Wetter-App: Client zeigt UI, Server holt API-Daten. Chat: Client sendet/empfängt via WebSockets. Schüler implementieren mit Flask/Node.js und HTML/JS, testen Multi-User-Szenarien und reflektieren Lastverteilung.