Entwicklung eines Onlineshops mit Commercetools in einem Tag

Stellt die Kombination aus GraphQL und Headless die Zukunft für E-commerce CMS Systemen dar?

Daniel Riedl
Jan 7, 2020 · 6 min read

Geschrieben von Stefan Pernpaintner, David Hettler & Daniel Riedl

Skalierbarkeit, kurze Time-To-Market Zeit, einfache Administration des Backends und Flexibilität bei der Gestaltung des Frontends: Das sind die Anforderungen, die gestellt werden, wenn es sich der Kunde ein neues Shopsystem wünscht. Diesen Herausforderungen stellt sich die commercetools Plattform. In diesem Blogbeitrag beschreiben wir, wie in kurzer Zeit und ohne großes Vorwissen ein funktionsfähiger und moderner Webshop erstellt werden kann.

Neue Wege mit Commercetools

In Zeiten von superlativen Online-Handelsmonopolen mag es zunächst abwegig erscheinen einen eigenen Webshop aufbauen zu wollen — rechnet sich das überhaupt? Die Praxis zeigt dann aber doch, dass nur die wenigsten Unternehmen, die auch nur im Entferntesten mit Handel zu tun haben, auf dieses Privileg verzichten. Ein Grund dafür mag sein, dass es uns diverse Shopsysteme heutzutage so einfach machen wie nie, den eigenen digitalen Einkaufsladen aus dem Boden zu stampfen. Die Wahl des richtigen Systems ist schwierig, denn alle haben ihre Vor- und Nachteile und alle befriedigen die individuellen Bedürfnisse mal mehr und mal weniger gut.

Für den Entscheidungsprozess lohnt sich dann ein Blick auf den “Magic Quadrant For Digital Commerce”, der regelmäßig vom Marktforschungsinstitut Gartner herausgegeben wird. Wer auf Nummer sicher gehen will wählt aus diesem Bericht einen der “Leader”, also Marktführer. Dahinter verbergen sich zum jetzigen Zeitpunkt die üblichen Verdächtigen wie SAP Hybris, salesforce, Oracle, IBM, gähn.

Wem jedoch nach etwas Neuem ist, schaut in der Liste der “Visionaries”. Gartner versteht unter “Visionären” jene Unternehmen, die versuchen den Markt mit disruptiven Ideen, origineller Preispolitik oder neuartigen Technologien zu durchdringen. Als Neuankömmling reiht sich nun commercetools in die Riege der Visionäre ein. Doch womit verdient commercetools diesen Titel?

API-first mit commercetools

Im Unterschied zu den etablierten Shopsystemen wie SAP Hybris oder Magento verfolgt commercetools einen Schnittstellen-getriebenen “API-First” Ansatz. Während die genannten Systeme holistische Lösungen sind, in denen Front-End und Back-End miteinander verschmelzen, fokussiert sich commercetools nur auf den letzteren Teil: das Back-End. Commercetools bietet das an, was man als Laie als “Shop-As-A-Service” bezeichnen würde und Kenner heutzutage “Headless Commerce” nennen. Dahinter steckt die Idee das gesamte Shopsystem über APIs verfügbar zu machen, die dann von den verschiedenen Clients, also Single-Page-Apps, Smartphone-Apps oder Verwaltungs-Skripten, angesprochen werden können.

Merchant Center als Herzstück

Um dieses Ziel zu erreichen stellt commercetools eine headless Plattform bereit, die sowohl per REST- als auch über eine saubere und intuitive GraphQL Schnittstelle angesprochen wird. Hinter dieser Schnittstelle befindet sich das Merchant Center, über das die gesamten Daten des Backends für einen umfangreichen Shop verwaltet werden können: Produkte, Kategorien, Preise, Account …. — das Merchant Center ist das Herzstück zur Verwaltung des eigenen commercetools Projekts. Es kommt mit einem schlüssigen, aufgeräumten und daten-orientierten Bedienkonzept daher und hält dabei die Einstiegshürde zum Backend extrem niedrig. Man findet sich auf Anhieb gut zurecht, so dass das Hinzufügen von Artikeln und Kategorien keinen großen Aufwand darstellt.

One API to rule them all — GraphQL

Der Zugang zum Backend wird über eine GraphQL Schnittstelle realisiert. GraphQL ist eine Abfragesprache, über die dedizierte Datenmengen aus dem Backend abgefragt werden. So ist es möglich exakt die Menge der benötigten Daten in das Frontend zu laden, die für die aktuelle Ansicht benötigt werden. Vorbei also die Zeiten, bei denen schwergewichtige Antworten an das Frontend geliefert werden und deren Datenumfang schlichtweg unpassend für das Frontend gewesen sind. Egal ob das Frontend den Warenkorb, die Artikel einer speziellen Kategorie oder einfach nur die eigenen Profildaten benötigt, all diese Daten können im speziell benötigten Umfang von genau einer Schnittstelle geliefert werden: Der GraphQL API.

Um sich ein Bild über die GraphQL API zu machen, empfiehlt es sich als Einstiegspunkt den GraphiQL API Playground zu nutzen. Dort ist es möglich über eine graphische Oberfläche Queries zu senden und das commercetools Domänenmodell zu erforschen, welches als GraphQL Schema definiert ist. Eine weitere Quelle, um sich mit GraphQL vertraut zu machen, bietet die Dokumentation.

