Es geht um die Entwicklung eines innovatives Event-Tools als MVP, das  die Verwaltung von Besuchern / Plattformbenutzer und allgemeinen Event-Inhalte (Blog) erheblich vereinfachen soll. Dabei wurde Strapi als Headless CMS verwendet, wodurch man in kürzester Zeit ein vollständig eingerichtet Backend auf Basis von Node.js erhält, das jederzeit erweitert werden kann und zugleich eine fertige Admin Plattform zur Contentpflege bereitstellt. Mit der benutzerfreundlichen Admin-Oberfläche in Strapi können die Plattformmanager mühelos Inhalte erstellen, bearbeiten und verwalten. Die Integration mit Angular im Frontend sorgt dafür, dass die Event-Webanwendung dynamisch und reaktiv ist, was eine optimale Benutzererfahrung gewährleistet. Diese Kombination ermöglicht eine effiziente, skalierbare und benutzerfreundliche Verwaltung des Events und dessen Inhalte.

Ein Headless CMS (Content Management System) ist eine moderne Art von Content-Management-System, das sich von traditionellen CMS-Lösungen dadurch unterscheidet, dass es ausschließlich auf die Verwaltung und Bereitstellung von Inhalten fokussiert ist, ohne eine festgelegte Art der Darstellung dieser Inhalte zu erzwingen.

Während herkömmliche CMS wie WordPress oder Joomla sowohl das Backend (die Verwaltungsebene) als auch das Frontend (die Darstellungsebene) eines Webprojekts abdecken, trennt ein Headless CMS diese beiden Bereiche strikt voneinander. Das Backend bleibt für die Content-Verwaltung zuständig, während das Frontend flexibel gestaltet werden kann, etwa durch verschiedene Technologien wie JavaScript-Frameworks (z.B. Angular, React) oder mobile Apps.

Zusätzlich zu Flexibilität und Zukunftssicherheit bietet ein Headless CMS noch eine Reihe weiterer Vorteile:

1. Omnichannel-Content-Strategie

Ein Headless CMS ermöglicht die Bereitstellung von Inhalten über mehrere Kanäle hinweg. Sie können denselben Content nicht nur auf Websites, sondern auch in mobilen Apps, Social Media, digitalen Displays und sogar in Augmented Reality (AR) und Virtual Reality (VR) Anwendungen verwenden. Dies fördert eine konsistente Markenkommunikation über alle Plattformen hinweg.

2. Schnellere Time-to-Market

Da das Frontend und das Backend unabhängig voneinander entwickelt werden können, kann ein Headless CMS die Entwicklungszeit erheblich verkürzen. Teams können parallel arbeiten, wodurch Änderungen und Updates schneller umgesetzt werden können. Dies ist besonders nützlich in einem agilen Entwicklungsumfeld, wo schnelle Iterationen und Updates entscheidend sind.

3. Verbesserte Entwicklererfahrung

Entwickler schätzen die Freiheit, das Frontend mit den Technologien ihrer Wahl zu gestalten, sei es mit modernen Frameworks wie Angular, React oder Vue.js. Dadurch können sie maßgeschneiderte Benutzeroberflächen erstellen, die genau auf die Anforderungen des Projekts zugeschnitten sind. Außerdem können Entwickler durch den API-first-Ansatz des Headless CMS effizienter arbeiten und die Entwicklungsprozesse optimieren.

4. Leichtere Integration von Drittanbieter-Tools

Ein Headless CMS lässt sich problemlos mit anderen Diensten und Tools integrieren, wie z.B. E-Commerce-Plattformen, CRM-Systemen, Analyse-Tools oder Marketing-Automation-Software. Dies macht es einfacher, eine maßgeschneiderte, voll funktionsfähige digitale Plattform zu erstellen, die alle Unternehmensanforderungen erfüllt.

5. Bessere Performance und Skalierbarkeit

