Entwicklertagebuch: JTL-Wawi App
Maria Maria

Mobile App Entwicklerin

E-Commerce to go! JTL-Wawi App jetzt als Open Beta testen

Es ist zwar noch nicht Weihnachten und trotzdem erfüllen wir Euch einen großen Wunsch: Mit der JTL-Wawi App nutzt Ihr die Basisfunktionen Eurer Warenwirtschaft nun auch unterwegs. Ob im Außendienst oder auf Geschäftsreise, ab sofort könnt Ihr Aufträge, Angebote und Kundendaten von überall erfassen und bearbeiten. Was dazu entwicklungsseitig nötig war und welche To-dos in den kommenden Monaten auf unserer Agenda stehen, präsentiere ich im heutigen Entwicklertagebuch.

JTL-Wawi App: Eine Vision wird Wirklichkeit

Die JTL-Wawi App war eine schon lange gehegte Vision unseres Geschäftsführers Thomas Lisson. Als er mit der Projektidee an uns herantrat, waren auch wir sofort Feuer und Flamme. Doch nach der anfänglichen Euphorie drängten sich schnell erste Fragen auf: Wie überträgt man ein so komplexes Tool wie JTL-Wawi in eine mobile Anwendung? Und mit welcher Funktion wollen wir beginnen? Da die einzelnen Arbeitsbereiche unserer Warenwirtschaft eng miteinander verzahnt sind, war dies keine leichte Entscheidung – und letztlich doch eine offensichtliche. Denn womit beginnt jeder Handel? Richtig. Mit einem „Auftrag“.

Natürlich brauchten wir für ein solches Vorhaben zunächst einmal ein technisches Grundgerüst. Daher haben wir uns sehr intensiv mit den beiden Apps beschäftigt, die bereits im JTL-Kosmos existieren: JTL-POS und JTL-WMS Mobile. Ihre Funktionen und ihren Code-Aufbau haben wir mit den Anforderungen abgeglichen, die wir für die JTL-Wawi App definiert hatten.

Unsere Kassenapp JTL-POS funktioniert beispielsweise nur für Android, die JTL-Wawi App sollte aber auch für iOS-Geräte nutzbar sein. Um nicht für zwei Betriebssysteme coden zu müssen, haben wir uns hier eines Microsoft Frameworks bedient, das wir bereits für JTL-WMS Mobile verwendet haben.

Bei einem Framework handelt es sich um einen vorgefertigten Baukasten mit vielen Werkzeugen für Entwickler. Darunter z. B. Code-Schnipsel oder Regeln, die man flexibel für das eigene Projekt zusammensetzen kann. Der Vorteil des von uns gewählten Microsoft Frameworks ist, dass wir nativ in C# coden konnten und unsere Code-Zeilen anschließend automatisch für Android und iOS aufbereitet wurden. Obwohl wir an manchen Stellen manuell noch nachbessern mussten, erleichtert und beschleunigt ein solches Framework die Entwicklung von Apps enorm.

JTL-WMS Mobile: Picklistenansicht
Picklistenansicht in JTL-WMS Mobile
JTL-WMS Mobile: Nachschub bestellen
Die Benutzeroberfläche von JTL-WMS Mobile wurde speziell für Lagerarbeit entwickelt.

Prototyp im Praxistest

Mithilfe des leicht modifizierten Frameworks und unserer Vorerfahrungen aus der Entwicklung von JTL-WMS Mobile waren wir relativ zügig in der Lage, einen ersten Prototyp für die JTL-Wawi App zu erstellen. So konnten wir vor allem die Usability einem intensiven Praxistest unterziehen, bei dem uns auch unsere Kolleg:innen tatkräftig unterstützt haben. Wir wollten sehen, ob beispielsweise Klickwege intuitiv gestaltet sind, oder ob es irgendwo zu Ladeverzögerungen o. Ä. kommt.

JTL-Wawi-App Screenshot Burgermenü
Im Menü der JTL-Wawi App befinden sich die wesentlichen Funktionsbereiche der Warenwirtschaft.
JTL-Wawi App Welcome Screen

Im Bereich Design und Animation haben wir ab diesem Zeitpunkt eng mit unserem Design-Team zusammengearbeitet, um sicherzustellen, dass die Benutzeroberflächen (UI) den allgemeinen Vorgaben des Corporate Designs von JTL entsprechen. Da wir uns beim visuellen Eindruck aber an JTL-WMS Mobile und damit an dem Material Design von Android orientiert hatten, bekamen wir von unseren Design-Kolleg:innen schnell grünes Licht und konnten bei der Entwicklung einen Gang höher schalten.

Wünscht Euch was! Frühes Feedback aus der Community

Die JTL-Wawi App wollten wir möglichst nah an Euren Bedürfnissen entwickeln und haben daher schon früh Euer Feedback eingeholt: Manuel Pietzsch hat Euch das Grundgerüst in einem YouTube-Video vorgestellt und Euch gebeten, uns Eure Feature-Wünsche mitzuteilen.

