Ethereum dApp front end. Display variables.

Ethereum dApp front end. Display variables.

Catching up

Few weeks ago I created a video tutorial describing the basics of creating Ethereum decentralized application (dApp). I created the app in the tutorial by using meteor, web3.js add-on for meteor and metamask. The video can be found here:

Now it’s time to expend on the previous video and see other ways to extracts more advanced information out of the blockchain.

The smart contract

For this example I’ve created a simple Ethereum smart contact. This smart contract contains one public string variable called name and one function called changeName:

contract demo{
    
    string public name = "Shlomi";
    
    function changeName(string _newName){
        name = _newName;
    }
}

I’ve transmitted this contract to the Modern test-net using metamask, and the contract can now be found under the address: 0x53a95ce8fcdd9080ba7c26711207e45382ae4180

Solidity creates get_variable functions for public variables!

A nice feature in Solidity is the ability to call public variables as if they are functions. The result of the function call can then be transferred to another callback function, e.g:

myContract.name(function(err, res){
  alert(res)
})

This is highly useful when dealing with web development as it allows for an easy way to interact with light clients (such as metamask) and helps to provide a better user experience (We can, for example define more user friendly error messages in case we can’t properly interact with the blockchain). In our code, once the “function” name is called, the web3 object myContract will look for a variable called name that is stored at the blockchain at address 0x53a9... Then the result (In this case, my name Shlomi) will be passed to the anonymous callback function and then presented in a pop-up window.

And this is how you set the web3 object

(In the previous video I explained how to install meteor with the Ethereum web3 package)

In order to interact with smart contract we usually need 3 parameters.

  1. The address of the smart contract we want to interact with. You can get the address for your own contract by scanning the blockchain for your own Ethereum address and the list of transactions associated with it.
  2. The Interface or ABIarray. I usually prefer to refer to this parameter simply as ABI, so from here on it will be simply called ABI.

    In the web3 documentation it's called ABIarray. In the the solidiy web compiler it's called Interface.
    In the web3 documentation it’s called ABIarray. In the the solidiy web compiler it’s called Interface.
  3. The bytecode or data. I prefer to refer to this parameter as Data. So from here on it will be simply called Data.

 

The ABI and Data are usually provided by the compiler you’re working with. (I’m using solidity-browser It’s a great tool for beginners!)
Now we can declare the web3 object myContract. Using two of the three parameters: The contract address and the contract ABI (The data will be used later).

contractAddress = "0x53a95ce8fcdd9080ba7c26711207e45382ae4180"

ABI = [{"constant":true,"inputs":[],"name":"name","outputs":[{"name":"","type":"string"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_newName","type":"string"}],"name":"changeName","outputs":[],"payable":false,"type":"function"}]

Frozeman:template-var. Easy way to display variables from callback functions.

This part actually has nothing to do with Ethereum, but because we’re going to use many (many) callback functions, it’s always nice to have an easy way to display the result in a more html friendly manner. Template-var gives us the option to set variables directly from within the callback function.

First we need to add it to our meteor project. The package can be found here.

Now what we need to do is to initialize the template object. In our helpers methods we’ll add the following code:

var template = Template.instance();

Once our template was declared, we can simply use it in our callback function.

Template.hello.helpers({
  counter() {
    var template = Template.instance();

    myContract = web3.eth.contract(ABIArray).at(contractAddress);

    myContract.name(function(err, res){
      TemplateVar.set(template, "name", res);
    })
  },
});

The first argument is the template that we’ve just declared. The second is the name of the variable, and the third is the value that we want the argument to have. In our case it’s the result of the name “function”.

One last step

In our html file, we need to call to our templateVar instance by inserting:

 
The string stored at the "name" variable is: {{counter}} {{TemplateVar.get "name"}}.

Now whenever we’ll load our app, the variable name will incorporated in our project as if it was part of the original html file.

Leave a Reply

Your email address will not be published. Required fields are marked *