முக்கிய உள்ளடக்கத்திற்குச் செல்லவும்

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

Solidity
NFT
Alchemy
ஸ்மார்ட் ஒப்பந்தங்கள்
முன்பக்கம்
Pinata
erc-721
இடைநிலையாளர்
smudgil
6 அக்டோபர், 2021
24 நிமிட வாசிப்பு

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

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

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

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

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

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

மேலும் தாமதமின்றி, ஆரம்பிக்கலாம்!

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

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

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

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

மின்டிங் செயல்பாட்டை அழைத்தல்

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

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

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

இந்த பயிற்சியில் நாம் அழைக்கவிருக்கும் 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 UI) கொண்டுள்ளது. இந்த பயிற்சியில், நாங்கள் இந்த கோப்பகத்தில் வேலை செய்வோம், ஏனெனில் இந்த UI ஐ உங்கள் Ethereum வாலட் மற்றும் ஒரு NFT ஸ்மார்ட் ஒப்பந்தத்துடன் இணைப்பதன் மூலம் அதற்கு எவ்வாறு உயிர் கொடுப்பது என்பதை நீங்கள் கற்றுக்கொள்வீர்கள்.
  • nft-minter முழுமையான முடிக்கப்பட்ட பயிற்சியைக் கொண்டுள்ளது மற்றும் நீங்கள் சிக்கிக்கொண்டால் ஒரு குறிப்புக்காக உங்களுக்காக உள்ளது.

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

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

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

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

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

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

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

cd minter-starter-files
npm install

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

npm start

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

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

Minter.js கூறு

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

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

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

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

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

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

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

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

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

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

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

1// நமது கூறின் UI
2return (
3  <div className="Minter">
4    <button id="walletButton" onClick={connectWalletPressed}>
5      {walletAddress.length > 0 ? (
6        "Connected: " +
7        String(walletAddress).substring(0, 6) +
8        "..." +
9        String(walletAddress).substring(38)
10      ) : (
11        <span>Connect Wallet</span>
12      )}
13    </button>
14
15    <br></br>
16    <h1 id="title">🧙‍♂️ Alchemy NFT Minter</h1>
17    <p>
18      Simply add your asset's link, name, and description, then press "Mint."
19    </p>
20    <form>
21      <h2>🖼 Link to asset: </h2>
22      <input
23        type="text"
24        placeholder="e.g., https://gateway.pinata.cloud/ipfs/<hash>"
25        onChange={(event) => setURL(event.target.value)}
26      />
27      <h2>🤔 Name: </h2>
28      <input
29        type="text"
30        placeholder="e.g., My first NFT!"
31        onChange={(event) => setName(event.target.value)}
32      />
33      <h2>✍️ Description: </h2>
34      <input
35        type="text"
36        placeholder="e.g., Even cooler than cryptokitties ;)"
37        onChange={(event) => setDescription(event.target.value)}
38      />
39    </form>
40    <button id="mintButton" onClick={onMintPressed}>
41      Mint NFT
42    </button>
43    <p id="status">{status}</p>
44 
45</div>
46)
அனைத்தையும் காட்டு

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

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

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

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

உங்கள் Ethereum வாலட்டை அமைக்கவும்

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

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

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

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

ஒரு Faucet இலிருந்து ஈதரைச் சேர்க்கவும்

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

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

எங்கள் இருப்பு அங்கு இருப்பதை இருமுறை சரிபார்க்க, Alchemy இன் இசையமைப்பாளர் கருவியைப் (composer tool) (opens in a new tab) பயன்படுத்தி eth_getBalance (opens in a new tab) கோரிக்கையைச் செய்வோம். இது எங்கள் வாலட்டில் உள்ள Eth இன் அளவை வழங்கும். உங்கள் MetaMask கணக்கு முகவரியை உள்ளிட்டு “Send Request” என்பதைக் கிளிக் செய்த பிறகு, இது போன்ற ஒரு பதிலைக் காண வேண்டும்:

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

