DApp का मूल उदाहरण
एक सरल DApp बनाएँ जो परिनियोजित स्मार्ट कॉन्ट्रैक्ट से डेटा पढ़कर वेब पृष्ठ पर प्रदर्शित करे।
DApp का मूल उदाहरण, CoddyKit पर Web3 और DApp विकास की मूल बातें का एक निःशुल्क पाठ है। यह 3 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Web3 और DApp विकास की मूल बातें सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Web3 और DApp विकास की मूल बातें पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
अपना पहला डीऐप बनाना
अपने पहले विकेंद्रीकृत ऐप यानी डीऐप को बनाने के पाठ में आपका स्वागत है! इस पाठ में हम एक सरल डीऐप बनाएँगे, जो स्मार्ट कॉन्ट्रैक्ट में संग्रहीत संदेश को पढ़कर वेब पेज पर प्रदर्शित करेगा।
यह उदाहरण स्मार्ट कॉन्ट्रैक्ट और फ्रंट-एंड इंटरैक्शन से जुड़ी आपकी सीखी हुई अवधारणाओं को एक साथ जोड़ेगा।
Simple Message Contract
सबसे पहले, आइए स्मार्ट कॉन्ट्रैक्ट परिभाषित करें। यह कॉन्ट्रैक्ट बहुत सरल होगा: इसमें केवल एक स्ट्रिंग चर myMessage संग्रहीत होगा, जिसे हम सार्वजनिक बनाएँगे ताकि उसका मान कॉन्ट्रैक्ट के बाहर से आसानी से पढ़ा जा सके।
याद रखें, इस कॉन्ट्रैक्ट को एथेरियम जैसे ब्लॉकचेन पर कंपाइल और परिनियोजित किया जाएगा।
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract SimpleMessage {
string public myMessage = "Hello CoddyKit DApp!";
}Contract Address और ABI
जब हमारा SimpleMessage कॉन्ट्रैक्ट किसी ब्लॉकचेन पर परिनियोजित हो जाता है, तो हमें जानकारी के दो महत्वपूर्ण भाग मिलते हैं:
- Contract Address: यह ब्लॉकचेन पर कॉन्ट्रैक्ट के विशिष्ट सड़क-पते जैसा होता है।
- ABI (Application Binary Interface): यह कॉन्ट्रैक्ट के फ़ंक्शन और चरों का JSON विवरण होता है। यह हमारे फ्रंट-एंड को बताता है कि कॉन्ट्रैक्ट से कैसे संवाद करना है।
हम अपने वेब ऐप्लिकेशन में इनका उपयोग कनेक्ट करने और डेटा पढ़ने के लिए करेंगे।
फ्रंट-एंड HTML संरचना
हमारे डीऐप को संदेश प्रदर्शित करने के लिए एक बुनियादी वेब पेज की आवश्यकता है। हम एक index.html फ़ाइल बनाएँगे, जिसमें एक शीर्षक और एक अनुच्छेद होगा जहाँ हमारे कॉन्ट्रैक्ट का संदेश दिखाई देगा। हम अपनी JavaScript फ़ाइल (app.js) और Web3.js लाइब्रेरी को भी जोड़ेंगे।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CoddyKit DApp</title>
</head>
<body>
<h1>DApp Message Reader</h1>
<p>Message from contract: <span id="contractMessage">Loading...</span></p>
<script src="https://cdn.jsdelivr.net/npm/web3@1.7.0/dist/web3.min.js"></script>
<script src="app.js"></script>
</body>
</html>Web3.js से कनेक्ट करना
अब JavaScript (app.js) की बारी है! हमें अपने वेब पेज को एथेरियम ब्लॉकचेन से कनेक्ट करना है। Web3.js लाइब्रेरी इसमें हमारी सहायता करती है। यह उपयोगकर्ता के ब्राउज़र में MetaMask जैसे provider को खोजेगी।
// app.js
let web3;
async function initWeb3() {
if (window.ethereum) {
web3 = new Web3(window.ethereum);
try {
await window.ethereum.request({ method: 'eth_requestAccounts' });
console.log("Connected to MetaMask!");
} catch (error) {
console.error("User denied account access");
}
} else if (window.web3) {
web3 = new Web3(window.web3.currentProvider);
} else {
console.log('Non-Ethereum browser detected. Try MetaMask!');
// Fallback for read-only access (e.g., Infura)
// web3 = new Web3(new Web3.providers.HttpProvider("YOUR_INFURA_URL"));
}
}
Contract ऑब्जेक्ट बनाना
Web3.js को provider से कनेक्ट करने के बाद, अब हम एक JavaScript ऑब्जेक्ट बना सकते हैं, जो हमारे परिनियोजित SimpleMessage स्मार्ट कॉन्ट्रैक्ट का प्रतिनिधित्व करेगा। इसके लिए हम उसका contract address और ABI उपयोग करते हैं।
ABI Web3.js को बताता है कि कॉन्ट्रैक्ट पर कौन-कौन से फ़ंक्शन उपलब्ध हैं।
// app.js (continued)
const contractAddress = "0xYourDeployedContractAddressHere"; // REPLACE THIS!
const contractABI = [
{
"inputs": [],
"name": "myMessage",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
}
];
let simpleMessageContract;
async function loadContract() {
if (!web3) await initWeb3();
simpleMessageContract = new web3.eth.Contract(contractABI, contractAddress);
console.log("Contract loaded:", simpleMessageContract);
}Contract डेटा पढ़ना
अब जब हमारे पास कॉन्ट्रैक्ट ऑब्जेक्ट है, तो myMessage चर को पढ़ना सरल है। चूँकि myMessage एक public view चर है, इसलिए हम लेन-देन भेजे बिना सीधे इसके अपने-आप बने getter फ़ंक्शन को कॉल कर सकते हैं। इसका अर्थ है कि गैस की कोई लागत नहीं होगी।
// app.js (continued)
async function readMessage() {
if (!simpleMessageContract) await loadContract();
try {
// Call the auto-generated getter for 'myMessage'
const message = await simpleMessageContract.methods.myMessage().call();
console.log("Message from contract:", message);
return message;
} catch (error) {
console.error("Error reading message:", error);
return "Error loading message.";
}
}पूर्ण डीऐप JavaScript (app.js)
यहाँ पूरी app.js फ़ाइल दी गई है, जो सभी चीज़ों को एक साथ जोड़ती है। यह ब्लॉकचेन से कनेक्ट होती है, कॉन्ट्रैक्ट लोड करती है, संदेश पढ़ती है और पेज लोड होने पर उसे प्रदर्शित करने के लिए HTML अपडेट करती है।
याद रखें कि 0xYourDeployedContractAddressHere को अपने वास्तविक परिनियोजित कॉन्ट्रैक्ट पते से बदलना है!
// app.js
let web3; // Declare web3 globally
const contractAddress = "0xYourDeployedContractAddressHere"; // REPLACE THIS!
const contractABI = [
{
"inputs": [],
"name": "myMessage",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
}
];
let simpleMessageContract;
async function initWeb3() {
if (window.ethereum) { web3 = new Web3(window.ethereum); await window.ethereum.request({ method: 'eth_requestAccounts' }); }
else if (window.web3) { web3 = new Web3(window.web3.currentProvider); }
else { console.log('Non-Ethereum browser detected. Try MetaMask!'); }
}
async function loadContract() {
if (!web3) await initWeb3();
simpleMessageContract = new web3.eth.Contract(contractABI, contractAddress);
}
async function readMessage() {
if (!simpleMessageContract) await loadContract();
try {
const message = await simpleMessageContract.methods.myMessage().call();
return message;
} catch (error) {
console.error("Error reading message:", error);
return "Error loading message.";
}
}
document.addEventListener('DOMContentLoaded', async () => {
const messageElement = document.getElementById('contractMessage');
await initWeb3();
await loadContract();
const msg = await readMessage();
messageElement.innerText = msg;
});डीऐप इंटरैक्शन जाँच
किसी परिनियोजित स्मार्ट कॉन्ट्रैक्ट के साथ इंटरैक्ट करने के लिए फ्रंट-एंड डीऐप को निम्नलिखित में से किन आवश्यक जानकारी के भागों की आवश्यकता होती है?
पुनरावलोकन: आपका पहला डीऐप
बधाई हो! आपने अभी एक बुनियादी डीऐप बनाने की प्रक्रिया पूरी की है।
- हमने एक सरल Solidity स्मार्ट कॉन्ट्रैक्ट परिभाषित किया।
- हमने कॉन्ट्रैक्ट के पते और ABI के महत्व के बारे में सीखा।
- हमने एक HTML पेज बनाया और ब्लॉकचेन से कनेक्ट करने के लिए Web3.js का उपयोग किया।
- अंत में, हमने अपना कॉन्ट्रैक्ट ऑब्जेक्ट बनाया, उससे डेटा पढ़ा और उसे अपने वेब पेज पर प्रदर्शित किया।
कनेक्ट करने, इंटरैक्ट करने और प्रदर्शित करने का यह मूल पैटर्न अधिकांश डीऐप की आधारशिला है!
एआई शिक्षक के साथ Web3 और DApp विकास की मूल बातें सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 29
- पाठ
- 105
अक्सर पूछे जाने वाले प्रश्न
क्या “DApp का मूल उदाहरण” पाठ निःशुल्क है?
हाँ — Web3 और DApp विकास की मूल बातें अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “DApp का मूल उदाहरण” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Web3 और DApp विकास की मूल बातें पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
“DApp का मूल उदाहरण” में मैं क्या सीखूँगा?
एक सरल DApp बनाएँ जो परिनियोजित स्मार्ट कॉन्ट्रैक्ट से डेटा पढ़कर वेब पृष्ठ पर प्रदर्शित करे। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Web3 और DApp विकास की मूल बातें का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Web3 और DApp विकास की मूल बातें शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Web3 और DApp विकास की मूल बातें शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 3वाँ पाठ है।
“DApp का मूल उदाहरण” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Web3 और DApp विकास की मूल बातें पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Web3 और DApp विकास की मूल बातें पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Web3 में फ्रंट-एंड और बैक-एंड
- Ethereum से कनेक्ट करना (Web3.js/Ethers.js)
- DApp का मूल उदाहरण