Teil 1: Grundlegende Veränderungen im Onlineshopsystem

Shopware 6: Eine Mischung aus API-First-Ansatz und DDD
Keine Kommentare

Am diesjährigen Shopware Community Day wurde von der shopware AG die sehnlichst erwartete Version 6 des gleichnamigen Shopsystems vorgestellt. Im ersten Teil dieser Artikelserie schauen wir uns an, was sich alles grundlegend verändert hat. Im zweiten Teil werden wir das neue API auf Herz und Nieren prüfen. Im dritten und letzten Teil werden wir das neue Plug-in-System vorstellen und eigene Erweiterungen umsetzen.

Shopware 6 fußt auf einer komplett neuen technischen Basis und wurde von Grund auf neu entwickelt, um Entwicklern maximale Flexibilität und Freiheit durch Automatisierung und Vernetzung zu ermöglichen. Technisch gesehen haben Enlight bzw. das Zend Framework Platz gemacht für Symfony 4.2 Full Stack, Smarty wurde durch Twig ersetzt, Vue.js hat die Nachfolgerschaft von Ext JS angetreten und Bootstrap 4 hat den Einzug in die Storefront gehalten.

Unsere Artikelserie zum Thema

  • Teil 1: Grundlegende Veränderungen im Onlineshopsystem
  • Teil 2: Das API auf Herz und Nieren geprüft
  • Teil 3: Das Plugin-System und eigene Erweiterungen

Konzeptionell wurde Shopware 6 nach dem API-First-Ansatz entwickelt. Die Architektur lehnt sich stark an Domain-driven Design (DDD) an. Daraus ergeben sich folgende interne Anforderungen: Externe Ressourcen werden nicht unnötig verwendet, der Stack verhält sich vorhersehbar und die Ausführung erfolgt in so wenigen Schritten wie möglich. Zusätzlich wird ein unnötiges Iterieren über Daten vermieden und die Datenbankabfragen auf das Notwendigste reduziert. Dadurch wurde die Testbarkeit deutlich erhöht und eine Skalierung der Applikation vereinfacht. Zusätzlich hat eine neue Datenstruktur Einzug gehalten, die eine Internationalisierung mit geringerem Aufwand ermöglicht. Es gibt nun eine native Unterstützung für sogenannte Contentsprachen, die an keinen Shop mehr gebunden sind. Dabei können verschiedene Entities die Sprache von ihren Eltern erben. Bis zu zwei Vererbungsstufen sind im Standard möglich.

Die Sales Channels sind in Shopware 6 neu hinzugekommen, um zum Beispiel spezifischen Content für verschiedene Kanäle wie Smartwatch, PWA, Instagram usw. auszuspielen. Darunter fallen eigene Produktkataloge, Einkaufswelten und Regeln, die festlegen, was ein Benutzer in diesem Kanal machen darf. Durch die Fokussierung auf weit verbreitete Standardtechnologien wie Symfony, Vue.js und Bootstrap ist die Lernkurve sehr steil. Das ermöglicht es Freelancern, Agenturen oder auch Shopbetreibern mit eigenen Entwicklern, sich sehr viel schneller in das Shopwareökosystem einzuarbeiten. Es wird kein Spezialwissen mehr vorausgesetzt, um Shopware an die eigenen Prozesse anzupassen. Entwickler mit Erfahrung in den verwendeten Technologien werden sich mit Shopware schnell anfreunden können.

Demoumgebung aufsetzen

Als Entwickler möchte man natürlich gerne schon mal in die neue Version reinschnuppern. Das ist in wenigen Schritten möglich. In diesem Beispiel verwenden wir die Docker-Umgebung, die auf einem Linux-Client ausgeführt wird. Zuerst klonen wir uns das Entwicklungstemplate von GitHub mit git clone git@github.com:shopware/development.git. Nun haben wir die Entwicklungsvorlage für die Shopware-Plattform im Verzeichnis development. Anschließend gehen wir mit cd development in dieses Verzeichnis und klonen noch das eigentliche Shopware-Plattform-Repository mit git clone git@github.com:shopware/platform.git in das Standardverzeichnis. Achtung: Bitte kein anderes Verzeichnis beim Klonen angeben, das ist wichtig für das Autoloading.