Da das CMS nur die Inhalte verwaltet und diese über eine API bereitstellt, kann das Frontend unabhängig optimiert werden. Dies führt oft zu einer besseren Performance der Website oder Anwendung, da das Frontend nicht durch das Backend verlangsamt wird. Außerdem lässt sich ein Headless CMS leichter skalieren, da es einfach neue Frontend-Instanzen bedienen kann, ohne dass das Backend angepasst werden muss.

6. Sicherheitsvorteile

Da das Headless CMS keine direkte Verbindung zum Frontend hat, ist es weniger anfällig für Angriffe. Die API ist der einzige Berührungspunkt mit der Außenwelt, was die Angriffsfläche minimiert. Außerdem können APIs oft besser abgesichert und überwacht werden, was die Gesamtstruktur sicherer macht.

7. Bessere Content-Wiederverwendung

Inhalte, die einmal in einem Headless CMS erstellt wurden, können in verschiedenen Kontexten wiederverwendet werden. Das bedeutet, dass Unternehmen Inhalte effizienter erstellen und verwalten können, ohne sie für jeden neuen Anwendungsfall duplizieren zu müssen. Dies spart Zeit und reduziert Redundanz.

Strapi ist ein leistungsstarkes, Open-Source-Headless CMS, das Entwicklern die Möglichkeit bietet, flexible und maßgeschneiderte Content-Management-Lösungen zu erstellen. Im Gegensatz zu traditionellen CMS-Lösungen, die sowohl Backend- als auch Frontend-Funktionalitäten umfassen, konzentriert sich Strapi ausschließlich auf das Backend und stellt Inhalte über eine API (RESTful oder GraphQL) zur Verfügung. Dies ermöglicht es Entwicklern, das Frontend mit den Technologien ihrer Wahl zu gestalten, sei es für Webanwendungen, mobile Apps oder andere digitale Plattformen.

Ein herausragendes Merkmal von Strapi ist seine Benutzerfreundlichkeit und Flexibilität. Es bietet eine intuitive Admin-Oberfläche zur Verwaltung von Inhalten und ermöglicht es, Content-Modelle ohne Programmierkenntnisse zu erstellen und anzupassen. Darüber hinaus unterstützt Strapi eine breite Palette von Datenbanken und bietet zahlreiche Erweiterungsmöglichkeiten durch Plugins. Diese Kombination aus Einfachheit, Anpassungsfähigkeit und Erweiterbarkeit macht Strapi zu einer idealen Wahl für Unternehmen und Entwickler, die eine zukunftssichere und skalierbare Content-Management-Lösung suchen.

Strapi und WordPress haben unterschiedliche Stärken und Einsatzgebiete. Während Strapi mehr Freiheit und Anpassbarkeit für Entwickler bietet, glänzt WordPress durch Benutzerfreundlichkeit und ein reichhaltiges Ökosystem an Plugins und Themes:

Architektur:

• • Strapi: Headless CMS, das sich auf die Bereitstellung von Inhalten über APIs (RESTful oder GraphQL) konzentriert. Entwickler können das Frontend mit beliebigen Technologien gestalten, was maximale Flexibilität ermöglicht.
  • WordPress: Traditionelles CMS mit integriertem Frontend- und Backend-Management. Es bietet ein vorgefertigtes Theme- und Plugin-System, das die Entwicklung ohne tiefgehende Programmierkenntnisse erleichtert.

 Flexibilität:

• • Strapi: Hohe Flexibilität, da es keine vordefinierte Frontend-Struktur gibt. Ideal für maßgeschneiderte Webanwendungen und Multi-Channel-Strategien.
  • WordPress: Flexibel innerhalb der Grenzen seines Themes- und Plugins-Ökosystems. Optimal für standardisierte Websites, die schnell aufgebaut werden sollen.

Entwicklerfreundlichkeit:

• • Strapi: Entwickelt für Entwickler, die volle Kontrolle über das Backend und die API-Integration haben wollen. Unterstützt moderne JavaScript-Frameworks und eine modulare Architektur.
  • WordPress: Benutzerfreundlicher, insbesondere für Nicht-Entwickler, dank einer großen Auswahl an vorgefertigten Themes und Plugins. Entwickelt in PHP, mit einer großen Community und umfangreicher Dokumentation.

