ప్రారంభకుల కోసం హలో వరల్డ్ స్మార్ట్ కాంట్రాక్టు - ఫుల్‌స్టాక్

Solidity

Hardhat

Alchemy

స్మార్ట్ కాంట్రాక్టులు

డిప్లాయ్ చేయడం

బ్లాక్ ఎక్స్‌ప్లోరర్

frontend

లావాదేవీలు

ప్రారంభ

nstrike2

25 అక్టోబర్, 2021

38 నిమిషం పఠనం

పేజీని సవరించండి

మీరు బ్లాక్‌చెయిన్ డెవలప్‌మెంట్‌కు కొత్తవారైతే మరియు స్మార్ట్ కాంట్రాక్ట్‌లతో ఎక్కడ ప్రారంభించాలో లేదా ఎలా అమలు చేయాలో మరియు ఇంటరాక్ట్ అవ్వాలో తెలియకపోతే ఈ గైడ్ మీ కోసం. 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 టెస్టునెట్‌లో ఒక సాధారణ, స్మార్ట్ కాంట్రాక్టును సృష్టించడం మరియు అమలు చేయడం ద్వారా మేము మీకు మార్గనిర్దేశం చేస్తాము.

ఈ ట్యుటోరియల్‌ను పూర్తి చేయడానికి మీకు ఆల్కెమీ ఖాతా అవసరం. ఉచిత ఖాతా కోసం సైన్ అప్ చేయండి (opens in a new tab).

మీకు ఏ సమయంలోనైనా ప్రశ్నలు ఉంటే, ఆల్కెమీ డిస్కార్డ్ (opens in a new tab)లో అడగడానికి సంకోచించకండి!

భాగం 1 - హార్డ్‌హ్యాట్ ఉపయోగించి మీ స్మార్ట్ కాంట్రాక్ట్‌ను సృష్టించండి మరియు అమలు చేయండి

ఇథీరియం నెట్‌వర్క్‌కి కనెక్ట్ అవ్వండి

Ethereum చైన్‌కు అభ్యర్థనలు చేయడానికి చాలా మార్గాలు ఉన్నాయి. సులభంగా ఉండటానికి, మేము ఆల్కెమీలో ఉచిత ఖాతాను ఉపయోగిస్తాము, ఇది ఒక బ్లాక్‌చెయిన్ డెవలపర్ ప్లాట్‌ఫారమ్ మరియు API, ఇది మనమే ఒక నోడ్‌ను అమలు చేయకుండా ఇథీరియం చైన్‌తో కమ్యూనికేట్ చేయడానికి అనుమతిస్తుంది. ఆల్కెమీకి పర్యవేక్షణ మరియు విశ్లేషణల కోసం డెవలపర్ సాధనాలు కూడా ఉన్నాయి; మన స్మార్ట్ కాంట్రాక్ట్ అమలులో తెర వెనుక ఏమి జరుగుతుందో అర్థం చేసుకోవడానికి ఈ ట్యుటోరియల్‌లో మేము వీటిని సద్వినియోగం చేసుకుంటాము.

మీ యాప్‌ను మరియు API కీని సృష్టించండి

మీరు ఒక ఆల్కెమీ ఖాతాను సృష్టించిన తర్వాత, మీరు ఒక యాప్‌ను సృష్టించడం ద్వారా ఒక API కీని రూపొందించవచ్చు. ఇది Goerli టెస్టునెట్‌కు అభ్యర్థనలు చేయడానికి మిమ్మల్ని అనుమతిస్తుంది. మీకు టెస్టునెట్‌ల గురించి తెలియకపోతే, మీరు నెట్‌వర్క్‌ను ఎంచుకోవడానికి ఆల్కెమీ యొక్క గైడ్‌ను చదవవచ్చు (opens in a new tab).

ఆల్కెమీ డాష్‌బోర్డ్‌లో, నావిగేషన్ బార్‌లో యాప్స్ డ్రాప్‌డౌన్‌ను కనుగొని, యాప్‌ను సృష్టించు క్లిక్ చేయండి.

మీ యాప్‌కు 'Hello World' అని పేరు పెట్టండి మరియు ఒక చిన్న వివరణ వ్రాయండి. మీ వాతావరణంగా స్టేజింగ్ మరియు మీ నెట్‌వర్క్‌గా గోర్లీని ఎంచుకోండి.

గమనిక: గోర్లీని ఎంచుకున్నారని నిర్ధారించుకోండి, లేకపోతే ఈ ట్యుటోరియల్ పని చేయదు.

యాప్‌ను సృష్టించు బటన్‌ను క్లిక్ చేయండి. మీ యాప్ క్రింది పట్టికలో కనిపిస్తుంది.

ఒక ఇథీరియం ఖాతాను సృష్టించండి

లావాదేవీలను పంపడానికి మరియు స్వీకరించడానికి మీకు ఒక ఇథీరియం ఖాతా అవసరం. మేము మెటామాస్క్‌ను ఉపయోగిస్తాము, ఇది బ్రౌజర్‌లో ఒక వర్చువల్ వాలెట్, ఇది వినియోగదారులు తమ ఇథీరియం ఖాతా చిరునామాను నిర్వహించడానికి అనుమతిస్తుంది.

మీరు ఇక్కడ (opens in a new tab) ఉచితంగా MetaMask అకౌంట్‌ను డౌన్‌లోడ్ చేసి, సృష్టించవచ్చు. మీరు ఖాతాను సృష్టించేటప్పుడు, లేదా మీకు ఇప్పటికే ఖాతా ఉంటే, కుడివైపు ఎగువన ఉన్న “గోర్లీ టెస్ట్ నెట్‌వర్క్”కు మారినట్లు నిర్ధారించుకోండి (అలాగే మనం నిజమైన డబ్బుతో వ్యవహరించడం లేదు).

దశ 4: ఒక ఫాసెట్ నుండి ఈథర్‌ను జోడించండి

మీ స్మార్ట్ కాంట్రాక్ట్‌ను టెస్ట్ నెట్‌వర్క్‌కు అమలు చేయడానికి, మీకు కొంత నకిలీ ETH అవసరం. గోర్లీ నెట్‌వర్క్‌లో ETH పొందడానికి, ఒక గోర్లీ ఫాసెట్‌కు వెళ్లి మీ గోర్లీ ఖాతా చిరునామాను నమోదు చేయండి. గోర్లీ ఫాసెట్‌లు ఇటీవల కొంచెం నమ్మశక్యంగా లేవని గమనించండి - ప్రయత్నించడానికి ఎంపికల జాబితా కోసం టెస్ట్ నెట్‌వర్క్‌ల పేజీని చూడండి:

గమనిక: నెట్‌వర్క్ రద్దీ కారణంగా, దీనికి కొంత సమయం పట్టవచ్చు. ``

దశ 5: మీ బ్యాలెన్స్‌ను తనిఖీ చేయండి

మీ వాలెట్‌లో ETH ఉందని నిర్ధారించుకోవడానికి, ఆల్కెమీ యొక్క కంపోజర్ టూల్ (opens in a new tab) ఉపయోగించి eth_getBalance (opens in a new tab) అభ్యర్థన చేద్దాం. ఇది మన వాలెట్‌లోని ETH మొత్తాన్ని తిరిగి ఇస్తుంది. మరింత తెలుసుకోవడానికి కంపోజర్ సాధనాన్ని ఎలా ఉపయోగించాలో ఆల్కెమీ యొక్క చిన్న ట్యుటోరియల్ చూడండి (opens in a new tab).

మీ మెటామాస్క్ ఖాతా చిరునామాను ఇన్‌పుట్ చేసి, అభ్యర్థన పంపించు బటన్‌ను క్లిక్ చేయండి. మీకు క్రింది కోడ్ స్నిప్పెట్ లాంటి ప్రతిస్పందన కనిపిస్తుంది.

{ "jsonrpc": "2.0", "id": 0, "result": "0x2B5E3AF16B1880000" }

గమనిక: ఈ ఫలితం వీలో ఉంది, ETHలో కాదు. వీ ఈథర్ యొక్క అతి చిన్న విభాగంగా ఉపయోగించబడుతుంది.

అమ్మయ్య! మా నకిలీ డబ్బు అంతా ఉంది.

దశ 6: మా ప్రాజెక్ట్‌ను ప్రారంభించండి

ముందుగా, మన ప్రాజెక్ట్ కోసం ఒక ఫోల్డర్‌ను సృష్టించాలి. మీ కమాండ్ లైన్‌కు నావిగేట్ చేసి, ఈ క్రింది వాటిని ఇన్‌పుట్ చేయండి.

mkdir hello-world
cd hello-world

ఇప్పుడు మనం మన ప్రాజెక్ట్ ఫోల్డర్‌లో ఉన్నాము కాబట్టి, ప్రాజెక్టును ప్రారంభించడానికి npm initని ఉపయోగిస్తాము.

మీరు ఇంకా npm ఇన్‌స్టాల్ చేయకపోతే, Node.js మరియు npm ఇన్‌స్టాల్ చేయడానికి ఈ సూచనలను పాటించండి (opens in a new tab).

ఈ ట్యుటోరియల్ ప్రయోజనం కోసం, మీరు ప్రారంభ ప్రశ్నలకు ఎలా సమాధానం ఇస్తారనేది ముఖ్యం కాదు. మేము దానిని ఎలా చేసామో ఇక్కడ సూచన కోసం ఇవ్వబడింది:

ప్యాకేజీ పేరు: (hello-world)
వెర్షన్: (1.0.0)
వివరణ: హలో వరల్డ్ స్మార్ట్ కాంట్రాక్టు
ఎంట్రీ పాయింట్: (index.js)
టెస్ట్ కమాండ్:
git రిపోజిటరీ:
కీవర్డ్‌లు:
రచయిత:
లైసెన్స్: (ISC)

/Users/.../.../.../hello-world/package.json కు వ్రాయబోతున్నారు:

{
 "name": "hello-world",
 "version": "1.0.0",
 "description": "హలో వరల్డ్ స్మార్ట్ కాంట్రాక్టు",
 "main": "index.js",
 "scripts": {
 "test": "echo \"లోపం: పరీక్ష పేర్కొనబడలేదు\" && exit 1"
 },
 "author": "",
 "license": "ISC"
}

package.jsonని ఆమోదించండి మరియు మనం సిద్ధంగా ఉన్నాము!

దశ 7: హార్డ్‌హ్యాట్ డౌన్‌లోడ్ చేయండి

Hardhat అనేది మీ ఇతీరియము సాఫ్ట్‌వేర్‌ను కంపైల్ చేయడానికి, డిప్లోయ్ చేయడానికి, పరీక్షించడానికి మరియు డీబగ్ చేయడానికి ఒక డెవలప్‌మెంట్ ఎన్విరాన్‌మెంట్. ఇది లైవ్ చైన్‌కు డిప్లోయ్ చేయడానికి ముందు స్థానికంగా స్మార్ట్ కాంట్రాక్ట్‌లను మరియు డాప్స్‌ను రూపొందించడంలో డెవలపర్‌లకు సహాయపడుతుంది.

మన hello-world ప్రాజెక్ట్ లోపల రన్ చేయండి:

npm install --save-dev hardhat

ఇన్‌స్టాలేషన్ సూచనల (opens in a new tab)పై మరిన్ని వివరాల కోసం ఈ పేజీని చూడండి.

దశ 8: హార్డ్‌హ్యాట్ ప్రాజెక్ట్‌ను సృష్టించండి

మా hello-world ప్రాజెక్ట్ ఫోల్డర్ లోపల, దీన్ని అమలు చేయండి:

npx hardhat

అప్పుడు మీరు స్వాగత సందేశం మరియు మీరు ఏమి చేయాలనుకుంటున్నారో ఎంచుకోవడానికి ఒక ఎంపికను చూడాలి. “ఖాళీ hardhat.config.jsని సృష్టించండి” ఎంచుకోండి:

888 888 888 888 888 888
888 888 888 888 888 888
888 888 888 888 888 888
8888888888 8888b. 888d888 .d88888 88888b. 8888b. 888888
888 888 "88b 888P" d88" 888 888 "88b "88b 888
888 888 .d888888 888 888 888 888 888 .d888888 888
888 888 888 888 888 Y88b 888 888 888 888 888 Y88b.
888 888 "Y888888 888 "Y88888 888 888 "Y888888 "Y888

👷 Hardhat v2.0.11 కు స్వాగతం 👷‍

మీరు ఏమి చేయాలనుకుంటున్నారు? …
ఒక నమూనా ప్రాజెక్ట్‌ను సృష్టించండి
❯ ఒక ఖాళీ hardhat.config.js ని సృష్టించండి
నిష్క్రమించు

ఇది ప్రాజెక్ట్‌లో hardhat.config.js ఫైల్‌ను రూపొందిస్తుంది. మన ప్రాజెక్ట్ కోసం సెటప్‌ను పేర్కొనడానికి మనం ఈ ట్యుటోరియల్‌లో తరువాత దీనిని ఉపయోగిస్తాము.

దశ 9: ప్రాజెక్ట్ ఫోల్డర్‌లను జోడించండి

ప్రాజెక్ట్‌ను వ్యవస్థీకృతంగా ఉంచడానికి, రెండు కొత్త ఫోల్డర్‌లను సృష్టిద్దాం. కమాండ్ లైన్‌లో, మీ hello-world ప్రాజెక్ట్ యొక్క రూట్ డైరెక్టరీకి నావిగేట్ చేసి టైప్ చేయండి:

mkdir contracts
mkdir scripts

contracts/ అనేది మనం మన హలో వరల్డ్ స్మార్ట్ కాంట్రాక్ట్ కోడ్ ఫైల్‌ను ఉంచే చోటు
scripts/ అనేది మన కాంట్రాక్టును డిప్లాయ్ చేయడానికి మరియు దానితో ఇంటరాక్ట్ అవ్వడానికి స్క్రిప్ట్‌లను ఉంచే చోటు

దశ 10: మా కాంట్రాక్టును వ్రాయండి

మీరు మిమ్మల్ని మీరు అడగవచ్చు, మనం ఎప్పుడు కోడ్ వ్రాయబోతున్నాం? ఇదే సమయం!

