In the early days of the world wide web, the data stored and used by an application is stored on a centralized database, thus making it easy for the central authority in charge of the data to easily manipulate users' data without their consent. But since the advent of blockchain which is a decentralized database with no central authority in charge or controlling its data, applications can now be developed on a decentralized database without having to worry about the safety of the users' data.

Decentralized applications also known as d apps are applications either mobile or web built on a blockchain. These applications can interact and store their data on the blockchain.

One of the most thrilling features of the blockchain is its ability to execute smart contract code. A smart contract is a code written on a blockchain and can only be executed when certain conditions are met. It can be used for different purposes such as the creation of tokens, agreement contracts e.t.c on a blockchain.

Let's now take a look at how you can interact with the blockchain from the front end of your d app

Even though not all d app makes use of smart contract it is important to understand as a developer how you can interact with code that is written on a decentralized database.

In this article, i will explain how you can use a web3 Javascript library called ethers js to connect your smart contract function with the front end of your application.

(1) Check out this installation guide on how to install ethers js with npm: ether js installation guide you can also check the official documentation: Ethers js

(2) To use ethers js in your project after installation use the syntax below by importing it from the ethers library that you installed

(3) Ethers js makes use of 2 important pieces of information about your smart contract to connect it to the front end these are (1) The contract ABI (2) The contract address

The contract ABI is a JSON file that contains the necessary information about the contract it can be found in the build folder if you are using truffle for your smart contract and the cache folder if you are using hardhat. The contract address is the address of the contract after it has been deployed on the blockchain.

(4) Import your contract artifact to have access to the ABI code

(5) Ethers js requires a provider to connect to a blockchain node, it is the provider object that will communicate with the blockchain. Instantiate your web3 provider using the code sample below

(6) After importing your contract artifacts,address and setting up a provider, define an interface for your contract function and then create an instance of your contract using the 3 aforementioned parameters

(7) Interacting with the blockchain involves reading and sending/writing data to the blockchain the code snippet below explains how you can read data and also send data to the blockchain using ethers js from the front end of your d apps

Thank you for reading !!!!!!