नवशिक्यांसाठी हॅलो वर्ल्ड स्मार्ट कॉन्ट्रॅक्ट - फुलस्टॅक

तुम्ही ब्लॉकचेन डेव्हलपमेंटसाठी नवीन असाल आणि तुम्हाला कोठून सुरुवात करावी किंवा स्मार्ट कॉन्ट्रॅक्ट कसे तैनात करावे आणि त्यांच्याशी संवाद कसा साधावा हे माहित नसेल, तर हे मार्गदर्शक तुमच्यासाठी आहे. आम्ही MetaMask (opens in a new tab), Solidity (opens in a new tab), Hardhat (opens in a new tab), आणि Alchemy (opens in a new tab) वापरून Goerli टेस्ट नेटवर्कवर एक साधे, स्मार्ट कॉन्ट्रॅक्ट तयार करणे आणि तैनात करण्याच्या प्रक्रियेतून जाऊ.

हे ट्युटोरियल पूर्ण करण्यासाठी तुम्हाला Alchemy खात्याची आवश्यकता असेल. विनामूल्य खात्यासाठी साइन अप करा (opens in a new tab).

तुम्हाला कोणत्याही क्षणी प्रश्न असल्यास, Alchemy Discord (opens in a new tab) मध्ये संपर्क साधा!

भाग १ - Hardhat वापरून तुमचे स्मार्ट कॉन्ट्रॅक्ट तयार करा आणि तैनात करा

Ethereum नेटवर्कशी कनेक्ट करा

Ethereum चेनला विनंत्या करण्याचे अनेक मार्ग आहेत. साधेपणासाठी, आम्ही Alchemy वर एक विनामूल्य खाते वापरू, जे एक ब्लॉकचेन डेव्हलपर प्लॅटफॉर्म आणि API आहे, जे आम्हाला स्वतः नोड न चालवता Ethereum चेनशी संवाद साधण्याची परवानगी देते. Alchemy मध्ये देखरेख आणि विश्लेषणासाठी डेव्हलपर टूल्स देखील आहेत; आम्ही या ट्युटोरियलमध्ये आमच्या स्मार्ट कॉन्ट्रॅक्ट तैनातीमध्ये काय चालले आहे हे समजून घेण्यासाठी त्यांचा फायदा घेऊ.

तुमचे ॲप आणि API की तयार करा

एकदा तुम्ही Alchemy खाते तयार केल्यावर, तुम्ही ॲप तयार करून API की तयार करू शकता. यामुळे तुम्हाला Goerli टेस्टनेटवर विनंत्या करण्याची परवानगी मिळेल. तुम्ही टेस्टनेटशी परिचित नसल्यास, तुम्ही नेटवर्क निवडण्याबाबत Alchemy चे मार्गदर्शक (opens in a new tab) वाचू शकता.

Alchemy डॅशबोर्डवर, नेव्हिगेशन बारमधील ॲप्स ड्रॉपडाउन शोधा आणि ॲप तयार करा वर क्लिक करा.

तुमच्या ॲपला 'Hello World' असे नाव द्या आणि एक लहान वर्णन लिहा. तुमचे पर्यावरण म्हणून स्टेजिंग आणि तुमचे नेटवर्क म्हणून Goerli निवडा.

टीप: Goerli निवडण्याची खात्री करा, अन्यथा हे ट्युटोरियल कार्य करणार नाही.

ॲप तयार करा वर क्लिक करा. तुमचे ॲप खालील टेबलमध्ये दिसेल.

एक Ethereum खाते तयार करा

तुम्हाला व्यवहार पाठवण्यासाठी आणि प्राप्त करण्यासाठी Ethereum खात्याची आवश्यकता आहे. आम्ही MetaMask वापरू, जो ब्राउझरमधील एक व्हर्च्युअल वॉलेट आहे, जो वापरकर्त्यांना त्यांच्या Ethereum खात्याचा पत्ता व्यवस्थापित करू देतो.

तुम्ही येथे (opens in a new tab) विनामूल्य MetaMask खाते डाउनलोड आणि तयार करू शकता. तुम्ही खाते तयार करत असताना, किंवा तुमच्याकडे आधीपासूनच खाते असल्यास, वरच्या उजवीकडील “Goerli टेस्ट नेटवर्क” वर स्विच करण्याची खात्री करा (जेणेकरून आपण खऱ्या पैशांशी व्यवहार करत नाही आहोत).

पायरी ४: फॉसेटमधून इथर जोडा

तुमचे स्मार्ट कॉन्ट्रॅक्ट टेस्ट नेटवर्कवर तैनात करण्यासाठी, तुम्हाला काही बनावट ETH ची आवश्यकता असेल. Goerli नेटवर्कवर ETH मिळवण्यासाठी, Goerli फॉसेटवर जा आणि तुमच्या Goerli खात्याचा पत्ता प्रविष्ट करा. लक्षात ठेवा की Goerli फॉसेट अलीकडे थोडे अविश्वसनीय असू शकतात - प्रयत्न करण्यासाठी पर्यायांची सूची पाहण्यासाठी टेस्ट नेटवर्क पृष्ठ पहा:

टीप: नेटवर्कमधील गर्दीमुळे, यास थोडा वेळ लागू शकतो. ``

पायरी 5: तुमची शिल्लक तपासा

तुमच्या वॉलेटमध्ये ETH आहे की नाही हे पुन्हा तपासण्यासाठी, चला Alchemy च्या कंपोझर टूल (opens in a new tab) वापरून eth_getBalance (opens in a new tab) विनंती करूया. हे आमच्या वॉलेटमधील ETH ची रक्कम परत करेल. अधिक जाणून घेण्यासाठी कंपोझर टूल कसे वापरावे यावरील Alchemy चे छोटे ट्युटोरियल (opens in a new tab) पहा.

तुमचा MetaMask खात्याचा पत्ता इनपुट करा आणि विनंती पाठवा वर क्लिक करा. तुम्हाला खालील कोड स्निपेटसारखा प्रतिसाद दिसेल.

1{ "jsonrpc": "2.0", "id": 0, "result": "0x2B5E3AF16B1880000" }
कॉपी

टीप: हा निकाल ETH मध्ये नाही, तर wei मध्ये आहे. Wei चा वापर इथरच्या सर्वात लहान मूल्यांकनासाठी केला जातो.

हुश्श! आपले बनावट पैसे तिथे आहेत.

पायरी 6: आपला प्रकल्प सुरू करा

प्रथम, आपल्याला आपल्या प्रकल्पासाठी एक फोल्डर तयार करण्याची आवश्यकता असेल. तुमच्या कमांड लाइनवर नेव्हिगेट करा आणि खालील इनपुट करा.

1mkdir hello-world
2cd hello-world

आता आपण आपल्या प्रोजेक्ट फोल्डरमध्ये आहोत, आपण प्रोजेक्ट सुरू करण्यासाठी npm init वापरू.

तुमच्याकडे अद्याप npm इंस्टॉल केलेले नसल्यास, Node.js आणि npm इंस्टॉल करण्यासाठी या सूचनांचे (opens in a new tab) पालन करा.

या ट्युटोरियलच्या उद्देशासाठी, तुम्ही आरंभीकरणाच्या प्रश्नांची उत्तरे कशी देता याने काही फरक पडत नाही. संदर्भासाठी आम्ही ते कसे केले ते येथे आहे:

1पॅकेजचे नाव: (hello-world)
2आवृत्ती: (1.0.0)
3वर्णन: हॅलो वर्ल्ड स्मार्ट कॉन्ट्रॅक्ट
4एंट्री पॉइंट: (index.js)
5चाचणी कमांड:
6git रेपॉजिटरी:
7कीवर्ड:
8लेखक:
9परवाना: (ISC)
10
11/Users/.../.../.../hello-world/package.json मध्ये लिहिणार आहात:
12
13{
14   "name": "hello-world",
15   "version": "1.0.0",
16   "description": "हॅलो वर्ल्ड स्मार्ट कॉन्ट्रॅक्ट",
17   "main": "index.js",
18   "scripts": {
19      "test": "echo \"Error: no test specified\" && exit 1"
20   },
21   "author": "",
22   "license": "ISC"
23}
सर्व दाखवा

package.json ला मंजूर करा आणि आपण पुढे जाण्यास तयार आहोत!

पायरी 7: Hardhat डाउनलोड करा

Hardhat हे तुमचे Ethereum सॉफ्टवेअर संकलित (compile), उपयोजित (deploy), चाचणी (test) आणि डीबग (debug) करण्यासाठी एक विकास वातावरण आहे. हे डेव्हलपर्सना थेट चेनवर उपयोजित करण्यापूर्वी स्थानिक पातळीवर स्मार्ट कॉन्ट्रॅक्ट्स आणि dApps तयार करताना मदत करते.

आपल्या hello-world प्रोजेक्टमध्ये चालवा:

1npm install --save-dev hardhat

इन्स्टॉलेशन सूचनांविषयी (opens in a new tab) अधिक तपशीलांसाठी हे पेज पहा.

पायरी 8: Hardhat प्रकल्प तयार करा

आमच्या hello-world प्रकल्प फोल्डरमध्ये, चालवा:

1npx hardhat

त्यानंतर तुम्हाला एक स्वागत संदेश आणि तुम्हाला काय करायचे आहे यासाठी पर्याय दिसेल. “create an empty hardhat.config.js” निवडा:

1888    888                      888 888               888
2888    888                      888 888               888
3888    888                      888 888               888
48888888888  8888b.  888d888 .d88888 88888b.   8888b.  888888
5888    888     "88b 888P"  d88" 888 888 "88b     "88b 888
6888    888 .d888888 888    888  888 888  888 .d888888 888
7888    888 888  888 888    Y88b 888 888  888 888  888 Y88b.
8888    888 "Y888888 888     "Y88888 888  888 "Y888888  "Y888
9
10👷 Hardhat v2.0.11 मध्ये आपले स्वागत आहे 👷‍
11
12तुम्ही काय करू इच्छिता? …
13एक नमुना प्रकल्प तयार करा
14❯ एक रिक्त hardhat.config.js तयार करा
15बाहेर पडा
सर्व दाखवा

हे प्रकल्पात hardhat.config.js फाइल तयार करेल. आपण हे नंतर ट्युटोरियलमध्ये आपल्या प्रकल्पासाठी सेटअप निर्दिष्ट करण्यासाठी वापरू.

पायरी 9: प्रकल्प फोल्डर जोडा

प्रकल्प संघटित ठेवण्यासाठी, चला दोन नवीन फोल्डर तयार करूया. कमांड लाइनमध्ये, तुमच्या hello-world प्रकल्पाच्या रूट डिरेक्टरीमध्ये नेव्हिगेट करा आणि टाइप करा:

1mkdir contracts
2mkdir scripts

• contracts/ मध्ये आपण आपली हॅलो वर्ल्ड स्मार्ट कॉन्ट्रॅक्ट कोड फाईल ठेवू
• scripts/ मध्ये आपण आपले कॉन्ट्रॅक्ट उपयोजित करण्यासाठी आणि त्याच्याशी संवाद साधण्यासाठी स्क्रिप्ट्स ठेवू

पायरी 10: आमचे कॉन्ट्रॅक्ट लिहा

तुम्ही स्वतःला विचारत असाल की, आपण कोड कधी लिहिणार आहोत? वेळ झाली आहे!

तुमच्या आवडत्या एडिटरमध्ये हॅलो-वर्ल्ड प्रकल्प उघडा. स्मार्ट कॉन्ट्रॅक्ट सामान्यतः Solidity मध्ये लिहिले जातात, जे आपण आपले स्मार्ट कॉन्ट्रॅक्ट लिहिण्यासाठी वापरू.‌

1. contracts फोल्डरवर नेव्हिगेट करा आणि HelloWorld.sol नावाची नवीन फाइल तयार करा
2. खाली एक नमुना हॅलो वर्ल्ड स्मार्ट कॉन्ट्रॅक्ट आहे जो आपण या ट्युटोरियलसाठी वापरणार आहोत. खालील मजकूर HelloWorld.sol फाइलमध्ये कॉपी करा.

टीप: हे कॉन्ट्रॅक्ट काय करते हे समजून घेण्यासाठी टिप्पण्या वाचण्याची खात्री करा.