Kostenlos: IPC Agile Cosmos Cheat Sheet

Agile Cosmos Cheat Sheet-small-220x311In diesem Cheat-Sheet von unserem Experten René Schröder bekommen Sie einen Überblick über den Agile Cosmos und die organisatorische Struktur. Mit diesem Mind-Map haben Sie die perfekte Voraussetzung, um entweder Ihr eigenes agiles Team aufzubauen, Ihre aktuelle Organisation zu verbessern oder einen eigenen Stil von Agil zu kreieren.


Damit haben wir sämtlichen Quellcode, den wir zum Starten auf unserem Rechner benötigen. Um nun die notwendigen Docker-Container zu bauen und zu starten, geben wir einfach ./psh.phar docker:start ein. Mit diesem Befehl werden alle Docker-Container gebaut und gestartet. Anschließend verbinden wir uns via ./psh.phar docker:ssh mit dem Application-Container und starten die Installation mit ./psh.phar install.

Das kann einige Zeit in Anspruch nehmen, da bei der initialen Ausführung einige Caches erstellt werden müssen. Es dauert aber nur beim ersten Mal etwas länger. Um zu prüfen, ob die Installation erfolgreich war, kann man ganz einfach seinen Lieblingsbrowser öffnen und auf http://localhost:8000 zugreifen. Mac-Anwender können das Ganze auch lokal aufsetzen. Eine beispielhafte VirtualHost-Konfiguration ist im Installation Guide unter „Setting up your webserver“ zu finden. Anschließend muss nur bin/setup ausgeführt werden und man wird durch einen interaktiven Installationsprozess geführt.
Wenn etwas während der Installation nicht funktioniert hat, sollte geprüft werden, ob es die .psh.yaml.override gibt. Wenn nicht, kann das Set-up-Skript mit ./psh.phar install erneut gestartet werden.

Administration

Öffnet man nun unter http://localhost:8000/admin die neue Administrationsoberfläche, wird man zuerst von einer neuen Log-in-Maske begrüßt (Abb. 1). Der erfahrene Shopware-Entwickler wird nun versuchen, sich mit demo/demo einzuloggen. Die Demozugangsdaten der Entwicklerversion haben sich jedoch auf admin/shopware geändert. Wenn die erste Hürde überwunden ist, kann man nun die neue Oberfläche der Administration bestaunen (Abb. 2). Vom vollständig neuen Design abgesehen haben sich das komplette Fenstermanagement und die Menüstruktur geändert. Die Möglichkeit, einzelne Administrationsmodule als Fenster zu öffnen, ist entfallen. Dafür ist die vollständige Administration responsiv umgesetzt und kann nun auch mit einem Tablet oder anderem mobilen Endgerät benutzt werden.

Die meisten Entwickler wird es freuen, dass unter der Haube Vue.js Ext JS beerbt hat. Fehlermeldungen wie „c is not a constructor“ sind nun endlich Geschichte. Des Weiteren wurde die neue Administration vollständig mit dem Gedanken der Internationalisierung entworfen worden. Die Zeiten, in denen man in einem englischsprachigen Backend deutsche Artikeltexte als erstes gesehen hat, weil Deutsch die Sprache des Hauptshops war, sind vorbei. Loggt man sich nun in die Administration ein, werden die Übersetzungen passend zur Benutzersprache geladen, wenn sie gepflegt sind.

Fernab der optischen Änderungen in der Administration fällt einem direkt der extrem schnelle Seitenaufbau auf. Hier merkt man deutlich, was der Technologiewechsel von der in Shopware 5 eingesetzten Ext-JS-Version zum aktuellen Vue.js gebracht hat. Der durchschnittliche TTFB liegt bei 50 ms und ist nicht die Ausnahme, sondern die Regel – auch bei größeren Datenmengen. Dabei greift die Administration auf die gleichen API-Funktionen zu, die man zum Beispiel auch für einen ERP-Konnektor verwenden kann. Sprich: Jede Konfigurationsmöglichkeit in der Administration kann man auch via API erledigen.

