Seminar Hygraph – App Framework und individuelle Studio-Erweiterungen

Das App Framework erweitert Hygraph Studio um eigene Feldoberflächen, Seitenansichten, Sidebar-Elemente und anwendungsspezifische Aktionen. Das Seminar behandelt die vollständige Entwicklung einer produktionsfähigen Erweiterung von der Anforderungsanalyse über Registrierung und Berechtigungen bis zu Betrieb und Versionspflege.

Im Mittelpunkt steht nicht nur die Darstellung einer eigenen Oberfläche. Behandelt werden auch Datenverträge, App-Tokens, sichere API-Zugriffe, Zustandsmanagement, Fehlerbehandlung, Installationskonzepte und die kontrollierte Auslieferung an mehrere Projekte oder Umgebungen.

Inhaltsübersicht

• Fachliche Einordnung und Lernziele
• Zielgruppe und Voraussetzungen
• Modul 1: Erweiterungsarchitektur und Anwendungsfälle
• Modul 2: Registrierung, Berechtigungen und App-Tokens
• Modul 3: Eigene Feldelemente entwickeln
• Modul 4: Sidebar- und Seitenelemente umsetzen
• Modul 5: API-Integration und konsistente Datenänderungen
• Modul 6: Tests, Bereitstellung und Lebenszyklus
• Praxisprojekt
• Didaktik und Arbeitsweise

Seminarziele

• Erweiterungsszenarien fachlich abgrenzen und geeignete App-Elemente auswählen.
• Apps mit klaren Berechtigungen, stabilen Datenverträgen und sicherem Token-Einsatz registrieren.
• Eigene Feld-, Sidebar- und Seitenelemente mit dem App SDK implementieren.
• Content API und Management-Funktionen kontrolliert aus einer Erweiterung ansprechen.
• Tests, Deployment, Versionierung und Betriebsüberwachung für Studio-Erweiterungen organisieren.

Zielgruppe

Erfahrene Frontend- und Full-Stack-Entwickler, technische Produktverantwortliche, Solution Architects und Teams für interne Plattformwerkzeuge.

Voraussetzungen

Sichere Kenntnisse in JavaScript oder TypeScript, React-Grundlagen, Erfahrung mit GraphQL, Authentifizierung und moderner Webentwicklung sowie ein vorhandenes Verständnis der Hygraph-Projektstruktur.

Modul 1: Erweiterungsarchitektur und Anwendungsfälle

Zu Beginn werden redaktionelle Probleme, technische Integrationsanforderungen und mögliche Erweiterungspunkte voneinander getrennt. Daraus entsteht eine belastbare Entscheidung, ob ein Feldelement, ein Sidebar-Element, eine eigene Seite oder eine externe Automatisierung den geringsten Kopplungsgrad erzeugt.

Schritt-für-Schritt-Praxis

1. Anwendungsfälle aus Redaktion, Qualitätssicherung und Integration erfassen.
2. Benötigte Studio-Kontexte, Datenzugriffe und Benutzeraktionen markieren.
3. Erweiterungstyp und Sicherheitsgrenze für jeden Anwendungsfall festlegen.
4. Ein Architekturdiagramm mit Studio, App, APIs und angebundenen Diensten erstellen.

Modul 2: Registrierung, Berechtigungen und App-Tokens

Eine Erweiterung benötigt eine nachvollziehbare Registrierung, definierte URLs und ausschließlich die erforderlichen Rechte. Der sichere Austausch von Setup-Code und App-Token wird ebenso behandelt wie die Trennung von Entwicklungs-, Test- und Produktionskonfiguration.

Schritt-für-Schritt-Praxis

1. App-Metadaten, Installationsparameter und Elemente definieren.
2. Berechtigungen nach dem Minimalprinzip festlegen und dokumentieren.
3. Token-Austausch serverseitig umsetzen und Geheimnisse aus dem Browsercode entfernen.
4. Installation in einer Testumgebung durchführen und die tatsächlich gewährten Rechte prüfen.

Modul 3: Eigene Feldelemente entwickeln

