Hartmut/diek-scanner-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
WebUI für "Der Intelligente Einkaufskorb"
9 commits 1 branch 0 tags 301 KiB
  • CSS 81.7%
  • Python 14.3%
  • JavaScript 4%
Find a file
Exact
Hartmut Seichter 65087fa7d3 vorerst finaler Stand
2026-01-16 08:11:19 +01:00
app vorerst finaler Stand 2026-01-16 08:11:19 +01:00
etc Initialer Check-In - erste Ideen der Kids im Code - wir nutzen die 2026-01-04 21:43:08 +01:00
static vorerst finaler Stand 2026-01-16 08:11:19 +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 Initialer Check-In - erste Ideen der Kids im Code - wir nutzen die 2026-01-04 21:43:08 +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 Initialer Check-In - erste Ideen der Kids im Code - wir nutzen die 2026-01-04 21:43:08 +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 add Mi Scale 2 as BLE device scanner 2026-01-10 19:36:22 +01:00
README.md vorerst finaler Stand 2026-01-16 08:11:19 +01:00
uv.lock update dependencies better "constant" scan reading 2026-01-11 14:26:48 +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 zwei 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

[dev@machine] npm install

Installation der Python Laufzeitumgebung

[dev@machine] uv sync

Development Modus

[dev@machine] uv run uvicorn app.main:app --reload

https via Caddy

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

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

[dev@machine] 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