मुख्य सामग्री पर जाएँ

एनएफटी मिन्टर ट्यूटोरियल

Solidity
NFT
Alchemy
स्मार्ट अनुबंध
frontend
Pinata
माध्यमिक
smudgil
6 अक्टूबर 2021
33 मिनट का पठन

Web2 बैकग्राउंड से आने वाले डेवलपर्स के लिए सबसे बड़ी चुनौतियों में से एक यह पता लगाना है कि अपने स्मार्ट अनुबंध को फ्रंटएंड प्रोजेक्ट से कैसे जोड़ा जाए और उसके साथ कैसे इंटरैक्ट किया जाए।

एक एनएफटी मिन्टर बनाकर — एक सरल UI जहाँ आप अपनी डिजिटल संपत्ति, एक शीर्षक और एक विवरण के लिए एक लिंक इनपुट कर सकते हैं — आप सीखेंगे कि:

  • अपने फ्रंटएंड प्रोजेक्ट के माध्यम से मेटामास्क से कनेक्ट करें
  • अपने फ्रंटएंड से स्मार्ट अनुबंध विधियों को कॉल करें
  • मेटामास्क का उपयोग करके लेनदेन पर हस्ताक्षर करें

इस ट्यूटोरियल में, हम अपने फ्रंटएंड फ्रेमवर्क के रूप में रिएक्ट (opens in a new tab) का उपयोग करेंगे। क्योंकि यह ट्यूटोरियल मुख्य रूप से वेब3 विकास पर केंद्रित है, हम रिएक्ट की बुनियादी बातों को समझने में ज्यादा समय नहीं बिताएँगे। इसके बजाय, हम अपने प्रोजेक्ट में कार्यक्षमता लाने पर ध्यान केंद्रित करेंगे।

एक पूर्वापेक्षा के रूप में, आपको रिएक्ट की शुरुआती स्तर की समझ होनी चाहिए—पता होना चाहिए कि कंपोनेंट्स, प्रॉप्स, useState/useEffect, और बेसिक फंक्शन कॉलिंग कैसे काम करते हैं। यदि आपने पहले इनमें से किसी भी शब्द के बारे में नहीं सुना है, तो आप इस रिएक्ट ट्यूटोरियल का परिचय (opens in a new tab) देख सकते हैं। अधिक विज़ुअल शिक्षार्थियों के लिए, हम नेट निंजा द्वारा इस उत्कृष्ट पूर्ण आधुनिक रिएक्ट ट्यूटोरियल (opens in a new tab) वीडियो श्रृंखला की अत्यधिक अनुशंसा करते हैं।

और अगर आपके पास पहले से नहीं है, तो आपको इस ट्यूटोरियल को पूरा करने और ब्लॉकचेन पर कुछ भी बनाने के लिए निश्चित रूप से एक अल्केमी खाते की आवश्यकता होगी। यहां (opens in a new tab) एक निःशुल्क खाते के लिए साइन अप करें।

बिना किसी और देरी के, चलिए शुरू करते हैं!

एनएफटीज़ बनाना 101

इससे पहले कि हम किसी भी कोड को देखना शुरू करें, यह समझना महत्वपूर्ण है कि एनएफटी बनाना कैसे काम करता है। इसमें दो चरण शामिल हैं:

एथेरियम ब्लॉकचेन पर एक एनएफटी स्मार्ट अनुबंध प्रकाशित करें

दो एनएफटी स्मार्ट अनुबंध मानकों के बीच सबसे बड़ा अंतर यह है कि ERC-1155 एक मल्टी-टोकन मानक है और इसमें बैच कार्यक्षमता शामिल है, जबकि ERC-721 एक एकल-टोकन मानक है और इसलिए एक समय में केवल एक टोकन स्थानांतरित करने का समर्थन करता है।

मिन्टिंग फ़ंक्शन को कॉल करें

आमतौर पर, इस मिन्टिंग फ़ंक्शन में आपको पैरामीटर के रूप में दो चर पास करने की आवश्यकता होती है, पहला recipient, जो उस पते को निर्दिष्ट करता है जिसे आपका ताज़ा बनाया गया एनएफटी प्राप्त होगा, और दूसरा एनएफटी का tokenURI, एक स्ट्रिंग जो एनएफटी के मेटाडेटा का वर्णन करने वाले JSON दस्तावेज़ में हल होती है।

एक एनएफटी का मेटाडेटा वास्तव में वही है जो इसे जीवंत करता है, जिससे इसमें नाम, विवरण, छवि (या अलग डिजिटल संपत्ति), और अन्य विशेषताओं जैसे गुण होते हैं। यहाँ tokenURI का एक उदाहरण (opens in a new tab) है, जिसमें एनएफटी का मेटाडेटा है।

इस ट्यूटोरियल में, हम भाग 2 पर ध्यान केंद्रित करने जा रहे हैं, हमारे रिएक्ट UI का उपयोग करके मौजूदा एनएफटी के स्मार्ट अनुबंध मिन्टिंग फ़ंक्शन को कॉल करना।

इस ट्यूटोरियल में हम जिस ERC-721 एनएफटी स्मार्ट अनुबंध को कॉल करेंगे, उसका लिंक यहाँ है (opens in a new tab)। यदि आप यह जानना चाहते हैं कि हमने इसे कैसे बनाया, तो हम आपको हमारे दूसरे ट्यूटोरियल, "एक एनएफटी कैसे बनाएँ" (opens in a new tab) को देखने की अत्यधिक अनुशंसा करते हैं।

बढ़िया, अब जब हम समझ गए हैं कि एनएफटी बनाना कैसे काम करता है, तो चलिए अपनी स्टार्टर फ़ाइलों को क्लोन करते हैं!

स्टार्टर फ़ाइलों को क्लोन करें

सबसे पहले, इस प्रोजेक्ट के लिए स्टार्टर फाइलें प्राप्त करने के लिए nft-minter-tutorial गिटहब रिपॉजिटरी (opens in a new tab) पर जाएं। इस रिपॉजिटरी को अपने स्थानीय परिवेश में क्लोन करें।

जब आप इस क्लोन की गई nft-minter-tutorial रिपॉजिटरी को खोलते हैं, तो आप देखेंगे कि इसमें दो फोल्डर हैं: minter-starter-files और nft-minter।

  • minter-starter-files में इस प्रोजेक्ट के लिए स्टार्टर फाइलें (अनिवार्य रूप से रिएक्ट UI) होती हैं। इस ट्यूटोरियल में, हम इस डायरेक्टरी में काम करेंगे, क्योंकि आप इसे अपने एथेरियम वॉलेट और एक एनएफटी स्मार्ट अनुबंध से जोड़कर इस UI को जीवंत करना सीखेंगे।
  • nft-minter में पूरा पूरा किया गया ट्यूटोरियल है और यह आपके लिए संदर्भ के रूप में है यदि आप फंस जाते हैं।

अगला, अपने कोड एडिटर में minter-starter-files की अपनी प्रतिलिपि खोलें, और फिर अपने src फ़ोल्डर में नेविगेट करें।

हम जो भी कोड लिखेंगे वह src फोल्डर के अंतर्गत रहेगा। हम Minter.js घटक का संपादन करेंगे और अपने प्रोजेक्ट को वेब3 कार्यक्षमता देने के लिए अतिरिक्त जावास्क्रिप्ट फाइलें लिखेंगे।

चरण 2: हमारी स्टार्टर फाइलों को देखें

कोडिंग शुरू करने से पहले, यह जांचना महत्वपूर्ण है कि स्टार्टर फ़ाइलों में हमारे लिए पहले से क्या प्रदान किया गया है।

अपना react प्रोजेक्ट चलाएँ

