Ethereum-A beginner guide. Part-1

#javascript #beginners #programming #ethereum

Getting Started

This is a tutorial inspired from Nader Dabit tutorial on The complete Guide to full stack Ethereum Development

My aim is to learn and try my best to explain what I learned.

Prerequisites

If you are using windows then you need have node.js environment setup and **IDE **of you choice, Here I will be using **VScode **for my project.

First thing First

After all the environment is set, lets create React application by using the terminal of VScode.

npx create-react-app react-dapp

npx[Node package execute] is a very powerful command that is available in npm[node package manager] start version5.2
you can find lot of difference and similarities between these two.
Basically npm is a package manager and npx is the command line tool to run the package locally without the installation of packages.
Next we need to create all environment necessary for the development.

npm install ethers hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers

Now after you have installed all the packages necessary for the development. lets initiate the Hardhat so that we have a basic environment setup. It even creates a basic smart contract to begin with.

npx hardhat

npx will run the hardhat package and you will be able to create a basic hardhat project.

Now after we have completed to build a hardhat environment, in the hardhat.config.js file ,we need to set the src path so that the React app find the compiled contracts, and update the chainID on our Hardhat configuration to be 1337.

module.exports = {
  solidity: "0.8.4",
  paths: {
    artifacts: './src/artifacts',
    // here the  paths is added to src to get the compiled filed created by the smart contract
    //those files created by the smart contract will be needing in the future.
  },
  networks: {
    hardhat: {
      chainId: 1337
    }
  }

};

Now, on our next step. We have a basic smart contract already built by the Hardhat, its contracts/Greeter.sol

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.4;

import "hardhat/console.sol";

contract Greeter {
    string private greeting;

    constructor(string memory _greeting) {
        console.log("Deploying a Greeter with greeting:", _greeting);
        greeting = _greeting;
    }
    // view :- we are only reading fromt the blockchain 

    function greet() public view returns (string memory) {
        return greeting;
    }

    function setGreeting(string memory _greeting) public {
        console.log("Changing greeting from '%s' to '%s'", greeting, _greeting);
        greeting = _greeting;
    }
}

This is a basic smart contract, When the smart contract is deployed, it sets a greeting variable and exposes a function(greet) that can be called to return the greeting.
Here there is also a update function that allows user to update the greeting(setGreeting).
This function enables uses to interact when the contract will be deployed to the blockchain.

Reading and writing to the Ethereum Blockchain

Smart contract is generally behaves like a normal contract but only difference it thats its programmable.
Here, we can interact with a smart contract generally by reading/writing a transaction .
Here in the above mentioned contract greet can be considered as reading and setGreeting can be considered as writing.
Writing/ creating a transaction will update the ledger of the blockchain, so we need to pay for such actions, Gas is the normal term used in Ethereum for paying for a transaction.
If you are reading the blockchain, then there is no such transaction being created, so no gas will be used.

Here, From our react app, the way that we will interact with the smart contract is using a combination of the ethers.js library, the contract address and the ABI that will be created from the contract by hardhat.

ABI is an interface between the client side(REST app ) and the Ethereum Blockchain where the smart contract we are going to be interacting when it gets deployed.

The interface are compiled from solidity smart contracts by a development framework like Hardhat or truffle.

Compiling the Application Binary Interface.

To do so,

npx hardhat compile

Now you will see a new folder name artifacts in the src directory. The artifacts/contracts/Greeter.json file contains the ABI as one of the properties.

import Greeter from './artifacts/contracts/Greeter.sol/Greeter.json'

Deploying and using a local network/blockchain

Next and on of the interesting part of the project you all guys are waiting for, we will be deploying our smart contract to a local blockchain so that we can test it out.

lets start a local test node.