{"id":146,"date":"2021-01-22T12:12:10","date_gmt":"2021-01-22T11:12:10","guid":{"rendered":"https:\/\/informatik.htwk-leipzig.de\/seminar\/?p=146"},"modified":"2022-01-11T08:56:30","modified_gmt":"2022-01-11T07:56:30","slug":"headless-cms-mit-strapi","status":"publish","type":"post","link":"https:\/\/informatik.htwk-leipzig.de\/seminar\/lehrveranstaltungen\/betriebliche-informationssysteme\/2021\/headless-cms-mit-strapi\/","title":{"rendered":"Headless CMS mit strapi"},"content":{"rendered":"<h1>Was ist ein Headless CMS?<\/h1>\n<p>Ein klassisches CMS (Content Management System), wie etwa <a href=\"https:\/\/de.wordpress.org\">WordPress<\/a> oder <a href=\"https:\/\/www.joomla.de\">Joomla<\/a>, ist ein monolithisches System, welches aus Front- und Backend besteht. Dabei dient das Frontend zur Darstellung der Inhalte im Browser und das Backend zur Verwaltung der f\u00fcr die Webseite wichtigen Informationen. Bei einem Headless CMS wird auf das Frontend verzichtet, somit verf\u00fcgt es nur \u00fcber ein Backend. \u00dcber das Backend werden nur die Inhalte verwaltet und nicht wie bei einem klassischen CMS das Design des Frontends. Verbunden werden Frontend und Backend bei einem Headless CMS \u00fcber eine API und entsprechen somit dem Ansatz der Microservices. Die Vorteile eines Headless CMS sind die Folgenden:<\/p>\n<ul>\n<li>Die unbegrenzte Anzahl von Frontends. Die Inhalte k\u00f6nnen also nicht nur auf einer Webseite, sondern etwa auch in einer App ver\u00f6ffentlich werden.<\/li>\n<li>Das Frontend kann flexibler gestaltet werden, da man frei von jeglichen Frameworks oder Systemen entwickeln kann.<\/li>\n<li>Microservices sind performanter als monolithische Systeme, somit kann ein Headless CMS schneller sein als viele klassische CMS.<\/li>\n<\/ul>\n<h1>Was ist strapi?<\/h1>\n<p><a href=\"https:\/\/strapi.io\">Strapi<\/a> ist ein 2016 in Frankreich gegr\u00fcndetes Unternehmen, welches das gleichnamige Open Source Headless CMS anbietet. Die Software von Strapi richtet sich in erster Linie an Frontend Entwickler, denen durch das System das Entwickeln eines Backends extrem erleichtert werden soll. Strapi kann dazu verwendet werden, sowohl Inhalte als auch Strukturen f\u00fcr Inhalte zu schaffen. Auch verf\u00fcgt es \u00fcber einen Medien Manager, welcher zur Verwaltung von Bildern und Daten dient, als auch \u00fcber ein Rechte System. In seiner Grundversion ist Strapi kostenlos. F\u00fcr Erweiterungen und Support k\u00f6nnen <a href=\"https:\/\/strapi.io\/pricing\">spezielle Pakete<\/a> erworben werden. Als Umgebung dient Strapi node.js. Kompatibel ist es mit verschiednen Datenbank Systemen wie etwa <a href=\"https:\/\/www.mysql.com\/de\/\">MySQL<\/a>, <a href=\"https:\/\/www.sqlite.org\/index.html\">SQLite<\/a> oder <a href=\"https:\/\/mariadb.org\">MariaDB<\/a>. Strapi liefert jedoch auch schon fertige <a href=\"https:\/\/strapi.io\/documentation\/developer-docs\/latest\/installation\/docker.html\">Docker Container<\/a>, mit denen die Software in wenigen Schritten gestartet werden kann. Auf die Daten des Systems kann \u00fcber eine <a href=\"https:\/\/www.ics.uci.edu\/~fielding\/pubs\/dissertation\/rest_arch_style.htm\">Rest API<\/a> zugegriffen werden. Auch ist die Erweiterung mithilfe von Plugins m\u00f6glich.<\/p>\n<h2>Das Konzept<\/h2>\n<p>Der <strong>Content-Types Builder<\/strong> ist eine der wichtigsten Funktionen in Strapi. Damit lassen sich die Datenstrukturen, also die Content-Typen, anlegen. Diese k\u00f6nnen dann mit Inhalten bef\u00fcllt werden. Der Content-Types Builder richtet sich somit an den Entwickler der das CMS einrichtet und die Struktur f\u00fcr die Inhalte festlegt. Grunds\u00e4tzlich wird zwischen zwei Content-Types unterschieden: Collection-Types und Single-Types. Collection-Types sind Inhalte von denen es sp\u00e4ter viel Instanzen geben wird, etwa Artikel auf einem Blog oder Produkte in einem Shop. Single-Types sind f\u00fcr Strukturen die nur einmal instanziiert werden, etwa die Inhalte einer Startseite. Die Typen lassen sich aus vielen weitern Datentypen zusammenbauen wie Texten, Medien und strukturierten <a href=\"https:\/\/www.json.org\/json-de.html\">JSON<\/a> Daten. Auch lassen sich Beziehungen zwischen den Datentypen herstellen. In der Abbildung sind die Felder aus denen sich die Datentypen zusammensetzen lassen zu sehen:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2021\/01\/conetent-typen.png\" alt=\"Strapi Types\" \/><\/p>\n<p><strong>Collection-Types<\/strong> und <strong>Single-Types<\/strong> k\u00f6nnen nach ihrem Anlegen mit Inhalten bef\u00fcllt werden. Das Rechte System von Strapi erlaubt hierbei zu unterscheiden, ob ein Nutzer die Datentypen anlegen und editieren kann oder ob er nur Instanzen davon erzeugen und diese bearbeiten kann. Nutzer die nur Inhalte bearbeiten k\u00f6nnen sind Editoren. Super Admins hingegen k\u00f6nnen auch die Datentypen ver\u00e4ndern und Autoren haben nur Zugriff auf ihre eigenen Inhalte. Bei dem Bef\u00fcllen der Datentypen mit Inhalten ist die <strong>Media Library<\/strong> ein n\u00fctzliches Tool wor\u00fcber sich Bilder hochladen und einbinden lassen.<\/p>\n<p>M\u00f6chte man von au\u00dfen, etwa von einem Frontend, auf die \u00fcber Strapi ver\u00f6ffentlichten Inhalte zugreifen, so geschieht dies \u00fcber <strong>API-Endpoints<\/strong>. Strapi legt f\u00fcr jeden Typ eine Adresse an, die dem Namen des Types entspricht. \u00dcber diese Adresse k\u00f6nnen dann alle Inhalte von diesem Typ abgerufen, bearbeitet, gel\u00f6scht oder neu angelegt werden. Damit der Endpoint jedoch von au\u00dfen ansprechbar ist, muss dieser erst f\u00fcr die REST-API freigeben werden.<\/p>\n<p>Strapi liefert bereits eine Benutzerverwaltung f\u00fcr das Backend mit, auch ein <strong>Authentifizierungssystem<\/strong> f\u00fcr ein m\u00f6gliches Frontend ist implementiert und die API-Endpoints k\u00f6nnen f\u00fcr verschiedne Nutzer freigeben werden. M\u00f6chte man Strapi erweitern, so k\u00f6nnen daf\u00fcr Plugins geschrieben werden oder bereits Existierende \u00fcber den <strong>Marketplace<\/strong> geladen werden.<\/p>\n<h1>Tutorial<\/h1>\n<h2>Strapi Installieren (Docker)<\/h2>\n<p>Strapi l\u00e4sst sich mit Hilfe von yarn oder npm schnell und einfach installieren. Da der Prozess jedoch mit <a href=\"https:\/\/www.docker.com\">Docker<\/a> einfacher ist und nichts am eigenen System \u00e4ndert, wird hier kurz dieser Weg vorgestellt.<br \/>\n<code>docker run -it -p 1337:1337 -v `pwd`\/&lt;PROJEKT ORDNER&gt;:\/srv\/app strapi\/strapi --rm<\/code><br \/>\nDamit startet sich ein Docker Container in dem Strapi l\u00e4uft und die Daten in ihrer SQLite Datenbank speichert. Die Inhalte von Strapi werden dann in dem angebenden Projektordner abgelegt. Sobald der Server l\u00e4uft kann Strapi \u00fcber folgende Adresse aufgerufen werden:<br \/>\n<code>http:\/\/localhost:1337<\/code><br \/>\nMan wird dann durch die Ersten Schritte zum Anlegen eines Admins geleitet.<\/p>\n<h2>Einen <strong>Content-Type<\/strong>\u00a0anlegen<\/h2>\n<p>Hat man Strapi erfolgreich installiert und einen Administrator eingerichtet kann man \u00fcber den Content-Types Builder Datentypen anlegen. Daf\u00fcr ruft man den Content-Types Builder in der linken Seite auf, hier kann man sich dann entscheiden welche Art von Content-Type man anlegen m\u00f6chte. Collection-Types bieten sich f\u00fcr alles an, was mehrfach vorkommt und Single-Types nur f\u00fcr einmalige Datentypen.<\/p>\n<p>Legt man einen neuen Typ an, wird man zun\u00e4chst nach dem Namen gefragt, welcher auch die Adresse \u00fcber die der Typ abrufbar ist bestimmt. Hat man sich f\u00fcr einen Namen entschieden kann man den Typen um die verschiednen Eigenschaften erweitern die er besitzen soll. Hat man den Typ erfolgreich angelegt, taucht er in der linken Spalte auf und kann dort ausgew\u00e4hlt werden, um ihn mit Inhalten zu bef\u00fcllen. Der Super Admin ist in der Lage den Datentyp sp\u00e4ter noch mal anzupassen und auch seine Bearbeitungsoberfl\u00e4che zu ver\u00e4ndern.<\/p>\n<p>M\u00f6chte man einen Typ von au\u00dfen f\u00fcr die \u00d6ffentlichkeit zug\u00e4nglich machen, so muss man diesen in den Einstellungen freigeben. In den Einstellungen findet sich unter &#8222;Users &amp; Permissions Plugin&#8220; der Punkt &#8222;Rollen&#8220;. Hier muss &#8222;Public&#8220; ausgew\u00e4hlt werden. Unter diesem Punkt lassen sich alle Typen f\u00fcr &#8222;Public&#8220; freigeben und auch bestimmen, welche Operationen &#8222;Public&#8220; nutzen darf. Die Abbildung zeigt, wie f\u00fcr den Content-Type &#8222;Gallery&#8220; eine Freigabe f\u00fcr die Gruppe &#8222;Public&#8220; erteilt wurde. Diese bestimmt, dass die Gallery-Eintr\u00e4ge von au\u00dfen aufrufbar sind.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2021\/01\/Screenshot_2021-01-11_Einstellungen.png\" alt=\"Strapi Types\" \/><\/p>\n<h2>Die API nutzen<\/h2>\n<p>Ist ein Type f\u00fcr &#8222;Public&#8220; angelegt und freigeben kann er \u00fcber die REST API aufgerufen werden. Dabei gibt Strapi die Inhalte des Typen als JSON zur\u00fcck. Das JSON kann dann beim Client verarbeitet und dargestellt werden. F\u00fcr einen Collection-Type sind die Aufrufe wie folgt:<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: left;width: 20%\">Method<\/th>\n<th style=\"text-align: left\">Path<\/th>\n<th style=\"text-align: left\">Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left\">GET<\/td>\n<td style=\"text-align: left\"><code>URL\/{content-type-name}<\/code><\/td>\n<td style=\"text-align: left\">Liste der {content-type-name} Eintr\u00e4ge<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left\">GET<\/td>\n<td style=\"text-align: left\"><code>URL\/{content-type-name}\/:id<\/code><\/td>\n<td style=\"text-align: left\">Spezieller {content-type-name} Eintrag<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left\">GET<\/td>\n<td style=\"text-align: left\"><code>URL\/{content-type-name}\/count<\/code><\/td>\n<td style=\"text-align: left\">Anzahl der {content-type-name} Eintr\u00e4ge<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left\">POST<\/td>\n<td style=\"text-align: left\"><code>URL\/{content-type-name}<\/code><\/td>\n<td style=\"text-align: left\">Erzeugt neuen {content-type-name} Eintrag<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left\">DELETE<\/td>\n<td style=\"text-align: left\"><code>URL\/{content-type-name}\/:id<\/code><\/td>\n<td style=\"text-align: left\">L\u00f6scht {content-type-name} Eintrag<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left\">PUT<\/td>\n<td style=\"text-align: left\"><code>URL\/{content-type-name}\/:id<\/code><\/td>\n<td style=\"text-align: left\">Aktualisiert {content-type-name} Eintrag<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h1>(Bild)Quellen:<\/h1>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li><a href=\"https:\/\/www.ionos.de\/digitalguide\/hosting\/cms\/headless-cms-was-sind-die-vorteile\/\">https:\/\/www.ionos.de\/digitalguide\/hosting\/cms\/headless-cms-was-sind-die-vorteile\/<\/a><\/li>\n<li><a href=\"https:\/\/golden.com\/wiki\/Strapi-8AAGPN4\">https:\/\/golden.com\/wiki\/Strapi-8AAGPN4<\/a><\/li>\n<li><a href=\"https:\/\/strapi.io\/documentation\/developer-docs\/latest\/getting-started\/introduction.html#what-is-strapi\">https:\/\/strapi.io\/documentation\/developer-docs\/latest\/getting-started\/introduction.html#what-is-strapi<\/a><\/li>\n<li><a href=\"https:\/\/strapi.io\/documentation\/developer-docs\/latest\/getting-started\/installation.html\">https:\/\/strapi.io\/documentation\/developer-docs\/latest\/getting-started\/installation.html<\/a><\/li>\n<li><a href=\"https:\/\/strapi.io\/documentation\/developer-docs\/latest\/content-api\/api-endpoints.html\">https:\/\/strapi.io\/documentation\/developer-docs\/latest\/content-api\/api-endpoints.html<\/a><\/li>\n<li>Alle Bilder sind selbst erzeugte Screenshots der Strapi Oberfl\u00e4che<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h1>Vortrag:<\/h1>\n<p><a href=\"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2021\/01\/Headless-CMS-small-komprimiert.pdf\">Vortragsfolien<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Was ist ein Headless CMS? Ein klassisches CMS (Content Management System), wie etwa WordPress oder Joomla, ist ein monolithisches System,<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[38,9,8],"class_list":["post-146","post","type-post","status-publish","format-standard","hentry","category-betriebliche-informationssysteme","tag-cms","tag-docker","tag-server"],"_links":{"self":[{"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/posts\/146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/comments?post=146"}],"version-history":[{"count":22,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/posts\/146\/revisions"}],"predecessor-version":[{"id":596,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/posts\/146\/revisions\/596"}],"wp:attachment":[{"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/media?parent=146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/categories?post=146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/tags?post=146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}