1// सिमेंटिक व्हर्जनिंग वापरून, Solidity ची आवृत्ती निर्दिष्ट करते.
2// अधिक जाणून घ्या: https://solidity.readthedocs.io/en/v0.5.10/layout-of-source-files.html#pragma
3pragma solidity >=0.7.3;
4
5// `HelloWorld` नावाचे एक कॉन्ट्रॅक्ट परिभाषित करते.
6// एक कॉन्ट्रॅक्ट म्हणजे फंक्शन्स आणि डेटा (त्याची स्थिती) यांचा संग्रह. एकदा तैनात झाल्यावर, एक कॉन्ट्रॅक्ट Ethereum ब्लॉकचेनवर एका विशिष्ट पत्त्यावर राहते. अधिक जाणून घ्या: https://solidity.readthedocs.io/en/v0.5.10/structure-of-a-contract.html
7contract HelloWorld {
8
9   //जेव्हा अपडेट फंक्शन कॉल केले जाते तेव्हा उत्सर्जित होते
10   //स्मार्ट कॉन्ट्रॅक्ट इव्हेंट्स हे तुमच्या कॉन्ट्रॅक्टसाठी तुमच्या ॲपच्या फ्रंट-एंडला ब्लॉकचेनवर काहीतरी घडल्याचे कळवण्याचा एक मार्ग आहे, जे काही विशिष्ट इव्हेंट्ससाठी 'ऐकत' असू शकते आणि ते घडल्यावर कारवाई करू शकते.
11   event UpdatedMessages(string oldStr, string newStr);
12
13   // `string` प्रकारचा `message` नावाचा एक स्टेट व्हेरिएबल घोषित करते.
14   // स्टेट व्हेरिएबल्स असे व्हेरिएबल्स आहेत ज्यांची मूल्ये कॉन्ट्रॅक्ट स्टोरेजमध्ये कायमस्वरूपी संग्रहित केली जातात. `public` कीवर्ड व्हेरिएबल्सला कॉन्ट्रॅक्टच्या बाहेरून प्रवेशयोग्य बनवतो आणि एक फंक्शन तयार करतो ज्याला इतर कॉन्ट्रॅक्ट्स किंवा क्लायंट मूल्यामध्ये प्रवेश करण्यासाठी कॉल करू शकतात.
15   string public message;
16
17   // अनेक वर्ग-आधारित ऑब्जेक्ट-ओरिएंटेड भाषांप्रमाणे, कंस्ट्रक्टर एक विशेष फंक्शन आहे जे फक्त कॉन्ट्रॅक्ट निर्मितीवर कार्यान्वित होते.
18   // कंस्ट्रक्टरचा वापर कॉन्ट्रॅक्टचा डेटा सुरू करण्यासाठी केला जातो. अधिक जाणून घ्या:https://solidity.readthedocs.io/en/v0.5.10/contracts.html#constructors
19   constructor(string memory initMessage) {
20
21      // एक स्ट्रिंग युक्तिवाद `initMessage` स्वीकारते आणि कॉन्ट्रॅक्टच्या `message` स्टोरेज व्हेरिएबलमध्ये मूल्य सेट करते).
22      message = initMessage;
23   }
24
25   // एक सार्वजनिक फंक्शन जे स्ट्रिंग युक्तिवाद स्वीकारते आणि `message` स्टोरेज व्हेरिएबल अपडेट करते.
26   function update(string memory newMessage) public {
27      string memory oldMsg = message;
28      message = newMessage;
29      emit UpdatedMessages(oldMsg, newMessage);
30   }
31}
सर्व दाखवा

हे एक मूलभूत स्मार्ट कॉन्ट्रॅक्ट आहे जे निर्मितीच्या वेळी एक संदेश संग्रहित करते. update फंक्शनला कॉल करून ते अपडेट केले जाऊ शकते.

पायरी 11: MetaMask आणि Alchemy ला तुमच्या प्रकल्पाशी कनेक्ट करा

आपण MetaMask वॉलेट, Alchemy खाते तयार केले आहे आणि आपले स्मार्ट कॉन्ट्रॅक्ट लिहिले आहे, आता या तिन्हीना जोडण्याची वेळ आली आहे.

तुमच्या वॉलेटमधून पाठवलेल्या प्रत्येक व्यवहारासाठी तुमच्या युनिक खाजगी की वापरून स्वाक्षरी आवश्यक असते. आमच्या प्रोग्रामला ही परवानगी देण्यासाठी, आम्ही आमची खाजगी की एका पर्यावरण फाइलमध्ये सुरक्षितपणे संग्रहित करू शकतो. आम्ही येथे Alchemy साठी एक API की देखील संग्रहित करू.

व्यवहार पाठवण्याबद्दल अधिक जाणून घेण्यासाठी, वेब3 वापरून व्यवहार पाठवण्यावरील हे ट्युटोरियल (opens in a new tab) पहा.

प्रथम, तुमच्या प्रोजेक्ट डिरेक्टरीमध्ये dotenv पॅकेज इंस्टॉल करा:

1npm install dotenv --save

मग, प्रकल्पाच्या रूट डिरेक्टरीमध्ये .env फाइल तयार करा. तुमची MetaMask खाजगी की आणि HTTP Alchemy API URL त्यात जोडा.

तुमच्या पर्यावरण फाइलचे नाव .env असणे आवश्यक आहे अन्यथा ती पर्यावरण फाइल म्हणून ओळखली जाणार नाही.

त्याला process.env किंवा .env-custom किंवा दुसरे काहीही नाव देऊ नका.

• तुमची खाजगी की निर्यात करण्यासाठी या सूचनांचे (opens in a new tab) पालन करा
• HTTP Alchemy API URL मिळवण्यासाठी खाली पहा

तुमचे .env असे दिसले पाहिजे:

1API_URL = "https://eth-goerli.alchemyapi.io/v2/your-api-key"
2PRIVATE_KEY = "your-metamask-private-key"

हे प्रत्यक्षात आपल्या कोडशी जोडण्यासाठी, आपण या व्हेरिएबल्सचा संदर्भ आपल्या hardhat.config.js फाईलमध्ये पायरी १३ वर देऊ.

पायरी १२: Ethers.js इंस्टॉल करा

Ethers.js ही एक लायब्ररी आहे जी अधिक वापरकर्ता-अनुकूल पद्धतींसह मानक JSON-RPC पद्धती (opens in a new tab) रॅप करून Ethereum शी संवाद साधणे आणि विनंत्या करणे सोपे करते.

Hardhat आम्हाला अतिरिक्त टूलिंग आणि विस्तारित कार्यक्षमतेसाठी प्लगइन्स (opens in a new tab) समाकलित करण्याची परवानगी देतो. आम्ही कॉन्ट्रॅक्ट उपयोजनासाठी Ethers प्लगइन (opens in a new tab) चा फायदा घेऊ.

आपल्या प्रोजेक्ट डिरेक्टरीमध्ये टाइप करा:

npm install --save-dev @nomiclabs/hardhat-ethers "ethers@^5.0.0"

पायरी 13: hardhat.config.js अपडेट करा

आतापर्यंत आपण अनेक डिपेंडेंसी आणि प्लगइन जोडले आहेत, आता आपल्याला hardhat.config.js अद्यतनित करण्याची आवश्यकता आहे जेणेकरून आपल्या प्रोजेक्टला त्या सर्वांबद्दल माहिती मिळेल.

तुमचे hardhat.config.js याप्रमाणे दिसण्यासाठी अद्यतनित करा:

1/**
2 * @type import('hardhat/config').HardhatUserConfig
3 */
4
5require("dotenv").config()
6require("@nomiclabs/hardhat-ethers")
7
8const { API_URL, PRIVATE_KEY } = process.env
9
10module.exports = {
11  solidity: "0.7.3",
12  defaultNetwork: "goerli",
13  networks: {
14    hardhat: {},
15    goerli: {
16      url: API_URL,
17      accounts: [`0x${PRIVATE_KEY}`],
18    },
19  },
20}
सर्व दाखवा

पायरी 14: आमचे कॉन्ट्रॅक्ट कंपाईल करा

आतापर्यंत सर्व काही कार्यरत आहे याची खात्री करण्यासाठी, चला आमचा कॉन्ट्रॅक्ट संकलित करूया. compile कार्य हे बिल्ट-इन हार्डहॅट कार्यांपैकी एक आहे.

कमांड लाइनमधून चालवा:

npx hardhat compile

तुम्हाला SPDX license identifier not provided in source file बद्दल चेतावणी मिळू शकते, परंतु त्याबद्दल काळजी करण्याची गरज नाही — आशा आहे की इतर सर्व काही चांगले दिसेल! नसल्यास, तुम्ही नेहमी Alchemy discord (opens in a new tab) मध्ये संदेश पाठवू शकता.

पायरी 15: आमची उपयोजन स्क्रिप्ट लिहा

आता आमचा कॉन्ट्रॅक्ट लिहिला आहे आणि आमची कॉन्फिगरेशन फाइल तयार आहे, आता आमच्या कॉन्ट्रॅक्टची उपयोजन स्क्रिप्ट लिहिण्याची वेळ आली आहे.

scripts/ फोल्डरवर नेव्हिगेट करा आणि deploy.js नावाची एक नवीन फाइल तयार करा, त्यात खालील सामग्री जोडा:

1async function main() {
2  const HelloWorld = await ethers.getContractFactory("HelloWorld")
3
4  // उपयोजन सुरू करा, एक प्रॉमिस परत करा जे कॉन्ट्रॅक्ट ऑब्जेक्टमध्ये निराकरण करते
5  const hello_world = await HelloWorld.deploy("Hello World!")
6  console.log("Contract deployed to address:", hello_world.address)
7}
8
9main()
10  .then(() => process.exit(0))
11  .catch((error) => {
12    console.error(error)
13    process.exit(1)
14  })
सर्व दाखवा

Hardhat त्यांच्या कॉन्ट्रॅक्ट्स ट्यूटोरियल (opens in a new tab) मध्ये या प्रत्येक कोड ओळी काय करते हे आश्चर्यकारकपणे स्पष्ट करते, आम्ही त्यांचे स्पष्टीकरण येथे स्वीकारले आहे.

1const HelloWorld = await ethers.getContractFactory("HelloWorld")

ethers.js मधील ContractFactory हे नवीन स्मार्ट कॉन्ट्रॅक्ट्स तैनात करण्यासाठी वापरले जाणारे एक ॲबस्ट्रॅक्शन आहे, म्हणून येथे HelloWorld हे आमच्या हॅलो वर्ल्ड कॉन्ट्रॅक्टच्या उदाहरणांसाठी एक फॅक्टरी (opens in a new tab) आहे. hardhat-ethers प्लगइन वापरताना ContractFactory आणि Contract, उदाहरणे डीफॉल्टनुसार पहिल्या स्वाक्षरीकर्त्याशी (मालक) जोडलेली असतात.

1const hello_world = await HelloWorld.deploy()

ContractFactory वर deploy() कॉल केल्याने उपयोजन सुरू होईल आणि एक Promise परत येईल जो Contract ऑब्जेक्टमध्ये निराकरण करतो. हे ते ऑब्जेक्ट आहे ज्यामध्ये आमच्या प्रत्येक स्मार्ट कॉन्ट्रॅक्ट फंक्शनसाठी एक पद्धत आहे.

पायरी १६: आपले कॉन्ट्रॅक्ट उपयोजित करा

आम्ही अखेरीस आमचा स्मार्ट कॉन्ट्रॅक्ट उपयोजित करण्यास तयार आहोत! कमांड लाइनवर नेव्हिगेट करा आणि चालवा:

npx hardhat run scripts/deploy.js --network goerli

तुम्हाला त्यानंतर असे काहीतरी दिसेल:

Contract deployed to address: 0x6cd7d44516a20882cEa2DE9f205bF401c0d23570

कृपया हा पत्ता सेव्ह करा. आम्ही ट्युटोरियलमध्ये नंतर याचा वापर करू.

जर आपण Goerli etherscan (opens in a new tab) वर गेलो आणि आपला कॉन्ट्रॅक्ट पत्ता शोधला तर आपण पाहू शकू की ते यशस्वीरित्या तैनात केले गेले आहे. व्यवहार असा काहीतरी दिसेल:

From पत्ता तुमच्या MetaMask खात्याच्या पत्त्याशी जुळला पाहिजे आणि To पत्त्यावर कॉन्ट्रॅक्ट निर्मिती असे लिहिलेले असेल. जर आपण व्यवहारात क्लिक केले तर आपल्याला To फील्डमध्ये आपला कॉन्ट्रॅक्ट पत्ता दिसेल.

अभिनंदन! तुम्ही नुकतेच Ethereum टेस्टनेटवर एक स्मार्ट कॉन्ट्रॅक्ट तैनात केले आहे.

पडद्यामागे काय चालले आहे हे समजून घेण्यासाठी, चला आपल्या Alchemy डॅशबोर्ड (opens in a new tab) मधील एक्सप्लोरर टॅबवर नेव्हिगेट करूया. तुमच्याकडे एकापेक्षा जास्त Alchemy ॲप्स असल्यास ॲपनुसार फिल्टर करा आणि Hello World निवडा.

