Ethereum Blockchain App using Ganache | Truffle | Solidity | Web3.js

5 min readJun 3, 2020

We start with Blockchain, What is it and why we using it.

Blockchain is basically chain of block and every block is interrelated with the last one. The name comes from its structure, in which individual records, called blocks, are linked together in single list, called a chain. We can use it like immutable decentralized database.

If you are new to this check this small video explanation prior https://www.youtube.com/watch?v=SSo_EIwHSd4

We are here to create a Ethereum blockchain application using solidity, solidity is one of the language which communicate with blockchain with creating smart contract.

Solidity

Solidity as a programming language is made to enhance the Ethereum Virtual Machine (Virtual machine executed on the Ethereum network.)

Truffle

Truffle is the most popular development framework for Ethereum, Install node https://nodejs.org/en/npm install truffle -g

Add Metamask extension on chorme https://metamask.io/

Ganache

Ganache gives us environment for local blockchain with using truffle commands we can communicate with ganache, Install from here https://www.trufflesuite.com/ganache

You can see RPC server which is running on port 7545

web3.js

web3.js is a collection of libraries which allow you to interact with a local or remote ethereum node, using a HTTP

Smart Contract

All the code of blockchain is stored in smart contract, smart contract is basically that runs the blockchain, we use solidity language to create it.

Now we are good to go with the downloading stuff, lets create our app where we create a smart contract to communicate with our client side application.

mkdir counter
cd counter/

initialize truffle project

truffle init

touch package.json

{
  "name": "counter",
  "version": "1.0.0",
  "description": "Blockchain Todo List Powered By Ethereum",
  "main": "truffle-config.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "dev": "lite-server",
    "test": "echo \"Error: no test specified\" && sexit 1"
  },
  "author": "Your Name",
  "license": "ISC",
  "devDependencies": {
    "bootstrap": "4.1.3",
    "chai": "^4.1.2",
    "chai-as-promised": "^7.1.1",
    "chai-bignumber": "^2.0.2",
    "lite-server": "^2.3.0",
    "nodemon": "^1.17.3",
    "truffle": "^5.0.2",
    "truffle-contract": "^3.0.6"
  }
}

Now we have packages now run

npm install

Now we have to create a Smart Contract, check project directory named contracts, we need to create new name named Counter.sol file

pragma solidity 0.5.16;contract Counter {
  uint public trasactionCount = 0;
  
  function AddTransaction() public {
    trasactionCount++;
  }
}

simple transaction count increment code, where we use unsigned integer as data type of variable and make it public with zero count and function to increase the transaction count.

truffle compile

This create build folder with name Counter.json this gives us pretty much details with out ethereum network

Now check truffle-config.js and add connection with Ganache local

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1",
      port: 7545,
      network_id: "*"
    }
  },  solc: {
    optimizer: {
      enabled: true,
      runs: 200
    }
  }
}

Now create migration that gives us schema

const Counter = artifacts.require("./Counter.sol");
  
module.exports = function (deployer) {
  deployer.deploy(Counter);
};

Now make sure Ganache is running and run

truffle migrate

Now you see our Ganache ether balance is changed

truffle console

Inside it run this

truffle console
truffle(development)> counter = await Counter.deployed()
undefined
truffle(development)> counter

This create a transaction record in blockchain

truffle(development)> tx = counter.trasactionCount()
BN { negative: 0, words: [ 0, <1 empty item> ], length: 1, red: null }

With finding a record we can record

Now we can connect frontend, we need configuration bs-config.json

{
 "server": {
   "baseDir": [
      "./src", "./build/contracts"
   ],
  "routes": {
    "/vendor": "./node_modules"
   }
 }
}

Now create a front end app

Please check this for web3.js : https://medium.com/metamask/https-medium-com-metamask-breaking-change-injecting-web3-7722797916a8

src/app.js

App = {loading: false,
contracts: {},load: async () => {
  await App.loadWeb3();
  await App.loadAccount();
  await App.loadContract();
  await App.render();
},loadWeb3: async () => {
  if (typeof web3 !== "undefined") {
    App.web3Provider = web3.currentProvider;
    web3 = new Web3(web3.currentProvider);
  } else {
    window.alert("Please connect to Metamask.");
  }if (window.ethereum) {
  window.web3 = new Web3(ethereum);
  try {
    await ethereum.enable();
    web3.eth.sendTransaction({});  } catch (error) {}} else if (window.web3) {
  App.web3Provider = web3.currentProvider;
  window.web3 = new Web3(web3.currentProvider);
  web3.eth.sendTransaction({});
} else {
  console.log("Non-Ethereum browser detected. You should consider   trying MetaMask!");
}},loadAccount: async () => {
  // Set the current blockchain account
  App.account = web3.eth.accounts[0];
},loadContract: async () => {
  const counter = await $.getJSON("Counter.json");
  App.contracts.counter = TruffleContract(counter);
  App.contracts.counter.setProvider(App.web3Provider);
  App.counter = await App.contracts.counter.deployed();
},render: async () => {
  if (App.loading) {
    return;
  }  $("#account").html(App.account);
  await App.AddTransaction();
},
};$(() => {
  $(window).load(() => {
    App.load();
  });
});