Seminar ApostropheCMS Admin-UI und Vue-3-Erweiterungen

Im Mittelpunkt steht die gezielte Erweiterung der redaktionellen Oberfläche von ApostropheCMS 4.x. Behandelt werden Client-Module, Vue-3-Komponenten, modale Dialoge, eigene Felder, Interaktionen mit Servermethoden sowie ein wartbarer Build- und Testprozess.

Inhaltsübersicht

• Zielsetzung und Einordnung
• Zielgruppe und Voraussetzungen
• Architektur und Einstieg in die Admin-Oberfläche
• Komponenten, Felder und Serverkommunikation
• Build, Tests und wartbare Auslieferung
• Praxisübungen
• Methodik

Zielsetzung

• Aufbau und Erweiterungspunkte der Administrationsoberfläche systematisch einordnen.
• Eigene Vue-3-Komponenten mit vorhandenen UI-Konventionen verbinden.
• Formularzustände, Validierung, Berechtigungen und Serverkommunikation belastbar umsetzen.
• Erweiterungen für Updates, Barrierefreiheit und automatisierte Qualitätssicherung vorbereiten.

Zielgruppe

JavaScript- und Vue-Entwickler, ApostropheCMS-Entwickler, Frontend-Architekten und technische Produktteams

Voraussetzungen

Sichere JavaScript-Kenntnisse, Grundkenntnisse in Vue 3 und praktische Erfahrung mit Modulen, Schemas und npm-basierten Projekten

Seminarinhalte

Tag 1: Architektur und Einstieg in die Admin-Oberfläche

1. Schritt 1.1: Projekt und Entwicklungsumgebung prüfen, relevante Module identifizieren und den Client-Build nachvollziehen.
2. Schritt 1.2: Vue-3-Komponentenbaum, globale Komponenten, Stores, Events und UI-Konventionen der Oberfläche untersuchen.
3. Schritt 1.3: Ein Client-Modul anlegen, registrieren und mit einer ersten sichtbaren Erweiterung laden.
4. Schritt 1.4: Admin-Bar, Kontextmenüs und modale Dialoge anhand eines kontrollierten Beispiels erweitern.
5. Schritt 1.5: Berechtigungs- und Sichtbarkeitsregeln für die neue Oberfläche definieren und testen.

Tag 2: Komponenten, Felder und Serverkommunikation

1. Schritt 2.1: Eine wiederverwendbare Vue-Komponente mit Props, Events und lokalem Zustand implementieren.
2. Schritt 2.2: Ein eigenes Eingabefeld mit Schema-Konfiguration, Validierung und verständlichen Fehlermeldungen entwickeln.
3. Schritt 2.3: Servermethoden und API-Endpunkte anbinden, Ladezustände, Fehlerfälle und Wiederholungen behandeln.
4. Schritt 2.4: Dialogabläufe für Erstellen, Bearbeiten, Bestätigen und Abbrechen konsistent gestalten.
5. Schritt 2.5: Tastaturbedienung, Fokusführung, Beschriftungen und responsive Darstellung überprüfen.

Tag 3: Build, Tests und wartbare Auslieferung

1. Schritt 3.1: Assets, Modulabhängigkeiten und Build-Schritte für Entwicklung und Produktion strukturieren.
2. Schritt 3.2: Komponenten- und Integrationstests für Felder, Dialoge, Berechtigungen und Fehlerfälle erstellen.
3. Schritt 3.3: Fehlerdiagnose mit Browserwerkzeugen, Serverlogs und reproduzierbaren Testdaten durchführen.
4. Schritt 3.4: Upgrade-Risiken zwischen individuellen Komponenten und der Kernoberfläche erfassen und kapseln.
5. Schritt 3.5: Eine vollständige Admin-Erweiterung vom Schema bis zur dokumentierten Freigabe fertigstellen.

Praxisübungen

• Entwicklung eines benutzerdefinierten Feldes mit Vorschau, Validierung und serverseitiger Speicherung.
• Aufbau eines rollenabhängigen Dialogs für einen fachlichen Freigabeschritt.
• Review einer absichtlich fehlerhaften Erweiterung anhand von Build-, Bedienungs- und Sicherheitskriterien.

Methodik

Architekturimpulse, Live-Coding, schrittweise Implementierung, Code-Reviews, Fehlersuche und ein zusammenhängendes Erweiterungsprojekt.