येथे तुम्हाला काही JSON-RPC पद्धती दिसतील ज्या Hardhat/Ethers ने .deploy() फंक्शन कॉल केल्यावर आपल्यासाठी पडद्यामागे बनवल्या आहेत. येथे दोन महत्त्वाच्या पद्धती आहेत eth_sendRawTransaction (opens in a new tab), जे आमचे कॉन्ट्रॅक्ट Goerli चेनवर लिहिण्याची विनंती आहे, आणि eth_getTransactionByHash (opens in a new tab), जे हॅश दिल्यावर आमच्या व्यवहाराबद्दल माहिती वाचण्याची विनंती आहे. व्यवहार पाठवण्याबद्दल अधिक जाणून घेण्यासाठी, Web3 वापरून व्यवहार पाठवण्यावरील आमचे ट्युटोरियल पहा.

भाग २: तुमच्या स्मार्ट कॉन्ट्रॅक्टशी संवाद साधा

आता आपण यशस्वीरित्या Goerli नेटवर्कवर एक स्मार्ट कॉन्ट्रॅक्ट तैनात केले आहे, चला त्याच्याशी संवाद कसा साधायचा हे शिकूया.

एक interact.js फाइल तयार करा

ही ती फाईल आहे जिथे आपण आपली संवाद स्क्रिप्ट लिहू. आम्ही Ethers.js लायब्ररी वापरणार आहोत जी तुम्ही आधी भाग १ मध्ये इन्स्टॉल केली होती.

scripts/ फोल्डरमध्ये, interact.js नावाची नवीन फाइल तयार करा आणि खालील कोड जोडा:

1// interact.js
2
3const API_KEY = process.env.API_KEY
4const PRIVATE_KEY = process.env.PRIVATE_KEY
5const CONTRACT_ADDRESS = process.env.CONTRACT_ADDRESS

तुमची .env फाईल अपडेट करा

आम्ही नवीन पर्यावरण व्हेरिएबल्स वापरणार आहोत, म्हणून आम्हाला त्यांना .env फाइलमध्ये परिभाषित करणे आवश्यक आहे जी आम्ही आधी तयार केली होती.

आम्हाला आमच्या Alchemy API_KEY आणि CONTRACT_ADDRESS साठी एक परिभाषा जोडावी लागेल जिथे तुमचे स्मार्ट कॉन्ट्रॅक्ट तैनात केले होते.

तुमची .env फाइल अशी काहीतरी दिसली पाहिजे:

# .env
API_URL = "https://eth-goerli.alchemyapi.io/v2/<your-api-key>"
API_KEY = "<your-api-key>"
PRIVATE_KEY = "<your-metamask-private-key>"
CONTRACT_ADDRESS = "0x<your contract address>"

तुमचे कॉन्ट्रॅक्ट ABI मिळवा

आमचे कॉन्ट्रॅक्ट आमच्या स्मार्ट कॉन्ट्रॅक्टशी संवाद साधण्यासाठी इंटरफेस आहे. Hardhat आपोआप एक ABI तयार करतो आणि ते HelloWorld.json मध्ये सेव्ह करतो. ABI वापरण्यासाठी, आम्हाला आमच्या interact.js फाइलमध्ये खालील कोडच्या ओळी जोडून सामग्री पार्स करणे आवश्यक आहे:

1// interact.js
2const contract = require("../artifacts/contracts/HelloWorld.sol/HelloWorld.json")

जर तुम्हाला ABI पाहायचा असेल तर तुम्ही ते तुमच्या कन्सोलवर प्रिंट करू शकता:

1console.log(JSON.stringify(contract.abi))

तुमचे ABI कन्सोलवर छापलेले पाहण्यासाठी, तुमच्या टर्मिनलवर नेव्हिगेट करा आणि चालवा:

npx hardhat run scripts/interact.js

तुमच्या कॉन्ट्रॅक्टचे एक उदाहरण तयार करा

आमच्या कॉन्ट्रॅक्टशी संवाद साधण्यासाठी, आम्हाला आमच्या कोडमध्ये एक कॉन्ट्रॅक्ट उदाहरण तयार करणे आवश्यक आहे. Ethers.js सह असे करण्यासाठी, आम्हाला तीन संकल्पनांवर काम करावे लागेल:

1. प्रदाता - एक नोड प्रदाता जो तुम्हाला ब्लॉकचेनवर वाचण्याचा आणि लिहिण्याचा प्रवेश देतो
2. स्वाक्षरीकर्ता - एक Ethereum खाते जे व्यवहारांवर स्वाक्षरी करू शकते
3. कॉन्ट्रॅक्ट - ऑनचेन तैनात केलेल्या विशिष्ट कॉन्ट्रॅक्टचे प्रतिनिधित्व करणारा एक Ethers.js ऑब्जेक्ट

आम्ही कॉन्ट्रॅक्टचे उदाहरण तयार करण्यासाठी मागील पायरीमधील कॉन्ट्रॅक्ट ABI वापरू:

1// interact.js
2
3// प्रदाता
4const alchemyProvider = new ethers.providers.AlchemyProvider(
5  (network = "goerli"),
6  API_KEY
7)
8
9// स्वाक्षरीकर्ता
10const signer = new ethers.Wallet(PRIVATE_KEY, alchemyProvider)
11
12// कॉन्ट्रॅक्ट
13const helloWorldContract = new ethers.Contract(
14  CONTRACT_ADDRESS,
15  contract.abi,
16  signer
17)
सर्व दाखवा

ethers.js माहिती (opens in a new tab) मध्ये प्रदाते, स्वाक्षरीकर्ते आणि कॉन्ट्रॅक्ट्सबद्दल अधिक जाणून घ्या.

आरंभिक संदेश वाचा

लक्षात आहे का आपण आपले कॉन्ट्रॅक्ट initMessage = "Hello world!" सह तैनात केले होते? आम्ही आता आमच्या स्मार्ट कॉन्ट्रॅक्टमध्ये संग्रहित केलेला तो संदेश वाचणार आहोत आणि तो कन्सोलवर प्रिंट करणार आहोत.

जावास्क्रिप्टमध्ये, नेटवर्कशी संवाद साधताना असिंक्रोनस फंक्शन्स वापरली जातात. असिंक्रोनस फंक्शन्सबद्दल अधिक जाणून घेण्यासाठी, हा मीडियम लेख (opens in a new tab) वाचा.

आमच्या स्मार्ट कॉन्ट्रॅक्टमधील message फंक्शनला कॉल करण्यासाठी आणि आरंभिक संदेश वाचण्यासाठी खालील कोड वापरा:

1// interact.js
2
3// ...
4
5async function main() {
6  const message = await helloWorldContract.message()
7  console.log("The message is: " + message)
8}
9main()
सर्व दाखवा

टर्मिनलमध्ये npx hardhat run scripts/interact.js वापरून फाइल चालवल्यानंतर आम्हाला हा प्रतिसाद दिसला पाहिजे:

1The message is: Hello world!

अभिनंदन! तुम्ही नुकतेच Ethereum ब्लॉकचेनवरून स्मार्ट कॉन्ट्रॅक्ट डेटा यशस्वीरित्या वाचला आहे, छान काम!

संदेश अपडेट करा

फक्त संदेश वाचण्याऐवजी, आम्ही update फंक्शन वापरून आमच्या स्मार्ट कॉन्ट्रॅक्टमध्ये सेव्ह केलेला संदेश देखील अपडेट करू शकतो! छान आहे, नाही का?

संदेश अपडेट करण्यासाठी, आम्ही थेट आमच्या इन्स्टँटिएटेड कॉन्ट्रॅक्ट ऑब्जेक्टवर update फंक्शन कॉल करू शकतो:

1// interact.js
2
3// ...
4
5async function main() {
6  const message = await helloWorldContract.message()
7  console.log("The message is: " + message)
8
9  console.log("Updating the message...")
10  const tx = await helloWorldContract.update("This is the new message.")
11  await tx.wait()
12}
13main()
सर्व दाखवा

लक्षात घ्या की ओळ ११ वर, आम्ही परत आलेल्या व्यवहार ऑब्जेक्टवर .wait() ला कॉल करतो. हे सुनिश्चित करते की आमची स्क्रिप्ट फंक्शनमधून बाहेर पडण्यापूर्वी ब्लॉकचेनवर व्यवहार माइन होण्याची वाट पाहते. जर .wait() कॉल समाविष्ट नसेल, तर स्क्रिप्टला कॉन्ट्रॅक्टमधील अपडेट केलेले message मूल्य दिसणार नाही.

नवीन संदेश वाचा

अपडेट केलेले message मूल्य वाचण्यासाठी तुम्ही मागील पायरी पुन्हा करू शकाल. थोडा वेळ घ्या आणि बघा की तुम्ही ते नवीन मूल्य प्रिंट करण्यासाठी आवश्यक बदल करू शकता का!

तुम्हाला इशारा हवा असल्यास, तुमची interact.js फाइल या टप्प्यावर कशी दिसली पाहिजे ते येथे आहे:

1// interact.js
2
3const API_KEY = process.env.API_KEY
4const PRIVATE_KEY = process.env.PRIVATE_KEY
5const CONTRACT_ADDRESS = process.env.CONTRACT_ADDRESS
6
7const contract = require("../artifacts/contracts/HelloWorld.sol/HelloWorld.json")
8
9// प्रदाता - Alchemy
10const alchemyProvider = new ethers.providers.AlchemyProvider(
11  (network = "goerli"),
12  API_KEY
13)
14
15// स्वाक्षरीकर्ता - तुम्ही
16const signer = new ethers.Wallet(PRIVATE_KEY, alchemyProvider)
17
18// कॉन्ट्रॅक्ट उदाहरण
19const helloWorldContract = new ethers.Contract(
20  CONTRACT_ADDRESS,
21  contract.abi,
22  signer
23)
24
25async function main() {
26  const message = await helloWorldContract.message()
27  console.log("The message is: " + message)
28
29  console.log("Updating the message...")
30  const tx = await helloWorldContract.update("this is the new message")
31  await tx.wait()
32
33  const newMessage = await helloWorldContract.message()
34  console.log("The new message is: " + newMessage)
35}
36
37main()
सर्व दाखवा

आता फक्त स्क्रिप्ट चालवा आणि तुम्हाला जुना संदेश, अपडेटिंग स्थिती आणि नवीन संदेश तुमच्या टर्मिनलवर छापलेला दिसेल!

npx hardhat run scripts/interact.js --network goerli

1The message is: Hello World!
2Updating the message...
3The new message is: This is the new message.

ती स्क्रिप्ट चालवताना, तुम्हाला कदाचित लक्षात येईल की नवीन संदेश लोड होण्यापूर्वी Updating the message... पायरी लोड होण्यास थोडा वेळ लागतो. हे मायनिंग प्रक्रियेमुळे आहे; जर तुम्हाला व्यवहार माइन होत असताना त्यांचा मागोवा घेण्यास उत्सुकता असेल, तर व्यवहाराची स्थिती पाहण्यासाठी Alchemy मेमपूल (opens in a new tab) ला भेट द्या. जर व्यवहार ड्रॉप झाला, तर Goerli Etherscan (opens in a new tab) तपासणे आणि तुमच्या व्यवहार हॅशसाठी शोधणे देखील उपयुक्त आहे.

भाग ३: तुमचे स्मार्ट कॉन्ट्रॅक्ट Etherscan वर प्रकाशित करा

तुम्ही तुमच्या स्मार्ट कॉन्ट्रॅक्टला जीवदान देण्यासाठी सर्व कठोर परिश्रम केले; आता ते जगासोबत शेअर करण्याची वेळ आली आहे!

Etherscan वर तुमचे स्मार्ट कॉन्ट्रॅक्ट सत्यापित करून, कोणीही तुमचा सोर्स कोड पाहू शकतो आणि तुमच्या स्मार्ट कॉन्ट्रॅक्टशी संवाद साधू शकतो. चला सुरू करूया!

पायरी १: तुमच्या Etherscan खात्यावर एक API की तयार करा

तुम्ही जे स्मार्ट कॉन्ट्रॅक्ट प्रकाशित करण्याचा प्रयत्न करत आहात त्याचे तुम्ही मालक आहात हे सत्यापित करण्यासाठी Etherscan API की आवश्यक आहे.

तुमच्याकडे आधीपासून Etherscan खाते नसल्यास, खात्यासाठी साइन अप करा (opens in a new tab).