మీకు ఇష్టమైన ఎడిటర్‌లో hello-world ప్రాజెక్ట్‌ను తెరవండి. స్మార్ట్ కాంట్రాక్టులు సాధారణంగా సాలిడిటీలో వ్రాయబడతాయి, దీనిని మేము మా స్మార్ట్ కాంట్రాక్టును వ్రాయడానికి ఉపయోగిస్తాము.‌

contracts ఫోల్డర్‌కు నావిగేట్ చేసి, HelloWorld.sol అనే కొత్త ఫైల్‌ను సృష్టించండి
ఈ ట్యుటోరియల్ కోసం మేము ఉపయోగించబోయే నమూనా హలో వరల్డ్ స్మార్ట్ కాంట్రాక్టు క్రింద ఉంది. క్రింది కంటెంట్‌లను HelloWorld.sol ఫైల్‌లోకి కాపీ చేయండి.

గమనిక: ఈ కాంట్రాక్ట్ ఏమి చేస్తుందో అర్థం చేసుకోవడానికి వ్యాఖ్యలను చదివినట్లు నిర్ధారించుకోండి.

// సాలిడిటీ యొక్క సంస్కరణను, సెమాంటిక్ వర్షనింగ్‌ని ఉపయోగించి నిర్దేశిస్తుంది.
// మరింత తెలుసుకోండి: https://solidity.readthedocs.io/en/v0.5.10/layout-of-source-files.html#pragma
pragma solidity >=0.7.3;

// 'HelloWorld' పేరుతో ఒక కాంట్రాక్టును నిర్వచిస్తుంది.
// ఒక కాంట్రాక్టు అనేది ఫంక్షన్‌లు మరియు డేటా (దాని స్థితి) యొక్క సేకరణ. ఒకసారి అమలు చేసిన తర్వాత, ఒక కాంట్రాక్టు ఇథీరియం బ్లాక్‌చెయిన్‌లో ఒక నిర్దిష్ట చిరునామాలో నివసిస్తుంది. మరింత తెలుసుకోండి: https://solidity.readthedocs.io/en/v0.5.10/structure-of-a-contract.html
contract HelloWorld {

   //నవీకరణ ఫంక్షన్ పిలిచినప్పుడు విడుదల చేయబడుతుంది
   //స్మార్ట్ కాంట్రాక్ట్ ఈవెంట్‌లు మీ కాంట్రాక్ట్ కోసం బ్లాక్‌చెయిన్‌లో ఏదో జరిగిందని మీ యాప్ ఫ్రంట్-ఎండ్‌కు కమ్యూనికేట్ చేయడానికి ఒక మార్గం, ఇది నిర్దిష్ట ఈవెంట్‌ల కోసం 'వినడం' మరియు అవి జరిగినప్పుడు చర్య తీసుకోవచ్చు.
   event UpdatedMessages(string oldStr, string newStr);

   // `string` రకానికి చెందిన `message` అనే స్థితి వేరియబుల్‌ను ప్రకటిస్తుంది.
   // స్టేట్ వేరియబుల్స్ అనేవి కాంట్రాక్ట్ నిల్వలో వాటి విలువలు శాశ్వతంగా నిల్వ చేయబడిన వేరియబుల్స్. `public` కీవర్డ్ వేరియబుల్స్‌ను కాంట్రాక్ట్ వెలుపల నుండి అందుబాటులో ఉండేలా చేస్తుంది మరియు ఇతర కాంట్రాక్ట్‌లు లేదా క్లయింట్లు విలువను యాక్సెస్ చేయడానికి పిలవగల ఫంక్షన్‌ను సృష్టిస్తుంది.
   string public message;

   // అనేక తరగతి-ఆధారిత వస్తువు-ఆధారిత భాషల మాదిరిగానే, కన్‌స్ట్రక్టర్ అనేది కాంట్రాక్ట్ సృష్టిపై మాత్రమే అమలు చేయబడే ఒక ప్రత్యేక ఫంక్షన్.
   // కాంట్రాక్ట్ యొక్క డేటాను ప్రారంభించడానికి కన్‌స్ట్రక్టర్లు ఉపయోగించబడతాయి. మరింత తెలుసుకోండి:https://solidity.readthedocs.io/en/v0.5.10/contracts.html#constructors
   constructor(string memory initMessage) {

      // స్ట్రింగ్ ఆర్గ్యుమెంట్ `initMessage`ని అంగీకరించి, విలువను కాంట్రాక్ట్ యొక్క `message` నిల్వ వేరియబుల్‌లోకి సెట్ చేస్తుంది).
      message = initMessage;
   }

   // ఒక స్ట్రింగ్ ఆర్గ్యుమెంట్‌ను అంగీకరించి, `message` నిల్వ వేరియబుల్‌ను నవీకరించే ఒక పబ్లిక్ ఫంక్షన్.
   function update(string memory newMessage) public {
      string memory oldMsg = message;
      message = newMessage;
      emit UpdatedMessages(oldMsg, newMessage);
   }
}

ఇది సృష్టి సమయంలో ఒక సందేశాన్ని నిల్వ చేసే ఒక ప్రాథమిక స్మార్ట్ కాంట్రాక్టు. దీనిని నవీకరణ ఫంక్షన్‌ను పిలవడం ద్వారా నవీకరించవచ్చు.

దశ 11: మెటామాస్క్ & ఆల్కెమీని మీ ప్రాజెక్ట్‌కు కనెక్ట్ చేయండి

మనం ఒక MetaMask వాలెట్‌ను, Alchemy ఖాతాను సృష్టించాము మరియు మన స్మార్ట్ కాంట్రాక్టును వ్రాశాము, ఇప్పుడు ఈ మూడింటిని కనెక్ట్ చేసే సమయం వచ్చింది.

మీ వాలెట్ నుండి పంపిన ప్రతి లావాదేవీకి మీ ప్రత్యేక ప్రైవేట్ కీని ఉపయోగించి సంతకం అవసరం. మా ప్రోగ్రామ్‌కు ఈ అనుమతిని అందించడానికి, మేము మా ప్రైవేట్ కీని పర్యావరణ ఫైల్‌లో సురక్షితంగా నిల్వ చేయవచ్చు. మేము ఇక్కడ ఆల్కెమీ కోసం ఒక API కీని కూడా నిల్వ చేస్తాము.

లావాదేవీలను పంపడం గురించి మరింత తెలుసుకోవడానికి, web3 ఉపయోగించి లావాదేవీలను పంపడంపై ఈ ట్యుటోరియల్ చూడండి (opens in a new tab).

మొదట, మీ ప్రాజెక్ట్ డైరెక్టరీలో dotenv ప్యాకేజీని ఇన్‌స్టాల్ చేయండి:

npm install dotenv --save

అప్పుడు, ప్రాజెక్ట్ యొక్క రూట్ డైరెక్టరీలో ఒక .env ఫైల్‌ను సృష్టించండి. మీ మెటామాస్క్ ప్రైవేట్ కీ మరియు HTTP ఆల్కెమీ API URL ను దానికి జోడించండి.

మీ పర్యావరణ ఫైల్‌కు .env అని పేరు పెట్టాలి లేదా అది పర్యావరణ ఫైల్‌గా గుర్తించబడదు.

దానికి process.env లేదా .env-custom లేదా మరే ఇతర పేరు పెట్టవద్దు.

మీ ప్రైవేట్ కీని ఎగుమతి చేయడానికి ఈ సూచనలను (opens in a new tab) అనుసరించండి
HTTP Alchemy API URL పొందడానికి క్రింద చూడండి

మీ .env ఈ విధంగా కనిపించాలి:

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

వీటిని వాస్తవంగా మన కోడ్‌కు కనెక్ట్ చేయడానికి, మనం ఈ వేరియబుల్స్‌ను దశ 13లో మన hardhat.config.js ఫైల్‌లో రిఫరెన్స్ చేస్తాము.

దశ 12: Ethers.jsని ఇన్‌స్టాల్ చేయండి

Ethers.js అనేది ఒక లైబ్రరీ, ఇది ప్రామాణిక JSON-RPC పద్ధతులను (opens in a new tab) మరింత వినియోగదారు స్నేహపూర్వక పద్ధతులతో చుట్టడం ద్వారా ఇథీరియంకు ఇంటరాక్ట్ చేయడం మరియు అభ్యర్థనలు చేయడం సులభం చేస్తుంది.

హార్డ్‌హ్యాట్ అదనపు టూలింగ్ మరియు విస్తరించిన కార్యాచరణ కోసం ప్లగిన్‌లను (opens in a new tab) ఏకీకృతం చేయడానికి మాకు అనుమతిస్తుంది. కాంట్రాక్ట్ అమలు కోసం మేము ఈథర్స్ ప్లగిన్ (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ని ఈ విధంగా కనిపించేలా అప్‌డేట్ చేయండి:

/**
 * @type import('hardhat/config').HardhatUserConfig
 */

require("dotenv").config()
require("@nomiclabs/hardhat-ethers")

const { API_URL, PRIVATE_KEY } = process.env

module.exports = {
  solidity: "0.7.3",
  defaultNetwork: "goerli",
  networks: {
    hardhat: {},
    goerli: {
      url: API_URL,
      accounts: [`0x${PRIVATE_KEY}`],
    },
  },
}

దశ 14: మా కాంట్రాక్టును కంపైల్ చేయండి

ఇప్పటివరకు ప్రతిదీ పనిచేస్తుందని నిర్ధారించుకోవడానికి, మా కాంట్రాక్ట్‌ను కంపైల్ చేద్దాం. compile టాస్క్ అనేది అంతర్నిర్మిత హార్డ్‌హ్యాట్ టాస్క్‌లలో ఒకటి.

కమాండ్ లైన్ నుండి రన్ చేయండి:

npx hardhat compile

మీకు మూల ఫైల్‌లో SPDX లైసెన్స్ ఐడెంటిఫైయర్ అందించబడలేదు గురించి హెచ్చరిక రావచ్చు, కానీ దాని గురించి చింతించాల్సిన అవసరం లేదు - ఆశాజనకంగా మిగతావన్నీ బాగున్నాయి! కాకపోతే, మీరు ఎల్లప్పుడూ ఆల్కెమీ డిస్కార్డ్ (opens in a new tab)లో సందేశం పంపవచ్చు.

దశ 15: మా అమలు స్క్రిప్ట్‌ను వ్రాయండి

ఇప్పుడు మా కాంట్రాక్ట్ వ్రాయబడింది మరియు మా కాన్ఫిగరేషన్ ఫైల్ సిద్ధంగా ఉంది, మా కాంట్రాక్ట్ డిప్లోయ్ స్క్రిప్ట్‌ను వ్రాసే సమయం వచ్చింది.

scripts/ ఫోల్డర్‌కు నావిగేట్ చేసి, deploy.js అనే కొత్త ఫైల్‌ను సృష్టించి, దానికి క్రింది కంటెంట్‌లను జోడించండి:

async function main() {
  const HelloWorld = await ethers.getContractFactory("HelloWorld")

  // అమలును ప్రారంభించండి, కాంట్రాక్ట్ ఆబ్జెక్ట్‌కు పరిష్కరించే వాగ్దానాన్ని తిరిగి ఇస్తుంది
  const hello_world = await HelloWorld.deploy("Hello World!")
  console.log("కాంట్రాక్ట్ చిరునామాకు అమలు చేయబడింది:", hello_world.address)
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error)
    process.exit(1)
  })

Hardhat వారి కాంట్రాక్ట్స్ ట్యుటోరియల్ (opens in a new tab)లో ఈ కోడ్ లైన్‌లు ప్రతి ఒక్కటి ఏమి చేస్తుందో అద్భుతంగా వివరిస్తుంది, మేము వారి వివరణలను ఇక్కడ స్వీకరించాము.

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

ethers.js లో ఒక ContractFactory అనేది కొత్త స్మార్ట్ కాంట్రాక్టులను అమలు చేయడానికి ఉపయోగించే ఒక నైరూప్యత, కాబట్టి ఇక్కడ HelloWorld అనేది మా హలో వరల్డ్ కాంట్రాక్ట్ యొక్క ఉదాహరణల కోసం ఒక ఫ్యాక్టరీ (opens in a new tab). hardhat-ethers ప్లగిన్‌ని ఉపయోగిస్తున్నప్పుడు ContractFactory మరియు Contract ఉదాహరణలు డిఫాల్ట్‌గా మొదటి సంతకం చేసిన వ్యక్తికి (యజమానికి) కనెక్ట్ చేయబడతాయి.

const hello_world = await HelloWorld.deploy()

ContractFactoryపై deploy()ను పిలవడం అమలును ప్రారంభిస్తుంది, మరియు ఒక Contract ఆబ్జెక్ట్‌కు పరిష్కరించే ఒక Promiseను తిరిగి ఇస్తుంది. ఇది మా స్మార్ట్ కాంట్రాక్ట్ ఫంక్షన్‌ల ప్రతిదానికీ ఒక పద్ధతిని కలిగి ఉన్న ఆబ్జెక్ట్.

దశ 16: మన కాంట్రాక్టును డిప్లాయ్ చేయండి

మేము చివరికి మా స్మార్ట్ కాంట్రాక్ట్‌ను డిప్లోయ్ చేయడానికి సిద్ధంగా ఉన్నాము! కమాండ్ లైన్‌కు నావిగేట్ చేసి రన్ చేయండి:

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

మీరు అప్పుడు ఇలాంటిది చూడాలి:

కాంట్రాక్ట్ ఈ చిరునామాకు డిప్లాయ్ చేయబడింది: 0x6cd7d44516a20882cEa2DE9f205bF401c0d23570

దయచేసి ఈ చిరునామాను సేవ్ చేయండి. మనం ట్యుటోరియల్‌లో తరువాత దీనిని ఉపయోగిస్తాము.

మనం Goerli etherscan (opens in a new tab) కి వెళ్లి మన కాంట్రాక్ట్ చిరునామా కోసం శోధిస్తే, అది విజయవంతంగా అమలు చేయబడిందని మనం చూడగలగాలి. లావాదేవీ ఇలా కనిపిస్తుంది:

From చిరునామా మీ మెటామాస్క్ ఖాతా చిరునామాతో సరిపోలాలి మరియు To చిరునామా కాంట్రాక్ట్ క్రియేషన్ అని చెబుతుంది. మనం లావాదేవీలోకి క్లిక్ చేస్తే, మన కాంట్రాక్ట్ చిరునామాను To ఫీల్డ్‌లో చూస్తాము.

అభినందనలు! మీరు ఇప్పుడే ఇథీరియం టెస్టునెట్‌కు ఒక స్మార్ట్ కాంట్రాక్టును అమలు చేసారు.

తెర వెనుక ఏమి జరుగుతుందో అర్థం చేసుకోవడానికి, మన ఆల్కెమీ డాష్‌బోర్డ్ (opens in a new tab)లోని ఎక్స్‌ప్లోరర్ ట్యాబ్‌కు నావిగేట్ చేద్దాం. మీకు బహుళ ఆల్కెమీ యాప్‌లు ఉంటే, యాప్ ద్వారా ఫిల్టర్ చేసి, హలో వరల్డ్ని ఎంచుకున్నట్లు నిర్ధారించుకోండి.

ఇక్కడ మీరు .deploy() ఫంక్షన్‌ను పిలిచినప్పుడు Hardhat/Ethers మా కోసం తెర వెనుక చేసిన కొన్ని JSON-RPC పద్ధతులను చూస్తారు. ఇక్కడ రెండు ముఖ్యమైన పద్ధతులు eth_sendRawTransaction (opens in a new tab), ఇది మన కాంట్రాక్టును Goerli చైన్‌పై వ్రాయడానికి అభ్యర్థన, మరియు eth_getTransactionByHash (opens in a new tab), ఇది హాష్ ఇచ్చిన మన లావాదేవీ గురించి సమాచారాన్ని చదవడానికి అభ్యర్థన. లావాదేవీలను పంపడం గురించి మరింత తెలుసుకోవడానికి, Web3 ఉపయోగించి లావాదేవీలను పంపడంపై మా ట్యుటోరియల్ చూడండి.

భాగం 2: మీ స్మార్ట్ కాంట్రాక్ట్‌తో సంభాషించండి

ఇప్పుడు మనం Goerli నెట్‌వర్క్‌కు ఒక స్మార్ట్ కాంట్రాక్ట్‌ను విజయవంతంగా అమలు చేశాము, దానితో ఎలా సంభాషించాలో నేర్చుకుందాం.

ఒక interact.js ఫైల్‌ను సృష్టించండి

ఇది మన సంభాషణ స్క్రిప్ట్‌ను వ్రాసే ఫైల్. మేము మీరు ఇంతకు ముందు భాగం 1 లో ఇన్‌స్టాల్ చేసిన Ethers.js లైబ్రరీని ఉపయోగిస్తాము.

scripts/ఫోల్డర్ లోపల, interact.js అనే కొత్త ఫైల్‌ను సృష్టించి, క్రింది కోడ్‌ను జోడించండి:

// interact.js

const API_KEY = process.env.API_KEY
const PRIVATE_KEY = process.env.PRIVATE_KEY
const CONTRACT_ADDRESS = process.env.CONTRACT_ADDRESS

మీ .env ఫైల్‌ను నవీకరించండి

మేము కొత్త పర్యావరణ వేరియబుల్స్‌ను ఉపయోగిస్తున్నాము, కాబట్టి వాటిని మేము ఇంతకుముందు సృష్టించిన .env ఫైల్‌లో నిర్వచించాలి.

మేము మా ఆల్కెమీ API_KEY మరియు మీ స్మార్ట్ కాంట్రాక్ట్ అమలు చేయబడిన CONTRACT_ADDRESS కోసం ఒక నిర్వచనాన్ని జోడించాలి.

మీ .env ఫైల్ ఈ విధంగా కనిపించాలి:

# .env

API_URL = "https://eth-goerli.alchemyapi.io/v2/<మీ-api-కీ>"
API_KEY = "<మీ-api-కీ>"
PRIVATE_KEY = "<మీ-మెటామాస్క్-ప్రైవేట్-కీ>"
CONTRACT_ADDRESS = "0x<మీ కాంట్రాక్ట్ చిరునామా>"

మీ కాంట్రాక్ట్ ABI ని పొందండి

మా కాంట్రాక్ట్ అనేది మా స్మార్ట్ కాంట్రాక్ట్‌తో ఇంటరాక్ట్ అవ్వడానికి ఇంటర్‌ఫేస్. హార్డ్‌హ్యాట్ స్వయంచాలకంగా ఒక ABIని రూపొందించి, దానిని HelloWorld.jsonలో సేవ్ చేస్తుంది. ABIని ఉపయోగించడానికి, మన interact.js ఫైల్‌కు క్రింది కోడ్ లైన్‌లను జోడించడం ద్వారా కంటెంట్‌లను పార్స్ చేయాలి:

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

మీరు ABIని చూడాలనుకుంటే, దాన్ని మీ కన్సోల్లో ప్రింట్ చేయవచ్చు:

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

మీ ABI కన్సోల్‌కు ముద్రించబడి చూడటానికి, మీ టెర్మినల్‌కు నావిగేట్ చేసి, అమలు చేయండి:

npx hardhat run scripts/interact.js

మీ కాంట్రాక్ట్ యొక్క ఉదాహరణను సృష్టించండి

మా కాంట్రాక్ట్‌తో సంభాషించడానికి, మేము మా కోడ్‌లో ఒక కాంట్రాక్ట్ ఉదాహరణను సృష్టించాలి. Ethers.js తో అలా చేయడానికి, మేము మూడు భావనలతో పని చేయాలి:

ప్రొవైడర్ - బ్లాక్‌చెయిన్‌కు చదవడానికి మరియు వ్రాయడానికి యాక్సెస్ ఇచ్చే ఒక నోడ్ ప్రొవైడర్
సంతకం చేసేవాడు - లావాదేవీలపై సంతకం చేయగల ఇథీరియం ఖాతాను సూచిస్తుంది
కాంట్రాక్ట్ - ఆన్‌చైన్‌లో అమలు చేయబడిన ఒక నిర్దిష్ట కాంట్రాక్టును సూచించే ఒక Ethers.js ఆబ్జెక్ట్

మేము కాంట్రాక్ట్ యొక్క ఉదాహరణను సృష్టించడానికి మునుపటి దశ నుండి కాంట్రాక్ట్ ABI ని ఉపయోగిస్తాము:

// interact.js

// ప్రొవైడర్
const alchemyProvider = new ethers.providers.AlchemyProvider(
  (network = "goerli"),
  API_KEY
)

// సంతకం చేసేవాడు
const signer = new ethers.Wallet(PRIVATE_KEY, alchemyProvider)

// కాంట్రాక్ట్
const helloWorldContract = new ethers.Contract(
  CONTRACT_ADDRESS,
  contract.abi,
  signer
)

ethers.js డాక్యుమెంటేషన్ (opens in a new tab)లో ప్రొవైడర్లు, సంతకం చేసేవారు మరియు కాంట్రాక్టుల గురించి మరింత తెలుసుకోండి.

ప్రారంభ సందేశాన్ని చదవండి

మేము initMessage = "Hello world!" తో మా కాంట్రాక్టును అమలు చేసినప్పుడు గుర్తుందా? మేము ఇప్పుడు మా స్మార్ట్ కాంట్రాక్టులో నిల్వ చేసిన ఆ సందేశాన్ని చదివి, దానిని కన్సోల్‌కు ముద్రిస్తాము.

జావాస్క్రిప్ట్‌లో, నెట్‌వర్క్‌లతో సంభాషించేటప్పుడు అసమకాలిక ఫంక్షన్‌లు ఉపయోగించబడతాయి. అసమకాలిక ఫంక్షన్‌ల గురించి మరింత తెలుసుకోవడానికి, ఈ మీడియం కథనాన్ని చదవండి (opens in a new tab).

మా స్మార్ట్ కాంట్రాక్టులో సందేశం ఫంక్షన్‌ను పిలిచి, ప్రారంభ సందేశాన్ని చదవడానికి క్రింది కోడ్‌ను ఉపయోగించండి:

// interact.js

// ...

async function main() {
  const message = await helloWorldContract.message()
  console.log("సందేశం ఇది: " + message)
}
main()

టెర్మినల్‌లో npx hardhat run scripts/interact.js ఉపయోగించి ఫైల్‌ను అమలు చేసిన తర్వాత మనం ఈ ప్రతిస్పందనను చూడాలి:

సందేశం ఇది: హలో వరల్డ్!

అభినందనలు! మీరు ఇప్పుడే ఇథీరియం బ్లాక్‌చెయిన్ నుండి స్మార్ట్ కాంట్రాక్ట్ డేటాను విజయవంతంగా చదివారు, అద్భుతం!

సందేశాన్ని నవీకరించండి

కేవలం సందేశాన్ని చదవడమే కాకుండా, నవీకరణ ఫంక్షన్‌ని ఉపయోగించి మన స్మార్ట్ కాంట్రాక్టులో సేవ్ చేసిన సందేశాన్ని కూడా నవీకరించవచ్చు! అద్భుతం కదా?

సందేశాన్ని నవీకరించడానికి, మనం మన ఇన్‌స్టాంటియేటెడ్ కాంట్రాక్ట్ ఆబ్జెక్ట్‌పై నేరుగా నవీకరణ ఫంక్షన్‌ను పిలవవచ్చు:

// interact.js

// ...

async function main() {
  const message = await helloWorldContract.message()
  console.log("సందేశం ఇది: " + message)

  console.log("సందేశాన్ని నవీకరిస్తోంది...")
  const tx = await helloWorldContract.update("ఇది కొత్త సందేశం.")
  await tx.wait()
}
main()

లైన్ 11 లో, తిరిగి వచ్చిన లావాదేవీ ఆబ్జెక్ట్‌పై .wait() కు కాల్ చేస్తామని గమనించండి. ఇది ఫంక్షన్ నుండి నిష్క్రమించే ముందు లావాదేవీ బ్లాక్‌చెయిన్‌పై మైన్ అయ్యే వరకు మన స్క్రిప్ట్ వేచి ఉండేలా చేస్తుంది. .wait() కాల్ చేర్చకపోతే, స్క్రిప్ట్ కాంట్రాక్టులో నవీకరించబడిన సందేశం విలువను చూడకపోవచ్చు.

కొత్త సందేశాన్ని చదవండి

నవీకరించబడిన సందేశం విలువను చదవడానికి మీరు మునుపటి దశను పునరావృతం చేయగలగాలి. ఒక క్షణం తీసుకుని, ఆ కొత్త విలువను ప్రింట్ చేయడానికి అవసరమైన మార్పులు చేయగలరేమో చూడండి!

మీకు సూచన అవసరమైతే, ఈ సమయంలో మీ interact.js ఫైల్ ఎలా ఉండాలో ఇక్కడ ఉంది:

// interact.js

const API_KEY = process.env.API_KEY
const PRIVATE_KEY = process.env.PRIVATE_KEY
const CONTRACT_ADDRESS = process.env.CONTRACT_ADDRESS

const contract = require("../artifacts/contracts/HelloWorld.sol/HelloWorld.json")

// ప్రొవైడర్ - ఆల్కెమీ
const alchemyProvider = new ethers.providers.AlchemyProvider(
  (network = "goerli"),
  API_KEY
)

// సంతకం చేసేవాడు - మీరు
const signer = new ethers.Wallet(PRIVATE_KEY, alchemyProvider)

// కాంట్రాక్ట్ ఉదాహరణ
const helloWorldContract = new ethers.Contract(
  CONTRACT_ADDRESS,
  contract.abi,
  signer
)

async function main() {
  const message = await helloWorldContract.message()
  console.log("సందేశం ఇది: " + message)

  console.log("సందేశాన్ని నవీకరిస్తోంది...")
  const tx = await helloWorldContract.update("ఇది కొత్త సందేశం")
  await tx.wait()

  const newMessage = await helloWorldContract.message()
  console.log("కొత్త సందేశం ఇది: " + newMessage)
}

main()

ఇప్పుడు స్క్రిప్ట్‌ను అమలు చేయండి మరియు మీరు పాత సందేశాన్ని, నవీకరణ స్థితిని మరియు మీ టెర్మినల్‌కు ముద్రించబడిన కొత్త సందేశాన్ని చూడగలగాలి!

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

సందేశం ఇది: హలో వరల్డ్!
సందేశాన్ని నవీకరిస్తోంది...
కొత్త సందేశం ఇది: ఇది కొత్త సందేశం.

ఆ స్క్రిప్ట్‌ను అమలు చేస్తున్నప్పుడు, కొత్త సందేశం లోడ్ అవ్వడానికి ముందు సందేశాన్ని నవీకరిస్తోంది... దశ లోడ్ అవ్వడానికి కొంత సమయం పడుతుందని మీరు గమనించవచ్చు. అది మైనింగ్ ప్రక్రియ కారణంగా; లావాదేవీలు మైన్ అవుతున్నప్పుడు వాటిని ట్రాక్ చేయడంపై మీకు ఆసక్తి ఉంటే, ఒక లావాదేవీ స్థితిని చూడటానికి ఆల్కెమీ మెమ్‌పూల్‌ను (opens in a new tab) సందర్శించండి. లావాదేవీ డ్రాప్ అయితే, Goerli Etherscan (opens in a new tab) ను తనిఖీ చేసి, మీ లావాదేవీ హాష్ కోసం శోధించడం కూడా సహాయపడుతుంది.

భాగం 3: మీ స్మార్ట్ కాంట్రాక్ట్‌ను Etherscanకు ప్రచురించండి

మీరు మీ స్మార్ట్ కాంట్రాక్టుకు జీవం పోయడానికి చాలా కష్టపడ్డారు; ఇప్పుడు దానిని ప్రపంచంతో పంచుకునే సమయం వచ్చింది!

Etherscanలో మీ స్మార్ట్ కాంట్రాక్టును ధృవీకరించడం ద్వారా, ఎవరైనా మీ మూల కోడ్‌ను వీక్షించవచ్చు మరియు మీ స్మార్ట్ కాంట్రాక్ట్‌తో సంభాషించవచ్చు. మొదలు పెడదాము.

దశ 1: మీ Etherscan ఖాతాలో ఒక API కీని రూపొందించండి

