பிரதான உள்ளடக்கத்திற்குச் செல்

NFT மின்டர் பயிற்சி

திட்பம்
பரிமாறாக் குறி
அல்கெமி
ஸ்மார்ட் ஒப்பந்தங்கள்
frontend
Pinata
இடைநிலை
smudgil
6 அக்டோபர், 2021
24 நிமிட வாசிப்பு

Web2 பின்னணியில் இருந்து வரும் டெவலப்பர்களுக்கு இருக்கும் மிகப்பெரிய சவால்களில் ஒன்று, உங்கள் ஸ்மார்ட் ஒப்பந்தத்தை ஒரு ஃப்ரண்ட்எண்ட் திட்டத்துடன் இணைத்து அதனுடன் எவ்வாறு தொடர்புகொள்வது என்பதைக் கண்டறிவதாகும்.

ஒரு NFT மின்டரை உருவாக்குவதன் மூலம் - இது ஒரு எளிய பயனர் இடைமுகம் (UI) ஆகும், அங்கு உங்கள் டிஜிட்டல் சொத்துக்கான இணைப்பு, ஒரு தலைப்பு மற்றும் ஒரு விளக்கத்தை நீங்கள் உள்ளிடலாம் - நீங்கள் பின்வருவனவற்றைக் கற்றுக்கொள்வீர்கள்:

  • உங்கள் ஃப்ரண்ட்எண்ட் திட்டம் வழியாக MetaMask உடன் இணைக்கவும்
  • உங்கள் ஃப்ரண்ட்எண்டிலிருந்து ஸ்மார்ட் ஒப்பந்த முறைகளை அழைக்கவும்
  • MetaMask ஐப் பயன்படுத்தி பரிவர்த்தனைகளில் கையொப்பமிடுங்கள்

இந்தப் பயிற்சியில், நாங்கள் எங்கள் ஃப்ரண்ட்எண்ட் கட்டமைப்பாக Reactopens in a new tab ஐப் பயன்படுத்துவோம். இந்தப் பயிற்சி முதன்மையாக Web3 மேம்பாட்டில் கவனம் செலுத்துவதால், React அடிப்படைகளை உடைப்பதில் நாங்கள் அதிக நேரம் செலவிட மாட்டோம். அதற்கு பதிலாக, எங்கள் திட்டத்திற்கு செயல்பாட்டைக் கொண்டுவருவதில் நாங்கள் கவனம் செலுத்துவோம்.

ஒரு முன்நிபந்தனையாக, நீங்கள் React பற்றி தொடக்க நிலை புரிதலைக் கொண்டிருக்க வேண்டும்—கூறுகள் (components), முட்டுகள் (props), useState/useEffect மற்றும் அடிப்படைச் செயல்பாடு அழைப்புகள் (basic function calling) எவ்வாறு செயல்படுகின்றன என்பதை அறிந்திருக்க வேண்டும். இந்தச் சொற்களில் எதையும் நீங்கள் இதுவரை கேள்விப்பட்டதில்லை என்றால், இந்த React அறிமுகப் பயிற்சிopens in a new tabயைப் பார்க்க விரும்பலாம். காட்சி மூலம் அதிகம் கற்பவர்களுக்கு, நெட் நிஞ்ஜாவின் இந்த சிறந்த முழுமையான நவீன React பயிற்சிopens in a new tab வீடியோ தொடரை நாங்கள் மிகவும் பரிந்துரைக்கிறோம்.

நீங்கள் இன்னும் அவ்வாறு செய்யவில்லை என்றால், இந்தப் பயிற்சியை முடிக்கவும், பிளாக்செயினில் எதையும் உருவாக்கவும் உங்களுக்கு நிச்சயமாக ஒரு அல்கெமி கணக்கு தேவைப்படும். இங்கேopens in a new tab ஒரு இலவச கணக்கிற்கு பதிவு செய்யுங்கள்.

மேலும் தாமதமின்றி, தொடங்குவோம்!

NFT களை உருவாக்குதல் 101

எந்தவொரு குறியீட்டையும் பார்க்கத் தொடங்குவதற்கு முன், ஒரு NFT ஐ உருவாக்குவது எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்துகொள்வது அவசியம். இதில் இரண்டு படிகள் உள்ளன:

Ethereum பிளாக்செயினில் ஒரு NFT ஸ்மார்ட் ஒப்பந்தத்தை வெளியிடுங்கள்

இரண்டு NFT ஸ்மார்ட் ஒப்பந்தத் தரநிலைகளுக்கு இடையிலான மிகப்பெரிய வேறுபாடு என்னவென்றால், ERC-1155 ஒரு பல-டோக்கன் தரநிலை மற்றும் தொகுதிச் செயல்பாட்டை உள்ளடக்கியது, அதேசமயம் ERC-721 ஒரு ஒற்றை-டோக்கன் தரநிலையாகும், எனவே ஒரு நேரத்தில் ஒரு டோக்கனை மாற்றுவதை மட்டுமே ஆதரிக்கிறது.

மின்டிங் செயல்பாட்டை அழைக்கவும்

வழக்கமாக, இந்த மின்டிங் செயல்பாட்டிற்கு நீங்கள் இரண்டு மாறிகளை அளவுருக்களாக அனுப்ப வேண்டும், முதலாவதாக பெறுநர், இது உங்கள் புதிதாக உருவாக்கப்பட்ட NFT ஐப் பெறும் முகவரியைக் குறிப்பிடுகிறது, இரண்டாவதாக NFT இன் tokenURI, இது NFT இன் மெட்டாடேட்டாவை விவரிக்கும் ஒரு JSON ஆவணத்திற்குத் தீர்க்கும் ஒரு சரம் ஆகும்.

ஒரு NFT இன் மெட்டாடேட்டா தான் உண்மையில் அதற்கு உயிரூட்டுகிறது, இது பெயர், விளக்கம், படம் (அல்லது வேறுபட்ட டிஜிட்டல் சொத்து) மற்றும் பிற பண்புக்கூறுகள் போன்ற பண்புகளைக் கொண்டிருக்க அனுமதிக்கிறது. NFT இன் மெட்டாடேட்டாவைக் கொண்டிருக்கும் ஒரு tokenURI இன் உதாரணம்opens in a new tab இங்கே உள்ளது.

இந்தப் பயிற்சியில், பகுதி 2 இல் கவனம் செலுத்தப் போகிறோம், அதாவது எங்களின் React பயனர் இடைமுகத்தைப் பயன்படுத்தி ஏற்கனவே உள்ள ஒரு NFT இன் ஸ்மார்ட் ஒப்பந்த மின்டிங் செயல்பாட்டை அழைப்பது.

இந்தப் பயிற்சியில் நாம் அழைக்கவிருக்கும் ERC-721 NFT ஸ்மார்ட் ஒப்பந்தத்திற்கான இணைப்பு இங்கே உள்ளதுopens in a new tab. நாங்கள் அதை எப்படி உருவாக்கினோம் என்பதை நீங்கள் அறிய விரும்பினால், எங்களின் மற்றொரு பயிற்சியான "ஒரு NFT ஐ உருவாக்குவது எப்படி"opens in a new tabயைப் பார்க்குமாறு நாங்கள் மிகவும் பரிந்துரைக்கிறோம்.

சரி, ஒரு NFT ஐ உருவாக்குவது எப்படி செயல்படுகிறது என்பதை இப்போது நாம் புரிந்துகொண்டோம், எங்கள் தொடக்கக் கோப்புகளை குளோன் செய்வோம்!

தொடக்கக் கோப்புகளை குளோன் செய்யுங்கள்

முதலில், இந்தத் திட்டத்திற்கான தொடக்கக் கோப்புகளைப் பெற nft-minter-tutorial GitHub களஞ்சியத்திற்குopens in a new tab செல்லுங்கள். இந்தக் களஞ்சியத்தை உங்கள் உள்ளூர் சூழலில் குளோன் செய்யுங்கள்.

நீங்கள் இந்த குளோன் செய்யப்பட்ட nft-minter-tutorial களஞ்சியத்தைத் திறக்கும்போது, அதில் minter-starter-files மற்றும் nft-minter ஆகிய இரண்டு கோப்புறைகள் இருப்பதைக் கவனிப்பீர்கள்.

  • minter-starter-files இந்தத் திட்டத்திற்கான தொடக்கக் கோப்புகளை (அடிப்படையில் React பயனர் இடைமுகம்) கொண்டுள்ளது. இந்தப் பயிற்சியில், நாங்கள் இந்தக் கோப்பகத்தில் வேலை செய்வோம், ஏனெனில் உங்கள் Ethereum பணப்பை மற்றும் ஒரு NFT ஸ்மார்ட் ஒப்பந்தத்துடன் இதை இணைப்பதன் மூலம் இந்த பயனர் இடைமுகத்திற்கு எவ்வாறு உயிரூட்டுவது என்பதை நீங்கள் கற்றுக்கொள்கிறீர்கள்.
  • nft-minter முழுமையான பயிற்சியைக் கொண்டுள்ளது, நீங்கள் சிக்கிக்கொண்டால் அது உங்களுக்கு ஒரு குறிப்பாக இருக்கும்.

அடுத்து, உங்கள் minter-starter-files இன் நகலை உங்கள் குறியீடு எடிட்டரில் திறந்து, பின்னர் உங்கள் src கோப்புறைக்குள் செல்லவும்.

