Ethereum Hello World Dapp Discussion

When I copy the code to Atom and open the html in Chrome i get the following error: “Uncaught ReferenceError: Contracts is not defined”; I have at the end of the .js the line with “})(Contracts[‘HelloWorld’]);”; and the contract is in the same folder as the js file. Did someone else encouter this error? Any ideas on how to solve it?

I’m not 100% sure what you are copying. But you can’t simply copy all code from superblocks directly to atom. If you want to use the code outside superblocks you first need to deploy it to the testnet and then export the code from superblocks.

Otherwise you need to run your own eth node. You can run a local one using truffle.

Not at the moment since web3 v0.2 used in superblocks doesn’t support that. But if you take a look at the ethereum game programming course you can see how it’s done with truffle and v1.0.

I will update the dapp section soon, then all of that will be updated.

1 Like

Great. Looking forward to an update here!

I have deployed the contract in the Testnet.

But now, the click button for all the addresses doesn’t work.

Please more details on how to deploy this simple dapp on the testnet, then copy the code in atom and then open it in Google browser.

Thanks Filip and community.

If you have deployed it. Then you can go into Contracts//Interact. There you will find a checkbox at the top left that says “Show source”. There you will find the html and JS for your dapp. You can insert that into a html file with the JS in a script tag.

But it seems like the abi files are missing from there. I have emailed superblocks and I will get back to you. This section will soon be replaced and updated, and then this will be way easier.

Hi, I have a question about the flow of the program. I understand that

$("#submitButton").click(updateMessage);

listen for the submit button and passes the string to updateMessage function.

The updateMessage function then creates variable newMessage, from the string in the submit button.

My question is: which part of the code in the updateMessage passes the newMessage string to the update function in the contract ? Does the newMessage passes to message or to message 2 variable in the contract?

Bye

Hello Filip, when you redo this section, do you mind having two text fields (like FirstName and LastName) to update the smart contract?

Also, I am curious to know if you have explored anyway to embed date and time in dApp and retrieve it back from Blockchain through Smart Contract? I am kinda exploring it with no success thus far

We pass the message to the contract using this line

