Getting Started With Ethereum and Building Basic Dapp using Truffle, Metamask & Ganache-CLI

Romil Jain
Feb 4, 2018 · 9 min read

Note — This article is updated with the latest version of Truffle, Solidity, Metamask, web3js, and Ganache-CLI

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 not really. The 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 a 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, immutable, 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 ’90s 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 to 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.

The 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 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 other API consuming services. When a client makes a request via a web browser to the server, the server code implemented interacts with the database and/or cache for CRUD operation and serves the client.

Futuristic Decentralized Application Architecture

If one observes every client (browser) communicates with its 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 Dapp using Metamask, Truffle & Ganache

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

Ganache — Ganache (earlier TestRPC) is a personal blockchain for Ethereum development that developers can use to deploy contracts, develop applications, and run tests. It runs 100% locally and simulates a full Ethereum client but is much much faster making it ideal for testing and development. It comes in two flavor — Ganache (GUI) & Ganache-CLI.

Truffle — Truffle is a development environment, testing framework, and asset pipeline for blockchains using the Ethereum Virtual Machine (EVM). 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 ganache-cli, a Node.js Ethereum client that mimics a real Ethereum node.

$ npm install -g ganache-cli

Next, we need to install truffle

$ npm install -g truffle

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

$ ganache-cli

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

Ganache CLI v6.4.3 (ganache-core: 2.5.5)Available Accounts
==================
(0) 0xb862683d666eccd3c5bda90b9019eea2d88fcf4c (~100 ETH)
(1) 0xeb6c0c8b164fe4159ebbcdc2310783d19d905fc9 (~100 ETH)
(2) 0x7e29526a7a8ea68577132857c8e325ed45ca7826 (~100 ETH)
(3) 0xa5656ecbe6cf02f8e897f884a70c59a6a6a77ddc (~100 ETH)
(4) 0xc25ab5ae4606fb43c33b56c7ab002dd4fd19334e (~100 ETH)
(5) 0xf32fd21fe9e5e21cec8585aff81be38cad1ebd8b (~100 ETH)
(6) 0xc0ce713452c43460896020dfb9cbff3cea900795 (~100 ETH)
(7) 0x92174af56993b801046b4873db090ccd99eeed6a (~100 ETH)
(8) 0x1556fab5afa931ea18447c03658e82cd2764329a (~100 ETH)
(9) 0xc054b69b1ff4f66829c2e345ff3fd852aaf89ede (~100 ETH)
Private Keys
==================
(0) 0xc8763205e691a0e9f75c70a33c6f03d74a3eb4f5eabb3cc2df2e1418f5ae009a
(1) 0x8831d3c067bcbde12d9a4b7f3aaa1b35c93583af0f21b4b42975ab33da41ac9d
(2) 0xfa9058ce63d3637968ca1503e591af98320464e9ebb280e7926a1808292c25a6
(3) 0x854e7e468d6faa3848159a280c9ba5f4fadca5917f591290af67638034abbd87
(4) 0xed4caecb8a582c88d5c2aa060edf4164c0dac01272a96c11c1fb4a5133df3663
(5) 0x1a9baa245b21b6a496ffc1470d1da5dc09fe82dac8f09e1a09c359d1d051a6d2
(6) 0xa4d31de11decc250566df5049eff2fbc4b561bc3546f4799a4f20f7220f5da1d
(7) 0xf06baf2fce426775db8161159851f39cdcdd10e1e5b1799a2afc082dff74d2fc
(8) 0x6d46370b574ae74ef318f113c3333c158e3d796f481545d982a588ae2ca26d68
(9) 0xf0a6a838ba4a4e906a9663a90521d13968abd2a664e7ac5c7217666a4994deab
HD Wallet
==================
Mnemonic: staff pottery include obscure design siege cannon bounce dust bone dawn surprise
Base HD Path: m/44'/60'/0'/0/{account_index}
Gas Price
==================
20000000000
Gas Limit
==================
6721975
Listening on 127.0.0.1:8545

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

Now, lets set up MetaMask to use our Ganache-CLI 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.

Metamask connected to Ganache

Next, add a couple of accounts to MetaMask by going to the colored circle at the right top -> Import Account, and then copying in a private key from the list printed out in your terminal when you started Ganache-CLI. In my case it is — 0xc8763205e691a0e9f75c70a33c6f03d74a3eb4f5eabb3cc2df2e1418f5ae009a.

Account 2 is from Ganache-CLI

As shown above, we can see the account 2 which is nothing but the first account displayed in the terminal after running ganache-cli.

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 unbox the Truffle dApp with Webpack integrated. I’m going to call my project ethereumdapp, but you can call yours whatever you’d like.

$ mkdir ethereumdapp$ cd ethereumdapp$ truffle unbox webpack

To deploy your contracts to ganache-cli run the following command:

$ truffle compile$ truffle migrate

Once the migration is complete we can run our dApp. To run the dApp

$ cd app$ npm run dev

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

We should see our dApp running and ready to use! If we switch the current MetaMask account to the first account generated by Ganache-CLI and refresh the page we should see balance is 10,000 META. Now we can send META to other accounts using the dApp interface.

To check the transactions locally, we may install etherparty explorer

As we have already installed node and npm, the only thing to install is git. Here are 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 let's start the explorer

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

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

Now let's transfer some Metacoin (10 Metacoin) from ganache-cli account(Account 2) to metamask account(Account 1).

Once the transaction is initiated, Metamask will show a notification like below

On confirming the transaction, We can see Metacoin debited from account 2 and credited to account 1.

Account 2
Account 1

We can validate the transaction in explorer also as shown below. Block#6 is the block created for this transaction.


The complete code can be found here. In Part-2, we will create a simple notarized smart contract and showed both the ways to deploy it using the web3js library with Ganache-CLI and Truffle with Ganache-CLI.

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

Coinmonks

Coinmonks is a non-profit Crypto educational publication.

Sign up for Crypto Anarchist from Coinmonks

A newsletter that brings you week's best crypto and blockchain stories and trending news directly in your inbox, by Gaurav Agrawal

Create a free Medium account to get Crypto Anarchist in your inbox.

Romil Jain

Written by

Digital Nomad (http://bit.ly/romiljain)

Coinmonks

Coinmonks

Coinmonks is a non-profit Crypto educational publication. Follow us on Twitter @coinmonks Our other project — https://coincodecap.com

Romil Jain

Written by

Digital Nomad (http://bit.ly/romiljain)

Coinmonks

Coinmonks

Coinmonks is a non-profit Crypto educational publication. Follow us on Twitter @coinmonks Our other project — https://coincodecap.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store