आइए अपने ब्राउज़र में रिएक्ट प्रोजेक्ट चलाकर शुरू करें। रिएक्ट की खूबी यह है कि एक बार जब हमारा प्रोजेक्ट हमारे ब्राउज़र में चल रहा होता है, तो हमारे द्वारा सहेजे गए कोई भी परिवर्तन हमारे ब्राउज़र में लाइव अपडेट हो जाएँगे।

प्रोजेक्ट को चलाने के लिए, minter-starter-files फ़ोल्डर की रूट डायरेक्टरी में नेविगेट करें, और प्रोजेक्ट की निर्भरताएँ स्थापित करने के लिए अपने टर्मिनल में npm install चलाएँ:

cd minter-starter-files
npm install

एक बार वे स्थापित हो जाने के बाद, अपने टर्मिनल में npm start चलाएँ:

npm start

ऐसा करने से आपके ब्राउज़र में http://localhost:3000/ (opens in a new tab) खुल जाना चाहिए, जहाँ आप हमारे प्रोजेक्ट के लिए फ्रंटएंड देखेंगे। इसमें 3 फ़ील्ड होने चाहिए: आपके एनएफटी की संपत्ति के लिए एक लिंक इनपुट करने की जगह, आपके एनएफटी का नाम दर्ज करें, और एक विवरण प्रदान करें।

यदि आप "वॉलेट कनेक्ट करें" या "एनएफटी मिंट करें" बटन पर क्लिक करने का प्रयास करते हैं, तो आप देखेंगे कि वे काम नहीं करते हैं—ऐसा इसलिए है क्योंकि हमें अभी भी उनकी कार्यक्षमता को प्रोग्राम करने की आवश्यकता है! :)

Minter.js घटक

ध्यान दें: सुनिश्चित करें कि आप minter-starter-files फ़ोल्डर में हैं न कि nft-minter फ़ोल्डर में!

चलिए हमारे संपादक में src फ़ोल्डर में वापस जाते हैं और Minter.js फ़ाइल खोलते हैं। यह बहुत महत्वपूर्ण है कि हम इस फ़ाइल में सब कुछ समझें, क्योंकि यह प्राथमिक रिएक्ट घटक है जिस पर हम काम करेंगे।

इस फ़ाइल के शीर्ष पर, हमारे पास हमारे स्थिति चर हैं जिन्हें हम विशिष्ट घटनाओं के बाद अपडेट करेंगे।

1//स्थिति चर
2const [walletAddress, setWallet] = useState("")
3const [status, setStatus] = useState("")
4const [name, setName] = useState("")
5const [description, setDescription] = useState("")
6const [url, setURL] = useState("")

रिएक्ट स्थिति चर या स्थिति हुक के बारे में कभी नहीं सुना? इन (opens in a new tab) दस्तावेज़ों को देखें।

यहाँ प्रत्येक चर का प्रतिनिधित्व है:

  • walletAddress - एक स्ट्रिंग जो यूज़र के वॉलेट पते को संग्रहीत करती है
  • status - एक स्ट्रिंग जिसमें UI के नीचे प्रदर्शित करने के लिए एक संदेश होता है
  • name - एक स्ट्रिंग जो एनएफटी के नाम को संग्रहीत करती है
  • description - एक स्ट्रिंग जो एनएफटी के विवरण को संग्रहीत करती है
  • url - एक स्ट्रिंग जो एनएफटी की डिजिटल संपत्ति का एक लिंक है

स्थिति चर के बाद, आप तीन गैर-कार्यान्वित फ़ंक्शन देखेंगे: useEffect, connectWalletPressed, और onMintPressed। आप देखेंगे कि ये सभी फ़ंक्शन async हैं, ऐसा इसलिए है क्योंकि हम उनमें एसिंक्रोनस API कॉल करेंगे! उनके नाम उनकी कार्यात्मकताओं के साथ समानार्थक हैं:

1useEffect(async () => {
2  //TODO: लागू करें
3}, [])
4
5const connectWalletPressed = async () => {
6  //TODO: लागू करें
7}
8
9const onMintPressed = async () => {
10  //TODO: लागू करें
11}
सभी दिखाएँ
  • useEffect (opens in a new tab) - यह एक रिएक्ट हुक है जिसे आपका घटक रेंडर होने के बाद कॉल किया जाता है। क्योंकि इसमें एक खाली ऐरे [] प्रोप पास किया गया है (लाइन 3 देखें), इसे केवल घटक के पहले रेंडर पर कॉल किया जाएगा। यहां हम अपने वॉलेट श्रोता और एक अन्य वॉलेट फ़ंक्शन को अपने UI को अपडेट करने के लिए कॉल करेंगे ताकि यह प्रतिबिंबित हो सके कि वॉलेट पहले से जुड़ा हुआ है या नहीं।
  • connectWalletPressed - इस फ़ंक्शन को यूज़र के मेटामास्क वॉलेट को हमारे डैप से जोड़ने के लिए कॉल किया जाएगा।
  • onMintPressed - यह फ़ंक्शन यूज़र के एनएफटी को मिंट करने के लिए कॉल किया जाएगा।

इस फ़ाइल के अंत के पास, हमारे पास हमारे घटक का UI है। यदि आप इस कोड को ध्यान से स्कैन करते हैं, तो आप देखेंगे कि जब उनके संबंधित टेक्स्ट फ़ील्ड में इनपुट बदलता है तो हम अपने url, name, और description स्थिति चर को अपडेट करते हैं।

आप यह भी देखेंगे कि connectWalletPressed और onMintPressed को क्रमशः mintButton और walletButton ID वाले बटन पर क्लिक किए जाने पर कॉल किया जाता है।

1//हमारे घटक का UI
2return (
3  <div className="Minter">
4    <button id="walletButton" onClick={connectWalletPressed}>
5      {walletAddress.length > 0 ? (
6        "जुड़ा हुआ: " +
7        String(walletAddress).substring(0, 6) +
8        "..." +
9        String(walletAddress).substring(38)
10      ) : (
11        <span>वॉलेट कनेक्ट करें</span>
12      )}
13    </button>
14
15    <br></br>
16    <h1 id="title">🧙‍♂️ Alchemy NFT मिन्टर</h1>
17    <p>
18      बस अपनी संपत्ति का लिंक, नाम और विवरण जोड़ें, फिर \"मिंट\" दबाएँ।
19    </p>
20    <form>
21      <h2>🖼 संपत्ति का लिंक: </h2>
22      <input
23        type="text"
24        placeholder="उदा., https://gateway.pinata.cloud/ipfs/<hash>"
25        onChange={(event) => setURL(event.target.value)}
26      />
27      <h2>🤔 नाम: </h2>
28      <input
29        type="text"
30        placeholder="उदा., मेरा पहला NFT!"
31        onChange={(event) => setName(event.target.value)}
32      />
33      <h2>✍️ विवरण: </h2>
34      <input
35        type="text"
36        placeholder="उदा., क्रिप्टोकिटीज़ से भी ज़्यादा कूल ;)"
37        onChange={(event) => setDescription(event.target.value)}
38      />
39    </form>
40    <button id="mintButton" onClick={onMintPressed}>
41      NFT मिंट करें
42    </button>
43    <p id="status">{status}</p>
44</div>
45)
सभी दिखाएँ

अंत में, चलिए देखते हैं कि यह मिन्टर घटक कहाँ जोड़ा गया है।

यदि आप App.js फ़ाइल पर जाते हैं, जो रिएक्ट में मुख्य घटक है जो अन्य सभी घटकों के लिए एक कंटेनर के रूप में कार्य करता है, तो आप देखेंगे कि हमारा मिन्टर घटक लाइन 7 पर इंजेक्ट किया गया है।

इस ट्यूटोरियल में, हम केवल Minter.js फ़ाइल का संपादन करेंगे और हमारी src फ़ोल्डर में फ़ाइलें जोड़ेंगे।

अब जब हम समझ गए हैं कि हम किसके साथ काम कर रहे हैं, तो चलिए अपना एथेरियम वॉलेट सेट अप करें!