మీరు ప్రచురించడానికి ప్రయత్నిస్తున్న స్మార్ట్ కాంట్రాక్ట్ మీకు చెందినదేనని ధృవీకరించడానికి ఒక Etherscan API కీ అవసరం.

మీకు ఇప్పటికే Etherscan ఖాతా లేకపోతే, ఒక ఖాతా కోసం సైన్ అప్ చేయండి (opens in a new tab).

లాగిన్ అయిన తర్వాత, నావిగేషన్ బార్‌లో మీ వినియోగదారు పేరును కనుగొని, దానిపై హోవర్ చేసి, నా ప్రొఫైల్ బటన్‌ను ఎంచుకోండి.

మీ ప్రొఫైల్ పేజీలో, మీరు ఒక సైడ్ నావిగేషన్ బార్‌ను చూడాలి. సైడ్ నావిగేషన్ బార్ నుండి, API కీలు ఎంచుకోండి. తరువాత, కొత్త API కీని సృష్టించడానికి "జోడించు" బటన్‌ను నొక్కండి, మీ యాప్‌కు hello-world అని పేరు పెట్టి, కొత్త API కీని సృష్టించు బటన్‌ను నొక్కండి.

మీ కొత్త API కీ API కీ పట్టికలో కనిపించాలి. API కీని మీ క్లిప్‌బోర్డ్‌కు కాపీ చేయండి.

తరువాత, మనం Etherscan API కీని మన .env ఫైల్‌కు జోడించాలి.

జోడించిన తర్వాత, మీ .env ఫైల్ ఈ విధంగా కనిపించాలి:

API_URL = "https://eth-goerli.alchemyapi.io/v2/your-api-key"
PUBLIC_KEY = "మీ-పబ్లిక్-ఖాతా-చిరునామా"
PRIVATE_KEY = "మీ-ప్రైవేట్-ఖాతా-చిరునామా"
CONTRACT_ADDRESS = "మీ-కాంట్రాక్ట్-చిరునామా"
ETHERSCAN_API_KEY = "మీ-etherscan-కీ"

హార్డ్‌హ్యాట్-అమలు చేయబడిన స్మార్ట్ కాంట్రాక్టులు

hardhat-etherscan ఇన్‌స్టాల్ చేయండి

హార్డ్‌హ్యాట్ ఉపయోగించి మీ కాంట్రాక్టును Etherscanకు ప్రచురించడం చాలా సులభం. ప్రారంభించడానికి మీరు ముందుగా hardhat-etherscan ప్లగిన్‌ను ఇన్‌స్టాల్ చేయాలి. hardhat-etherscan స్వయంచాలకంగా స్మార్ట్ కాంట్రాక్ట్ యొక్క మూల కోడ్ మరియు ABI ని Etherscan లో ధృవీకరిస్తుంది. దీనిని జోడించడానికి, hello-world డైరెక్టరీలో దీన్ని అమలు చేయండి:

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

ఇన్‌స్టాల్ చేసిన తర్వాత, మీ hardhat.config.js ఎగువన క్రింది స్టేట్‌మెంట్‌ను చేర్చండి మరియు Etherscan కాన్ఫిగ్ ఎంపికలను జోడించండి:

// hardhat.config.js

require("dotenv").config()
require("@nomiclabs/hardhat-ethers")
require("@nomiclabs/hardhat-etherscan")

const { API_URL, PRIVATE_KEY, ETHERSCAN_API_KEY } = process.env

module.exports = {
  solidity: "0.7.3",
  defaultNetwork: "goerli",
  networks: {
    hardhat: {},
    goerli: {
      url: API_URL,
      accounts: [`0x${PRIVATE_KEY}`],
    },
  },
  etherscan: {
    // Etherscan కోసం మీ API కీ
    // https://etherscan.io/ లో ఒకటి పొందండి
    apiKey: ETHERSCAN_API_KEY,
  },
}

Etherscanలో మీ స్మార్ట్ కాంట్రాక్టును ధృవీకరించండి

అన్ని ఫైల్‌లు సేవ్ చేయబడి ఉన్నాయని మరియు అన్ని .env వేరియబుల్స్ సరిగ్గా కాన్ఫిగర్ చేయబడి ఉన్నాయని నిర్ధారించుకోండి.

ధృవీకరించు టాస్క్‌ను అమలు చేయండి, కాంట్రాక్ట్ చిరునామాను మరియు అది అమలు చేయబడిన నెట్‌వర్క్‌ను పంపండి:

npx hardhat verify --network goerli DEPLOYED_CONTRACT_ADDRESS 'హలో వరల్డ్!'

DEPLOYED_CONTRACT_ADDRESS అనేది Goerli టెస్ట్ నెట్‌వర్క్‌లో మీ అమలు చేయబడిన స్మార్ట్ కాంట్రాక్ట్ యొక్క చిరునామా అని నిర్ధారించుకోండి. అలాగే, చివరి ఆర్గ్యుమెంట్ ('హలో వరల్డ్!') భాగం 1 లోని అమలు దశలో ఉపయోగించిన అదే స్ట్రింగ్ విలువ అయి ఉండాలి.

అన్నీ సరిగ్గా జరిగితే, మీ టెర్మినల్‌లో క్రింది సందేశాన్ని చూస్తారు:

కాంట్రాక్ట్ కోసం మూల కోడ్ విజయవంతంగా సమర్పించబడింది
contracts/HelloWorld.sol:HelloWorld at 0xdeployed-contract-address
Etherscanలో ధృవీకరణ కోసం. ధృవీకరణ ఫలితం కోసం వేచి ఉంది...


Etherscanలో HelloWorld కాంట్రాక్ట్ విజయవంతంగా ధృవీకరించబడింది.
https://goerli.etherscan.io/address/<contract-address>#contracts

అభినందనలు! మీ స్మార్ట్ కాంట్రాక్ట్ కోడ్ Etherscanలో ఉంది!

Etherscanలో మీ స్మార్ట్ కాంట్రాక్టును చూడండి!

మీ టెర్మినల్‌లో అందించిన లింక్‌కు మీరు నావిగేట్ చేసినప్పుడు, మీరు మీ స్మార్ట్ కాంట్రాక్ట్ కోడ్ మరియు ABI Etherscanలో ప్రచురించబడి ఉండటం చూడగలగాలి!

వాహూ - మీరు చేసారు ఛాంప్! ఇప్పుడు ఎవరైనా మీ స్మార్ట్ కాంట్రాక్టుకు కాల్ చేయవచ్చు లేదా వ్రాయవచ్చు! మీరు తరువాత ఏమి నిర్మిస్తారో చూడటానికి మేము వేచి ఉండలేము!

భాగం 4 - మీ స్మార్ట్ కాంట్రాక్టును ఫ్రంటెండ్‌తో ఏకీకృతం చేయడం

ఈ ట్యుటోరియల్ చివరి నాటికి, మీరు ఎలా చేయాలో తెలుసుకుంటారు:

మీ డాప్‌కు మెటామాస్క్ వాలెట్‌ను కనెక్ట్ చేయండి
మీ స్మార్ట్ కాంట్రాక్టు నుండి Alchemy Web3 (opens in a new tab) API ఉపయోగించి డేటాను చదవండి
మెటామాస్క్ ఉపయోగించి ఇథీరియం లావాదేవీలపై సంతకం చేయండి

ఈ డాప్ కోసం, మేము React (opens in a new tab) ను మన ఫ్రంటెండ్ ఫ్రేమ్‌వర్క్‌గా ఉపయోగిస్తాము; అయితే, మేము దాని ప్రాథమికాలను విడదీయడానికి ఎక్కువ సమయం వెచ్చించబోమని గమనించడం ముఖ్యం, ఎందుకంటే మేము ఎక్కువగా మన ప్రాజెక్టుకు Web3 కార్యాచరణను తీసుకురావడంపై దృష్టి పెడతాము.

ముందస్తు అవసరంగా, మీరు React గురించి ప్రాథమిక స్థాయి అవగాహన కలిగి ఉండాలి. లేకపోతే, అధికారిక React కు పరిచయం ట్యుటోరియల్ (opens in a new tab) పూర్తి చేయాలని మేము సిఫార్సు చేస్తున్నాము.

స్టార్టర్ ఫైల్‌లను క్లోన్ చేయండి

ముందుగా, ఈ ప్రాజెక్ట్ కోసం స్టార్టర్ ఫైల్‌లను పొందడానికి హలో-వరల్డ్-పార్ట్-ఫోర్ GitHub రిపోజిటరీకి (opens in a new tab) వెళ్లి, ఈ రిపోజిటరీని మీ స్థానిక యంత్రానికి క్లోన్ చేయండి.

స్థానికంగా క్లోన్ చేయబడిన రిపోజిటరీని తెరవండి. ఇందులో రెండు ఫోల్డర్‌లు ఉన్నాయని గమనించండి: స్టార్టర్-ఫైల్స్ మరియు పూర్తి చేయబడినవి.

స్టార్టర్-ఫైల్స్- మేము ఈ డైరెక్టరీలో పని చేస్తాము, మేము UI ని మీ ఇథీరియం వాలెట్‌కు మరియు భాగం 3 లో Etherscan కు ప్రచురించిన స్మార్ట్ కాంట్రాక్టుకు కనెక్ట్ చేస్తాము.
పూర్తి చేయబడినది మొత్తం పూర్తి చేయబడిన ట్యుటోరియల్‌ను కలిగి ఉంటుంది మరియు మీరు ఇరుక్కుపోతే మాత్రమే సూచనగా ఉపయోగించాలి.

తరువాత, మీ స్టార్టర్-ఫైల్స్ కాపీని మీకు ఇష్టమైన కోడ్ ఎడిటర్‌కు తెరిచి, ఆపై src ఫోల్డర్‌లోకి నావిగేట్ చేయండి.

మేము వ్రాసే కోడ్ అంతా src ఫోల్డర్ కింద ఉంటుంది. మా ప్రాజెక్టుకు Web3 కార్యాచరణను అందించడానికి మేము HelloWorld.js కాంపోనెంట్ మరియు util/interact.js జావాస్క్రిప్ట్ ఫైల్‌లను సవరించబోతున్నాము.

స్టార్టర్ ఫైల్‌లను చూడండి

మేము కోడింగ్ ప్రారంభించే ముందు, స్టార్టర్ ఫైల్స్‌లో మనకు ఏమి అందించబడిందో అన్వేషిద్దాం.

మీ react ప్రాజెక్ట్‌ను రన్ చేయండి

మా బ్రౌజర్‌లో React ప్రాజెక్ట్‌ను రన్ చేయడం ద్వారా ప్రారంభిద్దాం. React యొక్క అందం ఏమిటంటే, మా బ్రౌజర్‌లో మా ప్రాజెక్ట్ రన్ అవుతున్నప్పుడు, మేము సేవ్ చేసే ఏవైనా మార్పులు మా బ్రౌజర్‌లో ప్రత్యక్షంగా అప్‌డేట్ చేయబడతాయి.

ప్రాజెక్ట్‌ను అమలు చేయడానికి, స్టార్టర్-ఫైల్స్ ఫోల్డర్ యొక్క రూట్ డైరెక్టరీకి నావిగేట్ చేసి, ప్రాజెక్ట్ యొక్క డిపెండెన్సీలను ఇన్‌స్టాల్ చేయడానికి మీ టెర్మినల్‌లో 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 నుండి కొన్ని అంశాలు (మేము వాటిని త్వరలో మరింత వివరంగా వివరిస్తాము!), మరియు ఆల్కెమీ లోగో ఉన్నాయి.

// HelloWorld.js

import React from "react"
import { useEffect, useState } from "react"
import {
  helloWorldContract,
  connectWallet,
  updateMessage,
  loadCurrentMessage,
  getCurrentWalletConnected,
} from "./util/interact.js"

import alchemylogo from "./alchemylogo.svg"

తరువాత, మేము నిర్దిష్ట ఈవెంట్‌ల తర్వాత నవీకరించే మా స్థితి వేరియబుల్స్ ఉన్నాయి.

// HelloWorld.js

//స్థితి వేరియబుల్స్
const [walletAddress, setWallet] = useState("")
const [status, setStatus] = useState("")
const [message, setMessage] = useState("నెట్‌వర్క్‌కు కనెక్షన్ లేదు.")
const [newMessage, setNewMessage] = useState("")

ప్రతి వేరియబుల్ దేనిని సూచిస్తుందో ఇక్కడ ఉంది:

walletAddress - వినియోగదారుడి వాలెట్ చిరునామాను నిల్వ చేసే ఒక స్ట్రింగ్
స్థితి- వినియోగదారునికి డాప్‌తో ఎలా ఇంటరాక్ట్ అవ్వాలో మార్గనిర్దేశం చేసే సహాయక సందేశాన్ని నిల్వ చేసే స్ట్రింగ్
సందేశం - స్మార్ట్ కాంట్రాక్టులో ప్రస్తుత సందేశాన్ని నిల్వ చేసే స్ట్రింగ్
కొత్తసందేశం - స్మార్ట్ కాంట్రాక్టుకు వ్రాయబడే కొత్త సందేశాన్ని నిల్వ చేసే స్ట్రింగ్

స్థితి వేరియబుల్స్ తర్వాత, మీరు ఐదు అమలు చేయని ఫంక్షన్‌లను చూస్తారు: useEffect ,addSmartContractListener, addWalletListener , connectWalletPressed, మరియు onUpdatePressed. అవి ఏమి చేస్తాయో క్రింద వివరిస్తాము:

// HelloWorld.js

//కేవలం ఒకసారి పిలువబడుతుంది
useEffect(async () => {
  //TODO: అమలు చేయండి
}, [])

function addSmartContractListener() {
  //TODO: అమలు చేయండి
}

function addWalletListener() {
  //TODO: అమలు చేయండి
}

const connectWalletPressed = async () => {
  //TODO: అమలు చేయండి
}

const onUpdatePressed = async () => {
  //TODO: అమలు చేయండి
}

