Kickstart Guide Frontend Builder

Was ist Flyo?

Flyo ist ein Headless Content Hub und das Schweitzer Sackmesser für effizientes Content Management. Mit Flyo können alle Inhalte an einem Ort verwaltet und auf verschiedenen Kanälen wie Web, Newsletter, Digital Signage, Social Media, etc. publiziert werden. Flyo stellt dafür besonders nutzerfreundliche Integrationen zur Verfügung, die eine Anbindung an beliebte Tools wie Webflow, Shopify, Mailjet und so weiter zur Verfügung. Darüber hinaus, und dies ist vor allem für Entwickler spannend, bietet Flyo die Funktionalitäten eines Headless CMS. Mit dem integrierten Frontend-Builder können eine oder mehrere Webseite mithilfe eines "Site-Trees" oder einer Navigation aufgebaut werden, wobei Inhalte mit einer Mapping-Funktion dynamisch aus dem Content Hub bezogen oder durch Verwendung statischer Blöcke hinzugefügt werden können.

Was ist ein Headless Content Hub?

Ein Headless Content Hub bietet dieselben Grundfunktionen wie ein Headless CMS. Ein Headless CMS ist ein reines Backend-CMS, das aus einer strukturierten Inhaltsverwaltung, einer Oberfläche fürs Content Management sowie einer API-Schnittstelle für das Abrufen und Nutzen der Inhalte besteht. Das Frontend wird mittels einem Framework (z.B.  Astro, Laravel, Vue, etc.) bereitgestellt und mit dem Headless CMS verbunden.

Headless CMS sind oft sehr stark auf Developer ausgerichtet, dementsprechend kompliziert ist die Anwendung für Content Verantwortliche. Als Headless Content Hub geht Flyo einen Schritt weiter und bietet neben einer benutzerfreundlichen Oberfläche auch viele Funktionen, um das Content Management möglichst einfach zu gestalten und zu automatisieren (z.B. Trigger basierte Ausspielung von Inhalten basierend auf Wetterdaten oder Wochentagen und Uhrzeiten).

Im Unterschied zu anderen Headless CMS bietet Flyo nicht nur die Möglichkeit, Inhalte via API-Schnittstelle zu beziehen, sondern bietet auch vorkonfigurierte Integrationen für beliebte Tools wie Webflow, Shopify, Mailjet und weiteren, um Inhalte zu publizieren.

Im Folgenden konzentrieren wir uns aber auf den Frontend-Builder von Flyo, der den Funktionalitäten von Headless CMS gleichkommt. Mit Flyo können sich Entwickler voll und ganz auf die Frontend-Entwicklung fokussieren und müssen keine komplette Backend-Infrastruktur betreuen.

So können Entwickler grösstmöglichen Mehrwert für ihre Kunden schaffen. Mit Flyo wird die Verwaltung von Inhalt von der Präsentationsschicht entkoppelt, was bedeutet, dass Entwickler jede beliebige Frontend-Technologie verwenden können.

Essentials

• Account: Ein Benutzer-Account bietet Zugang zu Flyo. Die verfügbaren Funktionen hängen von der Benutzerrolle und Berechtigungen ab.
• Organisation: Eine Organisation (Team) ist eine in sich abgeschlossene Instanz für Inhalte (Content Hub-Instanz). Jedes Team bzw. jede Organisation hat seine eigenen Entitäten, Content Pools, Integrationen, Dateien und Konfigurationen (Workflow, Benutzer, Benutzerrollen, etc.).
• Entitäten: Entitäten (Inhaltstypen) das Gerüst für alle Inhalte in Flyo. Beispiele für Entitäten sind z.B. Produkte, Veranstaltungen, Blogbeiträge, etc. Eine Entität besteht aus Feldern und können mehrsprachig sein. Es stehen eine Vielzahl Feldtypen zur Verfügung.
• Content Pool: Content Pools sind Gefässe (analog Ordner für Dateien) für Inhalte im Content Hub. Mit Content Pools können Inhalte nach definierten Regeln automatisiert oder kuratiert von Hand in "Töpfen" organisiert werden.
• Integrationen: Neben dem Frontend Builder bietet Flyo für Newsletter, Social Media, Digital Signage und weitere Kanäle fertige Integrationen, die mit wenig Aufwand konfiguriert werden können.

