In this guide, you’ll learn all you have to take a web app and convert it into a dApp. This tutorial is perfect for people who have some experience creating Smart Contracts however don’t know how to really apply their knowledge to make something useful with a dapp. So let’s start.

ICOs, Smart contracts, Mist, Remix, Metamask, geth, web3. You’ve most likely seen it all if you invested a little time attempting to get into the world of Ethereum development.

Some deploy Smart Contracts to a test network, others instruct you to read a yellow paper, while others encourage you to utilize the truffle suite since it’s extraordinary. And you are there, not knowing what precisely to do and how everything cooperates.

If this is the first article that you read on Ethereum or the blockchain eco-system in general, you’ll love it! Experts calling each others names on unsafe standards, Twitter and protocols, untested and buggy development tools. Not all things are made sense of yet, everybody is going in various directions, and there is still a great deal to be finished. The future of institutions, governments and banks is being decided by mad developers! It’s so awesome.

But, you don’t need to stress anymore, I’ll try to associate all the dots for you in this tutorial series, and walk you through the universe of dapps development and Smart Contracts, and demonstrate to you how everything fits together.

Smart Contracts brought in one of the major breakthroughs in the cryptocurrency world. It moved the blockchain technology from just cryptocurrency transactions to distributed app(dApps) development. Introduction of Smart Contracts is considered as the birth of the next version (V2.0) of blockchain technology.

This is a series of blog posts which consists of 3 main parts as follows.



1. Develop a Smart Contract in Solidity and deploy it in one of the test networks ( this post )

2. Automate the testing and deploying your Smart Contract in a real network( Rinkeby Network )

3. Build a front-end web layer to interact with that Smart Contract.

4. Deploy the Smart Contract on your own multi-node Ethereum network

ERC — 20 Standard

In Ethereum, Smart Contracts can be considered as tokens which can be bought, sold, or traded. These tokens can represent digital assets that can have a variety of values attached. These can be agreements, vouchers, IOUs, or even objects in the real world.



The ERC-20 defines a common list of rules for all Ethereum tokens to follow. This means that when you are deploying your token ( smart contract ) to any Ethereum network, it would behave in the same manner. ie: projects do not need to be redone each time a new token is released. Rather, they are designed to be compatible with new tokens, provided those tokens adhere to the rules.

You can get more details about the ERC 20 in this link.

You can use following languages to develop Smart Contracts in Ethereum.

1. LLL : Low-level Lisp-like Language

2. Serpent : Similar to Python; it is intended to be maximally clean and simple

3. Mutan : Deprecated in 2015

4. Solidity : Java script like language. The most commonly used language in Ethereum ERC 20 development

Solidity

Solidity is the widely used and most adopted language that can use to develop Smart Contracts in Ethereum. Solidity may be a contact-oriented, high-level language for executing sensible contracts. It was affected by Python, C++ and JavaScript and is intended to focus on the Ethereum Virtual Machine.



The solidity compiler targets the EVM and generates the bytecode that runs on top of EVM after a successful compilation.

Image 1 : Solidity Compiler

Apart from the bytecode, the solidity compiler outputs the ABI ( the Application Binary Interface ) as well. This ABI is used when we need to access Smart Contracts from another application (eg: a Web application ). We will be using the ABI later in this blog series to interface with a web application.

Remix online IDE

Remix is an easy to use online IDE to code and test your solidity Smart Contracts. the main advantage in Remix is that , it is giving you sample account addresses to test your contracts. The Remix contains a limited debug functionality as well if you are willing to perform any debug operation in your application.

Smart Contract Development

This blog post is not intend to teach you Solidity , Ethereum or Blockchain technology. If you wish to learn them you can follow the links that I have given you . This blog post assumes you have the basic knowledge on those technologies.

So lets jump to the deep end with an Ethrereum smart contract in solidity :)

Sample smart contract’s requirement

The sample application intends to fulfill following requirements.

A person can create an approval contract with an amount ( in ether ) which needs to transfer to a specific party( address ). The initiator of the Smart Contract needs to specify who ( what addresses ) should approve this Smart Contract. Upon approval of all intended parties ( addresses ), the amount in the Smart Contract should get transferred to the specified party which is defined by the initiator.

First of all we need to define a struct to persist approvers’ data ( address and the approval status).

struct approval{

address approver;

bool isApproved;

}

Then we need to define our contract’s global data. It is clear that we need to persist the list of approvers , address of the initiator and the address of the recipient across all states of the Smart Contract.

address public requester;

address public receiver;

approval[] public approvers;

Then we need to define the Smart Contract’s constructor. This should accept the list of approvers , the initial amount which is sent by the initiator and the recipient party’s address.