நாம் எழுதும் அனைத்து குறியீடுகளும் src கோப்புறையின் கீழ் இருக்கும். நாங்கள் Minter.js கூறினைத் திருத்துவோம் மற்றும் எங்கள் திட்டத்திற்கு Web3 செயல்பாட்டைக் கொடுக்க கூடுதல் ஜாவாஸ்கிரிப்ட் கோப்புகளை எழுதுவோம்.

படி 2: எங்கள் தொடக்கக் கோப்புகளைப் பாருங்கள்

நாம் குறியீடு எழுதத் தொடங்குவதற்கு முன், தொடக்கக் கோப்புகளில் ஏற்கனவே நமக்கு என்ன வழங்கப்பட்டுள்ளது என்பதைப் பார்ப்பது முக்கியம்.

உங்கள் ரியாக்ட் திட்டத்தை இயக்கவும்

எங்கள் உலாவியில் React திட்டத்தை இயக்குவதன் மூலம் தொடங்குவோம். React இன் அழகு என்னவென்றால், எங்கள் திட்டத்தை எங்கள் உலாவியில் இயக்கியவுடன், நாங்கள் சேமிக்கும் எந்த மாற்றங்களும் எங்கள் உலாவியில் நேரலையில் புதுப்பிக்கப்படும்.

திட்டத்தை இயக்க, minter-starter-files கோப்புறையின் மூலக் கோப்பகத்திற்குச் சென்று, திட்டத்தின் சார்நிலைகளை நிறுவ உங்கள் டெர்மினலில் npm install ஐ இயக்கவும்:

cd minter-starter-files
npm install

அவை நிறுவப்பட்டதும், உங்கள் டெர்மினலில் npm start ஐ இயக்கவும்:

npm start

அவ்வாறு செய்வது உங்கள் உலாவியில் http://localhost:3000/opens in a new tab ஐத் திறக்கும், அங்கு எங்கள் திட்டத்திற்கான ஃப்ரண்ட்எண்டைக் காண்பீர்கள். இதில் 3 புலங்கள் இருக்க வேண்டும்: உங்கள் NFT இன் சொத்துக்கான இணைப்பை உள்ளிட ஒரு இடம், உங்கள் NFT இன் பெயரை உள்ளிடவும், மற்றும் ஒரு விளக்கத்தை வழங்கவும்.

நீங்கள் "வாலட்டை இணைக்கவும்" அல்லது "NFT ஐ உருவாக்கவும்" பொத்தான்களைக் கிளிக் செய்ய முயற்சித்தால், அவை வேலை செய்யாது என்பதை நீங்கள் கவனிப்பீர்கள் - ஏனென்றால் அவற்றின் செயல்பாட்டை நாம் இன்னும் நிரல்படுத்த வேண்டும்! :)

Minter.js கூறு

குறிப்பு: நீங்கள் minter-starter-files கோப்புறையில் இருக்கிறீர்கள் என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள், nft-minter கோப்புறையில் அல்ல!

எங்கள் எடிட்டரில் உள்ள src கோப்புறைக்குச் சென்று Minter.js கோப்பைத் திறப்போம். இந்தக் கோப்பில் உள்ள அனைத்தையும் நாம் புரிந்துகொள்வது மிகவும் முக்கியம், ஏனெனில் இது நாம் வேலை செய்யப்போகும் முதன்மை React கூறாகும்.

இந்தக் கோப்பின் மேலே, குறிப்பிட்ட நிகழ்வுகளுக்குப் பிறகு நாம் புதுப்பிக்கும் எங்கள் நிலை மாறிகள் உள்ளன.

1//நிலை மாறிகள்
2const [walletAddress, setWallet] = useState("")
3const [status, setStatus] = useState("")
4const [name, setName] = useState("")
5const [description, setDescription] = useState("")
6const [url, setURL] = useState("")

React நிலை மாறிகள் அல்லது நிலை கொக்கிகளைப் பற்றி கேள்விப்பட்டதில்லையா? இந்தopens in a new tab ஆவணங்களைப் பாருங்கள்.

ஒவ்வொரு மாறிகளும் எதைக் குறிக்கின்றன என்பது இங்கே:

  • walletAddress - பயனரின் பணப்பை முகவரியைச் சேமிக்கும் ஒரு சரம்
  • status - பயனர் இடைமுகத்தின் கீழே காண்பிக்க ஒரு செய்தியைக் கொண்டிருக்கும் ஒரு சரம்
  • பெயர் - NFT இன் பெயரைச் சேமிக்கும் ஒரு சரம்
  • விளக்கம் - NFT இன் விளக்கத்தைச் சேமிக்கும் ஒரு சரம்
  • url - NFT இன் டிஜிட்டல் சொத்துக்கான இணைப்பாக இருக்கும் ஒரு சரம்

நிலை மாறிகளுக்குப் பிறகு, useEffect, connectWalletPressed, மற்றும் onMintPressed ஆகிய மூன்று செயல்படுத்தப்படாத செயல்பாடுகளைக் காண்பீர்கள். இந்தச் செயல்பாடுகள் அனைத்தும் async என்பதை நீங்கள் கவனிப்பீர்கள், ஏனென்றால் அவற்றில் நாங்கள் ஒத்திசைவற்ற API அழைப்புகளைச் செய்வோம்! அவற்றின் பெயர்கள் அவற்றின் செயல்பாடுகளுக்கு ஏற்றவாறு அமைந்துள்ளன:

1useEffect(async () => {
2  //TODO: செயல்படுத்தவும்
3}, [])
4
5const connectWalletPressed = async () => {
6  //TODO: செயல்படுத்தவும்
7}
8
9const onMintPressed = async () => {
10  //TODO: செயல்படுத்தவும்
11}
அனைத்தையும் காட்டு
  • useEffectopens in a new tab - இது ஒரு React ஹூக் ஆகும், இது உங்கள் கூறு வழங்கப்பட்ட பிறகு அழைக்கப்படுகிறது. அதற்குள் ஒரு வெற்று வரிசை [] prop அனுப்பப்பட்டுள்ளதால் (வரி 3 ஐப் பார்க்கவும்), இது கூற்றின் முதல் ரெண்டரில் மட்டுமே அழைக்கப்படும். இங்கே நாம் நமது வாலட் லிஸனரை அழைப்போம் மற்றும் ஒரு வாலட் ஏற்கனவே இணைக்கப்பட்டுள்ளதா என்பதைப் பிரதிபலிக்கும் வகையில் நமது பயனர் இடைமுகத்தைப் புதுப்பிக்க மற்றொரு வாலட் செயல்பாட்டை அழைப்போம்.
  • connectWalletPressed - இந்தச் செயல்பாடு பயனரின் MetaMask பணப்பையை எங்கள் dapp உடன் இணைக்க அழைக்கப்படும்.
  • onMintPressed - இந்தச் செயல்பாடு பயனரின் NFT ஐ உருவாக்க அழைக்கப்படும்.

இந்தக் கோப்பின் முடிவில், நமது கூற்றின் பயனர் இடைமுகம் உள்ளது. இந்தக் குறியீட்டை நீங்கள் கவனமாகப் பார்த்தால், அந்தந்த உரைப் புலங்களில் உள்ளீடு மாறும்போது எங்கள் url, பெயர் மற்றும் விளக்கம் நிலை மாறிகளைப் புதுப்பிக்கிறோம் என்பதை நீங்கள் கவனிப்பீர்கள்.

மேலும், mintButton மற்றும் walletButton ஐடிகளுடன் கூடிய பொத்தான்கள் கிளிக் செய்யப்படும்போது முறையே connectWalletPressed மற்றும் onMintPressed அழைக்கப்படுவதையும் நீங்கள் காண்பீர்கள்.

1//நமது கூறின் பயனர் இடைமுகம்
2return (
3  <div className="Minter">
4    <button id="walletButton" onClick={connectWalletPressed}>
5      {walletAddress.length > 0 ? (
6        "இணைக்கப்பட்டது: " +
7        String(walletAddress).substring(0, 6) +
8        "..." +
9        String(walletAddress).substring(38)
10      ) : (
11        <span>வாலட்டை இணைக்கவும்</span>
12      )}
13    </button>
14
15    <br></br>
16    <h1 id="title">🧙‍♂️ அல்கெமி NFT மின்டர்</h1>
17    <p>
18      உங்கள் சொத்தின் இணைப்பு, பெயர் மற்றும் விளக்கத்தைச் சேர்த்து, பின்னர் "மின்ட்" ஐ அழுத்தவும்.
19    </p>
20    <form>
21      <h2>🖼 சொத்துக்கான இணைப்பு: </h2>
22      <input
23        type="text"
24        placeholder="எ.கா., https://gateway.pinata.cloud/ipfs/<hash>"
25        onChange={(event) => setURL(event.target.value)}
26      />
27      <h2>🤔 பெயர்: </h2>
28      <input
29        type="text"
30        placeholder="எ.கா., எனது முதல் NFT!"
31        onChange={(event) => setName(event.target.value)}
32      />
33      <h2>✍️ விளக்கம்: </h2>
34      <input
35        type="text"
36        placeholder="எ.கா., கிரிப்டோகிட்டிகளை விடவும் அருமையானது ;)"
37        onChange={(event) => setDescription(event.target.value)}
38      />
39    </form>
40    <button id="mintButton" onClick={onMintPressed}>
41      NFT மின்ட் செய்யவும்
42    </button>
43    <p id="status">{status}</p>
44</div>
45)
அனைத்தையும் காட்டு

