Seminar Payload CMS – Grundlagen und Projekt-Setup mit TypeScript

Das Fachseminar vermittelt die fachlichen und technischen Kompetenzen für eine planbare, wartbare und überprüfbare Umsetzung. Der Schwerpunkt liegt auf dem sicheren Einstieg in Architektur, Konfiguration, Content-Modell, lokale Entwicklung, Admin-Oberfläche und grundlegende APIs. Die Inhalte werden an einem durchgängigen Beispielprojekt erarbeitet und in nachvollziehbaren Arbeitsschritten umgesetzt.

Das Grundlagenseminar baut eine vollständige, kleine Payload-Anwendung von der Projektanlage bis zum geprüften Entwicklungsstand auf. TypeScript-Konfiguration, Collections, Globals, Felder, Beziehungen, Authentifizierung, Admin-Bedienung, APIs, Fehlerdiagnose und ein sauberer Entwicklungsworkflow werden zusammengeführt.

Inhaltsübersicht

• Einordnung und Zielbild
• Kompetenzziele
• Zielgruppe und Voraussetzungen
• Schrittweise Seminarinhalte
• Praxisübungen
• Lernkontrolle und Dokumentation

Einordnung und Zielbild

Die gewählte Dauer von 3 Tagen ermöglicht eine belastbare Verbindung aus Konzeptklärung, Demonstration, angeleiteter Umsetzung, eigenständiger Übung und strukturierter Qualitätskontrolle.

Zu Beginn werden Zielarchitektur, Verantwortlichkeiten und Abgrenzungen geklärt. Darauf folgen die fachliche Modellierung, die technische Umsetzung, die Überprüfung typischer Fehlerbilder und die Überführung in eine dokumentierte Projektkonvention.

Kompetenzziele

• Aufbau und Verantwortlichkeiten einer Payload-Anwendung erklären.
• Ein lokales Projekt reproduzierbar installieren, konfigurieren und starten.
• Collections, Globals, Felder und Beziehungen für ein kleines Fachmodell erstellen.
• Inhalte über Admin-Oberfläche und APIs kontrolliert bearbeiten.
• Änderungen mit Typprüfung, Tests, Migration und Versionsverwaltung absichern.

Zielgruppe und Voraussetzungen

Zielgruppe: Web- und Softwareentwicklung, technische Redaktion mit Entwicklungsaufgaben, Solution Architecture und neue Projektmitarbeitende.

Voraussetzungen: Grundkenntnisse in JavaScript oder TypeScript, Webanwendungen, HTTP und Versionsverwaltung. React-Kenntnisse sind hilfreich, aber nicht zwingend.

Schrittweise Seminarinhalte

1. Architektur und Projektstruktur

Zu Beginn werden Laufzeit, Konfiguration, Admin-Oberfläche, Datenbank und Frontend als zusammenhängende, aber getrennte Verantwortungsbereiche eingeordnet.

Kapitelinhaltsverzeichnis

• Schritt 1: Anwendungsbestandteile und ihren Start- sowie Buildzeitpunkt identifizieren.
• Schritt 2: Konfigurationsdateien, Quellcode, generierte Typen und Umgebungswerte lokalisieren.
• Schritt 3: Datenbank-, Upload- und Frontendabhängigkeiten im Systemkontext einzeichnen.
• Schritt 4: Entwicklungs- und Produktionsunterschiede benennen.
• Schritt 5: Ein Diagnoseblatt für Start- und Konfigurationsfehler anlegen.
• Praxisauftrag

1. Schritt 1: Anwendungsbestandteile und ihren Start- sowie Buildzeitpunkt identifizieren.
2. Schritt 2: Konfigurationsdateien, Quellcode, generierte Typen und Umgebungswerte lokalisieren.
3. Schritt 3: Datenbank-, Upload- und Frontendabhängigkeiten im Systemkontext einzeichnen.
4. Schritt 4: Entwicklungs- und Produktionsunterschiede benennen.
5. Schritt 5: Ein Diagnoseblatt für Start- und Konfigurationsfehler anlegen.

Praxisauftrag: Die Architektur eines Beispielprojekts wird als Komponenten- und Datenflussdiagramm dokumentiert.

2. Projektanlage und lokale Entwicklungsumgebung

Ein reproduzierbares Setup verhindert, dass spätere Fehler auf uneinheitliche Werkzeuge oder Konfigurationen zurückgehen.

Kapitelinhaltsverzeichnis

• Schritt 1: Laufzeit- und Paketversionen kontrollieren und dokumentieren.
• Schritt 2: Projekt anlegen, Abhängigkeiten installieren und Umgebungswerte vorbereiten.
• Schritt 3: Datenbankverbindung und Uploadpfad konfigurieren.
• Schritt 4: Entwicklungsserver starten und den ersten administrativen Zugang anlegen.
• Schritt 5: Setup-Schritte in einer prüfbaren Startanleitung festhalten.
• Praxisauftrag