Abbildung 1: Die neue Login-Maske von Shopware 6

Abbildung 1: Die neue Login-Maske von Shopware 6

 

Abbildung 2: Die neue Administrationsoberfläche

Abbildung 2: Die neue Administrationsoberfläche

Erlebniswelten

Shopware 6 bietet viele neue Funktionen, die das Verkaufen vereinfachen und Entwicklern sowie Onlinehändlern eine Reihe von Freiheiten bieten. Ein besonderes Augenmerk sollte man auf die Erlebniswelten legen. Die sind der offizielle Nachfolger der allseits bekannten Einkaufswelten. Im Vergleich zum Vorgänger sind die Erlebniswelten vollständig im System integriert. Nicht nur die Gestaltung von Kategorien und Landingpages ist nun möglich, sondern auch Inhaltsseiten, Formulare, Blogs usw. sind damit umsetzbar. Man kann praktisch jede Inhaltsseite im Onlineshop individuell gestalten – und das in jedem verfügbaren Verkaufskanal.

Die Erstellung einer Erlebniswelt ist denkbar einfach, sodass auch nicht designaffine Menschen überzeugende und fesselnde Einkaufserlebnisse erstellen können. Unterstützend stehen dafür viele Standardvorlagen (Inhaltsblöcke wie Produktboxen, Videos, Social-Media-Feeds und Textblöcke) zur Verfügung. Als weitere Erleichterung sind Elemente nun vollständig responsiv, das heißt, es müssen keine Viewport-spezifischen Erlebniswelten erstellt werden wie es früher bei den Einkaufswelten noch der Fall war.

Rule Builder

Dank des neuen Rule Builders können Anwender und Entwickler Regelsets erstellen – und zwar mit allen Bedingungen, die man sich vorstellen kann. Sets wie z. B. „Rabatte nach Wochentagen“, „Versand nach Kundenarten“, „Zahlungsart nach Produktkategorie“ sind nur einige Beispiele, die zeigen wie umfangreich das neue Regelsystem ist. Damit ist es nun viel einfacher möglich, die eigenen Prozesse in Shopware zu implementieren, anstatt die eigenen Workflows an Shopware anzupassen. Das neue Regelsystem ist in allen Modulen umgesetzt. Zum Beispiel können nun auch Versandkosten ohne aufwendige SQL-Tricks kinderleicht in der Administration erstellt werden. Zusätzlich ist der Rule Builder mit wenig Aufwand über das Plug-in-System erweiterbar, um spielend einfach eigene Regelbedingungen oder auch Regeln, die auf eigenen Datenbanktabellen basieren, erstellen zu können.

Die direkte Integration der neuen Regeln in die Shopware-Administration runden das Thema ab. Man muss nicht zwingend eine eigene Vue.js-Komponente dafür entwickeln und kann somit auf einen Preset an Vorlagen zurückgreifen. Sollten diese Vorlagen einen Anwendungsfall doch einmal nicht vollständig abbilden können, besteht immer noch die Möglichkeit, sie zu erweitern oder vollständig selbst zu entwickeln – je nachdem, was man als Entwickler bevorzugt. Auch eine Integration in die eigenen Administrationsmodule ist möglich. Man muss auch hier das Rad nicht neu erfinden und kann sich über die vorhandenen Standardkomponenten am Regelsystem bedienen.

Data Abstraction Layer (DAL)

Der Data Abstraction Layer ist eine eigens entwickelte Abstraktionsschicht (Abb. 3), mit der man auf die notwendigen Daten einer E-Commerce-Plattform zugreifen kann. Sie stellt Lösungen für die gängigen Herausforderungen im E-Commerce-Kontext zur Verfügung, sei es das schnelle Hinzufügen neuer oder veränderter Datensätze oder das performante Auslesen eben dieser Daten.