இறுதியாக, இந்த மின்டர் கூறு எங்கு சேர்க்கப்பட்டுள்ளது என்பதைக் கவனிக்கலாம்.

App.js கோப்பிற்குச் சென்றால், அது React இன் முக்கிய கூறு மற்றும் மற்ற அனைத்து கூறுகளுக்கும் ஒரு கொள்கலனாக செயல்படுகிறது, நமது மின்டர் கூறு வரி 7 இல் செருகப்பட்டிருப்பதைக் காண்பீர்கள்.

இந்தப் பயிற்சியில், நாங்கள் Minter.js கோப்பை மட்டும் திருத்தி, எங்கள் src கோப்புறையில் கோப்புகளைச் சேர்ப்போம்.

இப்போது நாம் எதனுடன் வேலை செய்கிறோம் என்பதைப் புரிந்துகொண்டோம், நமது Ethereum பணப்பையை அமைப்போம்!

உங்கள் Ethereum பணப்பையை அமைக்கவும்

பயனர்கள் உங்கள் ஸ்மார்ட் ஒப்பந்தத்துடன் தொடர்பு கொள்ள, அவர்கள் தங்கள் Ethereum பணப்பையை உங்கள் dapp உடன் இணைக்க வேண்டும்.

MetaMask ஐப் பதிவிறக்கவும்

இந்த tutorial-க்கு, உங்கள் Ethereum கணக்கு முகவரியை நிர்வகிக்கப் பயன்படும் உலாவியில் உள்ள ஒரு மெய்நிகர் பணப்பையான MetaMask-ஐப் பயன்படுத்துவோம். Ethereum இல் பரிவர்த்தனைகள் எவ்வாறு செயல்படுகின்றன என்பதைப் பற்றி மேலும் புரிந்துகொள்ள விரும்பினால், இந்தப் பக்கத்தைப் பாருங்கள்.

நீங்கள் இங்கேopens in a new tab இலவசமாக MetaMask கணக்கை பதிவிறக்கம் செய்து உருவாக்கலாம். நீங்கள் ஒரு கணக்கை உருவாக்கும்போது, அல்லது உங்களிடம் ஏற்கனவே ஒரு கணக்கு இருந்தால், மேல் வலதுபுறத்தில் உள்ள “ராப்ஸ்டன் டெஸ்ட் நெட்வொர்க்” க்கு மாறுவதை உறுதிப்படுத்திக் கொள்ளுங்கள் (இதனால் நாம் உண்மையான பணத்தைக் கையாளவில்லை).

ஒரு ஃபாசெட்டிலிருந்து ஈதரைச் சேர்க்கவும்

எங்கள் NFT களை மின்ட் செய்ய (அல்லது Ethereum பிளாக்செயினில் எந்தவொரு பரிவர்த்தனையிலும் கையொப்பமிட), எங்களுக்கு சில போலி Eth தேவைப்படும். Eth பெற, நீங்கள் ராப்ஸ்டன் ஃபாசெட்டிற்குச்opens in a new tab சென்று உங்கள் ராப்ஸ்டன் கணக்கு முகவரியை உள்ளிட்டு, பின்னர் “ராப்ஸ்டன் Eth அனுப்பு” என்பதைக் கிளிக் செய்யலாம். விரைவில் உங்கள் MetaMask கணக்கில் Eth ஐக் காண்பீர்கள்!

உங்கள் இருப்பைச் சரிபார்க்கவும்

எங்கள் இருப்பு உள்ளதா என்பதை இருமுறை சரிபார்க்க, அல்கெமியின் கம்போசர் கருவியைப்opens in a new tab பயன்படுத்தி ஒரு eth_getBalanceopens 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 ஐ உங்கள் பயனர் இடைமுகத்துடன் இணைக்கவும்

இப்போது நமது MetaMask பணப்பை அமைக்கப்பட்டுவிட்டது, நமது dapp ஐ அதனுடன் இணைப்போம்!

நாங்கள் MVCopens in a new tab முன்னுதாரணத்தைப் பின்பற்ற விரும்புவதால், எங்கள் dapp இன் தர்க்கம், தரவு மற்றும் விதிகளை நிர்வகிப்பதற்கான செயல்பாடுகளைக் கொண்ட ஒரு தனி கோப்பை உருவாக்குவோம், பின்னர் அந்தச் செயல்பாடுகளை எங்கள் ஃப்ரண்ட்எண்டிற்கு (எங்கள் Minter.js கூறு) அனுப்புவோம்.

connectWallet செயல்பாடு

அவ்வாறு செய்ய, உங்கள் src கோப்பகத்தில் utils என்ற புதிய கோப்புறையை உருவாக்கி, அதற்குள் interact.js என்ற கோப்பைச் சேர்ப்போம், இது எங்கள் பணப்பை மற்றும் ஸ்மார்ட் ஒப்பந்த இடைசெயல்பாட்டு செயல்பாடுகள் அனைத்தையும் கொண்டிருக்கும்.

எங்கள் interact.js கோப்பில், ஒரு connectWallet செயல்பாட்டை எழுதுவோம், அதை நாங்கள் எங்கள் Minter.js கூறில் இறக்குமதி செய்து அழைப்போம்.

உங்கள் interact.js கோப்பில், பின்வருவனவற்றைச் சேர்க்கவும்

1export const connectWallet = async () => {
2  if (window.ethereum) {
3    try {
4      const addressArray = await window.ethereum.request({
5        method: "eth_requestAccounts",
6      })
7      const obj = {
8        status: "👆🏽 மேலே உள்ள உரைப்பெட்டியில் ஒரு செய்தியை எழுதுங்கள்.",
9        address: addressArray[0],
10      }
11      return obj
12    } catch (err) {
13      return {
14        address: "",
15        status: "😥 " + err.message,
16      }
17    }
18  } else {
19    return {
20      address: "",
21      status: (
22        <span>
23          <p>
24            {" "}
25            🦊 <a target="_blank" href={`https://metamask.io/download`}>
26              உங்கள் உலாவியில் MetaMask என்ற மெய்நிகர் Ethereum பணப்பையை நீங்கள் நிறுவ வேண்டும்.
27            </a>
28          </p>
29        </span>
30      ),
31    }
32  }
33}
அனைத்தையும் காட்டு

இந்தக் குறியீடு என்ன செய்கிறது என்பதைப் பார்ப்போம்:

முதலில், எங்கள் செயல்பாடு உங்கள் உலாவியில் window.ethereum இயக்கப்பட்டிருக்கிறதா என்பதை சரிபார்க்கிறது.

window.ethereum என்பது MetaMask மற்றும் பிற பணப்பை வழங்குநர்களால் செலுத்தப்படும் ஒரு உலகளாவிய பயன்பாட்டு நிரலாக்க இடைமுகம் (API) ஆகும், இது இணையதளங்கள் பயனர்களின் Ethereum கணக்குகளைக் கோர அனுமதிக்கிறது. அனுமதிக்கப்பட்டால், அது பயனர் இணைக்கப்பட்டுள்ள பிளாக்செயின்களிலிருந்து தரவைப் படிக்க முடியும், மேலும் பயனர் செய்திகள் மற்றும் பரிவர்த்தனைகளில் கையொப்பமிடுமாறு பரிந்துரைக்க முடியும். மேலும் தகவலுக்கு MetaMask ஆவணங்களைopens in a new tabப் பாருங்கள்!

window.ethereum இல்லையென்றால், MetaMask நிறுவப்படவில்லை என்று அர்த்தம். இது ஒரு JSON பொருளைத் தருகிறது, இதில் முகவரி ஒரு வெற்றுச் சரமாகத் திருப்பியனுப்பப்படுகிறது, மற்றும் நிலை JSX பொருள் பயனர் MetaMask ஐ நிறுவ வேண்டும் என்பதைத் தெரிவிக்கிறது.

நாங்கள் எழுதும் பெரும்பாலான செயல்பாடுகள் JSON பொருட்களைத் தரும், அவற்றைப் பயன்படுத்தி எங்கள் நிலை மாறிகள் மற்றும் பயனர் இடைமுகத்தைப் புதுப்பிக்கலாம்.

இப்போது window.ethereum இருந்தால், அப்போதுதான் விஷயங்கள் சுவாரஸ்யமாகின்றன.