Einsatzmöglichkeiten:

• • Strapi: Geeignet für komplexe, anpassbare Projekte, die Flexibilität und Skalierbarkeit erfordern, wie z.B. Headless-Websites, mobile Apps, oder IoT-Anwendungen.
  • WordPress: Perfekt für Blogs, Unternehmenswebsites, und E-Commerce-Plattformen, bei denen ein schneller Aufbau und einfache Verwaltung im Vordergrund stehen.

Strapi und Angular bilden zusammen eine leistungsstarke und flexible Kombination für die Entwicklung moderner Webanwendungen. Strapi, als Headless CMS, konzentriert sich auf die Verwaltung und Bereitstellung von Inhalten über APIs, während Angular als Frontend-Framework diese Inhalte in dynamischen und interaktiven Benutzeroberflächen darstellt.

Vorteile der Kombination:

1. Flexibilität und Modularität: Strapi ermöglicht die Erstellung maßgeschneiderter Content-Modelle, während Angular eine komponentenbasierte Architektur bietet, die eine saubere und wartbare Codebasis fördert.
2. Trennung von Backend und Frontend: Diese klare Trennung ermöglicht parallele Entwicklung, einfache Wartung und bessere Skalierbarkeit.
3. Moderne Technologien: Beide Technologien basieren auf modernen Standards (JavaScript/TypeScript), was sie zukunftssicher macht.
4. API-first Ansatz: Strapis API-first-Architektur passt perfekt zu Angulars komponentenbasierter Struktur, was eine nahtlose Integration und optimale Performance ermöglicht.
5. Sicherheit und Skalierbarkeit: Beide Technologien bieten robuste Sicherheitsfeatures und unterstützen skalierbare Architekturen, die sowohl für kleine als auch große Projekte geeignet sind.

Insgesamt bieten Strapi und Angular zusammen eine zukunftssichere, effiziente und sichere Lösung für die Entwicklung komplexer, benutzerfreundlicher Webanwendungen

Für das Erstellen eines neuen Strapi Projektes wird die neueste Node.js Version benötigt. Du kannst die neueste Version von der offiziellen Node.js-Website herunterladen und installieren oder einen Docker Container mit der entsprechenden Node Version über ein Terminal starten, einen leeren Projektordner mounten und darin dein Projekt erstellen.

Docker Command:

docker run -it --name strapi-backend -p 1337:1337 -v 'lokaler Projektpfad':/app

Anschließend öffnet sich ein Terminal mit einer Bash. Mit diesem navigierst du dich zu dem entsprechenden Ordner (/app). Strapi hat für die Erstellung eines neuen Projekts ein Command zur Verfügung gestellt:

Terminal Command:

npx create-strapi-app my-strapi-project --quickstart

Du kannst das Projekt nach belieben benennen („my-strapic-projekt“).

