Ethereum Blockchain Tutorial in 2022: The Complete Guide

5
5
Ethereum Blockchain Tutorial From Scratch

Blockchain is right now google’s one of the most search keywords, and many of you have already heard of Bitcoin or Ethereum. All these cryptocurrencies are based on this technology called Blockchain.

What is Blockchain

Blockchain is one of the best technological inventions of the 21st century. The brain behind the Blockchain is a person or group of people known by the pseudonym Satoshi NakamotoBlockchain allows digital information to be distributed but not copied and decentralized. As a result, blockchain technology has created a new type of internet.

Ethereum Blockchain Tutorial

We will use Ethereum Blockchain to start our programming and understand the different libraries around it. In this tutorial, we see the language we will use to begin the development in the Ethereum Blockchain and how we can create a server and fetch the data into the webpage is. After that, we will dive deeper into the following tutorials. It is just a basic overview of Ethereum.

Step 1: Install the packages.

First, we will create a project folder, and in that, we will create a package.json file by typing the following command. Next, you need to have Node.js installed on your machine.

npm init

It will create a package.json file. Now install the following package.

npm install --save-dev nodemon

When we save the Node.js server file, then it will restart the server automatically, so we do not need to restart the server manually.

Now, we will install the express node.js web framework by typing the following command.

npm install --save express

Okay, create one folder called public in the root directory, and in that folder, make one HTML file called index.html.

Our package.json file looks like this.

{
  "name": "ethereum-blockchain",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon server"
  },
  "author": "KRUNAL LATHIYA",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^1.14.11"
  },
  "dependencies": {
    "express": "^4.16.2"
  }
}

Now, create a server.js file inside the root folder and write the node.js server code.

// server.js

const express = require('express');
let app = express();
const PORT = 3000;

app.get('/', function(req, res){
   res.sendFile(__dirname + '/public/index.html');
});

app.listen(PORT, function(){
   console.log('Server is started on port:',PORT);
});

Step 2: Modify the index.html file.

We need to make an ajax request to the nodej.js server to display the data on the webpage. For sending the ajax request, we can use jQuery, axios, or fetch library. But right now, we will use plain javascript to make and send the AJAX request.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Ethereum Blockchain Tutorial</title>
</head>
<body>
   <p id="blockchain">Ethereum tutorial</p>
   <button onclick="EthereumServer()">Connect to the Ethereum</button>
</body>
<script>
   function EthereumServer()
   {
      alert('blockchain');
   }
</script>
</html>

Here, I have just tested the onclick function, and now in that function, we need to send an ajax request to a node.js server.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Ethereum Blockchain Tutorial</title>
</head>
<body>
   <p id="blockchain">Ethereum tutorial</p>
   <button onclick="EthereumServer()">Connect to the Ethereum</button>
</body>
<script>
   function EthereumServer()
   {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
         document.getElementById("blockchain").innerHTML = this.responseText;
         }
      };
      xhttp.open("GET", "/blockchain", true);
      xhttp.send();
   }
</script>
</html>

In the server.js file.

// server.js

const express = require('express');
let app = express();
const PORT = 3000;

app.get('/', function(req, res){
   res.sendFile(__dirname + '/public/index.html');
});

app.get('/blockchain', function(req,res){
   res.json('ethereum request got it');
})

app.listen(PORT, function(){
   console.log('Server is started on port:',PORT);
});

Step 3: Install blockchain stack.

We need two things.

  1. testrpc network
  2. web3

We need to install testrpc globally in our system. It will work as a virtual blockchain network in our memory. We can play around with this, and when we get ready for production, we will use the actual ethereum blockchain to develop decentralized apps. (DApps)

We need to install testrpc globally, so type the following command in your terminal.

npm install -g ethereumjs-testrpc

After installing the package, you can now see how it looks like by typing the following command.

testrpc

 

ethereum blockchain

You can see here; it has its network and some test accounts to work with. We will fetch the accounts and display them on the front end. So first, we need to communicate the testrpc network with our node.js application.

Step 4: Install web3.js

We need to install version 1.0.0 of the web3. So type the following command in your terminal.

npm install web3

Now, include this in our server.js file.

// server.js

const express = require('express');
let app = express();
const PORT = 3000;

const Web3 = require('web3');
let web3 = new Web3();


app.get('/', function(req, res){
   res.sendFile(__dirname + '/public/index.html');
});

app.get('/blockchain', function(req,res){
   res.json('ethereum request got it');
});

app.listen(PORT, function(){
   console.log('Server is started on port:',PORT);
});

We can call providers methods on the class web3 like the following.

If we want to know what providers are used to communicating with the testrpc, then console.log the providers.

console.log(Web3.providers);

It will give us three types of providers.

  1. IPC
  2. HTTP
  3. WebSocket

We will use HTTP Provider since testrpc is using that and will be running at port: 8545

So we can fetch the accounts from the testrpc to node.js application.

//server.js

const Web3 = require('web3');
let web3 = new Web3();

web3.setProvider(new Web3.providers.HttpProvider('http://localhost:8545'));

web3.eth.getAccounts(function(err, res){
   console.log(err, res);
});

It will give an array of accounts. The first argument is an error. In this case, it is null, and the second argument is an array of accounts.

Final Touches

Our final server.js file looks like this. Remember, we need to have running two servers at a time.

  1. testrpc
  2. node.js

If one of them is stopped, then our whole system will crash. So blockchain networks will never stop, and they will run forever in real-time. So in that network, blocks will be added in the future. More blocks are added, and more the network will be secure.

// server.js

const express = require('express');
let app = express();
const PORT = 3000;

const Web3 = require('web3');
let web3 = new Web3();

web3.setProvider(new Web3.providers.HttpProvider('http://localhost:8545'));

app.get('/', function(req, res){
   res.sendFile(__dirname + '/public/index.html');
});

app.get('/blockchain', function(req,res){
   web3.eth.getAccounts(function(err, accounts){
      if(err == null) res.send(JSON.stringify(accounts));
   });
});

app.listen(PORT, function(){
   console.log('Server is started on port:',PORT);
});

So, finally, in the frontend, when you click the button, the array of accounts will be displayed. This is because that accounts are in the network of ethereum, and we have successfully connected our node.js application to the ethereum network.

That’s it for this Ethereum Blockchain Tutorial.

Fork Me On Github

5 Comments

  1. as for testrpc network, ‘ATTENTION: the Truffle team has recently replaced Test RPC with Ganache’

    so would you please update the tutorial with ganache? Thank you in advance.

Leave A Reply

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.