एथेरियम ब्लॉकचेन के साथ इंटरैक्ट करने के लिए एक सहज इंटरफ़ेस स्थापित करने के लिए Web3.js जावास्क्रिप्ट लाइब्रेरी का उपयोग करें।
स्मार्ट अनुबंध Web3 अनुप्रयोगों के लिए प्राथमिक निर्माण खंड हैं। Web3 अनुप्रयोगों में कार्यात्मकताओं को सक्षम करने के लिए, स्मार्ट अनुबंध में निर्दिष्ट कार्यों के साथ आसानी से बातचीत करने में सक्षम होना महत्वपूर्ण है। आप इस संचार को स्थापित करने के लिए जावास्क्रिप्ट जैसी लोकप्रिय भाषा और प्रसिद्ध Web3.js लाइब्रेरी का उपयोग कर सकते हैं।
Web3.js लाइब्रेरी का परिचय
Web3.js एक जावास्क्रिप्ट लाइब्रेरी है जो एथेरियम ब्लॉकचेन के साथ इंटरैक्ट करने के लिए एक इंटरफ़ेस प्रदान करती है। यह निर्माण की प्रक्रिया को सरल बनाता है विकेन्द्रीकृत अनुप्रयोग (डीएपी) एथेरियम नोड्स से जुड़ने, लेनदेन भेजने, स्मार्ट अनुबंध डेटा पढ़ने और घटनाओं को संभालने के लिए तरीके और उपकरण प्रदान करके।
Web3.js पारंपरिक विकास और ब्लॉकचेन तकनीक को जोड़ता है, जिससे आप परिचित जावास्क्रिप्ट सिंटैक्स और कार्यक्षमता का उपयोग करके विकेंद्रीकृत और सुरक्षित एप्लिकेशन बना सकते हैं।
जावास्क्रिप्ट प्रोजेक्ट में Web3.js को कैसे आयात करें
अपने नोड प्रोजेक्ट में Web3.js का उपयोग करने के लिए, आपको सबसे पहले लाइब्रेरी को प्रोजेक्ट निर्भरता के रूप में स्थापित करना होगा।
अपने प्रोजेक्ट के अंदर इस कमांड को चलाकर लाइब्रेरी स्थापित करें:
npm install web3or
yarn add web3
Web3.js स्थापित करने के बाद, अब आप अपने नोड प्रोजेक्ट के भीतर लाइब्रेरी को ES मॉड्यूल के रूप में आयात कर सकते हैं:
const Web3 = require('web3');
तैनात स्मार्ट अनुबंधों के साथ बातचीत
ठीक से प्रदर्शित करने के लिए कि आप Web3.js का उपयोग करके एथेरियम नेटवर्क पर एक तैनात स्मार्ट अनुबंध के साथ कैसे बातचीत कर सकते हैं, आप एक वेब एप्लिकेशन बनाएंगे जो तैनात स्मार्ट अनुबंध के साथ काम करता है। वेब ऐप का उद्देश्य एक साधारण वोटिंग मतपत्र होगा जहां एक वॉलेट किसी उम्मीदवार के लिए वोट डाल सकता है और उन वोटों को रिकॉर्ड कर सकता है।
आरंभ करने के लिए, अपने प्रोजेक्ट के लिए एक नई निर्देशिका बनाएं और इसे Node.js प्रोजेक्ट के रूप में प्रारंभ करें:
npm init
प्रोजेक्ट में Web3.js को एक निर्भरता के रूप में स्थापित करें और सरल बनाएं Index.html और शैलियाँ.सीएसएस प्रोजेक्ट के रूट के भीतर फ़ाइलें।
निम्नलिखित कोड को इसमें आयात करें Index.html फ़ाइल:
html>
<html>
<head>
<title>Voting Apptitle>
<linkrel="stylesheet"href="styles.css" />
head>
<body>
<h1>Voting Apph1><divclass="candidates">
<divclass="candidate">
<spanclass="name">Candidate Aspan>
<buttonclass="vote-btn"data-candidate="A">Votebutton>
<spanclass="vote-count">0 votesspan>
div>
<divclass="candidate">
<spanclass="name">Candidate Bspan>
<buttonclass="vote-btn"data-candidate="B">Votebutton>
<spanclass="vote-count">0 votesspan>
div>
<divclass="candidate">
<spanclass="name">Candidate Cspan>
<buttonclass="vote-btn"data-candidate="C">Votebutton>
<spanclass="vote-count">0 votesspan>
div>
div>
<scriptsrc="main.js">script>
body>
html>
के अंदर शैलियाँ.सीएसएस फ़ाइल, निम्नलिखित कोड आयात करें:
/* styles.css */
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 30px;
}
.candidates {
display: flex;
justify-content: center;
margin-top: 50px;
}
.candidate {
margin: 20px;
}
.name {
font-weight: bold;
}
.vote-btn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.vote-count {
margin-top: 5px;
}
नीचे परिणामी इंटरफ़ेस है:
अब जब आपके पास आरंभ करने के लिए एक बुनियादी इंटरफ़ेस है, तो एक बनाएं अनुबंध आपके स्मार्ट अनुबंध के लिए कोड रखने के लिए आपके प्रोजेक्ट के रूट में फ़ोल्डर।
रीमिक्स आईडीई स्मार्ट अनुबंधों को लिखने, तैनात करने और परीक्षण करने का एक आसान तरीका प्रदान करता है। आप अपने अनुबंध को एथेरियम नेटवर्क पर तैनात करने के लिए रीमिक्स का उपयोग करेंगे।
पर जाए remix.ethereum.org और के अंतर्गत एक नई फ़ाइल बनाएँ ठेके फ़ोल्डर. आप फ़ाइल को नाम दे सकते हैं test_contract.sol.
.सोल एक्सटेंशन इंगित करता है कि यह एक सॉलिडिटी फ़ाइल है। सॉलिडिटी सबसे लोकप्रिय भाषाओं में से एक है आधुनिक स्मार्ट अनुबंध लिखने के लिए।
इस फ़ाइल के अंदर, अपना सॉलिडिटी कोड लिखें और संकलित करें:
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract Voting {
mapping(string => uint256) private voteCounts;
functionvote(string memory candidate) public{
voteCounts[candidate]++;
};
functiongetVoteCount(string memory candidate) publicviewreturns (uint256){
return voteCounts[candidate];
};
};
जब रीमिक्स सॉलिडिटी कोड संकलित करता है, तो यह JSON प्रारूप में एक ABI (एप्लिकेशन बाइनरी इंटरफ़ेस) भी बनाता है। एबीआई स्मार्ट कॉन्ट्रैक्ट और क्लाइंट एप्लिकेशन के बीच इंटरफेस को परिभाषित करता है।
यह निम्नलिखित निर्दिष्ट करेगा:
- स्मार्ट अनुबंध द्वारा उजागर किए गए कार्यों और घटनाओं के नाम और प्रकार।
- प्रत्येक फ़ंक्शन के लिए तर्कों का क्रम.
- प्रत्येक फ़ंक्शन का रिटर्न मान.
- प्रत्येक ईवेंट का डेटा प्रारूप.
एबीआई प्राप्त करने के लिए, इसे रीमिक्स आईडीई के भीतर से कॉपी करें। एक बनाने के अनुबंध.abi.json अंदर फ़ाइल करें अनुबंध अपने प्रोजेक्ट के रूट में और ABI को फ़ाइल के अंदर पेस्ट करें।
आपको आगे बढ़ना चाहिए और गनाचे जैसे टूल का उपयोग करके अपने अनुबंध को एक परीक्षण नेटवर्क पर तैनात करना चाहिए।
Web3.js का उपयोग करके अपने नियोजित स्मार्ट अनुबंध के साथ संचार करना
आपका अनुबंध अब एथेरियम परीक्षण नेटवर्क पर तैनात कर दिया गया है। आप अपने यूआई इंटरफेस से तैनात अनुबंध के साथ बातचीत पर काम करना शुरू कर सकते हैं। एक बनाने के मुख्य.जे.एस अपने प्रोजेक्ट के रूट में फ़ाइल करें। आप Web3.js और अपनी सहेजी गई ABI फ़ाइल दोनों को इसमें आयात करेंगे मुख्य.जे.एस. यह फ़ाइल आपके स्मार्ट अनुबंध से बात करेगी और अनुबंध से डेटा पढ़ने, उसके कार्यों को कॉल करने और लेनदेन को संभालने के लिए जिम्मेदार होगी।
नीचे बताया गया है कि आपका तरीका कैसा है मुख्य.जे.एस फ़ाइल दिखनी चाहिए:
const Web3 = require('web3');
const contractAddress = "CONTRACT_ADDRESS"; // Replace with the actual deployed contract address
import contractAbi from'../contract/contract.abi.json'// Create an instance of web3 using the injected provider (e.g., MetaMask)
const web3 = new Web3(window.ethereum);// Create a contract instance using the contract address and ABI
const votingContract = new web3.eth.Contract(contractAbi, contractAddress);// Retrieve the candidate elements from the DOM
const candidates = document.querySelectorAll('.candidate');// Function to handle voting for a candidate
asyncfunctionvote(candidate) {
try {
// Call the 'vote' function of the smart contract
await votingContract.methods.vote(candidate).send({ from: web3.eth.defaultAccount });// Update the vote count in the UI
const voteCount = await votingContract.methods.getVoteCount(candidate).call();
const voteCountElement = document.querySelector(`[data-candidate="${candidate}"] .vote-count`);
voteCountElement.textContent = `${voteCount} votes`;
} catch (error) {
console.error(error);
// Handle error cases, such as invalid transactions or network issues
}
}
// Add click event listeners to the vote buttons
candidates.forEach(candidate => {
const candidateName = candidate.getAttribute('data-candidate');
const voteBtn = candidate.querySelector('.vote-btn');
voteBtn.addEventListener('click', () => {
vote(candidateName);
});
});
उपरोक्त कोड ब्लॉक आपके वेब इंटरफ़ेस से आपके स्मार्ट अनुबंध कार्यों के साथ बात करने के लिए Web3.js का उपयोग करता है। मूलतः आप सॉलिडिटी फ़ंक्शंस को कॉल करने के लिए जावास्क्रिप्ट फ़ंक्शंस का उपयोग कर रहे हैं मुख्य.जे.एस.
कोड में, बदलें 'अनुबंध_पता' वास्तविक तैनात अनुबंध पते के साथ। रीमिक्स आईडीई आपको तैनाती पर यह प्रदान करेगा।
यहाँ कोड में क्या हो रहा है:
- अपनी HTML संरचना के आधार पर DOM तत्वों के चयन को अपडेट करें। इस उदाहरण में, यह माना गया है कि प्रत्येक उम्मीदवार तत्व में एक है डेटा-उम्मीदवार वह विशेषता जो उम्मीदवार के नाम से मेल खाती हो।
- का एक उदाहरण वेब3 फिर इंजेक्टेड प्रदाता का उपयोग करके क्लास बनाई जाती है विंडो.एथेरियम वस्तु।
- मतदान अनुबंध वेरिएबल अनुबंध पते और एबीआई का उपयोग करके एक अनुबंध उदाहरण बनाता है।
- वोट फ़ंक्शन मतदान प्रक्रिया को संभालता है। यह कॉल करता है वोट स्मार्ट अनुबंध का उपयोग कर कार्य वोटिंगकंट्रैक्ट.मेथड्स.वोट (उम्मीदवार).भेजें()। यह उपयोगकर्ता के वोट को रिकॉर्ड करते हुए, अनुबंध पर लेनदेन भेजता है। वोटगणना वेरिएबल फिर कॉल करता है वोटगणना प्राप्त करें किसी विशिष्ट उम्मीदवार के लिए वर्तमान वोट गणना को पुनः प्राप्त करने के लिए स्मार्ट अनुबंध का कार्य। इसके बाद यह पुनर्प्राप्त वोटों से मिलान करने के लिए यूआई में वोटों की गिनती को अपडेट करेगा।
इसे शामिल करना याद रखें मुख्य.जे.एस का उपयोग करके अपनी HTML फ़ाइल में फ़ाइल करें टैग।
इसके अतिरिक्त, सुनिश्चित करें कि अनुबंध का पता और एबीआई सही है और आपके पास उचित है त्रुटि प्रबंधन जगह पर है।
DApps के निर्माण में जावास्क्रिप्ट की भूमिका
जावास्क्रिप्ट में विकेंद्रीकृत अनुप्रयोगों में उपयोग किए जाने वाले स्मार्ट अनुबंधों के साथ बातचीत करने की क्षमता है। यह Web3 दुनिया को Web2 ऐप्स के निर्माण में उपयोग की जाने वाली प्राथमिक प्रोग्रामिंग भाषा के साथ एक साथ लाता है, जो Web3 को अपनाने की सुविधा में मदद करता है। Web3.js के साथ, Web2 डेवलपर्स Web3 सोशल मीडिया प्लेटफॉर्म जैसे ऐप्स बनाने में बदलाव कर सकते हैं।
