Ropsten Astraleum Wasserhahn: Web-App

Jackson Ng
Jackson Ng

Folgen

Oktober 18, 2020 · 4 min lesen

Diese Tutorial-Serie dokumentiert meinen Prozess des Aufbaus eines Ethereum-Wasserhahns im Ropsten-Testnetz. Dies ist der 4. Artikel der Serie und erklärt die Codes hinter der Wasserhahn-Web-App. Mit der Faucet-Web-App können Anforderer ihre Brieftaschenadresse angeben, damit der Faucet ihnen kostenlose ETH zuteilt.

  1. Ropsten Ethereum Faucet: Wie es funktioniert
  2. Ropsten Ethereum Faucet: Smart Contract
  3. Ropsten Ethereum Faucet: JSON Web Service
  4. Ropsten Ethereum Faucet: Web App

Die Quellcodes für dieses Projekt befinden sich im Github-Repository des Projekts und der Wasserhahn Smart Contract ist hier zugänglich.

Foto von Kirsten Marie Ebbesen auf Unsplash

Keine DApp

Die Faucet Web App ist keine dezentrale Anwendung (DApp). Es verbindet sich nicht direkt mit einer Blockchain und es integriert sich nicht in eine Ethereum-Brieftasche; zu Recht, denn wie ich in Teil 1 erklärt habe, besitzen ETH-Anforderer, die freie ETH wollen, wahrscheinlich nicht bereits ETHs in ihrer Brieftasche. Ein Wasserhahn muss also nicht nur kostenlose ETH ausgeben, sondern auch die Transaktionen auf der Ethereum-Blockchain finanzieren können, um dies zu tun.

Diese Faucet-Web-App führt einfach Webdienstaufrufe an den Faucet-JSON-Webdienst durch, um die ETH-Übertragung von meiner Faucet-Brieftasche zur Brieftasche des Anforderers auszuführen.

Nehmen Sie an diesem Blockchain-Kurs teil und werden Sie Blockchain-Entwickler

Die Codes

Meine Codes finden Sie hier in meinem GitHub-Repository.

function serverURL(){
return "https://resonant-backpack.glitch.me";
}

Die Zeilen 46 bis 48 teilen der Web-App mit, wo sich der JSON-Webdienst befindet. Mein JSON-Webdienst wird in Glitch ausgeführt.

$( document ).ready(function() {
$("#btnGo").bind("click", function () {
go(); });
$("#loader").hide();
eth();
});

Die Zeilen 54 bis 62 rufen 2 JavaScript-Funktionen auf go() und eth()go() wird ausgeführt, wenn der Benutzer auf die Schaltfläche btnGo klickt, um eine Übertragung der ETH vom Wasserhahn auf seine Brieftasche zu initiieren. eth() wird ausgeführt, wenn die Seite zum ersten Mal geladen wird.

function eth(){
var url = serverURL() + "/ethers"; $.ajax({
type: 'POST',
url: url,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
dataType: 'json',
success: function (arr) {
_ethResult(arr);
},
error: function () {
validationMsg();
}
});
}function _ethResult(arr) {
$("#faucetvalue").text("Faucet: " + arr.ethbalance + " ETH");
}

Die Zeilen 65 bis 85 senden eine Anfrage an den JSON-Webdienst /ethers, um herauszufinden, wie viel ETHs der Wasserhahn hat. Anschließend wird die #faucentvalue div mit dem ETH-Wert aktualisiert, den der Webdienst zurückgibt.

function go() {
$("#message").text("");
$("#loader").show();
var url = serverURL() + "/sendethers";
walletaddress = $("#walletaddress").val();
myrequest = $("#myrequest").val();
var JSONObject = {
"receiver": walletaddress,
"request": myrequest
};
$.ajax({
type: 'POST',
url: url,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
dataType: 'json',
data: JSONObject,
success: function (arr) {
_goResult(arr);
},
error: function () {
validationMsg();
}
});
}function _goResult(arr) {
$("#message").text("OK");
eth()
$("#loader").hide();
}

In den Zeilen 87 bis 119 wird die Funktion go() definiert, die über den JSON-Webdienst eine Anforderung an den Benutzer stellt.

Es erstellt eine JSONObject indem die Brieftaschenadresse des Anforderers (walletaddress) und die Menge an ETH, die er erhalten möchte (myrequest).

Ein Webdienstaufruf an /sendethers wurde durch Bereitstellung der JSONObject . Der Anforderer wartet dann, während der Webdienst zurückkehrt, um dem Anforderer mitzuteilen, dass seine ETH-Anforderung erfüllt wurde.

Was kommt als nächstes?

Die Quellcodes für dieses Projekt finden Sie in meinem Github-Repository.

Dies vervollständigt die Ethereum Faucet-Reihe von Tutorials, danke für das Abhängen und meine aufrichtige Entschuldigung dafür, dass ich fast 10 Monate gebraucht habe, um diese Serie abzuschließen!

Wenn Ihnen dieses Tutorial gefallen hat, möchten Sie vielleicht auch lesen:

  • Abstimmung über eine Blockchain: Eine Implementierung einer Abstimmungs-DApp auf Ethereum.
  • Minimal lebensfähige Ethereum Mobile Geldbörse: Eine React Native-basierte Vorlage, die ich für Projekte erstellt habe, die eine mobile Ethereum-Brieftasche erfordern.
  • Stellen Sie mit Kaleido in 10 Minuten eine private Ethereum-Blockchain bereit: Im Handumdrehen eine private Ethereum-Blockchain zum Laufen bringen.Smart Contract erklärt durch Demonstration: Eine Demo eines Escrow Service Smart Contract DApp – meiner Meinung nach der schnellste Weg, einem Laien zu erklären, was Blockchain ist.
  • Ethereum IOT Kid Grounding Device: Mein Versuch, Blockchain in das Internet der Dinge zu integrieren.
  • Lotterie als intelligenter Vertrag: Distributed Lottery, ein Versuch, ein Lotteriesystem auf der Ethereum-Blockchain aufzubauen.

Lesen Sie auch

  • Der beste Crypto Trading Bot
  • Crypto Copy Trading Platforms
  • Die beste Crypto Tax Software
  • Beste Crypto Trading Platforms
  • Beste Crypto Lending Platforms
  • Beste Blockchain Analysis Tools
  • Crypto Arbitrage Guide: Wie man als Anfänger Geld verdient
  • Bestes Crypto Charting Tool
  • Ledger vs Trezor
  • Was sind die besten Bücher, um über Bitcoin zu lernen?
  • 3Commas Review
  • AAX Exchange Review | Empfehlungscode, Handelsgebühr, Vor— und Nachteile
  • Deribit Review | Optionen, Gebühren, APIs und Testnet
  • FTX Crypto Exchange Review
  • NGRAVE ZERO review
  • Bybit Exchange Review
  • 3Commas vs Cryptohopper
  • Die beste Bitcoin Hardware Wallet
  • Beste Monero wallet
  • ledger nano s gegen x
  • Bitsgap gegen 3Commas gegen Quadency
  • Ledger Nano S gegen Trezor one gegen Trezor T gegen Ledger Nano X
  • BlockFi gegen Celsius gegen Hodlnaut
  • Bitsgap Review – Ein Krypto-Handelsbot, der es einfach macht Geld
  • Quadency Review- Ein Crypto Trading Bot für Profis
  • PrimeXBT Review / Leverage Trading, Fee und Covesting
  • Ellipal Titan Review
  • SecuX Stone Review
  • BlockFi Review / Verdienen Sie bis zu 8,6% Zinsen auf Ihre Krypto

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.