useEffect (opens in a new tab)- ఇది మీ కాంపోనెంట్ రెండర్ అయిన తర్వాత పిలువబడే ఒక React హుక్. దీనికి ఖాళీ శ్రేణి [] ప్రాప్ పంపబడినందున (లైన్ 4 చూడండి), ఇది కేవలం కాంపోనెంట్ యొక్క మొదటి రెండర్‌లో మాత్రమే పిలువబడుతుంది. ఇక్కడ మనం మన స్మార్ట్ కాంట్రాక్టులో నిల్వ చేసిన ప్రస్తుత సందేశాన్ని లోడ్ చేస్తాము, మన స్మార్ట్ కాంట్రాక్ట్ మరియు వాలెట్ శ్రోతలను పిలుస్తాము, మరియు ఇప్పటికే వాలెట్ కనెక్ట్ చేయబడిందో లేదో ప్రతిబింబించడానికి మన UI ను నవీకరిస్తాము.
addSmartContractListener- ఈ ఫంక్షన్ మన HelloWorld కాంట్రాక్ట్ యొక్క UpdatedMessages ఈవెంట్ కోసం చూసే ఒక శ్రోతను సెటప్ చేస్తుంది మరియు మన స్మార్ట్ కాంట్రాక్టులో సందేశం మార్చబడినప్పుడు మన UI ను నవీకరిస్తుంది.
addWalletListener- ఈ ఫంక్షన్ వినియోగదారు యొక్క మెటామాస్క్ వాలెట్ స్థితిలో మార్పులను గుర్తించే ఒక శ్రోతను సెటప్ చేస్తుంది, ఉదాహరణకు వినియోగదారు తన వాలెట్‌ను డిస్‌కనెక్ట్ చేసినప్పుడు లేదా చిరునామాలను మార్చినప్పుడు.
connectWalletPressed- ఈ ఫంక్షన్ వినియోగదారు యొక్క మెటామాస్క్ వాలెట్‌ను మన డాప్‌కు కనెక్ట్ చేయడానికి పిలువబడుతుంది.
onUpdatePressed - వినియోగదారు స్మార్ట్ కాంట్రాక్టులో నిల్వ చేసిన సందేశాన్ని నవీకరించాలనుకున్నప్పుడు ఈ ఫంక్షన్ పిలువబడుతుంది.

ఈ ఫైల్ చివరిలో, మా కాంపోనెంట్ యొక్క UI ఉంది.

// HelloWorld.js

//మా కాంపోనెంట్ యొక్క UI
return (
  <div id="container">
    <img id="logo" src={alchemylogo}></img>
    <button id="walletButton" onClick={connectWalletPressed}>
      {walletAddress.length > 0 ? (
        "కనెక్ట్ చేయబడింది: " +
        String(walletAddress).substring(0, 6) +
        "..." +
        String(walletAddress).substring(38)
      ) : (
        <span>వాలెట్ కనెక్ట్ చేయి</span>
      )}
    </button>

    <h2 style={{ paddingTop: "50px" }}>ప్రస్తుత సందేశం:</h2>
    <p>{message}</p>

    <h2 style={{ paddingTop: "18px" }}>కొత్త సందేశం:</h2>

    <div>
      <input
        type="text"
        placeholder="మీ స్మార్ట్ కాంట్రాక్టులో సందేశాన్ని నవీకరించండి."
        onChange={(e) => setNewMessage(e.target.value)}
        value={newMessage}
      />
      <p id="status">{status}</p>

      <button id="publishButton" onClick={onUpdatePressed}>
        నవీకరించు
      </button>
</div>
 
</div>
)

మీరు ఈ కోడ్‌ను జాగ్రత్తగా స్కాన్ చేస్తే, మన UIలో మన వివిధ స్థితి వేరియబుల్స్‌ను ఎక్కడ ఉపయోగిస్తామో మీరు గమనిస్తారు:

6-12 లైన్లలో, వినియోగదారు వాలెట్ కనెక్ట్ చేయబడితే (అంటే, walletAddress.length > 0), మేము "walletButton" ID ఉన్న బటన్‌లో వినియోగదారు walletAddress యొక్క సంక్షిప్త రూపాన్ని ప్రదర్శిస్తాము; లేకపోతే అది కేవలం "వాలెట్ కనెక్ట్ చేయి" అని చెబుతుంది.
17వ లైన్‌లో, స్మార్ట్ కాంట్రాక్టులో నిల్వ చేసిన ప్రస్తుత సందేశాన్ని ప్రదర్శిస్తాము, ఇది సందేశం స్ట్రింగ్‌లో సంగ్రహించబడింది.
23-26 లైన్లలో, టెక్స్ట్ ఫీల్డ్‌లోని ఇన్‌పుట్ మారినప్పుడు మన కొత్తసందేశం స్థితి వేరియబుల్‌ను నవీకరించడానికి మేము ఒక నియంత్రిత కాంపోనెంట్‌ను (opens in a new tab) ఉపయోగిస్తాము.

మా స్థితి వేరియబుల్స్‌తో పాటు, publishButton మరియు walletButton ID లతో ఉన్న బటన్‌లు క్లిక్ చేయబడినప్పుడు వరుసగా connectWalletPressed మరియు onUpdatePressed ఫంక్షన్‌లు పిలువబడతాయని మీరు చూస్తారు.

చివరగా, ఈ HelloWorld.js కాంపోనెంట్ ఎక్కడ జోడించబడిందో చూద్దాం.

మీరు App.js ఫైల్‌కు వెళితే, ఇది React లో ప్రధాన కాంపోనెంట్ మరియు అన్ని ఇతర కాంపోనెంట్‌లకు కంటైనర్‌గా పనిచేస్తుంది, మీరు మా HelloWorld.js కాంపోనెంట్ 7వ లైన్‌లో ఇంజెక్ట్ చేయబడిందని చూస్తారు.

చివరగా, కానీ ముఖ్యంగా, మీ కోసం అందించిన మరో ఫైల్‌ను చూద్దాం, interact.js ఫైల్.

`interact.js` ఫైల్

మేము M-V-C (opens in a new tab) పద్ధతిని పాటించాలనుకుంటున్నందున, మన డాప్ యొక్క తర్కం, డేటా మరియు నియమాలను నిర్వహించడానికి అన్ని ఫంక్షన్‌లను కలిగి ఉన్న ఒక ప్రత్యేక ఫైల్ కావాలి, మరియు ఆ ఫంక్షన్‌లను మన ఫ్రంటెండ్‌కు (మన HelloWorld.js కాంపోనెంట్‌కు) ఎగుమతి చేయగలగాలి.

👆🏽ఇది మా interact.js ఫైల్ యొక్క ఖచ్చితమైన ఉద్దేశ్యం!

మీ src డైరెక్టరీలోని util ఫోల్డర్‌కు నావిగేట్ చేయండి, మరియు మేము interact.js అనే ఫైల్‌ను చేర్చినట్లు మీరు గమనించవచ్చు, ఇది మా అన్ని స్మార్ట్ కాంట్రాక్ట్ ఇంటరాక్షన్ మరియు వాలెట్ ఫంక్షన్‌లు మరియు వేరియబుల్స్‌ను కలిగి ఉంటుంది.

// interact.js

//export const helloWorldContract;

export const loadCurrentMessage = async () => {}

export const connectWallet = async () => {}

const getCurrentWalletConnected = async () => {}

export const updateMessage = async (message) => {}

ఫైల్ ఎగువన, మేము helloWorldContract ఆబ్జెక్ట్‌ను వ్యాఖ్యానించినట్లు మీరు గమనించవచ్చు. ఈ ట్యుటోరియల్‌లో తరువాత, మేము ఈ ఆబ్జెక్ట్‌ను అన్‌కామెంట్ చేసి, ఈ వేరియబుల్‌లో మా స్మార్ట్ కాంట్రాక్టును ఇన్‌స్టాంటియేట్ చేస్తాము, దీనిని మేము మా HelloWorld.js కాంపోనెంట్‌లోకి ఎగుమతి చేస్తాము.

మా helloWorldContract ఆబ్జెక్ట్ తర్వాత నాలుగు అమలు చేయని ఫంక్షన్‌లు ఈ క్రిందివి చేస్తాయి:

loadCurrentMessage - ఈ ఫంక్షన్ స్మార్ట్ కాంట్రాక్టులో నిల్వ చేసిన ప్రస్తుత సందేశాన్ని లోడ్ చేసే తర్కాన్ని నిర్వహిస్తుంది. ఇది ఆల్కెమీ Web3 API (opens in a new tab)ని ఉపయోగించి హలో వరల్డ్ స్మార్ట్ కాంట్రాక్టుకు చదివే కాల్ చేస్తుంది.
connectWallet - ఈ ఫంక్షన్ వినియోగదారు యొక్క మెటామాస్క్‌ను మన డాప్‌కు కనెక్ట్ చేస్తుంది.
getCurrentWalletConnected - ఈ ఫంక్షన్ పేజీ లోడ్ అయినప్పుడు మన డాప్‌కు ఇథీరియం ఖాతా ఇప్పటికే కనెక్ట్ చేయబడిందో లేదో తనిఖీ చేసి, తదనుగుణంగా మన UI ను నవీకరిస్తుంది.
updateMessage - ఈ ఫంక్షన్ స్మార్ట్ కాంట్రాక్టులో నిల్వ చేసిన సందేశాన్ని నవీకరిస్తుంది. ఇది హలో వరల్డ్ స్మార్ట్ కాంట్రాక్టుకు వ్రాయు కాల్ చేస్తుంది, కాబట్టి సందేశాన్ని నవీకరించడానికి వినియోగదారు యొక్క మెటామాస్క్ వాలెట్ ఇథీరియం లావాదేవీపై సంతకం చేయాల్సి ఉంటుంది.

ఇప్పుడు మనం ఏమి పని చేస్తున్నామో అర్థం చేసుకున్నాము, మన స్మార్ట్ కాంట్రాక్టు నుండి ఎలా చదవాలో తెలుసుకుందాం!

దశ 3: మీ స్మార్ట్ కాంట్రాక్టు నుండి చదవండి

మీ స్మార్ట్ కాంట్రాక్టు నుండి చదవడానికి, మీరు విజయవంతంగా సెటప్ చేయాలి:

ఇథీరియం చైన్‌కు API కనెక్షన్
మీ స్మార్ట్ కాంట్రాక్ట్ యొక్క లోడ్ చేయబడిన ఉదాహరణ
మీ స్మార్ట్ కాంట్రాక్ట్ ఫంక్షన్‌కు కాల్ చేయడానికి ఒక ఫంక్షన్
మీరు స్మార్ట్ కాంట్రాక్టు నుండి చదువుతున్న డేటా మారినప్పుడు నవీకరణల కోసం చూడటానికి ఒక శ్రోత

ఇది చాలా దశలలా అనిపించవచ్చు, కానీ చింతించకండి! వాటిలో ప్రతి ఒక్కటి ఎలా చేయాలో మేము మీకు దశలవారీగా వివరిస్తాము! :)

ఇథీరియం చైన్‌కు API కనెక్షన్‌ను ఏర్పాటు చేయండి

ఈ ట్యుటోరియల్ యొక్క 2వ భాగంలో, మన స్మార్ట్ కాంట్రాక్టు నుండి చదవడానికి మన ఆల్కెమీ Web3 కీని ఉపయోగించామని (opens in a new tab) గుర్తుందా? చైన్ నుండి చదవడానికి మీ డాప్‌లో మీకు ఆల్కెమీ Web3 కీ కూడా అవసరం.

మీరు ఇప్పటికే దానిని కలిగి లేకపోతే, ముందుగా మీ స్టార్టర్-ఫైల్స్ యొక్క రూట్ డైరెక్టరీకి నావిగేట్ చేసి, మీ టెర్మినల్‌లో క్రింది వాటిని అమలు చేయడం ద్వారా ఆల్కెమీ Web3 (opens in a new tab)ని ఇన్‌స్టాల్ చేయండి:

npm 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 కీని నిల్వ చేయడానికి మాకు సురక్షితమైన స్థలం ఉంటుంది.

npm install dotenv --save

మా డాప్ కోసం, మేము మా HTTP API కీకి బదులుగా మా వెబ్‌సాకెట్స్ API కీని ఉపయోగిస్తాము, ఎందుకంటే ఇది స్మార్ట్ కాంట్రాక్టులో నిల్వ చేసిన సందేశం మారినప్పుడు గుర్తించే ఒక శ్రోతను సెటప్ చేయడానికి మాకు అనుమతిస్తుంది.

మీరు మీ API కీని పొందిన తర్వాత, మీ రూట్ డైరెక్టరీలో ఒక .env ఫైల్‌ను సృష్టించి, దానికి మీ ఆల్కెమీ వెబ్‌సాకెట్స్ url ని జోడించండి. ఆ తరువాత, మీ .env ఫైల్ ఈ విధంగా కనిపించాలి:

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

ఇప్పుడు, మేము మా డాప్‌లో మా ఆల్కెమీ Web3 ఎండ్‌పాయింట్‌ను సెటప్ చేయడానికి సిద్ధంగా ఉన్నాము! మా util ఫోల్డర్‌లో ఉన్న మా interact.js కు తిరిగి వెళ్దాం మరియు ఫైల్ ఎగువన క్రింది కోడ్‌ను జోడిద్దాం:

// interact.js

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

//export const helloWorldContract;

పైన, మేము ముందుగా మా .env ఫైల్ నుండి ఆల్కెమీ కీని దిగుమతి చేసుకున్నాము మరియు మా ఆల్కెమీ Web3 ఎండ్‌పాయింట్‌ను ఏర్పాటు చేయడానికి createAlchemyWeb3 కు మా alchemyKey ను పంపాము.

ఈ ఎండ్‌పాయింట్ సిద్ధంగా ఉన్నందున, మా స్మార్ట్ కాంట్రాక్టును లోడ్ చేసే సమయం వచ్చింది!

మీ హలో వరల్డ్ స్మార్ట్ కాంట్రాక్టును లోడ్ చేస్తోంది

మీ హలో వరల్డ్ స్మార్ట్ కాంట్రాక్టును లోడ్ చేయడానికి, మీకు దాని కాంట్రాక్ట్ చిరునామా మరియు ABI అవసరం, ఈ ట్యుటోరియల్ యొక్క భాగం 3 పూర్తి చేస్తే Etherscanలో రెండూ కనుగొనవచ్చు.

Etherscan నుండి మీ కాంట్రాక్ట్ ABIని ఎలా పొందాలి

