#Webcomic

Technik, gezeichnet.

Software ist unsichtbar – das macht sie schwer zu erklären. In diesem Comic zeigt Patrick, ein ernster kleiner Systemarbeiter, Schritt für Schritt, was im Hintergrund passiert. Den Anfang macht diese Webseite selbst.

Kapitel 16 Bilder

So funktioniert 2tiptop.de

Was passiert eigentlich zwischen Klick und fertiger Seite? Patrick, als kleiner schwarzer Systemarbeiter gezeichnet, begleitet eine Anfrage durch die PHP-Webseite – vom Türsteher bis zur Antwort.

  1. Ein Brief „GET /blog/ki-agent“ kommt vom Browser. Patrick steht mit einer Gästeliste vor der Tür „.htaccess“, wirft einen Zettel „.env“ zurück und lässt die Anfrage zu artikel.php?slug=ki-agent durch.

    Der Türsteher

    Jede Anfrage landet zuerst beim Apache-Webserver. Die .htaccess ist seine Gästeliste: Sie sperrt geheime Dateien wie .env, interne Ordner wie /inc/ und SQL-Dumps, leitet www und alte Adressen um und übersetzt schöne Adressen wie /blog/ki-agent in den eigentlichen PHP-Aufruf artikel.php?slug=ki-agent.

    • .htaccess
  2. Patrick schließt mit einem Riesenschlüssel den Tresor „.env“ auf. Ein Weg führt zum Kasten „bootstrap.php“, ein Schlauch weiter zur Datenbank. Darunter ein Waschzuber „e() wäscht jeden Text“.

    Das Fundament

    Bevor eine Seite etwas anzeigt, lädt sie die bootstrap.php. Die holt Passwörter und Zugangsdaten aus der .env, baut bei Bedarf die Verbindung zur MySQL-Datenbank auf (PDO, nach 3 Sekunden ist Schluss) und stellt kleine Helfer bereit – etwa e(), das jeden Text vor der Ausgabe „wäscht“, damit niemand fremden Code einschleusen kann.

    • inc/bootstrap.php
    • .env
  3. Patrick hängt am Hebel einer Stempelpresse „layout.php“. Daraus kommen drei Seiten – Blog, Software, 404 – mit identischem schwarzem Kopf und Fuß, aber unterschiedlichem Inhalt.

    Der Baukasten

    Kopf, Navigation, Footer und das Grunddesign stehen nur einmal in der layout.php. Jede Unterseite ruft oben page_head() und unten page_foot() auf und füllt nur die Mitte. Ändert sich ein Menüpunkt – wie dieser Webcomic-Reiter –, ändert er sich auf allen Seiten gleichzeitig.

    • inc/layout.php
  4. Patrick kurbelt einen Eimer aus dem Brunnen „blog_posts“ hoch. Ein Entwurf bleibt unten liegen. Der hochgeholte Artikel wird zur fertigen Seite /blog/ki-agent.

    Der Brunnen

    Blogartikel liegen in der Datenbanktabelle blog_posts. artikel.php holt genau den Artikel zum Slug aus der Adresse – aber nur, wenn er veröffentlicht ist und sein Datum erreicht ist. Entwürfe bleiben unten im Brunnen und liefern eine 404. Der Treffer wird in HTML gegossen, mit Lesezeit, Datum und Daten für Google.

    • blog/artikel.php
    • blog/index.php
  5. Briefe aus dem Kontaktformular kommen an, einer davon hat Antennen wie ein Roboter. Patrick prüft einen Brief mit der Lupe: Honigtopf leer? Token echt? Max. 5 pro Stunde? Der Spam-Bot fliegt in den Mülleimer, der echte Brief geht als Mail ins Postfach.

    Der Briefprüfer

    Schickt jemand das Kontaktformular ab, prüft PHP jede Nachricht, bevor sie rausgeht: Ein unsichtbares Honigtopf-Feld entlarvt Bots, ein signierter Zeitstempel (Token) verhindert Fälschungen und zu schnelles Absenden, mehr als fünf Nachrichten pro Stunde werden gebremst. Erst dann verschickt smtp.php die Mail – ganz ohne Cookies oder Session.

    • inc/contact-form.php
    • inc/smtp.php
    • assets/js/kontakt.js
  6. Patrick schiebt ein riesiges Blatt „fertiges HTML“ zurück zum Laptop des Besuchers und lehnt einen Teller Kekse ab: keine Cookies, kein Tracking.

    Die Antwort

    Am Ende schickt der Server ein fertiges HTML-Dokument zurück – CSS steckt direkt drin, Skripte und Bilder kommen vom eigenen Server und werden lange zwischengespeichert. Keine Cookies, kein Tracking, keine fremden Dienste. Darum ist die Seite schnell und die Datenschutzerklärung kurz.

    • inc/layout.php
    • .htaccess

