Seminar ApostropheCMS Intensiv – Entwicklung, Headless und Integration

Das fünftägige Intensivprogramm fasst Architektur, Content-Modellierung, Templates, Widgets, Modulentwicklung, Vue-3-Admin-UI, REST, Astro, Integrationen und Tests in einem gemeinsamen Entwicklungsprojekt zusammen. Ergebnis ist eine vollständige, erweiterbare und auslieferbare Lösung.

Inhaltsübersicht

• Zielsetzung und Einordnung
• Zielgruppe und Voraussetzungen
• Projektarchitektur und Content-Modell
• Templates, Areas und Widgets
• Module und Vue-3-Admin-UI
• Headless, Astro und externe Systeme
• Tests, Auslieferung und Abschlussprojekt
• Praxisübungen
• Methodik

Zielsetzung

• ApostropheCMS-Projekte modular und nachvollziehbar strukturieren.
• Content-Modelle, Templates, Widgets und Erweiterungsmodule als vertikale Funktion entwickeln.
• Admin-UI, REST, Astro und externe Systeme sicher miteinander verbinden.
• Tests, Migrationen, Build und technische Dokumentation in den Entwicklungsprozess integrieren.

Zielgruppe

JavaScript- und Full-Stack-Entwickler, Solution Architects, Integrationsentwickler und technische Leads

Voraussetzungen

Sichere JavaScript- und Node.js-Kenntnisse, Erfahrung mit Webentwicklung, HTTP und npm sowie grundlegende Kenntnisse moderner Frontends

Seminarinhalte

Tag 1: Projektarchitektur und Content-Modell

1. Schritt 1.1: Projekt, Module, Konfiguration, Laufzeit und Entwicklungsworkflow aufsetzen.
2. Schritt 1.2: Fachanforderungen in Pages, Pieces, Felder, Beziehungen und Berechtigungsgrenzen übersetzen.
3. Schritt 1.3: Ein erstes Page- und Piece-Modul mit validiertem Schema implementieren.
4. Schritt 1.4: Abfragen, Testdaten und redaktionelle Anwendungsfälle für das Modell festlegen.
5. Schritt 1.5: Architektur und Namenskonventionen in einem technischen Entscheidungsprotokoll sichern.

Tag 2: Templates, Areas und Widgets

1. Schritt 2.1: Nunjucks-Templates, Datenkontext, Makros und wiederverwendbare Layoutbausteine strukturieren.
2. Schritt 2.2: Areas und Widgets mit Schemas, Varianten und redaktionellen Leitplanken entwickeln.
3. Schritt 2.3: Bilder, Medien, Beziehungen und responsive Darstellung in Widgets integrieren.
4. Schritt 2.4: Client-JavaScript, Styles, Barrierefreiheit und Performance der Ausgabe prüfen.
5. Schritt 2.5: Eine vollständige Seitenausgabe aus dem Content-Modell erstellen und testen.

Tag 3: Module und Vue-3-Admin-UI

1. Schritt 3.1: Servermethoden, Handler, Aufgaben und eigene Endpunkte in einem Fachmodul implementieren.
2. Schritt 3.2: Berechtigungs- und Validierungslogik an allen relevanten Eingängen durchsetzen.
3. Schritt 3.3: Eine Vue-3-Komponente oder ein eigenes Feld für den redaktionellen Workflow entwickeln.
4. Schritt 3.4: Client-Server-Kommunikation, Lade- und Fehlerzustände sowie Fokusführung absichern.
5. Schritt 3.5: Das Fachmodul mit Migration, Konfiguration und dokumentierter Installation vervollständigen.

Tag 4: Headless, Astro und externe Systeme

1. Schritt 4.1: REST-Responses, Filter, Projektion und Nachladen von Beziehungen als Datenvertrag definieren.
2. Schritt 4.2: Astro-Routing und Komponenten für Pages, Pieces und Widgets aufbauen.
3. Schritt 4.3: Vorschau, On-Page Editing, Lokalisierung und Medienausgabe in die Hybridarchitektur integrieren.
4. Schritt 4.4: Einen externen Datenfluss mit Import, Idempotenz, Fehlerbehandlung und Authentifizierung ergänzen.
5. Schritt 4.5: Caching, API-Sicherheit und Observability für beide Ausgabepfade festlegen.

Tag 5: Tests, Auslieferung und Abschlussprojekt

1. Schritt 5.1: Unit-, Integrations-, Contract- und End-to-End-Tests für Modell, Modul, API und Frontend erstellen.
2. Schritt 5.2: Datenmigrationen und Upgradefälle mit reproduzierbaren Testdaten absichern.
3. Schritt 5.3: Build, Produktionsassets, Umgebungsparameter und Deployment-Checkliste vorbereiten.
4. Schritt 5.4: Fehlerfälle, Berechtigungen, Performance und Barrierefreiheit im Gesamtprojekt prüfen.
5. Schritt 5.5: Die Lösung demonstrieren, reviewen, technische Schulden priorisieren und zur Freigabe dokumentieren.

Praxisübungen

• Entwicklung eines vollständigen Fachmoduls mit Content-Typen, Widget und Admin-Erweiterung.
• Aufbau eines Astro-Clients mit REST-Vertrag, Vorschau und kontrollierter Fehlerbehandlung.
• Integration einer externen Datenquelle einschließlich Import, Tests und Betriebsdiagnose.

Methodik

Intensives Live-Coding, Architekturentscheidungen, Pair-Reviews, API- und Frontendlabor, Tests und ein durchgängiges Abschlussprojekt.