మీరు ఈ ట్యుటోరియల్ యొక్క 3వ భాగాన్ని దాటవేస్తే, మీరు HelloWorld కాంట్రాక్టును చిరునామా 0x6f3f635A9762B47954229Ea479b4541eAF402A6A (opens in a new tab) తో ఉపయోగించవచ్చు. దాని ABI ఇక్కడ (opens in a new tab) కనుగొనవచ్చు.

ఒక కాంట్రాక్ట్ ఏ ఫంక్షన్‌ను పిలుస్తుందో పేర్కొనడానికి మరియు ఫంక్షన్ మీరు ఆశిస్తున్న ఫార్మాట్‌లో డేటాను తిరిగి ఇస్తుందని నిర్ధారించుకోవడానికి ఒక కాంట్రాక్ట్ ABI అవసరం. మేము మా కాంట్రాక్ట్ ABIని కాపీ చేసిన తర్వాత, దానిని మీ src డైరెక్టరీలో contract-abi.json అనే JSON ఫైల్‌గా సేవ్ చేద్దాం.

మీ contract-abi.json మీ src ఫోల్డర్‌లో నిల్వ చేయబడాలి.

మా కాంట్రాక్ట్ చిరునామా, ABI మరియు ఆల్కెమీ Web3 ఎండ్‌పాయింట్‌తో సన్నద్ధమై, మా స్మార్ట్ కాంట్రాక్ట్ యొక్క ఉదాహరణను లోడ్ చేయడానికి మేము కాంట్రాక్ట్ పద్ధతిని (opens in a new tab) ఉపయోగించవచ్చు. మీ కాంట్రాక్ట్ ABI ని interact.js ఫైల్‌లోకి దిగుమతి చేసుకోండి మరియు మీ కాంట్రాక్ట్ చిరునామాను జోడించండి.

// interact.js

const contractABI = require("../contract-abi.json")
const contractAddress = "0x6f3f635A9762B47954229Ea479b4541eAF402A6A"

మేము ఇప్పుడు చివరకు మా helloWorldContract వేరియబుల్‌ను అన్‌కామెంట్ చేసి, మా AlchemyWeb3 ఎండ్‌పాయింట్‌ని ఉపయోగించి స్మార్ట్ కాంట్రాక్టును లోడ్ చేయవచ్చు:

// interact.js
export const helloWorldContract = new web3.eth.Contract(
  contractABI,
  contractAddress
)

పునరావృతం చేయడానికి, మీ interact.js యొక్క మొదటి 12 లైన్‌లు ఇప్పుడు ఈ విధంగా కనిపించాలి:

// interact.js

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

const contractABI = require("../contract-abi.json")
const contractAddress = "0x6f3f635A9762B47954229Ea479b4541eAF402A6A"

export const helloWorldContract = new web3.eth.Contract(
  contractABI,
  contractAddress
)

ఇప్పుడు మేము మా కాంట్రాక్ట్ లోడ్ చేశాము, మేము మా loadCurrentMessage ఫంక్షన్‌ను అమలు చేయవచ్చు!

మీ `interact.js` ఫైల్‌లో `loadCurrentMessage` అమలు చేయడం

ఈ ఫంక్షన్ చాలా సులభం. మేము మా కాంట్రాక్టు నుండి చదవడానికి ఒక సాధారణ అసమకాలిక web3 కాల్ చేయబోతున్నాము. మా ఫంక్షన్ స్మార్ట్ కాంట్రాక్టులో నిల్వ చేసిన సందేశాన్ని తిరిగి ఇస్తుంది:

మీ interact.js ఫైల్‌లో loadCurrentMessage ని క్రిందికి నవీకరించండి:

// interact.js

export const loadCurrentMessage = async () => {
  const message = await helloWorldContract.methods.message().call()
  return message
}

మేము ఈ స్మార్ట్ కాంట్రాక్టును మా UI లో ప్రదర్శించాలనుకుంటున్నందున, HelloWorld.js కాంపోనెంట్‌లోని useEffect ఫంక్షన్‌ను క్రిందికి నవీకరిద్దాం:

// HelloWorld.js

//కేవలం ఒకసారి పిలువబడుతుంది
useEffect(async () => {
  const message = await loadCurrentMessage()
  setMessage(message)
}, [])

గమనించండి, కాంపోనెంట్ యొక్క మొదటి రెండర్ సమయంలో మా loadCurrentMessage కేవలం ఒకసారి పిలువబడాలని మేము కోరుకుంటున్నాము. స్మార్ట్ కాంట్రాక్టులో సందేశం మారిన తర్వాత UIని స్వయంచాలకంగా నవీకరించడానికి మేము త్వరలో addSmartContractListenerని అమలు చేస్తాము.

మేము మా శ్రోతలోకి ప్రవేశించే ముందు, ఇప్పటివరకు మా వద్ద ఉన్నదాన్ని చూద్దాం! మీ HelloWorld.js మరియు interact.js ఫైల్‌లను సేవ్ చేసి, ఆపై http://localhost:3000/ (opens in a new tab) కి వెళ్లండి

ప్రస్తుత సందేశం ఇకపై "నెట్‌వర్క్‌కు కనెక్షన్ లేదు" అని చెప్పదని మీరు గమనించవచ్చు. బదులుగా ఇది స్మార్ట్ కాంట్రాక్టులో నిల్వ చేసిన సందేశాన్ని ప్రతిబింబిస్తుంది. అద్భుతం!

మీ UI ఇప్పుడు స్మార్ట్ కాంట్రాక్టులో నిల్వ చేసిన సందేశాన్ని ప్రతిబింబించాలి

ఇప్పుడు ఆ శ్రోత గురించి మాట్లాడుతూ...

`addSmartContractListener` అమలు చేయండి

ఈ ట్యుటోరియల్ సిరీస్‌లోని భాగం 1లో (opens in a new tab) మేము వ్రాసిన HelloWorld.sol ఫైల్‌ను మీరు తిరిగి ఆలోచిస్తే, మా స్మార్ట్ కాంట్రాక్ట్ యొక్క నవీకరణ ఫంక్షన్ పిలవబడిన తర్వాత UpdatedMessages అనే స్మార్ట్ కాంట్రాక్ట్ ఈవెంట్ విడుదల చేయబడుతుందని మీరు గుర్తుంచుకుంటారు (9 మరియు 27 లైన్‌లు చూడండి):

// HelloWorld.sol

// సాలిడిటీ యొక్క సంస్కరణను, సెమాంటిక్ వర్షనింగ్‌ని ఉపయోగించి నిర్దేశిస్తుంది.
// మరింత తెలుసుకోండి: https://solidity.readthedocs.io/en/v0.5.10/layout-of-source-files.html#pragma
pragma solidity ^0.7.3;

// 'HelloWorld' పేరుతో ఒక కాంట్రాక్టును నిర్వచిస్తుంది.
// ఒక కాంట్రాక్టు అనేది ఫంక్షన్‌లు మరియు డేటా (దాని స్థితి) యొక్క సేకరణ. ఒకసారి అమలు చేసిన తర్వాత, ఒక కాంట్రాక్టు ఇథీరియం బ్లాక్‌చెయిన్‌లో ఒక నిర్దిష్ట చిరునామాలో నివసిస్తుంది. మరింత తెలుసుకోండి: https://solidity.readthedocs.io/en/v0.5.10/structure-of-a-contract.html
contract HelloWorld {

   //నవీకరణ ఫంక్షన్ పిలిచినప్పుడు విడుదల చేయబడుతుంది
   //స్మార్ట్ కాంట్రాక్ట్ ఈవెంట్‌లు మీ కాంట్రాక్ట్ కోసం బ్లాక్‌చెయిన్‌లో ఏదో జరిగిందని మీ యాప్ ఫ్రంట్-ఎండ్‌కు కమ్యూనికేట్ చేయడానికి ఒక మార్గం, ఇది నిర్దిష్ట ఈవెంట్‌ల కోసం 'వినడం' మరియు అవి జరిగినప్పుడు చర్య తీసుకోవచ్చు.
   event UpdatedMessages(string oldStr, string newStr);

   // `string` రకానికి చెందిన `message` అనే స్థితి వేరియబుల్‌ను ప్రకటిస్తుంది.
   // స్టేట్ వేరియబుల్స్ అనేవి కాంట్రాక్ట్ నిల్వలో వాటి విలువలు శాశ్వతంగా నిల్వ చేయబడిన వేరియబుల్స్. `public` కీవర్డ్ వేరియబుల్స్‌ను కాంట్రాక్ట్ వెలుపల నుండి అందుబాటులో ఉండేలా చేస్తుంది మరియు ఇతర కాంట్రాక్ట్‌లు లేదా క్లయింట్లు విలువను యాక్సెస్ చేయడానికి పిలవగల ఫంక్షన్‌ను సృష్టిస్తుంది.
   string public message;

   // అనేక తరగతి-ఆధారిత వస్తువు-ఆధారిత భాషల మాదిరిగానే, కన్‌స్ట్రక్టర్ అనేది కాంట్రాక్ట్ సృష్టిపై మాత్రమే అమలు చేయబడే ఒక ప్రత్యేక ఫంక్షన్.
   // కాంట్రాక్ట్ యొక్క డేటాను ప్రారంభించడానికి కన్‌స్ట్రక్టర్లు ఉపయోగించబడతాయి. మరింత తెలుసుకోండి:https://solidity.readthedocs.io/en/v0.5.10/contracts.html#constructors
   constructor(string memory initMessage) {

      // స్ట్రింగ్ ఆర్గ్యుమెంట్ `initMessage`ని అంగీకరించి, విలువను కాంట్రాక్ట్ యొక్క `message` నిల్వ వేరియబుల్‌లోకి సెట్ చేస్తుంది).
      message = initMessage;
   }

   // ఒక స్ట్రింగ్ ఆర్గ్యుమెంట్‌ను అంగీకరించి, `message` నిల్వ వేరియబుల్‌ను నవీకరించే ఒక పబ్లిక్ ఫంక్షన్.
   function update(string memory newMessage) public {
      string memory oldMsg = message;
      message = newMessage;
      emit UpdatedMessages(oldMsg, newMessage);
   }
}

స్మార్ట్ కాంట్రాక్ట్ ఈవెంట్‌లు మీ కాంట్రాక్ట్ కోసం బ్లాక్‌చెయిన్‌లో ఏదో జరిగిందని (అంటే, ఒక ఈవెంట్ జరిగింది) మీ ఫ్రంట్-ఎండ్ అప్లికేషన్‌కు కమ్యూనికేట్ చేయడానికి ఒక మార్గం, ఇది నిర్దిష్ట ఈవెంట్‌ల కోసం 'వినడం' మరియు అవి జరిగినప్పుడు చర్య తీసుకోవచ్చు.

addSmartContractListener ఫంక్షన్ ప్రత్యేకంగా మా హలో వరల్డ్ స్మార్ట్ కాంట్రాక్ట్ యొక్క UpdatedMessages ఈవెంట్ కోసం వింటుంది, మరియు కొత్త సందేశాన్ని ప్రదర్శించడానికి మా UI ని నవీకరిస్తుంది.

addSmartContractListener ని క్రిందికి సవరించండి:

// HelloWorld.js

function addSmartContractListener() {
  helloWorldContract.events.UpdatedMessages({}, (error, data) => {
    if (error) {
      setStatus("😥 " + error.message)
    } else {
      setMessage(data.returnValues[1])
      setNewMessage("")
      setStatus("🎉 మీ సందేశం నవీకరించబడింది!")
    }
  })
}

శ్రోత ఒక ఈవెంట్‌ను గుర్తించినప్పుడు ఏమి జరుగుతుందో విడదీద్దాం:

ఈవెంట్ విడుదలైనప్పుడు ఒక లోపం సంభవిస్తే, అది మా స్థితి స్థితి వేరియబుల్ ద్వారా UI లో ప్రతిబింబిస్తుంది.
లేకపోతే, మేము తిరిగి వచ్చిన డేటా ఆబ్జెక్ట్‌ను ఉపయోగిస్తాము. data.returnValues అనేది సున్నా వద్ద సూచించబడిన ఒక శ్రేణి, ఇక్కడ శ్రేణిలోని మొదటి మూలకం మునుపటి సందేశాన్ని నిల్వ చేస్తుంది మరియు రెండవ మూలకం నవీకరించబడిన దానిని నిల్వ చేస్తుంది. మొత్తంగా, విజయవంతమైన ఈవెంట్‌లో మేము మా సందేశం స్ట్రింగ్‌ను నవీకరించబడిన సందేశానికి సెట్ చేస్తాము, కొత్తసందేశం స్ట్రింగ్‌ను క్లియర్ చేస్తాము మరియు మా స్మార్ట్ కాంట్రాక్టులో కొత్త సందేశం ప్రచురించబడిందని ప్రతిబింబించడానికి మా స్థితి స్థితి వేరియబుల్‌ను నవీకరిస్తాము.

చివరగా, HelloWorld.js కాంపోనెంట్ యొక్క మొదటి రెండర్‌లో ఇది ప్రారంభించబడటానికి మా useEffect ఫంక్షన్‌లో మా శ్రోతను పిలుద్దాం. మొత్తంగా, మీ useEffect ఫంక్షన్ ఈ విధంగా కనిపించాలి:

// HelloWorld.js

useEffect(async () => {
  const message = await loadCurrentMessage()
  setMessage(message)
  addSmartContractListener()
}, [])

ఇప్పుడు మనం మన స్మార్ట్ కాంట్రాక్టు నుండి చదవగలుగుతున్నాము, దానికి ఎలా వ్రాయాలో కూడా తెలుసుకోవడం చాలా బాగుంటుంది! అయితే, మా డాప్‌కు వ్రాయడానికి, మేము ముందుగా దానికి కనెక్ట్ చేయబడిన ఇథీరియం వాలెట్‌ను కలిగి ఉండాలి.

కాబట్టి, తరువాత మేము మా ఇథీరియం వాలెట్‌ను (మెటామాస్క్) సెటప్ చేయడం మరియు దానిని మా డాప్‌కు కనెక్ట్ చేయడం గురించి చర్చిస్తాము!

దశ 4: మీ ఇథీరియం వాలెట్‌ను సెటప్ చేయండి

