Steem: Wir programmieren eine auf der Blockchain basierende Website #002
Nachdem wir im letzten Teil die abgefragten Informationen nur auf der JavaScript-Konsole sehen konnten, zeige ich heute, wie man das ganze in Form einer "Nutzerfreundlichen" Website umsetzt. Das ganze sieht am Ende ungefähr so aus:
Ich habe weiterhin die beiden im letzten Teil erklärten Abfragen für Benutzer und Blöcke, diesmal lässt sich aber der Ausgangswert in einem Textfeld eintragen. Als erstes erstellen wir die Textfelder, Buttons und Ausgabetexte. Für die Eingabefelder erstellen wir Standard HTML inputs, wichtig ist hier die Zuweisung einer im Dokument einmalig vorkommenden ID. Daneben erstellen wir jeweils noch ein button Element, welchem wir als onclick-Event entsprechende JavaScript-Funktionen einsetzten, die wir später erstellen. Unter jedem Button erzeuge ich zusätzlich noch einen leeren Absatz, ebenfalls mit eindeutiger ID, zum Anzeigen des Ergebnisses. Der Code dazu sieht wiefolgt aus:
Nun da das Formular fertiggestellt ist, müssen noch die auswertenden JavaScript-Funktionen geschrieben werden. Die Funktion "viewBlockID()" ruft zunächst den Wert des Blocknummer-Eingabefeldes ab und speichert ihn in einer Variable. Im nächsten Schritt wird überprüft, ob die Blocknummer eine Zahl und größer als null ist, da ansonsten kein Block aus der Blockchain abgerufen werden könnte. Ist dies aber beides der Fall, so wird das Ergebnis der Abfrage in Form eines JSON-Strings ausgegeben. Bei der Funktion "viewUserData()" muss zusätzlich noch zunächst der Nutzername in ein Array gesetzt werden, da es sonst zu Fehlern in der API kommt. Der Code beider Funktionen sieht wiefolgt aus:
Nun können wir also Informationen aus der Blockchain über eine Website abrufen und in Textform anzeigen, im nächsten Teil beschäftigen wir uns dann mit dem schreiben in die Blockchain.