Getting Started With Ethereum and Building Basic Dapp using Truffle, Metamask & Ganache-CLI
Note — This article is updated with the latest version of Truffle, Solidity, Metamask, web3js, and Ganache-CLI
What is Ethereum
Ethereum is a decentralized network of computers/nodes; 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 the 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 it provides a platform to develop blockchain-based applications which feature 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 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 application, creating a dApp (Decentralized Application) commonly requires a few things: computation, file storage, external data, monetization, and payments as depicted below.
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.
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
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.
This is how an Ethereum Dapp looks like at a high level:
If one observes every client (browser) communicates with its own instance of the application. There is no central server to which all clients connect. 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, prior to using 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.
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 flavors — 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. Let's 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-cliNext, we need to install truffle
$ npm install -g truffleand the last one, MetaMask Chrome plugin which you can find here.
Start Ganache-CLI
$ ganache-cliThis 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) 0xf0a6a838ba4a4e906a9663a90521d13968abd2a664e7ac5c7217666a4994deabHD 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
==================
20000000000Gas Limit
==================
6721975Listening 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.
Setup Metamask
Now, let's set up MetaMask to use our Ganache-CLI as its 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 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.
As shown above, we can see 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.
Initialize Truffle
$ mkdir ethereumdapp$ cd ethereumdapp$ truffle unbox webpack
Deploying Contracts and Running dApp
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 the 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
Install etherparty
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/explorerThis will clone the etherparty explorer to local directory explorer. Change to this directory
$ cd explorernow 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.
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 show 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