ఇథీరియం చైన్‌పై ఏదైనా వ్రాయడానికి, వినియోగదారులు తమ వర్చువల్ వాలెట్ యొక్క ప్రైవేట్ కీలను ఉపయోగించి లావాదేవీలపై సంతకం చేయాలి. ఈ ట్యుటోరియల్ కోసం, మేము మెటామాస్క్‌ను (opens in a new tab) ఉపయోగిస్తాము, ఇది మీ ఇథీరియం ఖాతా చిరునామాను నిర్వహించడానికి ఉపయోగించే బ్రౌజర్‌లోని ఒక వర్చువల్ వాలెట్, ఎందుకంటే ఇది తుది-వినియోగదారు కోసం ఈ లావాదేవీ సంతకాన్ని చాలా సులభం చేస్తుంది.

ఇతీరియములో లావాదేవీలు ఎలా పనిచేస్తాయో మీరు మరింత అర్థం చేసుకోవాలనుకుంటే, ఇతీరియము ఫౌండేషన్ నుండి ఈ పేజీని చూడండి.

MetaMaskను డౌన్‌లోడ్ చేయండి

ఒక ఫాసెట్ నుండి ఈథర్‌ను జోడించండి

ఇథీరియం బ్లాక్‌చెయిన్‌లో ఒక లావాదేవీపై సంతకం చేయడానికి, మాకు కొంత నకిలీ Eth అవసరం. Eth పొందడానికి మీరు FaucETH (opens in a new tab) కు వెళ్లి, మీ Goerli ఖాతా చిరునామాను నమోదు చేసి, “నిధులను అభ్యర్థించు” క్లిక్ చేసి, ఆపై డ్రాప్‌డౌన్‌లో “Ethereum Testnet Goerli” ని ఎంచుకుని, చివరగా “నిధులను అభ్యర్థించు” బటన్‌ను మళ్లీ క్లిక్ చేయండి. త్వరలోనే మీ MetaMask ఖాతాలో Eth కనిపించాలి!

మీ బ్యాలెన్స్‌ను తనిఖీ చేయండి

మా బ్యాలెన్స్ అక్కడ ఉందని నిర్ధారించుకోవడానికి, Alchemy యొక్క కంపోజర్ సాధనాన్ని (opens in a new tab) ఉపయోగించి ఒక eth_getBalance (opens in a new tab) అభ్యర్థన చేద్దాం. ఇది మా వాలెట్‌లోని Eth మొత్తాన్ని తిరిగి ఇస్తుంది. మీరు మీ MetaMask అకౌంట్ చిరునామాను ఇన్‌పుట్ చేసి, “అభ్యర్థన పంపు” క్లిక్ చేసిన తర్వాత, మీరు ఇలాంటి ప్రతిస్పందనను చూడాలి:

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

గమనిక: ఈ ఫలితం weiలో ఉంది, ethలో కాదు. ఈథర్ యొక్క అతి చిన్న ప్రమాణంగా వీని ఉపయోగిస్తారు. wei నుండి ethకి మార్పిడి: 1 eth = 10¹⁸ wei. కాబట్టి మనం 0xde0b6b3a7640000 ను దశాంశానికి మార్చితే మనకు 1*10¹⁸ వస్తుంది, ఇది 1 ethకి సమానం.

అమ్మయ్య! మా నకిలీ డబ్బు అంతా అక్కడే ఉంది! 🤑

దశ 5: మీ UI కి మెటామాస్క్‌ను కనెక్ట్ చేయండి

ఇప్పుడు మా MetaMask వాలెట్ సెటప్ చేయబడింది, మా డాప్‌ను దానికి కనెక్ట్ చేద్దాం!

`connectWallet` ఫంక్షన్

మా interact.js ఫైల్‌లో, connectWallet ఫంక్షన్‌ను అమలు చేద్దాం, దీనిని మనం మా HelloWorld.js కాంపోనెంట్‌లో పిలవవచ్చు.

connectWallet ని క్రిందికి సవరించండి:

// interact.js

export const connectWallet = async () => {
  if (window.ethereum) {
    try {
      const addressArray = await window.ethereum.request({
        method: "eth_requestAccounts",
      })
      const obj = {
        status: "👆🏽 పైన ఉన్న టెక్స్ట్-ఫీల్డ్‌లో ఒక సందేశాన్ని వ్రాయండి.",
        address: addressArray[0],
      }
      return obj
    } catch (err) {
      return {
        address: "",
        status: "😥 " + err.message,
      }
    }
  } else {
    return {
      address: "",
      status: (
        <span>
          <p>
            {" "}
            🦊 <a target="_blank" href={`https://metamask.io/download`}>
              మీరు మీ బ్రౌజర్‌లో వర్చువల్ ఇథీరియం వాలెట్ అయిన మెటామాస్క్‌ను ఇన్‌స్టాల్ చేయాలి.
            </a>
          </p>
        </span>
      ),
    }
  }
}

ఈ భారీ కోడ్ బ్లాక్ ఖచ్చితంగా ఏమి చేస్తుంది?

ముందుగా, ఇది మీ బ్రౌజర్‌లో 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 తెరుచుకుంటుంది, దీని ద్వారా వినియోగదారుడు తమ వాలెట్‌ను మీ డాప్‌కు కనెక్ట్ చేయమని ప్రాంప్ట్ చేయబడతారు.

వినియోగదారు కనెక్ట్ చేయడానికి ఎంచుకుంటే, method: "eth_requestAccounts" డాప్‌కు కనెక్ట్ చేయబడిన వినియోగదారు యొక్క అన్ని ఖాతా చిరునామాలను కలిగి ఉన్న ఒక శ్రేణిని తిరిగి ఇస్తుంది. మొత్తం మీద, మా connectWallet ఫంక్షన్ ఈ శ్రేణిలోని మొదటి address (9వ పంక్తిని చూడండి) మరియు స్మార్ట్ కాంట్రాక్ట్‌కు ఒక సందేశం వ్రాయమని వినియోగదారుడిని ప్రాంప్ట్ చేసే ఒక status సందేశాన్ని కలిగి ఉన్న ఒక JSON వస్తువును తిరిగి ఇస్తుంది.
వినియోగదారుడు కనెక్షన్‌ను తిరస్కరిస్తే, అప్పుడు JSON వస్తువు తిరిగి వచ్చిన address కోసం ఖాళీ స్ట్రింగ్‌ను మరియు వినియోగదారుడు కనెక్షన్‌ను తిరస్కరించినట్లు ప్రతిబింబించే ఒక status సందేశాన్ని కలిగి ఉంటుంది.

ఇప్పుడు మేము ఈ connectWallet ఫంక్షన్‌ను వ్రాసాము, తదుపరి దశ దానిని మా HelloWorld.js కాంపోనెంట్‌కు పిలవడం.

`connectWallet` ఫంక్షన్‌ను మీ `HelloWorld.js` UI కాంపోనెంట్‌కు జోడించండి

HelloWorld.jsలోని connectWalletPressed ఫంక్షన్‌కు నావిగేట్ చేసి, దానిని క్రిందికి నవీకరించండి:

// HelloWorld.js

const connectWalletPressed = async () => {
  const walletResponse = await connectWallet()
  setStatus(walletResponse.status)
  setWallet(walletResponse.address)
}

మా interact.js ఫైల్ నుండి మా HelloWorld.js కాంపోనెంట్ నుండి మా కార్యాచరణలో ఎక్కువ భాగం ఎలా నైరూప్యీకరించబడిందో గమనించారా? ఇది మేము M-V-C పారడైమ్‌కు కట్టుబడి ఉండటానికి!

connectWalletPressedలో, మేము కేవలం మా దిగుమతి చేసుకున్న connectWallet ఫంక్షన్‌కు ఒక await కాల్ చేస్తాము, మరియు దాని ప్రతిస్పందనను ఉపయోగించి, మేము మా status మరియు walletAddress వేరియబుల్స్‌ను వాటి స్టేట్ హుక్స్ ద్వారా అప్‌డేట్ చేస్తాము.

ఇప్పుడు, రెండు ఫైల్‌లను సేవ్ చేద్దాం (HelloWorld.js మరియు interact.js) మరియు ఇప్పటివరకు మా UI ని పరీక్షిద్దాం.

పేజీ యొక్క కుడివైపు ఎగువన ఉన్న http://localhost:3000/ (opens in a new tab) పేజీలో మీ బ్రౌజర్‌ను తెరిచి, "వాలెట్ కనెక్ట్ చేయి" బటన్‌ను నొక్కండి.

మీరు MetaMaskను ఇన్‌స్టాల్ చేసి ఉంటే, మీ వాలెట్‌ను మీ డాప్‌కు కనెక్ట్ చేయమని మిమ్మల్ని ప్రాంప్ట్ చేయాలి. కనెక్ట్ చేయడానికి ఆహ్వానాన్ని అంగీకరించండి.

వాలెట్ బటన్ ఇప్పుడు మీ చిరునామా కనెక్ట్ చేయబడిందని ప్రతిబింబిస్తుందని మీరు చూడాలి! యాస్స్స్స్స్ 🔥

తరువాత, పేజీని రిఫ్రెష్ చేయడానికి ప్రయత్నించండి... ఇది వింతగా ఉంది. మా వాలెట్ బటన్ MetaMaskను కనెక్ట్ చేయమని మమ్మల్ని ప్రాంప్ట్ చేస్తోంది, అది ఇప్పటికే కనెక్ట్ చేయబడి ఉన్నప్పటికీ...

అయితే, భయపడవద్దు! మేము దానిని సులభంగా పరిష్కరించగలము (అర్థమైందా?) getCurrentWalletConnectedను అమలు చేయడం ద్వారా, ఇది ఒక చిరునామా మా డాప్‌కు ఇప్పటికే కనెక్ట్ చేయబడిందో లేదో తనిఖీ చేసి, మా UI ని తదనుగుణంగా నవీకరిస్తుంది!

`getCurrentWalletConnected` ఫంక్షన్

interact.js ఫైల్‌లోని మీ getCurrentWalletConnected ఫంక్షన్‌ను క్రిందికి నవీకరించండి:

// interact.js

export const getCurrentWalletConnected = async () => {
  if (window.ethereum) {
    try {
      const addressArray = await window.ethereum.request({
        method: "eth_accounts",
      })
      if (addressArray.length > 0) {
        return {
          address: addressArray[0],
          status: "👆🏽 పైన ఉన్న టెక్స్ట్-ఫీల్డ్‌లో ఒక సందేశాన్ని వ్రాయండి.",
        }
      } else {
        return {
          address: "",
          status: "🦊 కుడివైపు ఎగువన ఉన్న బటన్‌ని ఉపయోగించి మెటామాస్క్‌కు కనెక్ట్ అవ్వండి.",
        }
      }
    } catch (err) {
      return {
        address: "",
        status: "😥 " + err.message,
      }
    }
  } else {
    return {
      address: "",
      status: (
        <span>
          <p>
            {" "}
            🦊 <a target="_blank" href={`https://metamask.io/download`}>
              మీరు మీ బ్రౌజర్‌లో వర్చువల్ ఇథీరియం వాలెట్ అయిన మెటామాస్క్‌ను ఇన్‌స్టాల్ చేయాలి.
            </a>
          </p>
        </span>
      ),
    }
  }
}

ఈ కోడ్ మునుపటి దశలో మేము వ్రాసిన connectWallet ఫంక్షన్‌కు చాలా పోలి ఉంటుంది.

ప్రధాన వ్యత్యాసం ఏమిటంటే, ఇక్కడ మేము eth_requestAccounts పద్ధతిని కాల్ చేయడానికి బదులుగా, ఇది వినియోగదారుడు తమ వాలెట్‌ను కనెక్ట్ చేయడానికి MetaMaskను తెరుస్తుంది, ఇక్కడ మేము eth_accounts పద్ధతిని కాల్ చేస్తాము, ఇది కేవలం మా డాప్‌కు ప్రస్తుతం కనెక్ట్ చేయబడిన MetaMask చిరునామాలను కలిగి ఉన్న ఒక శ్రేణిని తిరిగి ఇస్తుంది.

ఈ ఫంక్షన్‌ను చర్యలో చూడటానికి, దానిని మా HelloWorld.js కాంపోనెంట్ యొక్క useEffect ఫంక్షన్‌లో పిలుద్దాం:

// HelloWorld.js

useEffect(async () => {
  const message = await loadCurrentMessage()
  setMessage(message)
  addSmartContractListener()

  const { address, status } = await getCurrentWalletConnected()
  setWallet(address)
  setStatus(status)
}, [])

గమనించండి, మేము మా walletAddress మరియు status స్టేట్ వేరియబుల్స్‌ను అప్‌డేట్ చేయడానికి మా getCurrentWalletConnected కాల్ యొక్క ప్రతిస్పందనను ఉపయోగిస్తాము.

ఇప్పుడు మీరు ఈ కోడ్‌ను జోడించారు, మా బ్రౌజర్ విండోను రిఫ్రెష్ చేయడానికి ప్రయత్నిద్దాం.

అద్భుతం! బటన్ మీరు కనెక్ట్ అయ్యారని చెప్పాలి, మరియు మీరు రిఫ్రెష్ చేసిన తర్వాత కూడా మీ కనెక్ట్ చేయబడిన వాలెట్ చిరునామా యొక్క ప్రివ్యూను చూపాలి!

`addWalletListener` అమలు చేయండి

మా డాప్ వాలెట్ సెటప్‌లో చివరి దశ వాలెట్ లిజనర్‌ను అమలు చేయడం, తద్వారా మా వాలెట్ స్టేట్ మారినప్పుడు, ఉదాహరణకు వినియోగదారుడు డిస్‌కనెక్ట్ చేసినప్పుడు లేదా ఖాతాలను మార్చినప్పుడు మా UI అప్‌డేట్ అవుతుంది.

మీ HelloWorld.js ఫైల్‌లో, మీ addWalletListener ఫంక్షన్‌ను క్రింది విధంగా సవరించండి:

// HelloWorld.js

