Seminar Squidex – Intensivseminar: APIs, Frontends und Automatisierung

Der fünftägige Entwicklungspfad bündelt die relevanten Fachseminare für API-Zugriff, Frontend-Integration, Automatisierung, Erweiterungen, Performance, Sicherheit und Qualitätssicherung. Statt isolierter Übungen entsteht eine vollständige Content-Anwendung mit Integrations- und Betriebsanforderungen.

Jeder Seminartag liefert ein überprüfbares Teilprodukt. Datenvertrag, Client, Next.js-Frontend, Ereignisverarbeitung, Custom Editor, Tests und Deployment werden zu einer konsistenten Referenzlösung verbunden.

Zielgruppe

Erfahrene Entwickler, Integrationsarchitekten und technische Teams, die Squidex von der API bis zu Frontend, Erweiterung und Automatisierung produktiv einsetzen

Voraussetzungen

Sichere Kenntnisse in HTTP, JSON, JavaScript oder TypeScript und moderner Webentwicklung; Grundkenntnisse in Authentifizierung, Tests und CI/CD

Seminarziele

• Squidex-Content-Modelle in stabile API- und Frontend-Verträge überführen.
• REST, GraphQL, Suche, Referenzen und Assets resilient integrieren.
• Ein mehrsprachiges Next.js-Frontend mit Preview und Revalidierung entwickeln.
• Regeln, Flows, Webhooks, Skripte und UI-Erweiterungen sicher einsetzen.
• Performance, Security, Contract-Tests und CI/CD in eine produktionsfähige Lösung integrieren.

Inhaltsübersicht

1. Zielgruppe und Voraussetzungen
2. Seminarziele
3. Tag 1: Plattform, Content-Vertrag und API-Sicherheit
4. Tag 2: REST, GraphQL, Suche und robuste Datenzugriffe
5. Tag 3: Next.js-Frontend, Preview und Revalidierung
6. Tag 4: Automatisierung und Redaktionsoberfläche erweitern
7. Tag 5: Performance, Qualität, CI/CD und Gesamtprojekt
8. Praxisprojekt und Abnahme

1. Tag 1: Plattform, Content-Vertrag und API-Sicherheit

Dieser Themenblock verbindet fachliche Entscheidung, konkrete Konfiguration und überprüfbare Abnahme. Die Schritte werden an einer durchgängigen Beispiel-App umgesetzt und mit geeigneten Positiv- und Negativfällen kontrolliert.

Schrittweises Vorgehen

1. Zielarchitektur, Rollen, App-Struktur und Schutzbedarfe festlegen.
2. Repräsentatives Schema mit Komponenten, Referenzen und Lokalisierung prüfen.
3. Technische Clients mit minimalen Berechtigungen anlegen.
4. REST-Basisclient mit Tokenbeschaffung und Fehlerabbildung implementieren.
5. API-Verträge und Akzeptanztests für zentrale Anwendungsfälle definieren.
6. Ersten Integrationsstand als versioniertes Artefakt abnehmen.

Prüfpunkte

• Die Konfiguration erfüllt den beschriebenen fachlichen Zweck ohne unnötige Sonderfälle.
• Berechtigungen, Fehlerzustände und Auswirkungen auf abhängige Komponenten sind geprüft.
• Ergebnis, offene Punkte und Wiederholungsweg sind nachvollziehbar dokumentiert.

2. Tag 2: REST, GraphQL, Suche und robuste Datenzugriffe

Der Abschnitt wird als vollständiger Arbeitsablauf bearbeitet: Ausgangslage erfassen, Zielzustand festlegen, Konfiguration umsetzen, Verhalten testen und die betriebliche beziehungsweise redaktionelle Übergabe dokumentieren.

Schrittweises Vorgehen

1. Typisierte Lese- und Schreibzugriffe implementieren.
2. Filter, Sortierung, Volltextsuche und Pagination kombinieren.
3. GraphQL-Abfragen für präzise, verschachtelte Ausgaben entwickeln.
4. Referenzen, Assets und Sprachfallbacks kontrolliert auflösen.
5. Caching, ETags, Timeouts und Wiederholungen ergänzen.
6. Contract- und Negativtests gegen die Schulungsinstanz ausführen.

Prüfpunkte

• Die Konfiguration erfüllt den beschriebenen fachlichen Zweck ohne unnötige Sonderfälle.
• Berechtigungen, Fehlerzustände und Auswirkungen auf abhängige Komponenten sind geprüft.
• Ergebnis, offene Punkte und Wiederholungsweg sind nachvollziehbar dokumentiert.

3. Tag 3: Next.js-Frontend, Preview und Revalidierung

