Einleitung

Einleitung zum Unterrichtsgegenstand Web- und Anwendungsentwicklung (WAENTW) - 4. Klasse

Der Ausbildungsschwerpunkt beginnt im vierten Jahr, und er beginnt an der Stelle, an der die anderen Gegenstände aufhören. In Softwareentwicklung entsteht Code, in Informationssysteme entstehen Datenbanken, in Medientechnik entstehen Gestaltung und Assets. Hier entsteht daraus eine Webanwendung, die im Netz erreichbar ist und Angriffen standhält - vom Server, auf dem sie läuft, über den Webservice, der die Daten liefert, bis zum Frontend, das ein Mensch bedient.

Das Jahr hat deshalb zwei Stränge, die der Lehrplan Webentwicklung und Appentwicklung nennt. Der erste Strang fragt: Wo läuft die Anwendung, wie kommt sie dorthin, und wie hält man Angreifer draußen? Der zweite fragt: Wie baut man einen Webservice mit Datenbankanbindung und ein Frontend dazu?

Das Jahresprojekt als roter Faden

Beide Stränge werden an einem eigenen Projekt erarbeitet, das über das ganze Schuljahr läuft. Zu Jahresbeginn wählen Sie ein Thema - allein oder in einem Team aus zwei oder drei Personen - und bauen daran jede Woche weiter. Jedes Kapitel liefert einen Baustein: erst den Server, auf dem das Projekt später liegt, dann die Domain und das Zertifikat, dann die Auslieferung in Containern, dann Datenbank, Webservice, Anmeldung, Frontend, Inhaltsbereich. Am Ende des Jahres steht keine Sammlung von Übungsbeispielen, sondern eine laufende Anwendung unter Ihrer eigenen Adresse, die Sie selbst betreiben.

Zwei Entscheidungen prägen dieses Jahr:

Ein eigener Server. Jede Schülerin und jeder Schüler (bzw. jedes Team) mietet einen eigenen virtuellen Linux-Server, üblicherweise bei Hetzner. Das ist kein Detail, sondern der Unterschied zwischen einer Übungsumgebung und einem Rechner, der ab der ersten Minute im Internet steht und tatsächlich angegriffen wird. Entsprechend liegt das Gewicht früh im Jahr auf Einrichtung, Absicherung und Betrieb.
Ein Stack, den Sie schon kennen. Webservice und Frontend entstehen in TypeScript mit Next.js - derselben Kombination wie in Softwareentwicklung. Damit muss hier nicht die Sprache gelernt werden, sondern das, was diesen Gegenstand ausmacht: Betrieb, Schnittstellen, Sicherheit und Optimierung. Andere in der Praxis übliche Stacks (Python mit FastAPI oder Django, Java mit Spring Boot, PHP mit Laravel) werden eingeordnet, aber nicht unterrichtet.

Verhältnis zu Softwareentwicklung: von der Grundlage zur Meisterklasse

In SEW lernen Sie im selben Jahrgang TypeScript, asynchrones Arbeiten, HTTP, REST in Grundzügen, React, Next.js mit Routing und API-Routen, Mehrschichtarchitektur, Persistenz und Validierung. Das wird hier nicht wiederholt, sondern vorausgesetzt. Dieser Gegenstand stellt die nächsten Fragen:

Warum ist eine Schnittstelle so geschrieben und nicht anders - und was hätte SOAP anders gemacht?
Was passiert, wenn Frontend und Backend getrennte Anwendungen auf getrennten Adressen sind?
Wie hält man Serverzustand im Browser aktuell, ohne bei jedem Klick alles neu zu laden?
Was tut die Anwendung unter Last, unter schlechter Verbindung und unter Angriff - und wie misst man das, statt es zu vermuten?

Der Infrastrukturteil ist deshalb bewusst knapp: Server, Container und Deployment sind in fünf Wochen erledigt, weil sie Voraussetzung sind und nicht Selbstzweck. Das Gewicht des Jahres liegt auf Implementierung, Verhalten im Betrieb und Optimierung.

Überblick über die Lerninhalte des Schuljahres

