Integration of Solidity Smart Contract based Decentralised Applications with Web3.js on Ethereum Blockchain.

Learn how to use Web3.js to build the frontend of your DApp that will interact with your ethereum smart contracts.

Web3.js:

Digital assets such as cryptocurrencies and smart contracts are a central component of decentralized applications (DApps), in that they are deployed on the blockchain. However, to interact with these on-chain components, transactions need to be created on the blockchain. For a user or off-chain software to create a transaction on the blockchain, a node needs to relay the transaction to the underlying peer-to-peer (P2P) network.

Web3.js is a collection of libraries that allows programmers to interact with these on-chain components, by being able to facilitate a connection to Ethereum nodes, using HTTP or IPC connections.

It represents a JavaScript language binding for Ethereum’s JSON RPC interface, which makes it directly usable in web technology, as JavaScript is natively supported in almost all web browsers.

Web3.js can be used to connect to the Ethereum network via any Ethereum node that allows access via HTTP. This may be a local node, a node hosted by the DApp provider, or public gateways which operate free Ethereum access points.

One common way of integrating a web browser application with Ethereum is to use the Metamask browser extension in combination with Web3.js. Metamask is an in-browser Ethereum wallet that injects a Web3 provider object into the browser. A Web3 provider is a data-structure providing a link to publicly accessible Ethereum nodes. Using Metamask allows users to manage private keys and sign transactions within their web browser. Using Metamask in combination with Web3.js, in a web interface, provides a convenient way to interact with the Ethereum network.

Curriculum summary:

Full stack dapplication development - How to get through full stack dapp via web3.js.

More about web3 - How is it different from conventional ways.

Main functionality of web3 and Ganache - How to use the functionality of web3 and installing Ganache.

Simple practical use of Web3 - Simple codes to get you started with web3.js.

Getting started with Truffle Project - Basic walkthrough of what is inside of truffle box.

Truffle react box deployment - Deploying and migrating of smart contracts.

How Ganache works - Setup ganache for our truffle project.

Getting started with App.js file - Starting template made which can be used for all the different contracts.

Get & set methods used - Create web3.js to use the functions of our smart contracts.

Let’s send ethers - Will send ethers to smart contracts.and difference .

Setup the App.js for first function - We need to set up the app.js for calling function and sending ethers.

App.js for second type and window function. - We need to make the app.js to send directly the ethers to some account or to the Smart contracts and withdraw money from the smart contract.

Testing of direct ether send and sending to contract and withdrawing it.

Diving into events - Let’s checkout some event logs how to log and how to get back the events so that we’ll get to know what’s going in the blockchain

Logging events at the same time of deploy.

Filtering past events - Get past events from blockchain by querying using some filters

Web3 utils - Using Web3 utils for some added advantage for the ease of middleware compatibility.

Getting to know more about utils.