1. Schritt 1: Laufzeit- und Paketversionen kontrollieren und dokumentieren.
2. Schritt 2: Projekt anlegen, Abhängigkeiten installieren und Umgebungswerte vorbereiten.
3. Schritt 3: Datenbankverbindung und Uploadpfad konfigurieren.
4. Schritt 4: Entwicklungsserver starten und den ersten administrativen Zugang anlegen.
5. Schritt 5: Setup-Schritte in einer prüfbaren Startanleitung festhalten.

Praxisauftrag: Ein neues Projekt wird von leerem Arbeitsverzeichnis bis zur funktionsfähigen Anmeldung aufgebaut.

3. TypeScript-Konfiguration und generierte Typen

Die Konfiguration wird als typisierte, modular aufgebaute Anwendungsdefinition behandelt.

Kapitelinhaltsverzeichnis

• Schritt 1: Konfigurationsobjekt und zentrale Optionen lesen.
• Schritt 2: Collections, Globals und gemeinsam genutzte Bausteine in Module aufteilen.
• Schritt 3: Generierte Typen erzeugen und in eigenen Funktionen verwenden.
• Schritt 4: Fehlerhafte Konfigurationen über Typprüfung und Startdiagnose eingrenzen.
• Schritt 5: Namens- und Importkonventionen für das Team festlegen.
• Praxisauftrag

1. Schritt 1: Konfigurationsobjekt und zentrale Optionen lesen.
2. Schritt 2: Collections, Globals und gemeinsam genutzte Bausteine in Module aufteilen.
3. Schritt 3: Generierte Typen erzeugen und in eigenen Funktionen verwenden.
4. Schritt 4: Fehlerhafte Konfigurationen über Typprüfung und Startdiagnose eingrenzen.
5. Schritt 5: Namens- und Importkonventionen für das Team festlegen.

Praxisauftrag: Die zunächst monolithische Konfiguration wird modularisiert und durch generierte Typen abgesichert.

4. Erstes Content-Modell

Ein kleines Fachmodell vermittelt die Grundentscheidungen zu Collections, Globals und Feldtypen.

Kapitelinhaltsverzeichnis

• Schritt 1: Inhaltsarten und globale Einstellungen aus einer einfachen Anforderung ableiten.
• Schritt 2: Geeignete Feldtypen, Pflichtwerte und Bezeichnungen auswählen.
• Schritt 3: Eine Beziehung und eine wiederholbare Struktur modellieren.
• Schritt 4: Validierung und eindeutige Slugs ergänzen.
• Schritt 5: Beispieldaten in der Admin-Oberfläche anlegen und prüfen.
• Praxisauftrag

1. Schritt 1: Inhaltsarten und globale Einstellungen aus einer einfachen Anforderung ableiten.
2. Schritt 2: Geeignete Feldtypen, Pflichtwerte und Bezeichnungen auswählen.
3. Schritt 3: Eine Beziehung und eine wiederholbare Struktur modellieren.
4. Schritt 4: Validierung und eindeutige Slugs ergänzen.
5. Schritt 5: Beispieldaten in der Admin-Oberfläche anlegen und prüfen.

Praxisauftrag: Beiträge, Kategorien und globale Seiteneinstellungen werden als funktionsfähiges Minimalmodell umgesetzt.

5. Authentifizierung und einfache Berechtigungen

Bereits im Grundprojekt werden administrative und redaktionelle Zugriffe klar getrennt.

Kapitelinhaltsverzeichnis

• Schritt 1: Eine Benutzer-Collection und grundlegende Rollenfelder einrichten.
• Schritt 2: Anmeldung, Abmeldung und gesperrtes Konto testen.
• Schritt 3: Lesen und Ändern einer Collection rollenabhängig begrenzen.
• Schritt 4: Oberflächenzustand und direkte API-Anfrage vergleichen.
• Schritt 5: Einfache Negativtests für unzulässige Zugriffe dokumentieren.
• Praxisauftrag

1. Schritt 1: Eine Benutzer-Collection und grundlegende Rollenfelder einrichten.
2. Schritt 2: Anmeldung, Abmeldung und gesperrtes Konto testen.
3. Schritt 3: Lesen und Ändern einer Collection rollenabhängig begrenzen.
4. Schritt 4: Oberflächenzustand und direkte API-Anfrage vergleichen.
5. Schritt 5: Einfache Negativtests für unzulässige Zugriffe dokumentieren.

Praxisauftrag: Administrator- und Redaktionsrolle werden eingerichtet und mit erlaubten sowie abgelehnten Zugriffen geprüft.

6. Admin-Oberfläche und redaktioneller Ablauf

Die Oberfläche wird nicht nur bedient, sondern hinsichtlich Datenmodell, Validierung und Arbeitsreihenfolge verstanden.

Kapitelinhaltsverzeichnis