function addWalletListener() {
  if (window.ethereum) {
    window.ethereum.on("accountsChanged", (accounts) => {
      if (accounts.length > 0) {
        setWallet(accounts[0])
        setStatus("👆🏽 పైన ఉన్న టెక్స్ట్-ఫీల్డ్‌లో ఒక సందేశాన్ని వ్రాయండి.")
      } else {
        setWallet("")
        setStatus("🦊 కుడివైపు ఎగువన ఉన్న బటన్‌ని ఉపయోగించి మెటామాస్క్‌కు కనెక్ట్ అవ్వండి.")
      }
    })
  } else {
    setStatus(
      <p>
        {" "}
        🦊 <a target="_blank" href={`https://metamask.io/download`}>
          మీరు మీ బ్రౌజర్‌లో వర్చువల్ ఇథీరియం వాలెట్ అయిన మెటామాస్క్‌ను ఇన్‌స్టాల్ చేయాలి.
        </a>
      </p>
    )
  }
}

ఈ సమయంలో ఇక్కడ ఏమి జరుగుతుందో అర్థం చేసుకోవడానికి మీకు మా సహాయం కూడా అవసరం లేదని నేను పందెం వేస్తున్నాను, కానీ సంపూర్ణత ప్రయోజనాల కోసం, దానిని త్వరగా విడదీద్దాం:

మొదట, మా ఫంక్షన్ window.ethereum ప్రారంభించబడిందో లేదో తనిఖీ చేస్తుంది (అనగా, MetaMask ఇన్‌స్టాల్ చేయబడింది).
- అది కాకపోతే, మేము కేవలం మా status స్టేట్ వేరియబుల్‌ను వినియోగదారుడిని MetaMaskను ఇన్‌స్టాల్ చేయమని ప్రాంప్ట్ చేసే ఒక JSX స్ట్రింగ్‌కు సెట్ చేస్తాము.
- అది ప్రారంభించబడితే, మేము 3వ పంక్తిలో window.ethereum.on("accountsChanged") లిజనర్‌ను సెట్ చేస్తాము, ఇది MetaMask వాలెట్‌లోని స్టేట్ మార్పులను వింటుంది, ఇందులో వినియోగదారుడు డాప్‌కు అదనపు ఖాతాను కనెక్ట్ చేసినప్పుడు, ఖాతాలను మార్చినప్పుడు, లేదా ఒక ఖాతాను డిస్‌కనెక్ట్ చేసినప్పుడు ఉంటాయి. కనీసం ఒక ఖాతా కనెక్ట్ చేయబడి ఉంటే, walletAddress స్టేట్ వేరియబుల్ లిజనర్ ద్వారా తిరిగి వచ్చిన accounts శ్రేణిలోని మొదటి ఖాతాగా అప్‌డేట్ చేయబడుతుంది. లేకపోతే, walletAddress ఖాళీ స్ట్రింగ్‌గా సెట్ చేయబడుతుంది.

చివరగా, మేము దానిని మా useEffect ఫంక్షన్‌లో పిలవాలి:

// HelloWorld.js

useEffect(async () => {
  const message = await loadCurrentMessage()
  setMessage(message)
  addSmartContractListener()

  const { address, status } = await getCurrentWalletConnected()
  setWallet(address)
  setStatus(status)

  addWalletListener()
}, [])

అంతే! మేము మా వాలెట్ కార్యాచరణను విజయవంతంగా పూర్తి చేసాము! ఇప్పుడు మా చివరి పనికి: మా స్మార్ట్ కాంట్రాక్టులో నిల్వ చేసిన సందేశాన్ని నవీకరించడం!

దశ 6: `updateMessage` ఫంక్షన్‌ను అమలు చేయండి

అలాగే మిత్రులారా, మేము చివరి దశకు చేరుకున్నాము! మీ interact.js ఫైల్ యొక్క updateMessage లో, మేము ఈ క్రిందివి చేయబోతున్నాము:

మేము మా స్మార్ట్ కాంటాక్టులో ప్రచురించాలనుకుంటున్న సందేశం చెల్లుబాటు అయ్యేదని నిర్ధారించుకోండి
మెటామాస్క్ ఉపయోగించి మా లావాదేవీపై సంతకం చేయండి
మా HelloWorld.js ఫ్రంటెండ్ కాంపోనెంట్ నుండి ఈ ఫంక్షన్‌ను పిలవండి

దీనికి ఎక్కువ సమయం పట్టదు; ఈ డాప్‌ను పూర్తి చేద్దాం!

ఇన్‌పుట్ దోష నిర్వహణ

సహజంగానే, ఫంక్షన్ ప్రారంభంలో కొంత రకమైన ఇన్‌పుట్ లోపం నిర్వహణ ఉండటం అర్ధమే.

మెటామాస్క్ పొడిగింపు ఇన్‌స్టాల్ చేయకపోతే, వాలెట్ కనెక్ట్ చేయకపోతే (అంటే, పంపిన చిరునామా ఖాళీ స్ట్రింగ్ అయితే), లేదా సందేశం ఖాళీ స్ట్రింగ్ అయితే మా ఫంక్షన్ ముందుగానే తిరిగి రావాలని మేము కోరుకుంటాము. updateMessage కు క్రింది లోపం నిర్వహణను జోడిద్దాం:

// interact.js

export const updateMessage = async (address, message) => {
  if (!window.ethereum || address === null) {
    return {
      status:
        "💡 బ్లాక్‌చెయిన్‌లో సందేశాన్ని నవీకరించడానికి మీ మెటామాస్క్ వాలెట్‌ను కనెక్ట్ చేయండి.",
    }
  }

  if (message.trim() === "") {
    return {
      status: "❌ మీ సందేశం ఖాళీ స్ట్రింగ్ కాకూడదు.",
    }
  }
}

ఇప్పుడు దానికి సరైన ఇన్‌పుట్ లోపం నిర్వహణ ఉంది, మెటామాస్క్ ద్వారా లావాదేవీపై సంతకం చేసే సమయం వచ్చింది!

మా లావాదేవీపై సంతకం చేయడం

మీరు ఇప్పటికే సాంప్రదాయ web3 ఇథీరియం లావాదేవీలతో సౌకర్యవంతంగా ఉంటే, మేము తరువాత వ్రాసే కోడ్ చాలా సుపరిచితంగా ఉంటుంది. మీ ఇన్‌పుట్ లోపం నిర్వహణ కోడ్ క్రింద, updateMessage కు క్రింది వాటిని జోడించండి:

// interact.js

//లావాదేవీ పారామితులను సెటప్ చేయండి
const transactionParameters = {
  to: contractAddress, // కాంట్రాక్ట్ ప్రచురణల సమయంలో తప్ప అవసరం.
  from: address, // వినియోగదారు యొక్క క్రియాశీల చిరునామాతో సరిపోలాలి.
  data: helloWorldContract.methods.update(message).encodeABI(),
}

//లావాదేవీపై సంతకం చేయండి
try {
  const txHash = await window.ethereum.request({
    method: "eth_sendTransaction",
    params: [transactionParameters],
  })
  return {
    status: (
      <span>
        ✅{" "}
        <a target="_blank" href={`https://goerli.etherscan.io/tx/${txHash}`}>
          Etherscanలో మీ లావాదేవీ స్థితిని వీక్షించండి!
        </a>
        <br />
        ℹ️ నెట్‌వర్క్ ద్వారా లావాదేవీ ధృవీకరించబడిన తర్వాత, సందేశం స్వయంచాలకంగా నవీకరించబడుతుంది.
      </span>
    ),
  }
} catch (error) {
  return {
    status: "😥 " + error.message,
  }
}

ఏమి జరుగుతుందో విడదీద్దాం. ముందుగా, మేము మా లావాదేవీల పారామితులను సెటప్ చేస్తాము, ఇక్కడ:

to గ్రహీత చిరునామాను నిర్దేశిస్తుంది (మా స్మార్ట్ కాంట్రాక్ట్)
from లావాదేవీ సంతకం చేసిన వ్యక్తిని నిర్దేశిస్తుంది, మా ఫంక్షన్‌లోకి మేము పంపిన చిరునామా వేరియబుల్
data మా హలో వరల్డ్ స్మార్ట్ కాంట్రాక్ట్ యొక్క నవీకరణ పద్ధతికి కాల్‌ను కలిగి ఉంది, మా సందేశం స్ట్రింగ్ వేరియబుల్‌ను ఇన్‌పుట్‌గా స్వీకరిస్తుంది

అప్పుడు, మేము ఒక await కాల్, window.ethereum.request చేస్తాము, ఇక్కడ మేము మెటామాస్క్‌ను లావాదేవీపై సంతకం చేయమని అడుగుతాము. గమనించండి, 11 మరియు 12 లైన్లలో, మేము మా eth పద్ధతి, eth_sendTransactionని నిర్దేశిస్తున్నాము మరియు మా transactionParametersను పంపుతున్నాము.

ఈ సమయంలో, MetaMask బ్రౌజర్‌లో తెరుచుకుంటుంది మరియు లావాదేవీపై సంతకం చేయమని లేదా తిరస్కరించమని వినియోగదారుడిని ప్రాంప్ట్ చేస్తుంది.

లావాదేవీ విజయవంతమైతే, ఫంక్షన్ ఒక JSON ఆబ్జెక్ట్‌ను తిరిగి ఇస్తుంది, ఇక్కడ స్థితి JSX స్ట్రింగ్ వినియోగదారుని వారి లావాదేవీ గురించి మరింత సమాచారం కోసం Etherscan ను తనిఖీ చేయమని ప్రేరేపిస్తుంది.
లావాదేవీ విఫలమైతే, ఫంక్షన్ ఒక JSON ఆబ్జెక్ట్‌ను తిరిగి ఇస్తుంది, ఇక్కడ స్థితి స్ట్రింగ్ లోపం సందేశాన్ని తెలియజేస్తుంది.

మొత్తంగా, మా updateMessage ఫంక్షన్ ఈ విధంగా కనిపించాలి:

// interact.js

export const updateMessage = async (address, message) => {
  //ఇన్‌పుట్ లోపం నిర్వహణ
  if (!window.ethereum || address === null) {
    return {
      status:
        "💡 బ్లాక్‌చెయిన్‌లో సందేశాన్ని నవీకరించడానికి మీ మెటామాస్క్ వాలెట్‌ను కనెక్ట్ చేయండి.",
    }
  }

  if (message.trim() === "") {
    return {
      status: "❌ మీ సందేశం ఖాళీ స్ట్రింగ్ కాకూడదు.",
    }
  }

  //లావాదేవీ పారామితులను సెటప్ చేయండి
  const transactionParameters = {
    to: contractAddress, // కాంట్రాక్ట్ ప్రచురణల సమయంలో తప్ప అవసరం.
    from: address, // వినియోగదారు యొక్క క్రియాశీల చిరునామాతో సరిపోలాలి.
    data: helloWorldContract.methods.update(message).encodeABI(),
  }

  //లావాదేవీపై సంతకం చేయండి
  try {
    const txHash = await window.ethereum.request({
      method: "eth_sendTransaction",
      params: [transactionParameters],
    })
    return {
      status: (
        <span>
          ✅{" "}
          <a target="_blank" href={`https://goerli.etherscan.io/tx/${txHash}`}>
            Etherscanలో మీ లావాదేవీ స్థితిని వీక్షించండి!
          </a>
          <br />
          ℹ️ నెట్‌వర్క్ ద్వారా లావాదేవీ ధృవీకరించబడిన తర్వాత, సందేశం స్వయంచాలకంగా నవీకరించబడుతుంది.
        </span>
      ),
    }
  } catch (error) {
    return {
      status: "😥 " + error.message,
    }
  }
}

చివరగా, మేము మా updateMessage ఫంక్షన్‌ను మా HelloWorld.js కాంపోనెంట్‌కు కనెక్ట్ చేయాలి.

`updateMessage`ని `HelloWorld.js` ఫ్రంటెండ్‌కు కనెక్ట్ చేయండి

మా onUpdatePressed ఫంక్షన్ దిగుమతి చేయబడిన updateMessage ఫంక్షన్‌కు await కాల్ చేసి, మా లావాదేవీ విజయవంతమైందో లేదా విఫలమైందో ప్రతిబింబించడానికి స్థితి స్థితి వేరియబుల్‌ను సవరించాలి:

// HelloWorld.js

const onUpdatePressed = async () => {
  const { status } = await updateMessage(walletAddress, newMessage)
  setStatus(status)
}

ఇది చాలా శుభ్రంగా మరియు సరళంగా ఉంటుంది. మరియు ఏమనుకుంటున్నారు... మీ డాప్ పూర్తయింది!!!

ముందుకు వెళ్లి నవీకరించు బటన్‌ను పరీక్షించండి!

మీ స్వంత కస్టమ్ డాప్‌ను తయారు చేసుకోండి

వూహూ, మీరు ట్యుటోరియల్ చివరికి వచ్చారు! పునరావృతం చేయడానికి, మీరు నేర్చుకున్నవి:

మీ డాప్ ప్రాజెక్టుకు మెటామాస్క్ వాలెట్‌ను కనెక్ట్ చేయండి
మీ స్మార్ట్ కాంట్రాక్టు నుండి Alchemy Web3 (opens in a new tab) API ఉపయోగించి డేటాను చదవండి
మెటామాస్క్ ఉపయోగించి ఇథీరియం లావాదేవీలపై సంతకం చేయండి

ఇప్పుడు మీరు మీ స్వంత కస్టమ్ డాప్ ప్రాజెక్ట్‌ను నిర్మించడానికి ఈ ట్యుటోరియల్ నుండి నైపుణ్యాలను వర్తింపజేయడానికి పూర్తిగా సన్నద్ధమయ్యారు! ఎప్పటిలాగే, మీకు ఏవైనా ప్రశ్నలు ఉంటే, ఆల్కెమీ డిస్కార్డ్ (opens in a new tab)లో సహాయం కోసం మమ్మల్ని సంప్రదించడానికి సంకోచించకండి. 🧙‍♂️

మీరు ఈ ట్యుటోరియల్‌ను పూర్తి చేసిన తర్వాత, మీ అనుభవం ఎలా ఉందో లేదా మీకు ఏవైనా అభిప్రాయాలు ఉంటే Twitter @alchemyplatform (opens in a new tab)లో మమ్మల్ని ట్యాగ్ చేయడం ద్వారా మాకు తెలియజేయండి!

పేజీ చివరి నవీకరణ: 3 ఏప్రిల్, 2026

+14