Neue App: Qwui für einfache Quittungen

Qwui ist meine schlanke Web-App für Schweizer Quittungen. Ich tippe Betrag und Leistung ein und erhalte daraus ein PDF, ohne Konto und ohne Abo.

Als Kleinunternehmer kenne ich die Situation, wenn ein Kunde schnell eine Quittung möchte. Bisher habe ich dafür eine Word-Vorlage geöffnet, die Zahlen abgetippt, das Dokument als PDF exportiert und es von Hand an eine E-Mail gehängt, was für eine einfache Quittung viel zu viele Klicks sind. Ich wollte deshalb ein Werkzeug, in das ich nur Betrag und Beschreibung eintippe und danach auf einen Knopf drücke.

Mit Hilfe von KI-gestütztem Programmieren habe ich mir dieses kleine Tool selbst gebaut und Qwui genannt. In diesem Beitrag beschreibe ich, wie es entstanden ist und wie ich es abgesichert habe. Wer sich für den Code interessiert, findet ihn im Repository auf GitHub.


Die Idee: so einfach wie möglich

Ich wollte kein aufgeblähtes Buchhaltungsprogramm und keine Abo-Kosten für Funktionen, die ich zu 90 % nicht brauche. Die App sollte deshalb nur das Nötigste können:

  • Betrag und Leistung eintippen
  • auf einen Knopf drücken und eine formatierte Schweizer Quittung erhalten
  • die Quittung direkt als PDF speichern, wofür der normale Druckdialog des Browsers genügt und kein Zusatztool nötig ist
  • die Quittung mit einem Klick per E-Mail versenden, wobei die App mein E-Mail-Programm mit ausgefülltem Betreff und Text öffnet und ich nur noch das PDF anhängen und auf Senden klicken muss
  • die Quittung mit einem Klick per WhatsApp versenden, und zwar als reine Textnachricht mit allen Angaben der Quittung und ohne PDF-Anhang, wobei sich je nach Installation WhatsApp oder WhatsApp Business mit dem fertig geschriebenen Text öffnet

Mehr braucht es nicht, weil ich diese drei, vier Dinge mehrmals pro Woche erledige und weitere Funktionen nur Ballast wären.


Wie ich es gebaut habe

Ich bin kein klassischer Softwareentwickler, aber inzwischen reicht es, klar zu beschreiben, was man braucht, und dann mit einem KI-Assistenten Schritt für Schritt daran zu bauen. In meinem Fall war das Claude, und der Ablauf sah ungefähr so aus:

  1. Zuerst entstand ein Prototyp mit einer einfachen Weboberfläche, in die ich Positionen und Beträge eintrage und aus der eine sauber formatierte Quittung entsteht.
  2. Für den PDF-Export habe ich statt eines komplizierten PDF-Generators den Druckdialog des Browsers mit «Als PDF speichern» genutzt, was völlig ausreicht und den Aufbau einfach hält.
  3. Für den Versand gibt es zwei Knöpfe. Die E-Mail läuft über einen sogenannten mailto-Link, der das Mail-Programm mit vorausgefülltem Text öffnet, und WhatsApp über einen ähnlichen Mechanismus, nämlich einen wa.me-Link mit dem fertigen Text als Parameter.
  4. Danach kamen nach und nach Verbesserungen dazu. Quittungen lassen sich im Nachhinein bearbeiten oder löschen, ein eigenes Logo ist möglich, und einen «Kontrollabschnitt» habe ich wieder entfernt, weil ich ihn schlicht nicht brauchte.

Das ganze Projekt ist eine React-Web-App, deren Code auf GitHub liegt. Von dort wird sie automatisch gebaut und veröffentlicht, sobald ich eine Änderung pushe.


Hosting auf einer eigenen Subdomain

Das Tool sollte nicht öffentlich zugänglich sein, weil es um meine Geschäftsunterlagen geht. Ich habe mich aus mehreren Gründen für Cloudflare Pages entschieden:

  • Für ein Projekt dieser Grösse ist es kostenlos.
  • Das Deployment läuft automatisch aus meinem GitHub-Repository, sodass jeder Push die Seite aktualisiert.
  • Die App läuft auf einer eigenen Subdomain meiner bestehenden Domain und ist damit sauber von meiner Hauptwebsite getrennt.
  • HTTPS ist automatisch aktiv, weshalb die Verbindung verschlüsselt ist, ohne dass ich mich selbst um Zertifikate kümmern musste.

Zwei Schutzschichten

Für die Absicherung habe ich zwei Schutzschichten übereinandergelegt.

Die erste Schicht ist Cloudflare Access. Bevor überhaupt eine Zeile Code geladen wird, prüft Cloudflare, ob ich mich mit meinem eigenen, autorisierten Konto anmelde, und ohne erfolgreichen Login kommt niemand auch nur in die Nähe der Seite.

Die zweite Schicht ist ein zusätzliches Passwort, das auf dem Server geprüft wird. Es steckt also nicht im Code der Website, wo es theoretisch jemand auslesen könnte, sondern wird auf der Server-Infrastruktur von Cloudflare selbst kontrolliert.

Wer auf die Seite möchte, muss damit zwei unabhängige Hürden nehmen, was für ein kleines Geschäftstool wie meines mehr als ausreicht.


Fazit

Der Aufwand hat sich für mich gelohnt. Statt für eine einfache Funktion ein teures SaaS-Abo abzuschliessen, habe ich in ein paar Sitzungen das Tool gebaut, das ich brauche, und nicht mehr. Dadurch habe ich keine überflüssigen Funktionen und keine monatliche Rechnung, und ich kann das Tool jederzeit selbst anpassen, falls sich meine Bedürfnisse ändern.

Falls Sie in Ihrem Geschäftsalltag ähnliche kleine Aufgaben haben, die immer wiederkehren, lohnt es sich zu prüfen, ob ein massgeschneidertes Mini-Tool nicht schneller gebaut ist, als sich weiter irgendwie mit Word oder Excel zu behelfen.

Gerne helfe ich Ihnen weiter

Schildern Sie mir am Telefon oder in einer Nachricht kurz, was nicht funktioniert. Danach vereinbaren wir einen Termin bei Ihnen zuhause oder eine Fernwartung.