अपना एथेरियम वॉलेट सेट अप करें

यूज़र्स को आपके स्मार्ट अनुबंध के साथ इंटरैक्ट करने में सक्षम होने के लिए, उन्हें अपने एथेरियम वॉलेट को आपके डैप से कनेक्ट करने की आवश्यकता होगी।

मेटामास्क डाउनलोड करें

इस ट्यूटोरियल के लिए, हम मेटामास्क का उपयोग करेंगे, जो ब्राउज़र में एक वर्चुअल वॉलेट है जिसका उपयोग आपके एथेरियम खाते के पते को प्रबंधित करने के लिए किया जाता है। यदि आप एथेरियम पर लेनदेन कैसे काम करते हैं, इसके बारे में और समझना चाहते हैं, तो इस पृष्ठ को देखें।

आप यहां (opens in a new tab) मुफ्त में मेटामास्क खाता डाउनलोड और बना सकते हैं। जब आप एक खाता बना रहे हों, या यदि आपके पास पहले से ही एक खाता है, तो ऊपरी दाएँ कोने में “रोपस्टेन टेस्ट नेटवर्क” पर स्विच करना सुनिश्चित करें (ताकि हम वास्तविक धन के साथ काम न करें)।

एक फोसेट से ईथर जोड़ें

हमारे एनएफटीज़ को मिंट करने के लिए (या एथेरियम ब्लॉकचेन पर किसी भी लेनदेन पर हस्ताक्षर करने के लिए), हमें कुछ नकली Eth की आवश्यकता होगी। Eth प्राप्त करने के लिए आप रोपस्टेन फोसेट (opens in a new tab) पर जा सकते हैं और अपना रोपस्टेन खाता पता दर्ज कर सकते हैं, फिर “Send रोपस्टेन Eth” पर क्लिक करें। आपको जल्द ही अपने मेटामास्क खाते में Eth दिखना चाहिए!

अपना बैलेंस जांचें

यह सुनिश्चित करने के लिए कि हमारा बैलेंस वहाँ है, चलिए अल्केमी के कंपोजर टूल (opens in a new tab) का उपयोग करके एक eth_getBalance (opens in a new tab) अनुरोध करें। यह हमारे वॉलेट में Eth की मात्रा लौटाएगा। जब आप अपना मेटामास्क खाता पता इनपुट करते हैं और "Send Request" पर क्लिक करते हैं, तो आपको इस तरह का एक जवाब देखना चाहिए:

