Ethereum Blockchain Tutorial From Scratch

Ethereum Blockchain Tutorial From Scratch

Ethereum Blockchain Tutorial From Scratch is today’s leading topic. 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. Blockchain technology has created the 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 just see what 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. We will dive deeper into the following tutorials. It is a just basic overview of the 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. 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, also 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 the 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 the production, then we will use 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, now you can see how it looks like by the 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 on the frontend. 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 type of providers are used to communicate with the testrpc then simply 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 a null and second argument is an array of accounts.

Final Touches

Our final server.js file looks like this. Remeber, 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 network will never stop, and it will run forever in real time. So in that network blocks will be added in the future. More the 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. That accounts are in the network of ethereum, and we have successfully connected our node.js application to the ethereum network.

Github code of the Ethereum Blockchain Tutorial.

Fork Me On Github

The post Ethereum Blockchain Tutorial From Scratch appeared first on AppDividend.

Leave a Reply

Your email address will not be published. Required fields are marked *