Making of my project calculator (3/3)

Weiter geht’s im letzten Teil dieser gemischt-sprachigen Serie, diesmal wieder auf Deutsch.
We continue with my multi-language series, this time again in German.


Es geht auf die Zielgerade zu, ich habe den heutigen Nachmittag mit etwas Feinschliff und der Vorbereitung der letzten Funktionen verbracht, z.B. einen Plus-Button in reinem CSS hinzugefügt, die Löschfunktion für Listenelemente eingebaut, an der User Experience gearbeitet. Ich füge nun noch schnell die Funktion für den Plusbutton ein und arbeite ein bißchen zur Mobil-Version hin. An dieser Stelle läßt sich ein Stück „hardcoding“ leider nicht vermeiden, der Button muss ja wissen, welche Option („Zusatzleistung“) er hinzufügen soll.


Es funktioniert nun alles recht ordentlich und flüssig, ein Bug jedoch trieb mich in den Wahnsinn: Wenn man von einem Listenpunkt zum nächsten klickte, war die Berechnung nicht mehr korrekt, weil der geöffnete Listenpunkt nicht mehr hinzuaddiert wurde (da das Query nicht mehr das gleiche war). Obwohl mir die Ursache bewußt war, musste ich mehrere Stunden suchen, was hauptsächlich der späten Stunde und eines logischen Fehlschlusses zu verdanken war. Die Lösung ist denkbar simpel, zu sehen im Bild unten-links (if value.startsWith…), dort wird nun auch der offene Listenpunkt nach der aktiven Select-Option durchsucht.

Das Paygate schaffte ich heute nicht mehr, an dem Wechsel zwischen den 3 Beispiellisten und dem einzelnen Rechnerfenster muss ich auch noch arbeiten. Ich hatte hier von anfang an CSS-Keyframe Animationen geplant, das geht bei so etwas am allerbesten, weil man ähnlich einer Keyframe-Animation in Blender oder Fusion meherere Schritte aneinander reihen kann, z.B. Fenster blenden aus => Fenster werden schmaler => Fenster wandert in die Mitte => Zoom =>… Ich habe durchaus Ideen für weitere Verbesserungen, aber dieser Tage ist auch in meiner Werkstatt Schmalhans Küchenmeister.


Dafür habe ich noch ein letztes Mal Gas gegeben und Mobil angefangen. Zugegeben, richtig top ist es auf Mobil (noch) nicht. Sofern ich nicht „Mobile-First“ mache, setze ich das meist in 2 Stufen um, zuerst muss es passen, in Runde zwei wird es schöner. Fehlt nur noch der Link und der Plugin-Wrap.

Zur Vorbereitung des Paygate-Links muss zuerst jedoch etwas anderes passieren. PayPal macht es uns zum Glück insofern einfach, dass der Bezahler ja eine Email-Adresse & Rechnungs-Adresse haben muss. Natürlich kann eine Rechnungsaddresse abweichen, in diesem Fall muss der Nutzer das aber selbst bei PayPal regeln, das ist bei eBay auch nicht anders. Nun zur Vorbereitung: Wir müssen einen Button erstellen, der die eingestellen Werte an den Server schickt. Der Server muss diese Werte vorübergehend speichern und danach dem Frontend bescheid geben, dass es weitergehen kann, wobei der größte Teil des PayPal-Prozesses in serverseitigem Code geregelt wird.


Ab hier wird es auch sicherheitskritisch, denn wir machen ein Türchen zum Server auf – und müssen schauen, dass nur das durch die Tür kommt, was durchkommen soll, und nicht der nächstbeste Hacker, automatisierte Angriff oder SPAM-Bot. Wäre meine finanzielle Lage derzeit nicht ebenfalls „sicherheitskritisch“, würde ich gerne zeigen, wie man es richtig macht. Leider sind diese Infos, welche ich mir in mehreren Jahren Training hart erarbeitet habe, mit das letzte Asset, was ich noch gewinnbringend verkaufen kann. Sorry.


Die Angebotsanfrage per Email funktioniert schonmal, und die gröbsten Sicherheitsmechanismen auch. Da bei mir serverseitig schon vieles richtig eingestellt war, kam ich beim sicherheitstesten nicht besonders weit, d.h. ich muss am Ende die Kopie im lokalen Lab testen, sonst ärgere ich mich bei jedem Schritt mit der WAF und anderen Abwehrmechanismen. Zum Glück kann ich auf genug Erfahrung in Punkto Sicherheit zurückgreifen und die wichtigsten Sachen direkt patchen.

Also habe ich als nächstes ein Emailfeld eingebaut, in dem Bestandskunden ihre Adresse eingeben, und so die Anfrage ohne PayPal stellen können. Dazu habe ich die Email als HTML-Mail ordentlich formatiert und mache nun weiter mit dem Plugin-Wrap. Es gibt noch ein paar kleine Quirks, z.B. muss der „Ich bin bereits Kunde“ – Link 3mal angeklickt werden, bevor der Eventhandler triggert, das ist etwas merkwürdig (Update: es war nur ein kleiner, logischer Fehler in einer if-Abfrage).

Die Kunden würden beim Klick auf den Angebots-Button natürlich eine AJAX-Ladeanimation erwarten, aber das wäre ehrlich gesagt reine Kosmetik, der Request dauert ca. 100 Millisekunden.


Tadaaaa… ähm, nein, ist natürlich noch nicht ganz fertig. Aber es werden nun sämtliche Dateien über das WordPress-Plugin geladen, die HTML-Templates, welche genau so als <script> Block (und damit unsichtbar) in den Contentbereich eingefügt werden, während CSS und JavaScript brav in den header geladen werden. Das ganze ist dynamisch und wird nur auf der Unterseite geladen, auf der unser Plugin auch tatsächlich eingesetzt wird, das verbessert Ladezeiten und Pagespeed-Ergebnisse. Schade, dass nur die wenigsten WordPress-Plugins das richtig machen (braucht gerade wer einen Zaumpfahl zum Winken?). Der kleine <body> aus der Standalone-HTML Datei wird nun direkt in die passende Content-Sektion von WordPress ausgegeben.

Soweit so gut, das PHP-Modul prüft, verarbeitet und versendet die Daten in einer formatierten Email, und sendet entsprechende Status-Codes (200, 201, 500) plus Antwortnachricht im JSON-Format zurück an’s Frontend, welche der Nutzer sehen kann, das ganze ist ausreichend sicher für den Testbetrieb. Fehlt wie schon mehrfach erwähnt nur noch PayPal, das mache ich nächste Woche, ich update den Artikel dann. Ausserdem ist eine Animation noch sehr häßlich und eine andere flackert ein bißchen, da setze ich mich kurz am Wochenende dran, einfache CSS-Keyframes sollten reichen. Mobil klappt nach weiteren Fixes auch gut. Mir bleiben von 3,5 Wochen Weihnachtsurlaub exakt 5 Tage und ein halbes Wochenende.

Ich jedenfalls mag meinen neuen Projekt-Rechner, den ich nun universell mit verschiedensten Daten einsetzen kann, auch in Kundenprojekten. Witzigerweise sind die Kalkulationen doch sehr nah dran an, sagen wir mal, vernünftigen Budget-Schätzungen für verschiedenste Projekte. Es gab bis jetzt kaum eine Einstellung, bei der ich gesagt hätte „das ist aber total daneben“.

Mal sehen, wann er mir geklaut wird und als kostenpflichtiges Plugin auf dem WordPress-Marktplatz landet. Wegen der modernen Architektur mit JavaScript und einem REST-ähnlichen Endpunkt wäre es ausserdem nicht sehr schwer, das ganze als Serverless oder Android App zu umzubauen, man müsste am bestehenden Code so gut wie keine Änderungen machen, trotzdem entsteht eine Android App nicht von selbst, bevor ein falscher Eindruck aufkommt. Vergleicht man die Architektur meines Projekt-Rechners aber z.B. mit einem regulären WordPress-Plugin: beim klassischen Plugin müsste man den gesamten Code neu schreiben, um es auf Android, iOS oder in die serverlose Cloud zu bringen.

Update 1: Am Sonntag abend habe ich, wie versprochen, die Animationen per CSS Keyframe angepasst – es war nach etwas Arbeit zwar auch ohne den Blur-Effekt schon zu 99% sauber, aber ich wollte 100%, und ausserdem fand ich den Effekt ganz cool. Ohne Blur hätte ich noch mehr Elemente in den Boxen keyframen müssen, um ein wirklich perfektes Ergebnis zu bekommen, das war es mir dann nicht wert. Legt man Wert auf schöne Animationen, plant man eigentlich vom Tatbestand „Animation“ rückwärts, sprich: Ich will eine sehr gute Animation <= also passe ich die inneren Elemente soweit an, dass ich eine gute Animation bekomme. Das wäre hier natürlich nicht möglich gewesen.

Update 2: Aufgrund der niedrigen Auftragslage haben wir uns entschieden, den Projekt-Rechner im Moment noch nicht an PayPal anzuschließen, denn dies (jede Custom-Lösung / API-Nutzung, ausser dem dedizierten PayPal-Button) erfordert inzwischen einen kostenpflichtigen (bevor es wieder jemand zu genau nimmt, der Account selbst ist nicht kostenpflichtig im Sinne einer monatlichen Gebühr, aber in Form von höheren Transfergebühren usw.) Business-Account. Wir holen dies nach, sobald sich die Lage etwas entspannt.

Vielen Dank für’s Lesen und bis zum nächsten Mal.

Thanks for reading, see you next time.

Manuel Geissinger, zertifizierter IT-Sicherheitsexperte, Webedesigner aus Freiburg, Webentwickler, Administrator und Digitalkünstler.
Ihr freiburger Webentwickler Nr. 1 auf LinkedIn Zertifizierter IT Sicherheits-Experte & Webdesigner auf Xing