Seminar Contentful – App Framework und Custom Apps

Standardfunktionen decken viele Redaktionsprozesse ab; besondere Fachlogik, externe Systeme und spezifische Bedienoberflächen benötigen jedoch eine kontrollierte Erweiterung. Das Seminar entwickelt eine Custom App von der App Definition über mehrere App Locations bis zur sicheren Bereitstellung.

Frontend- und Backend-Anteile werden getrennt betrachtet. Neben der App SDK-Kommunikation gehören Konfiguration, Management-API-Zugriff, Ereignisse, Signaturprüfung, Fehlertoleranz, Tests und Versionierung zum vollständigen Lebenszyklus.

Inhaltsübersicht

• Zielsetzung
• Zielgruppe
• Voraussetzungen
• Seminarinhalte
• Praxisübungen
• Methodik

Zielsetzung

• Anwendungsfälle für Marketplace-Apps, Custom Apps und alternative Integrationen unterscheiden
• App Definitions, Installationen, Parameter und App Locations konfigurieren
• Redaktionelle Oberflächen mit App SDK und Management API entwickeln
• Externe Daten und Fachlogik sicher in den Editor-Kontext integrieren
• Backend-Funktionen, Ereignisse und verifizierte Requests umsetzen
• Custom Apps testen, versionieren, bereitstellen und betreiben

Zielgruppe

JavaScript- und TypeScript-Entwickler, Frontend-Entwickler, Integrationsentwickler, technische Consultants und Plattformteams.

Voraussetzungen

Sichere TypeScript- oder JavaScript-Kenntnisse, React-Grundlagen, HTTP und Git. Contentful-Bedienung und Grundkenntnisse der Content Management API werden vorausgesetzt.

Seminarinhalte

1. Schritt 1: Erweiterungsfall abgrenzen

   Fachliches Ziel, Nutzergruppe, betroffene Inhalte und externe Abhängigkeiten werden beschrieben. Es wird entschieden, ob App, Webhook, Function oder reine Frontend-Integration die sauberste Lösung ist.

2. Schritt 2: Projekt und App Definition anlegen

   App-Projekt, lokale Entwicklung, Definition, URL und organisatorische Eigentümerschaft werden eingerichtet. Entwicklungs- und Produktionskonfiguration bleiben getrennt.

3. Schritt 3: Installation und Parameter modellieren

   Organisations-, Installations- und Laufzeitparameter werden nach Sensibilität und Änderungsbedarf getrennt. Validierung verhindert unvollständige Installationen.

4. Schritt 4: App Locations verstehen

   Field, Sidebar, Entry Editor, Page, Dialog und Konfigurationsansichten werden nach ihrem Bedienzweck ausgewählt. Eine App wird nicht unnötig an zu vielen Stellen eingebettet.

5. Schritt 5: App SDK initialisieren

   Kontext, Feldwerte, Eintragszustand, Locale und Navigation werden aus der Webanwendung übernommen. Ladezustände und fehlende Berechtigungen werden sichtbar behandelt.

6. Schritt 6: Feld- und Sidebar-Komponente entwickeln

   Eine React-Komponente liest und ändert strukturierte Werte, reagiert auf externe Änderungen und passt ihre Höhe an. Fachliche Validierung bleibt nachvollziehbar.

7. Schritt 7: Management API kontrolliert nutzen

   Einträge, Assets und Metadaten werden über den App-Kontext geladen und geändert. Versionen, Rechte und Environment-Bezug werden berücksichtigt.

8. Schritt 8: Externe Referenzen integrieren

   Datensätze eines Drittsystems werden gesucht, ausgewählt und als Referenz gespeichert. Anzeige, Aktualität, Fehlerzustand und fehlender Zugriff werden sauber getrennt.

9. Schritt 9: Backend-App und Ereignisse aufbauen

   Serverseitige Verarbeitung wird für vertrauliche Zugriffe und ereignisgesteuerte Aufgaben eingesetzt. Requests werden verifiziert und Eingaben strikt validiert.

10. Schritt 10: Sicherheit und Datenschutz prüfen

    Secrets, Ursprünge, Token, Protokollierung, Datenminimierung und Berechtigungen werden in einem Bedrohungsmodell bewertet. Sensible Daten gelangen nicht in ungeschützte Frontend-Konfiguration.

11. Schritt 11: Tests und lokale Diagnose ergänzen

    Komponenten-, Integrations- und Berechtigungstests decken typische und negative Fälle ab. Kontextinformationen und Fehlergrenzen erleichtern die Diagnose im Editor.

12. Schritt 12: Deployment und Versionierung organisieren

    Build, Hosting, App-Definition, Installationsparameter und Rollout werden versioniert. Abwärtskompatibilität und Rückfall auf eine vorherige Version werden eingeplant.

13. Schritt 13: Abschluss-App abnehmen

    Die App wird anhand von Nutzerablauf, Datenkonsistenz, Berechtigung, Fehlerfall und Betriebscheckliste geprüft. Offene Risiken werden als Backlog festgehalten.

Praxisübungen

• Custom App mit lokaler Entwicklung und App Definition initialisieren
• Feld-Editor mit Validierung und synchroner Aktualisierung entwickeln
• Sidebar-Ansicht mit Eintragsmetadaten und externer Suche ergänzen
• Konfigurationsscreen mit geprüften Installationsparametern erstellen
• Verifizierten Backend-Request mit Fehlerbehandlung umsetzen
• Rollout- und Rückfallcheckliste für die App formulieren

Methodik

Die Entwicklung erfolgt in einem fortlaufenden Laborprojekt. Nach jedem Schritt werden Bedienung, Datenzustand, Berechtigung und Fehlerfall geprüft; technische Entscheidungen werden in einer kompakten Architekturakte festgehalten.