Motivation

This series of tutorial documents my process of building an Ethereum faucet on the Ropsten Testnet. This is the 4th article of the series and it explains the codes behind the Faucet Web App. The Faucet Web App allows requesters to provide their Wallet address to let the faucet dish out free ETH to them.

1. Ropsten Ethereum Faucet: How it works
2. Ropsten Ethereum Faucet: Smart Contract
3. Ropsten Ethereum Faucet: JSON Web Service
4. Ropsten Ethereum Faucet: Web App

The source codes for this project are in the project's Github repository and the faucet smart contract is accessible here.

Not a DApp

By design, the Faucet Web App is not a Decentralized Application (DApp). It doesn't connect directly to a Blockchain and it does not integrate with an Ethereum Wallet; rightly so because as I have explained in Part 1, ETH requesters who wants free ETH aren't likely to already own ETHs in their wallet. So a faucet needs to not only give out free ETH, but also be able to fund the transactions on the Ethereum Blockchain to do so.

This Faucet Web App simply makes web service calls to the Faucet JSON Web Service to execute ETH transfer from my faucet wallet, to the requester's wallet.

The Codes

My codes are found in my GitHub repository here.

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

Lines 46 to 48 tells the Web App where the JSON web service is. My JSON web service is running in Glitch. 

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

     });
     $("#loader").hide();
     eth();
     
});

Lines 54 to 62 make calls to 2 JavaScript functions go() and eth(). go() runs when the user clicks the btnGo button to initiate a transfer of ETH from faucet to his wallet. eth() runs when the page loads for the first time.

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

Lines 65 to 85 send a request to the JSON Web Service /ethers to find out how much ETHs the faucet has. It then update the #faucentvalue div with the ETH value that the Web Service returns.

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

What's Next?

The source codes for this projects can be found in my Github repository.

This complete the Ethereum Faucet series of tutorial, thank you for hanging out and my sincere apologies for taking close to 10 months to complete this series!

If you enjoyed this tutorial, perhaps you may also wish to read:

• Voting on a Blockchain: An implementation of a Voting DApp on Ethereum.
• Minimum Viable Ethereum Mobile Wallet: A React Native-based template that I constructed for projects that require a mobile Ethereum wallet.
• Deploy a Private Ethereum Blockchain in 10 Minutes with Kaleido: Getting a private Ethereum Blockchain up and running in a jiffy.
• Smart Contract Explained by Demonstration: A demo of an Escrow Service Smart Contract DApp - in my opinion, the fastest way to explain to a layman, what Blockchain is.
• Ethereum IOT Kid Grounding Device: My attempt to incorporate Blockchain with Internet of Things.
• Lottery as a Smart Contract: Distributed Lottery, an attempt to build a lottery system on the Ethereum Blockchain.

Photo by Kirsten Marie Ebbesen on Unsplash