Kapitel 28 Bilder

So funktioniert fixoffer.de

Malermeister Max spricht nach dem Kundentermin eine WhatsApp-Sprachnachricht ein – und bekommt wenige Minuten später ein Angebots-PDF zurück, kalkuliert mit seinen eigenen Leistungen und Preisen. Patrick versteht die Sprache, sein kantiger Kollege Robbi ist der Einzige, der rechnen darf.

  1. Ein Stapel alter Angebote. Patrick liest eines mit der Lupe – „nur ablesen, nichts erfinden“. Robbi mit Taschenrechner rechnet nach, eine Zeile bekommt ein rotes Fähnchen. Daraus entsteht ein abgeschlossenes Buch „Leistungen von Max“.

    Einlernen: der eigene Katalog

    Einmalig richtet Max fixoffer.de ein: Gewerk, Stundensatz, Aufschläge, Mehrwertsteuer, WhatsApp-Nummer. Dann lädt er mindestens zehn alte Angebote hoch. Die KI liest sie wörtlich ab – sie darf nichts erfinden oder umrechnen. PHP rechnet jede Zeile nach; was nicht aufgeht, wird markiert statt „korrigiert“. Max bestätigt die Positionen, und daraus entsteht sein eigener Leistungskatalog. Aus Preis und Stundensatz rechnet das System zurück, wie viele Minuten er pro Einheit braucht. Kein anderer Betrieb sieht oder beeinflusst diese Preise.

    • PHP
    • MariaDB
    • Claude
  2. Max sitzt im Transporter und spricht ins Handy: „Müller, Bad fliesen, 12 m² Wand, 4 Boden …“. Die Nachricht fliegt über die WhatsApp Cloud API zum Server bot.fixoffer.de, auf dem Patrick sie mit erhobenen Armen erwartet.

    Einsprechen

    Nach dem Termin schickt Max eine ganz normale WhatsApp-Sprachnachricht an den fixoffer-Bot. Meta leitet sie über die WhatsApp Cloud API an bot.fixoffer.de weiter – einen Angebotsbot in Python (FastAPI), der in Docker auf einem eigenen Server läuft. Max braucht keine App und kein Formular.

    • WhatsApp Cloud API
    • Python · FastAPI
    • Docker
  3. Die Sprachnachricht läuft in eine Maschine „Sprache → Text“, auf der Patrick mit Kopfhörern sitzt. Karteikarten aus dem Katalog fließen als Hinweis hinein („kennt deine Fachbegriffe“). Heraus kommt ein Papierstreifen: „bad fliesen 12 qm wand vier boden …“.

    Zuhören

    Ein Transkriptionsdienst macht aus der Sprachnachricht Text. Damit Fachbegriffe richtig ankommen, bekommt er die häufigsten Leistungen aus Max’ Katalog als Hinweise mit. Die Sprachnachricht selbst wird nach einer Frist (Standard 30 Tage) gelöscht.

    • Transkription
    • Fachbegriff-Hinweise
  4. Aus dem Karteischrank „Katalog von Max“ fliegen bis zu 60 Karten auf einen Tisch. Patrick hält drei ausgewählte Karten hoch – „Claude wählt nur aus der Liste“. Eine erfundene Karte ist rot durchgestrichen und fällt in den Mülleimer.

    Suchen und zuordnen

    Aus dem Katalog werden bis zu 60 passende Leistungen herausgesucht. Erst dann kommt die KI ins Spiel: Claude wählt aus genau dieser Liste die richtigen Positionen und Mengen und antwortet in einem festen JSON-Schema. Positionen, die nicht auf der Liste stehen, werden verworfen – erfundene Leistungen landen nie im Angebot.

    • Claude (Anthropic)
    • JSON-Schema
  5. Patrick greift nach einem Preisschild. Robbi schlägt ihm mit einem Zollstock auf die Finger: „Finger weg!“. Robbis Taschenrechner spuckt einen Streifen „Lohn + Material + Aufschläge – auf den Cent“ aus. Daneben ein Raum „4 × 5 m“: „Flächen rechnet Python“.

    Rechnen: nur der Code

    Die wichtigste Regel: Die KI rechnet nie. Nennt Max Raummaße wie „Wohnzimmer 4 mal 5 Meter“, berechnet Python Wand-, Decken- und Bodenfläche. Jeder Preis entsteht in Python nach der Formel des Betriebs – Lohn plus Material plus Aufschläge, gerundet auf den Cent. Unplausible Preise werden markiert. Claude sieht und erzeugt keine einzige Zahl im Angebot.

    • Python
    • Kalkulationsformel des Betriebs
  6. Auf dem Handy fragt der Bot: „Liefert der Kunde die Fliesen selbst?“ mit den Buttons „Wir“ und „Kunde“; Max’ Finger tippt auf „Wir“. Rechts zieht Patrick eine Liste „Meine Arbeitsweise“ mit abkleben, Anfahrt pauschal, Entsorgung heran – „kommt automatisch dazu“.

    Rückfragen und Arbeitsweise

    Fehlt etwas Wichtiges, fragt der Bot gezielt nach – per Button oder Auswahlliste, höchstens drei Runden. Auch der Kunde wird erkannt, neu angelegt oder nachgefragt („Müller in Mannheim oder in Heidelberg?“). Was laut „Meine Arbeitsweise“ bei Max immer dazugehört, kommt automatisch ins Angebot. Vor dem PDF fragt der Bot einmal: „Fehlt noch etwas?“

    • WhatsApp-Buttons
    • Meine Arbeitsweise
  7. Patrick schiebt zwei Blätter – „Positionen + Preise“ und „Texte – ohne Zahlen“ – in eine Druckmaschine „WeasyPrint, DIN 5008“. Heraus kommt „Angebot.pdf“ mit Logo und Summen, das per FTPS in einen Ordner im Dashboard wandert.

    Das PDF entsteht

    Claude schreibt Betreff, Einleitung und Schlusstext im Stil des Betriebs – ohne Zahlen. Python liefert die Positionen und Summen. WeasyPrint setzt beides zu einem Angebots-PDF mit Logo, Netto, MwSt. und Brutto, angelehnt an DIN 5008. Per FTPS lädt der Bot das PDF auf den Webspace, wo es im Dashboard auf fixoffer.de zum Download bereitliegt.

    • WeasyPrint
    • FTPS
    • PHP-Dashboard
  8. Max tippt auf dem Handy auf „Freigeben“; darunter „Ändern“ und „Verwerfen“. Das PDF geht an Frau Müller – „Max verschickt selbst“. Patrick merkt sich nebenbei: „Merk dir: Anfahrt pauschal“ → Gemerkt; „Boden doch 6 m²“ → Version 2.

    Freigeben – und der Bot lernt mit

    Max bekommt den Entwurf mit drei Buttons: Freigeben vergibt die Angebotsnummer, Ändern („Boden doch sechs Quadratmeter“) erzeugt eine neue Version, Verwerfen löscht den Entwurf. Verschickt wird das Angebot von Max selbst – kein Angebot geht ohne ihn raus. Fehlt eine Leistung im Katalog, legt der Bot sie mit Einheit und Preis an; „Merk dir das“ landet als Regel in „Meine Arbeitsweise“.

    • WhatsApp-Buttons
    • Versionen
    • Meine Arbeitsweise