Die Inhalte werden nicht isoliert demonstriert. Jede Entscheidung wird anhand von Auswirkungen auf Redaktion, API, Sicherheit, Betrieb und spätere Änderungen bewertet und anschließend praktisch validiert.

Schrittweises Vorgehen

1. Content in TypeScript-View-Modelle und Komponentenrenderer überführen.
2. Mehrsprachige Routen, Referenzen und responsive Assets integrieren.
3. Renderingstrategie pro Inhaltstyp auswählen und implementieren.
4. Geschützte Preview für Entwürfe einrichten.
5. Ereignis- oder zeitbasierte Revalidierung umsetzen.
6. Barrierefreiheit, Fehlerzustände und Web-Performance prüfen.

Prüfpunkte

• Die Konfiguration erfüllt den beschriebenen fachlichen Zweck ohne unnötige Sonderfälle.
• Berechtigungen, Fehlerzustände und Auswirkungen auf abhängige Komponenten sind geprüft.
• Ergebnis, offene Punkte und Wiederholungsweg sind nachvollziehbar dokumentiert.

4. Tag 4: Automatisierung und Redaktionsoberfläche erweitern

Im Mittelpunkt steht ein reproduzierbares Vorgehen. Konfiguration, Testdaten, Prüfschritte und Abnahmekriterien werden so festgehalten, dass der Ablauf in einer eigenen Umgebung wiederholt werden kann.

Schrittweises Vorgehen

1. Content-Ereignisse in Regeln und einen mehrstufigen Flow übersetzen.
2. Idempotenten Webhook-Empfänger mit Korrelation und Fehlerpfad entwickeln.
3. Kleine Transformations- beziehungsweise Validierungslogik per Skript ergänzen.
4. Custom Editor oder Sidebar für einen fachlichen Prüfschritt umsetzen.
5. Secrets, Ursprünge und Backend-for-Frontend-Grenzen absichern.
6. Fehler, Mehrfachzustellung und nicht erreichbare Zielsysteme testen.

Prüfpunkte

• Die Konfiguration erfüllt den beschriebenen fachlichen Zweck ohne unnötige Sonderfälle.
• Berechtigungen, Fehlerzustände und Auswirkungen auf abhängige Komponenten sind geprüft.
• Ergebnis, offene Punkte und Wiederholungsweg sind nachvollziehbar dokumentiert.

5. Tag 5: Performance, Qualität, CI/CD und Gesamtprojekt

Dieser Themenblock verbindet fachliche Entscheidung, konkrete Konfiguration und überprüfbare Abnahme. Die Schritte werden an einer durchgängigen Beispiel-App umgesetzt und mit geeigneten Positiv- und Negativfällen kontrolliert.

Schrittweises Vorgehen

1. Abfragevolumen, Cache-Schlüssel und Asset-Ausgabe messen und optimieren.
2. Unit-, Komponenten-, Contract- und End-to-End-Tests bündeln.
3. Security- und Berechtigungsprüfungen automatisieren.
4. Build, Konfiguration und Secrets in einer CI/CD-Pipeline trennen.
5. Staging-Deployment mit Smoke-Test und Rollback durchführen.
6. Gesamtlösung anhand fachlicher, technischer und betrieblicher Kriterien abnehmen.

Prüfpunkte

• Die Konfiguration erfüllt den beschriebenen fachlichen Zweck ohne unnötige Sonderfälle.
• Berechtigungen, Fehlerzustände und Auswirkungen auf abhängige Komponenten sind geprüft.
• Ergebnis, offene Punkte und Wiederholungsweg sind nachvollziehbar dokumentiert.

Praxisprojekt und Abnahme

Eine produktionsnahe, mehrsprachige Content-Anwendung verbindet Squidex, typisierte APIs, Next.js, Automatisierung, eine UI-Erweiterung und eine abgesicherte Delivery-Pipeline.

Arbeitsschritte

1. Architektur, Content-Vertrag und Sicherheitsmodell festlegen.
2. API-Client mit REST, GraphQL, Suche, Referenzen und Caching implementieren.
3. Next.js-Frontend mit Preview und Revalidierung entwickeln.
4. Automatisierung und Redaktionsoberfläche erweitern.
5. Tests, Performanceoptimierung, CI/CD und Betriebsübergabe abschließen.

Abnahmekriterien

• Der fachliche Anwendungsfall ist mit repräsentativen Daten vollständig durchgespielt.
• Fehler-, Berechtigungs- und Wiederanlaufszenarien sind kontrolliert geprüft.
• Konfiguration, Tests und Verantwortlichkeiten sind so dokumentiert, dass der Transfer in eine eigene Umgebung möglich ist.