Lets create our first HelloWorld dApp 🔥

Ethereum — a Decentralised Consensus Network

To most developers, learning to use a new platform, language, or framework will be a familiar task repeated dozens of times during their career. Altogether more novel is learning to develop for a completely different paradigm. The decentralised consensus network, the blockchain, and its most well known implementation ‘bitcoin’ are not well understood even amongst the tech community and the subtleties of how this technology is fundamentally different from what we have used before is certainly lost on most of the general public.

With that in mind before we proceed with building our first decentralised apps I will outline a few of the libraries that are required to proceed with this tutorial.

• Node Package Manager(NPM)- The first dependency we need is Node Package Manager, or NPM, which comes with Node.js. You can see if you have node already installed by going to your terminal and typing.
  $ node -v

• Truffle- A world class development environment, testing framework and asset pipeline for blockchains using the Ethereum Virtual Machine (EVM), aiming to make life as a developer easier.
  $ npm install -g truffle

• Ganache-CLI- Quickly fire up a personal Ethereum blockchain which you can use to run tests, execute commands, and inspect state while controlling how the chain operates.
  $ npm install -g ganache-cli

• Metamask- The next dependency is the Metamask extension for Google Chrome. In order to use the blockchain, we must connect to it (remember, I said the block chain is a network). We'll have to install a special browser extension in order to use the Ethereum block chain. That's where metamask comes in. We'll be able to connect to our local Ethereum blockchain with our personal account, and interact with our smart contract.

• Ethereum-dApp-Basekit ( I created this base-kit myself :). Hopefully you guys would leave a 🌟 on Github.)- An Ethereum dApp starter-kit to speed dApp development using React.

LETS GET STARTED!!!

Lets start by cloning the Ethereum dApp Base-kit into a folder named HelloWorld.
$ git clone https://github.com/AllenAJ/Ethereum-dApp-Basekit project HelloWorld

🎉 Awesome! You've just set up your project instantly:

You can go ahead and install your dependencies like this:
$ npm install

Now that we've seen the project structure, let's begin writing our smart contract by creating a new file in the contracts directory:
$ touch src/contracts/Helloworld.sol

Inside this file, let's begin writing our smart contract Solidity programming language:
pragma solidity ^0.5.0;
contract Helloworld {
}

First, we start by declaring the version of the Solidity programming language that we want to use. Next, we declare our smart contract Helloworld. We'll add all of the smart contract code inside of the curly braces. Let's do this:

pragma solidity ^0.5.0;
contract Helloworld {
string public name;
}

This code creates a "state variable", whose value will be stored on the blockchain. We'll call the variable name because we'll use it to store the name for the smart contract (just for testing purposes). Since Solidity is a statically typed programming language, we must declare the string datatype before declaring the variable. Finally, we declare the state variable public so that we can read its value outside of the smart contract, which we will do momentarily.

Next, let's set the value of this variable like this:
pragma solidity ^0.5.0;
contract Helloworld {
string public name;
constructor() public {
name = "Helloworld";
}
}

We assign the value of name inside the constructor function. This is a special function that gets called whenever the smart contract is created for the first time, i.e., deployed to the blockchain. Whenever it's deployed, it will set the value of name to the string we specified here.

Now let's compile the smart contract to make sure that everything worked:
$ sudo truffle compile

The output in your terminal will show you where the compiled smart contracts are located!
Next, let's deploy the mart contract to our Ganache personal blockhain. To do this, create a new migration file like this:
$ touch migrations/2_deploy_contracts.js

This file tells Truffle to to deploy our smart contract to the blockchain. It's kind of like a migration file for a traditional database if you're familiar with that. Also, note that the migration files are numbered so that Truffle knows which order to run them in.

Enter this code into your newly created migration:
const Helloworld = artifacts.require("Helloworld");
module.exports = function(deployer) {
deployer.deploy(Helloworld);
};

Now before we migrate, we need to run our local Ganache server like this:
$ ganache-cli -p 7545

Now migrate run the migrations like this:
$ truffle migrate

Now we can check our smart contract from the Truffle console. You can launch the Truffle console from the command line like this:
$ truffle console

Now we can get a deployed copy of the smart contract inside the console with JavaScript like this:
>helloworld = await Helloworld.deployed()

You obtain the address of the smart contract on the blockchain like this:
>helloworld.address

Next, let's read the name:
>name = await helloworld.name()

Then:
>name

Yay! 🎉 You've successfully set up your project and deployed a basic smart contract to the blockchain & interacted with it!

Loved the tutorial?

🌟my ETH Base-kit repo on Github > https://github.com/AllenAJ/Ethereum-dApp-Basekit