Dapp Lessons 1: “Hello World”

The basic workflow for creating Ethereum Dapps is to first create the smart contract, your tests and finally build your front-end. Note: From the command prompt install node .js, Truffle framework, Static Server, Web3 and Solidity inside your project folder. From the command prompt run the following commands.

npm i install -g (to install node.js)

npm install -g truffle (to install the truffle framework)

truffle init (to initialize your truffle project)

npm init -y (to initialize your npm project and produce your .json file)

npm install web3 solc (to install the latest versions of web3 and Solidity)

Smart Contract

Let’s write a simple Dapp based on a smart contract called HelloWorld. HelloWorld is a very common tutorial when you are starting a new language. Let’s use Ethereum’s Remix IDE, to create a new file for our smart contract called HelloWorld.sol

The first thing you need to do is specify the version of Solidity you are using. In our case, we are using Solidity 0.5.12. Therefore, we write pragma solidity 0.5.12; as our first statement. Next, we define our smart contract using the contract key word and call it HelloWorld using camel case spelling. The we write our curly braces.

pragma solidity 0.5.12;

contract HelloWorld {

}

Inside the curly braces is where we define the actual code of our smart contract. Similar to JavaScript a contract is like an object and like an object in JavaScript we can write functions inside them. Let’s create a function called hello that returns a string that says ‘Hello World’. Remember, that in solidity every statement ends in a semi colon ; Remember to add visibility specifiers to your functions. The hello function will be public, which means it can be called from outside of the contract. When you return something from a function you must also specify the type of information it is. In this case we will use the returns key word and specify that we will return a string. We also have to specify a data location for our variables. In this case the string variable is temporary so we will save it to the memory location.

Note: In Solidity functions can modify things on the blockchain or just write data. In this case we want something simple that doesn’t modify the blockchain at all. Therefore, we will use the pure keyword to show that this is a function that only writes.

The completed HelloWorld smart contract.

We can now deploy our contract in remix by using the run tab. Click deploy and remix will analyze the contract and create buttons for each function. This allows you to interact with each function after deployment. In our case the hello function doesn’t take any argument. However, when you click the button the string Hello World is returned.

Testing

Now we are going to write our test for our HelloWorld smart contract. This contract has the simple function hello() that we can actually test. Create a folder called test inside your main project folder and then create a file and name it helloWorld.js and open it. First, we need to import the contract artifacts of the HelloWorld smart contract. So, we will define a variable for that, and use the injected artifacts object supplied by the truffle framework. On this object we can use the require method and then pass it the name of the smart contract ‘HelloWorld’ the smart contract name must match identically to the smart contract name on the contract.

Importing the contract artifacts of the HelloWorld smart contract.

Then we define the contract block and pass it the name of the smart contract that we are testing in this case its ‘HelloWorld’ and also give it a callback function. Next, inside the callback function we will define the test by using the it function. We will name the it function (‘Should return Hello World’) and give it an async callback because we will also be using the await keyword. As we define the async callback we will await the deployed instance of our HelloWorld smart contract by defining it as a variable called helloWorld. So, then we await the result that we are trying to find, in this case we want to access the hello function of our helloWorld contract instance. The hello functions takes no arguments it just returns ‘Hello World!’. Then we run our assertion that the result is equal to ‘Hello World!’. That’s it for our test, now we go to the cmd prompt and run truffle test from our test folder.

The HelloWorld contract block where we create a deployed instance of our smart contract. We access the hello() function, which returns the result ‘Hello World’.

Front-End

This is how the folders in our project folder should look. We have added our smart contract and migrations folder over to the front end folder. The front end folder, containing the bundle.js, index.html and web3.js files was created with bootstrap code. However, we will write the code of our bundle file ourselves.

To start our frontend, lets create a new folder inside our project folder called the frontend of our dapp project. For, this project I am using bootstrap code which gives us the bundle.js, index.html and web3.js files. We will build the bundle file ourselves. Next, we will run the truffle compile command in the command prompt. Truffle will produce our contract artifact inside the build folder. We will need the contract artifact to import the contractABI inside the front end. After successfully compiling the smart contracts, Go inside the build directory and look inside the contracts folder. Inside you will find and open the HelloWorld.json file. Here is where you can find your abi key. Also open up your bundle file. Inside the bundle file, let’s create a variable for the contractABI and a variable for the contractAddress. Once the smart contracts are deployed you will find the contract address in the transaction receipt. Paste both of these values for helloWorldABI and helloWorldAddress and run --migrate reset from the cmd prompt in the truffle develop environment to get the contractAddress.

Then we created a web3 instance and with it we are able to communicate with the blockchain and our smart contract. So create a new variable called web3 and remember to use the new keyword from javascript and the Web3 object with an uppercase W. These reference the library that we are importing into our HTML file. Then we gave it the url to our local blockchain that we got from the truffle console which is (‘http://localhost:9545’); Now that we have our web3 object we can finally create a contract instance which is a javascript object to communicate with our HelloWorld.sol smart contract. Then we created a variable called helloWorld which is a pointer to our smart contract, and we set it equal to: new web3.eth.Contract(contractABI, contractAddress);

Now that we have our contract instance helloWorld we can execute the function of our smart contract. In this case our smart contract has only one function called hello() that doesn’t take an argument and returns a fixed string. So we will use the helloWorld contract instance pointer to call the hello() function. The way we do this is to first access the methods object and then inside the methods object we will have all the functions of the contract. In this case its only .hello() with no argument.

Here is where we access and call the hello() function and add the result to the HTML file of our webpage.

Note: Right now, our code wont work because as soon as the javascript is loaded in the browser its going to execute the code straight away. However, the DOM of the HTML page is not finished loading so we also need to wait for the fully loaded HTML document to load first. For that we will wrap our code in a callback. So, we use the documnent object of the browser again and after that add the .addEventListener method which allows us to wait for a certain event. The event we want to wait for is ‘DOMContentLoaded’ which is fired by the DOM so we listen for when it fires. When it fires the callback function continues to execute the rest of our code.

So we use the .call() method to execute this function and we use the .then promise and wait for the result where we define our callback and inside our callback we are going to add the result to our HTML page. For that we can take advantage of the .getElementById method it allows you to select a specific DOM node in your HTML page and this method is provided by the document object which itself is provided by the web browser. Inside the HTML page we define an element called ‘hello’ that was the id of ‘hello’ so we point to the ‘hello’ element and if we want to change its content, then we need to use the .innerHTML property and assign to this property the result.

Here is the span found in our HTML file and where we tie our smart contract to the webpage by pointing the hello function to the id of the span.

What we just covered is not related to blockchain its regular web stuff that works in decentralized applications. Now run npm start to get the webpage address of our browser. You should see Hello World on your webpage. This completes our HelloWorld Dapp.

The steps you used to get here:

1. Code Smart Contract
2. Start truffle console
3. Deploy Smart contracts
4. Copy over the contractABI & contractAddress to the frontend
5. Instantiate web3
6. Instantiate contract instance using contractABI & contractAddress
7. Call smart contract function with contract instance to get data.