Lehrplan und Ablauf

Lehrplan - IV. Jahrgang

Lehrplan der Höheren Lehranstalt für Informationstechnologie (B.2 Medientechnik, 2.6.1 Web- und App-Entwicklung)

Der Lehrplan für den IV. Jahrgang sieht wie folgt aus (Zitat aus dem offiziellen Lehrplan):

7. Semester - Kompetenzmodul 7

Bildungs- und Lehraufgabe

Die Schülerinnen und Schüler können im

Bereich Webentwicklung

• Webanwendungen gegen einfache Angriffsvektoren und Risiken absichern;
• Serverumgebungen zur Veröffentlichung von Webauftritten unter Berücksichtigung der IT-Sicherheit einrichten und betreiben.

Bereich Appentwicklung

• Webservices mit Datenbankschnittstelle implementieren;
• Frontends für Webservices auf Basis aktueller Frameworks implementieren.

Lehrstoff

Bereich Webentwicklung:

• Webhosting, IT-Sicherheit.

Bereich Appentwicklung:

• Webservices, Datenbankschnittstellen, Frontend-Frameworks.

8. Semester - Kompetenzmodul 8

Bildungs- und Lehraufgabe

Die Schülerinnen und Schüler können im

Bereich Webentwicklung

• Erweiterungen in Enterprise Content Management Systeme einbinden und konfigurieren;
• größere Webauftritte mit Hilfe von Enterprise Content Management Systemen realisieren.

Bereich Appentwicklung

• Anforderungen an die Benutzerergonomie und Benutzererfahrung erläutern und anwenden;
• Anwendungen unter Berücksichtigung der IT-Sicherheit gestalten und realisieren.

Lehrstoff

Bereich Webentwicklung:

• Enterprise Content Management Systeme, CMS Extensions, Umsetzung von Webauftritten.

Bereich Appentwicklung:

• Webservices, Datenbankschnittstellen, Frontend-Frameworks, Benutzerergonomie, Benutzererfahrung, IT-Sicherheit.

Daraus ergibt sich der folgende (grobe) Wochenplan für das IV. Jahr:

4. Klasse - Wochenplan

Verplant sind in der 4. Klasse 31 Wochen. Das Jahr ist nicht als Folge unabhängiger Themen organisiert, sondern um ein eigenes Jahresprojekt: Jede Schülerin und jeder Schüler - allein oder in einem Team aus zwei oder drei Personen - wählt zu Jahresbeginn eine Anwendung, die über das ganze Jahr wächst. Jedes Kapitel wird an diesem Projekt erarbeitet und abgegeben; die Wochenangaben sind der Takt, in dem das geschieht.

Werkzeuge: ein eigener Linux-VPS bei Hetzner, Docker und Dokploy für das Deployment, TypeScript mit Next.js für Webservice und Frontend, TanStack Query und TanStack Form im Frontend, PostgreSQL als Datenbank sowie ein Enterprise Content Management System als Inhaltsbestandteil des Projekts.

Verhältnis zu Softwareentwicklung (SEW)

In SEW werden im IV. Jahrgang TypeScript, asynchrones Arbeiten, HTTP, REST-Grundzüge, React, Next.js mit Routing und API-Routen, Mehrschichtarchitektur, Persistenz und Middleware/Validierung eingeführt. Dieser Gegenstand wiederholt das nicht, sondern setzt darauf auf: Wo SEW zeigt, dass eine Schnittstelle funktioniert, geht es hier darum, warum sie so und nicht anders geschnitten ist, wie sie sich über Systemgrenzen hinweg verhält, was sie unter Last und unter Angriff tut und wie man sie misst und verbessert. Der Infrastrukturteil ist bewusst knapp gehalten: Er ist Voraussetzung, nicht Selbstzweck. Das Gewicht liegt auf Implementierung, Verhalten im Betrieb und Optimierung.

Das Jahresprojekt

