Seminar Kontent.ai – Custom Apps und Custom Elements

Standardfelder und Standardoberflächen decken viele redaktionelle Aufgaben ab. Spezifische Auswahlhilfen, externe Datenquellen, Fachprüfungen oder integrierte Werkzeuge erfordern jedoch kontrollierte Erweiterungen, die sich nahtlos in den redaktionellen Arbeitsablauf einfügen.

Das Seminar unterscheidet klar zwischen feldbezogenen Custom Elements und umfangreicheren Custom Apps. Jede Erweiterung wird als eigenständiges Produkt mit UX, Sicherheitsmodell, API-Vertrag, Teststrategie, Deployment und Betrieb behandelt.

Inhaltsübersicht

• Use Case und Erweiterungsgrenze bestimmen
• Custom Element und Custom App abgrenzen
• UX und Zustandsmodell entwerfen
• Lokale Entwicklungsumgebung vorbereiten
• Plattformkontext und SDK-Funktionen nutzen
• Externe APIs anbinden
• Identität und Berechtigungen absichern
• Datenformat und Versionierung gestalten
• Validierung und Fehlertoleranz implementieren
• Automatisierte Tests aufbauen
• Deployment und Konfiguration standardisieren
• Monitoring und Wartung organisieren
• Praxisübungen
• Methodik

Zielsetzung

Ziel ist eine sichere, wartbare und benutzerfreundliche Erweiterung, die einen klar abgegrenzten Geschäftsprozess unterstützt. Teilnehmende können den passenden Erweiterungstyp wählen, eine Integration implementieren und einen belastbaren Lebenszyklus organisieren.

Schrittweise Seminarinhalte

1. Schritt 1: Use Case und Erweiterungsgrenze bestimmen

   Redaktioneller Bedarf, Häufigkeit, Datenquelle, Schreibrechte, Latenz und Ausfallauswirkung werden analysiert. Standardfunktionen werden zuerst geprüft, damit nur tatsächlich notwendige Speziallogik entwickelt wird.

2. Schritt 2: Custom Element und Custom App abgrenzen

   Feldbezogene Dateneingabe, umfassende Arbeitsoberflächen und externe Fachanwendungen werden anhand einer Entscheidungsmatrix bewertet. Auswirkungen auf Navigation, Kontext, Berechtigungen und Wartung werden dokumentiert.

3. Schritt 3: UX und Zustandsmodell entwerfen

   Ladezustände, leere Ergebnisse, Validierungsfehler, Berechtigungsprobleme und externe Ausfälle werden als feste Zustände modelliert. Redaktionsfreundliche Texte, Tastaturbedienung und Barrierefreiheit werden von Beginn an berücksichtigt.

4. Schritt 4: Lokale Entwicklungsumgebung vorbereiten

   Projektstruktur, Konfiguration, Testdaten, sichere Geheimnisverwaltung und lokale Einbettung werden eingerichtet. Umgebungsabhängige Endpunkte und Feature-Schalter werden sauber getrennt.

5. Schritt 5: Plattformkontext und SDK-Funktionen nutzen

   Kontextinformationen, aktuelles Element, Sprache, Inhalt und Ereignisse werden kontrolliert gelesen. Änderungen werden validiert und nur über unterstützte Schnittstellen an die Plattform zurückgegeben.

6. Schritt 6: Externe APIs anbinden

   Authentifizierung, Timeouts, Pagination, Caching, Fehlerübersetzung und Datenmapping werden implementiert. Die Erweiterung verhindert, dass interne Geheimnisse oder nicht benötigte Daten in den Browser gelangen.

7. Schritt 7: Identität und Berechtigungen absichern

   Benutzerkontext, Backend-for-Frontend, Servicekonten und Token-Lebenszyklen werden verglichen. Zugriff wird auf minimale Funktionen und Datenbereiche begrenzt, während Auditierbarkeit erhalten bleibt.

8. Schritt 8: Datenformat und Versionierung gestalten

   Gespeicherte Werte erhalten ein stabiles Schema mit Versionskennzeichnung. Abwärtskompatibilität, Migration alter Werte und Verhalten bei entfernten externen Objekten werden geplant.

9. Schritt 9: Validierung und Fehlertoleranz implementieren

   Synchrone und asynchrone Prüfungen, Wiederholungen, Offline-Zustände und degradierter Betrieb werden erarbeitet. Fehler werden redaktionell verständlich dargestellt und technisch ausreichend protokolliert.

10. Schritt 10: Automatisierte Tests aufbauen

    Unit-Tests, Komponententests, Vertragsprüfungen und End-to-End-Szenarien decken Kernpfade und Fehlerfälle ab. Testdoubles simulieren Plattformkontext und externe APIs reproduzierbar.

11. Schritt 11: Deployment und Konfiguration standardisieren

    Build, Hosting, Content Security Policy, erlaubte Ursprünge, Umgebungsvariablen und Rollback werden in einen wiederholbaren Releaseprozess überführt. Staging und Produktion bleiben klar getrennt.

12. Schritt 12: Monitoring und Wartung organisieren

    Clientfehler, API-Latenz, Fehlerraten, Versionsstand und Nutzung werden überwacht. Ownership, Supportweg, Abkündigung und regelmäßige Sicherheitsupdates werden verbindlich dokumentiert.

Praxisübungen

• Einen Erweiterungs-Use-Case mit Entscheidungsmatrix bewerten
• Ein Custom Element mit externer Auswahl und strukturiertem Speicherformat entwickeln
• Eine kleine Custom App mit sicherem API-Zugriff und Fehlerzuständen erstellen
• Automatisierte Tests für Plattformkontext und externe Abhängigkeiten implementieren
• Deployment, Versionierung, Monitoring und Rollback dokumentieren

Methodik

Die Entwicklung erfolgt schrittweise von UX und Architektur bis zum produktionsfähigen Release. Kurze Theorieblöcke werden unmittelbar in Code, Tests, Sicherheitsprüfungen und Betriebsartefakte überführt.