एकदा लॉग इन केल्यावर, नेव्हिगेशन बारमध्ये तुमचे वापरकर्तानाव शोधा, त्यावर होव्हर करा आणि माझे प्रोफाइल बटण निवडा.

तुमच्या प्रोफाइल पेजवर, तुम्हाला एक साइड नेव्हिगेशन बार दिसेल. साइड नेव्हिगेशन बारमधून, API की निवडा. पुढे, नवीन API की तयार करण्यासाठी "जोडा" बटण दाबा, तुमच्या ॲपला hello-world नाव द्या आणि नवीन API की तयार करा बटण दाबा.

तुमची नवीन API की API की टेबलमध्ये दिसेल. API की तुमच्या क्लिपबोर्डवर कॉपी करा.

पुढे, आम्हाला आमच्या .env फाइलमध्ये Etherscan API की जोडण्याची आवश्यकता आहे.

ते जोडल्यानंतर, तुमची .env फाइल अशी दिसेल:

1API_URL = "https://eth-goerli.alchemyapi.io/v2/your-api-key"
2PUBLIC_KEY = "your-public-account-address"
3PRIVATE_KEY = "your-private-account-address"
4CONTRACT_ADDRESS = "your-contract-address"
5ETHERSCAN_API_KEY = "your-etherscan-key"

Hardhat-तैनात स्मार्ट कॉन्ट्रॅक्ट

hardhat-etherscan इन्स्टॉल करा

Hardhat वापरून तुमचे कॉन्ट्रॅक्ट Etherscan वर प्रकाशित करणे सोपे आहे. सुरुवात करण्यासाठी तुम्हाला प्रथम hardhat-etherscan प्लगइन इन्स्टॉल करावे लागेल. hardhat-etherscan आपोआप स्मार्ट कॉन्ट्रॅक्टचा सोर्स कोड आणि ABI Etherscan वर सत्यापित करेल. हे जोडण्यासाठी, hello-world डिरेक्टरीमध्ये चालवा:

1npm install --save-dev @nomiclabs/hardhat-etherscan

एकदा इन्स्टॉल झाल्यावर, तुमच्या hardhat.config.js च्या शीर्षस्थानी खालील विधान समाविष्ट करा, आणि Etherscan कॉन्फिग पर्याय जोडा:

1// hardhat.config.js
2
3require("dotenv").config()
4require("@nomiclabs/hardhat-ethers")
5require("@nomiclabs/hardhat-etherscan")
6
7const { API_URL, PRIVATE_KEY, ETHERSCAN_API_KEY } = process.env
8
9module.exports = {
10  solidity: "0.7.3",
11  defaultNetwork: "goerli",
12  networks: {
13    hardhat: {},
14    goerli: {
15      url: API_URL,
16      accounts: [`0x${PRIVATE_KEY}`],
17    },
18  },
19  etherscan: {
20    // Etherscan साठी तुमची API की
21    // https://etherscan.io/ वर एक मिळवा
22    apiKey: ETHERSCAN_API_KEY,
23  },
24}
सर्व दाखवा

Etherscan वर तुमचे स्मार्ट कॉन्ट्रॅक्ट सत्यापित करा

सर्व फायली सेव्ह झाल्या आहेत आणि सर्व .env व्हेरिएबल्स योग्यरित्या कॉन्फिगर केले आहेत याची खात्री करा.

verify टास्क चालवा, कॉन्ट्रॅक्ट पत्ता आणि ज्या नेटवर्कवर ते तैनात आहे ते पास करा:

1npx hardhat verify --network goerli DEPLOYED_CONTRACT_ADDRESS 'Hello World!'

खात्री करा की DEPLOYED_CONTRACT_ADDRESS हे Goerli टेस्ट नेटवर्कवर तुमच्या तैनात केलेल्या स्मार्ट कॉन्ट्रॅक्टचा पत्ता आहे. तसेच, अंतिम युक्तिवाद ('Hello World!') हा भाग १ मधील तैनाती पायरी दरम्यान वापरलेल्या समान स्ट्रिंग मूल्याचा असावा.

जर सर्व काही ठीक झाले, तर तुम्हाला तुमच्या टर्मिनलमध्ये खालील संदेश दिसेल:

1Successfully submitted source code for contract
2contracts/HelloWorld.sol:HelloWorld at 0xdeployed-contract-address
3for verification on Etherscan. Waiting for verification result...
4
5
6Successfully verified contract HelloWorld on Etherscan.
7https://goerli.etherscan.io/address/<contract-address>#contracts

अभिनंदन! तुमचा स्मार्ट कॉन्ट्रॅक्ट कोड Etherscan वर आहे!

Etherscan वर तुमचे स्मार्ट कॉन्ट्रॅक्ट तपासा!

जेव्हा तुम्ही तुमच्या टर्मिनलमध्ये दिलेल्या लिंकवर नेव्हिगेट करता, तेव्हा तुम्हाला तुमचा स्मार्ट कॉन्ट्रॅक्ट कोड आणि ABI Etherscan वर प्रकाशित केलेला दिसेल!

व्वा - तुम्ही ते केले चॅम्प! आता कोणीही तुमच्या स्मार्ट कॉन्ट्रॅक्टला कॉल किंवा लिहू शकतो! तुम्ही पुढे काय तयार करता हे पाहण्यासाठी आम्ही उत्सुक आहोत!

भाग ४ - तुमचे स्मार्ट कॉन्ट्रॅक्ट फ्रंटएंडसह एकत्रित करणे

या ट्युटोरियलच्या अखेरीस, तुम्हाला कळेल की कसे:

• तुमच्या डॅपला MetaMask वॉलेट कनेक्ट करा
• Alchemy Web3 (opens in a new tab) API वापरून तुमच्या स्मार्ट कॉन्ट्रॅक्टमधून डेटा वाचा
• MetaMask वापरून Ethereum व्यवहारांवर स्वाक्षरी करा

या डॅपसाठी, आम्ही आमच्या फ्रंटएंड फ्रेमवर्क म्हणून React (opens in a new tab) वापरणार आहोत; तथापि, हे लक्षात घेणे महत्त्वाचे आहे की आम्ही त्याच्या मूलभूत गोष्टींचे विश्लेषण करण्यात जास्त वेळ घालवणार नाही, कारण आम्ही मुख्यतः आमच्या प्रकल्पात Web3 कार्यक्षमता आणण्यावर लक्ष केंद्रित करणार आहोत.

एक पूर्वअट म्हणून, तुम्हाला React चे नवशिक्या-स्तराचे ज्ञान असले पाहिजे. नसल्यास, आम्ही अधिकृत React चा परिचय ट्युटोरियल (opens in a new tab) पूर्ण करण्याची शिफारस करतो.

स्टार्टर फाइल्स क्लोन करा

प्रथम, या प्रकल्पासाठी स्टार्टर फायली मिळवण्यासाठी hello-world-part-four GitHub रेपॉजिटरी (opens in a new tab) वर जा आणि ही रेपॉजिटरी तुमच्या स्थानिक मशीनवर क्लोन करा.

क्लोन केलेली रेपॉजिटरी स्थानिकरित्या उघडा. लक्षात घ्या की त्यात दोन फोल्डर आहेत: starter-files आणि completed.

• starter-files- आम्ही या डिरेक्टरीमध्ये काम करणार आहोत, आम्ही UI ला तुमच्या Ethereum वॉलेटशी आणि आम्ही भाग ३ मध्ये Etherscan वर प्रकाशित केलेल्या स्मार्ट कॉन्ट्रॅक्टशी कनेक्ट करू.
• completed मध्ये संपूर्ण पूर्ण ट्युटोरियल आहे आणि तुम्ही अडकल्यास केवळ संदर्भ म्हणून वापरले पाहिजे.

पुढे, तुमची starter-files ची प्रत तुमच्या आवडत्या कोड एडिटरमध्ये उघडा आणि नंतर src फोल्डरमध्ये नेव्हिगेट करा.

आपण लिहिणार असलेला सर्व कोड src फोल्डरखाली असेल. आमच्या प्रकल्पाला Web3 कार्यक्षमता देण्यासाठी आम्ही HelloWorld.js घटक आणि util/interact.js जावास्क्रिप्ट फायली संपादित करणार आहोत.

स्टार्टर फायली तपासा

आम्ही कोडिंग सुरू करण्यापूर्वी, चला स्टार्टर फायलींमध्ये आम्हाला काय प्रदान केले आहे ते पाहूया.

तुमचा react प्रोजेक्ट चालू करा

चला आपल्या ब्राउझरमध्ये React प्रोजेक्ट चालवून सुरुवात करूया. React चे सौंदर्य हे आहे की एकदा आपला प्रोजेक्ट आपल्या ब्राउझरमध्ये चालू झाला की, आपण केलेले कोणतेही बदल आपल्या ब्राउझरमध्ये थेट अपडेट केले जातील.

प्रकल्प चालू करण्यासाठी, starter-files फोल्डरच्या रूट डिरेक्टरीवर नेव्हिगेट करा, आणि प्रकल्पाच्या अवलंबित्वे स्थापित करण्यासाठी तुमच्या टर्मिनलमध्ये npm install चालवा:

cd starter-files
npm install

एकदा ते इन्स्टॉल झाल्यावर, तुमच्या टर्मिनलमध्ये npm start चालवा:

npm start

असे केल्याने तुमच्या ब्राउझरमध्ये http://localhost:3000/ (opens in a new tab) उघडले पाहिजे, जिथे तुम्हाला आमच्या प्रकल्पासाठी फ्रंटएंड दिसेल. त्यात एक फील्ड (तुमच्या स्मार्ट कॉन्ट्रॅक्टमध्ये संग्रहित केलेला संदेश अपडेट करण्यासाठी एक जागा), एक "वॉलेट कनेक्ट करा" बटण आणि एक "अपडेट करा" बटण असले पाहिजे.

तुम्ही कोणतेही बटण क्लिक करण्याचा प्रयत्न केल्यास, तुम्हाला लक्षात येईल की ते कार्य करत नाहीत—कारण आम्हाला अजूनही त्यांची कार्यक्षमता प्रोग्राम करायची आहे.

HelloWorld.js घटक

चला आमच्या एडिटरमधील src फोल्डरमध्ये परत जाऊया आणि HelloWorld.js फाइल उघडूया. या फाईलमधील सर्व काही समजून घेणे खूप महत्त्वाचे आहे, कारण हा प्राथमिक React घटक आहे ज्यावर आपण काम करणार आहोत.

या फाइलच्या शीर्षस्थानी, तुम्हाला दिसेल की आमच्याकडे अनेक आयात विधाने आहेत जी आमचा प्रकल्प चालू करण्यासाठी आवश्यक आहेत, ज्यात React लायब्ररी, useEffect आणि useState हुक्स, ./util/interact.js मधील काही आयटम (आम्ही त्यांना लवकरच अधिक तपशीलवार वर्णन करू!) आणि Alchemy लोगो समाविष्ट आहेत.

1// HelloWorld.js
2
3import React from "react"
4import { useEffect, useState } from "react"
5import {
6  helloWorldContract,
7  connectWallet,
8  updateMessage,
9  loadCurrentMessage,
10  getCurrentWalletConnected,
11} from "./util/interact.js"
12
13import alchemylogo from "./alchemylogo.svg"
सर्व दाखवा

पुढे, आमच्याकडे आमचे स्टेट व्हेरिएबल्स आहेत जे आम्ही विशिष्ट इव्हेंटनंतर अपडेट करू.

1// HelloWorld.js
2
3//स्टेट व्हेरिएबल्स
4const [walletAddress, setWallet] = useState("")
5const [status, setStatus] = useState("")
6const [message, setMessage] = useState("नेटवर्कशी कोणतेही कनेक्शन नाही.")
7const [newMessage, setNewMessage] = useState("")

प्रत्येक व्हेरिएबल काय दर्शवते ते येथे आहे:

• walletAddress - वापरकर्त्याचा वॉलेट ॲड्रेस साठवणारी एक स्ट्रिंग
• status- एक स्ट्रिंग जी वापरकर्त्याला डॅपशी कसे संवाद साधावा याबद्दल मार्गदर्शन करणारा उपयुक्त संदेश संग्रहित करते
• message - एक स्ट्रिंग जी स्मार्ट कॉन्ट्रॅक्टमधील सध्याचा संदेश संग्रहित करते
• newMessage - एक स्ट्रिंग जी स्मार्ट कॉन्ट्रॅक्टमध्ये लिहिला जाणारा नवीन संदेश संग्रहित करते

स्टेट व्हेरिएबल्सनंतर, तुम्हाला पाच अंमलबजावणी न केलेली फंक्शन्स दिसतील: useEffect, addSmartContractListener, addWalletListener, connectWalletPressed, आणि onUpdatePressed. ते काय करतात ते आम्ही खाली स्पष्ट करू:

1// HelloWorld.js
2
3//केवळ एकदाच कॉल केले जाते
4useEffect(async () => {
5  //TODO: अंमलबजावणी करा
6}, [])
7
8function addSmartContractListener() {
9  //TODO: अंमलबजावणी करा
10}
11
12function addWalletListener() {
13  //TODO: अंमलबजावणी करा
14}
15
16const connectWalletPressed = async () => {
17  //TODO: अंमलबजावणी करा
18}
19
20const onUpdatePressed = async () => {
21  //TODO: अंमलबजावणी करा
22}
सर्व दाखवा

• useEffect (opens in a new tab)- हा एक React हुक आहे जो तुमचा घटक प्रस्तुत झाल्यानंतर कॉल केला जातो. कारण त्यात एक रिकामा ॲरे [] प्रॉप पास केला आहे (ओळ ४ पहा), तो फक्त घटकाच्या पहिल्या रेंडरवर कॉल केला जाईल. येथे आम्ही आमच्या स्मार्ट कॉन्ट्रॅक्टमध्ये संग्रहित केलेला सध्याचा संदेश लोड करू, आमचे स्मार्ट कॉन्ट्रॅक्ट आणि वॉलेट श्रोत्यांना कॉल करू, आणि वॉलेट आधीच कनेक्ट केलेले आहे की नाही हे दर्शविण्यासाठी आमचे UI अपडेट करू.
• addSmartContractListener- हे फंक्शन एक श्रोता सेट करते जो आमच्या HelloWorld कॉन्ट्रॅक्टच्या UpdatedMessages इव्हेंटवर लक्ष ठेवेल आणि आमच्या स्मार्ट कॉन्ट्रॅक्टमधील संदेश बदलल्यावर आमचे UI अपडेट करेल.
• addWalletListener- हे फंक्शन एक श्रोता सेट करते जो वापरकर्त्याच्या MetaMask वॉलेटच्या स्थितीत बदल ओळखतो, जसे की वापरकर्ता त्यांचे वॉलेट डिस्कनेक्ट करतो किंवा पत्ते बदलतो.
• connectWalletPressed- हे फंक्शन वापरकर्त्याचे MetaMask वॉलेट आमच्या डॅपशी कनेक्ट करण्यासाठी कॉल केले जाईल.
• onUpdatePressed - हे फंक्शन तेव्हा कॉल केले जाईल जेव्हा वापरकर्त्याला स्मार्ट कॉन्ट्रॅक्टमध्ये संग्रहित केलेला संदेश अपडेट करायचा असेल.

या फाइलच्या शेवटी, आमच्याकडे आमच्या घटकाचा UI आहे.

1// HelloWorld.js
2
3//आमच्या घटकाचे UI
4return (
5  <div id="container">
6    <img id="logo" src={alchemylogo}></img>
7    <button id="walletButton" onClick={connectWalletPressed}>
8      {walletAddress.length > 0 ? (
9        "Connected: " +
10        String(walletAddress).substring(0, 6) +
11        "..." +
12        String(walletAddress).substring(38)
13      ) : (
14        <span>Connect Wallet</span>
15      )}
16    </button>
17
18    <h2 style={{ paddingTop: "50px" }}>Current Message:</h2>
19    <p>{message}</p>
20
21    <h2 style={{ paddingTop: "18px" }}>New Message:</h2>
22
23    <div>
24      <input
25        type="text"
26        placeholder="Update the message in your smart contract."
27        onChange={(e) => setNewMessage(e.target.value)}
28        value={newMessage}
29      />
30      <p id="status">{status}</p>
31
32      <button id="publishButton" onClick={onUpdatePressed}>
33        Update
34      </button>
35</div>
36 
37</div>
38)
सर्व दाखवा

तुम्ही हा कोड काळजीपूर्वक स्कॅन केल्यास, तुम्हाला दिसेल की आम्ही आमच्या UI मध्ये आमचे विविध स्टेट व्हेरिएबल्स कुठे वापरतो:

• ओळी ६-१२ वर, जर वापरकर्त्याचे वॉलेट कनेक्ट केलेले असेल (म्हणजे, walletAddress.length > 0), तर आम्ही "walletButton" आयडी असलेल्या बटणामध्ये वापरकर्त्याच्या walletAddress ची एक संक्षिप्त आवृत्ती प्रदर्शित करतो; अन्यथा ते फक्त "वॉलेट कनेक्ट करा" असे म्हणते.
• ओळ १७ वर, आम्ही स्मार्ट कॉन्ट्रॅक्टमध्ये संग्रहित केलेला सध्याचा संदेश प्रदर्शित करतो, जो message स्ट्रिंगमध्ये कॅप्चर केला जातो.
• ओळी २३-२६ वर, टेक्स्ट फील्डमधील इनपुट बदलल्यावर आमचे newMessage स्टेट व्हेरिएबल अपडेट करण्यासाठी आम्ही नियंत्रित घटक (opens in a new tab) वापरतो.

आमच्या स्टेट व्हेरिएबल्स व्यतिरिक्त, तुम्हाला दिसेल की publishButton आणि walletButton आयडी असलेली बटणे क्लिक केल्यावर अनुक्रमे connectWalletPressed आणि onUpdatePressed फंक्शन्स कॉल केली जातात.

शेवटी, चला पाहूया की हा HelloWorld.js घटक कुठे जोडला आहे.

तुम्ही App.js फाइलवर गेल्यास, जी React मधील मुख्य घटक आहे जी इतर सर्व घटकांसाठी कंटेनर म्हणून काम करते, तुम्हाला दिसेल की आमचा HelloWorld.js घटक ओळ ७ वर इंजेक्ट केला आहे.

शेवटचे पण महत्त्वाचे, चला तुमच्यासाठी प्रदान केलेली आणखी एक फाइल पाहूया, interact.js फाइल.

interact.js फाइल

कारण आम्हाला M-V-C (opens in a new tab) पॅराडाइमचे पालन करायचे आहे, आम्हाला एक वेगळी फाइल हवी आहे ज्यात आमच्या डॅपच्या तर्कशास्त्र, डेटा आणि नियमांचे व्यवस्थापन करण्यासाठी आमची सर्व फंक्शन्स असतील, आणि नंतर ती फंक्शन्स आमच्या फ्रंटएंडवर (आमचा HelloWorld.js घटक) निर्यात करता येतील.

👆🏽हाच आमच्या interact.js फाइलचा नेमका उद्देश आहे!

तुमच्या src डिरेक्टरीमधील util फोल्डरवर नेव्हिगेट करा, आणि तुम्हाला दिसेल की आम्ही interact.js नावाची फाइल समाविष्ट केली आहे ज्यात आमची सर्व स्मार्ट कॉन्ट्रॅक्ट संवाद आणि वॉलेट फंक्शन्स आणि व्हेरिएबल्स असतील.

1// interact.js
2
3//export const helloWorldContract;
4
5export const loadCurrentMessage = async () => {}
6
7export const connectWallet = async () => {}
8
9const getCurrentWalletConnected = async () => {}
10
11export const updateMessage = async (message) => {}
सर्व दाखवा

तुम्हाला फाइलच्या शीर्षस्थानी दिसेल की आम्ही helloWorldContract ऑब्जेक्टवर टिप्पणी केली आहे. नंतर या ट्युटोरियलमध्ये, आम्ही या ऑब्जेक्टवरील टिप्पणी काढून टाकू आणि या व्हेरिएबलमध्ये आमचे स्मार्ट कॉन्ट्रॅक्ट इन्स्टँटिएट करू, जे आम्ही नंतर आमच्या HelloWorld.js घटकामध्ये निर्यात करू.

आमच्या helloWorldContract ऑब्जेक्टनंतरची चार अंमलबजावणी न केलेली फंक्शन्स खालीलप्रमाणे करतात:

• loadCurrentMessage - हे फंक्शन स्मार्ट कॉन्ट्रॅक्टमध्ये संग्रहित केलेला सध्याचा संदेश लोड करण्याच्या तर्कशास्त्राचे व्यवस्थापन करते. ते Alchemy Web3 API (opens in a new tab) वापरून हॅलो वर्ल्ड स्मार्ट कॉन्ट्रॅक्टला वाचण्याचा कॉल करेल.
• connectWallet - हे फंक्शन वापरकर्त्याचे MetaMask आमच्या डॅपशी कनेक्ट करेल.
• getCurrentWalletConnected - हे फंक्शन तपासेल की Ethereum खाते आधीपासूनच आमच्या डॅपशी पेज लोडवर कनेक्ट केलेले आहे की नाही आणि त्यानुसार आमचे UI अपडेट करेल.
• updateMessage - हे फंक्शन स्मार्ट कॉन्ट्रॅक्टमध्ये संग्रहित केलेला संदेश अपडेट करेल. हे हॅलो वर्ल्ड स्मार्ट कॉन्ट्रॅक्टला लिहिण्याचा कॉल करेल, त्यामुळे वापरकर्त्याच्या MetaMask वॉलेटला संदेश अपडेट करण्यासाठी Ethereum व्यवहारावर स्वाक्षरी करावी लागेल.

आता आम्हाला समजले आहे की आम्ही कशावर काम करत आहोत, चला पाहूया की आमच्या स्मार्ट कॉन्ट्रॅक्टमधून कसे वाचायचे!

पायरी ३: तुमच्या स्मार्ट कॉन्ट्रॅक्टमधून वाचा

तुमच्या स्मार्ट कॉन्ट्रॅक्टमधून वाचण्यासाठी, तुम्हाला यशस्वीरित्या सेट अप करावे लागेल:

• Ethereum चेनशी एक API कनेक्शन
• तुमच्या स्मार्ट कॉन्ट्रॅक्टचे एक लोड केलेले उदाहरण
• तुमच्या स्मार्ट कॉन्ट्रॅक्ट फंक्शनला कॉल करण्यासाठी एक फंक्शन
• तुम्ही स्मार्ट कॉन्ट्रॅक्टमधून वाचत असलेल्या डेटामध्ये बदल झाल्यावर अपडेट्ससाठी पाहण्यासाठी एक श्रोता

हे खूप पायऱ्या वाटू शकतात, पण काळजी करू नका! आम्ही तुम्हाला त्या प्रत्येक पायरीतून कसे जायचे हे टप्प्याटप्प्याने सांगू! :)

Ethereum चेनशी एक API कनेक्शन स्थापित करा

तर लक्षात आहे का, या ट्युटोरियलच्या भाग २ मध्ये, आम्ही आमच्या स्मार्ट कॉन्ट्रॅक्टमधून वाचण्यासाठी आमची Alchemy Web3 की वापरली होती (opens in a new tab)? तुमच्या डॅपमध्ये चेनवरून वाचण्यासाठी तुम्हाला Alchemy Web3 की ची देखील आवश्यकता असेल.

तुमच्याकडे आधीपासून नसल्यास, प्रथम Alchemy Web3 (opens in a new tab) इन्स्टॉल करा, तुमच्या starter-files च्या रूट डिरेक्टरीवर नेव्हिगेट करून आणि तुमच्या टर्मिनलमध्ये खालील चालवून:

1npm install @alch/alchemy-web3

Alchemy Web3 (opens in a new tab) हे Web3.js (opens in a new tab) च्या सभोवतालचे एक रॅपर आहे, जे एक वेब3 डेव्हलपर म्हणून तुमचे जीवन सोपे करण्यासाठी वर्धित API पद्धती आणि इतर महत्त्वपूर्ण फायदे प्रदान करते. हे कमीत कमी कॉन्फिगरेशन आवश्यक करण्यासाठी डिझाइन केलेले आहे जेणेकरून आपण आपल्या ॲपमध्ये लगेचच त्याचा वापर सुरू करू शकता!

मग, तुमच्या प्रकल्प डिरेक्टरीमध्ये dotenv (opens in a new tab) पॅकेज इन्स्टॉल करा, जेणेकरून आम्ही आमची API की मिळवल्यानंतर ती संग्रहित करण्यासाठी आमच्याकडे एक सुरक्षित जागा असेल.

1npm install dotenv --save

आमच्या डॅपसाठी, आम्ही आमची HTTP API की ऐवजी आमची Websockets API की वापरणार आहोत, कारण ते आम्हाला एक श्रोता सेट करण्याची परवानगी देईल जो स्मार्ट कॉन्ट्रॅक्टमध्ये संग्रहित केलेला संदेश बदलल्यावर ओळखतो.

एकदा तुमच्याकडे तुमची API की आल्यावर, तुमच्या रूट डिरेक्टरीमध्ये .env फाइल तयार करा आणि त्यात तुमची Alchemy Websockets url जोडा. त्यानंतर, तुमची .env फाइल अशी दिसेल:

1REACT_APP_ALCHEMY_KEY = wss://eth-goerli.ws.alchemyapi.io/v2/<key>

आता, आम्ही आमच्या डॅपमध्ये आमचा Alchemy Web3 एंडपॉइंट सेट करण्यासाठी तयार आहोत! चला आमच्या util फोल्डरमध्ये असलेल्या आमच्या interact.js फाइलवर परत जाऊया आणि फाइलच्या शीर्षस्थानी खालील कोड जोडूया:

1// interact.js
2
3require("dotenv").config()
4const alchemyKey = process.env.REACT_APP_ALCHEMY_KEY
5const { createAlchemyWeb3 } = require("@alch/alchemy-web3")
6const web3 = createAlchemyWeb3(alchemyKey)
7
8//export const helloWorldContract;

वर, आम्ही प्रथम आमच्या .env फाइलमधून Alchemy की आयात केली आणि नंतर आमचा Alchemy Web3 एंडपॉइंट स्थापित करण्यासाठी आमची alchemyKey createAlchemyWeb3 ला पास केली.

हा एंडपॉइंट तयार झाल्यावर, आमचे स्मार्ट कॉन्ट्रॅक्ट लोड करण्याची वेळ आली आहे!

तुमचे हॅलो वर्ल्ड स्मार्ट कॉन्ट्रॅक्ट लोड करत आहे

तुमचे हॅलो वर्ल्ड स्मार्ट कॉन्ट्रॅक्ट लोड करण्यासाठी, तुम्हाला त्याचा कॉन्ट्रॅक्ट पत्ता आणि ABI आवश्यक असेल, जे दोन्ही Etherscan वर आढळू शकतात जर तुम्ही या ट्युटोरियलचा भाग ३ पूर्ण केला असेल.

Etherscan वरून तुमचे कॉन्ट्रॅक्ट ABI कसे मिळवायचे

तुम्ही या ट्युटोरियलचा भाग ३ वगळल्यास, तुम्ही 0x6f3f635A9762B47954229Ea479b4541eAF402A6A (opens in a new tab) पत्त्यासह HelloWorld कॉन्ट्रॅक्ट वापरू शकता. त्याचे ABI येथे (opens in a new tab) आढळू शकते.

एक कॉन्ट्रॅक्ट ABI हे निर्दिष्ट करण्यासाठी आवश्यक आहे की कॉन्ट्रॅक्ट कोणते फंक्शन कॉल करेल तसेच फंक्शन तुमच्या अपेक्षित स्वरूपात डेटा परत करेल याची खात्री करण्यासाठी. एकदा आम्ही आमचे कॉन्ट्रॅक्ट ABI कॉपी केल्यावर, चला ते तुमच्या src डिरेक्टरीमध्ये contract-abi.json नावाची JSON फाइल म्हणून सेव्ह करूया.

तुमची contract-abi.json तुमच्या src फोल्डरमध्ये संग्रहित केली पाहिजे.

आमच्या कॉन्ट्रॅक्ट पत्ता, ABI, आणि Alchemy Web3 एंडपॉइंटसह सज्ज, आम्ही आमच्या स्मार्ट कॉन्ट्रॅक्टचे एक उदाहरण लोड करण्यासाठी कॉन्ट्रॅक्ट पद्धत (opens in a new tab) वापरू शकतो. तुमचे कॉन्ट्रॅक्ट ABI interact.js फाइलमध्ये आयात करा आणि तुमचा कॉन्ट्रॅक्ट पत्ता जोडा.

1// interact.js
2
3const contractABI = require("../contract-abi.json")
4const contractAddress = "0x6f3f635A9762B47954229Ea479b4541eAF402A6A"

आम्ही आता अखेरीस आमच्या helloWorldContract व्हेरिएबलवरील टिप्पणी काढून टाकू शकतो, आणि आमचा AlchemyWeb3 एंडपॉइंट वापरून स्मार्ट कॉन्ट्रॅक्ट लोड करू शकतो:

1// interact.js
2export const helloWorldContract = new web3.eth.Contract(
3  contractABI,
4  contractAddress
5)

रिकॅप करण्यासाठी, तुमच्या interact.js च्या पहिल्या १२ ओळी आता अशा दिसल्या पाहिजेत:

1// interact.js
2
3require("dotenv").config()
4const alchemyKey = process.env.REACT_APP_ALCHEMY_KEY
5const { createAlchemyWeb3 } = require("@alch/alchemy-web3")
6const web3 = createAlchemyWeb3(alchemyKey)
7
8const contractABI = require("../contract-abi.json")
9const contractAddress = "0x6f3f635A9762B47954229Ea479b4541eAF402A6A"
10
11export const helloWorldContract = new web3.eth.Contract(
12  contractABI,
13  contractAddress
14)
सर्व दाखवा

आता आमचे कॉन्ट्रॅक्ट लोड झाले आहे, आम्ही आमचे loadCurrentMessage फंक्शन अंमलात आणू शकतो!

तुमच्या interact.js फाइलमध्ये loadCurrentMessage अंमलात आणणे

हे फंक्शन खूप सोपे आहे. आम्ही आमच्या कॉन्ट्रॅक्टमधून वाचण्यासाठी एक साधा असिंक वेब3 कॉल करणार आहोत. आमचे फंक्शन स्मार्ट कॉन्ट्रॅक्टमध्ये संग्रहित केलेला संदेश परत करेल:

तुमच्या interact.js फाइलमधील loadCurrentMessage खालीलप्रमाणे अपडेट करा:

1// interact.js
2
3export const loadCurrentMessage = async () => {
4  const message = await helloWorldContract.methods.message().call()
5  return message
6}

आम्हाला हा स्मार्ट कॉन्ट्रॅक्ट आमच्या UI मध्ये प्रदर्शित करायचा असल्याने, चला आमच्या HelloWorld.js घटकामधील useEffect फंक्शन खालीलप्रमाणे अपडेट करूया:

1// HelloWorld.js
2
3//केवळ एकदाच कॉल केले जाते
4useEffect(async () => {
5  const message = await loadCurrentMessage()
6  setMessage(message)
7}, [])

लक्षात घ्या, आम्हाला आमचे loadCurrentMessage फक्त घटकाच्या पहिल्या रेंडर दरम्यान एकदाच कॉल करायचे आहे. स्मार्ट कॉन्ट्रॅक्टमधील संदेश बदलल्यानंतर UI आपोआप अपडेट करण्यासाठी आम्ही लवकरच addSmartContractListener अंमलात आणू.

आमच्या श्रोत्यामध्ये जाण्यापूर्वी, चला पाहूया की आतापर्यंत आमच्याकडे काय आहे! तुमच्या HelloWorld.js आणि interact.js फायली सेव्ह करा, आणि नंतर http://localhost:3000/ (opens in a new tab) वर जा

तुम्हाला दिसेल की सध्याचा संदेश आता "नेटवर्कशी कोणतेही कनेक्शन नाही" असे म्हणत नाही. त्याऐवजी ते स्मार्ट कॉन्ट्रॅक्टमध्ये संग्रहित केलेला संदेश दर्शवते. छान!

तुमचे UI आता स्मार्ट कॉन्ट्रॅक्टमध्ये संग्रहित केलेला संदेश दर्शवला पाहिजे

आता त्या श्रोत्याबद्दल बोलूया...

addSmartContractListener अंमलात आणा

जर तुम्ही या ट्युटोरियल मालिकेच्या भाग १ (opens in a new tab) मध्ये लिहिलेली HelloWorld.sol फाइल आठवत असाल, तर तुम्हाला आठवेल की UpdatedMessages नावाचा एक स्मार्ट कॉन्ट्रॅक्ट इव्हेंट आहे जो आमच्या स्मार्ट कॉन्ट्रॅक्टच्या update फंक्शनला कॉल केल्यानंतर उत्सर्जित होतो (ओळी ९ आणि २७ पहा):

1// HelloWorld.sol
2
3// सिमेंटिक व्हर्जनिंग वापरून, Solidity ची आवृत्ती निर्दिष्ट करते.
4// अधिक जाणून घ्या: https://solidity.readthedocs.io/en/v0.5.10/layout-of-source-files.html#pragma
5pragma solidity ^0.7.3;
6
7// `HelloWorld` नावाचे एक कॉन्ट्रॅक्ट परिभाषित करते.
8// एक कॉन्ट्रॅक्ट म्हणजे फंक्शन्स आणि डेटा (त्याची स्थिती) यांचा संग्रह. एकदा तैनात झाल्यावर, एक कॉन्ट्रॅक्ट Ethereum ब्लॉकचेनवर एका विशिष्ट पत्त्यावर राहते. अधिक जाणून घ्या: https://solidity.readthedocs.io/en/v0.5.10/structure-of-a-contract.html
9contract HelloWorld {
10
11   //जेव्हा अपडेट फंक्शन कॉल केले जाते तेव्हा उत्सर्जित होते
12   //स्मार्ट कॉन्ट्रॅक्ट इव्हेंट्स हे तुमच्या कॉन्ट्रॅक्टसाठी तुमच्या ॲपच्या फ्रंट-एंडला ब्लॉकचेनवर काहीतरी घडल्याचे कळवण्याचा एक मार्ग आहे, जे काही विशिष्ट इव्हेंट्ससाठी 'ऐकत' असू शकते आणि ते घडल्यावर कारवाई करू शकते.
13   event UpdatedMessages(string oldStr, string newStr);
14
15   // `string` प्रकारचा `message` नावाचा एक स्टेट व्हेरिएबल घोषित करते.
16   // स्टेट व्हेरिएबल्स असे व्हेरिएबल्स आहेत ज्यांची मूल्ये कॉन्ट्रॅक्ट स्टोरेजमध्ये कायमस्वरूपी संग्रहित केली जातात. `public` कीवर्ड व्हेरिएबल्सला कॉन्ट्रॅक्टच्या बाहेरून प्रवेशयोग्य बनवतो आणि एक फंक्शन तयार करतो ज्याला इतर कॉन्ट्रॅक्ट्स किंवा क्लायंट मूल्यामध्ये प्रवेश करण्यासाठी कॉल करू शकतात.
17   string public message;
18
19   // अनेक वर्ग-आधारित ऑब्जेक्ट-ओरिएंटेड भाषांप्रमाणे, कंस्ट्रक्टर एक विशेष फंक्शन आहे जे फक्त कॉन्ट्रॅक्ट निर्मितीवर कार्यान्वित होते.
20   // कंस्ट्रक्टरचा वापर कॉन्ट्रॅक्टचा डेटा सुरू करण्यासाठी केला जातो. अधिक जाणून घ्या:https://solidity.readthedocs.io/en/v0.5.10/contracts.html#constructors
21   constructor(string memory initMessage) {
22
23      // एक स्ट्रिंग युक्तिवाद `initMessage` स्वीकारते आणि कॉन्ट्रॅक्टच्या `message` स्टोरेज व्हेरिएबलमध्ये मूल्य सेट करते).
24      message = initMessage;
25   }
26
27   // एक सार्वजनिक फंक्शन जे स्ट्रिंग युक्तिवाद स्वीकारते आणि `message` स्टोरेज व्हेरिएबल अपडेट करते.
28   function update(string memory newMessage) public {
29      string memory oldMsg = message;
30      message = newMessage;
31      emit UpdatedMessages(oldMsg, newMessage);
32   }
33}
सर्व दाखवा

स्मार्ट कॉन्ट्रॅक्ट इव्हेंट्स हे तुमच्या कॉन्ट्रॅक्टसाठी तुमच्या फ्रंट-एंड ॲप्लिकेशनला ब्लॉकचेनवर काहीतरी घडल्याचे (म्हणजे, एक इव्हेंट होता) कळवण्याचा एक मार्ग आहे, जे विशिष्ट इव्हेंटसाठी 'ऐकत' असू शकते आणि ते घडल्यावर कारवाई करू शकते.

addSmartContractListener फंक्शन विशेषतः आमच्या हॅलो वर्ल्ड स्मार्ट कॉन्ट्रॅक्टच्या UpdatedMessages इव्हेंटसाठी ऐकेल, आणि नवीन संदेश प्रदर्शित करण्यासाठी आमचे UI अपडेट करेल.

addSmartContractListener खालीलप्रमाणे सुधारित करा:

1// HelloWorld.js
2
3function addSmartContractListener() {
4  helloWorldContract.events.UpdatedMessages({}, (error, data) => {
5    if (error) {
6      setStatus("😥 " + error.message)
7    } else {
8      setMessage(data.returnValues[1])
9      setNewMessage("")
10      setStatus("🎉 तुमचा संदेश अपडेट झाला आहे!")
11    }
12  })
13}
सर्व दाखवा