Das Projektthema ist frei, muss aber alle Bereiche des Lehrplans abdecken: eine Datenbank, einen eigenen Webservice, ein Frontend, einen redaktionell gepflegten Inhaltsbereich (CMS) sowie einen öffentlich erreichbaren, abgesicherten Betrieb auf dem eigenen Server. Der Umfang wird an die Teamgröße angepasst; eine Einzelperson liefert weniger Funktionen, aber dieselbe Kette vom Server bis zum Frontend. Das Thema wird in Kapitel 1 vereinbart und im Laufe des Jahres nicht mehr gewechselt.

Eigener Server: Kosten und Verantwortung

Der Gegenstand setzt einen selbst gemieteten virtuellen Server voraus (Hetzner Cloud, kleinste Instanz, derzeit rund 4 bis 5 Euro im Monat, dazu optional eine Domain). Drei Punkte dazu:

• Vertrag und Bezahlung: Minderjährige schließen den Vertrag über eine erziehungsberechtigte Person ab. Ein Team teilt sich sinnvollerweise einen Server und die Kosten.
• Betreiberverantwortung: Ein Server im Internet ist von der ersten Minute an von außen erreichbar und wird auch angegriffen. Wer ihn betreibt, ist für ihn verantwortlich - deshalb steht die Absicherung im Wochenplan ganz vorne.
• Ersatzweg: Wer keinen Server mieten kann oder darf, arbeitet auf einer von der Schule bereitgestellten VM oder lokal in einer virtuellen Maschine. Die Inhalte sind dieselben; öffentlich erreichbar wird das Projekt in diesem Fall über die Schulumgebung.

1. Jahresprojekt: Thema und Team (1 Woche)
   Projektidee und Abgrenzung, Teambildung (1 bis 3 Personen), Anforderungen als Nutzergeschichten, Schnitt zwischen Frontend, Webservice und Inhaltsbereich festlegen, Repository- und Dokumentationsstruktur

2. Server aufsetzen und härten (2 Wochen)
   VPS bei Hetzner anlegen, Shell, Benutzer und Rechte, SSH mit Schlüsseln, Dienste mit systemd; SSH härten, Firewall, automatische Sicherheitsupdates, Angriffsfläche verkleinern, Logs lesen, Snapshots

3. Auslieferung mit Containern (2 Wochen)
   Dockerfile und Compose für das eigene Projekt, Dokploy einrichten, Deployment aus dem Git-Repository, Reverse Proxy und TLS über Traefik, DNS und Domain, Umgebungsvariablen und Secrets, Rollback

4. Schnittstellen im Vergleich (2 Wochen)
   Richardson-Reifegrade und HATEOAS, Ressourcenschnitt und Idempotenz; SOAP mit Envelope, WSDL, XML-Schema und WS-Security; RPC, gRPC und GraphQL zur Einordnung; Vertrag zuerst gegen Code zuerst, OpenAPI gegen WSDL, Auswahl für das eigene Projekt begründen

5. Getrennte Systeme (2 Wochen)
   Same-Origin-Policy und CORS im Detail (Preflight, Credentials), Cookies gegen Bearer-Tokens, SameSite, Proxy- und BFF-Muster, getrennte Container und Domains, typisierte Clients aus der OpenAPI-Beschreibung erzeugen, Verträge zwischen Teams

6. Datenbank produktionsnah (2 Wochen)
   Von SQLite zu PostgreSQL, ORM und Migrationen im laufenden Betrieb, Transaktionen und Isolationsstufen, Verbindungsverwaltung, N+1-Problem, Indizes, parametrisierte Abfragen gegen SQL-Injection

7. Robuste Webservices (2 Wochen)
   Einheitliche Fehlerformate (problem+json), Idempotenz und Wiederholbarkeit, Paginierung, Filter und Sortierung, Ratenbegrenzung, Caching-Header und ETag, Versionierung, Vertragstests gegen die eigene Schnittstelle

