- read

Basics of Web3 Js and Ethereum Blockchain

Saphal Ghimire 9 31

Via Medium

Basics of Web3 Js and Ethereum Blockchain

In my previous article, I mentioned the evolution of Web 3.0 and its impacts on modern web applications. Decentralization, Transparency, Secure — that’s where the concept of Blockchain emerges. If…

In my previous article, I mentioned the evolution of Web 3.0 and its impacts on modern web applications. Decentralization, Transparency, Secure — that’s where the concept of Blockchain emerges. If you are not familiar with these terminologies, refer to my previous article here.

In this article, we will see how to get started with web3.js and use it to interact with Ethereum Blockchain.

The Architecture of Dapps on Ethereum

Let’s get started with understanding the terminologies first.

web3.js is a collection of libraries that enables you to communicate with a local or remote ethereum node using HTTP, IPC, or Websocket.

Ethereum, as a blockchain network, is a decentralized public ledger for verifying and recording transactions. The users in the network can create, publish, use and monetize decentralized applications. Ethereum has its own cryptocurrency called Ether (ETH) and programming language called Solidity.

Smart Contract is a program that runs on the Ethereum blockchain. It’s a collection of code (its functions) and data (its state) that resides at a specific address on the Ethereum blockchain. They are deployed on the network and run as programmed without any user involvement. Functions in Smart Contracts can be executed by transacting from the user wallet. Smart Contracts cannot be altered or deleted once deployed.

Let’s take a short moment to consider how all these pieces come together as an application. Ethereum itself is a huge network providing all the transactional functions — consider it as a large bank network that is transparent and public, that is run by people all over the world. Those people, contributing to the network by running Ethereum nodes on their own hardware, are paid through the “gas” fee generated from each transaction. You can consider gas as the transaction fee we pay for transferring money from one bank to another bank but are less in the amount in comparison to the transaction fee. Smart Contracts are deployed on the blockchain network by the user paying some gas fees. The blockchain contains the contract code and acts as the storage device for the data structures the contract uses. On the user side, we can use libraries such as Web3.js to initiate requests to the contracts using a web browser. It can be considered as a bridge that connects your application and the blockchain network.

We can multiple ways to connect to the Ethereum Blockchain using Web3.js. The connection is possible to remote or local instances of Ethereum Client like GETH, OpenEthereum, or using a third-party plugin using Metamask.

A. First Method

Let's see how we can use Web3.js to connect to the Ethereum Blockchain using Ethereum Clients, which communicates with Ethereum Blockchain JSON RPC. It can be used by Frontend as well as Backend applications.

Installing Web3.js

Before installing Web3.js, make sure you have node js and npm installed on your machine. Find more about Web3.js over here.

npm install web3

Setting up Ethereum Client

Depending upon our purpose, we could use pretty much use any Ethereum client. For this article, we are going to use Infura. Infura provides the tools and infrastructure that allow developers to easily take their blockchain application from testing to scaled deployment — with simple, reliable access to Ethereum and IPFS. Blockchain applications need connections to peer-to-peer networks which can require long initialization times. It can take hours or days to sync a node with the Ethereum blockchain and can use more bandwidth and storage than you had planned. It can get expensive to store the full Ethereum blockchain and these costs will scale as you add more nodes to expand your infrastructure. As your infrastructure becomes more complex, you may need full-time site reliability engineers and DevOps teams to help you maintain it. Infura solves all of these problems by providing infrastructure and tools that make it quick, easy, and cost-effective for developers to connect to Ethereum and IPFS and start building awesome decentralized applications. No syncing is required. No complex setups. Just your decentralized app, live and functioning, right now. Register and generate an endpoint that you can use to communicate with the network. You can generate unique endpoints for any available network.

Infura Endpoint for Communication

Save the Infura endpoints. You will need these endpoints later on.

Connecting via Web3

Now, we create an index.js file and paste the following code. Replace ADD_YOUR_ENDPOINT with your endpoint.

var Web3 = require('web3');
var provider = 'ADD_YOUR_ENDPOINT';
var web3Provider = new Web3.providers.HttpProvider(provider);
var web3 = new Web3(web3Provider);

Let's break down the process into a simpler form:

  1. We import the Web3 from the web.js package, which was installed in the previous step.
  2. We created a provider variable, that consists of your Infura endpoint.
  3. Then, we initialize a web3Provider using Web3.providers.HttpProvider method of Web3. Here, we can use any provider that provides services for Ethereum Networks.
  4. Finally, we created an object by passing the provider created on Step 3. Now, the object can be used to access various web3 functions.

Now, your application is connected to Web3, now you can interact with the Ethereum Networks easily.

B. Second Method

We can easily use third-party plugins like Metamask to communicate with Ethereum Network. Metamask is a crypto wallet- it allows you to store and transact Ethereum or any other Ethereum-based (ERC- 20) tokens. You do not register it on a website, but rather install it as an extension to your Chrome or Firefox browser. MetaMask equips you with a key vault, secure login, token wallet, and token exchange — everything you need to manage your digital assets. MetaMask generates passwords and keys on your device, so only you have access to your accounts and data. You always choose what to share and what to keep private. Follow this link to install Metamask for your web browser.

Once you have installed Metamask, follow the steps to create an account on Metamask. You can follow this article to install it. After completing the steps, now let's jump into the coding part. Metamask is available to any frontend application with the help of a window.ethereum object.

var Web3 = require('web3');var web3 = new Web3(window.web3.currentProvider);

Let’s break down the process into a simpler form:

  1. We import the Web3 from the web.js package, which was installed in the previous step.
  2. Then, we passed in window.web3.currentProvider, while creating the object for Web3. This will basically take the network, that you have currently selected on your Metamask wallet.

Now, your application is connected to Web3, now you can interact with the Ethereum Networks easily. Note that, this method is applicable from the frontend side of the application only.

Hurray! We have now installed Web3.js and created a foundation for interacting with the Ethereum Networks. In my next article, we will be discussing more functionalities of Web3.js and how we can interact with real-time smart contracts.

If you find this article helpful, please shower me with some claps ? ?

References:

https://metamask.io/