Die Nitro-Integration macht Flyo zu einem vollwertigen Headless CMS. Zusätzlich zur Funktion als Content Hub kann mit dieser Integration eine oder mehrere Webseiten wie mit einem klassischen CMS administriert werden.
Wenn du neu in der Welt der Headless-Webentwicklung bist, kann das Konzept zunächst komplex erscheinen. Doch sobald du die zentralen Komponenten und deren Zusammenspiel kennst, wird schnell deutlich, wie einfach, flexibel und leistungsfähig dieser Ansatz ist.
Was ist ein Headless CMS?
Ein Headless Content Management System (CMS) trennt das Backend (Inhaltsverwaltung) vollständig vom Frontend (Präsentation). Statt Inhalte direkt zu rendern, stellt ein Headless System sie über APIs zur Verfügung. Dies ermöglicht dir, verschiedene Frontend-Technologien zu nutzen, um Inhalte auf Websites, mobilen Apps, in Newslettern, auf Social Media, Digital Signage oder anderen Plattformen darzustellen.
Die API als Schnittstelle zwischen Backend und Frontend
Flyo ist als Headless System um eine Content Delivery API herum aufgebaut. Die wichtigsten Endpunkte bei Flyo sind:
Config-Endpunkt
Funktion: Stellt Konfigurationsdaten bereit, die global für die Website gelten, wie Navigationselemente, Footer-Informationen oder andere allgemeine Einstellungen.
Nutzen: Ermöglicht eine zentrale Verwaltung von wiederkehrenden Elementen und Einstellungen, die auf jeder Seite benötigt werden.
Pages-Endpunkt
Funktion: Liefert die Struktur und den Aufbau der einzelnen Seiten.
Nutzen: Definiert, welche Komponenten auf welcher Seite angezeigt werden sollen und in welcher Reihenfolge. Dies ermöglicht eine dynamische Seitenzusammenstellung basierend auf den im Backend erstellten Inhalten.
Entities-Endpunkt
Funktion: Enthält die eigentlichen Inhalte oder Datenobjekte, wie Artikel, Produkte, Bilder oder Benutzerinformationen.
Nutzen: Stellt die spezifischen Daten bereit, die von den Komponenten benötigt werden, um Inhalte anzuzeigen.
Weitere Endpunkte
INFO
Einen umfassenden Überblick über alle Endpunkte, die für die Flyo Nitro Integration (Headless CMS) verfügbar sind, findest du unter dem folgenden Link: https://nitro-openapi.flyo.cloud/.\
In den weiteren Unterkapiteln gehen wir vertieft auf die wichtigsten Endpunkte ein, damit du dir ein umfassendes Verständnis aufbauen kannst. Zuerst widmen wir uns aber den weiteren Elementen der Nitro Integration:
Komponentenbasierter Seitenaufbau
Anstatt Seiten als monolithische und isolierte Einheiten zu betrachten, werden sie anhand wiederverwendbarer Komponenten aufgebaut. BEM und Atomic Konzept. Jede Komponente ist ein eigenständiges Modul mit spezifischer Funktionalität, zum Beispiel:
- Header
- Grid-Element mit Cards
- Bildergalerie
- Kontaktformular
Vorteile des komponentenbasierten Aufbaus
- Wiederverwendbarkeit: Komponenten können auf verschiedenen Seiten und Projekten wiederverwendet werden.
- Modularität: Änderungen an einer Komponente wirken sich automatisch auf alle Instanzen dieser Komponente aus.
- Effizienz: Beschleunigt den Entwicklungsprozess durch Verwendung bereits vorhandener Bausteine.
Frontend Framework
Nachdem wir uns mit dem Aufbau des Backends befasst haben, wenden wir uns dem Frontend zu. Um Daten auszugeben, benötigst du ein Frontend-Framework wie React, Vue.js oder Angular. Das Frontend Framework spielt eine entscheidende Rolle bei:
- Integration der Inhalte aus dem Backend: Das Framework ruft die API-Endpunkte auf und verarbeitet die erhaltenen Daten.
- Rendering der Komponenten: Basierend auf dem konfigurierten Seitenaufbau im Backend werden die entsprechenden Komponenten dynamisch gerendert.
Packages?
Das Zusammenspiel der Komponenten
Um ein gesamtheitliches Bild zu erhalten, schauen wir uns an, wie die die oben genannten Elemente zum Beispiel beim Aufruf einer Website zusammenarbeiten:
Initialer Datenabruf:
- Das Frontend (z.B. Website) ruft den Config-Endpunkt auf, um globale Einstellungen wie Navigation und Footer zu erhalten.
Seitenstruktur laden:
- Über den Pages-Endpunkt wird ermittelt, welche Komponenten auf der angewählten Seite angezeigt werden sollen.
Inhalte abrufen:
- Für jede Komponente, die spezifische Daten benötigt, werden Informationen vom Entities-Endpunkt angefordert.
Rendering:
- Das Frontend-Framework rendert die Seite, indem es die Komponenten mit den abgerufenen Daten füllt.