Intro to Web3.js – Ethereum Blockchain Developer

In this post I’m going to share what Web3.Js is and how it can be used to sync data between the decentralized web and users’ browsers, thanks to a JavaScript library named “Web3”. The blockchain browser plug-in, Mist or Metamask, exposes methods which you can use to connect to your favorite blockchain in order to pass messages back and forth. These methods do not have many arguments but they return lots of data upon completion when making calls to a blockchain — just remember that! They are best for retrieving data from ethereum-based blockchains but not blockchains that require some configuration options first such as the Hyperledger Project.

What is Web3.js?

Web3.js is an API built on top of Ethereum. It gives us an interface to interact with a local or remote Ethereum node. It is a JavaScript library and can be used in the browser or in a NodeJS server. We will take a look at what Web3.js is, how it works, and how it can be used to create a blockchain application.

There are a few different aspects to developing blockchain applications with Ethereum:

1. Smart contract development – writing code that gets deployed to the blockchain with the Solidity programming language.
2. Developing websites or clients that interact with the blockchain – writing code that reads and writes data from the blockchain with smart contracts.

Web3.js is a collection of libraries that allows one to interact with The Ethereum blockchain. If you’ve ever made an Ajax call in the past, specifically with jQuery, to read or write data from a web server, then you’re going to understand right off the bat how Web3 works. Instead of reading and writing data from a web server, Web3 gives you freedom to perform actions like send Ether (ETH) from one account to another, read and write data stored on smart contracts, and create smart contracts!

Let me explain how you can use Web3.js to talk to The Ethereum Blockchain.

Client-side Web3.js talks to The Ethereum Blockchain with JSON RPC, which stands for “Remote Procedure Call” protocol. The first thing we have to do is start an Ethereum client or Ethereum node and then we can connect through Node.js to our client using a JSON RPC API.

We use Web3.js to make requests to the Ethereum node where we can read and write data (store information) on the blockchain. An Ethereum client acts as a communication interface that accepts all app requests, filters actions and sends asynchronous responses (JSON). It’s all about making requests, receiving notifications of the state change in your smart contract APIs and ensuring your app behaves properly given user input!

Dependencies

There are a few dependencies that will help you start developing with Web3.js.

Node Package Manager 

Most of the dependencies we will use are Node.js related. The first one is called NPM and can be installed using Node.js, but you can also install it separately if you don’t have Node installed on your computer. To do this, first check if you already have node on your computer by going to a terminal program (terminal is found in /usr/bin/ if using a MAC), and typing ($ node -v)

Installing the Web3.js library on your local machine is easy to do with a quick one-liner with Node Package Manager like so: ($ npm install web3)

Infura RPC URL

In order to connect to an Ethereum node with JSON RPC on the Main Net, we need access to an Ethereum node. There are a few ways you could do this. For one, you could run your own Ethereum node with Geth or Parity. But this requires you to download a lot of data from the blockchain and keep it in sync. This is a huge headache if you’ve ever tried to do this before.

Once you’ve signed up, your Infura RPC URL should look like this:

(https://mainnet.infura.io/YOUR_INFURA_API_KEY)

Checking Account Balances

If you plan on connecting to the Ethereum node from your browser to access the JSON RPC using Web3.js, there are a couple of ways that you might be able to do this. You could setup an Ethereum node through the help of Parity or Geth, but then if you start having issues setting this up, it won’t be easy since some features may not work with your specific operating system like Windows. There is a workaround though: download Infura’s Ethereum node and connect directly to their HTTPs endpoint. Once connected, you can deploy applications and make blockchain related requests very easily and quickly.

Read Data from Smart Contracts with Web3.js

In order to retrieve information from smart contracts that use the Ethereum protocol with Web3.js, you need 2 things:

We can use the web3.eth.Contract() function to get a representation of an Ethereum smart contract that is written in JavaScript with the Abstract Binary Interface (ABI). A smart contract ABI helps us learn about a specific smart contract and how it works for an Ethereum network.

First and foremost, the main objective of this lesson is to help you better understand how transactions work on The Blockchain. Whenever you create a transaction, you are actually writing data to the blockchain and updating its current state. There are two different types of state updates that can occur:

1. Sending Ether from one account to another
2. Calling a function within a smart contract which also writes data to the ethereum network.

 We can get a greater understanding of these concepts by performing these actions with the Web3.js library (except if in class we will be using truffle as our testing framework).

In order to broadcast transactions to the network, we’ll need to sign them first. I’m going to use an additional JavaScript library to do this called ethereumjs-tx. You can install this dependency from the command line like this: ($ npm install ethereumjs-tx).

The reason we’re going to use this library is that it’s our best option for signing transactions. We want to sign all of our transactions locally, and because we’re not running an Ethereum node locally, we will need to use Infura as a remote node. While Infura is a trustworthy service, we still want to sign the transaction locally rather than giving them manage our private keys.

Deploying Smart Contracts with Web3.js

There are multiple ways that smart contracts can be deployed to The Ethereum Blockchain. There are even multiple ways to deploy them within Web3.js itself. In this tutorial, I will demonstrate one method that will help you better understand what happens when a smart contract is deployed to the Ethereum network. This example is designed to break down each step in the network deployment process so you can see what exactly happens when a contract is uploaded to the blockchain for use.

This consist of the same three basic steps.

1. Build a transaction object
2. Sign the transaction
3. Send the transaction

These steps are the same no matter what type of data is being sent to the blockchain. This is because whether you’re writing data to a contract account or sending Ether from one account to another, it’s all accomplished by building a transaction and sending it to the network. The only difference between these two example transactions is the type of data being sent (i.e. deploying a contract versus sending Ether).