Feldelemente verbinden eine individuelle Eingabeoberfläche mit einem vorhandenen Hygraph-Feldtyp. Behandelt werden Initialisierung, lokaler Zustand, Validierung, Listenwerte, Tabellenanzeige, Ladezustände und die sichere Übergabe von Änderungen an das Studio-Formular.

Schritt-für-Schritt-Praxis

1. Ein passendes Zielfeld und dessen Speicherformat bestimmen.
2. Feldelement mit Wrapper und Feld-Hook initialisieren.
3. Eingaben validieren, normalisieren und kontrolliert an das Formular zurückgeben.
4. Mehrfachwerte, leere Werte, schreibgeschützte Zustände und Fehlerfälle testen.

Modul 4: Sidebar- und Seitenelemente umsetzen

Sidebar-Elemente unterstützen kontextbezogene Prüfungen oder Aktionen direkt am Inhaltseintrag; Seitenelemente bieten Raum für umfangreichere Werkzeuge. Der Schwerpunkt liegt auf klarer Benutzerführung, reproduzierbaren Aktionen und einer Oberfläche, die auch bei unvollständigen Daten stabil bleibt.

Schritt-für-Schritt-Praxis

1. Benötigte Kontextdaten und erlaubte Aktionen für das Element festlegen.
2. Sidebar-Element für eine Qualitätsprüfung implementieren.
3. Eigene Seite für projektweite Auswertungen oder Stapelaktionen ergänzen.
4. Navigation, Ladezustände, Fehlermeldungen und Zugriffsverbote systematisch prüfen.

Modul 5: API-Integration und konsistente Datenänderungen

Produktive Apps lesen häufig Inhalte, stoßen Mutationen an oder benötigen Projektinformationen. Dafür werden API-Aufgaben getrennt, Operationen idempotent gestaltet und Konflikte zwischen Benutzerformular, Hintergrundaktion und bereits veröffentlichten Daten kontrolliert.

Schritt-für-Schritt-Praxis

1. Lese-, Inhaltsänderungs- und Konfigurationsoperationen getrennt modellieren.
2. Serverseitige API-Schicht mit typisierten Ein- und Ausgaben aufbauen.
3. Wiederholbare Mutationen und Konfliktprüfungen implementieren.
4. Fehlercodes, Teilfehler und Berechtigungsfehler in verständliche Studio-Meldungen übersetzen.

Modul 6: Tests, Bereitstellung und Lebenszyklus

Eine Studio-Erweiterung wird wie eine eigenständige Anwendung betrieben. Behandelt werden Komponenten- und Vertragstests, sichere Konfiguration, Freigabestufen, rückwärtskompatible Änderungen, Telemetrie und ein Rückbaupfad für fehlerhafte Versionen.

Schritt-für-Schritt-Praxis

1. Testfälle für Rendering, Hooks, API-Verträge und Berechtigungen definieren.
2. Build und Konfiguration für Entwicklungs-, Test- und Produktionsbetrieb trennen.
3. Versionierte Freigabe mit Installations- und Upgrade-Prüfung durchführen.
4. Monitoring, Fehleranalyse und Rückkehr zur vorherigen Version vorbereiten.

Praxisprojekt

Als durchgängiges Praxisprojekt entsteht eine redaktionelle Qualitäts-App mit eigenem Feldelement, kontextbezogener Sidebar-Prüfung und projektweiter Übersichtsseite. Die Lösung wird registriert, installiert, mit Minimalrechten betrieben, automatisiert getestet und in einer zweiten Umgebung aktualisiert.

Didaktik und Arbeitsweise

Kurze Fachimpulse werden unmittelbar durch Demonstrationen, strukturierte Arbeitsschritte, praktische Übungen und kontrollierte Fehlerfälle vertieft. Jede Übung verwendet definierte Ausgangswerte, Prüfpunkte und Dokumentationsanforderungen. Dadurch entstehen wiederholbare Vorgehensweisen, die in Projekt-, Redaktions- oder Betriebsstandards überführt werden können.