Chapter 4. Getting Started with web3.js

In the previous chapter, we learned how to write and deploy smart contracts using Solidity. In this chapter, we will learn about web3.js and how to import it, connect to geth, and use it in Node.js or client-side JavaScript. We will also learn how to build a web client using web3.js for the smart contract that we created in the previous chapter.

In this chapter, we'll cover the following topics:

• Importing web3.js in Node.js and client-side JavaScript
• Connecting to geth
• Exploring web3.js
• Discovering the most-used APIs of web3.js
• Building a Node.js application for an ownership contract

Note

This chapter is same as chapter present in author's previous book Blockchain for Projects. This is not a second edition book,it is used to explain fundamental concepts to the readers. 

Introduction to web3.js

web3.js provides us with JavaScript APIs to communicate with geth. It uses JSON-RPC internally to communicate with geth. web3.js can also communicate with any other kind of Ethereum node that supports JSON-RPC. It exposes all JSON-RPC APIs as JavaScript APIs. It doesn't just support all the Ethereum-related APIs, but also supports APIs related to Whisper and Swarm.

As we build various projects, you will keep learning more about web3.js. For now, though, let's go through some of the most used APIs for web3.js. Later, we will build a frontend for our ownership smart contract using web3.js.

At the time of writing, the latest version of web3.js is 1.0.0-beta.18. We will learn everything using this version.

web3.js is hosted at https://github.com/ethereum/web3.js and the complete documentation is hosted at https://github.com/ethereum/wiki/wiki/JavaScript-API.

Importing web3.js

Simply run npm install web3 inside your project directory to use web3.js in Node.js. In the source...

Building a client for the ownership contract

In the previous chapter, we wrote Solidity code for the ownership contract. And in both the previous chapter and this one, we learned about web3.js and how to invoke the methods of the contract using web3.js. Now, it's time to build a client for our smart contract so that users can use it easily.

We will build a client where an enterprise's user selects a file, enters owner details, and then clicks on Submit to broadcast a transaction to invoke the contract's set method with the file hash and the owner's details. Once the transaction is successfully broadcasted, we will display the transaction hash. The user will also be able to select a file and get the owner's details from the smart contract. The client will also display the recent set transactions mined in real time.

We will use sha1.js to get the hash of the file on the frontend, jQuery for DOM manipulation, and Bootstrap 4 to create a responsive layout. We will use Express.js and web3.js on...

Summary

In this chapter, we first learned about the fundamentals of web3.js and looked at some examples. We learned about connecting to a node, basic APIs, sending various kinds of transactions, and watching for events. Finally, we built a proper production use client for our ownership contract. Now you should be comfortable with writing smart contracts and building UI clients for them in order to ease their use.

In the next chapter, we will learn about achieving privacy using a zero-knowledge security layer.