Eine kleine Demo-Anwendung: in wenigen Minuten einen Tankstellen-Kostenrechner mit Claude im Browser erstellt und direkt in diese Website integriert.
Was steckt hinter dem Tankstellen-Optimierer?
Der Rechner löst eine alltägliche Frage: Lohnt sich der Umweg zur günstigeren Tankstelle oder zahlt man mit dem Sprit für den Umweg drauf?
Die Formel dahinter ist überschaubar:
K = p · (n + f · d · v)
Dabei ist p der Preis pro Liter, n die Tankmenge, d die Distanz zur Tankstelle, v der Verbrauch und f ein Umweg-Faktor (0 = die Station liegt auf der Route, 1 = einfache Fahrt, 2 = Hin- und Rückweg).
Wie wurde das gebaut?
Den kompletten HTML/CSS/JavaScript-Code hat Claude im Browser generiert – als autarke Einzelseite, ohne externe Abhängigkeiten. Das hat keine zehn Minuten gedauert.
Der zweite Schritt war die Integration in diese Django/Wagtail-Seite: passendes Layout, Farbschema und eine saubere URL. Auch das hat Claude Code übernommen – inklusive eines kleinen XSS-Fixes, den Claude selbst beim Review entdeckt hat.
Das Ergebnis ist kein großes Produkt, sondern eine Demo. Es zeigt gut, wie schnell sich mit KI-Unterstützung eine funktionierende Web-Anwendung bauen und in eine bestehende Seite integrieren lässt.
Nachdem ich die Seite eigentlich schon am laufen hatte, kam ich noch auf die Idee zu fragen, ob es ein kostenfreies API gibt über das man die Tankstellen in der Nähe abfragen kann. Das wusste Claude Code direkt und nachdem ich mir bei Tankerkoenig.de einen API-Key gemacht konnte die REST API Abfrage eingebaut werden.
Ein neues Widget war schnell erstellt und lediglich die Standortabfrage für den Browser mit der Webseite zu erlauben, ist ein bisschen verzwickt. Das macht die Nutzung nicht ganz so komfortabel und hängt vom verwendeten Browser ab. Jetzt werden die Tankstellen im Umkreis von 2km, 5, km, 10 km gesucht in der Liste angezeigt und die optimale Tankstelle berechnet und angezeigt.
Ausprobieren: Tankrechner