Wenn Ihr mögt, könnt Ihr Euch das Video inklusive kleiner Feature-Preview noch einmal ansehen:

Ausgestattet mit Eurem Feedback zu unserer bisherigen Arbeit konnten wir nun wieder die Ärmel hochkrempeln und tief in die Konzeption weiterer Funktionen einsteigen – natürlich nicht ohne regelmäßige Absprachen mit den entsprechenden Teams der JTL-Wawi-Entwicklung. Immerhin mussten wir ein Gefühl dafür bekommen, wie man einen so wichtigen Bereich wie den „Auftrag“ auf die zentralsten Features reduziert, gleichzeitig aber so viel Funktionalität erhält, dass die App tatsächlich einen Mehrwert für Euch bietet.

Außerdem zieht das Thema „Auftrag“ weitere Abhängigkeiten nach sich: Wenn Ihr unterwegs bei Euren Kunden seid und einen Auftrag direkt auf Eurem Smartphone anlegt, müsst Ihr dafür auch Zugriff auf den Bereich „Kunden“ und „Artikel“ haben. Aus solchen Überlegungen ergab sich für uns dann schnell eine sehr konkrete Agenda für unsere Entwicklungsarbeit der nächsten Monate.

Dürfen wir vorstellen? Die ersten Funktionen der JTL-Wawi App

Und so ist das Grundgerüst von JTL-Wawi App aufgebaut: Innerhalb unserer App steuert Ihr die einzelnen Bereiche über ein übersichtliches Menü an. Beim „Auftrag“ lässt sich der passende Eintrag mithilfe einer „Auftragsnummer-Suche“ schnell finden. Diesen könnt Ihr Euch entweder anzeigen lassen oder direkt bearbeiten. Natürlich ist es auch möglich, einen komplett neuen Auftrag anzulegen.

JTL-Wawi App: Aufträge
Die Suchmaske für Aufträge ist in der JTL-Wawi App schlicht gehalten.
JTL-Wawi App: Kundensuche
Kunden können per Name, Firma und Kundennummer gefunden werden.
JTL-Wawi App: Screenshot Kundendaten anlegen
Die JTL-Wawi App führt beim Anlegen eines Kunden Schritt für Schritt durch die Dateneingabe.
JTL-Wawi App: Screenshot Zahlungsarten
Auch Details wie die Zahlungsart eines Auftrags können in der JTL-Wawi App eingegeben werden.

Gleiches gilt für den entsprechenden Kundendatensatz, den Ihr diesem Auftrag nun hinzufügen könnt, nachdem Ihr entweder danach gesucht oder ihn als Datensatz mobil angelegt habt. Ihr könnt auch die einzelnen Positionen Eures Auftrags bearbeiten und weitere Klicks führen Euch zu Einstellungen für die Zahlungs- und Versandart. Sobald Ihr diesen Prozess abschließt, wird der entsprechende Auftrag in Eure lokale JTL-Wawi geladen, wo ihn beispielsweise Eure Mitarbeiter:innen weiter bearbeiten können.

Darüber hinaus stehen Euch in der JTL-Wawi App Open Beta u. a. folgende Funktionen zur Verfügung:

  • Filtersuche per Stichwort, Artikel-, Kunden-, Auftrags- oder Angebotsnummer
  • Bearbeitungshistorie zur lückenlosen Nachverfolgung
  • Notizfeld zur Dokumentation spezieller Informationen
  • Aktuelle Übersicht laufender Aufträge
  • Bild- und Textdateien als Anhang bei Aufträgen oder Angeboten anfügen
  • Bearbeitung von Kontakt- und Zahlungsinformationen
  • Festlegung von Lieferprioritäten
  • Integration manueller Workflows wie das Drucken von Auftragstexten

Unsere größten Herausforderungen

Ich will nicht verschweigen, dass es im Entwicklungsprozess natürlich immer wieder Phasen gab, die uns vor Herausforderungen gestellt haben. Aber wir freuen uns, dass wir für viele dieser Fallstricke gute Lösungen gefunden haben, die auch unseren Praxistest bestanden haben:

Übersichtlichkeit

JTL-Wawi ist ein sehr mächtiges Tool, um alle Prozesse Eures Onlinehandels zentral zu steuern. Wie ich bereits angedeutet hatte, stellte uns aber genau das vor die Herausforderung, wie sich zentrale Bereiche für eine mobile Anwendung am sinnvollsten komprimieren lassen. Bei Basisfunktionen wie „Historie“ oder „eigene Felder“ merkten wir beispielsweise schnell, dass durch ihre Verwendung sehr viele Tabs geöffnet werden, was die Arbeit in der App unübersichtlich machen könnte.