• Schritt 1: Collections, Dokumentlisten, Formulare und globale Einstellungen navigieren.
• Schritt 2: Filter, Sortierung und gespeicherte Arbeitsansichten nutzen.
• Schritt 3: Validierungsfehler und Beziehungsfelder systematisch bearbeiten.
• Schritt 4: Entwurf, Speichern und Veröffentlichung im Beispielprozess durchführen.
• Schritt 5: Redaktionelle Probleme als Modell- oder Konfigurationsbedarf zurückmelden.
• Praxisauftrag

1. Schritt 1: Collections, Dokumentlisten, Formulare und globale Einstellungen navigieren.
2. Schritt 2: Filter, Sortierung und gespeicherte Arbeitsansichten nutzen.
3. Schritt 3: Validierungsfehler und Beziehungsfelder systematisch bearbeiten.
4. Schritt 4: Entwurf, Speichern und Veröffentlichung im Beispielprozess durchführen.
5. Schritt 5: Redaktionelle Probleme als Modell- oder Konfigurationsbedarf zurückmelden.

Praxisauftrag: Ein vollständiger Redaktionsfall wird vom neuen Entwurf bis zum kontrollierten Veröffentlichungsstand durchlaufen.

7. REST, GraphQL und Local API im Überblick

Die drei Zugriffsmöglichkeiten werden nach Kontext, Berechtigung und typischen Einsatzfällen unterschieden.

Kapitelinhaltsverzeichnis

• Schritt 1: Einen Datensatz über REST lesen und gefiltert abfragen.
• Schritt 2: Eine vergleichbare GraphQL-Abfrage formulieren.
• Schritt 3: Eine serverseitige Operation über die Local API ausführen.
• Schritt 4: Authentifizierten und anonymen Kontext vergleichen.
• Schritt 5: Fehlerantworten und Datenformate in einer kleinen Schnittstellenübersicht dokumentieren.
• Praxisauftrag

1. Schritt 1: Einen Datensatz über REST lesen und gefiltert abfragen.
2. Schritt 2: Eine vergleichbare GraphQL-Abfrage formulieren.
3. Schritt 3: Eine serverseitige Operation über die Local API ausführen.
4. Schritt 4: Authentifizierten und anonymen Kontext vergleichen.
5. Schritt 5: Fehlerantworten und Datenformate in einer kleinen Schnittstellenübersicht dokumentieren.

Praxisauftrag: Derselbe Anwendungsfall wird über REST, GraphQL und Local API umgesetzt und verglichen.

8. Entwicklungsworkflow und Qualitätsprüfung

Das Grundprojekt erhält einen wiederholbaren Weg von der Änderung bis zur teamfähigen Freigabe.

Kapitelinhaltsverzeichnis

• Schritt 1: Formatierung, Typprüfung und Tests als lokale Prüfsequenz festlegen.
• Schritt 2: Schemaänderung und Migration gemeinsam versionieren.
• Schritt 3: Sinnvolle Commitgrenzen und Reviewinformationen definieren.
• Schritt 4: Fehlerfall aus Protokoll, Stacktrace und Konfiguration eingrenzen.
• Schritt 5: Eine Projekt-README mit Setup, Start, Test und Reset erstellen.
• Praxisauftrag

1. Schritt 1: Formatierung, Typprüfung und Tests als lokale Prüfsequenz festlegen.
2. Schritt 2: Schemaänderung und Migration gemeinsam versionieren.
3. Schritt 3: Sinnvolle Commitgrenzen und Reviewinformationen definieren.
4. Schritt 4: Fehlerfall aus Protokoll, Stacktrace und Konfiguration eingrenzen.
5. Schritt 5: Eine Projekt-README mit Setup, Start, Test und Reset erstellen.

Praxisauftrag: Eine Modelländerung wird entwickelt, geprüft, migriert, dokumentiert und als reviewfähige Änderung vorbereitet.

Praxisübungen

• Reproduzierbares Projekt-Setup
• Typisierte und modulare Konfiguration
• Kleines Content-Modell mit Beziehung
• Rollen und grundlegende Zugriffsprüfung
• Vergleich von REST, GraphQL und Local API
• Teamfähiger Entwicklungsworkflow

Die Übungen werden mit klaren Eingangsdaten, Prüfkriterien und dokumentierten Soll-Ergebnissen durchgeführt. Fehler werden nicht nur korrigiert, sondern anhand ihrer Ursache, Auswirkung und geeigneten Präventionsmaßnahme eingeordnet.

Lernkontrolle und Dokumentation

Die Lernkontrolle verbindet kurze Verständnisfragen, Konfigurationsprüfungen, Code- oder Modellreviews und eine abschließende Transferaufgabe. Entscheidend ist die nachvollziehbare Begründung der gewählten Lösung.

• Abgleich der Umsetzung mit den fachlichen Akzeptanzkriterien
• Prüfung von Berechtigungen, Validierung, Fehlerbehandlung und Wartbarkeit
• Dokumentation der zentralen Entscheidungen und Betriebsannahmen
• Festhalten offener Risiken und der nächsten Umsetzungsschritte
• Erstellung einer wiederverwendbaren Checkliste für das eigene Projekt