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:

Tweet von @dar_bue

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

Rucola und Parmiggiano und Bresaola

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.

Share Kommentieren
X

Ich habe einen Kommentar zum Artikel

Sie können die Kommentarfunktion ohne die Speicherung personenbezogener Daten nutzen. Schreiben Sie Ihren Kommentar und klicken Sie auf "Abschicken", der Versand erfolgt per Mail von meinem Auftritt aus an mich zur PrĂŒfung. Dieser Versand und die Übertragung Ihres Kommentars ist zur ErfĂŒllung der von Ihnen mit dem Klick auf "Abschicken" ersichtlichen Absicht technisch notwendig und bedarf keiner weiteren Einwilligung.

Wichtiger Hinweis: Sie haben keinen Anspruch auf die Veröffentlichung Ihres Kommentars. Jeder hier eingegebene Kommentar wird zuerst geprĂŒft. Ich behalte mir die Entscheidung vor, welche Kommentare ich als ErgĂ€nzung an den Artikel anfĂŒge.