1{\"jsonrpc\": \"2.0\", \"id\": 0, \"result\": \"0xde0b6b3a7640000\"}

ध्यान दें: यह परिणाम eth में नहीं, wei में है। Wei का उपयोग ईथर के सबसे छोटे मूल्यवर्ग के रूप में किया जाता है। wei से eth में रूपांतरण है: 1 eth = 10¹⁸ wei। तो अगर हम 0xde0b6b3a7640000 को दशमलव में बदलते हैं तो हमें 1*10¹⁸ मिलता है जो 1 eth के बराबर है।

उफ्फ! हमारा नकली पैसा सब वहाँ है!

मेटामास्क को अपने UI से कनेक्ट करें

अब जब हमारा मेटामास्क वॉलेट सेट हो गया है, तो चलिए अपने डैप को इससे कनेक्ट करते हैं!

क्योंकि हम MVC (opens in a new tab) प्रतिमान का पालन करना चाहते हैं, हम एक अलग फ़ाइल बनाने जा रहे हैं जिसमें हमारे डैप के तर्क, डेटा और नियमों को प्रबंधित करने के लिए हमारे फ़ंक्शन शामिल हैं, और फिर उन फ़ंक्शन को हमारे फ्रंटएंड (हमारे Minter.js घटक) को पास करें।

connectWallet फ़ंक्शन

ऐसा करने के लिए, चलिए अपनी src डायरेक्टरी में utils नामक एक नया फोल्डर बनाते हैं और इसके अंदर interact.js नामक एक फाइल जोड़ते हैं, जिसमें हमारे सभी वॉलेट और स्मार्ट अनुबंध इंटरैक्शन फ़ंक्शन होंगे।

हमारी interact.js फ़ाइल में, हम एक connectWallet फ़ंक्शन लिखेंगे, जिसे हम तब अपने Minter.js घटक में आयात और कॉल करेंगे।

अपनी interact.js फ़ाइल में, निम्नलिखित जोड़ें

1export const connectWallet = async () => {
2  if (window.ethereum) {
3    try {
4      const addressArray = await window.ethereum.request({
5        method: "eth_requestAccounts",
6      })
7      const obj = {
8        status: "👆🏽 ऊपर टेक्स्ट-फील्ड में एक संदेश लिखें।",
9        address: addressArray[0],
10      }
11      return obj
12    } catch (err) {
13      return {
14        address: "",
15        status: "😥 " + err.message,
16      }
17    }
18  } else {
19    return {
20      address: "",
21      status: (
22        <span>
23          <p>
24            {" "}
25            🦊 <a target="_blank" href={`https://metamask.io/download`}>
26              आपको अपने ब्राउज़र में MetaMask, एक वर्चुअल एथेरियम वॉलेट, इंस्टॉल करना होगा।
27            </a>
28          </p>
29        </span>
30      ),
31    }
32  }
33}
सभी दिखाएँ

चलिए देखते हैं कि यह कोड क्या करता है:

सबसे पहले, हमारा फ़ंक्शन जांचता है कि आपके ब्राउज़र में window.ethereum सक्षम है या नहीं।

window.ethereum मेटामास्क और अन्य वॉलेट प्रदाताओं द्वारा इंजेक्ट किया गया एक वैश्विक API है जो वेबसाइटों को यूज़र्स के एथेरियम खातों का अनुरोध करने की अनुमति देता है। यदि अनुमोदित हो, तो यह उन ब्लॉकचेन से डेटा पढ़ सकता है जिनसे यूज़र जुड़ा हुआ है, और यूज़र को संदेशों और लेनदेन पर हस्ताक्षर करने का सुझाव दे सकता है। अधिक जानकारी के लिए मेटामास्क दस्तावेज़ (opens in a new tab) देखें!

यदि window.ethereum मौजूद नहीं है, तो इसका मतलब है कि मेटामास्क इंस्टॉल नहीं है। इसके परिणामस्वरूप एक JSON ऑब्जेक्ट वापस कर दिया जाता है, जहाँ लौटाया गया address एक खाली स्ट्रिंग है, और status JSX ऑब्जेक्ट यह बताता है कि यूज़र को मेटामास्क इंस्टॉल करना होगा।

हमारे द्वारा लिखे गए अधिकांश फ़ंक्शन JSON ऑब्जेक्ट लौटा रहे होंगे जिनका उपयोग हम अपने स्थिति चर और UI को अपडेट करने के लिए कर सकते हैं।

अब यदि window.ethereum मौजूद है, तो चीजें दिलचस्प हो जाती हैं।

एक try/catch लूप का उपयोग करके, हम window.ethereum.request({ method: \"eth_requestAccounts\" }); (opens in a new tab) को कॉल करके मेटामास्क से कनेक्ट करने का प्रयास करेंगे। इस फ़ंक्शन को कॉल करने से ब्राउज़र में मेटामास्क खुल जाएगा, जिससे यूज़र को अपने वॉलेट को आपके डैप से कनेक्ट करने के लिए प्रेरित किया जाएगा।

  • यदि यूज़र कनेक्ट करना चुनता है, तो method: \"eth_requestAccounts\" एक ऐरे लौटाएगा जिसमें यूज़र के सभी खाता पते शामिल होंगे जो डैप से जुड़े हैं। कुल मिलाकर, हमारा connectWallet फ़ंक्शन एक JSON ऑब्जेक्ट लौटाएगा जिसमें इस ऐरे में पहला पता (पंक्ति 9 देखें) और एक स्थिति संदेश होगा जो यूज़र को स्मार्ट अनुबंध को एक संदेश लिखने के लिए प्रेरित करता है।
  • यदि यूज़र कनेक्शन को अस्वीकार कर देता है, तो JSON ऑब्जेक्ट में लौटाए गए पते के लिए एक खाली स्ट्रिंग और एक स्थिति संदेश होगा जो यह दर्शाता है कि यूज़र ने कनेक्शन को अस्वीकार कर दिया है।

अपने Minter.js UI घटक में connectWallet फ़ंक्शन जोड़ें

अब जब हमने यह connectWallet फ़ंक्शन लिख लिया है, तो चलिए इसे अपने Minter.js. घटक से कनेक्ट करते हैं।

सबसे पहले, हमें अपने फ़ंक्शन को अपनी Minter.js फ़ाइल में import { connectWallet } from "./utils/interact.js"; को Minter.js फ़ाइल के शीर्ष पर जोड़कर आयात करना होगा। आपकी Minter.js की पहली 11 पंक्तियाँ अब इस तरह दिखनी चाहिए:

1import { useEffect, useState } from "react";
2import { connectWallet } from "./utils/interact.js";
3
4const Minter = (props) => {
5
6  //स्थिति चर
7  const [walletAddress, setWallet] = useState("");
8  const [status, setStatus] = useState("");
9  const [name, setName] = useState("");
10  const [description, setDescription] = useState("");
11  const [url, setURL] = useState("");
सभी दिखाएँ

फिर, हमारे connectWalletPressed फ़ंक्शन के अंदर, हम अपने आयातित connectWallet फ़ंक्शन को कॉल करेंगे, जैसे:

1const connectWalletPressed = async () => {
2  const walletResponse = await connectWallet()
3  setStatus(walletResponse.status)
4  setWallet(walletResponse.address)
5}

ध्यान दें कि हमारी अधिकांश कार्यक्षमता interact.js फ़ाइल से हमारे Minter.js घटक से कैसे अमूर्त है? यह इसलिए है ताकि हम M-V-C प्रतिमान का अनुपालन करें!

connectWalletPressed में, हम बस अपने आयातित connectWallet फ़ंक्शन को एक await कॉल करते हैं, और इसकी प्रतिक्रिया का उपयोग करके, हम अपने status और walletAddress चर को उनके स्थिति हुक के माध्यम से अपडेट करते हैं।

अब, चलिए दोनों फाइलों Minter.js और interact.js को सहेजते हैं और अब तक हमारे UI का परीक्षण करते हैं।

localhost:3000 पर अपना ब्राउज़र खोलें, और पृष्ठ के ऊपरी दाएँ कोने में "वॉलेट कनेक्ट करें" बटन दबाएँ।

यदि आपने मेटामास्क इंस्टॉल किया है, तो आपको अपने वॉलेट को अपने डैप से कनेक्ट करने के लिए प्रेरित किया जाना चाहिए। कनेक्ट करने के लिए निमंत्रण स्वीकार करें।

आपको देखना चाहिए कि वॉलेट बटन अब यह दर्शाता है कि आपका पता जुड़ा हुआ है।

अगला, पृष्ठ को रीफ्रेश करने का प्रयास करें... यह अजीब है। हमारा वॉलेट बटन हमें मेटामास्क से कनेक्ट करने के लिए कह रहा है, भले ही यह पहले से ही जुड़ा हुआ है...

चिंता न करें! हम इसे आसानी से getCurrentWalletConnected नामक एक फ़ंक्शन लागू करके ठीक कर सकते हैं, जो यह जांचेगा कि क्या कोई पता पहले से ही हमारे डैप से जुड़ा हुआ है और तदनुसार हमारे UI को अपडेट करेगा!

getCurrentWalletConnected फ़ंक्शन

अपनी interact.js फ़ाइल में, निम्नलिखित getCurrentWalletConnected फ़ंक्शन जोड़ें:

1export const getCurrentWalletConnected = async () => {
2  if (window.ethereum) {
3    try {
4      const addressArray = await window.ethereum.request({
5        method: "eth_accounts",
6      })
7      if (addressArray.length > 0) {
8        return {
9          address: addressArray[0],
10          status: "👆🏽 ऊपर टेक्स्ट-फील्ड में एक संदेश लिखें।",
11        }
12      } else {
13        return {
14          address: "",
15          status: "🦊 ऊपरी दाएँ बटन का उपयोग करके MetaMask से कनेक्ट करें।",
16        }
17      }
18    } catch (err) {
19      return {
20        address: "",
21        status: "😥 " + err.message,
22      }
23    }
24  } else {
25    return {
26      address: "",
27      status: (
28        <span>
29          <p>
30            {" "}
31            🦊 <a target="_blank" href={`https://metamask.io/download`}>
32              आपको अपने ब्राउज़र में MetaMask, एक वर्चुअल एथेरियम वॉलेट, इंस्टॉल करना होगा।
33            </a>
34          </p>
35        </span>
36      ),
37    }
38  }
39}
सभी दिखाएँ

यह कोड उस connectWallet फ़ंक्शन के बहुत समान है जिसे हमने अभी-अभी लिखा है।

मुख्य अंतर यह है कि eth_requestAccounts विधि को कॉल करने के बजाय, जो यूज़र को अपने वॉलेट को कनेक्ट करने के लिए मेटामास्क खोलता है, यहाँ हम eth_accounts विधि को कॉल करते हैं, जो बस एक ऐरे लौटाता है जिसमें वर्तमान में हमारे डैप से जुड़े मेटामास्क पते होते हैं।

इस फ़ंक्शन को क्रिया में देखने के लिए, चलिए इसे अपने Minter.js घटक के useEffect फ़ंक्शन में कॉल करते हैं।

जैसे हमने connectWallet के लिए किया था, हमें इस फ़ंक्शन को अपनी interact.js फ़ाइल से अपनी Minter.js फ़ाइल में आयात करना होगा:

1import { useEffect, useState } from "react"
2import {
3  connectWallet,
4  getCurrentWalletConnected, //यहां आयात करें
5} from "./utils/interact.js"

अब, हम इसे बस अपने useEffect फ़ंक्शन में कॉल करते हैं:

1useEffect(async () => {
2  const { address, status } = await getCurrentWalletConnected()
3  setWallet(address)
4  setStatus(status)
5}, [])

ध्यान दें, हम अपने walletAddress और status स्थिति चर को अपडेट करने के लिए getCurrentWalletConnected पर हमारी कॉल की प्रतिक्रिया का उपयोग करते हैं।

एक बार जब आप यह कोड जोड़ लेते हैं, तो हमारी ब्राउज़र विंडो को रीफ्रेश करने का प्रयास करें। बटन को कहना चाहिए कि आप जुड़े हुए हैं, और अपने जुड़े हुए वॉलेट के पते का पूर्वावलोकन दिखाएं - भले ही आप रीफ्रेश करें!

addWalletListener लागू करें

हमारे डैप वॉलेट सेटअप में अंतिम चरण वॉलेट श्रोता को लागू करना है ताकि हमारा UI तब अपडेट हो जब हमारे वॉलेट की स्थिति बदल जाए, जैसे कि जब यूज़र डिस्कनेक्ट हो जाता है या खाते बदलता है।

अपनी Minter.js फ़ाइल में, एक फ़ंक्शन addWalletListener जोड़ें जो निम्न जैसा दिखता है:

1function addWalletListener() {
2  if (window.ethereum) {
3    window.ethereum.on("accountsChanged", (accounts) => {
4      if (accounts.length > 0) {
5        setWallet(accounts[0])
6        setStatus("👆🏽 ऊपर टेक्स्ट-फील्ड में एक संदेश लिखें।")
7      } else {
8        setWallet("")
9        setStatus("🦊 ऊपरी दाएँ बटन का उपयोग करके MetaMask से कनेक्ट करें।")
10      }
11    })
12  } else {
13    setStatus(
14      <p>
15        {" "}
16        🦊 <a target="_blank" href={`https://metamask.io/download`}>
17          आपको अपने ब्राउज़र में MetaMask, एक वर्चुअल एथेरियम वॉलेट, इंस्टॉल करना होगा।
18        </a>
19      </p>
20    )
21  }
22}
सभी दिखाएँ

आइए जल्दी से देखें कि यहाँ क्या हो रहा है:

  • सबसे पहले, हमारा फ़ंक्शन जांचता है कि क्या window.ethereum सक्षम है (यानी, मेटामास्क इंस्टॉल है)।
    • यदि यह नहीं है, तो हम बस अपने status स्थिति चर को एक JSX स्ट्रिंग पर सेट करते हैं जो यूज़र को मेटामास्क इंस्टॉल करने के लिए प्रेरित करता है।
    • यदि यह सक्षम है, तो हम श्रोता window.ethereum.on("accountsChanged") को लाइन 3 पर सेट करते हैं जो मेटामास्क वॉलेट में स्थिति परिवर्तनों को सुनता है, जिसमें जब यूज़र डैप में एक अतिरिक्त खाता जोड़ता है, खाते बदलता है, या एक खाता डिस्कनेक्ट करता है। यदि कम से कम एक खाता जुड़ा हुआ है, तो walletAddress स्थिति चर को श्रोता द्वारा लौटाए गए accounts ऐरे में पहले खाते के रूप में अपडेट किया जाता है। अन्यथा, walletAddress को एक खाली स्ट्रिंग के रूप में सेट किया जाता है।

अंत में, हमें इसे अपने useEffect फ़ंक्शन में कॉल करना होगा:

1useEffect(async () => {
2  const { address, status } = await getCurrentWalletConnected()
3  setWallet(address)
4  setStatus(status)
5
6  addWalletListener()
7}, [])

और वोइला! हमने अपनी सभी वॉलेट कार्यक्षमता को प्रोग्राम करना पूरा कर लिया है! अब जब हमारा वॉलेट सेट हो गया है, तो चलिए पता लगाते हैं कि अपने एनएफटी को कैसे मिंट करें!

एनएफटी मेटाडेटा 101

तो याद रखें एनएफटी मेटाडेटा जिसके बारे में हमने इस ट्यूटोरियल के चरण 0 में बात की थी—यह एक एनएफटी को जीवंत करता है, जिससे इसमें डिजिटल संपत्ति, नाम, विवरण और अन्य विशेषताओं जैसे गुण होते हैं।

हमें इस मेटाडेटा को एक JSON ऑब्जेक्ट के रूप में कॉन्फ़िगर करने और इसे संग्रहीत करने की आवश्यकता होगी, ताकि हम इसे अपने स्मार्ट अनुबंध के mintNFT फ़ंक्शन को कॉल करते समय tokenURI पैरामीटर के रूप में पास कर सकें।

"संपत्ति का लिंक", "नाम", "विवरण" फ़ील्ड में पाठ हमारे एनएफटी के मेटाडेटा के विभिन्न गुणों का निर्माण करेगा। हम इस मेटाडेटा को JSON ऑब्जेक्ट के रूप में प्रारूपित करेंगे, लेकिन इस JSON ऑब्जेक्ट को हम कहाँ संग्रहीत कर सकते हैं, इसके लिए कुछ विकल्प हैं:

  • हम इसे एथेरियम ब्लॉकचेन पर संग्रहीत कर सकते हैं; हालाँकि, ऐसा करना बहुत महंगा होगा।
  • हम इसे एक केंद्रीकृत सर्वर, जैसे AWS या Firebase पर संग्रहीत कर सकते हैं। लेकिन यह हमारे विकेंद्रीकरण लोकाचार को हरा देगा।
  • हम आईपीएफएस का उपयोग कर सकते हैं, जो एक विकेन्द्रीकृत प्रोटोकॉल और पीयर-टू-पीयर नेटवर्क है जो एक वितरित फ़ाइल सिस्टम में डेटा को संग्रहीत और साझा करने के लिए है। चूंकि यह प्रोटोकॉल विकेन्द्रीकृत और मुफ्त है, यह हमारा सबसे अच्छा विकल्प है!

आईपीएफएस पर हमारे मेटाडेटा को संग्रहीत करने के लिए, हम पिनाटा (opens in a new tab) का उपयोग करेंगे, जो एक सुविधाजनक आईपीएफएस API और टूलकिट है। अगले चरण में, हम ठीक से समझाएंगे कि यह कैसे करना है!

आईपीएफएस पर अपने मेटाडेटा को पिन करने के लिए पिनाटा का उपयोग करें

यदि आपके पास पिनाटा (opens in a new tab) खाता नहीं है, तो यहां (opens in a new tab) एक निःशुल्क खाते के लिए साइन अप करें और अपने ईमेल और खाते को सत्यापित करने के लिए चरणों को पूरा करें।

अपनी पिनाटा API कुंजी बनाएँ

https://pinata.cloud/keys (opens in a new tab) पृष्ठ पर नेविगेट करें, फिर शीर्ष पर "नई कुंजी" बटन चुनें, व्यवस्थापक विजेट को सक्षम के रूप में सेट करें, और अपनी कुंजी का नाम दें।

आपको तब आपकी API जानकारी के साथ एक पॉपअप दिखाया जाएगा। इसे कहीं सुरक्षित रखना सुनिश्चित करें।

अब जब हमारी कुंजी सेट हो गई है, तो चलिए इसे हमारे प्रोजेक्ट में जोड़ते हैं ताकि हम इसका उपयोग कर सकें।

.env फ़ाइल बनाएँ

हम अपनी पिनाटा कुंजी और रहस्य को एक पर्यावरण फ़ाइल में सुरक्षित रूप से संग्रहीत कर सकते हैं। चलिए आपके प्रोजेक्ट डायरेक्टरी में dotenv पैकेज (opens in a new tab) इंस्टॉल करते हैं।

अपने टर्मिनल में एक नया टैब खोलें (लोकल होस्ट चलाने वाले से अलग) और सुनिश्चित करें कि आप minter-starter-files फ़ोल्डर में हैं, फिर अपने टर्मिनल में निम्न कमांड चलाएँ:

1npm install dotenv --save

अगला, अपनी कमांड लाइन पर निम्न दर्ज करके अपनी minter-starter-files की रूट डायरेक्टरी में एक .env फ़ाइल बनाएँ:

1vim.env

यह आपकी .env फ़ाइल को vim (एक टेक्स्ट एडिटर) में खोल देगा। इसे सहेजने के लिए अपने कीबोर्ड पर "esc" + ":" + "q" को उस क्रम में दबाएँ।

अगला, वीएसकोड में, अपनी .env फ़ाइल पर नेविगेट करें और अपनी पिनाटा API कुंजी और API रहस्य को इसमें जोड़ें, जैसे:

1REACT_APP_PINATA_KEY = <pinata-api-key>
2REACT_APP_PINATA_SECRET = <pinata-api-secret>

फ़ाइल सहेजें, और फिर आप अपने JSON मेटाडेटा को आईपीएफएस पर अपलोड करने के लिए फ़ंक्शन लिखना शुरू करने के लिए तैयार हैं!

pinJSONToIPFS लागू करें

सौभाग्य से, पिनाटा के पास आईपीएफएस पर JSON डेटा अपलोड करने के लिए विशेष रूप से एक API (opens in a new tab) है और axios के साथ एक सुविधाजनक जावास्क्रिप्ट उदाहरण है जिसका हम कुछ मामूली संशोधनों के साथ उपयोग कर सकते हैं।

अपनी utils फ़ोल्डर में, चलिए pinata.js नामक एक और फ़ाइल बनाते हैं और फिर .env फ़ाइल से अपने पिनाटा रहस्य और कुंजी को इस तरह आयात करते हैं:

1require("dotenv").config()
2const key = process.env.REACT_APP_PINATA_KEY
3const secret = process.env.REACT_APP_PINATA_SECRET

अगला, नीचे से अतिरिक्त कोड को अपनी pinata.js फ़ाइल में पेस्ट करें। चिंता न करें, हम सब कुछ का मतलब समझाएंगे!

1require("dotenv").config()
2const key = process.env.REACT_APP_PINATA_KEY
3const secret = process.env.REACT_APP_PINATA_SECRET
4
5const axios = require("axios")
6
7export const pinJSONToIPFS = async (JSONBody) => {
8  const url = `https://api.pinata.cloud/pinning/pinJSONToIPFS`
9  //axios पोस्ट अनुरोध को पिनाटा को करना ⬇️
10  return axios
11    .post(url, JSONBody, {
12      headers: {
13        pinata_api_key: key,
14        pinata_secret_api_key: secret,
15      },
16    })
17    .then(function (response) {
18      return {
19        success: true,
20        pinataUrl:
21          "https://gateway.pinata.cloud/ipfs/" + response.data.IpfsHash,
22      }
23    })
24    .catch(function (error) {
25      console.log(error)
26      return {
27        success: false,
28        message: error.message,
29      }
30    })
31}
सभी दिखाएँ

तो यह कोड वास्तव में क्या करता है?

सबसे पहले, यह axios (opens in a new tab) को आयात करता है, जो ब्राउज़र और node.js के लिए एक वादा आधारित HTTP क्लाइंट है, जिसका उपयोग हम पिनाटा से अनुरोध करने के लिए करेंगे।

फिर हमारे पास हमारा एसिंक्रोनस फ़ंक्शन pinJSONToIPFS है, जो अपने इनपुट के रूप में एक JSONBody और अपने हेडर में पिनाटा एपीआई कुंजी और रहस्य लेता है, यह सब उनके pinJSONToIPFS API को पोस्ट अनुरोध करने के लिए है।

  • यदि यह POST अनुरोध सफल होता है, तो हमारा फ़ंक्शन एक JSON ऑब्जेक्ट लौटाता है जिसमें success बूलियन सत्य होता है और pinataUrl जहाँ हमारा मेटाडेटा पिन किया गया था। हम इस pinataUrl को अपने स्मार्ट अनुबंध के मिंट फ़ंक्शन के लिए tokenURI इनपुट के रूप में उपयोग करेंगे।
  • यदि यह पोस्ट अनुरोध विफल हो जाता है, तो हमारा फ़ंक्शन एक JSON ऑब्जेक्ट लौटाता है जिसमें success बूलियन झूठा होता है और एक message स्ट्रिंग जो हमारी त्रुटि को बताती है।

हमारे connectWallet फ़ंक्शन रिटर्न प्रकारों की तरह, हम JSON ऑब्जेक्ट लौटा रहे हैं ताकि हम अपने स्थिति चर और UI को अपडेट करने के लिए उनके मापदंडों का उपयोग कर सकें।

अपना स्मार्ट अनुबंध लोड करें

अब जब हमारे पास हमारे एनएफटी मेटाडेटा को आईपीएफएस पर pinJSONToIPFS फ़ंक्शन के माध्यम से अपलोड करने का एक तरीका है, तो हमें अपने स्मार्ट अनुबंध का एक उदाहरण लोड करने का एक तरीका चाहिए होगा ताकि हम इसके mintNFT फ़ंक्शन को कॉल कर सकें।

जैसा कि हमने पहले उल्लेख किया है, इस ट्यूटोरियल में हम इस मौजूदा एनएफटी स्मार्ट अनुबंध (opens in a new tab) का उपयोग करेंगे; हालाँकि, यदि आप यह जानना चाहते हैं कि हमने इसे कैसे बनाया, या खुद एक बनाना चाहते हैं, तो हम आपको हमारे दूसरे ट्यूटोरियल, "एक एनएफटी कैसे बनाएँ" (opens in a new tab) को देखने की अत्यधिक अनुशंसा करते हैं।

अनुबंध ABI

यदि आपने हमारी फाइलों को ध्यान से देखा है, तो आपने देखा होगा कि हमारी src डायरेक्टरी में एक contract-abi.json फ़ाइल है। एक ABI यह निर्दिष्ट करने के लिए आवश्यक है कि कोई अनुबंध किस फ़ंक्शन को लागू करेगा और यह भी सुनिश्चित करेगा कि फ़ंक्शन आपके द्वारा अपेक्षित प्रारूप में डेटा लौटाएगा।

हमें एथेरियम ब्लॉकचेन से कनेक्ट करने और हमारे स्मार्ट अनुबंध को लोड करने के लिए एक अल्केमी API कुंजी और अल्केमी वेब3 API की भी आवश्यकता होगी।

अपनी अल्केमी API कुंजी बनाएँ

यदि आपके पास पहले से अल्केमी खाता नहीं है, तो यहां निःशुल्क साइन अप करें। (opens in a new tab)

एक बार जब आप एक अल्केमी खाता बना लेते हैं, तो आप एक ऐप बनाकर एक API कुंजी उत्पन्न कर सकते हैं। यह हमें रोपस्टेन टेस्ट नेटवर्क पर अनुरोध करने की अनुमति देगा।

अपने अल्केमी डैशबोर्ड में “ऐप बनाएँ” पृष्ठ पर जाएँ, नव बार में “ऐप्स” पर होवर करके और “ऐप बनाएँ” पर क्लिक करके।

अपने ऐप को नाम दें, हमने "मेरा पहला एनएफटी!" चुना, एक संक्षिप्त विवरण प्रदान करें, अपने ऐप की बहीखाता पद्धति के लिए उपयोग किए जाने वाले पर्यावरण के लिए “स्टेजिंग” चुनें, और अपने नेटवर्क के लिए “रोपस्टेन” चुनें।

“Create app” पर क्लिक करें और बस हो गया! आपका ऐप नीचे दी गई तालिका में दिखाई देना चाहिए।

बहुत बढ़िया, तो अब जब हमने अपना HTTP अल्केमी API URL बना लिया है, तो इसे अपने क्लिपबोर्ड पर कॉपी करें...

...और फिर चलिए इसे अपनी .env फ़ाइल में जोड़ते हैं। कुल मिलाकर, आपकी .env फ़ाइल इस तरह दिखनी चाहिए:

1REACT_APP_PINATA_KEY = <pinata-key>
2REACT_APP_PINATA_SECRET = <pinata-secret>
3REACT_APP_ALCHEMY_KEY = https://eth-ropsten.alchemyapi.io/v2/<alchemy-key>

अब जब हमारे पास हमारा अनुबंध ABI और हमारी अल्केमी API कुंजी है, तो हम अल्केमी वेब3 (opens in a new tab) का उपयोग करके अपना स्मार्ट अनुबंध लोड करने के लिए तैयार हैं।

अपना अल्केमी वेब3 एंडपॉइंट और अनुबंध सेट अप करें

सबसे पहले, यदि आपके पास यह पहले से नहीं है, तो आपको टर्मिनल में होम डायरेक्टरी nft-minter-tutorial पर नेविगेट करके अल्केमी वेब3 (opens in a new tab) इंस्टॉल करना होगा:

1cd ..
2npm install @alch/alchemy-web3

अगला, चलिए हमारी interact.js फ़ाइल पर वापस जाते हैं। फ़ाइल के शीर्ष पर, अपनी .env फ़ाइल से अपनी अल्केमी कुंजी आयात करने और अपना अल्केमी वेब3 एंडपॉइंट सेट करने के लिए निम्न कोड जोड़ें:

1require("dotenv").config()
2const alchemyKey = process.env.REACT_APP_ALCHEMY_KEY
3const { createAlchemyWeb3 } = require("@alch/alchemy-web3")
4const web3 = createAlchemyWeb3(alchemyKey)

अल्केमी वेब3 (opens in a new tab) वेब3.जेएस (opens in a new tab) के चारों ओर एक रैपर है, जो उन्नत API विधियों और अन्य महत्वपूर्ण लाभ प्रदान करता है ताकि आपका जीवन एक web3 डेवलपर के रूप में आसान हो सके। इसे न्यूनतम कॉन्फ़िगरेशन की आवश्यकता के लिए डिज़ाइन किया गया है ताकि आप इसे अपने ऐप में तुरंत उपयोग करना शुरू कर सकें!

अगला, चलिए हमारे अनुबंध ABI और अनुबंध पते को हमारी फ़ाइल में जोड़ते हैं।

1require("dotenv").config()
2const alchemyKey = process.env.REACT_APP_ALCHEMY_KEY
3const { createAlchemyWeb3 } = require("@alch/alchemy-web3")
4const web3 = createAlchemyWeb3(alchemyKey)
5
6const contractABI = require("../contract-abi.json")
7const contractAddress = "0x4C4a07F737Bf57F6632B6CAB089B78f62385aCaE"

एक बार जब हमारे पास वे दोनों हो जाते हैं, तो हम अपना मिंट फ़ंक्शन कोडिंग शुरू करने के लिए तैयार हैं!

mintNFT फ़ंक्शन लागू करें

अपनी interact.js फ़ाइल के अंदर, चलिए हमारे फ़ंक्शन, mintNFT को परिभाषित करते हैं, जो समान रूप से हमारे एनएफटी को मिंट करेगा।

क्योंकि हम कई एसिंक्रोनस कॉल करेंगे (पिनाटा को हमारे मेटाडेटा को आईपीएफएस पर पिन करने के लिए, अल्केमी वेब3 को हमारे स्मार्ट अनुबंध को लोड करने के लिए, और मेटामास्क को हमारे लेनदेन पर हस्ताक्षर करने के लिए), हमारा फ़ंक्शन भी एसिंक्रोनस होगा।

हमारे फ़ंक्शन के तीन इनपुट हमारी डिजिटल संपत्ति का url, नाम और विवरण होंगे। connectWallet फ़ंक्शन के नीचे निम्न फ़ंक्शन हस्ताक्षर जोड़ें:

1export const mintNFT = async (url, name, description) => {}

इनपुट त्रुटि हैंडलिंग

स्वाभाविक रूप से, फ़ंक्शन की शुरुआत में किसी प्रकार का इनपुट त्रुटि हैंडलिंग होना समझ में आता है, इसलिए यदि हमारे इनपुट पैरामीटर सही नहीं हैं तो हम इस फ़ंक्शन से बाहर निकल जाते हैं। हमारे फ़ंक्शन के अंदर, चलिए निम्न कोड जोड़ते हैं:

1export const mintNFT = async (url, name, description) => {
2  //त्रुटि हैंडलिंग
3  if (url.trim() == "" || name.trim() == "" || description.trim() == "") {
4    return {
5      success: false,
6      status: "❗कृपया सुनिश्चित करें कि मिंटिंग से पहले सभी फ़ील्ड पूरे हो गए हैं।",
7    }
8  }
9}
सभी दिखाएँ

अनिवार्य रूप से, यदि कोई भी इनपुट पैरामीटर एक खाली स्ट्रिंग है, तो हम एक JSON ऑब्जेक्ट लौटाते हैं जहाँ success बूलियन झूठा है, और status स्ट्रिंग यह बताती है कि हमारे UI में सभी फ़ील्ड पूरे होने चाहिए।

मेटाडेटा को आईपीएफएस पर अपलोड करें

एक बार जब हम जान जाते हैं कि हमारा मेटाडेटा ठीक से स्वरूपित है, तो अगला कदम इसे एक JSON ऑब्जेक्ट में लपेटना और इसे आईपीएफएस पर pinJSONToIPFS के माध्यम से अपलोड करना है जिसे हमने लिखा था!

ऐसा करने के लिए, हमें पहले pinJSONToIPFS फ़ंक्शन को अपनी interact.js फ़ाइल में आयात करना होगा। interact.js के बिल्कुल शीर्ष पर, चलिए जोड़ते हैं:

1import { pinJSONToIPFS } from "./pinata.js"

याद रखें कि pinJSONToIPFS एक JSON बॉडी लेता है। तो इससे पहले कि हम इसे कॉल करें, हमें अपने url, नाम और विवरण मापदंडों को एक JSON ऑब्जेक्ट में प्रारूपित करना होगा।

चलिए हमारे कोड को metadata नामक एक JSON ऑब्जेक्ट बनाने के लिए अपडेट करते हैं और फिर इस metadata पैरामीटर के साथ pinJSONToIPFS को कॉल करते हैं:

1export const mintNFT = async (url, name, description) => {
2  //त्रुटि हैंडलिंग
3  if (url.trim() == "" || name.trim() == "" || description.trim() == "") {
4    return {
5      success: false,
6      status: "❗कृपया सुनिश्चित करें कि मिंटिंग से पहले सभी फ़ील्ड पूरे हो गए हैं।",
7    }
8  }
9
10  //मेटाडेटा बनाएँ
11  const metadata = new Object()
12  metadata.name = name
13  metadata.image = url
14  metadata.description = description
15
16  //पिनाटा कॉल करें
17  const pinataResponse = await pinJSONToIPFS(metadata)
18  if (!pinataResponse.success) {
19    return {
20      success: false,
21      status: "😢 आपके tokenURI को अपलोड करते समय कुछ गलत हो गया।",
22    }
23  }
24  const tokenURI = pinataResponse.pinataUrl
25}
सभी दिखाएँ

ध्यान दें, हम pinataResponse ऑब्जेक्ट में pinJSONToIPFS(metadata) पर हमारी कॉल की प्रतिक्रिया को संग्रहीत करते हैं। फिर, हम किसी भी त्रुटि के लिए इस ऑब्जेक्ट को पार्स करते हैं।

यदि कोई त्रुटि है, तो हम एक JSON ऑब्जेक्ट लौटाते हैं जहाँ success बूलियन झूठा है और हमारी status स्ट्रिंग यह बताती है कि हमारी कॉल विफल हो गई है। अन्यथा, हम pinataResponse से pinataURL निकालते हैं और इसे हमारे tokenURI चर के रूप में संग्रहीत करते हैं।

अब हमारे स्मार्ट अनुबंध को अल्केमी वेब3 API का उपयोग करके लोड करने का समय है जिसे हमने अपनी फ़ाइल के शीर्ष पर प्रारंभ किया था। window.contract ग्लोबल वैरिएबल पर अनुबंध को सेट करने के लिए mintNFT फ़ंक्शन के नीचे कोड की निम्न पंक्ति जोड़ें:

1window.contract = await new web3.eth.Contract(contractABI, contractAddress)

हमारे mintNFT फ़ंक्शन में जोड़ने वाली आखिरी चीज़ हमारा एथेरियम लेनदेन है:

1//अपना एथेरियम लेनदेन सेट करें
2const transactionParameters = {
3  to: contractAddress, // अनुबंध प्रकाशनों के दौरान को छोड़कर आवश्यक।
4  from: window.ethereum.selectedAddress, // यूज़र के सक्रिय पते से मेल खाना चाहिए।
5  data: window.contract.methods
6    .mintNFT(window.ethereum.selectedAddress, tokenURI)
7    .encodeABI(), //NFT स्मार्ट अनुबंध को कॉल करें
8}
9
10//MetaMask के माध्यम से लेनदेन पर हस्ताक्षर करें
11try {
12  const txHash = await window.ethereum.request({
13    method: "eth_sendTransaction",
14    params: [transactionParameters],
15  })
16  return {
17    success: true,
18    status:
19      "✅ Etherscan पर अपने लेनदेन की जाँच करें: https://ropsten.etherscan.io/tx/" +
20      txHash,
21  }
22} catch (error) {
23  return {
24    success: false,
25    status: "😥 कुछ गलत हो गया: " + error.message,
26  }
27}
सभी दिखाएँ

यदि आप पहले से ही एथेरियम लेनदेन से परिचित हैं, तो आप देखेंगे कि संरचना आपके द्वारा देखे गए से काफी मिलती-जुलती है।

  • सबसे पहले, हम अपने लेनदेन पैरामीटर सेट करते हैं।
    • to प्राप्तकर्ता का पता निर्दिष्ट करता है (हमारा स्मार्ट अनुबंध)
    • from लेनदेन के हस्ताक्षरकर्ता को निर्दिष्ट करता है (यूज़र का मेटामास्क से जुड़ा पता: window.ethereum.selectedAddress)
    • data में हमारे स्मार्ट अनुबंध mintNFT विधि को कॉल करना शामिल है, जो हमारे tokenURI और यूज़र के वॉलेट पते, window.ethereum.selectedAddress को इनपुट के रूप में प्राप्त करता है
  • फिर, हम एक await कॉल करते हैं, window.ethereum.request, जहाँ हम मेटामास्क से लेनदेन पर हस्ताक्षर करने के लिए कहते हैं। ध्यान दें, इस अनुरोध में, हम अपनी eth विधि (eth_SentTransaction) निर्दिष्ट कर रहे हैं और हमारे transactionParameters में पास कर रहे हैं। इस बिंदु पर, मेटामास्क ब्राउज़र में खुल जाएगा, और यूज़र को लेनदेन पर हस्ताक्षर करने या अस्वीकार करने के लिए प्रेरित करेगा।
    • यदि लेनदेन सफल होता है, तो फ़ंक्शन एक JSON ऑब्जेक्ट लौटाएगा जहाँ बूलियन success को सत्य पर सेट किया गया है और status स्ट्रिंग यूज़र को उनके लेनदेन के बारे में अधिक जानकारी के लिए ईथरस्कैन की जाँच करने के लिए प्रेरित करती है।
    • यदि लेनदेन विफल हो जाता है, तो फ़ंक्शन एक JSON ऑब्जेक्ट लौटाएगा जहाँ success बूलियन को झूठे पर सेट किया गया है, और status स्ट्रिंग त्रुटि संदेश बताती है।

कुल मिलाकर, हमारा mintNFT फ़ंक्शन इस तरह दिखना चाहिए:

1export const mintNFT = async (url, name, description) => {
2  //त्रुटि हैंडलिंग
3  if (url.trim() == "" || name.trim() == "" || description.trim() == "") {
4    return {
5      success: false,
6      status: "❗कृपया सुनिश्चित करें कि मिंटिंग से पहले सभी फ़ील्ड पूरे हो गए हैं।",
7    }
8  }
9
10  //मेटाडेटा बनाएँ
11  const metadata = new Object()
12  metadata.name = name
13  metadata.image = url
14  metadata.description = description
15
16  //पिनाटा पिन अनुरोध
17  const pinataResponse = await pinJSONToIPFS(metadata)
18  if (!pinataResponse.success) {
19    return {
20      success: false,
21      status: "😢 आपके tokenURI को अपलोड करते समय कुछ गलत हो गया।",
22    }
23  }
24  const tokenURI = pinataResponse.pinataUrl
25
26  //स्मार्ट अनुबंध लोड करें
27  window.contract = await new web3.eth.Contract(contractABI, contractAddress) //loadContract();
28
29  //अपना एथेरियम लेनदेन सेट करें
30  const transactionParameters = {
31    to: contractAddress, // अनुबंध प्रकाशनों के दौरान को छोड़कर आवश्यक।
32    from: window.ethereum.selectedAddress, // यूज़र के सक्रिय पते से मेल खाना चाहिए।
33    data: window.contract.methods
34      .mintNFT(window.ethereum.selectedAddress, tokenURI)
35      .encodeABI(), //NFT स्मार्ट अनुबंध को कॉल करें
36  }
37
38  //MetaMask के माध्यम से लेनदेन पर हस्ताक्षर करें
39  try {
40    const txHash = await window.ethereum.request({
41      method: "eth_sendTransaction",
42      params: [transactionParameters],
43    })
44    return {
45      success: true,
46      status:
47        "✅ Etherscan पर अपने लेनदेन की जाँच करें: https://ropsten.etherscan.io/tx/" +
48        txHash,
49    }
50  } catch (error) {
51    return {
52      success: false,
53      status: "😥 कुछ गलत हो गया: " + error.message,
54    }
55  }
56}
सभी दिखाएँ

यह एक विशाल कार्य है! अब, हमें बस अपने mintNFT फ़ंक्शन को हमारे Minter.js घटक से कनेक्ट करना है...

mintNFT को हमारे Minter.js फ्रंटएंड से कनेक्ट करें

अपनी Minter.js फ़ाइल खोलें और शीर्ष पर import { connectWallet, getCurrentWalletConnected } from "./utils/interact.js"; लाइन को अपडेट करें:

1import {
2  connectWallet,
3  getCurrentWalletConnected,
4  mintNFT,
5} from "./utils/interact.js"

अंत में, अपने आयातित mintNFT फ़ंक्शन को await कॉल करने के लिए onMintPressed फ़ंक्शन को लागू करें और status स्थिति चर को यह दर्शाने के लिए अपडेट करें कि हमारा लेनदेन सफल हुआ या विफल:

1const onMintPressed = async () => {
2  const { status } = await mintNFT(url, name, description)
3  setStatus(status)
4}

अपने एनएफटी को एक लाइव वेबसाइट पर तैनात करें

क्या आप यूज़र्स के साथ इंटरैक्ट करने के लिए अपने प्रोजेक्ट को लाइव करने के लिए तैयार हैं? अपने मिन्टर को लाइव वेबसाइट पर तैनात करने के लिए इस ट्यूटोरियल (opens in a new tab) को देखें।

एक आखिरी कदम...

ब्लॉकचेन की दुनिया में तहलका मचा दें

बस मज़ाक कर रहा था, आप ट्यूटोरियल के अंत तक पहुँच गए हैं!

संक्षेप में, एक एनएफटी मिन्टर बनाकर, आपने सफलतापूर्वक सीखा कि:

  • अपने फ्रंटएंड प्रोजेक्ट के माध्यम से मेटामास्क से कनेक्ट करें
  • अपने फ्रंटएंड से स्मार्ट अनुबंध विधियों को कॉल करें
  • मेटामास्क का उपयोग करके लेनदेन पर हस्ताक्षर करें

संभवतः, आप अपने वॉलेट में अपने डैप के माध्यम से बनाए गए एनएफटीज़ को दिखाने में सक्षम होना चाहेंगे - इसलिए हमारे त्वरित ट्यूटोरियल अपने वॉलेट में अपना एनएफटी कैसे देखें (opens in a new tab) को देखना सुनिश्चित करें!

और, हमेशा की तरह, यदि आपके कोई प्रश्न हैं, तो हम अल्केमी डिस्कॉर्ड (opens in a new tab) में मदद के लिए यहाँ हैं। हम यह देखने के लिए इंतजार नहीं कर सकते कि आप इस ट्यूटोरियल से अवधारणाओं को अपनी भविष्य की परियोजनाओं पर कैसे लागू करते हैं!

पेज का अंतिम अपडेट: 25 फ़रवरी 2026

mnelsonBTm (opens in a new tab)
pete-vielhaberp (opens in a new tab)
mdqstm (opens in a new tab)
+12

क्या यह ट्यूटोरियल सहायक था?