8. Authentifizierung und Rechte (2 Wochen)
   Passwort-Hashing, Sessions gegen JWT, Refresh und Abmeldung, Rollen und Berechtigungsprüfung an einer Stelle, geschützte Routen im getrennten Aufbau, OAuth 2.0 und OIDC als Ausblick

9. Angriffsvektoren und Schutz (2 Wochen)
   OWASP Top 10 als Landkarte, Injection, Cross-Site-Scripting, CSRF im Cookie- und im Token-Modell, Security-Header und Content Security Policy, Umgang mit Secrets, Abhängigkeiten als Angriffsfläche

10. Serverzustand im Frontend (2 Wochen)
    Server- gegen Client-Zustand, Query Keys und Cache, Invalidierung, stale-while-revalidate, optimistische Aktualisierungen, Infinite Queries, Wiederholungs- und Fehlerstrategien, Zusammenspiel mit Server Components

11. Formulare mit TanStack Form (2 Wochen)
    Ein Zod-Schema für Client und Server, Validierung auf Feld- und Formularebene, asynchrone Prüfungen, Fehlerdarstellung und Fokusführung, mehrstufige Formulare, Dateiuploads, Barrierefreiheit von Formularen

12. Internationalisierung (1 Woche)
    Sprachen im Routing, ICU-MessageFormat mit Plural und Genus, Formatierung von Datum, Zahl und Währung, Übersetzungsdateien und Redaktionsprozess, mehrsprachige Inhalte im CMS, RTL als Randfall

13. Performance und Optimierung (2 Wochen)
    Erst messen: Lighthouse, Core Web Vitals, Netzwerk- und Datenbankprofile; Rendering-Strategien (SSR, SSG, ISR, Streaming), Caching auf allen Ebenen, Bundle-Analyse und Code-Splitting, Bilder und Schriften, Datenbankabfragen optimieren, Lasttest gegen den eigenen Server

14. Content Management (2 Wochen)
    Begriff und Marktüberblick, CMS installieren und konfigurieren, Inhaltsmodell und Redaktionsrollen, Templates gestalten, Extensions auswählen und einbinden, Headless-Anbindung an das eigene Frontend

15. Benutzerergonomie und UX (2 Wochen)
    Gestaltungsheuristiken, Bedienbarkeit prüfen, Barrierefreiheit (WCAG in Grundzügen), Responsive Design, Lade- und Fehlerzustände aus Benutzersicht

16. Sicherheits-Review (1 Woche)
    Server und Anwendung gegen eine Checkliste prüfen, Befunde priorisieren, dokumentieren und beheben

17. Projektabschluss (2 Wochen)
    Restarbeiten, Betriebs- und Härtungsdokumentation fertigstellen, Übergabe des laufenden Systems, Präsentation und Retrospektive

Zur Werkzeugwahl

Der Lehrplan nennt keine Sprachen und keine Produkte, sondern „aktuelle Frameworks”. Die Wahl fällt hier auf TypeScript mit Next.js, weil dieselbe Sprache und dasselbe Framework in Softwareentwicklung verwendet werden - der Gegenstand kann damit beim Betrieb und der Absicherung ansetzen statt bei der Sprache. In der Praxis sind andere Kombinationen ebenso üblich: Python mit FastAPI oder Django, Java mit Spring Boot, PHP mit Laravel, Go, C# mit ASP.NET Core.

Für das Deployment ist Dokploy eine von mehreren Möglichkeiten; vergleichbar sind Coolify, CapRover, Portainer oder ein reines Compose-Setup, in größeren Umgebungen Kubernetes.

Im Frontend stehen TanStack Query und TanStack Form stellvertretend für eine Werkzeugklasse: SWR oder RTK Query lösen dieselbe Aufgabe beim Serverzustand, React Hook Form dieselbe bei Formularen. Die Konzepte des Jahres - Ressourcen und Statuscodes, Datenzugriffsschicht, Container, Reverse Proxy, Zertifikate - sind von dieser Wahl unabhängig und lassen sich übertragen.