Hartmut/diek-scanner-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
WebUI für "Der Intelligente Einkaufskorb"
26 commits 1 branch 0 tags 922 KiB
  • CSS 72.5%
  • Python 23.5%
  • JavaScript 3.7%
  • Shell 0.3%
Find a file
Exact
Hartmut Seichter cc8d9634db Testprodukte
2026-02-11 15:24:13 +01:00
app Portierung und Migration auf Testgerät 2026-02-11 11:53:15 +01:00
docs Testprodukte 2026-02-11 15:24:13 +01:00
etc Zwei Skripte zum launchen 2026-02-11 14:41:34 +01:00
static noch ein kleine Aufräumaktion 2026-02-10 21:47:22 +01:00
.gitignore Initialer Check-In - erste Ideen der Kids im Code - wir nutzen die 2026-01-04 21:43:08 +01:00
.python-version made scale implementation threading capable 2026-02-01 18:25:13 +01:00
app.css Initialer Check-In - erste Ideen der Kids im Code - wir nutzen die 2026-01-04 21:43:08 +01:00
NOTES.md update dependencies better "constant" scan reading 2026-01-11 14:26:48 +01:00
package-lock.json working BLE measurements 2026-02-09 23:39:50 +01:00
package.json Initialer Check-In - erste Ideen der Kids im Code - wir nutzen die 2026-01-04 21:43:08 +01:00
pyproject.toml Portierung und Migration auf Testgerät 2026-02-11 11:53:15 +01:00
README.md Aufräumen 2026-02-10 20:55:16 +01:00
uv.lock Portierung und Migration auf Testgerät 2026-02-11 11:53:15 +01:00

README.md

WebUI und Edge-Server für "Der Intelligente Einkaufskorb"

Die Kinder wollten einen Korb mit Scanner bauen. Der Code hier ist ein in paar Stunden entstandener MVP um einen ZXing Web-Scanner und eine BLE-Waage (Mi Scale 2) miteinander zu verbinden. Damit konnten die Kinder am praktischen Beispiel sehen welche technischen Möglichkeiten und vor allem Einschränkungen man in so einem Szenario hat. Aus meiner Sicht war das Thema für die Kinder gut um die Komplexität zu verstehen aber ungeeignet um eigene Kreativität zu entfalten.

Voraussetzungen

Entwicklungsumgebung

Werkzeuge

Das Projekt ist mit Python implementiert und nutzt npm für eine Reihe von Frontend-Code. Eine Reihe von Abhängigkeiten sind mittels Vendoring schon vorhanden. Grundsätzlich sind folgende Abhängigkeiten auf dem Entwicklungssystem vorausgesetzt:

  • npm, bun oder deno um TailwindCSS und DaisyUI zu nutzen
  • python >= 3.13.0 für die Laufzeitumgebung
  • uv für die Erstellung der virtuellen Laufzeitumgebung .venv

Vorbereitung

Installation der WebUI Komponenten tailwindcss und daisyui

npm install

Installation der Python Laufzeitumgebung

Um nicht beim ersten Start alles zu installieren empfiehlt es sich uv zunächst alle Abhängigkeiten aufzulösen:

uv sync

Development Modus

Bei der Entwicklung empfiehlt es sich die reload Option von uvicorn zu nutzen um Anpassungen gleich zu sehen:

uv run uvicorn app:app --reload

https via Caddy

Das App-Frontend benötigt eine https Verbindung (SSL verschlüsselt) um die Media-API der jeweiligen Browser zu benutzen. Beispielhaft ist im Verzeichnis etc ein Caddyfile für den webserver caddy um die Verbindung per reverse-proxy auf dem Entwicklungsrechner umzuleiten.

Auf einer Linux-Installation kann man zur Entwicklung die folgenden Parameter nutzen:

export DEIK_IP=`hostname -i` && caddy run --config etc/Caddyfile

TODO

Nur als Beispiel der Prozess beim Hineinlegen von Ware in den Korb:

  • Web-Scanner sendet EAN-Daten und vielleicht eine Bilderkennung an Edge-Server Endpoint
  • Edge-Server lädt EAN Datenbank oder Daten aus einem ERM (Bilderkennung zur zusätzlichen Validierung)
  • Edge-Server liesst Daten aus der Waage mit temporalen Auszug aller Messdaten
  • Edge-Server vergleicht Scan-Daten (z.B. Packungsgrössen) mit dem der Waage
  • per Back-Channel (Websocket oder SSR) wird der "Einkauf" freigegeben

Keine KI

Diese Software wurde ohne KI erzeugt und verwendet keine KI. ML Methoden bei der Erkennung sind denkbar.