Des Weiteren liefert der DAL Standardlösungen für die Übersetzbarkeit von Entities, Versionierung und eine automatische Integration des eigenen API. Das heißt, ein Entity, das vollständig definiert und konfiguriert wurde, ist auch direkt im API vollständig nutzbar.

Der DAL betreibt Separation of Concerns anhand der unterschiedlichen Anwendungsfälle, die eine Datenschicht aufweist. Das heißt, es gibt jeweils eine Implementierung für einen Writer, Reader, Searcher und Aggregation, wodurch die darunter liegende Storage-Engine nicht ein und dieselbe sein muss. Abbildung 3 zeigt die grundsätzliche Architektur der Komponente.

Ein Entity repräsentiert die Daten einer einzelnen Zeile einer Datenbanktabelle. Diese kann auch verknüpfte Daten enthalten. Zum Beispiel ist bei einer ProductEntity auch der Hersteller verfügbar. Eine Collection ist das Ergebnis einer DAL-Suche. Sie enthält Helfermethoden (z. B. „Sortiere mir das Ergebnis nach folgenden Kriterien“) und Metainformationen basierend auf der Suche. In einer Definition sind alle notwendigen Konfigurationen hinterlegt, die die jeweiligen Datenbankfelder und ihre Verknüpfungen zu anderen Datenbanktabellen besitzen. Des Weiteren wird dort die zu verwendende Entity- und Collection-Klasse definiert.

Das Repository ist ähnlich wie bei Doctrine ORM der zentrale Zugriffspunkt, um mit der hinterlegten Storage-Engine zu kommunizieren. Es beinhaltet alle Basismethoden, um mit den gespeicherten Daten zu arbeiten. Alle DAL-Requests triggern Events, um eine Verarbeitung innerhalb Shopwares anzustoßen. Sei es das Hinzufügen statischer Daten, das Auslösen einer Neuindizierung oder die Verarbeitung eines Dateiuploads. Das soll als grober Einblick dienen. Wir werden im nächsten Teil der Artikelserie tiefer ins DAL eintauchen und uns anschauen, wie es unter der Haube genau funktioniert.

Abbildung 3: Blick auf die Abstraktionsschicht

Abbildung 3: Blick auf die Abstraktionsschicht

Systemvoraussetzungen

Um die Shopware 6 Dev Preview installieren zu können, benötigt man mindestens PHP in der Version 7.2, mindestens MySQL 5.7.21 oder MariaDB 10.3 und Apache 2.4 oder aktueller. Die exakt benötigten Einstellungen und Module sind unter www.docs.shopware.com zu finden.

Fazit

Shopware 6 mit seinen Neuerungen (Kasten: „Shopware 6 im Überblick“) steht ab Juli 2019 offiziell zur Verfügung und kann bereits jetzt schon ausgiebig getestet werden. Für Nutzer von Shopware 5 gibt es aber gute Nachrichten: Die Shopware 5-Linie ist eine sehr stabile, erprobte und leistungsfähige E-Commerce-Lösung. Auch nach dem Release von Shopware 6 wird Shopware 5 weiterentwickelt und mit Long Term Support für 5 Jahren ausgestattet. Im nächsten Teil dieser Serie werden wir uns der neuen API widmen und schauen, wie wir Artikel und Kategorien in den Shop bekommen.

Shopware 6 im Überblick

  • bietet Händlern und Entwicklern maximale Freiheit und Flexibilität
  • entwickelt nach dem API-First-Ansatz
  • Symfony Full Stack inkl. Vue.js-Administration
  • neue Erlebniswelten inkl. vollständig responsiv auf allen Viewports
  • neuer Rule Builder
  • neues Promotionsystem

 

PHP Magazin

Entwickler MagazinDieser Artikel ist im PHP Magazin erschienen. Das PHP Magazin deckt ein breites Spektrum an Themen ab, die für die erfolgreiche Webentwicklung unerlässlich sind.

Natürlich können Sie das PHP Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -