Dynamische QR-Codes selbstgebaut

Dynamische QR-Codes

UPDATE 2021-11-21: Jetzt mit Uhrzeitangabe möglich! 😉

Kurz vor dem Abendessen trudelte dieser Tweet in meiner Timeline ein:

Klingt interessant und habe ja alles mittlerweile in einem “Kompendium” gesammelt. Allerdings stand auf dem Tisch gerade das hier:

Also erstmal Abendessen, dann auf Twitter beantworten und dann (also jetzt 😉) bei einer Tasse Kaffee diesen Blogpost schreiben.

QR-Codes ganz kurz

Wer Details zum Thema QR-Codes benötigt, sollte diesen Link anklicken. Hier habe ich alle relevanten Informationen zum Thema in einem Artikel gesammelt.

Ansonsten steigen wir hier ein: ein QR-Codes beinhaltet eine Nutzlast, das kann neben Visitenkarten, Texten, Telefonnummern auch eine URL sein (und nein, es gibt keine Typen von QR-Codes. Wenn Sie das denken, solltest Du vielleicht doch den Link oben durcharbeiten). Auch die sogenannten “dynamischen” QR-Codes besitzen diesen Aufbau und da der Ausdruck oder die Grafik mit dem QR-Code nicht geändert werden kann, kann der Code selbst schon mal nicht “dynamisch” sein. Da steht immer der gleiche Inhalt drin. Was dynamisch ist, die Behandlung der URL auf dem Webserver. Da der QR-Code in diesem Zusammenhang also nichts anderes als eine andere Art ist, eine URL ins Smartphone oder den Computer einzugeben, können wir das Thema QR-Codes an dieser Stelle abschließen und uns damit befassen, was mit den URLs auf dem Webserver passiert.

Dynamisch werden 😄

Mir sind in den 20 Minuten, die ich vor dem Schreiben des Blogposts gebastelt habe, mindesten ein Dutzend Möglichkeiten eingefallen, diese Aufgabenstellung zu lösen. Die Herausforderung ist hier aber nicht Eleganz oder Mächtigkeit oder Schnelligkeit, sondern Einfachheit. Das muss funktionieren, ohne dass Du Programmieren gelernt hast, ohne irgendwelche bombastischen Toolkits und die Voraussetzungen dürfen sein: “ich kann ’ne Textdatei bearbeiten” und “ich kann eine HTML-Datei auf unseren Webserver bekommen”. Möglicherweise musst Du Dir für den zweiten Punkt Hilfe holen, aber das ist vollkommen OK…

Für alle, die neugierig sind, oder einfach eine Anregung wollen, wie andere Anbieter oder andere System das machen, hier ein paar Vorschläge:

• Eine komplette Lösung mit Web-Frontend und Datenbank (falls Du damit Geld verdienen willst… 🤣)
• Eine Lösung mit einer anderen Programmiersprache (Ruby, PHP, Python, Go, you name it)
• Ein Redirect auf einem Apache-Webserver per RewriteCond in der .htaccess
• Ein Redirect auf einem nginx-Webserver mit den rewrite-Rules
• Ein keiner HTTP-Server (z.B. mit Python oder Go), der das Tagesdatum auswertet
• oder aber eine einfache HTML-Datei und ein paar Zeilen JavaScript

Meine Beispieldatei unten hat den Namen redirect.html, es ist aber vollkommen egal, wie das Ding genannt wird, Du kannst die Datei also z.B. ruhig adventskalender.html nennen. Hier an dieser Stelle nur die reinen “Anpassungarbeiten (also die Tagesdaten und die Ziel-URLs eintragen), wer mehr wissen möchte, kann das weiter unten nachlesen.

Was muss ich anpassen?

Ab der Zeile 8 etwas findest Du einen Teil in der HTML-Datei, der so aussieht:

    const targetURL = {
        "24.11.2021 17:00:00": "https://de.wikipedia.org/wiki/14._November",
        "21.11.2021 21:30:00": "http://example.com#3",
        "21.11.2021 20:00:00": "http://example.com#1",
        "21.11.2021 21:00:00": "http://example.com#2",
        "25.11.2021": "https://de.wikipedia.org/wiki/15._November",
        "26.11.2021": "https://apod.nasa.gov/apod/astropix.html",
        "28.11.2021 06:00:00": "https://twitter.com"
    }

Für alle, die noch nicht so fit sind mit HTML und JavaScript: das ist alles kein Hexenwerk, Du solltest nur darauf achten, keine dieser geschweiften Klammern oder Kommata oder andere Sonderzeichen versehentlich zu löschen. Ein Computer macht nicht, was Du willst, sondern was Du tippst 😉

Diese Zeilen haben folgende Bedeutung: wie Du sicher schon bemerkt hast, steht als erster Teil (vor dem Doppelpunkt) ein Zeitstempel. Das ist der Schlüssel, also die KOmbination aus Datum und Uhrzeit, nach dem die Logik auf der Seite sucht. Hier trägst Du den gewünschten Wert ein. Der Teil hinter dem Doppelpunkt ist die Ziel-URL, die für das vorher angegebene Datum aktiv sein soll. Da trägst Du die gewünschte URL ein. Bitte wie oben im Beispiel daran denken, dass diese Einträge in doppelte Anführungszeichen eingeschlossen werden.

Natürlich kannst Du auch Zeile entfernen oder neue Zeilen nach dem gleichen Muster ergänzen. Diese Datumswerte müssen auch nicht chronologisch aufeinander folgen. Falls für ein Datum keine Ziel-URL hinterlegt ist, wird die Seite mit einem entsprechenden Hinweis ausgegeben. Wenn Du jemand kannst, der HTML kann, kann diese Seite natürlich auch angepasst werden. Wenn keine Zeit angegeben wird, ergänzt das Script automatisch Mitternacht (00:00:00), so dass Du Dir für alle Einträge, die einen ganzen Tag gelten sollen, die Mühe mit der Zeitangabe sparen kannst.

Wird die Seite dann im Browser geöffnet, wird das aktuelle Tagesdatum für die eingestellte Zeitzone des Browsers berechnet (rufst Du diese Seite also in Tokyo auf, siehst Du den nächsten Tag früher als jemand hier Deutschland!). Dann wird die Ziel-URL für das Tagesdatum gesucht und als neue Adresse automatisch aufgerufen. Das geht im Normalfall so schnell, dass Du gar nicht siehst, dass diese Seite aufgerufen wird.

Gib’ mir die Datei!

OK, OK, OK … 😉 Ich habe die HTML-Beispieldatei hier verlinkt. Aber: jetzt nicht einfach auf den Link klicken! Sondern mit der rechten Maustaste der Link anklicken (oder einen long press auf einem iOS-Gerät) und dann aus dem Menü auswählen ("Ziel speichern unter…” oder “Verknüpfte Datei laden unter…”). So wird die Datei nicht angezeigt, sondern auf Deinem Gerät abgespeichert und Du kannst sie mit einem Texteditor (oder einem HTML-Editor) öffnen und bearbeiten.

Erzähl’ mir mehr…

Was passiert da? Für alle Profis: weghören! 😉 Da kommen jetzt ein paar didaktische Reduktionen, wir sind hier nicht beim Coder-Stammtisch… 🤣

Wenn eine HTML-Seite geladen wird, dann löst der Browser intern ein Ereignis aus: “So, ich habe fertig! Will jemand da was machen?”. Auf dieses Ereignis kann ich mit JavaScript reagieren und ein Script schreiben, das genau an diesem Zeitpunkt anspringt. Das macht übrigens dieses onload="onLoad();" im HTML-Element <body> in der Datei.

Dieses Script mit dem (sehr kreativen) Namen onLoad() macht dann folgendes: zuerst wird geprüft, ob die Seite mit einem Hash ausgerufen wurde (das sind diese Teile einer URL, die nach dem #-Zeichen kommen (eine interne Sprungmarke bzw. ein sog. “fragment”), der #help lautet. Dann wird kein Datum geprüft und die Seite einfach ausgegeben. Das ist sozusagen die eingebaute Online-Hilfe. Falls Du mehr zum Thema “Aufbau von URLs” wissen möchtest, hier findest Du mehr.

Falls nicht, wird die aktuelle Zeitzone des Browsers ausgelesen, das aktuelle Tagesdatum für diese Zeitzone gebildet und dann mit diesem Tagesdatum als Schlüssel in der bereits oben besprochenen Struktur eine hinterlegte Ziel-URL gesucht. Wird keine gefunden, wird ebenfalls die Seite ausgegeben. Wird dagegen eine neue Ziel-URL gefunden, dann wird diese als neue Location des Browsers gesetzt und damit geladen und angezeigt.

Es gibt bei diesem Ansatz neben der großen Einfachheit natürlich auch einen Nachteil. Die Datei ist nicht sehr gut gegen neugierige Leute geschützt, denn die Daten und die Zeil-URLs stehen ja in der Datei drin. Wenn jemand also weiß, wie sich die Datei im Browser nur anzeigen, aber nicht ausführen lässt oder die Datei einfach z.B. mit einem Tool wie curl oder wget herunterlädt, dann sind die Ziel-URLs pro Datum natürlich leicht einsehbar. Aber andererseits: ich könnte ja auch bei meinem Adventskalender alle Türchen im Voraus aufmachen. Damit bringe ich mich aber um die schönen Überraschungen… 😉

Ich hoffe, diese kleine Übung hilft Dir weiter, falls Du kein Geld für einen “dynamischen” QR-Code ausgeben möchtest oder einfach lernen willst, wie sich sowas leicht realisieren lässt.