Wie man Pimcore in weniger als 30 Minuten als Headless PIM einrichtet
Headless ist nicht nur ein Trend am Content-Management- und Experience-Management-Markt, sondern auch in den Bereichen Product Information Management und Master Data Management. Ziel ist es, verschiedene Anwendungen innerhalb der Gesamtsystemarchitektur zu entkoppeln, aber gleichzeitig einen effizienten Datenaustausch zwischen allen Komponenten sicherzustellen. In diesem Artikel zeigen wir Ihnen, wie Sie das schaffen – Schritt für Schritt!
Entkoppelt & Headless: das Beste aus beiden Welten
Der typische Datenbindungskitt dieser Systemarchitektur ist GraphQL, eine sehr flexible Abfragesprache für Daten. Aber lassen Sie uns zuerst noch einmal kurz auf PIM zurückkommen: Das Kernkonzept eines PIM-Systems ist die Bereitstellung von angereicherten Produktinhalten für Drittanwendungen und wichtige Nutzer.
In dieser Hinsicht ist Pimcore sowohl ein entkoppeltes als auch ein Headless-PIM-System. Über den Pimcore Datahub und GraphQL liefert es Daten an Drittanwendungen und über interne APIs an Pimcores interne Multichannel-Publishing-Funktionalitäten. Dies ermöglicht Ihnen, das Beste aus beiden Welten zu nutzen.
Erfahren Sie jetzt mehr über Pimcores Technologien und Architektur!
Der richtige Inhalt auf dem richtigen Kanal
Als Headless PIM ist Pimcore mit allen Anwendungen kompatibel, die GraphQL-basierte Inhalte abfragen und konsumieren können – darunter Programmierbibliotheken wie React, Vue.js und Angular oder statische Website-Generatoren wie Next.js, Hugo oder GatsbyJS. Pimcore kann innerhalb von Minuten den richtigen Produktinhalt an den richtigen Ausgabekanal in GraphQL liefern. Das bedeutet, dass Pimcore auch mit der Jamstack-Philosophie kompatibel ist.
Einrichten eines Headless PIM: eine Schritt-für-Schritt-Anleitung
Lassen Sie uns jetzt gemeinsam in weniger als einer halben Stunde ein komplettes Headless Product Information Management mit Next.js einrichten! Natürlich könnten wir auch einfach die internen Pimcore-Rendering-Funktionen nutzen. Aber in diesem Fall wollen wir explizit die Headless-Route über GraphQL gehen und Produktinhalte an Next.js, einen beliebten Open-Source-Generator für statische Websites auf Basis von React, liefern.
Als Pimcore-Installation nutzen wir unsere öffentliche Demo.
Holen Sie sich jetzt die Demoversion!
Let’s get started!
Im ersten Schritt legen wir ein neues Datenmodell (= Pimcore-Klasse) „Test“ an.
In diesem Fall haben wir das Datenmodell sehr einfach gehalten. Es gibt nur zwei Felder: „Name“ und „Beschreibung“. Nun fügen wir einige Inhalte hinzu.
Datenmodell: Check. Zwei Inhaltsteile hinzugefügt: Check! Jetzt richten wir den GraphQL-Datahub ein und fügen unser Datenmodell „Test“ hinzu.
Als Nächstes definieren wir die Berechtigungen, die Arbeitsbereiche und den API-Schlüssel.
Im Anschluss überprüfen wir die GraphQL-API für unsere definierten Daten.
Als letzten Schritt installieren wir Node.js und Next.js auf dem lokalen Rechner, um die Headless-PIM-Funktionalitäten zu testen. Alles was wir dafür tun müssen, ist eine einfache Next.js-Seite zu erstellen. Diese Seite ruft die Pimcore GraphQL API auf, um die Produktdaten zu erhalten und gibt dann die Pimcore-Produkte aus.
Und das war’s auch schon – wir sind fertig! Kinderspiel, oder?
Jetzt kann Pimcore als Headless Product Information Management Software verwendet werden und den richtigen Produktinhalt über GraphQL an 3rd-Party-Frontend-Anwendungen liefern.
What’s next?
Am Pimcore-Blog finden Sie weitere informative Beiträge, zum Beispiel zum Thema „Wie Sie PIM als grundlegendes Element Ihrer digitalen Transformationsstrategie nutzen können“.
Verfolgen Sie außerdem die Entwicklungen von Pimcore in Echtzeit auf GitHub, oder werden Sie Pimcore-Partner und erhalten Sie Newsletter, Einladungen zu Webinaren und mehr!
Danke, dass Sie sich für Pimcore entschieden haben. See you for the next version!
