Ropsten Ethereum kran: webbapp

Jackson Ng
Jackson ng

följ
oktober 18, 2020 · 4 min läs

denna serie av handledning dokumenterar min process för att bygga en Ethereum kran på Ropsten testnet. Detta är den 4: e artikeln i serien och det förklarar koderna bakom kranen Web App. Kranwebappen gör det möjligt för begärare att ge sin plånbokadress för att låta kranen dela ut gratis ETH till dem.

  1. Ropsten Ethereum kran: hur det fungerar
  2. Ropsten Ethereum kran: Smart kontrakt
  3. Ropsten Ethereum kran: JSON webbtjänst
  4. Ropsten Ethereum kran: webbapp

källkoderna för detta projekt finns i projektets Github-arkiv och kranens smarta kontrakt är tillgängligt här.

foto av Kirsten Marie Ebbesen på Unsplash

inte en DApp

genom design är kranens webbapp inte en decentraliserad applikation (Dapp). Det ansluter inte direkt till en Blockchain och det integreras inte med en Ethereum plånbok; med rätta, för som jag har förklarat i Del 1, kommer ETH-förfrågare som vill ha gratis ETH sannolikt inte att äga ETHs i sin plånbok. Så en kran behöver inte bara ge ut gratis ETH, utan också kunna finansiera transaktionerna på Ethereum Blockchain för att göra det.

denna kran webbapp gör helt enkelt webbtjänstsamtal till kran JSON webbtjänst för att utföra ETH överföring från min kran plånbok, till frågarens plånbok.

ta denna blockchain-kurs och bli en blockchain-utvecklare

koderna

mina koder finns i mitt GitHub-arkiv här.

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

raderna 46 till 48 talar om för webbappen var webbtjänsten JSON är. Min JSON webbtjänst körs i Glitch.

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

raderna 54 till 62 ringer till 2 JavaScript-funktionergo() ocheth()go()körs när användaren klickar på knappenbtnGo för att initiera en överföring av ETH från kran till sin plånbok. eth() körs när sidan läses in för första gången.

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

linjer 65 till 85 skicka en förfrågan till JSON webbtjänst/ethers för att ta reda på hur mycket ETHs kranen har. Den uppdaterar sedan #faucentvalue div med det ETH-värde som webbtjänsten returnerar.

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

raderna 87 till 119 definierar funktionengo() som gör en begäran till kranen via JSON webbtjänst.

den konstruerar ett JSONObject genom att ange den begärandes plånbokadress (walletaddress) och mängden ETH som han vill ta emot (myrequest).

ett webbtjänstsamtal till /sendethers gjordes genom att tillhandahålla JSONObject. Begäraren väntar sedan på medan webbtjänsten återvänder för att berätta för begäraren att hans ETH-begäran har uppfyllts.

vad är nästa?

källkoderna för dessa projekt finns i mitt Github-arkiv.

detta slutföra Ethereum kran serie tutorial, tack för att umgås och mina uppriktiga ursäkter för att ta nära 10 månader för att slutföra denna serie!

Om du gillade den här handledningen kanske du också vill läsa:

  • rösta på en Blockchain: en implementering av en Röstningsdapp på Ethereum.
  • minsta livskraftiga Ethereum mobil plånbok: En React Native-baserad mall som jag konstruerade för projekt som kräver en mobil Ethereum plånbok.
  • distribuera en privat Ethereum Blockchain på 10 minuter med Kaleido: få en privat Ethereum Blockchain igång i en jiffy.
  • Smart Contract Explained by Demonstration: en demo av en Escrow Service Smart Contract DApp-enligt min mening det snabbaste sättet att förklara för en lekman, vad Blockchain är.
  • Ethereum IoT Kid Grounding Device: mitt försök att införliva Blockchain med Internet of Things.
  • lotteri som ett Smart kontrakt: Distribuerat lotteri, ett försök att bygga ett lotterisystem på Ethereum Blockchain.

Läs också

  • den bästa Crypto Trading Bot
  • Crypto Copy Trading Platforms
  • den bästa Crypto Tax Software
  • bästa Crypto Trading Platforms
  • bästa Crypto Lending Platforms
  • bästa Blockchain Analysis Tools
  • Crypto arbitrage guide: Hur man tjänar pengar som nybörjare
  • bästa Crypto Charting Tool
  • Ledger vs Trezor
  • vilka är de bästa böckerna att lära sig om bitcoin?
  • 3commas Review
  • AAX Exchange Review | hänvisningskod, handelsavgift, fördelar och nackdelar
  • Deribit Review | alternativ, avgifter, API: er och Testnet
  • FTX Crypto Exchange Review
  • NGRAVE ZERO review
  • Bybit Exchange Review
  • 3commas vs Cryptohopper
  • den bästa Bitcoin — hårdvaruplånboken
  • bäst Monero plånbok
  • Ledger Nano S vs x
  • Bitsgap vs 3commas vs Quadency
  • Ledger Nano S vs Trezor en Vs Trezor t vs Ledger Nano x
  • Blockfi vs Celsius vs hodlnaut
  • bitsgap review-en kryptohandel bot som gör det enkelt Money
  • Quadency Review – en Crypto Trading Bot gjord för proffs
  • PrimeXBT Review / Hävstångshandel, avgift och Covesting
  • Ellipal Titan Review
  • SecuX Stone Review
  • BlockFi Review / tjäna upp till 8.6% intressen på din Crypto

Lämna ett svar

Din e-postadress kommer inte publiceras.