Hauptkonzepte für Frontend-Projekte mit dem Frontend-Builder von Flyo

Die Schlüsselkonzepte hinter Flyo sind von den Methoden BEM und Atomic Design inspiriert. BEM (Block Element Modifier) und Atomic Design sind Methoden, die wiederverwendbare Komponenten ( Blöcke (in Flyo Inhaltselemente genannt) und gemeinsamen Code nutzen, um die Entwicklung von Frontends zu beschleunigen und die Konsistenz im visuellen Erscheinungsbild zu gewährleisten.

Dieses Konzept vereinfacht in Flyo die Zusammenarbeit von Designern, Entwicklern und den Content Editoren. Sie sind nun in der Lage, Komponenten unabhängig voneinander zu entwerfen, zu entwickeln und in Flyo zu nutzen.

Der Frontend-Builder von Flyo basiert auf drei Säulen, die bei der Entwicklung von Frontends eine zentrale Rolle spielen:

Config

In der Config-Komponente werden einerseits "globale Inhalte" definiert. Dies sind Variablen, die im Layout verwendet, aber in der Flyo Oberfläche konfiguriert werden können. Beispiel: Standorte eines Unternehmens, die im Footer ausgegeben werden. Zweitens werden über die Config-Komponente die Seitencontainer definiert. Sie dienen der Definition der einzelnen Navigationsbereiche des Frontends (z.B. Header, Footer, etc.). Zuletzt können auch Seiteneigenschaften definiert werden, die anschliessend im Seiten-Editor ausgewählt werden können. Beispiel: Definition von unterschiedlichen Farbschemen für die verschiedenen Seiten.

Seiten (Pages)

Seiten werden für das Frontend anhand des eindeutigen Pfades (Slug) zur Verfügung gestellt und umfassen alle Inhalte und Optionen, die für die jeweilige Seite benötigt werden. Dazu gehören die verwendeten Inhaltselemente (auch Komponenten, Abschnitte oder Blöcke genannt), sowie die Meta-Informationen wie bspw. "og-description", etc.

Entitäten-Details

Entitäten, also Inhalte bzw. die Entitäts-Details (Felder) aus dem Content Hub, werden anhand des eindeutigen Pfades (Slug) zur Verfügung gestellt. Voraussetzung ist, dass in der Konfiguration der Integration in Flyo für die entsprechende Entität die Detailseite konfiguriert ist (siehe weiter unten).

Requirements & Installation

Flyo wird als SaaS entwickelt, weshalb kein Installationsprozess nötig ist. Alles, was nötig ist, ist eine aktive Flyo-Organisation und ein Benutzerkonto.

Das bedeutet, dass wir allen Nutzern von Flyo die Arbeit abnehmen, wenn es um Updates und Infrastruktur geht. Updates werden automatisch installiert, und Entwickler müssen sich keine Gedanken über die Betriebszeit oder nicht funktionierende Updates machen, wie es bei älteren oder On-Premise-Systemen oft der Fall ist.

Transparenz bezüglich Weiterentwicklung, Bugfixing und Uptime sind uns sehr wichtig. Finde mehr heraus, in dem du Flyo Status oder unseren Changelog besuchst.

Ein neues Frontend-Projekt starten

Erste Schritte

tbd

Übersicht über die Integration erlangen

Zugriff auf die API

Flyo ist als Headless Content Hub um eine Content Delivery API herum aufgebaut. Der folgende Link bietet einen umfassenden Überblick über alle Endpunkte, die für den Flyo Frontend-Builder verfügbar sind: https://nitro-openapi.flyo.cloud/

Authentifizierungs-Token: Um auf Inhalte aus Flyo zugriefen zu können, wird ein Token benötigt. Dieser kann in der Integration unter Schritt 4 "Webseite" > "Authentifizierung" aufgerufen werden. Es gibt zwei Typen von Token: Werden Inhalte in der Flyo-Oberfläche (z.B. im Seiten-Editor) geändert, ohne dass der Benutzer auf speichern klickt, sind diese Änderungen für den Development Token verfügbar. Der Production Token verwendet nur Inhalte, die durch Speichern gesichert wurden. Dadurch ist eine Live-Vorschau während der Dateneingabe möglich.

Let's talk about Code

Noch nicht verfügbar! Hier findest du eine Übersicht über Frameworks inkl. Schritt für Schritt-Anleitung, die du mit Flyo verwenden kannst.

Die Frontend-Builder Integration in der Übersicht

Inhalte definieren, die für das Frontend-Projekt zur Verfügung stehen sollen

In Flyo kann für jede Integration (und damit auch für jedes Frontend-Projekt) individuell definiert werden, welche Inhalte aus einer Flyo-Organisation zur Verfügung stehen sollen. Die Auswahl der Inhalt erfolgt via Content Pools. Die zur Verfügung stehenden Inhalte resp. Content Pools können beim erstmaligen Setup der Integration oder aber jederzeit via “Bearbeiten” auf der Übersichtsseite der Integration angepasst werden:

Setup & Preview-URLs

• 1 - Domain: depreciated (wird entfernt)
• 2 - Slug: depreciated (wird entfernt)
• 3 - Webseite ist online: depreciated (wird entfernt)
• 4 - Vorproduktionsumgebung: Diese URLs werden verwendet, um eine Inhalts-Vorschau im Seiten-Editor zu generieren und ist abhängig vom eingesetzten Framework. Die Vorschau-Applikation muss den Development-Token verwenden.

Konfiguration - Übersicht

• 1 - Inhaltselemente: Auch Komponenten, Blöcke oder Module genannt, können mit definierten Inhaltselementen die einzelnen CMS-Seiten zu zusammengestellt werden.
• 2 - Globale Inhalte (Config): Möglichkeit zur Definition von Variablen, die im Layout verwendet aber in Flyo konfiguriert werden können. Beispiel: Standorte eines Unternehmen, die im Footer ausgegeben werden.
• 3 - Seitencontainer (Config): Sie dienen der Definition der einzelnen Navigationsbereiche des Headless-Projektes (z.B. Navigation, Footer, etc.).
• 4 - Seiteneigenschaften (Config): Eigenschaften für Seiten, die im Seiten-Editor ausgewählt werden können. Beispiel: Spezifisches Farbschema für eine Content-Seite
• 5 - Detailseiten: Hier wird festgelegt, ob im Headless-Projekte verwendete Entitäten (z.B. Stories) eine Detailseite haben und welche Felder dafür über die API zur Verfügung gestellt werden. (Siehe auch Konzept “Unterschied von CMS-Seiten und Detailseiten”).
• 6 - Content Pool Indexierung: Möglichkeit zur zusätzlichen Indexierung von Inhalten (Content Pools), die nicht in Inhaltselementen verwendet, aber trotzdem im Frontend des Headless-Projekt zur Verfügung stehen sollen.

Konfiguration - Inhaltselemente

Grundsätzlich können zwei Kategorien von Inhaltselementen unterschieden werden in Flyo. Die Unterscheidung ergibt sich aus der Art und Weise, wie Inhalte aus Flyo im Frontend verwendet werden sollen:

• 1 - Statisches Inhaltselement (Beispiel: Person): Eingabe von Inhalten im Seiten-Editor mittels statischen Blöcken
• 2 - Iterierendes Inhaltselement (Beispiel: Teaser): Verknüpfen von Inhalten aus Flyo, die im Frontend dynamisch iteriert werden

Allgemeine Konfiguration eines Inhaltselements

• 1 - Titel: Arbeitshilfe für den Content Editor zur Wiedererkennung des Inhaltselements
• 2 - Technischer Identifier: Zur Referenzierung auf das Inhaltselement (snake_case)
• 3 - Komponenten Identifier: Zur Referenzierung auf das Inhaltselement (CamelCase)
• 4 - Hilfetext:Arbeitshilfe für den Content Editor zur Wiedererkennung des Inhaltselements
• 5 - Farbe:Arbeitshilfe für den Content Editor zur Wiedererkennung des Inhaltselements
• 6 - Icon:Arbeitshilfe für den Content Editor zur Wiedererkennung des Inhaltselements
• 7 - Verschachtelung: Blöcke mit Verschachtelung erlauben die Nutzung weiterer Inhaltselemente innerhalb des entsprechenden Elements.

Um zu verstehen, wie Inhalte für das Frontend via API-Schnittstelle abgerufen werden können, betrachten wir das Konzept “Datenfluss bei Inhaltselementen” in Flyo anhand der obigen Beispiele (statisch & dynamisch):

Erstes Beispiel: Statisches Inhaltselement

Im ersten Beispiel schauen wir uns die Konfiguration für Seitenelemente an, für die Inhalte (in diesem Fall ”Personen” im Seiten-Editor durch den Administrator eingegeben werden können (Statische Blöcke).

Auf Ebene Inhaltselement werden die Felder definiert, die später im Seiten-Editor mit Inhalt befüllt werden können. Es stehen unterschiedliche Feldtypen (Text, Bild, etc.) zur Verfügung, Felder können als Pflichtfeld markiert werden, etc.:

Ansicht im Seiten-Editor: Die für das Inhaltselement konfigurierten Felder werden angezeigt und können mit Inhalten befüllt werden:

So sieht das JSON (Ausschnitt) der obigen Konfiguration aus:

{
              "uid": "fa605219-04e9-4ac1-a892-d85c52d5cd71",
              "items": [],
              "content": {
                "image": {
                  "source": "https://storage.flyo.cloud/flavia-barbato_ac429ef4.jpg",
                  "caption": "",
                  "copyright": ""
                },
                "name": "Flavia Barbato",
                "position": "Verantwortliche",
                "area": "Frontdesk",
                "email": "f.barbato@aarau-standortfoerderung.ch",
                "_empty": false
              },
              "config": {
                "_empty": true
              },
              "slots": {
                "_empty": true
              },
              "identifier": "person",
              "component": "Person"
            },

Zweites Beispiel: Iterierendes Inhaltselement

Im zweiten Beispiel schauen wir uns an, wie ein iteriertendes Seitenelement konfiguriert und anschliessend im Seiten-Editor mit einem Content Pool verknüpft werden kann. Im Inhaltselement definieren wir die Felder, die im Seiten-Editor zur Verfügung stehen sollen (hier: Titel, Teaser, Bild):

Ansicht im Seiten-Editor: Im Seiten-Editor erkennen wir nun wieder die Felder, die wir im Inhaltselement definiert haben. Im Gegensatz zum ersten Beispiel geben wir nun aber keine Inhalte selber ein, sondern verbinden das Inhaltselement mit einem Content Pool. Die Felder des Inhaltselements mappen wir mit Feldern aus den Inhalten im Content Pool (in diesem Beispiel: Bild = Cover Bild, Titel = Titel und Teaser = Teaser). In der Vorschau und beim Abruf via API-Schnittstelle werden nun mit dem Inhaltselement alle Inhalte im gewählten Content Pool iteriert:

So sieht das JSON (Ausschnitt) der obigen Konfiguration aus:

{
      "uid": "00171f62-d0fc-471b-b2cb-4caab5fe7766",
      "items": [
        {
          "image": {
            "source": "https://storage.flyo.cloud/vas9-shopping_10e88257.jpg",
            "caption": "",
            "copyright": "",
            "name": "VAS_9 Shopping.jpg",
            "id": 145915
          },
          "title": "Weekend Aarau einkaufen",
          "teaser": "Sie planen mit einer Freundin ein Shopping-Weekend oder möchten sich einfach ein paar Stunden treiben lassen. Das Aarauer Einkaufsangebot ist überraschend vielfältig.",
          "link": {
            "entity_unique_id": "axxytU8de",
            "entity_slug": "weekend-aarau-einkaufen",
            "entity_type_id": 132,
            "routes": {
              "detail": "/erlebnisse/weekend-aarau-einkaufen"
            }
          }
        },

Hinweis: Die beiden Varianten aus Beispiel 1 und 2 können in einem Inhaltselement kombiniert werden. Es können im gleichen Inhaltselement also sowohl Inhalte via Seiten-Editor eingegeben, als auch Inhalte aus einem Content Pool verknüpft und iteriert werden.

Zusätzlich können für jedes Inhaltselement Optionen definiert werden, die im Seiten-Editor konfiguriert werden können:

Und die dazugehörende Konfigurationsmöglichkeit im Seiten-Editor:

Konfiguration - Globale Inhalte

Noch nicht verfügbar.

Konfiguration - Seitencontainer

Noch nicht verfügbar.

Konfiguration - Seiteneigenschaften

Noch nicht verfügbar.

Konfiguration - Detailseiten

Bei Flyo gibt es zwei Typen von Seiten: Die CMS-Seiten (bestehend aus einer oder mehreren Inhaltselementen) und die Detailseiten von Entitäten. Für jede Entität, die in der Integration des Headless-Projekts verfügbar gemacht wurde, können die Felder definiert werden, die via API-Schnittstelle zur Verfügung gestellt werden sollen. Beispiel Trails -> Feldname definieren und mit dem entsprechenden Feld der Entität verbinden:

Flyo bietet mittels Routing eine komfortable Lösung, das einfaches Verlinken von Inhaltselementen mit  iterierten Inhalten zu den jeweiligen Entitäten-Details zu ermöglichen. Die Parameter für das Routing werden dabei via API-Schnittstelle zur Verfügung gestellt. Dies reduziert den Aufwand für Entwickler und reduziert den Code-Umfang im Frontend-Projekt:

So sieht das JSON (Ausschnitt) der obigen Konfiguration (Routing) aus:

{
          "image": {
            "source": "https://storage.flyo.cloud/image-cityhopping.jpg",
            "caption": "",
            "copyright": ""
          },
          "title": "Three-City-Hop Aarau - Baden - Solothurn",
          "teaser": "1 Nacht buchen - 3 Städte erleben",
          "link": {
            "entity_unique_id": "LKl4khax8",
            "entity_slug": "3-city-hop",
            "entity_type_id": 115,
            "routes": {
              "detail": "/story/3-city-hop"
            }
          }
        },

Konfiguration - Content Pool-Indexierung

Standardmässig werden alle Einträge indexiert, die als Inhalte über Inhaltselemente verwendet werden. Es gibt jedoch Situationen, in denen man alle Daten eines Content Pools im Seitenindex aufnehmen möchte, um anschliessend Entitäten-Details abzurufen. Diese Content Pools können hier hinterlegt werden.

Wichtig: Diese Funktion kann, abhängig von der Datenmenge, den Synchronisationsprozess erheblich verlangsamen und den Credits-Verbrauch stark erhöhen. Daher sollte diese Funktion nur begrenzt genutzt werden oder nur bei Content Pools, die nicht viele Einträge beinhalten.

Inhalt

> Site-Tree und Seiten-Editor > separater Beitrag