Seminar Magda UI-Anpassung und Plugin-Entwicklung

Das Seminar behandelt die Anpassung der Magda-Benutzeroberfläche von Branding und Inhaltskonfiguration bis zu eigenen Plugin-Komponenten. Datenzugriff, Komponentenstruktur, Berechtigungen, Fehlerzustände, Barrierefreiheit, Tests und Auslieferung werden in einer praxisnahen Erweiterung verbunden.

Inhaltsübersicht

1. Anpassungsebenen bestimmen
2. Branding und Inhaltskonfiguration
3. UI-Architektur und Datenzugriff
4. Plugin-Komponente entwickeln
5. Qualität und Barrierefreiheit
6. Build und Auslieferung
7. Praxisübungen und Voraussetzungen

Zielgruppe

Frontend-Entwicklung, Full-Stack-Entwicklung, UX Engineering und technische Produktteams.

Lernziele

• Branding und konfigurierbare Inhalte ohne unnötige Codeänderungen anpassen.
• UI-Struktur, Datenzugriff und Erweiterungspunkte sicher einordnen.
• Eigene Plugin-Komponenten entwickeln und in die Oberfläche integrieren.
• Berechtigungen, Lade-, Leer- und Fehlerzustände korrekt behandeln.
• Erweiterung testen, containerisieren und per Helm ausliefern.

Seminarinhalte

1. Anpassungsebenen bestimmen

1. Schritt 1: Branding, Inhalt, Konfiguration und Codeerweiterung voneinander abgrenzen.
2. Schritt 2: Änderungsbedarf nach Wartbarkeit und Upgrade-Risiko bewerten.
3. Schritt 3: Passende Anpassungsebene für mehrere Anforderungen auswählen.

2. Branding und Inhaltskonfiguration

1. Schritt 1: Logo, Texte, Navigation und Seitenelemente inventarisieren.
2. Schritt 2: Konfigurierbare Inhalte und Darstellung anpassen.
3. Schritt 3: Darstellung in verschiedenen Auflösungen und Zuständen prüfen.

3. UI-Architektur und Datenzugriff

1. Schritt 1: Komponenten, Routen und Zustandsverwaltung nachvollziehen.
2. Schritt 2: API-Aufruf mit Lade-, Erfolgs- und Fehlerzustand implementieren.
3. Schritt 3: Berechtigungsabhängige Darstellung kontrollieren.

4. Plugin-Komponente entwickeln

1. Schritt 1: Anforderung und Schnittstelle der Komponente festlegen.
2. Schritt 2: Komponente mit wiederverwendbaren Eigenschaften implementieren.
3. Schritt 3: Einbindung in vorgesehene UI-Erweiterungspunkte konfigurieren.

5. Qualität und Barrierefreiheit

1. Schritt 1: Tastaturbedienung, Fokus, Beschriftungen und Kontraste prüfen.
2. Schritt 2: Leere Daten, lange Inhalte und technische Fehler behandeln.
3. Schritt 3: Unit- und Integrationsprüfungen für zentrale Zustände erstellen.

6. Build und Auslieferung

1. Schritt 1: Produktionsbuild und Konfigurationsübergabe vorbereiten.
2. Schritt 2: Container oder Plugin-Artefakt erstellen und lokal testen.
3. Schritt 3: Helm-Einbindung, Upgrade und Rücknahme der Anpassung prüfen.

Praxisübungen

• Umsetzung eines konsistenten Brandings ohne externe Verweise.
• Entwicklung einer Datensatz-Zusatzkomponente mit API-Zugriff.
• Test von Berechtigungs-, Lade- und Fehlerzuständen.
• Containerisierung und Bereitstellung in einer Schulungsinstanz.

Voraussetzungen

Gute Kenntnisse in TypeScript, React, HTML und CSS sowie Grundkenntnisse zu Magda APIs und Containern.