ஒரு try/catch லூப்பைப் பயன்படுத்தி, window.ethereum.request({ method: "eth_requestAccounts" });opens in a new tabஐ அழைப்பதன் மூலம் MetaMask உடன் இணைக்க முயற்சிப்போம். இந்தச் செயல்பாட்டை அழைப்பது உலாவியில் MetaMask ஐத் திறக்கும், இதன் மூலம் பயனர் தங்கள் பணப்பையை உங்கள் dapp உடன் இணைக்குமாறு கேட்கப்படுவார்.

  • பயனர் இணைக்கத் தேர்வுசெய்தால், method: "eth_requestAccounts" என்பது dapp உடன் இணைக்கப்பட்டுள்ள பயனரின் அனைத்து கணக்கு முகவரிகளையும் கொண்ட ஒரு வரிசையைத் தரும். மொத்தத்தில், எங்கள் connectWallet செயல்பாடு இந்த வரிசையில் உள்ள முதல் முகவரியை (வரி 9 ஐப் பார்க்கவும்) மற்றும் ஸ்மார்ட் ஒப்பந்தத்திற்கு ஒரு செய்தியை எழுத பயனரைக் கேட்கும் ஒரு நிலை செய்தியைக் கொண்ட ஒரு JSON பொருளைத் தரும்.
  • பயனர் இணைப்பை நிராகரித்தால், JSON பொருள் திருப்பியனுப்பப்பட்ட முகவரிக்கு ஒரு வெற்றுச் சரத்தையும், பயனர் இணைப்பை நிராகரித்ததை பிரதிபலிக்கும் ஒரு நிலை செய்தியையும் கொண்டிருக்கும்.

connectWallet செயல்பாட்டை உங்கள் Minter.js பயனர் இடைமுகக் கூறில் சேர்க்கவும்

இப்போது நாங்கள் இந்த connectWallet செயல்பாட்டை எழுதியுள்ளோம், அதை எங்கள் Minter.js. கூறில் இணைப்போம்.

முதலில், Minter.js கோப்பின் மேலே import { connectWallet } from "./utils/interact.js"; ஐச் சேர்ப்பதன் மூலம் எங்கள் செயல்பாட்டை எங்கள் Minter.js கோப்பில் இறக்குமதி செய்ய வேண்டும். Minter.js இன் உங்கள் முதல் 11 வரிகள் இப்போது இப்படி இருக்க வேண்டும்:

1import { useEffect, useState } from "react";
2import { connectWallet } from "./utils/interact.js";
3
4const Minter = (props) => {
5
6  //நிலை மாறிகள்
7  const [walletAddress, setWallet] = useState("");
8  const [status, setStatus] = useState("");
9  const [name, setName] = useState("");
10  const [description, setDescription] = useState("");
11  const [url, setURL] = useState("");
அனைத்தையும் காட்டு

பின்னர், எங்கள் connectWalletPressed செயல்பாட்டிற்குள், எங்கள் இறக்குமதி செய்யப்பட்ட connectWallet செயல்பாட்டை அழைப்போம், இதுபோல:

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

எங்கள் interact.js கோப்பிலிருந்து Minter.js கூறிலிருந்து எங்கள் செயல்பாட்டின் பெரும்பகுதி எவ்வாறு சுருக்கப்பட்டுள்ளது என்பதைக் கவனியுங்கள்? இது M-V-C முன்னுதாரணத்திற்கு இணங்குவதற்காக!

connectWalletPressed இல், நாங்கள் எங்கள் இறக்குமதி செய்யப்பட்ட connectWallet செயல்பாட்டிற்கு ஒரு காத்திருப்பு அழைப்பைச் செய்கிறோம், மேலும் அதன் பதிலைப்ப் பயன்படுத்தி, எங்கள் நிலை மற்றும் பணப்பைமுகவரி மாறிகளை அவற்றின் நிலை கொக்கிகள் வழியாகப் புதுப்பிக்கிறோம்.

இப்போது, Minter.js மற்றும் interact.js ஆகிய இரண்டு கோப்புகளையும் சேமித்து, இதுவரை எங்கள் பயனர் இடைமுகத்தை சோதிப்போம்.

உங்கள் உலாவியை localhost:3000 இல் திறந்து, பக்கத்தின் மேல் வலதுபுறத்தில் உள்ள "வாலட்டை இணைக்கவும்" பொத்தானை அழுத்தவும்.

நீங்கள் MetaMask ஐ நிறுவியிருந்தால், உங்கள் பணப்பையை உங்கள் dapp உடன் இணைக்குமாறு கேட்கப்படுவீர்கள். இணைவதற்கான அழைப்பை ஏற்கவும்.

வாலட் பொத்தான் இப்போது உங்கள் முகவரி இணைக்கப்பட்டுள்ளதை பிரதிபலிப்பதைக் காண்பீர்கள்.

அடுத்து, பக்கத்தைப் புதுப்பித்து முயற்சிக்கவும்... இது விசித்திரமாக உள்ளது. எங்கள் வாலட் பொத்தான் ஏற்கனவே இணைக்கப்பட்டிருந்தாலும், MetaMask ஐ இணைக்குமாறு கேட்கிறது...

கவலைப்பட வேண்டாம்! getCurrentWalletConnected என்ற செயல்பாட்டைச் செயல்படுத்துவதன் மூலம் அதை எளிதாக சரிசெய்யலாம், இது ஒரு முகவரி ஏற்கனவே எங்கள் dapp உடன் இணைக்கப்பட்டுள்ளதா என்பதைச் சரிபார்த்து, அதற்கேற்ப எங்கள் பயனர் இடைமுகத்தைப் புதுப்பிக்கும்!

getCurrentWalletConnected செயல்பாடு

உங்கள் interact.js கோப்பில், பின்வரும் getCurrentWalletConnected செயல்பாட்டைச் சேர்க்கவும்:

1export const getCurrentWalletConnected = async () => {
2  if (window.ethereum) {
3    try {
4      const addressArray = await window.ethereum.request({
5        method: "eth_accounts",
6      })
7      if (addressArray.length > 0) {
8        return {
9          address: addressArray[0],
10          status: "👆🏽 மேலே உள்ள உரைப்பெட்டியில் ஒரு செய்தியை எழுதுங்கள்.",
11        }
12      } else {
13        return {
14          address: "",
15          status: "🦊 மேல் வலது பொத்தானைப் பயன்படுத்தி MetaMask உடன் இணைக்கவும்.",
16        }
17      }
18    } catch (err) {
19      return {
20        address: "",
21        status: "😥 " + err.message,
22      }
23    }
24  } else {
25    return {
26      address: "",
27      status: (
28        <span>
29          <p>
30            {" "}
31            🦊 <a target="_blank" href={`https://metamask.io/download`}>
32              உங்கள் உலாவியில் MetaMask என்ற மெய்நிகர் Ethereum பணப்பையை நீங்கள் நிறுவ வேண்டும்.
33            </a>
34          </p>
35        </span>
36      ),
37    }
38  }
39}
அனைத்தையும் காட்டு

இந்தக் குறியீடு நாங்கள் முன்பு எழுதிய connectWallet செயல்பாட்டைப் போன்றது.

முக்கிய வேறுபாடு என்னவென்றால், பயனர் தங்கள் பணப்பையை இணைக்க MetaMask ஐத் திறக்கும் eth_requestAccounts முறையை அழைப்பதற்குப் பதிலாக, இங்கே eth_accounts முறையை அழைக்கிறோம், இது தற்போது எங்கள் dapp உடன் இணைக்கப்பட்டுள்ள MetaMask முகவரிகளைக் கொண்ட ஒரு வரிசையைத் தருகிறது.

இந்தச் செயல்பாட்டைச் செயலில் காண, அதை எங்கள் Minter.js கூறின் useEffect செயல்பாட்டில் அழைப்போம்.

connectWallet க்கு நாங்கள் செய்தது போல, இந்தச் செயல்பாட்டை எங்கள் interact.js கோப்பிலிருந்து எங்கள் Minter.js கோப்பிற்கு இறக்குமதி செய்ய வேண்டும்:

1import { useEffect, useState } from "react"
2import {
3  connectWallet,
4  getCurrentWalletConnected, //இங்கே இறக்குமதி செய்யவும்
5} from "./utils/interact.js"

இப்போது, நாங்கள் அதை எங்கள் useEffect செயல்பாட்டில் அழைக்கிறோம்:

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

கவனியுங்கள், எங்கள் getCurrentWalletConnected அழைப்பின் பதிலை எங்கள் பணப்பைமுகவரி மற்றும் நிலை நிலை மாறிகளைப் புதுப்பிக்கப் பயன்படுத்துகிறோம்.

இந்தக் குறியீட்டைச் சேர்த்தவுடன், எங்கள் உலாவி சாளரத்தைப் புதுப்பித்து முயற்சிக்கவும். பொத்தான் நீங்கள் இணைக்கப்பட்டுள்ளீர்கள் என்று சொல்ல வேண்டும், மேலும் நீங்கள் புதுப்பித்த பிறகும் உங்கள் இணைக்கப்பட்ட பணப்பையின் முகவரியின் முன்னோட்டத்தைக் காட்ட வேண்டும்!

addWalletListener ஐச் செயல்படுத்தவும்

எங்கள் dapp பணப்பை அமைப்பின் இறுதிப் படி, வாலட் லிஸனரைச் செயல்படுத்துவதாகும், இதன்மூலம் பயனர் துண்டிக்கப்படும்போது அல்லது கணக்குகளை மாற்றும்போது போன்ற எங்கள் பணப்பையின் நிலை மாறும்போது எங்கள் பயனர் இடைமுகம் புதுப்பிக்கப்படும்.

உங்கள் Minter.js கோப்பில், பின்வருவனவற்றைப் போன்ற addWalletListener என்ற செயல்பாட்டைச் சேர்க்கவும்:

1function addWalletListener() {
2  if (window.ethereum) {
3    window.ethereum.on("accountsChanged", (accounts) => {
4      if (accounts.length > 0) {
5        setWallet(accounts[0])
6        setStatus("👆🏽 மேலே உள்ள உரைப்பெட்டியில் ஒரு செய்தியை எழுதுங்கள்.")
7      } else {
8        setWallet("")
9        setStatus("🦊 மேல் வலது பொத்தானைப் பயன்படுத்தி MetaMask உடன் இணைக்கவும்.")
10      }
11    })
12  } else {
13    setStatus(
14      <p>
15        {" "}
16        🦊 <a target="_blank" href={`https://metamask.io/download`}>
17          உங்கள் உலாவியில் MetaMask என்ற மெய்நிகர் Ethereum பணப்பையை நீங்கள் நிறுவ வேண்டும்.
18        </a>
19      </p>
20    )
21  }
22}
அனைத்தையும் காட்டு

இங்கே என்ன நடக்கிறது என்பதை விரைவாகப் பார்ப்போம்:

  • முதலில், எங்கள் செயல்பாடு window.ethereum இயக்கப்பட்டிருக்கிறதா (அதாவது, MetaMask நிறுவப்பட்டுள்ளதா) என்பதை சரிபார்க்கிறது.
    • இல்லையென்றால், பயனர் MetaMask ஐ நிறுவுமாறு கேட்கும் JSX சரத்திற்கு எங்கள் நிலை நிலை மாறியை அமைக்கிறோம்.
    • அது இயக்கப்பட்டிருந்தால், வரி 3 இல் window.ethereum.on("accountsChanged") லிஸனரை அமைக்கிறோம், இது MetaMask பணப்பையில் நிலை மாற்றங்களைக் கேட்கிறது, இதில் பயனர் dapp உடன் கூடுதல் கணக்கை இணைக்கும்போது, கணக்குகளை மாற்றும்போது அல்லது ஒரு கணக்கைத் துண்டிக்கும்போது ஆகியவை அடங்கும். குறைந்தது ஒரு கணக்கு இணைக்கப்பட்டிருந்தால், walletAddress நிலை மாறி லிஸனரால் திருப்பியனுப்பப்பட்ட கணக்குகள் வரிசையில் உள்ள முதல் கணக்காகப் புதுப்பிக்கப்படும். இல்லையெனில், walletAddress ஒரு வெற்றுச் சரமாக அமைக்கப்படும்.

இறுதியாக, நாங்கள் அதை எங்கள் useEffect செயல்பாட்டில் அழைக்க வேண்டும்:

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

அவ்வளவுதான்! எங்கள் பணப்பை செயல்பாடுகள் அனைத்தையும் நிரலாக்கத்தை முடித்துவிட்டோம்! இப்போது எங்கள் பணப்பை அமைக்கப்பட்டுவிட்டது, எங்கள் NFT ஐ எவ்வாறு மின்ட் செய்வது என்பதைக் கண்டுபிடிப்போம்!

NFT மெட்டாடேட்டா 101

இந்தப் பயிற்சியின் படி 0 இல் நாம் பேசிய NFT மெட்டாடேட்டாவை நினைவில் கொள்ளுங்கள் - இது ஒரு NFT க்கு உயிரூட்டுகிறது, இது ஒரு டிஜிட்டல் சொத்து, பெயர், விளக்கம் மற்றும் பிற பண்புக்கூறுகள் போன்ற பண்புகளைக் கொண்டிருக்க அனுமதிக்கிறது.

இந்த மெட்டாடேட்டாவை ஒரு JSON பொருளாக உள்ளமைத்து அதைச் சேமிக்க வேண்டும், இதன்மூலம் எங்கள் ஸ்மார்ட் ஒப்பந்தத்தின் mintNFT செயல்பாட்டை அழைக்கும்போது அதை tokenURI அளவுருவாக அனுப்ப முடியும்.

"சொத்துக்கான இணைப்பு", "பெயர்", "விளக்கம்" புலங்களில் உள்ள உரை எங்கள் NFT இன் மெட்டாடேட்டாவின் வெவ்வேறு பண்புகளை உள்ளடக்கும். இந்த மெட்டாடேட்டாவை ஒரு JSON பொருளாக வடிவமைப்போம், ஆனால் இந்த JSON பொருளை எங்கே சேமிப்பது என்பதற்கு சில விருப்பங்கள் உள்ளன:

  • அதை Ethereum பிளாக்செயினில் சேமிக்கலாம்; இருப்பினும், அவ்வாறு செய்வது மிகவும் விலை உயர்ந்ததாக இருக்கும்.
  • AWS அல்லது Firebase போன்ற ஒரு மையப்படுத்தப்பட்ட சர்வரில் அதை சேமிக்கலாம். ஆனால் அது எங்கள் பரவலாக்க நெறிமுறையைத் தோற்கடிக்கும்.
  • நாம் IPFS ஐப் பயன்படுத்தலாம், இது ஒரு பரவலாக்கப்பட்ட நெறிமுறை மற்றும் ஒரு விநியோகிக்கப்பட்ட கோப்பு முறைமையில் தரவைச் சேமிப்பதற்கும் பகிர்வதற்கும் ஒரு பியர்-டு-பியர் நெட்வொர்க் ஆகும். இந்த நெறிமுறை பரவலாக்கப்பட்டது மற்றும் இலவசம் என்பதால், இது எங்கள் சிறந்த விருப்பம்!

எங்கள் மெட்டாடேட்டாவை IPFS இல் சேமிக்க, நாங்கள் Pinataopens in a new tab ஐப் பயன்படுத்துவோம், இது ஒரு வசதியான IPFS பயன்பாட்டு நிரலாக்க இடைமுகம் மற்றும் கருவித்தொகுப்பு ஆகும். அடுத்த கட்டத்தில், அதை எப்படிச் செய்வது என்பதை நாங்கள் சரியாக விளக்குவோம்!

உங்கள் மெட்டாடேட்டாவை IPFS இல் பொருத்த பினாட்டாவைப் பயன்படுத்தவும்

உங்களிடம் Pinataopens in a new tab கணக்கு இல்லையென்றால், இங்கேopens in a new tab ஒரு இலவச கணக்கிற்குப் பதிவுசெய்து, உங்கள் மின்னஞ்சல் மற்றும் கணக்கைச் சரிபார்க்கும் படிகளை முடிக்கவும்.

உங்கள் பினாட்டா API விசையை உருவாக்கவும்

https://pinata.cloud/keysopens in a new tab பக்கத்திற்குச் சென்று, மேலே உள்ள "புதிய விசை" பொத்தானைத் தேர்ந்தெடுத்து, நிர்வாகி விட்ஜெட்டை இயக்கப்பட்டதாக அமைத்து, உங்கள் விசைக்குப் பெயரிடுங்கள்.

உங்கள் API தகவலுடன் ஒரு பாப்அப் உங்களுக்குக் காண்பிக்கப்படும். இதை எங்காவது பாதுகாப்பாக வைத்திருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.

இப்போது எங்கள் விசை அமைக்கப்பட்டுள்ளது, அதை எங்கள் திட்டத்தில் சேர்ப்போம், இதன்மூலம் அதைப் பயன்படுத்தலாம்.

ஒரு .env கோப்பை உருவாக்கவும்

எங்கள் பினாட்டா விசை மற்றும் ரகசியத்தை ஒரு சூழல் கோப்பில் பாதுகாப்பாக சேமிக்கலாம். உங்கள் திட்ட கோப்பகத்தில் dotenv தொகுப்பைopens in a new tab நிறுவுவோம்.

உங்கள் டெர்மினலில் ஒரு புதிய தாவலைத் திறந்து (லோக்கல் ஹோஸ்ட்டை இயக்கும் ஒன்றிலிருந்து தனித்தனியாக) மற்றும் நீங்கள் minter-starter-files கோப்புறையில் இருக்கிறீர்கள் என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள், பின்னர் உங்கள் டெர்மினலில் பின்வரும் கட்டளையை இயக்கவும்:

1npm install dotenv --save

அடுத்து, உங்கள் minter-starter-files இன் ரூட் கோப்பகத்தில் உங்கள் கட்டளை வரியில் பின்வருவனவற்றை உள்ளிட்டு ஒரு .env கோப்பை உருவாக்கவும்:

1vim.env

இது உங்கள் .env கோப்பை விம் (ஒரு உரை திருத்தி) இல் திறக்கும். அதைச் சேமிக்க உங்கள் விசைப்பலகையில் "esc" + ":" + "q" ஐ அந்த வரிசையில் அழுத்தவும்.

அடுத்து, VSCode இல், உங்கள் .env கோப்பிற்குச் சென்று, உங்கள் பினாட்டா API விசை மற்றும் API ரகசியத்தை அதில் சேர்க்கவும், இதுபோல:

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

கோப்பைச் சேமித்து, பின்னர் உங்கள் JSON மெட்டாடேட்டாவை IPFS க்கு பதிவேற்றச் செயல்பாட்டை எழுதத் தயாராக உள்ளீர்கள்!

opens in a new tabpinJSONToIPFS ஐச் செயல்படுத்தவும்

அதிர்ஷ்டவசமாக, பினாட்டாவிடம் JSON தரவை IPFS க்கு பதிவேற்றுவதற்கான ஒரு APIopens in a new tab மற்றும் சில சிறிய மாற்றங்களுடன் நாம் பயன்படுத்தக்கூடிய axios உடன் ஒரு வசதியான ஜாவாஸ்கிரிப்ட் உதாரணம் உள்ளது.

உங்கள் utils கோப்புறையில், pinata.js என்ற மற்றொரு கோப்பை உருவாக்கி, பின்னர் எங்கள் பினாட்டா ரகசியம் மற்றும் விசையை .env கோப்பிலிருந்து இதுபோல இறக்குமதி செய்வோம்:

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

அடுத்து, கீழேயுள்ள கூடுதல் குறியீட்டை உங்கள் pinata.js கோப்பில் ஒட்டவும். கவலைப்பட வேண்டாம், எல்லாம் என்ன அர்த்தம் என்பதை நாங்கள் உடைப்போம்!

1require("dotenv").config()
2const key = process.env.REACT_APP_PINATA_KEY
3const secret = process.env.REACT_APP_PINATA_SECRET
4
5const axios = require("axios")
6
7export const pinJSONToIPFS = async (JSONBody) => {
8  const url = `https://api.pinata.cloud/pinning/pinJSONToIPFS`
9  // பினாட்டாவிற்கு axios POST கோரிக்கையை உருவாக்குதல் ⬇️
10  return axios
11    .post(url, JSONBody, {
12      headers: {
13        pinata_api_key: key,
14        pinata_secret_api_key: secret,
15      },
16    })
17    .then(function (response) {
18      return {
19        success: true,
20        pinataUrl:
21          "https://gateway.pinata.cloud/ipfs/" + response.data.IpfsHash,
22      }
23    })
24    .catch(function (error) {
25      console.log(error)
26      return {
27        success: false,
28        message: error.message,
29      }
30    })
31}
அனைத்தையும் காட்டு

அப்படியானால் இந்தக் குறியீடு என்ன செய்கிறது?

முதலில், இது axiosopens in a new tab ஐ இறக்குமதி செய்கிறது, இது உலாவி மற்றும் node.js க்கான ஒரு வாக்குறுதி அடிப்படையிலான HTTP கிளையண்ட் ஆகும், இதைப் பயன்படுத்தி நாங்கள் பினாட்டாவிற்கு ஒரு கோரிக்கையைச் செய்வோம்.

பின்னர் எங்களிடம் எங்கள் ஒத்திசைவற்ற செயல்பாடு pinJSONToIPFS உள்ளது, இது ஒரு JSONBody ஐ அதன் உள்ளீடாகவும், பினாட்டா API விசை மற்றும் ரகசியத்தை அதன் தலைப்பிலும் எடுத்துக்கொள்கிறது, இவை அனைத்தும் அவர்களின் pinJSONToIPFS API க்கு ஒரு POST கோரிக்கையைச் செய்ய.

  • இந்த POST கோரிக்கை வெற்றிகரமாக இருந்தால், எங்கள் செயல்பாடு வெற்றி பூலியன் உண்மை மற்றும் எங்கள் மெட்டாடேட்டா பொருத்தப்பட்ட pinataUrl உடன் ஒரு JSON பொருளைத் தரும். எங்கள் ஸ்மார்ட் ஒப்பந்தத்தின் மின்ட் செயல்பாட்டிற்கு tokenURI உள்ளீடாக இந்த pinataUrl ஐப் பயன்படுத்துவோம்.
  • இந்த POST கோரிக்கை தோல்வியுற்றால், எங்கள் செயல்பாடு வெற்றி பூலியன் தவறு மற்றும் எங்கள் பிழையைத் தெரிவிக்கும் ஒரு செய்தி சரத்துடன் ஒரு JSON பொருளைத் தரும்.

எங்கள் connectWallet செயல்பாட்டுத் திருப்பியனுப்பு வகைகளைப் போலவே, நாங்கள் JSON பொருட்களைத் திருப்புகிறோம், இதன்மூலம் அவற்றின் அளவுருக்களைப் பயன்படுத்தி எங்கள் நிலை மாறிகள் மற்றும் பயனர் இடைமுகத்தைப் புதுப்பிக்க முடியும்.

உங்கள் ஸ்மார்ட் ஒப்பந்தத்தை ஏற்றவும்

எங்கள் NFT மெட்டாடேட்டாவை எங்கள் pinJSONToIPFS செயல்பாடு வழியாக IPFS க்கு பதிவேற்ற ஒரு வழி இப்போது எங்களிடம் இருப்பதால், எங்கள் ஸ்மார்ட் ஒப்பந்தத்தின் mintNFT செயல்பாட்டை அழைக்க அதன் ஒரு நிகழ்வை ஏற்ற ஒரு வழி தேவைப்படும்.

நாங்கள் முன்பு குறிப்பிட்டது போல, இந்தப் பயிற்சியில் நாங்கள் இந்த ஏற்கனவே உள்ள NFT ஸ்மார்ட் ஒப்பந்தத்தைப்opens in a new tab பயன்படுத்துவோம்; இருப்பினும், நாங்கள் அதை எப்படி உருவாக்கினோம் என்பதை நீங்கள் அறிய விரும்பினால், அல்லது நீங்களே ஒன்றை உருவாக்க விரும்பினால், எங்கள் மற்றொரு பயிற்சியான "ஒரு NFT ஐ உருவாக்குவது எப்படி."opens in a new tabயைப் பார்க்குமாறு நாங்கள் மிகவும் பரிந்துரைக்கிறோம்.

ஒப்பந்த ABI

எங்கள் கோப்புகளை நீங்கள் நெருக்கமாக ஆய்வு செய்திருந்தால், எங்கள் src கோப்பகத்தில் ஒரு contract-abi.json கோப்பு இருப்பதைக் கவனித்திருப்பீர்கள். ஒரு ஒப்பந்தம் எந்தச் செயல்பாட்டை அழைக்கும் என்பதைக் குறிப்பிடுவதற்கும், செயல்பாடு நீங்கள் எதிர்பார்க்கும் வடிவத்தில் தரவைத் தரும் என்பதை உறுதி செய்வதற்கும் ஒரு ABI அவசியம்.

Ethereum பிளாக்செயினுடன் இணைவதற்கும் எங்கள் ஸ்மார்ட் ஒப்பந்தத்தை ஏற்றுவதற்கும் எங்களுக்கு ஒரு அல்கெமி API விசை மற்றும் அல்கெமி Web3 API தேவைப்படும்.

உங்கள் அல்கெமி API ஐ உருவாக்கவும்

உங்களிடம் ஏற்கனவே ஒரு அல்கெமி கணக்கு இல்லையென்றால், இங்கே இலவசமாகப் பதிவு செய்யுங்கள்.opens in a new tab

நீங்கள் ஒரு Alchemy கணக்கை உருவாக்கியதும், ஒரு பயன்பாட்டை உருவாக்குவதன் மூலம் API கீயை உருவாக்கலாம். இது ராப்ஸ்டன் டெஸ்ட் நெட்வொர்க்கிற்கு கோரிக்கைகளைச் செய்ய எங்களை அனுமதிக்கும்.

உங்கள் அல்கெமி டாஷ்போர்டில் உள்ள "ஆப் உருவாக்கு" பக்கத்திற்குச் சென்று, நேவிகேஷன் பாரில் உள்ள "ஆப்ஸ்" மீது வட்டமிட்டு "ஆப் உருவாக்கு" என்பதைக் கிளிக் செய்யவும்.

உங்கள் பயன்பாட்டிற்குப் பெயரிடுங்கள், நாங்கள் "எனது முதல் NFT!" என்பதைத் தேர்ந்தெடுத்தோம், ஒரு சிறு விளக்கத்தை வழங்குங்கள், உங்கள் பயன்பாட்டுப் புத்தக பராமரிப்புக்கு பயன்படுத்தப்படும் சூழலுக்கு “நிலைப்படுத்தல்” என்பதைத் தேர்ந்தெடுத்து, உங்கள் நெட்வொர்க்கிற்கு “ராப்ஸ்டன்” என்பதைத் தேர்ந்தெடுக்கவும்.

“Create app” என்பதைக் கிளிக் செய்யவும், அவ்வளவுதான்! உங்கள் ஆப் கீழே உள்ள அட்டவணையில் தோன்றும்.

அருமை, இப்போது நாங்கள் எங்கள் HTTP அல்கெமி API URL ஐ உருவாக்கியுள்ளோம், அதை உங்கள் கிளிப்போர்டுக்கு நகலெடுக்கவும்...

…பின்னர் அதை எங்கள் .env கோப்பில் சேர்ப்போம். மொத்தத்தில், உங்கள் .env கோப்பு இப்படி இருக்க வேண்டும்:

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

இப்போது எங்களிடம் எங்கள் ஒப்பந்த ABI மற்றும் எங்கள் அல்கெமி API விசை உள்ளது, நாங்கள் எங்கள் ஸ்மார்ட் ஒப்பந்தத்தை அல்கெமி Web3opens in a new tab ஐப் பயன்படுத்தி ஏற்றத் தயாராக உள்ளோம்.

உங்கள் அல்கெமி Web3 எண்ட்பாயிண்ட் மற்றும் ஒப்பந்தத்தை அமைக்கவும்

முதலில், உங்களிடம் அது இல்லையென்றால், நீங்கள் டெர்மினலில் வீட்டு கோப்பகத்திற்குச் செல்வதன் மூலம் அல்கெமி Web3opens in a new tab ஐ நிறுவ வேண்டும்: nft-minter-tutorial:

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

அடுத்து எங்கள் interact.js கோப்பிற்குத் திரும்புவோம். கோப்பின் மேலே, உங்கள் .env கோப்பிலிருந்து உங்கள் அல்கெமி விசையை இறக்குமதி செய்யவும் மற்றும் உங்கள் அல்கெமி Web3 எண்ட்பாயிண்ட்டை அமைக்கவும் பின்வரும் குறியீட்டைச் சேர்க்கவும்:

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

அல்கெமி Web3opens in a new tab என்பது Web3.jsopens in a new tab ஐச் சுற்றியுள்ள ஒரு ரேப்பர் ஆகும், இது மேம்பட்ட API முறைகள் மற்றும் ஒரு web3 டெவலப்பராக உங்கள் வாழ்க்கையை எளிதாக்க பிற முக்கிய நன்மைகளை வழங்குகிறது. இது குறைந்தபட்ச உள்ளமைவு தேவைப்படும் வகையில் வடிவமைக்கப்பட்டுள்ளது, எனவே நீங்கள் அதை உடனடியாக உங்கள் பயன்பாட்டில் பயன்படுத்தத் தொடங்கலாம்!

அடுத்து, எங்கள் ஒப்பந்த ABI மற்றும் ஒப்பந்த முகவரியை எங்கள் கோப்பில் சேர்ப்போம்.

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

எங்களிடம் இரண்டும் கிடைத்தவுடன், எங்கள் மின்ட் செயல்பாட்டைக் குறியீடு செய்யத் தயாராக உள்ளோம்!

mintNFT செயல்பாட்டைச் செயல்படுத்தவும்

உங்கள் interact.js கோப்பிற்குள், எங்கள் mintNFT செயல்பாட்டை வரையறுப்போம், இது பெயருக்கு ஏற்றவாறு எங்கள் NFT ஐ மின்ட் செய்யும்.

நாங்கள் பல ஒத்திசைவற்ற அழைப்புகளைச் செய்வதால் (பினாட்டாவிற்கு எங்கள் மெட்டாடேட்டாவை IPFS இல் பொருத்த, அல்கெமி Web3 க்கு எங்கள் ஸ்மார்ட் ஒப்பந்தத்தை ஏற்ற, மற்றும் MetaMask க்கு எங்கள் பரிவர்த்தனைகளில் கையொப்பமிட), எங்கள் செயல்பாடும் ஒத்திசைவற்றதாக இருக்கும்.

எங்கள் செயல்பாட்டிற்கான மூன்று உள்ளீடுகள் எங்கள் டிஜிட்டல் சொத்தின் url, பெயர், மற்றும் விளக்கம் ஆகும். connectWallet செயல்பாட்டிற்கு கீழே பின்வரும் செயல்பாட்டு கையொப்பத்தைச் சேர்க்கவும்:

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

உள்ளீட்டுப் பிழை கையாளுதல்

இயற்கையாகவே, செயல்பாட்டின் தொடக்கத்தில் சில வகையான உள்ளீட்டுப் பிழை கையாளுதல் இருப்பது அர்த்தமுள்ளதாக இருக்கிறது, எனவே எங்கள் உள்ளீட்டு அளவுருக்கள் சரியாக இல்லையென்றால் இந்தச் செயல்பாட்டிலிருந்து வெளியேறுவோம். எங்கள் செயல்பாட்டிற்குள், பின்வரும் குறியீட்டைச் சேர்ப்போம்:

1export const mintNFT = async (url, name, description) => {
2  //பிழை கையாளுதல்
3  if (url.trim() == "" || name.trim() == "" || description.trim() == "") {
4    return {
5      success: false,
6      status: "❗தயவுசெய்து மின்ட் செய்வதற்கு முன் அனைத்து புலங்களும் பூர்த்தி செய்யப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும்.",
7    }
8  }
9}
அனைத்தையும் காட்டு

அடிப்படையில், உள்ளீட்டு அளவுருக்களில் ஏதேனும் ஒரு வெற்றுச் சரமாக இருந்தால், நாங்கள் வெற்றி பூலியன் தவறு மற்றும் எங்கள் பயனர் இடைமுகத்தில் உள்ள அனைத்து புலங்களும் பூர்த்தி செய்யப்பட வேண்டும் என்பதைத் தெரிவிக்கும் நிலை சரத்துடன் ஒரு JSON பொருளைத் தருகிறோம்.

opens in a new tabமெட்டாடேட்டாவை IPFS இல் பதிவேற்றவும்

எங்கள் மெட்டாடேட்டா சரியாக வடிவமைக்கப்பட்டுள்ளது என்பதை அறிந்தவுடன், அடுத்த கட்டம் அதை ஒரு JSON பொருளில் போர்த்தி, நாங்கள் எழுதிய pinJSONToIPFS வழியாக IPFS இல் பதிவேற்றுவதாகும்!

அவ்வாறு செய்ய, முதலில் நாங்கள் pinJSONToIPFS செயல்பாட்டை எங்கள் interact.js கோப்பில் இறக்குமதி செய்ய வேண்டும். interact.js இன் மிக மேலே, இதைச் சேர்ப்போம்:

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

pinJSONToIPFS ஒரு JSON பாடியை எடுத்துக்கொள்கிறது என்பதை நினைவில் கொள்ளுங்கள். எனவே நாங்கள் அதை அழைப்பதற்கு முன், எங்கள் url, பெயர் மற்றும் விளக்கம் அளவுருக்களை ஒரு JSON பொருளாக வடிவமைக்க வேண்டும்.

மெட்டாடேட்டா எனப்படும் ஒரு JSON பொருளை உருவாக்க எங்கள் குறியீட்டைப் புதுப்பித்து, பின்னர் இந்த மெட்டாடேட்டா அளவுருவுடன் pinJSONToIPFS க்கு அழைப்பு விடுப்போம்:

1export const mintNFT = async (url, name, description) => {
2  //பிழை கையாளுதல்
3  if (url.trim() == "" || name.trim() == "" || description.trim() == "") {
4    return {
5      success: false,
6      status: "❗தயவுசெய்து மின்ட் செய்வதற்கு முன் அனைத்து புலங்களும் பூர்த்தி செய்யப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும்.",
7    }
8  }
9
10  //மெட்டாடேட்டாவை உருவாக்கவும்
11  const metadata = new Object()
12  metadata.name = name
13  metadata.image = url
14  metadata.description = description
15
16  //பினாட்டா அழைப்பை செய்யவும்
17  const pinataResponse = await pinJSONToIPFS(metadata)
18  if (!pinataResponse.success) {
19    return {
20      success: false,
21      status: "😢 உங்கள் tokenURI ஐப் பதிவேற்றும்போது ஏதோ தவறு நடந்துவிட்டது.",
22    }
23  }
24  const tokenURI = pinataResponse.pinataUrl
25}
அனைத்தையும் காட்டு

கவனியுங்கள், நாங்கள் pinJSONToIPFS(metadata) அழைப்பின் பதிலை pinataResponse பொருளில் சேமிக்கிறோம். பின்னர், ஏதேனும் பிழைகள் உள்ளதா என இந்த பொருளைப் பகுப்பாய்வு செய்கிறோம்.

ஒரு பிழை இருந்தால், நாங்கள் வெற்றி பூலியன் தவறு மற்றும் எங்கள் நிலை சரம் எங்கள் அழைப்பு தோல்வியுற்றது என்பதைத் தெரிவிக்கும் ஒரு JSON பொருளைத் தருகிறோம். இல்லையெனில், நாங்கள் pinataURL ஐ pinataResponse இலிருந்து பிரித்தெடுத்து அதை எங்கள் tokenURI மாறியாகச் சேமிக்கிறோம்.

இப்போது எங்கள் கோப்பின் மேலே நாங்கள் துவக்கிய அல்கெமி Web3 பயன்பாட்டு நிரலாக்க இடைமுகம் (API) ஐப் பயன்படுத்தி எங்கள் ஸ்மார்ட் ஒப்பந்தத்தை ஏற்ற வேண்டிய நேரம் இது. mintNFT செயல்பாட்டின் கீழே ஒப்பந்தத்தை window.contract குளோபல் மாறியாக அமைக்க பின்வரும் குறியீட்டு வரியைச் சேர்க்கவும்:

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

எங்கள் mintNFT செயல்பாட்டில் கடைசியாகச் சேர்ப்பது எங்கள் Ethereum பரிவர்த்தனை:

1//உங்கள் Ethereum பரிவர்த்தனையை அமைக்கவும்
2const transactionParameters = {
3  to: contractAddress, // ஒப்பந்த வெளியீடுகளின் போது தவிர தேவை.
4  from: window.ethereum.selectedAddress, // பயனரின் செயலில் உள்ள முகவரியுடன் பொருந்த வேண்டும்.
5  data: window.contract.methods
6    .mintNFT(window.ethereum.selectedAddress, tokenURI)
7    .encodeABI(), //NFT ஸ்மார்ட் ஒப்பந்தத்திற்கு அழைப்பு விடுக்கவும்
8}
9
10//MetaMask வழியாக பரிவர்த்தனையில் கையொப்பமிடவும்
11try {
12  const txHash = await window.ethereum.request({
13    method: "eth_sendTransaction",
14    params: [transactionParameters],
15  })
16  return {
17    success: true,
18    status:
19      "✅ Etherscan இல் உங்கள் பரிவர்த்தனையைப் பார்க்கவும்: https://ropsten.etherscan.io/tx/" +
20      txHash,
21  }
22} catch (error) {
23  return {
24    success: false,
25    status: "😥 ஏதோ தவறு நடந்துவிட்டது: " + error.message,
26  }
27}
அனைத்தையும் காட்டு

நீங்கள் ஏற்கனவே Ethereum பரிவர்த்தனைகளில் பழக்கமானவராக இருந்தால், அமைப்பு நீங்கள் பார்த்ததைப் போலவே இருப்பதை கவனிப்பீர்கள்.

  • முதலில், எங்கள் பரிவர்த்தனை அளவுருக்களை அமைக்கிறோம்.
    • to பெறுநர் முகவரியைக் குறிப்பிடுகிறது (எங்கள் ஸ்மார்ட் ஒப்பந்தம்)
    • from பரிவர்த்தனையின் கையொப்பமிடுபவரைக் குறிப்பிடுகிறது (பயனரின் MetaMask உடன் இணைக்கப்பட்ட முகவரி: window.ethereum.selectedAddress)
    • data எங்கள் ஸ்மார்ட் ஒப்பந்த mintNFT முறைக்கு அழைப்பைக் கொண்டுள்ளது, இது எங்கள் tokenURI மற்றும் பயனரின் பணப்பை முகவரி, window.ethereum.selectedAddress ஐ உள்ளீடுகளாகப் பெறுகிறது.
  • பின்னர், நாங்கள் ஒரு காத்திருப்பு அழைப்பைச் செய்கிறோம், window.ethereum.request, இதில் MetaMask ஐ பரிவர்த்தனையில் கையொப்பமிடக் கேட்கிறோம். கவனியுங்கள், இந்தக் கோரிக்கையில், நாங்கள் எங்கள் eth முறையைக் குறிப்பிடுகிறோம் (eth_SentTransaction) மற்றும் எங்கள் transactionParameters ஐ அனுப்புகிறோம். இந்தக் கட்டத்தில், MetaMask உலாவியில் திறக்கும், மற்றும் பயனரை பரிவர்த்தனையில் கையொப்பமிட அல்லது நிராகரிக்கக் கேட்கும்.
    • பரிவர்த்தனை வெற்றிகரமாக இருந்தால், செயல்பாடு வெற்றி பூலியன் உண்மை என அமைக்கப்பட்டு, நிலை சரம் பயனரை தங்கள் பரிவர்த்தனை பற்றிய கூடுதல் தகவல்களுக்கு Etherscan ஐச் சரிபார்க்கும்படி கேட்கும் ஒரு JSON பொருளைத் தரும்.
    • பரிவர்த்தனை தோல்வியுற்றால், செயல்பாடு வெற்றி பூலியன் தவறு என அமைக்கப்பட்டு, நிலை சரம் பிழைச் செய்தியைத் தெரிவிக்கும் ஒரு JSON பொருளைத் தரும்.

மொத்தத்தில், எங்கள் mintNFT செயல்பாடு இப்படி இருக்க வேண்டும்:

1export const mintNFT = async (url, name, description) => {
2  //பிழை கையாளுதல்
3  if (url.trim() == "" || name.trim() == "" || description.trim() == "") {
4    return {
5      success: false,
6      status: "❗தயவுசெய்து மின்ட் செய்வதற்கு முன் அனைத்து புலங்களும் பூர்த்தி செய்யப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும்.",
7    }
8  }
9
10  //மெட்டாடேட்டாவை உருவாக்கவும்
11  const metadata = new Object()
12  metadata.name = name
13  metadata.image = url
14  metadata.description = description
15
16  //பினாட்டா பின் கோரிக்கை
17  const pinataResponse = await pinJSONToIPFS(metadata)
18  if (!pinataResponse.success) {
19    return {
20      success: false,
21      status: "😢 உங்கள் tokenURI ஐப் பதிவேற்றும்போது ஏதோ தவறு நடந்துவிட்டது.",
22    }
23  }
24  const tokenURI = pinataResponse.pinataUrl
25
26  //ஸ்மார்ட் ஒப்பந்தத்தை ஏற்றவும்
27  window.contract = await new web3.eth.Contract(contractABI, contractAddress) //loadContract();
28
29  //உங்கள் Ethereum பரிவர்த்தனையை அமைக்கவும்
30  const transactionParameters = {
31    to: contractAddress, // ஒப்பந்த வெளியீடுகளின் போது தவிர தேவை.
32    from: window.ethereum.selectedAddress, // பயனரின் செயலில் உள்ள முகவரியுடன் பொருந்த வேண்டும்.
33    data: window.contract.methods
34      .mintNFT(window.ethereum.selectedAddress, tokenURI)
35      .encodeABI(), //NFT ஸ்மார்ட் ஒப்பந்தத்திற்கு அழைப்பு விடுக்கவும்
36  }
37
38  //MetaMask வழியாக பரிவர்த்தனையில் கையொப்பமிடவும்
39  try {
40    const txHash = await window.ethereum.request({
41      method: "eth_sendTransaction",
42      params: [transactionParameters],
43    })
44    return {
45      success: true,
46      status:
47        "✅ Etherscan இல் உங்கள் பரிவர்த்தனையைப் பார்க்கவும்: https://ropsten.etherscan.io/tx/" +
48        txHash,
49    }
50  } catch (error) {
51    return {
52      success: false,
53      status: "😥 ஏதோ தவறு நடந்துவிட்டது: " + error.message,
54    }
55  }
56}
அனைத்தையும் காட்டு

அது ஒரு மாபெரும் செயல்பாடு! இப்போது, நாங்கள் எங்கள் mintNFT செயல்பாட்டை எங்கள் Minter.js கூறில் இணைக்க வேண்டும்...

mintNFT ஐ எங்கள் Minter.js ஃப்ரண்ட்எண்டுடன் இணைக்கவும்

உங்கள் Minter.js கோப்பைத் திறந்து, மேலே உள்ள import { connectWallet, getCurrentWalletConnected } from "./utils/interact.js"; வரியைப் புதுப்பிக்கவும்:

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

இறுதியாக, onMintPressed செயல்பாட்டை உங்கள் இறக்குமதி செய்யப்பட்ட mintNFT செயல்பாட்டிற்கு காத்திருப்பு அழைப்பு விடுப்பதற்காகவும், எங்கள் பரிவர்த்தனை வெற்றி பெற்றதா அல்லது தோல்வியுற்றதா என்பதைப் பிரதிபலிக்க நிலை நிலை மாறியைப் புதுப்பிக்கவும்:

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

உங்கள் NFT ஐ ஒரு நேரடி இணையதளத்தில் வரிசைப்படுத்தவும்

உங்கள் திட்டத்தை பயனர்கள் ஊடாடுவதற்கு நேரலையில் கொண்டு செல்லத் தயாரா? உங்கள் மின்டரை ஒரு நேரடி இணையதளத்தில் வரிசைப்படுத்துவதற்கு இந்தப் பயிற்சியைப்opens in a new tab பாருங்கள்.

கடைசியாக ஒரு படி...

பிளாக்செயின் உலகை புயலால் தாக்குங்கள்

சும்மா சொன்னேன், நீங்கள் பயிற்சியின் முடிவிற்கு வந்துவிட்டீர்கள்!

சுருக்கமாக, ஒரு NFT மின்டரை உருவாக்குவதன் மூலம், நீங்கள் வெற்றிகரமாகக் கற்றுக்கொண்டீர்கள்:

  • உங்கள் ஃப்ரண்ட்எண்ட் திட்டம் வழியாக MetaMask உடன் இணைக்கவும்
  • உங்கள் ஃப்ரண்ட்எண்டிலிருந்து ஸ்மார்ட் ஒப்பந்த முறைகளை அழைக்கவும்
  • MetaMask ஐப் பயன்படுத்தி பரிவர்த்தனைகளில் கையொப்பமிடுங்கள்

உங்கள் dapp மூலம் மின்ட் செய்யப்பட்ட NFT களை உங்கள் பணப்பையில் காட்ட நீங்கள் விரும்புவீர்கள் - எனவே எங்களின் விரைவுப் பயிற்சியான உங்கள் பணப்பையில் உங்கள் NFT ஐப் பார்ப்பது எப்படிopens in a new tab என்பதைப் பார்க்கவும்!

வழக்கம்போல, உங்களுக்கு ஏதேனும் கேள்விகள் இருந்தால், அல்கெமி டிஸ்கார்டில்opens in a new tab நாங்கள் உதவ இங்கே இருக்கிறோம். இந்தப் பயிற்சியிலிருந்து நீங்கள் கற்றுக்கொண்ட கருத்துக்களை உங்கள் எதிர்காலத் திட்டங்களுக்கு எப்படிப் பயன்படுத்துகிறீர்கள் என்பதைப் பார்க்க நாங்கள் ஆவலுடன் காத்திருக்கிறோம்!

பக்கத்தின் கடைசி புதுப்பிப்பு: 22 அக்டோபர், 2025

pete-vielhaberpopens in a new tab
mdqstmopens in a new tab
brossetti1bopens in a new tab
+11

இந்தப் பயிற்சி உதவியாக இருந்ததா?