चला पाहूया की श्रोता इव्हेंट ओळखल्यावर काय होते:

• इव्हेंट उत्सर्जित झाल्यावर त्रुटी आढळल्यास, ते आमच्या status स्टेट व्हेरिएबलद्वारे UI मध्ये दिसेल.
• अन्यथा, आम्ही परत आलेला data ऑब्जेक्ट वापरू. data.returnValues हा एक ॲरे आहे जो शून्यावर अनुक्रमित आहे जिथे ॲरेमधील पहिला घटक मागील संदेश आणि दुसरा घटक अपडेट केलेला संदेश संग्रहित करतो. एकत्रितपणे, यशस्वी इव्हेंटवर आम्ही आमची message स्ट्रिंग अपडेट केलेल्या संदेशावर सेट करू, newMessage स्ट्रिंग साफ करू, आणि आमच्या स्मार्ट कॉन्ट्रॅक्टवर नवीन संदेश प्रकाशित झाला आहे हे दर्शविण्यासाठी आमची status स्टेट व्हेरिएबल अपडेट करू.

शेवटी, चला आमच्या useEffect फंक्शनमध्ये आमच्या श्रोत्याला कॉल करूया जेणेकरून ते HelloWorld.js घटकाच्या पहिल्या रेंडरवर सुरू होईल. एकत्रितपणे, तुमचे useEffect फंक्शन असे दिसले पाहिजे:

1// HelloWorld.js
2
3useEffect(async () => {
4  const message = await loadCurrentMessage()
5  setMessage(message)
6  addSmartContractListener()
7}, [])

आता आम्ही आमच्या स्मार्ट कॉन्ट्रॅक्टमधून वाचू शकतो, त्यावर कसे लिहायचे हे शोधणे छान होईल! तथापि, आमच्या डॅपवर लिहिण्यासाठी, आमच्याकडे प्रथम एक Ethereum वॉलेट कनेक्ट केलेले असणे आवश्यक आहे.

तर, पुढे आम्ही आमचे Ethereum वॉलेट (MetaMask) सेट अप करू आणि नंतर ते आमच्या डॅपशी कनेक्ट करू!

पायरी ४: तुमचे Ethereum वॉलेट सेट करा

Ethereum चेनवर काहीही लिहिण्यासाठी, वापरकर्त्यांना त्यांच्या व्हर्च्युअल वॉलेटच्या खाजगी की वापरून व्यवहारांवर स्वाक्षरी करावी लागेल. या ट्युटोरियलसाठी, आम्ही MetaMask (opens in a new tab) वापरू, जो ब्राउझरमधील एक व्हर्च्युअल वॉलेट आहे जो तुमच्या Ethereum खात्याचा पत्ता व्यवस्थापित करण्यासाठी वापरला जातो, कारण तो अंतिम-वापरकर्त्यासाठी हे व्यवहार स्वाक्षरी करणे खूप सोपे करतो.

तुम्हाला Ethereum वरील व्यवहार कसे कार्य करतात याबद्दल अधिक समजून घ्यायचे असल्यास, Ethereum फाउंडेशनचे हे पेज पहा.

MetaMask डाउनलोड करा

तुम्ही येथे (opens in a new tab) विनामूल्य MetaMask खाते डाउनलोड आणि तयार करू शकता. तुम्ही खाते तयार करत असताना, किंवा तुमच्याकडे आधीपासूनच खाते असल्यास, वरच्या उजवीकडील “Goerli टेस्ट नेटवर्क” वर स्विच करण्याची खात्री करा (जेणेकरून आपण खऱ्या पैशांशी व्यवहार करत नाही आहोत).

फॉसेटमधून इथर जोडा

Ethereum ब्लॉकचेनवर व्यवहारावर स्वाक्षरी करण्यासाठी, आम्हाला काही बनावट Eth ची आवश्यकता असेल. Eth मिळवण्यासाठी तुम्ही FaucETH (opens in a new tab) वर जाऊन तुमचा Goerli खात्याचा पत्ता प्रविष्ट करू शकता, “निधीची विनंती करा” वर क्लिक करा, नंतर ड्रॉपडाउनमध्ये “Ethereum टेस्टनेट Goerli” निवडा आणि शेवटी पुन्हा “निधीची विनंती करा” बटणावर क्लिक करा. त्यानंतर लगेचच तुम्हाला तुमच्या MetaMask खात्यात Eth दिसेल!

तुमची शिल्लक तपासा

आमची शिल्लक आहे की नाही हे पुन्हा तपासण्यासाठी, चला Alchemy’s composer tool (opens in a new tab) वापरून एक eth_getBalance (opens in a new tab) विनंती करूया. हे आमच्या वॉलेटमधील Eth ची रक्कम परत करेल. तुम्ही तुमच्या MetaMask खात्याचा पत्ता इनपुट केल्यानंतर आणि “Send Request” वर क्लिक केल्यानंतर, तुम्हाला असा प्रतिसाद दिसेल:

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

सूचना: हा निकाल eth मध्ये नसून wei मध्ये आहे. Wei हे इथरचे सर्वात लहान एकक म्हणून वापरले जाते. wei चे eth मध्ये रूपांतर: 1 eth = 10¹⁸ wei. म्हणून जर आपण 0xde0b6b3a7640000 ला दशांश मध्ये रूपांतरित केले तर आपल्याला 1*10¹⁸ मिळते, जे 1 eth च्या बरोबर आहे.

हुश्श! आपले बनावट पैसे तिथेच आहेत! 🤑

पायरी ५: MetaMask ला तुमच्या UI शी कनेक्ट करा

आता आपले MetaMask वॉलेट सेट झाले आहे, चला आपला dapp त्याच्याशी कनेक्ट करूया!

connectWallet फंक्शन

आमच्या interact.js फाइलमध्ये, चला connectWallet फंक्शन अंमलात आणूया, जे आम्ही नंतर आमच्या HelloWorld.js घटकामध्ये कॉल करू शकतो.

चला connectWallet खालीलप्रमाणे सुधारित करूया:

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

तर या मोठ्या कोड ब्लॉकचा नेमका काय उपयोग आहे?

बरं, प्रथम, ते तुमच्या ब्राउझरमध्ये window.ethereum सक्षम आहे की नाही हे तपासते.

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

जर window.ethereum उपस्थित नसेल, तर याचा अर्थ MetaMask स्थापित नाही. यामुळे एक JSON ऑब्जेक्ट परत येतो, जिथे परत केलेला address एक रिकामा स्ट्रिंग असतो आणि status JSX ऑब्जेक्ट वापरकर्त्याला MetaMask स्थापित करणे आवश्यक असल्याचे सांगतो.

आता जर window.ethereum उपस्थित असेल, तर गोष्टी मनोरंजक होतात.

try/catch लूप वापरून, आम्ही window.ethereum.request({ method: "eth_requestAccounts" }); (opens in a new tab) कॉल करून MetaMask शी कनेक्ट करण्याचा प्रयत्न करू. हे फंक्शन कॉल केल्याने ब्राउझरमध्ये MetaMask उघडेल, जिथे वापरकर्त्याला त्यांचे वॉलेट तुमच्या dapp शी कनेक्ट करण्यास सांगितले जाईल.

• जर वापरकर्त्याने कनेक्ट करणे निवडले, तर method: "eth_requestAccounts" एक ॲरे परत करेल ज्यात डॅपशी कनेक्ट केलेल्या वापरकर्त्याच्या सर्व खात्यांचे पत्ते असतील. एकूणच, आमचे connectWallet फंक्शन एक JSON ऑब्जेक्ट परत करेल ज्यात या ॲरेमधील पहिला address (ओळ 9 पहा) आणि एक status संदेश असेल जो वापरकर्त्याला स्मार्ट कॉन्ट्रॅक्टला संदेश लिहिण्यास सांगेल.
• जर वापरकर्त्याने कनेक्शन नाकारले, तर JSON ऑब्जेक्टमध्ये परत केलेल्या address साठी एक रिकामा स्ट्रिंग आणि एक status संदेश असेल जो वापरकर्त्याने कनेक्शन नाकारले असल्याचे दर्शवेल.

आता आम्ही हे connectWallet फंक्शन लिहिले आहे, पुढची पायरी म्हणजे ते आमच्या HelloWorld.js घटकामध्ये कॉल करणे.

connectWallet फंक्शन तुमच्या HelloWorld.js UI घटकामध्ये जोडा

HelloWorld.js मधील connectWalletPressed फंक्शनवर नेव्हिगेट करा, आणि ते खालीलप्रमाणे अपडेट करा:

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

आमच्या HelloWorld.js घटकामधून interact.js फाइलमधून आमची बहुतेक कार्यक्षमता कशी दूर केली जाते हे लक्षात घ्या? हे असे आहे की आम्ही M-V-C पॅराडाइमचे पालन करतो!

connectWalletPressed मध्ये, आम्ही फक्त आमच्या आयात केलेल्या connectWallet फंक्शनला एक await कॉल करतो आणि त्याच्या प्रतिसादाचा वापर करून, आम्ही आमचे status आणि walletAddress व्हेरिएबल्स त्यांच्या स्टेट हुक्सद्वारे अपडेट करतो.

आता, चला दोन्ही फायली (HelloWorld.js आणि interact.js) सेव्ह करूया आणि आतापर्यंत आमच्या UI ची चाचणी घेऊया.

तुमचा ब्राउझर http://localhost:3000/ (opens in a new tab) पेजवर उघडा, आणि पेजच्या वरच्या उजवीकडील "वॉलेट कनेक्ट करा" बटण दाबा.

तुमच्याकडे MetaMask स्थापित असल्यास, तुम्हाला तुमचे वॉलेट तुमच्या dapp शी जोडण्यास सांगितले जाईल. कनेक्ट करण्याची आमंत्रणे स्वीकारा.

तुम्हाला दिसेल की वॉलेट बटण आता तुमचा पत्ता कनेक्ट झाला आहे हे दर्शवते! व्वा 🔥

पुढे, पृष्ठ रिफ्रेश करण्याचा प्रयत्न करा... हे विचित्र आहे. आमचे वॉलेट बटण आम्हाला MetaMask कनेक्ट करण्यास सांगत आहे, जरी ते आधीच कनेक्ट केलेले असले तरी...

तथापि, घाबरू नका! आम्ही ते सहजपणे सोडवू शकतो (समजले?) getCurrentWalletConnected अंमलात आणून, जे तपासेल की पत्ता आधीपासूनच आमच्या डॅपशी कनेक्ट केलेला आहे की नाही आणि त्यानुसार आमचे UI अपडेट करेल!

getCurrentWalletConnected फंक्शन

interact.js फाइलमधील तुमचे getCurrentWalletConnected फंक्शन खालीलप्रमाणे अपडेट करा:

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

हा कोड आम्ही मागील पायरीमध्ये लिहिलेल्या connectWallet फंक्शनसारखाच खूप आहे.

मुख्य फरक असा आहे की eth_requestAccounts या पद्धतीला कॉल करण्याऐवजी, जे वापरकर्त्याला त्यांचे वॉलेट कनेक्ट करण्यासाठी MetaMask उघडते, येथे आपण eth_accounts ही पद्धत कॉल करतो, जी सध्या आपल्या dapp शी कनेक्ट केलेल्या MetaMask ॲड्रेसची एक ॲरे परत करते.

हे फंक्शन कृतीत पाहण्यासाठी, चला ते आमच्या HelloWorld.js घटकाच्या useEffect फंक्शनमध्ये कॉल करूया:

1// HelloWorld.js
2
3useEffect(async () => {
4  const message = await loadCurrentMessage()
5  setMessage(message)
6  addSmartContractListener()
7
8  const { address, status } = await getCurrentWalletConnected()
9  setWallet(address)
10  setStatus(status)
11}, [])
सर्व दाखवा

लक्षात घ्या, आम्ही आमच्या getCurrentWalletConnected च्या कॉलच्या प्रतिसादाचा वापर आमचे walletAddress आणि status स्टेट व्हेरिएबल्स अपडेट करण्यासाठी करतो.

आता तुम्ही हा कोड जोडला आहे, चला आमचे ब्राउझर विंडो रिफ्रेश करून पाहूया.

छान! बटण तुम्हाला कनेक्ट झाल्याचे सांगेल आणि तुमच्या कनेक्ट केलेल्या वॉलेटच्या ॲड्रेसचे पूर्वावलोकन दाखवेल - जरी तुम्ही रिफ्रेश केले तरी!

addWalletListener अंमलात आणा

