It was difficult for me to understand how websites interact with smart contracts. I felt overwhelmed by a lot of new information and jargon. So I want this tutorial to be simple enough that everyone with basic web knowledge can understand the underlying mechanism.
Step1. Deploy a smart contract
First, we need a smart contract. You can either use an existing smart contract or deploy a new one.
For the latter, this tutorial might be helpful How to Deploy a Smart Contract in 5 Minutes.
For this tutorial, let’s just use one I just. The contract address is
0x2Bc7A39c22403dA3617b237D42BF0db2C5dcaBA1 below is the contract code:
Above is a simple contract that keeps track of one string variable greeting. Everyone can get this variable through greet() and change it via setGreeting(). I this smart contract in Mumbai (Polygon Testnet), with the initial greeting set to be ‘Hello world!‘.
Step2. Get the Contract ABI
ABI stands for Application Binary Interface, the description of the contract interface. Please refer to the quote below from this article:
It is very similar to API (Application Program Interface), a human-readable representation of a code’s interface. ABI defines the methods and structures used to interact with the binary contract, just like API does but on a lower-level.
The Solidity documentation also helps you to understand ABI.
Now that we scratch the surface of ABI, where is it? If you your smart contract using my tutorial, the ABI file rests in
For this tutorial, you can use this ABI file for the following steps.
Step3. The Frontend
Now that we have contract address and contract ABI, we are ready to create a website to make function calls. Below is the example.
- line3 includes the ethers.js library. This is the tool we use to interact with the blockchain ecosystem.
- In line5 we use the easiest way to include this ABI to the website, by copy-pasting its content and assigning it to the variable
- line6 initiates the provider by providing the Mumbai network’s official RPC address to
ethers.providers.JsonRpcProvidermethod. You might wonder what is a provider. In ethers documentation, “A Provider is an abstraction of a connection to the Ethereum network, providing a concise, consistent interface to standard Ethereum node functionality.” Think of it as an API endpoint, through which you interact with the blockchain.
- line9 is where we establish the connection between blockchain and our website by providing contract address, ABI, and provider to the
ethers.Contractmethod. Now the website can call the function and retrieve the greeting information from the Mumbai blockchain.
What about setGreeting?
Now you might wonder, isn’t there another function in the contract? Can we call that one? Great question!
In Ethereum based blockchain, reading information is generally free, while changing information costs. In our example, invoking the other function
setGreeting will lead to the following error message:
Now we are changing a value on-chain, so we need to connect our wallet and convince the blockchain that we are willing and able to pay the cost. Instead of a provider, we pass a singer to
ethers.Contract, which requires wallet integration. I will stop here since that is out of scope for this tutorial. Let me know if you want me to explain that part in the future.
There you have it! I hope this tutorial helped you understand how websites interact with the blockchain. Please feel free to leave a comment if you have any questions or suggestions. If you want me to write other topics about blockchain development, please also let me know!
Want to Connect?Please feel free to reach out (my LinkedIn).