குறிப்பு: இந்த முடிவு wei இல் உள்ளது eth இல் அல்ல. Wei என்பது ஈதரின் மிகச்சிறிய மதிப்பாகப் பயன்படுத்தப்படுகிறது. wei இலிருந்து eth க்கான மாற்றம்: 1 eth = 10¹⁸ wei. எனவே நாம் 0xde0b6b3a7640000 ஐ தசமமாக மாற்றினால் 1*10¹⁸ கிடைக்கும், இது 1 eth க்கு சமம்.

அப்பாடா! எங்கள் போலி பணம் அனைத்தும் அங்கே இருக்கிறது!

MetaMask ஐ உங்கள் UI உடன் இணைக்கவும்

இப்போது எங்கள் MetaMask வாலட் அமைக்கப்பட்டுள்ளது, எங்கள் டாப்பை அதனுடன் இணைப்போம்!

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

connectWallet செயல்பாடு

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

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

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

1export const connectWallet = async () => {
2  if (window.ethereum) {
3    try {
4      const addressArray = await window.ethereum.request({
5        method: "eth_requestAccounts",
6      })
7      const obj = {
8        status: "👆🏽 Write a message in the text-field above.",
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              You must install MetaMask, a virtual Ethereum wallet, in your
27              browser.
28            </a>
29          </p>
30        </span>
31      ),
32    }
33  }
34}
அனைத்தையும் காட்டு

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

connectWalletPressed இல், நாங்கள் இறக்குமதி செய்த connectWallet செயல்பாட்டிற்கு ஒரு await அழைப்பைச் செய்கிறோம், மேலும் அதன் பதிலைப் பயன்படுத்தி, எங்கள் status மற்றும் walletAddress மாறிகளை அவற்றின் நிலை கொக்கிகள் (state hooks) மூலம் புதுப்பிக்கிறோம்.

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

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

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

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

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

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

getCurrentWalletConnected செயல்பாடு

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

1export const getCurrentWalletConnected = async () => {
2  if (window.ethereum) {
3    try {
4      const addressArray = await window.ethereum.request({
5        method: "eth_accounts",
6      })
7      if (addressArray.length > 0) {
8        return {
9          address: addressArray[0],
10          status: "👆🏽 Write a message in the text-field above.",
11        }
12      } else {
13        return {
14          address: "",
15          status: "🦊 Connect to MetaMask using the top right button.",
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              You must install MetaMask, a virtual Ethereum wallet, in your
33              browser.
34            </a>
35          </p>
36        </span>
37      ),
38    }
39  }
40}
அனைத்தையும் காட்டு

இந்த குறியீடு நாம் முன்பு எழுதிய connectWallet செயல்பாட்டிற்கு மிகவும் ஒத்திருக்கிறது.

முக்கிய வேறுபாடு என்னவென்றால், பயனர் தங்கள் வாலட்டை இணைக்க MetaMask ஐத் திறக்கும் eth_requestAccounts முறையை அழைப்பதற்குப் பதிலாக, இங்கே நாங்கள் eth_accounts முறையை அழைக்கிறோம், இது தற்போது எங்கள் டாப்புடன் இணைக்கப்பட்டுள்ள 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}, [])

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

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

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

எங்கள் டாப் வாலட் அமைப்பின் இறுதிப் படி வாலட் கேட்பானைச் (wallet listener) செயல்படுத்துவதாகும், இதனால் பயனர் துண்டிக்கும்போது அல்லது கணக்குகளை மாற்றும்போது போன்ற எங்கள் வாலட்டின் நிலை மாறும்போது எங்கள் UI புதுப்பிக்கப்படும்.

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