आमच्या dapp वॉलेट सेटअपमधील शेवटची पायरी म्हणजे वॉलेट लिसनर लागू करणे जेणेकरून आमच्या वॉलेटची स्थिती बदलल्यावर आमचे UI अपडेट होईल, जसे की वापरकर्ता डिस्कनेक्ट झाल्यावर किंवा खाती बदलल्यावर.

तुमच्या HelloWorld.js फाइलमध्ये, तुमचे addWalletListener फंक्शन खालीलप्रमाणे सुधारित करा:

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

मला खात्री आहे की तुम्हाला या टप्प्यावर काय चालले आहे हे समजून घेण्यासाठी आमच्या मदतीची गरज नाही, परंतु संपूर्णतेच्या उद्देशाने, चला ते पटकन पाहूया:

• प्रथम, आमचे फंक्शन तपासते की window.ethereum सक्षम आहे का (म्हणजे MetaMask स्थापित आहे का).
  • जर ते नसेल, तर आम्ही फक्त आमचे status स्टेट व्हेरिएबल एका JSX स्ट्रिंगवर सेट करतो जे वापरकर्त्याला MetaMask स्थापित करण्यास सांगते.
  • जर ते सक्षम असेल, तर आम्ही ओळ 3 वर window.ethereum.on("accountsChanged") हा लिसनर सेट करतो जो MetaMask वॉलेटमधील स्टेट बदलांसाठी ऐकतो, ज्यात वापरकर्ता dapp शी अतिरिक्त खाते जोडतो, खाती बदलतो किंवा खाते डिस्कनेक्ट करतो. जर किमान एक खाते कनेक्ट केलेले असेल, तर walletAddress स्टेट व्हेरिएबल लिसनरद्वारे परत केलेल्या accounts ॲरेमधील पहिले खाते म्हणून अपडेट केले जाते. अन्यथा, walletAddress एक रिकामा स्ट्रिंग म्हणून सेट केला जातो.

शेवटचे पण महत्त्वाचे, आम्ही ते आमच्या useEffect फंक्शनमध्ये कॉल करणे आवश्यक आहे:

1// HelloWorld.js
2
3useEffect(async () => {
4  const message = await loadCurrentMessage()
5  setMessage(message)
6  addSmartContractListener()
7
8  const { address, status } = await getCurrentWalletConnected()
9  setWallet(address)
10  setStatus(status)
11
12  addWalletListener()
13}, [])
सर्व दाखवा

आणि झाले! आम्ही आमच्या सर्व वॉलेट कार्यक्षमतेचे प्रोग्रामिंग यशस्वीरित्या पूर्ण केले आहे! आता आमच्या शेवटच्या कार्याकडे: आमच्या स्मार्ट कॉन्ट्रॅक्टमध्ये संग्रहित केलेला संदेश अपडेट करणे!

पायरी ६: updateMessage फंक्शन अंमलात आणा

ठीक आहे मित्रांनो, आपण अंतिम टप्प्यात आलो आहोत! तुमच्या interact.js फाइलच्या updateMessage मध्ये, आम्ही खालील गोष्टी करणार आहोत:

1. आम्हाला आमच्या स्मार्ट संपर्कात प्रकाशित करायचा असलेला संदेश वैध असल्याची खात्री करा
2. MetaMask वापरून आमच्या व्यवहारावर स्वाक्षरी करा
3. या फंक्शनला आमच्या HelloWorld.js फ्रंटएंड घटकामधून कॉल करा

याला जास्त वेळ लागणार नाही; चला हा डॅप पूर्ण करूया!

इनपुट एरर हाताळणी

स्वाभाविकच, फंक्शनच्या सुरुवातीला काही प्रकारचे इनपुट त्रुटी हाताळणी असणे अर्थपूर्ण आहे.

आम्ही इच्छितो की जर MetaMask विस्तार स्थापित नसेल, कोणतेही वॉलेट कनेक्ट केलेले नसेल (म्हणजे, पास केलेला address एक रिकामा स्ट्रिंग आहे), किंवा message एक रिकामा स्ट्रिंग असेल तर आमचे फंक्शन लवकर परत यावे. चला updateMessage मध्ये खालील त्रुटी हाताळणी जोडूया:

1// interact.js
2
3export const updateMessage = async (address, message) => {
4  if (!window.ethereum || address === null) {
5    return {
6      status:
7        "💡 ब्लॉकचेनवरील संदेश अपडेट करण्यासाठी तुमचे MetaMask वॉलेट कनेक्ट करा.",
8    }
9  }
10
11  if (message.trim() === "") {
12    return {
13      status: "❌ तुमचा संदेश रिकामा स्ट्रिंग असू शकत नाही.",
14    }
15  }
16}
सर्व दाखवा

आता त्यात योग्य इनपुट त्रुटी हाताळणी आहे, MetaMask द्वारे व्यवहारावर स्वाक्षरी करण्याची वेळ आली आहे!

आमच्या व्यवहारावर स्वाक्षरी करणे

तुम्ही आधीपासूनच पारंपरिक वेब3 Ethereum व्यवहारांशी परिचित असाल, तर आम्ही पुढे लिहिणारा कोड खूप परिचित असेल. तुमच्या इनपुट त्रुटी हाताळणी कोडच्या खाली, updateMessage मध्ये खालील जोडा:

1// interact.js
2
3//व्यवहार पॅरामीटर्स सेट करा
4const transactionParameters = {
5  to: contractAddress, // कॉन्ट्रॅक्ट प्रकाशनांशिवाय आवश्यक.
6  from: address, // वापरकर्त्याच्या सक्रिय पत्त्याशी जुळले पाहिजे.
7  data: helloWorldContract.methods.update(message).encodeABI(),
8}
9
10//व्यवहारावर स्वाक्षरी करा
11try {
12  const txHash = await window.ethereum.request({
13    method: "eth_sendTransaction",
14    params: [transactionParameters],
15  })
16  return {
17    status: (
18      <span>
19        ✅{" "}
20        <a target="_blank" href={`https://goerli.etherscan.io/tx/${txHash}`}>
21          Etherscan वर तुमच्या व्यवहाराची स्थिती पहा!
22        </a>
23        <br />
24        ℹ️ एकदा नेटवर्कद्वारे व्यवहाराची पडताळणी झाल्यावर, संदेश आपोआप अपडेट होईल.
25      </span>
26    ),
27  }
28} catch (error) {
29  return {
30    status: "😥 " + error.message,
31  }
32}
सर्व दाखवा

चला पाहूया की काय चालले आहे. प्रथम, आम्ही आमचे व्यवहार पॅरामीटर्स सेट करतो, जिथे:

• to प्राप्तकर्ता ॲड्रेस (आमचा स्मार्ट कॉन्ट्रॅक्ट) निर्दिष्ट करतो
• from व्यवहाराच्या स्वाक्षरीकर्त्याला निर्दिष्ट करते, आम्ही आमच्या फंक्शनमध्ये पास केलेला address व्हेरिएबल
• data मध्ये आमच्या हॅलो वर्ल्ड स्मार्ट कॉन्ट्रॅक्टच्या update पद्धतीचा कॉल आहे, जो आमचा message स्ट्रिंग व्हेरिएबल इनपुट म्हणून घेतो

मग, आम्ही एक await कॉल करतो, window.ethereum.request, जिथे आम्ही MetaMask ला व्यवहारावर स्वाक्षरी करण्यास सांगतो. लक्षात घ्या, ओळी ११ आणि १२ वर, आम्ही आमची eth पद्धत, eth_sendTransaction निर्दिष्ट करत आहोत आणि आमचे transactionParameters पास करत आहोत.

या टप्प्यावर, MetaMask ब्राउझरमध्ये उघडेल आणि वापरकर्त्याला व्यवहारावर सही करण्यास किंवा नाकारण्यास सांगेल.

• जर व्यवहार यशस्वी झाला, तर फंक्शन एक JSON ऑब्जेक्ट परत करेल जिथे status JSX स्ट्रिंग वापरकर्त्याला त्यांच्या व्यवहाराबद्दल अधिक माहितीसाठी Etherscan तपासण्यास सांगते.
• जर व्यवहार अयशस्वी झाला, तर फंक्शन एक JSON ऑब्जेक्ट परत करेल जिथे status स्ट्रिंग त्रुटी संदेश प्रसारित करते.

एकत्रितपणे, आमचे updateMessage फंक्शन असे दिसले पाहिजे:

1// interact.js
2
3export const updateMessage = async (address, message) => {
4  //इनपुट त्रुटी हाताळणी
5  if (!window.ethereum || address === null) {
6    return {
7      status:
8        "💡 ब्लॉकचेनवरील संदेश अपडेट करण्यासाठी तुमचे MetaMask वॉलेट कनेक्ट करा.",
9    }
10  }
11
12  if (message.trim() === "") {
13    return {
14      status: "❌ तुमचा संदेश रिकामा स्ट्रिंग असू शकत नाही.",
15    }
16  }
17
18  //व्यवहार पॅरामीटर्स सेट करा
19  const transactionParameters = {
20    to: contractAddress, // कॉन्ट्रॅक्ट प्रकाशनांशिवाय आवश्यक.
21    from: address, // वापरकर्त्याच्या सक्रिय पत्त्याशी जुळले पाहिजे.
22    data: helloWorldContract.methods.update(message).encodeABI(),
23  }
24
25  //व्यवहारावर स्वाक्षरी करा
26  try {
27    const txHash = await window.ethereum.request({
28      method: "eth_sendTransaction",
29      params: [transactionParameters],
30    })
31    return {
32      status: (
33        <span>
34          ✅{" "}
35          <a target="_blank" href={`https://goerli.etherscan.io/tx/${txHash}`}>
36            Etherscan वर तुमच्या व्यवहाराची स्थिती पहा!
37          </a>
38          <br />
39          ℹ️ एकदा नेटवर्कद्वारे व्यवहाराची पडताळणी झाल्यावर, संदेश आपोआप अपडेट होईल.
40        </span>
41      ),
42    }
43  } catch (error) {
44    return {
45      status: "😥 " + error.message,
46    }
47  }
48}
सर्व दाखवा

शेवटचे पण महत्त्वाचे, आम्हाला आमचे updateMessage फंक्शन आमच्या HelloWorld.js घटकाशी कनेक्ट करणे आवश्यक आहे.

updateMessage ला HelloWorld.js फ्रंटएंडशी कनेक्ट करा

आमच्या onUpdatePressed फंक्शनने आयात केलेल्या updateMessage फंक्शनला एक await कॉल करावा आणि आमचा व्यवहार यशस्वी झाला की अयशस्वी हे दर्शविण्यासाठी status स्टेट व्हेरिएबल सुधारित करावे:

1// HelloWorld.js
2
3const onUpdatePressed = async () => {
4  const { status } = await updateMessage(walletAddress, newMessage)
5  setStatus(status)
6}

हे खूप स्वच्छ आणि सोपे आहे. आणि अंदाज लावा... तुमचा डॅप पूर्ण झाला आहे!!!

पुढे जा आणि अपडेट बटणाची चाचणी घ्या!

तुमचा स्वतःचा सानुकूल डॅप बनवा

व्वा, तुम्ही ट्युटोरियलच्या शेवटपर्यंत पोहोचलात! रिकॅप करण्यासाठी, तुम्ही शिकलात की कसे:

• तुमच्या डॅप प्रकल्पाला MetaMask वॉलेट कनेक्ट करा
• Alchemy Web3 (opens in a new tab) API वापरून तुमच्या स्मार्ट कॉन्ट्रॅक्टमधून डेटा वाचा
• MetaMask वापरून Ethereum व्यवहारांवर स्वाक्षरी करा

आता तुम्ही तुमचा स्वतःचा सानुकूल डॅप प्रकल्प तयार करण्यासाठी या ट्युटोरियलमधील कौशल्ये लागू करण्यासाठी पूर्णपणे सुसज्ज आहात! नेहमीप्रमाणे, तुम्हाला काही प्रश्न असल्यास, Alchemy Discord (opens in a new tab) मध्ये मदतीसाठी आमच्याशी संपर्क साधण्यास अजिबात संकोच करू नका. 🧙‍♂️

एकदा तुम्ही हे ट्युटोरियल पूर्ण केल्यावर, आम्हाला Twitter @alchemyplatform (opens in a new tab) वर टॅग करून तुमचा अनुभव कसा होता किंवा तुमचा काही अभिप्राय असल्यास आम्हाला कळवा!

पृष्ठ अखेरचे अद्यतन: २६ फेब्रुवारी, २०२६

c (opens in a new tab)

p (opens in a new tab)

m (opens in a new tab)

+14

योगदानकर्ता पहा