18. Januar 2017 // von Manuel Ernst

Contentful, Schemasetup (I / III)

Contentful ist ein Service der ein gehostetes Content Management System anbietet. Konkret bedeutet das dass über ein flexibles Interface Datentypen mit individuellen Felddefinitionen erfasst und über ein Datenpflegebackend beliebige Inhalte eingepflegt werden können.
Contentful definiert seinen Service folgendermaßen:

Not yet another CMS, but an API-centric microservice for managing content in a developer-friendly way. - www.contentful.com

Man nutzt also den Service von Contentful um Daten und Inhalte zu erfassen und ruft diese anschließend über eine API Schnittstelle ab um diese dann an beliebiger Stelle in einem beliebigen technischen Umfeld einzusetzen.
Dabei wird explizit darauf geachtet keine Annahmen über die Art und Weise zu treffen in der erfasste Daten später im Frontend verwendet bzw. dargestellt werden. Es könnte ja sein dass Content zum Beispiel in einem Blog auf einer Webseite, in einer App als Beschreibungstext, auf einem SmartTV als Nachrichtenbeitrag oder auf einer Smartwatch als Informationstext dargestellt wird. In jedem dieser Szenarios ist eine andere technische Herangehensweise zur Darstellung der Inhalte notwendig, deswegen beschränkt man sich auf den im Web üblichen kleinsten gemeinsamen Nenner zur Strukturierung von Daten bzw. zur Formatierung von Inhalten: JSON und Markdown:

JSON: Entsprechend eines vordefinierten Schemas werden Inhalte in einem JSON Payload übertragen und können dann flexibel ausgewertet werden.

Markdown: Zur Formatierung von Inhalten (z.B. Links, Fettschrift, Listen, Tabellen etc) kommt Markdown zum Einsatz. In allen denkbaren Technologien gibt es bereits fertige Parser die den benötigten Output (z.B. HTML auf einer Internetseite) angepasst an die zugrunde liegende Plattform generieren können.

Dieser Blogpost gibt eine kurze Einführung und Einleitung in das Thema Contentful und zeigt anhand von detaillierten Einzelschritten die Einrichtung des Datenbackends.

In zwei weiteren Blogposts werden wir uns mit der Datenpflege beschäftigen während sich Blogpost #3 um das Frontendsetup dreht:

Definition des Datenschemas

Grundlegend wird zuerst ein Contenttyp definiert. Ein Contenttyp ist vergleichbar mit einer Tabelle aus einer relationalen Datenbank und enthält eine beliebige Menge von thematisch verwandten Einträgen.
In den nun folgenden Beispielen konzentrieren wir uns auf den Aufbau eines einfachen Blogs und der damit verbundenen Backendkonfiguration.

Jeder Contenttyp besteht aus einem oder mehreren Feldern unterschiedlichen Typs. Diese Felder sind vergleichbar mit Felder aus den Tabellen einer relationalen Datenbank. Allerdings sind die Datentypen dieser Felder deutlich abstrakter gehalten, so gibt es beispielsweise die Möglichkeit direkte Referenzen auf andere Datenentitäten abzulegen, Medieninhalte abzuspeichern oder Geokoordinaten zu erfassen.

Für unseren Blog benötigen wir nun eine Reihe von Feldern die im Backend definiert werden:

Titel

Der Titel beschreibt ein Blogpost und dienst als Referenz in Übersichtsseiten und Teasern.

Teasertext

Der Teasertext dient als Kurzbeschreibung des Blogpost Inhalts und erscheint zum Beispiel in der Blog Übersicht und in Blogteasern.

FeatureImage

Das Featureimage ist ein Bild welches in der Detailansicht eines Postings angezeigt wird und zusätzlich in verkleinerter Form als Thumbnail in Listenübersichten und Blogteasern erscheint.

Body

Der Body ist das eigentliche Feld in welchem der Blogpost Inhalt abgelegt wird.

Tags

Tags sind ein typisches Feature das in keinem Blog fehlen darf. Über Tags werden einem BlogPost bestimmte Merkmale zugewiesen, so ist es anschließend möglich über diese Merkmale zusammen gehörige Blogposts zu identifiezieren oder verwandte Blogposts anzeigen zu können.

Slug

Eines der wichtigsten Felder ist der Slug. Der Slug wird genutzt um einen BlogPost in einer URL identifizieren zu können.
Beispielsweise könnte der Blogpost mit dem Titel "IE, My favorite Browser" den Slug "ie-my-favorite-browser" erhalten, was zu der URL "https://example.com/blog/post/ie-my-favorite-browser" führen könnte.

Übersicht

Nachdem alle Felder des Contenttyps "BlogPost" angelegt wurden fehlt nun noch der Content für den Blog und die letztendliche Frontendimplementierung. In konkreten Fall dieses Beispiels werden wir eine Webseite implementieren welche die Blogposts anzeigt.

In zwei weiteren Blogposts werden wir uns mit diesen Details beschäftigen:

Verwandte Blogposts