1function addWalletListener() {
2  if (window.ethereum) {
3    window.ethereum.on("accountsChanged", (accounts) => {
4      if (accounts.length > 0) {
5        setWallet(accounts[0])
6        setStatus("👆🏽 Write a message in the text-field above.")
7      } else {
8        setWallet("")
9        setStatus("🦊 Connect to MetaMask using the top right button.")
10      }
11    })
12  } else {
13    setStatus(
14      <p>
15        {" "}
16        🦊 <a target="_blank" href={`https://metamask.io/download`}>
17          You must install MetaMask, a virtual Ethereum wallet, in your browser.
18        </a>
19      </p>
20    )
21  }
22}
அனைத்தையும் காட்டு

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

  • முதலில், window.ethereum இயக்கப்பட்டிருக்கிறதா (அதாவது, MetaMask நிறுவப்பட்டுள்ளதா) என்பதை எங்கள் செயல்பாடு சரிபார்க்கிறது.
    • இல்லையென்றால், MetaMask ஐ நிறுவ பயனரைத் தூண்டும் JSX சரத்திற்கு எங்கள் status நிலை மாறியை அமைக்கிறோம்.
    • இது இயக்கப்பட்டிருந்தால், வரி 3 இல் window.ethereum.on("accountsChanged") கேட்பானை அமைக்கிறோம், இது MetaMask வாலட்டில் நிலை மாற்றங்களைக் கேட்கிறது, இதில் பயனர் டாப்புடன் கூடுதல் கணக்கை இணைக்கும்போது, கணக்குகளை மாற்றும்போது அல்லது கணக்கைத் துண்டிக்கும்போது ஆகியவை அடங்கும். குறைந்தது ஒரு கணக்காவது இணைக்கப்பட்டிருந்தால், கேட்பான் வழங்கும் accounts அணிவரிசையில் முதல் கணக்காக 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 அளவுருவாக அனுப்பலாம்.

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

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

எங்கள் மெட்டாடேட்டாவை IPFS இல் சேமிக்க, வசதியான IPFS API மற்றும் கருவித்தொகுப்பான Pinata (opens in a new tab) ஐப் பயன்படுத்துவோம். அடுத்த படியில், இதை எவ்வாறு சரியாகச் செய்வது என்பதை விளக்குவோம்!

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

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

உங்கள் Pinata API விசையை உருவாக்கவும்

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

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

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

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

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

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

1npm install dotenv --save

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

1vim.env

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

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

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

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

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

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

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

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  // Pinata-விற்கு 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}
அனைத்தையும் காட்டு

எனவே இந்த குறியீடு சரியாக என்ன செய்கிறது?

முதலில், இது உலாவி மற்றும் node.js க்கான வாக்குறுதி அடிப்படையிலான (promise based) HTTP கிளையண்டான axios (opens in a new tab) ஐ இறக்குமதி செய்கிறது, இதை நாங்கள் Pinata க்கு கோரிக்கை விடுக்கப் பயன்படுத்துவோம்.

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

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

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

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

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

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

ஒப்பந்த ABI

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

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

உங்கள் Alchemy API விசையை உருவாக்கவும்

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

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

வழிசெலுத்தல் பட்டியில் (nav bar) உள்ள “Apps” மீது வட்டமிட்டு “Create App” என்பதைக் கிளிக் செய்வதன் மூலம் உங்கள் Alchemy டாஷ்போர்டில் உள்ள “Create App” பக்கத்திற்குச் செல்லவும்.

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

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

அருமை, இப்போது எங்கள் HTTP Alchemy 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 மற்றும் எங்கள் Alchemy API விசை உள்ளது, Alchemy Web3 (opens in a new tab) ஐப் பயன்படுத்தி எங்கள் ஸ்மார்ட் ஒப்பந்தத்தை ஏற்ற நாங்கள் தயாராக உள்ளோம்.

உங்கள் Alchemy Web3 இறுதிப்புள்ளி மற்றும் ஒப்பந்தத்தை அமைக்கவும்

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

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

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

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

Alchemy Web3 (opens in a new tab) என்பது Web3.js (opens in a new tab) ஐச் சுற்றியுள்ள ஒரு ரேப்பர் (wrapper) ஆகும், இது மேம்பட்ட 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 இல் பின் செய்ய Pinata க்கு, எங்கள் ஸ்மார்ட் ஒப்பந்தத்தை ஏற்ற Alchemy Web3 க்கு, மற்றும் எங்கள் பரிவர்த்தனைகளில் கையொப்பமிட MetaMask க்கு), எங்கள் செயல்பாடும் ஒத்திசைவற்றதாக இருக்கும்.