Da vom Tablet-PC bis hin zum Smartphone die Bildschirmgrößen sehr unterschiedlich sind, lassen wir Euch hier die freie Wahl: Für jeden Hauptbereich könnt Ihr individuell einstellen, welche Tabs angezeigt oder ausgeblendet werden sollen. Auch könnt Ihr beliebig zwischen Listen- und Kachelansicht wechseln, um die Darstellung zu finden, die am besten zu Eurer Bildschirmgröße und Arbeitsweise passt.

JTL-Wawi App: Screenshot Einstellungen
In den Einstellungen der JTL-Wawi App kann ein Server bearbeitet oder hinzugefügt werden.

Server und Datensicherheit

Technisch herausfordernd war auch die Kompatibilität der Serverversionen: Die stationäre Version von JTL-Wawi wird von den meisten Kunden erfahrungsgemäß nur bei größeren Versionsschritten upgedatet, eine App hingegen sehr regelmäßig und oft automatisch. Da kann es passieren, dass die mobile Anwendung aktueller ist als die stationäre. Um zu verhindern, dass beispielsweise Features in der App als verfügbar angezeigt werden, welche die stationäre Version von JTL-Wawi noch gar nicht abdeckt, ist es wichtig, dass Euer Server der JTL-Wawi App Informationen über die unterstützten Features, die aktivierten Optionen und die Benutzerrechte mitteilt.

Eine weitere Entwickler-Nuss, die wir knacken mussten, war die Sicherheit bei der Datenübertragung. Viele Kunden nutzen einen eigenen Server, der häufig nicht über ein offiziell gesichertes Zertifikat (https) verfügt. Und dennoch sollen die Daten zwischen Server und App bzw. Server und JTL-Wawi sicher übertragen werden. Um dieses Problem zu lösen, haben wir vor allem JTL-POS als Inspiration herangezogen. Hier müsst Ihr Euer mobiles Endgerät einmalig via QR-Code registrieren, um dem Server zu „zeigen“, dass es sich um eine gesicherte Verbindung handelt – ein Weg, für den wir uns auch bei der JTL-Wawi App entschieden haben.

Dashboard mit Statistiken

Das Dashboard in der JTL-Wawi App liefert Euch einen umfassenden Überblick über wichtige Kennzahlen wie Umsatz- oder Bestellentwicklung in Form ansprechender Grafiken. Um solche in unsere mobile Anwendung zu integrieren, waren einige Recherchen notwendig. Denn das Dashboard sollte nicht etwa statisch sein, sondern umfassende Möglichkeiten zur Individualisierung bieten. Außerdem mussten wir darauf achten, dass alle Informationen auch auf kleinen Screens gut sichtbar sind. Wir haben uns daher entschieden, die Statistiken in JTL-Wawi eng mit dem Dashboard der JTL-Wawi App zu verknüpfen: In der stationären Anwendung stellt Ihr die Statistiken zusammen, die dann in der App auftauchen. Die Ansicht könnt Ihr flexibel anpassen, indem Ihr Elemente ausblendet oder den Diagrammtyp wechselt.

JTL-Wawi App: Screenshot Dashboard
Das Dashboard der JTL-Wawi App veranschaulicht wichtige Kennzahlen mit Grafiken und Diagrammen.
JTL-Wawi: Screenshot Dashboard Grafik
Die Diagrammansicht im Dashboard lässt sich je nach Endgerät und Bildschirmgröße individualisieren.

Und so geht’s weiter …

Mit der Integration der Bereiche „Auftrag“ und „Kunde“ sind die Arbeiten an der JTL-Wawi App natürlich längst nicht abgeschlossen. In einem ersten Schritt möchten wir die vorhandenen Funktionen nochmal genau prüfen und ein paar Optimierungen unter der Haube vornehmen. Ein nächster wichtiger Schritt wird sein, die Funktion „Artikel anlegen“ zu implementieren. Dabei soll es Euch möglich sein, Artikelbilder auch direkt mit Eurem Smartphone oder Tablet aufzunehmen. Technische Voraussetzung ist dafür eine Detailansicht des Artikels, um dort das Bild auswählen zu können. Insgesamt werden wir dazu erneut intensiv in die Zusammenarbeit mit dem jeweiligen Team der Wawi-Entwicklung einsteigen, um diesen komplexen Bereich sinnvoll auf wichtige Basisfunktionen zu reduzieren. Dafür ist aber vor allem wieder eines gefragt: nämlich Euer Feedback!

Her mit Eurem Feedback!

Welche Features sind Euch im Bereich „Artikel“ bei einer mobilen Nutzung besonders wichtig? Oder gibt es andere Funktionen, die unbedingt Eingang in die JTL-Wawi App finden sollen? Wir freuen uns auf Euer Feedback und sind auch gespannt auf Eure Erfahrungsberichte zum alltäglichen Einsatz der App. Was funktioniert gut? Was können wir verbessern?

Nutzt die Open Beta der JTL-Wawi App, um unsere mobile Warenwirtschaft auf Herz und Nieren zu testen und lasst uns im JTL-Forum gerne Eure persönliche Einschätzung da. So heben wir die JTL-Wawi App gemeinsam aufs nächste Level!