E-Commerce mit AngularJS

Christof Mayr leitet seit Februar 2014 als Segway Landesvertretung für Vorarlberg einen Store in Wolfurt. Im Mai 2014 feierte sein Team die Eröffnung. Wir gewähren einen kurzen und technisch wirklich nur leicht angehauchten Einblick in die Entstehung des Webshops.

Webstore

Für den Webauftritt wagten wir etwas komplett Neues: Einen, von Grund auf selbst entwickelten eStore mit integrierter Planung der Touren und einem Guide-System für die Tourbegleiter. Das Besondere dabei: Während das Front-End mit gewöhnlichem PHP und Javascript funktioniert, haben wir das Back-End mit AngularJS und der RESTful Technologie ausgestattet.

Anforderungen
Zunächst galt es, die Anforderungen zu definieren. Der vernünftigen Empfehlung, ein bestehendes Open-Source-Shop (zb. Magento oder WooCommerce) zu verwenden, konnten wir aufgrund der Spezialanforderungen nicht nachkommen. Auch ein reines Buchungssystem kam schlussendlich nicht in Frage, da wir beide Komponenten benötigen – ein Produkt wie auch eine Buchung, aber auch Spezialaufgaben für das Back-End, wie zum Beispiel das Planen von Vermietungen, Spezial-Events und den Status der verfügbaren Geräte. Somit entwickelten wir für das Front-End ein Template basierender Webshop. Es können fixierte Touren gebucht, aber auch Produkte wie zb. Gutscheine erworben werden. Durch den Check-Out bieten wir drei Bezahlmöglichkeiten (unter anderem auch die Kreditkartenbezahlung über den Payment-Anbieter mPay24) an.

Back-End

Wir geben zu: Auf dieses Back-End sind wir mächtig stolz. Viele Stunden an Konzeptionierung (wir haben mitgezählt, es waren über 50 Stunden) und einige Liter Kaffee waren vonnöten, bevor wir mit der eigentlichen Arbeit beginnen konnten. Wer mit AngularJS bereits Erfahrung hat, weiß wovon wir sprechen:

  • Grundsatzfrage Dynamik: JS Dateien dynamisch zu laden ist schwierig bis unmöglich. Leider bis dato noch ein komplexes Thema bei AngularJS
  • die Integration des richtigen Routers (Wir empfehlen den UI Router)
  • Sicherheitsrichtlinien, Zugriffsrechte, Anmeldeprozesse und Benutzerrollen
  • Weg von jQuery
  • Zusatzmodule
  • Dependencies, Aktualisierung der einzelnen Datensätze / Items
  • Kommunikation zwischen Front-End und Back-End, vor allem der Datenabgleich zwischen Server und Client
  • 100% Responsive

CMS

Unser Store bietet ein komplexes Content-Management-System.

  • Beiträge: Beiträge (zb. Blogs oder News) schreiben, editieren, löschen
  • Seiten: Seiten anlegen, editieren, löschen
  • Mediathek: Bildverwaltung. Dank der Template-Engine können Elemente an verschiedenen Stellen der Seite immer wieder verwendet werden
  • Module: Jede Seite kann mit Modulen (Textbausteine, Slideshows, Produktverknüpfungen, etc.) bestückt werden. Diese wiederum sind jederzeit erweiterbar

Shop

Die Auftragsverwaltung an sich unterscheidet sich im Grunde nicht stark von bekannten Systemen: Verwaltung der Aufträge, Benachrichtigung des Kunden über ein Kommentarsystem, Statusänderungen der Aufträge, etc.

Touren

Das große Extra: Touren als Bestellungen werden extra gegliedert und können von Administratoren verwaltet werden. Zusätzlich zu den Touren, welche auch aus dem Front-End bestellt werden können, gibt es noch weitere Eigenschaften und vor allem Planungsmöglichkeiten.

Guides
Jeder Guide (ausgebildeter Segway-Driver, der die Touren begleitet) erhält einen eigenen Zugang. Sein Dashboard informiert ihn über die aktuellen Touren, welchem ihm zugeteilt wurden.

Offert-Builder

Um den vielen Anfragen gerecht zu werden, entwickelten wir den Offert-Builder. Im Handumdrehen lassen sich Offerte generieren, welche als PDF exportiert oder direkt via Mail an den Kunden versendet werden können.

Fazit
Die Arbeit mit AngularJS macht Spaß. Und zwar so richtig. Obwohl die Umsetzung des Kommunikationsgerüsts zwischen AngularJS und PHP eine Herausforderung darstellte, können wir nun auf eine solide Struktur vertrauen. Wir finden, das Ergebnis kann sich auch sehen lassen. Für die Zukunft gibt es noch viel zu tun, die Weichen dafür sind dafür schon gestellt:

  • Kundenlogin mit persönlichem Dashboard, Hinweise zur aktuellen Tour, Wetterbereicht etc.
  • Kommunikation zwischen Guide und Zentrale über eine App

Workflow
Während unser Philipp das Layout für das Front-End entwickelte, konnten wir das System im Back-End salonfähig machen – Teamwork par excellence.

Nachwort
Wir verwendeten bei diesem System bewusst kein serverseitiges Javascript. Obwohl wir zuerst mit diesem Gedanken spielten (unser Chrontab verwendet unter anderem die node.js Technologie), verwarfen wir diesen, da eine Integration in bestehende Fremdsysteme damit ernsthafte Probleme hervorrufen würde. So können wir Dank der Template-Engine das Front-End an alle Seiten bzw. Layouts anpassen, jedoch das Back-End nach unseren Vorgaben weiterentwickeln.

Haben Sie Fragen zu unserem Know-How in Sachen AngularJS oder Javascript? Gerne informieren wir Sie bei einem persönlichen Gespräch. Hier entlang, bitte.


Stefan Hagspiel
Über den Autor: Stefan Hagspiel

Stefan Hagspiel ist Entwickler bei Mayr Record Scan.
Auf Google+ findet man ihn .

Inhaber
Mayr Record Scan GmbH
Abteilung: Web Semantic
Kirchstraße 13a
6922 Wolfurt

Verantwortlich
Stefan Hagspiel
Tel: 0043 664 831 99 08
Mobil: 0043 5574 75945 13
Mail: mrs.to:::s.hagspiel