Strapi wird jetzt installiert und ein neuer Ordner my-strapi-project wird erstellt. Nach der Installation startet Strapi automatisch und öffnet die Admin-Oberfläche im Browser (standardmäßig unter http://localhost:1337/admin). Im darauffolgenden und letzten Schritt musst ein strapi Konto anlegen. Nun hast du in wenigen Minuten ein fertiges Backend mit Admin-Oberfläche.

Authentifizierung

Die API-Authentifizierung ist bei Strapi bereits ein fester Bestandteil, um den Zugriff auf Ihre API-Endpunkte zu sichern und nur autorisierten Benutzern den Zugang zu bestimmten Daten oder Funktionen zu gewähren. Strapi bietet eine flexible und leistungsstarke Benutzer- und Rollenverwaltung, die es Ihnen ermöglicht, verschiedene Berechtigungen festzulegen und die Sicherheit Ihrer API zu gewährleisten.

Dabei verwendet Strapi JSON Web Tokens (JWT) zur Authentifizierung von Benutzern. Wenn ein Benutzer sich anmeldet, wird ein JWT erstellt und an den Benutzer zurückgegeben. Dieser Token wird dann bei jeder API-Anfrage in den HTTP-Header eingebunden, um die Identität des Benutzers zu verifizieren.

In der Strapi-Admin-Oberfläche kannst du Benutzerkonten erstellen und verschiedene Rollen definieren. Jede Rolle hat spezifische Berechtigungen, die bestimmen, welche Aktionen der Benutzer ausführen darf, wie z.B. das Abrufen, Erstellen, Aktualisieren oder Löschen von Daten.

Wenn ein Benutzer sich anmeldet, sendet er seine Anmeldedaten an Strapi. Nach erfolgreicher Verifizierung der Anmeldedaten erstellt Strapi einen JWT, der an den Benutzer zurückgegeben wird. Dieser Token dient als Identitätsnachweis bei nachfolgenden API-Anfragen.

Um sicherzustellen, dass nur autorisierte Benutzer auf bestimmte Endpunkte zugreifen können, können Sie in den Einstellungen von Strapi festlegen, welche Rollen Zugriff auf welche API-Endpunkte haben. Dadurch können Sie beispielsweise sicherstellen, dass nur authentifizierte Benutzer auf sensiblen Daten zugreifen können.

Erstellen von ersten Inhalten (Content-Type-Builder)

Auf der Strapi-Admin-Oberfläche können mit dem Conten-Type-Builder neue Content-Types definieren. Ein Content-Type kann aus einer beliebigen Anzahl verschiedener Typen an Inputfelder (Textbox, Image etc.) bestehen.

Verwalten von Inhalten (Content-Manager)

Mit dem Content-Manager kannst du dir erste Testeinträge für einen beliebigen Content-Type erstellen, um später Daten in Angular anzeigen lassen zu können.

 API-Einstellungen

Stelle sicher, dass die API für den Content-Type entsprechend der authentifizierten User zugänglich ist. Gehe dazu in die Einstellungen unter Settings -> Roles & Permissions und aktiviere die erforderlichen Berechtigungen.

Für das Erstellen eines neuen Angular Projektes wird die neueste Node.js Version benötigt. Du kannst die neueste Version von der offiziellen Node.js-Website herunterladen und installieren.

Terminal Command

ng new my-angular-project

Du kannst das Projekt nach belieben benennen („my-angular-project“).

In der Regel nutzen wir Angular in Kombination mit der UI-Lib Tailwind. Eine genaue Anleitung zur Einrichtung findest du unter: https://tailwindcss.com/docs/guides/angular

Strapi stellt bereits eine fertige Userverwaltung mit Authentifizierung zur Verfügung. Nachdem ein erster User über den Content-Manager angelegt wurde, kann die Login Funktionalität über den entsprechenden API-Endpoint getestet werden. Hierzu müssen die Login Credentials im Body mit entsprechenden Keys-value Pairs übergeben werden:

Auth-Endpoint:

POST http://localhost:1337/api/auth/local
{
    "identifier": "test@testmail.com",
    "password": "test1234!"
}

Angular-Beispielcode:

   public login(username: string, password: string) {
      return this.http
         .post('http://localhost:1337/api/auth/local', {
            identifier: username,
            password: password,
         })
         .pipe(
            tap({
               next: (res: any) => {
                  this._loggedIn.next(true);
                  this.setToken('access_token', res.jwt);
                  this.setUser(res.user);
               },
               error: (err: any) => throwError(() => new Error(err)),
            })
         );
   }

Nach erfolgreicher Athentifzierung erhältst du einen JWT-Token, welchen du dir abspeichern solltest, da du diesen für den Abruf anderer Content-Daten benötigst.

Wird nun über den Content-Type-Builder ein neuer Type wie beispielsweise „Visitor“ angelegt, erstellt strapi automatisch die dazugehörigen CRUD Endpoints. Diesen müssen über die Permission Settings noch an authentifizierte Benutzer freigegeben werden.

Endpoint zum Abruft aller Visitor Daten:

GET http://localhost:1337/api/visitors

Angular-Beispielcode:
Für den Abruf wird nun der zuvor abgespeicherte JWT-Token zur Authentifizierung benötigt. Dieser wird in der Regel automatisch mit einem JWT-Interceptor automatisch mit angefügt:

   public getAllVisitors(): Observable {
      return this.http.get('http://localhost:1337/api/visitors',{
         headers: { Authorization: `Bearer ${accessToken}` },
       } );
   }

Dadurch erhält man die entsprechenden Daten im JSON Format, welche nun im Frontend verarbeitet werden können.

Die Hauptfunktionalität des Tools ist die Verwaltung von Event-Besuchern sowie die Darstellung von Event-Inhalten wie Veranstaltungsprogramm und eines Blogs. Nachfolgend gehen wir auf die größten Hürden bei der Umsetzung des Tools ein.

Strapi stellt zu den jeweils bereitgestellten Endpoints der jeweiligen Content-Types eine umfangreiche Filterfunktion zur Verfügung. Um beispielsweise alle Visitors nach dem Akkreditierungsstatus abzufragen, kann man folgende Filterfunktionalität verwenden:

http://localhost:1337/api/visitors?filters[accreditationState][$contains]=1

Man kann dabei beliebig viele Filter mit and / or miteinander kombinieren:

?filters[$and][0][accreditationState][$contains]=1&filters[$and][0][category][$contains]=VIP

Suchfunktionen mit Werten aus Eingabefeldern können ähnlich umgesetzt werden die bereits aufgeführten Filterfunktionen:

http://localhost:1337/api/visitors?filters[$and][0][firstname][$contains]=chris

Des Weiteren hat man jederzeit die Möglichkeit mit Pagination zu arbeiten:

http://localhost:1337/api/visitors?pagination[page]=1&pagination[pageSize]=10

Arbeitet man mit Relationen in einem Conten-Type wie Beispielsweise ein oder mehrere Thematags bei einem Blogartikel, werden diese standardmäßig nicht in der Filterung beachtet bzw. sind diese nicht im Response enthalten. Dabei kann man mit Populate Paramter arbeiten, welches ähnlich zu einem JOIN bei SQL ist:

 http://localhost:1337/api/eventblogs?filters[tags][$in]=3&populate=*

In diesem Beispiel werden alle Blogartikel ausgeliefert, welche den Thementag 3 enthalten.

Neben den standardisierten CRUD Endpoints, hat man die Möglichkeit, eigene Routen im Backend zu implementieren. Dies eignet sich besonders für komplexere Aggregationen von Daten wie in unserem Fall für die Darstellung im Dashboard, der bereits registrierten in Relation zu den eingeladenen Besucher:

Dabei öffnet man das komplette Strapi-Projekt am besten in Visual Studio Code und navigiert in den entsprechenden Content-Type Ordner. Im ersten Schritt legen wir eine neue Datei für neuen Routen an. Strapi bietet die Funktionalität, sobald eine neue Datei mit der richtigen Benamung erstellt wurde, diese zu erfassen. In unserem Fall „custom-vistors.js“. Hierbei hat man nun die Möglichkeit eine beliebe Anzahl an neuen Routen zu implementieren:

Im zweiten Schritt muss der vorhandene Controller um die entsprechenden Funktionen erweitert werden, welche die Anfrage der neuen Route behandelt:

Im letzten Schritt muss das Backend neu gestartet werden. Anschließend steht sofort die neue Route zur Verfügung.

Zusammenfassend lässt sich sagen, dass die Integration von Strapi und Angular eine leistungsstarke und flexible Lösung für die Entwicklung moderner Webanwendungen bietet. Strapi ermöglicht dir eine schnelle und einfache Einrichtung eines anpassbaren Backends, während Angular dir die Werkzeuge liefert, um dynamische und interaktive Benutzeroberflächen zu erstellen.

Über einen Zugangslink, kannst du dir das Projekt komplett kostenlos herunterladen: