Web3.js Discussion


#1

Welcome to the thread about Web3.js. Here you can discuss everything about the Ethereum api and potential problems that you might stumble upon.


#2

Hi there,

In this lesson I couldn’t understand the basics of web3.js properly.
Is there anyone who can explain the app.js file line by line ? How can we initiate the web3.js and how do we create a conection with our contract?

I would be appreciated if you help me.
Thanks in advance.

(function (Contract) {
    var web3;
    var instance;

function init(cb) {
    web3 = new Web3(
        (window.web3 && window.web3.currentProvider) ||
        new Web3.providers.HttpProvider(Contract.endpoint));

    var contract_interface = web3.eth.contract(Contract.abi);
    instance = contract_interface.at(Contract.address);
    cb();
}

function getMessage(cb) {
    instance.message(function (error, result) {
        cb(error, result);
    });
}

$(document).ready(function () {
    init(function () {
        getMessage(function (error, result) {
            if (error) {
                console.error("Could not get article:", error);
                return;
            }
            $('#message').append(result);
        });
    });
});
`})(Contracts['HelloWorld']);`

#3

I can walk you through the init function, which is where we initiate web3.

function init(cb) {
    //This instantiates the web3 object. In it's constructor it takes a web3 provider. A provider is a connection the 
    //ethereum network. Could be a local node or for example metamask.  
    web3 = new Web3(
        (window.web3 && window.web3.currentProvider) ||
        new Web3.providers.HttpProvider(Contract.endpoint));

    //Here we create an interface which contains all the functions and events of our contract. We need the abi 
    //string in order for web3 to know the interface of the contract. 
    var contract_interface = web3.eth.contract(Contract.abi);

    //Here we instantiate the contract to a contract running at an actual ethereum address. We use this instance 
    //object to interact with our contract.
    instance = contract_interface.at(Contract.address);
    
    cb();
}

#4

why is cb in the getMessage(cb) ??

function getMessage(cb) {
instance.message(function (error, result) {
cb(error, result);
});
}


#5

I’m not sure if I understand you question. The cb (callback function) is there so that we can call the callback function when we have received the message from our contract. The callback function that is passed in is this. It can be found on row 23 to 28 in the app.js in the video. Let me know if you need any further explanation.

function(error, result) {
    if(error){
        console.log("Could not get article", error);
        return;
    }
    $('#message').append(result);
}

#6

Hi Filip,

Is getMessage a promise? How will the function know if there’s an error or result? I don’t see any declaration or expression of what error or result is.


#7

No, instead we are working with callback functions that are passed into the function. Error and results are objects that are returned by the smart contract. If we have a successful execution, error will be null and result will contain the result from the contract.


#8

Hi. I notice in the app.js line 1 writes (function (Contract){
line 32 writes (Contracts[‘HelloWorld’]).
There is a difference of one “s”, does it not matter, when we try to relate these 2 lines together? Thank you. Reference : Superblocks


#9

It is correct. Line 32 is the input that we reference on line 1. Contracts is an array and we input a specific contract in that array into the function starting on line 1. We select the HelloWorld contract as our input by typing Contracts[HelloWorld].

Then on line 1 we have created the function that takes that contract as an input and makes it available to us in the js code. It’s a little bit complicated but I hope you understand it better now. Either way it’s not necessary to understand it 100% since that code is generated automatically by superblocks anyway.


#10

Thank you, Filip.:cocktail:


#11

So I was reading the code this whole time as if “cb” wasn’t already a defined variable/function. From a quick Google search, it has a built in definition of being a function of saying error or result?

Can you explain how “cb” works, both from a general sense and also how it’s being applied here?


#12

Not really, “cb” is just what we name the input to the function. The input in this case is a function. You can name it whatever you want. You could name it “myFunction” or whatever you want. As long as when you call the function you change cb() to myFunction().

It’s a little bit complicated. But google and research more about callback functions in javascript if you want to learn more.


#13

Filip

I have a question about the getMessage function

function getMessage(cb) {
      instance.message(function (error, result) {
            cb(error, result);
      });
});

My understanding is that instance.message holds the contents of the variable message in the HelloWorld contract. I think that essentially instance.message is just a variable. So I don’t understand why we have a ‘( function (error, result) {
cb(error, result);
})’ following instance.message.Are we saying that instance.message is actually a function that has another function as argument ?
I would think that the getMessage function would look like:

function getMessage(cb) {
      instance.message;
            cb();
}

Thanks


#14

Yes, exactly your first assumption. The instance.message is a function that takes a function (callback function) as an argument.

We can’t access variables in the contract straight away, since the contract and the javascript code is completely separate. So we need so called getter functions to access the variables of the contract. Those will have same name as the variable itself in web3.js, for simplicity reasons.

So when we call the instance.message function, we will make a request to the blockchain to fetch the message variable from the contract. When the blockchain responds back to our contract, which can take a short while, we will execute the callback function. That’s when we know the blockchain has responded to our request and then we can continue our execution.