Technik in Kürze

Website, Einrichtung, Dashboard
PHP, MariaDB, HTML/CSS/JS ohne Build-Schritt (All-Inkl)
Angebotsbot
Python (FastAPI) in Docker auf einem VPS – bot.fixoffer.de
Chat
WhatsApp Cloud API (Meta)
Sprache zu Text
Transkriptionsdienst mit Fachbegriff-Hinweisen aus dem Katalog
KI
Claude (Anthropic) mit festem JSON-Schema für jede Antwort
PDF
WeasyPrint, an DIN 5008 angelehnt
Bezahlung
Stripe
Übergabe der PDFs
Upload per FTPS vom Bot auf den Webspace

Die Grundregeln

  1. Die KI rechnet nie – Preise, Flächen und Summen rechnet der Code.
  2. Nur eigene Daten – jeder Betrieb hat seinen eigenen Katalog.
  3. Nichts wird erfunden – beim Einlesen wird nur abgelesen und nachgerechnet.
  4. Der Mensch entscheidet – kein Angebot ohne Freigabe, versendet vom Handwerker selbst.
  5. Datensparsam – Sprachnachrichten werden nach 30 Tagen gelöscht.

fixoffer.de ansehen →

DemnächstWeitere Kapitel

Als Nächstes: die Projekte

Jedes Projekt bekommt ein eigenes Kapitel – mit dem Problem, der Lösung und dem, was technisch dahintersteckt.

  • Bald

    wohnpilot24.de

    Wie ein Objekt einmal angelegt wird und daraus Exposé, Website-Eintrag und Portal-Inserat entstehen.

  • Bald

    renoshot.de

    Wie aus einem Handyfoto vom Garten ein fotorealistisches Nachher-Bild wird.

  • Bald

    123papierfrei.de

    Wie aus Regalmetern Papier durchsuchbare PDFs werden – offline, ohne Cloud.