Lose Kopplung vom Frontend

Wie oben erwähnt handelt es sich bei commercetools um eine Plattform, die ohne Frontend für den Enduser existiert. Damit folgt commercetools dem Trend von ‘headless’ basierter Software wie Elastic Path oder Digital River und ermöglicht die Wiederverwendbarkeit der Applikation für verschiedene grafische Oberflächen. Man kann somit leicht das Frontend im bevorzugten Framework wie React oder Angular selber entwickeln und sein eigenes Custom Layout erstellen.

Der Hersteller bietet jedoch zusätzlich ein UI Template an, das einen guten Startpunkt für das eigene individuelle Frontend bilden kann. Mit der SUNRISE SPA QUICKSTART erhält man ein in Vue.js geschriebenes Frontend, welches alle grundsätzlichen Funktionen eines Webshops anbietet. Der Einkaufskorb ist ebenso enthalten, wie die Suche und die Anzeige der Produkte nach verschiedenen Kategorien. Selbst als unerfahrener Vue.js User findet man sich schnell im Projekt zurecht und erkennt Konzepte und Struktur, die es ermöglichen das Projekt je nach Bedarf an das eigenen Design anzupassen. Mit ein paar kleinen Anpassungen am Code, sowie ein paar Klicks im Merchant Center, haben wir das Branding der Shopseite geändert und ein Produkt angelegt, der dann in unserem Shop zum Verkauf stand.

Commercetools ist somit mehr auf Kunden fokussiert, die auch die Kapazität haben sich eine eigene GUI zu erstellen, oder ihr vorgelegtes Template anzupassen. Andere Shopsystem bieten hierbei oftmals ein Sortiment von verschiedenen Themes an, womit direkt ein fertig designter Shop verfügbar ist. Im Vergleich zu commercetools büßen dafür fertige Shopsysteme hier an Flexibilität und Individualisierbarkeit ein.

Netlify übernimmt den Betrieb

Auch an den Betrieb hat commercetools gedacht. So konnten wir ohne großen Probleme mehr oder weniger auf Knopfdruck einen Klon des SUNRISE Projekts auf der Webhosting-Plattform Netlify ausrollen. Die Einrichtung der Plattform ist denkbar einfach und binnen weniger Minuten erledigt. Sobald das Frontend Repository erstellt wurde können wir dessen URL Netlify per Weboberfläche mitteilen. Nachdem der Github-Autorisierung mittels OAuth zugestimmt wurde checkt Netlify den Code aus und startet den Deployment Prozess. Nach einer kurzen Wartezeit springt der Status auf “Published” und wir können sogleich unseren frisch angelegten Shop über eine randomisierte, öffentliche URL ansurfen. Beim Betrachten der Seite fällt auf, dass zwar alle Bedienelemente sichtbar sind aber keine Produkte da zu sein scheinen. Der Grund dafür ist schnell gefunden: um Daten vom Backend abrufen zu können muss sich die App zunächst gegen das Backend authentifizieren. Client Credentials können wir uns im Merchant Center generieren lassen. Die Credentials tragen wir bei Netlify als Umgebungsvariablen ein (siehe Abb.), laden die Seite neu und schon klappt die Anbindung! Der Shop steht und ist betriebsbereit.

Fazit

Als Fazit lässt sich festhalten, dass es mit commercetools überraschend schnell und einfach möglich ist, einen funktionsfähigen Shop aufzubauen. Der Artikel hat gezeigt, dass commercetools hierfür mit seinem Backend (Merchant Center), der sauberen GraphQL Schnittstelle und dem Quickstart Projekt SUNRISE SPA sehr gute Bausteine bereithält. Ausgehend davon lässt sich die UI des eigenen Shops in der vollen Breite individualisieren, was zu einer klaren Abgrenzung gegenüber fertigen Shopsystem wie Magento oder Jimdo führt.

Was allerdings nicht im Umfang des Quickstart Projekts enthalten ist, ist die Integration von Bezahl-Providern. Der Bezahlprozess wird aktuell nicht von commercetools abgedeckt. Einige PSP liefern allerdings bereits fertige Integrationsbausteine, die im eigenen Shop eingebunden werden können (https://docs.commercetools.com/http-api-projects-payments).

Allgemein ist der Ansatz GraphQL mit einer Headless API zu kombinieren sehr vielversprechend und erlaubt Kunden sehr viel Spielraum um sich mit Individualität von der Konkurrenz abzuheben.

Wir erarbeiten anspruchsvolle und innovative Softwarelösungen mit großer Leidenschaft. Projekte betreuen wir ganzheitlich und mit voller Transparenz: Sie bekommen von uns alles aus einer Hand. Bei der Entwicklung von Lösungen orientieren wir uns an zwei Phasen…

SHOW ME THE JOBS!

This blogpost is published by Comsysto Reply GmbH

comsystoreply

Innovation through insight.

comsystoreply

Innovation through insight. Thinking lean and moving agile when delivering software products for the digital era.

Daniel Riedl

Written by

comsystoreply

Innovation through insight. Thinking lean and moving agile when delivering software products for the digital era.