MNM Shop - Wie baut man sich eigentlich einen individuellen Onlineshop?

veröffentlicht am: 19. Januar 2021

Spätestens im April 2020 wurde klar, dass das Coronavirus wohl nicht so schnell wieder aus unserem Alltag verschwinden würde. Überall waren die Mund-Nase-Masken vergriffen oder in nicht ausreichender Stückzahl verfügbar. Umgehend haben wir uns mit unseren Partnern in Verbindung gesetzt und Möglichkeiten erarbeitet, diesem Mangel entgegenzuwirken.

Als sich diese Phase einem erfolgreichen Abschluss näherte, musste der Vertrieb geklärt werden. Wie erreicht man auch die potentiellen Interessenten außerhalb unseres Kundenstammes? Für uns als Unternehmen, das neben einer Print- auch über eine Digitalunit verfügt, stand fest, es muss ein Onlineshop eingerichtet werden und es muss schnell gehen!

Durch unsere Recherchen wussten wir, wie groß der Markt für Shopsysteme ist. Also wo fangen wir an? Eine WordPress Seite erstellen und das WooCommerce Plugin einbinden? Einen Shop mit Shopware oder Magento aufbauen? Einen Dienst wie Shopify nutzen? Kurze Zeit später war klar, dass wir entweder mit einer für unsere Wünsche komplett überdimensionierten Software arbeiten müssten oder die Systeme über derartig wenige Möglichkeiten der Preis- und Layoutgestaltung verfügen, dass wir damit nicht das umsetzen können, was wir uns vorstellen.

Wir bauen selbst! Die Anforderungen standen fest. Ein modernes Layout. Eine intuitive und einfache Bedienung. Dynamisches Anpassen der Inhalte ohne wiederholtes Laden einer neuen Seite. So fiel die Entscheidung für das Javascript Framework Vue.js bzw. dem Material Design Framework Vuetify.js. In Verbindung mit dem Utility-First CSS Framework Tailwind hatten wir die Werkzeuge an der Hand, einen Shop nach unseren Vorstellungen zu bauen: schnell, unkompliziert und flexibel.

Dafür liefert Vuetify.js über die bereits vorgefertigten UI Components eine perfekte Grundlage, um nicht alles selbst bauen zu müssen. Ähnlich einem Homepagebaukasten konnten wir so zügig einen Shop nach unseren Vorstellungen zusammensetzen. Unsere Nutzer werden damit zielgerichtet durch den Bestellvorgang geführt und im Hintergrund werden automatisiert die Daten zusammengetragen und die Preise kalkuliert.

Das ist jedoch nur die halbe Miete. Wir haben ein schickes Frontend, aber wie verarbeiten wir die gewonnenen Daten weiter? Es gehört mittlerweile schon fast zum Standard, dass hinter dem Frontend auch ein solides Backend steht, welches die Basis bildet. Die Möglichkeiten sind auch hier vielfältig. Um möglichst unabhängig von der Konfiguration unseres Webservers zu sein, entschieden wir uns für Googles Entwicklungs-Plattform Firebase. Ein Backend-as-a-Service mit Optionen unter anderem für Datenbanken, Speicher und JavaScript Funktionen. Perfekt!

Nachdem sich also zu unserem Frontend nun mit Firebase auch eine hervorragende Lösung für das Backend gefunden hatte, konnte unser Shop Live gehen. Das Deployment war denkbar einfach. Lediglich die wenigen Dateien aus der lokalen Entwicklungsumgebung auf den Server kopieren - fertig! Denn durch die cloudbasierte Lösung mit Firebase mussten keine weiteren Daten, die für das Backend nötig gewesen wären, übertragen werden.

Es wird sicher nicht das letzte Mal gewesen sein, dass wir mit diesen Werkzeugen ein Projekt umsetzen. Immer mehr Websites fühlen sich an wie Apps, die wir von unseren mobilen Geräten kennen. Auch unser Shop ist responsiv und über Smartphone und Co. optimal nutzbar. Die optische Anlehnung an eine App ist dabei durchaus beabsichtigt. Viele der uns bekannten Programme wie beispielsweise Spotify sind eigentlich Websites, die als sogenannte Progressive Web App (PWA) browserbasiert laufen. Das Einzige, was man dabei nicht sieht, ist - der Browser. Mit Vue.js, Tailwind CSS und Firebase im Werkzeugkasten haben wir alles, was wir für die Umsetzung brauchen und wir freuen uns darauf, für unsere Kunden damit spannende Projekte umzusetzen.

Quellen:

#pwa #onlineshop #website #frontend #backend