Getting Started With Ethereum and Building Basic Dapp — Part 1

Ethereum

What is Ethereum

Ethereum is a decentralized network of computers/node; each node in the network executes some bytecode (i.e. Smart Contracts) and stores the resulting state in a blockchain. Due to the properties of the blockchain representing application state, this results in “applications that run exactly as programmed without any possibility of downtime, censorship, fraud or third party interference”.

Is Ethereum similar to Bitcoin?

Well. sort of, but nor really. Similarity is there in the sense that both use the blockchain, but that’s where it ends. As Ethereum is not just a digital currency But It provides a platform to develop blockchain based applications which features smart contracts, the Ethereum Virtual Machine (EVM) and uses its currency called ether for peer-to-peer contracts.

What is smart contract

A smart contract is a computer code running on top of a blockchain containing a set of rules under which the parties to that smart contract agree to interact with each other. If and when the pre-defined rules are met, the agreement is automatically enforced. The platform on which it’s executed gives this piece of code some properties such as: immutability, deterministic operation, distributed & verifiable state, etc. The state managed by this code is stored, immutably, on a blockchain and anyone can double check that the current state is correct by replaying all of the transactions from the beginning of the chain.

EVM — The Ethereum Virtual Machine

EVM (or Ethereum virtual machine) is the Ethereum smart contracts byte-code execution environment. Every node in the network runs EVM. All the nodes execute all the transactions that point to smart contracts using EVM, so every node does the same calculations and stores the same values. Moreover, the EVM ensures programs do not have access to each other’s state, ensuring communication can be established without any potential interference.

Web3 & Technology Stack

As we all know in the early 90’s the World Wide Web (WWW) revolutionized the information. Since then, the Internet became only more mature & programmable and we saw the rise of the so-called Web2, which brought us social media and e-commerce platforms, revolutionizing social interactions, bringing producers and consumers of information, goods and services closer together, and allowed us to enjoy P2P interactions on a global scale. But there was always a middleman: a platform acting as a trusted intermediary between A and B who did not know or trust each other. While these platforms have done an amazing job at creating a P2P economy, with an ever more sophisticated content discovery layer, they also dictate all rules of the transactions, and these platforms own all of our data.

In this context, Blockchain seems to be a driving force of the next generation Internet, the Decentralized Web, or Web3 and gives rise to Decentralized Web Stack.

Similar to building a normal web or mobile applications, creating a dApp (Decentralized Application) commonly requires a few things: computation, file storage, external data, monetization, and payments as depicted below.

Web 3.0 Abstracted Stack

As we would be progressing towards decentralized systems, this does not mean that we will get rid of centralized systems altogether. It seems transition from client-server internet to the decentralized web will be gradual rather than radical. As the decentralized web stack is still maturing, the transition seems to be shifting from centralized to partially decentralized to fully decentralized.

Shift from Centralized to Fully Decentralized Apps

Developing a DApp. How to access Ethereum.

An attempt to explain Ethereum from a developer’s point of view.

Current client server webapp architecture at a very high level

Current Client Server Application Architecture

The web application is hosted on a hosting provider like AWS, Heroku or any other VPS. The client interacts with this one central application. Clients can be a browser, widget, curl command or another api consuming services. When a client makes a request via a web browser to the server, the server code implemented interacts with database and/or cache for CRUD operation and serves the client.

This is how an Ethereum Dapp looks like at a high level:

Futuristic Decentralized Application Architecture

If one observes every client (browser) communicates with it’s own instance of the application. There is no central server to which all clients connect to. This means, every person who wants to interact with a dapp (Decentralized Application) will need a full copy of the blockchain running on their computer/phone etc. That means, before you can use an application, you have to download the entire blockchain and then start using the application. This might sound ridiculous at first but it has the advantage of not relying on a single central server which might disappear tomorrow.

Getting Started

Basic tools we need -

Node Package Manager (npm) — NPM is a package manager for Node.js packages, or modules.

TestRPC — TestRPC is a Node.js based Ethereum client for testing and development. It runs 100% locally and simulates a full Ethereum client but is much much faster making it ideal for testing and development.

Truffle — Truffle is a development environment, testing framework, and asset pipeline for Ethereum. Basically, it helps you deploy your contracts to the blockchain, swap old contracts for new ones (called a migration), and hook your front-end up to your deployed contracts

MetaMask — MetaMask is an Ethereum light client and Chrome extension that lets users interact with the blockchain without downloading the whole blockchain. In other words, it allows you to interact with dApps in an ordinary Chrome browser

First, we need to install our tools. Lets first install npm if you don’t have one. Here are instructions on how to install it.

Once npm is installed, we can use it to install testrpc, a Node.js Ethereum client that mimics a real Ethereum node.

$ npm install -g ethereumjs-testrpc

Next we need to install truffle

$ npm install -g truffle

and the last one, MetaMask Chrome plugin which you can find here.

Start TestRPC

$ testrpc

This will start up the client and generate 10 accounts for you to use, each with 100 ETH. You should see something like this:

EthereumJS TestRPC v4.1.3 (ganache-core: 1.1.3)
Available Accounts
==================
(0) 0x3f999199f5ce31edd9876f3f29361978da1a1252
(1) 0x2c80574fda0a4d9a712ca3d31096967a4635e8f6
(2) 0x155c3a4d69cd82f1c4a99f4154bf9ecc68fbdc71
(3) 0xa0df2d4d0e538fc44e059e8dbae25692d51c74cb
(4) 0x94e40829d2ad19509af489e86d56f5c9634f6206
(5) 0xa4878a85d6e1fd4cf7e081b1218dbe74bbd11dc1
(6) 0x122a3cd1eb876e825bcea40ec7db929ba2f52ff8
(7) 0x2dc1ed0a57144c51030ecd3e453ccd961698e373
(8) 0xcb86ed11d282401400da299f43c3809d98c5007a
(9) 0xa9e232738bb83f58f4a1fd68175f52dcfa2fe4ad
Private Keys
==================
(0) 3e1a4466eadbb368835c5d57126c73ddc251dc490dd68c412d8c0ad76ee13789
(1) 0e773bbdeae3b2e3f7030d13cdada12415659b18e634fbd39ff152bad95825d2
(2) 9ffa6dcc4fcb563eb9ac57efdf5bd0cb0d22602a4b86daaedf81c756e5d11baf
(3) 963efd39e8e9d7dcf18d72d9d4009cbc8ba1fce1fcdb47d98941c19d9813ad9d
(4) f7b741b1f88441c00a2023620d4c512ffa4e1267e24b06e12860331fdfd9cb78
(5) 8f057cc01ec22c0ea27eaa7e50ca6857647299987d1dbe445297ac61b8fe42f9
(6) 1e654bbb0d761b84bb738e91d6f4674bb76e0d024b8f24a6c8d301d6e45d5fad
(7) 3222876792abbe5b8f5606ac9c6c0b1443c15a3dd5a74de661631a4a3f07fdae
(8) 4906df7a8c8f8480a4ce8875016e68e03d52009214b0e5dbec0507005a9dbc23
(9) 958b8735820c0fdb3ac142687733987d59677e589695ab6a11a866255df50672
HD Wallet
==================
Mnemonic:      february excess ranch price load announce alone canyon furnace amazing leader balcony
Base HD Path:  m/44'/60'/0'/0/{account_index}
Listening on localhost:8545

The first list is the public address of each of the 10 accounts and the second list is the private key associated with each account.

Setup Metamask

Now lets set up MetaMask to use our TestRPC as it’s network. Open MetaMask and follow the initial setup steps.

Once MetaMask is set up, select the network menu in the upper-left. Then select “Localhost 8545” as your network as shown below.

Next, add a couple accounts to MetaMask by going to ☰ -> Import Account, and then copying in a private key from the list printed out in your terminal when you started TestRPC. In my case it is — 3e1a4466eadbb368835c5d57126c73ddc251dc490dd68c412d8c0ad76ee13789.

As shown above, we can see the account (as first account displayed in terminal after running testrpc).

Our environment is now set up, and we are ready to create and deploy our dApp. Let’s start by creating a new project directory and initializing the default Truffle dApp with Webpack integrated. I’m going to call my project EthereumDapp, but you can call yours whatever you’d like.

Initialize Truffle

$ mkdir EthereumDapp
$ cd EthereumDapp
$ truffle init webpack

Deploying Contracts and Running dApp

To deploy your contracts to TestRPC run the following command:

$ truffle migrate

Once the migration is complete we can run our dApp with

$ npm run dev

Open http://localhost:8080/ in the browser

You should see your dApp running and ready to use! If you switch the current MetaMask account to the first account generated by your TestRPC and refresh the page you should see your balance is 10,000 META. You can send META to your other accounts using the dApp interface.

To check the transactions locally, we can install etherparty explorer

Install etherparty

As we have already installed nodejs and npm, only thing to install is git. Hereare the steps to install it. Once git is installed, Open a terminal and type the following

$ git clone https://github.com/etherparty/explorer

This will clone the etherparty explorer to local directory explorer. Change to this directory

$ cd explorer

now lets start the explorer

$ npm start
> EthereumExplorer@0.1.0 start /Users/XXXX/explorer
> http-server ./app -a localhost -p 8000 -c-1
Starting up http-server, serving ./app on port: 8000
Hit CTRL-C to stop the server

Navigate to http://localhost:8000/. You will see something like below.

Now lets transfer some Metacoin (10 Metacoin) from testrpc account to metamask account and validate the transaction in explorer as shown below. As soon as we transfer 10 Metacoins we can check the transaction in Etherparty Block explorer (block# 6)

We can check the balance in the accounts also as shown below (Account 2 is having 9990 META and Account 1 is having 10 META)

To confirm the transaction, check the transaction on running testrpc on terminal and Hash on Etherparty Block Explorer.


In Part-2, I have created a simple notarized smart contract and showed both the ways to deploy it using web3js library with Test RPC and Truffle with TestRPC.

Please share your thoughts, feedback, comments and clarifications. It will help me to improvise.

If you liked this post, you can help me share it by recommending it below ❤

Follow me on Linkedin and Twitter