எங்கள் செயல்பாட்டிற்கான மூன்று உள்ளீடுகள் எங்கள் டிஜிட்டல் சொத்தின் url, name மற்றும் description ஆக இருக்கும். 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: "❗Please make sure all fields are completed before minting.",
7    }
8  }
9}
அனைத்தையும் காட்டு

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

மெட்டாடேட்டாவை IPFS இல் பதிவேற்றவும்

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

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

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

pinJSONToIPFS ஒரு JSON உடலை (body) எடுத்துக்கொள்கிறது என்பதை நினைவில் கொள்க. எனவே நாம் அதற்கு அழைப்பு விடுப்பதற்கு முன், எங்கள் url, name மற்றும் description அளவுருக்களை ஒரு JSON பொருளாக வடிவமைக்க வேண்டும்.

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

1export const mintNFT = async (url, name, description) => {
2  // பிழை கையாளுதல்
3  if (url.trim() == "" || name.trim() == "" || description.trim() == "") {
4    return {
5      success: false,
6      status: "❗Please make sure all fields are completed before minting.",
7    }
8  }
9
10  // மெட்டாடேட்டாவை உருவாக்கவும்
11  const metadata = new Object()
12  metadata.name = name
13  metadata.image = url
14  metadata.description = description
15
16  // Pinata அழைப்பை உருவாக்கவும்
17  const pinataResponse = await pinJSONToIPFS(metadata)
18  if (!pinataResponse.success) {
19    return {
20      success: false,
21      status: "😢 Something went wrong while uploading your tokenURI.",
22    }
23  }
24  const tokenURI = pinataResponse.pinataUrl
25}
அனைத்தையும் காட்டு

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

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

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

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      "✅ Check out your transaction on Etherscan: https://ropsten.etherscan.io/tx/" +
20      txHash,
21  }
22} catch (error) {
23  return {
24    success: false,
25    status: "😥 Something went wrong: " + error.message,
26  }
27}
அனைத்தையும் காட்டு

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

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

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

1export const mintNFT = async (url, name, description) => {
2  // பிழை கையாளுதல்
3  if (url.trim() == "" || name.trim() == "" || description.trim() == "") {
4    return {
5      success: false,
6      status: "❗Please make sure all fields are completed before minting.",
7    }
8  }
9
10  // மெட்டாடேட்டாவை உருவாக்கவும்
11  const metadata = new Object()
12  metadata.name = name
13  metadata.image = url
14  metadata.description = description
15
16  // Pinata பின் கோரிக்கை
17  const pinataResponse = await pinJSONToIPFS(metadata)
18  if (!pinataResponse.success) {
19    return {
20      success: false,
21      status: "😢 Something went wrong while uploading your 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        "✅ Check out your transaction on Etherscan: https://ropsten.etherscan.io/tx/" +
48        txHash,
49    }
50  } catch (error) {
51    return {
52      success: false,
53      status: "😥 Something went wrong: " + error.message,
54    }
55  }
56}
அனைத்தையும் காட்டு

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

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

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

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

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

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

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

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

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

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

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

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

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

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

மேலும், எப்போதும் போல, உங்களுக்கு ஏதேனும் கேள்விகள் இருந்தால், Alchemy Discord (opens in a new tab) இல் உதவ நாங்கள் இருக்கிறோம். இந்த பயிற்சியின் கருத்துகளை உங்கள் எதிர்கால திட்டங்களில் எவ்வாறு பயன்படுத்துகிறீர்கள் என்பதைப் பார்க்க நாங்கள் காத்திருக்க முடியாது!

பக்கம் கடைசியாகப் புதுப்பிக்கப்பட்டது: 25 பிப்ரவரி, 2026

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

இந்த வழிகாட்டி பயனுள்ளதாக இருந்ததா?