How to: Pimcore als Headless PIM
Der typische Datenbindungskitt dieser Systemarchitektur ist GraphQL, eine sehr flexible Abfragesprache für Daten. Aber gehen wir einen Schritt zurück und schauen wir uns PIM noch einmal an. Das Kernkonzept eines PIM besteht darin, reichhaltige Produktinhalte für Drittanwendungen und wichtige Benutzer bereitzustellen. In dieser Hinsicht ist das Open-Source-System Pimcore sowohl ein entkoppeltes PIM als auch ein Headless-PIM-System und stellt Daten über den Pimcore Datahub und GraphQL für 3rd-Party-Anwendungen und interne APIs für Pimcores interne Multichannel-Publishing-Funktionalitäten bereit. Das Beste aus beiden Welten.
Im Sinne eines Headless PIM ist Pimcore mit jeder Anwendung kompatibel, die GraphQL-basierte Inhalte abfragen und konsumieren kann. Seien es Programmierbibliotheken wie React, Vue.js und Angular oder statische Seitengeneratoren wie Next.js, Hugo oder GatsbyJS. Pimcore kann innerhalb weniger Minuten den richtigen Produktinhalt an den richtigen Ausgabekanal in GraphQL liefern. In dieser Hinsicht ist Pimcore natürlich auch mit der Philosophie von Jamstack kompatibel.
Wir können ein komplettes Headless-Produktinformationsmanagement mit Next.js-Auslieferung in weniger als einer halben Stunde einrichten. Natürlich ist uns bewusst, dass wir auch einfach die internen Pimcore-Rendering-Funktionalitäten hätten nutzen können. Aber in diesem Fall wollen wir explizit den Headless-Weg über GraphQL gehen und Produktinhalte an Next.js ausliefern, einen beliebten Open-Source-Generator für statische Websites auf React-Basis. Als Pimcore-Installation nutzen wir die öffentliche Demo, die unter https://pimcore.com/en/try verfügbar ist.
Melden wir uns bei der Demo an
Im ersten Schritt legen wir ein neues Datenmodell (=Pimcore-Klasse) "Test" an.
In diesem Fall haben wir das Datenmodell sehr einfach gehalten und haben nur zwei Felder, "Name" und "Beschreibung". Nun fügen wir einige Inhalte hinzu
Datenmodell: Erledigt. Zwei Inhalte hinzugefügt: Erledigt. Nun richten wir den GraphQL-Datahub ein und fügen unser "Test"-Datenmodell hinzu.
Definieren wir nun die Berechtigungen, die Workspaces und den API-Schlüssel:
Prüfen wir nun die GraphQL-API für unsere definierten Daten. Erledigt.
Installieren wir nun Node.js und Next.js auf dem lokalen Rechner, um die Headless-PIM-Funktionalitäten zu testen. Als erstes bauen wir eine einfache Next.js-Seite. Diese Seite ruft einfach die Pimcore GraphQL API auf, um die Produktdaten zu erhalten.
Und gibt die Pimcore-Produkte aus:
Das war's. Wir sind fertig. Jetzt kann Pimcore als Headless-Produktinformationsmanagement-Software verwendet werden und die richtigen Produktinhalte über GraphQL an 3rd-Party-Frontend-Anwendungen liefern.
Wenn Sie mitverfolgen oder mithelfen möchten, schauen Sie regelmäßig in unserem Blog vorbei. Oder verfolgen Sie die Entwicklung 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. Bis bald bei der nächsten Version!