constructor(address[] approversList, address receivedBy) public payable{



requester = msg.sender;

receiver = receivedBy;

for(uint256 i=0;i<approversList.length;i++)

{

approval a;

a.approver = approversList[i];

a.isApproved = false;



approvers.push(a);

}

}

You can see that we are using the solidity’s msg global variable to accept the amount being transferred initially by the creator. The for loop just iterates through the approver’s list and pushes it to the array. Make sure that the constructor is payable because we are sending some ether when initiating the smart contract.

Next, we need to develop the approve and the getContractBalance methods as follows.

function approve() public payable{

bool isAllApproved=true;

for(uint256 i=0;i<approvers.length;i++)

{

if(approvers[i].approver == msg.sender)

approvers[i].isApproved = true;



if(!approvers[i].isApproved)

isAllApproved = false;





}

if(isAllApproved)

receiver.transfer(this.balance);

}



function getContractBalance() constant public returns(uint) {

return this.balance;

}

We need to add the payable attribute to the approve method because if all conditions are met , the contract’s balance should get transferred to the specified recipient. We can use the “this.balance” to retrieve the contract’s amount.

The full source code should go as below.

pragma solidity ^0.4.17;



contract MultiAuth{



address public requester;

address public receiver;

approval[] public approvers;

int n;



constructor(address[] approversList, address receivedBy) public payable{



requester = msg.sender;

receiver = receivedBy;

for(uint256 i=0;i<approversList.length;i++)

{

approval a;

a.approver = approversList[i];

a.isApproved = false;



approvers.push(a);

}

}



function approve() public payable{

bool isAllApproved=true;

for(uint256 i=0;i<approvers.length;i++)

{

if(approvers[i].approver == msg.sender)

approvers[i].isApproved = true;



if(!approvers[i].isApproved)

isAllApproved = false;





}

if(isAllApproved)

receiver.transfer(this.balance);

}



function getContractBalance() constant public returns(uint) {

return this.balance;

}



struct approval{

address approver;

bool isApproved;

}

}

As the next step, we need to compile our source code using Remix. We can use the start to compile button to get this done. The compiler would complain if there are any errors in your solidity code.



In order to test our Smart Contract, we need to go move into the Run tab. Make sure that you have selected the Environment as JavaScript VM. There should be a deploy button and you need to enter your params there. Make sure that you have selected the first account ( there should be 5 accounts ) and select one more approver ( copy the address from other accounts ).



Following are my constructor params. First two are approved and the last param is the address of the recipient.

> [“0x14723a09acff6d2a60dcdf7aa4aff308fddc160c”,”0x4b0897b0513fdc7c541b6d9d7e929c4e5364d2db”], 0xdd870fa1b7c4700f2bd7f44238821c26f7392148

If you have deployed the contract successfully, you would be able to see the output as follows.

Note that the first Account’s balance has gone down to 89.999*. This is because we add 10 others to the contract and other wei is consumed for the mining.



You can use the receiver, requester, and getContractBalance buttons to view respective values. Remember, we didn’t set up get methods to retrieve values of the receiver and requester attributes. But since we have defined it as public attributes, Solidity creates its default get methods.



One more thing to mention here, all the blue color functionalities do not cost you any mining fee because those are just viewed only functionalities and you are not going to change any state of the Smart Contract. But the red colored functionalities do take some transaction fees ( approve in our example ) because it does change the status of the contract.



Then select an approved account and perform the approve functionality. Once all required approvers are approved you can notice that the Smart Contract’s balance is added to the recipient’s account.

Remix Debugging

If you want to debug any transaction or function, just select the debug button in the console window.

You would get redirected to the debugger window. You can use the traditional step into , step out … etc functionality that any debugger should consist. Apart from this you would be able to the code navigation as well when you are going through line by line in the debugger.

Conclusion

Your final dApp will be an alternate web application. Some data will be stored in a alternate kind of variable and you’ll need utilize tricks to get around the constraints of the blockchain. At whatever point you get stuck, look for an answer on google and attempt different things.

It’s important that you have a strong comprehension about Smart Contract development so make sure to read the docs and continue growing your knowledge. The vast majority of the things are possible on the blockchain if you’re innovative.

One of the best exercises that you can do for improving faster is to endeavor to change all of your existing web apps to dApps. Then you’ll learn the small things that make you a great Ethereum Developer.

Thanks for reading the article. Try to share it with your friends on Reddit, Twitter, and LinkedIn. Contact me if you get stuck somewhere and I’ll attempt to encourage you. I’m normally very busy so it may take me awhile to get back to you.

You can follow me on Twitter and LinkedIn. What content do you need me to write about? Drop me an email on priyal.aruna.walpita@gmail.com with your thought.

References

http://solidity.readthedocs.io/en/v0.4.24/