Ropsten Ethereum Kraan: Web App

Jackson Ng

Volgen

Okt 18, 2020 · 4 min lezen

Deze reeks tutorial documenten in mijn proces van het bouwen van een Ethereum kraan op de Ropsten Testnet. Dit is het 4e artikel van de serie en het verklaart de codes achter de kraan Web App. De kraan Web App stelt aanvragers in staat om hun portemonnee adres te laten de kraan schotel uit gratis ETH aan hen.

Ropsten Ethereum kraan: hoe het werkt
Ropsten Ethereum kraan: Smart Contract
Ropsten Ethereum kraan: JSON Web Service
Ropsten Ethereum kraan: Web App

de broncodes voor dit project bevinden zich in de GitHub repository van het project en de kraan smart contract is hier toegankelijk.

Foto door Kirsten Marie Ebbesen op Unsplash

Niet een DApp

Door het ontwerp, de Kraan Web App is niet een Gedecentraliseerde Toepassing (DApp). Het maakt niet rechtstreeks verbinding met een Blockchain en het niet integreren met een Ethereum portemonnee; terecht, want zoals Ik heb uitgelegd in Deel 1, ETH aanvragers die wil gratis ETH zijn waarschijnlijk niet al eigenaar ETH in hun portemonnee. Dus een kraan moet niet alleen geven gratis ETH, maar ook in staat zijn om de transacties te financieren op de Ethereum Blockchain om dit te doen.

Deze Tapkraan Web App maakt eenvoudig webservice oproepen naar de kraan JSON webservice om ETH overdracht uit te voeren van mijn kraan portemonnee, naar de portemonnee van de aanvrager.

volg deze blockchain cursus en word blockchain ontwikkelaar

De Codes

mijn codes zijn hier te vinden in mijn GitHub repository.

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

regels 46 tot 48 vertelt de Web-App waar de JSON-webservice is. Mijn JSON webservice draait in Glitch.

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

regels 54 tot 62 aanroepen naar 2 JavaScript-functies go() en eth()go() wordt uitgevoerd wanneer de gebruiker op de knop btnGo klikt om een overdracht van ETH van kraan naar zijn portemonnee te starten. eth() wordt uitgevoerd wanneer de pagina voor de eerste keer wordt geladen.

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");
}

regels 65 tot en met 85 stuur een verzoek naar de JSON webservice /ethers om uit te vinden hoeveel ETHs de kraan heeft. Het werkt vervolgens de #faucentvalue div bij met de ETH waarde die de webservice retourneert.

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();
}

regels 87 tot 119 definieer de functie go() die een verzoek doet aan de kraan via de JSON webservice.

Het maakt een JSONObject door het portefeuilleadres van de aanvrager op te geven (walletaddress) en de hoeveelheid ETH die hij wenst te ontvangen (myrequest).

een webservice-aanroep naar /sendethers werd gedaan door de JSONObjectaan te geven. De aanvrager wacht dan op terwijl de webservice terugkeert om de aanvrager te vertellen dat zijn ETH verzoek is voldaan.

wat volgt?

de broncodes voor deze projecten zijn te vinden in mijn GitHub repository.

Dit complete De Ethereum kraan serie van tutorial, Dank u voor opknoping uit en mijn oprechte excuses voor het nemen van bijna 10 maanden om deze serie te voltooien!

Als u deze tutorial leuk vond, wilt u misschien ook lezen:

stemmen op een Blockchain: een implementatie van een stemmende DApp op Ethereum.
minimale levensvatbare Ethereum mobiele portemonnee: Een React Native-based template die ik gebouwd voor projecten die een mobiele Ethereum portemonnee vereisen.
implementeer een private Ethereum Blockchain in 10 minuten met Kaleido: het krijgen van een private Ethereum Blockchain up and running in een handomdraai.
Smart Contract uitgelegd door demonstratie: een demo van een Escrow Service Smart Contract DApp-naar mijn mening, de snelste manier om uit te leggen aan een leek, wat Blockchain is.
Ethereum IoT Kid aarding apparaat: mijn poging om Blockchain op te nemen met Internet of Things.
loterij als een slim Contract: Gedistribueerde Loterij, een poging om een loterij systeem te bouwen op de Ethereum Blockchain.

Ropsten Ethereum Kraan: Web App

Lees ook

Geef een antwoord Antwoord annuleren