instance.update.sendTransaction(newMessage, {from: "0xa48f2e0be8ab5a04a5eb1f86ead1923f03a207fd", gas: 30000000}, function(error, result){

Where instance is our contract and update is the function we are calling. As you can see we pass in the variable newMessage into the function followed by some ethereum specific data.

1 Like

Sure, but that’s very easy. You can just modify the hello world dapp and send in 2 parameters instead of 1 to the smart contract.

Embedding date and time is more difficult, depending on what you mean. You can always save a variable containing a specific date/time but the smart contract it self can’t keep track of time. However, the blockchain keeps track of time fairly well using block height.

1 Like

Yup, I do understand that we will need to pass as two arguments in onclick function to update the smart contract.

Coming to embedding the date and time, I understand we cannot get the transaction processed time (from front end application), without block number or Transaction Hash is not possible. In real world, a non-blockchain person will never understand blocknumber and transaction hash, so I was kinda toying the idea of sending the currentTime along with the input to SmartContract/ BlockChain from the dApp itself, so that when an user tries to query the input data (i.e., FirstName) BlockChain will respond back with FirstName, LastName and the transaction processed time (which was injected in the dApp). I am specifically not looking for blockTime, but the time when transaction was injected into the pool (from dApp).

Hope, I am clear… any help in this regard would be helpful :slight_smile:

In a design level or high level, I do understand we will need to introduce another field to get the System’s local time (or capture UTC time), convert it to String and send it to Smart Contract as third argument (or parameter) and get it stored… add another function in Smart Contract to getMessage(_FName) and returns 3 Strings i.e., FName, LName and processedTime

1 Like

Hey, I was able to finish up my smart contract…

contract helloWorld{

struct data {
    string fName;
    string lName;
    string processedDate;
}

mapping (string => data) dataAccount;

function setInfo(address _address,string _fName, string _lName, string _processedDate) public {

    data storage data_key = dataAccount[_fName];

    data_key.fName = _fName;
    data_key.lName = _lName;
    data_key.processedDate = _processedDate;

    dataAccts.push(_address) -1;
}
function getInfo(string _fName) public view returns (string,string,string){
    return (dataAccount[_fName].fName,dataAccount[_fName].lName,dataAccount[_fName].processedDate);
}

}

You might have noticed it already, SuperBlocks has updated and I am finding difficult to write JS file in the new interface…

Do you think, you will be able to help with some tutorials/ videos to acclimatize with new JS files in Superblocks.

Awesome, good job!

We will update the Dapp Course in the end of the summer or in the fall. Superblocks version is getting a little bit old.

Hello Filip,

First, I am finding hard time in writing JS for my Solidity code (in both lab and studio versions)…I understand, you do want to update your course bit late in the season… do you mind sharing me the code snippet of JS file just for the ‘update’ function… for some reasons, my version of update doesn’t work…

function updateMessage() {
    let fName = $('#fname-input').val();
    let lName = $('#lName-input').val();
    let pDate = $('#pDate-input').val();
    if(fName && fName.length > 0){
        instance.setInfo.sendTransaction("0x..",fName,lName,pDate, {from: "0x..", gas: 30000000}, function(error, result){

Hello Filip, missed to tag you earlier… any help on my above question on JS part would be nice…

What’s the problem? Please clarify what the problem with your function is and maybe I can help to figure out what’s wrong.

Hi Filip.
I have a question about $(document).ready command.

In the Hello World dapp the instance of this is code is:

$(document).ready(function () {
          init(function () {
              getMessage(function (error, result) {
                  if (error) {
                      console.error("Could not get article:", error);
                      return;
                  }
                  $('#message').append(result);
              });
          });
          $('#submitButton').click(function() {
              updateMessage();
          });
      });

I understand that the general form should be $(document).ready(somefunction), but,
in the dapp I see two functions: the first does no have a name, it just says
function(); the second function is init (defined previously); so the command is something like

$(document).ready(function (){ init(){} })

my question is: why do we need the first function? I ran the code without the first
function() and it doesn’t work, but i don’t see why we need the first function, what does it do?

Good question!

The confusion here is due to something called anonymous functions. First of all, you are completely correct that the function document.ready takes a function as an argument. I know, it sounds confusing, a function that takes another function as an argument.

Now, there are different ways we can pass in a function to the document.ready function.

We could for example declare a function, assign it to a variable and then pass it into the function. Like this.

var helloFunction = function(){
    console.log("Hello");
}

$(document).ready(helloFunction)

But we could also simplify this piece of code by defining the function as we pass it in. This is what we do in the lecture code, and it’s a very common structure in javascript. Like this.

$(document).ready(function(){
    console.log("Hello");
})

All I’ve done here is to take the function declaration code and pasted it instead of the previous variable name. This is exactly what we do in the lecture code.

The init function is a function call we make inside of the anonymous function. We could in theory have passed this directly to the ready function, but then where would we put the submitbutton.click function? We needed to pass in a function to the ready function that in turn called multiple functions.

You can read a bit more about anonymous functions here: https://en.wikibooks.org/wiki/JavaScript/Anonymous_functions

If you want to understand this deeper I would recommend you to practice this by restructuring the code you posted to NOT use anonymous functions, instead you have to define them beforehand and assign them to a variable.

Thanks! I will follow your recommendation

Hey, I was on extended holidays… couldn’t respond to you earlier.! Unfortunately, I dont see any error message printed in SuperBlocks… Ultimately, I do want to build a HelloWorld kinda App where users key in the details like FName, LName etc., and able to retrieve the keyed information by searching through FName…

Fun part, I have my Solidity code up and running but couldn’t write (or get past) JS part which will collect information from the client side and pass it to smart contract…