Web3.js হল একটি জনপ্রিয় JavaScript লাইব্রেরি যা আপনাকে Ethereum ব্লকচেইনের সাথে ইন্টারঅ্যাক্ট করতে সক্ষম করে। এটি আপনার ফ্রন্টএন্ড অ্যাপ্লিকেশন (যেমন React বা HTML/JS) থেকে স্মার্ট কন্ট্রাক্টের সাথে যোগাযোগ করতে সাহায্য করে। Solidity কন্ট্রাক্টকে Web3.js এর মাধ্যমে Ethereum নেটওয়ার্কে ডিপ্লয় করার পর, আপনি স্মার্ট কন্ট্রাক্টের ফাংশনগুলোকে কল করতে পারবেন, ডেটা পাঠাতে পারবেন এবং ব্লকচেইন থেকে রিটার্ন পেতে পারবেন।
এখানে আমরা আলোচনা করব কিভাবে Solidity কন্ট্রাক্টের সাথে ফ্রন্টএন্ড অ্যাপ্লিকেশন থেকে Web3.js ব্যবহার করে ইন্টারঅ্যাক্ট করা যায়।
১. Solidity Contract Setup
প্রথমেই আমরা একটি Solidity কন্ট্রাক্ট তৈরি করব যেটি আমরা Ethereum নেটওয়ার্কে ডিপ্লয় করব। এখানে একটি সহজ ERC-20 টোকেন কন্ট্রাক্টের উদাহরণ দেওয়া হলো।
Example Solidity Contract (MyToken.sol)
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract MyToken {
string public name = "MyToken";
string public symbol = "MTK";
uint8 public decimals = 18;
uint256 public totalSupply;
mapping(address => uint256) public balances;
constructor(uint256 _initialSupply) {
totalSupply = _initialSupply * 10 ** uint256(decimals);
balances[msg.sender] = totalSupply;
}
function balanceOf(address account) public view returns (uint256) {
return balances[account];
}
function transfer(address recipient, uint256 amount) public returns (bool) {
require(balances[msg.sender] >= amount, "Insufficient balance");
balances[msg.sender] -= amount;
balances[recipient] += amount;
return true;
}
}এখানে:
MyTokenকন্ট্রাক্টেtransferএবংbalanceOfফাংশন রয়েছে, যা স্মার্ট কন্ট্রাক্টের সাথে ইন্টারঅ্যাক্ট করবে।- কন্ট্রাক্টটি প্রথমে একটি প্রাথমিক সাপ্লাই নির্ধারণ করে এবং মালিকের অ্যাকাউন্টে তা জমা করে।
২. Deploying the Contract
Solidity কন্ট্রাক্টটি ডিপ্লয় করার জন্য আমরা Hardhat বা Truffle ব্যবহার করতে পারি। এই উদাহরণে আমরা Hardhat ব্যবহার করব।
- Install Hardhat:
npm install --save-dev hardhat- Create a Hardhat Project:
npx hardhat- Deploy Script:
const { ethers } = require("hardhat");
async function main() {
const [deployer] = await ethers.getSigners();
console.log("Deploying contracts with the account:", deployer.address);
const Token = await ethers.getContractFactory("MyToken");
const token = await Token.deploy(1000000); // 1 million tokens
console.log("Token deployed to:", token.address);
}
main()
.then(() => process.exit(0))
.catch((error) => {
console.error(error);
process.exit(1);
});- Deploy the Contract:
npx hardhat run scripts/deploy.js --network rinkebyএখন কন্ট্রাক্টটি Rinkeby টেস্টনেটে ডিপ্লয় হবে এবং তার ঠিকানা (contract address) প্রিন্ট হবে।
৩. Web3.js এবং Frontend Setup
আপনার ফ্রন্টএন্ড অ্যাপ্লিকেশন থেকে স্মার্ট কন্ট্রাক্টের সাথে ইন্টারঅ্যাক্ট করতে Web3.js ব্যবহার করা হবে। এখানে একটি HTML/JavaScript ফাইল দিয়ে Web3.js ব্যবহার করার উদাহরণ দেখানো হলো।
Install Web3.js:
npm install web3Example Frontend Integration (HTML + JavaScript):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyToken</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.5.2/web3.min.js"></script>
</head>
<body>
<h2>MyToken Interactions</h2>
<p>Balance: <span id="balance"></span> MTK</p>
<button id="connectButton">Connect Wallet</button>
<button id="transferButton">Transfer Tokens</button>
<script>
// Connect to the blockchain
let web3;
let myTokenContract;
let account;
// Replace with your deployed contract's address and ABI
const contractAddress = "YOUR_CONTRACT_ADDRESS";
const abi = [
{
"constant": true,
"inputs": [
{
"name": "account",
"type": "address"
}
],
"name": "balanceOf",
"outputs": [
{
"name": "",
"type": "uint256"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
},
{
"constant": false,
"inputs": [
{
"name": "recipient",
"type": "address"
},
{
"name": "amount",
"type": "uint256"
}
],
"name": "transfer",
"outputs": [
{
"name": "",
"type": "bool"
}
],
"payable": false,
"stateMutability": "nonpayable",
"type": "function"
}
];
// Connect to Ethereum
async function connectWallet() {
if (window.ethereum) {
web3 = new Web3(window.ethereum);
await window.ethereum.request({ method: 'eth_requestAccounts' });
account = (await web3.eth.getAccounts())[0];
myTokenContract = new web3.eth.Contract(abi, contractAddress);
getBalance();
} else {
alert("Please install MetaMask!");
}
}
// Get balance of connected account
async function getBalance() {
const balance = await myTokenContract.methods.balanceOf(account).call();
document.getElementById("balance").innerText = web3.utils.fromWei(balance, 'ether');
}
// Transfer tokens
async function transferTokens() {
const recipient = prompt("Enter recipient address:");
const amount = prompt("Enter amount to transfer:");
const amountInWei = web3.utils.toWei(amount, 'ether');
await myTokenContract.methods.transfer(recipient, amountInWei).send({ from: account });
alert("Transfer successful!");
getBalance();
}
// Event listeners
document.getElementById("connectButton").addEventListener("click", connectWallet);
document.getElementById("transferButton").addEventListener("click", transferTokens);
</script>
</body>
</html>Explanation:
- Web3.js Initialization:
let web3 = new Web3(window.ethereum);ব্যবহার করে Ethereum নেটওয়ার্কে সংযোগ স্থাপন করা হয়।window.ethereumহল MetaMask এর মাধ্যমে ওয়েব3-এর সাথে সংযোগের জন্য ব্যবহৃত এপিআই।
- Contract Interaction:
myTokenContract.methods.balanceOf(account).call(): এটি ব্যবহারকারীর অ্যাকাউন্টের ব্যালেন্স পেতে ব্যবহৃত হয়।myTokenContract.methods.transfer().send(): টোকেন ট্রান্সফার করতে ব্যবহার করা হয়, যেখানে রিসিপিয়েন্ট অ্যাড্রেস এবং পরিমাণ প্রদান করা হয়।
- UI Integration:
- Balance: ব্যবহারকারীর টোকেন ব্যালেন্স প্রদর্শিত হবে।
- Transfer: ব্যবহারকারী অন্য অ্যাকাউন্টে টোকেন ট্রান্সফার করতে পারবেন।
৪. Testing Smart Contract with Frontend
ফ্রন্টএন্ডের সাথে স্মার্ট কন্ট্রাক্টের ইন্টিগ্রেশন পর্যালোচনা এবং পরীক্ষার জন্য, Hardhat বা Truffle এর সাথে টেস্টিং করতে হবে। আপনি Hardhat এর ethers.js লাইব্রেরি ব্যবহার করে Web3.js এর মাধ্যমে স্মার্ট কন্ট্রাক্টের কার্যকারিতা টেস্ট করতে পারেন।
Example Test for Frontend Interaction:
const { expect } = require("chai");
const { ethers } = require("hardhat");
describe("MyToken Frontend Interaction", function () {
let myToken;
let owner;
let addr1;
beforeEach(async function () {
[owner, addr1] = await ethers.getSigners();
const MyToken = await ethers.getContractFactory("MyToken");
myToken = await MyToken.deploy(1000);
await myToken.deployed();
});
it("Should return correct balance after transfer", async function () {
await myToken.transfer(addr1.address, 500);
const balance = await myToken.balanceOf(addr
1.address);
expect(balance).to.equal(500);
});
});এখানে:
transferফাংশনের মাধ্যমে আমরা একটি অ্যাকাউন্ট থেকে অন্য অ্যাকাউন্টে টোকেন পাঠিয়ে তার ব্যালেন্স যাচাই করছি।
সারাংশ
Web3.js এবং Solidity smart contract integration ফ্রন্টএন্ড ডেভেলপমেন্টে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। Web3.js ব্যবহার করে স্মার্ট কন্ট্রাক্টের ফাংশনগুলি ফ্রন্টএন্ড অ্যাপ্লিকেশনে ইন্টারঅ্যাক্ট করা যায়, যেমন টোকেন ট্রান্সফার এবং ব্যালেন্স চেক করা। MetaMask বা অন্য কোনো ওয়ালেট ব্যবহারকারীর Ethereum অ্যাকাউন্টের সাথে সংযুক্ত করা হয়, এবং স্মার্ট কন্ট্রাক্টের সাথে সরাসরি ইন্টারঅ্যাক্ট করা যায়। Hardhat বা Truffle এর মাধ্যমে স্মার্ট কন্ট্রাক্টের ফাংশনালিটি এবং ফ্রন্টএন্ড ইন্টিগ্রেশন টেস্ট করা যেতে পারে।
Read more