Eigener Server, abgesichert: Einen VPS mieten und in Betrieb nehmen; Linux, SSH, Rechte, Dienste; SSH-Härtung, Firewall, Updates, Logs.
Auslieferung: Container, Deployment mit Dokploy, Reverse Proxy und TLS, DNS und Domain, Umgebungsvariablen und Secrets, Rollback.
Schnittstellen im Vergleich: REST in der Tiefe (Reifegrade, Ressourcenschnitt, Idempotenz) gegen SOAP (Envelope, WSDL, WS-Security), dazu gRPC und GraphQL zur Einordnung.
Getrennte Systeme: Frontend und Backend als eigenständige Anwendungen: CORS, Cookies gegen Tokens, BFF-Muster, typisierte Clients aus dem Schnittstellenvertrag.
Datenbankschnittstelle produktionsnah: PostgreSQL, Migrationen im Betrieb, Transaktionen, N+1, Indizes, parametrisierte Abfragen.
Robuste Webservices: Fehlerformate, Idempotenz, Paginierung und Filter, Ratenbegrenzung, Caching und ETag, Versionierung, Vertragstests.
Authentifizierung, Autorisierung und Angriffsvektoren: Passwort-Hashing, Sessions gegen JWT, Rollen; OWASP Top 10, XSS, CSRF, CSP, Umgang mit Geheimnissen.
Frontend für Fortgeschrittene: Serverzustand mit TanStack Query (Cache, Invalidierung, optimistische Updates), Formulare mit TanStack Form und geteilter Validierung.
Internationalisierung: Sprachen im Routing, ICU-MessageFormat, Formatierung von Datum, Zahl und Währung, mehrsprachige Inhalte.
Performance und Optimierung: Messen statt raten: Core Web Vitals, Rendering-Strategien, Caching-Ebenen, Bundle- und Abfrageoptimierung, Lasttest.
Enterprise Content Management Systeme: Ein CMS installieren, konfigurieren, redaktionell betreiben, mit Templates gestalten und mit Erweiterungen ausbauen - als Inhaltsbereich des eigenen Projekts.
Benutzerergonomie und Benutzererfahrung: Gestaltungsheuristiken, Barrierefreiheit, Responsive Design; wann eine Anwendung bedienbar ist.

Methodik und Unterrichtsorganisation

Der Unterricht ist wie in den anderen Gegenständen organisiert: wöchentliche Arbeitspakete, Code-Reviews, Präsentationen der eigenen Lösungen und die Besprechung alternativer Lösungswege in der Gruppe. Der Unterschied ist, dass die Arbeitspakete nicht an einem Beispiel des Lehrers hängen, sondern am eigenen Projekt: Das Thema der Woche wird gemeinsam erarbeitet und in derselben Woche im eigenen Projekt umgesetzt. Der Schwerpunkt ist mit vier Wochenstunden überwiegend Übung, entsprechend liegt das Gewicht auf der eigenen Arbeit am Rechner. Was auf dem eigenen Server passiert, wird nachvollziehbar dokumentiert und im Unterricht besprochen.

Drei Hinweise zur Abgrenzung. Erstens: Die Programmierkonzepte selbst (Sprache, Nebenläufigkeit, Architektur) gehören in SEW, das Datenbankdesign in INSY - hier werden sie eingesetzt, nicht neu eingeführt. Zweitens: Sicherheitstechniken werden ausschließlich am eigenen System erprobt und nirgendwo sonst; das ist keine Formalität, sondern die Grundlage dafür, dieses Thema überhaupt praktisch unterrichten zu können. Drittens: Der eigene Server verursacht laufende Kosten in geringer Höhe und erfordert bei Minderjährigen einen Vertragsabschluss über die Erziehungsberechtigten. Wer keinen Server mieten kann, arbeitet auf einer von der Schule bereitgestellten Umgebung; die Inhalte bleiben dieselben.

Erwartete Kompetenzen am Ende der 4. Klasse

Webanwendungen gegen einfache Angriffsvektoren und Risiken absichern
Serverumgebungen zur Veröffentlichung von Webauftritten unter Berücksichtigung der IT-Sicherheit einrichten und betreiben
Webservices mit Datenbankschnittstelle implementieren
Frontends für Webservices auf Basis aktueller Frameworks implementieren
Erweiterungen in Enterprise Content Management Systeme einbinden und konfigurieren
Größere Webauftritte mit Hilfe von Enterprise Content Management Systemen realisieren
Anforderungen an Benutzerergonomie und Benutzererfahrung erläutern und anwenden
Anwendungen unter Berücksichtigung der IT-Sicherheit gestalten und realisieren

Ausblick

Am Ende dieses Jahres haben Sie Ihr eigenes Projekt im Betrieb: eigene Datenbank, eigener Webservice, eigenes Frontend, ein redaktionell gepflegter Inhaltsbereich - und darunter ein selbst gemieteter Server mit eigener Adresse, Zertifikat und einer Konfiguration, die die naheliegenden Angriffe abweist. Damit ist die Kette einmal ganz durchlaufen, an einer Anwendung, die Ihnen gehört.

Offen bleibt, was aus einer laufenden Anwendung eine verlässliche macht: Wie bemerkt man einen Ausfall, bevor Benutzer anrufen? Wie liefert man eine neue Version aus, ohne die alte zu zerstören? Wie hält man eine Anwendung über Jahre wartbar? Das ist der Stoff der 5. Klasse.