Kiosk-System

Über eine Autostart datei in Xubuntu wird der Rechner direkt mit einem Skript gestartet, dass den Server und Chromium startet. In Chromium wird dann der localhost:3000 aufgerufen und der Kiosk startet direkt wie im oberen Bild. Wenn der kiosk gestartet wird, erscheint als erstes ein Aufforderung, um die VerkäuferID einzugeben, man kann sich auch wieder Ausloggen und dann wird man erneut aufgefordert die ID anzugeben. Anhand der VerkäuferID kann man herausfinden wer gerade verkauft. Das wird ebenfalls in den Tages- und Monatsberichten protokolliert. Dazu später mehr.

Der Anwender hat jetzt die Möglichkeit, ein oder mehrere Produkte in den "Warenkorb" zu packen. In diesem digitalen Warenkorb kann man nun sehen, was gekauft wurde, wie viel davon mit Stückpreis und darunter ein Kauf abschließen Button, der den summierten Preis anzeigt. (Hier im Beispiel 3,10€)

Man beachte, dass hier zu Debugzwecken die Anzahl der Eistee's stark angehoben wurde um zu verdeutlichen, dass die Quantität der Produkte auch eine Auswirkung hat auf die Verfügbarkeit im Frontend. Wenn die Ware nach einem Klick auf 0 fällt, färbt sich der "In den Warenkorb"-Button rot und die Schaltfläche lässt sich erst wieder drücken, wenn Produkte über die Produktverwaltung oder Datenbank wieder hinzugefügt werden.

Wenn nun Also der Kunde 2 mal Eistee haben will, kann man auf "Kauf abschließen" drücken und ein 3x4 Eingabefeld öffnet sich. Wenn der Kunde zu wenig Geld zahlt (in diesem Fall 2€) dann erscheint eine Meldung die in JavaScript über eine Alertfunktion implementiert ist, dass zu wenig Geld vorliegt, um die Ware(n) zu bezahlen. Jetzt hat man die Möglichkeit das Produkt aus dem Warenkorb zu entfernen (dadurch wird im Frontend wieder die ursprüngliche Quantität zurückgegeben) und nur einen Eistee in den Warenkorb zu packen

Aber in diesem Fall findet der Kunde noch 2 weitere Euro, zahlt 4€ und bekommt dann 0,90€ zurück. Das Ergebnis wird für den Verkäufer von einem Rechner vorgerechnet. Nachdem dann auf "Schließen & Kauf abschließen" gewählt wurde, schließt sich das Fenster und der Warenkorb wird geleert. Außerdem wird der Server darüber Informiert, dass Produkte aus der Datenbank abgezogen werden müssen, und dies erfolgt dann auch.

Im Hauptverzeichnis habe ich einen Ordner Namens "mein-shop" angelegt in der nun als Masterordner fungiert. Dort enthalten ist der Server (server.js), der log dazu (server.log), die Datenbank (shop.db) auf die ich noch später noch genauer eingehen werde, ein Backup Ordner für meine eigenen Zwecke, einen cache Ordner und einem public Ordner.

Im public Ordner ist alles vorhanden was für den Frontend benötigt wird. In "Images" sind die Produktbilder enthalten. Außerdem sind hier die .html Dateien abgelegt, die für den Aufbau der Anwendug via Chromium benötigt werden. Hierüber kann man das System lokal Warten, aufbauen und verbessern. Die Inhalte der Dateien lassen sich auf Github finden.

Das hier ist die Datenbank. Auf ihr werden alle wichtigen Daten wie Preis, Produktname, Quantität usw. gespeichert. Ich habe mich für eine Datenbank entschieden, da mich auch persönlich die Kommunikation zwischen Datenbank und Server interessiert hat. Ich habe dafür ein Tool benutzt um die Datenbank besser einsehen zu können anstatt nur über die Konsole - sqlite3 viewer. Wenn Produkte Hinzugefügt werden müssen oder Gutscheincodes erstellt werden sollen, so kann man dies hier tun. Alternativ hab ich dafür auch eine eigene .html namens "Produktmanagment" geschrieben.

Wenn man im Hauptscreen innerhalb der Anwendung (siehe Bild 2 oben links), auf "Produktverwaltung" klickt, öffnet sich ein Fenster in dem man alle administrativen Einstellungen vornehmen kann. Zum Beispiel kann man hier ein Produkt hinzufügen oder löschen, ein Produkt anpassen (Preis, Name, Quantität).Auf einem 2. Reiter namens "Berichte" kann man sich die Berichte der verkauften Ware anzeigen lassen aus dem Beispiel findet sich hier auch der Eistee wieder und die VerkäuferID. Außerdem gibt es einenn Monatsbericht und dazu ein Fenster in dem man den Monat auswählen kann, den man Untersuchen möchte. All das wird auch in der Datenbank gespeichert und ist lokal gesichert.