NFT அச்சிடும் கருவி பயிற்சி

Solidity

NFT

Alchemy

திறன் ஒப்பந்தங்கள்

முன்பக்கம்

Pinata

erc-721

இடைநிலை

smudgil

6 அக்டோபர், 2021

24 நிமிட வாசிப்பு

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

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

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

இந்தப் பயிற்சியில், நாங்கள் 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 ஐ உருவாக்குவது எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்துகொள்வது முக்கியம். இது இரண்டு படிகளை உள்ளடக்கியது:

எத்திரியம் தொகுதிச்சங்கிலியில் ஒரு NFT திறன் ஒப்பந்தத்தை வெளியிடுதல்

இரண்டு NFT திறன் ஒப்பந்தத் தரநிலைகளுக்கும் இடையிலான மிகப்பெரிய வித்தியாசம் என்னவென்றால், ERC-1155 என்பது பல-வில்லை (multi-token) தரநிலையாகும், மேலும் இது தொகுதி செயல்பாட்டை உள்ளடக்கியது, அதேசமயம் 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 ஐ உருவாக்குவது எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்துகொண்டோம், எங்கள் தொடக்கக் கோப்புகளை குளோன் (clone) செய்வோம்!

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

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

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

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

அடுத்து, உங்கள் குறியீட்டு எடிட்டரில் 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) அல்லது "NFT ஐ அச்சிடு" (Mint NFT) பொத்தான்களைக் கிளிக் செய்ய முயன்றால், அவை வேலை செய்யாது என்பதை நீங்கள் கவனிப்பீர்கள்—ஏனென்றால் அவற்றின் செயல்பாட்டை நாங்கள் இன்னும் நிரல் செய்ய வேண்டும்! :)

Minter.js கூறு

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

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

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

//நிலை மாறிகள்
const [walletAddress, setWallet] = useState("")
const [status, setStatus] = useState("")
const [name, setName] = useState("")
const [description, setDescription] = useState("")
const [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 அழைப்புகளை நாங்கள் செய்வோம்! அவற்றின் பெயர்கள் அவற்றின் செயல்பாடுகளுக்கு ஏற்றவாறு உள்ளன:

useEffect(async () => {
  //TODO: செயல்படுத்தவும்
}, [])

const connectWalletPressed = async () => {
  //TODO: செயல்படுத்தவும்
}

const onMintPressed = async () => {
  //TODO: செயல்படுத்தவும்
}

useEffect (opens in a new tab) - இது உங்கள் கூறு ரெண்டர் செய்யப்பட்ட பிறகு அழைக்கப்படும் ஒரு React ஹூக் ஆகும். இதில் ஒரு வெற்று அணிவரிசை (array) [] ப்ராப் அனுப்பப்பட்டுள்ளதால் (வரி 3 ஐப் பார்க்கவும்), இது கூறின் முதல் ரெண்டரில் மட்டுமே அழைக்கப்படும். பணப்பை ஏற்கனவே இணைக்கப்பட்டுள்ளதா என்பதைப் பிரதிபலிக்கும் வகையில் எங்கள் UI ஐப் புதுப்பிக்க, எங்கள் பணப்பை கேட்பான் (wallet listener) மற்றும் மற்றொரு பணப்பை செயல்பாட்டை இங்கே அழைப்போம்.
connectWalletPressed - பயனரின் மெட்டாமேஸ்க் பணப்பையை எங்கள் பரவலாக்கப்பட்ட செயலியுடன் (dapp) இணைக்க இந்தச் செயல்பாடு அழைக்கப்படும்.
onMintPressed - பயனரின் NFT ஐ அச்சிட இந்தச் செயல்பாடு அழைக்கப்படும்.

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

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

//நமது கூறின் UI
return (
  <div className="Minter">
    <button id="walletButton" onClick={connectWalletPressed}>
      {walletAddress.length > 0 ? (
        "Connected: " +
        String(walletAddress).substring(0, 6) +
        "..." +
        String(walletAddress).substring(38)
      ) : (
        <span>Connect Wallet</span>
      )}
    </button>

    <br></br>
    <h1 id="title">🧙‍♂️ Alchemy NFT Minter</h1>
    <p>
      Simply add your asset's link, name, and description, then press "Mint."
    </p>
    <form>
      <h2>🖼 Link to asset: </h2>
      <input
        type="text"
        placeholder="e.g., https://gateway.pinata.cloud/ipfs/<hash>"
        onChange={(event) => setURL(event.target.value)}
      />
      <h2>🤔 Name: </h2>
      <input
        type="text"
        placeholder="e.g., My first NFT!"
        onChange={(event) => setName(event.target.value)}
      />
      <h2>✍️ Description: </h2>
      <input
        type="text"
        placeholder="e.g., Even cooler than cryptokitties ;)"
        onChange={(event) => setDescription(event.target.value)}
      />
    </form>
    <button id="mintButton" onClick={onMintPressed}>
      Mint NFT
    </button>
    <p id="status">{status}</p>
 
</div>
)

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

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

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

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

உங்கள் எத்திரியம் பணப்பையை அமைக்கவும்

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

மெட்டாமேஸ்க் ஐப் பதிவிறக்கவும்

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

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

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

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

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

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

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

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

அப்பாடா! எங்கள் போலி பணம் அனைத்தும் அங்கு உள்ளது!

உங்கள் UI உடன் மெட்டாமேஸ்க் ஐ இணைக்கவும்

இப்போது எங்கள் மெட்டாமேஸ்க் பணப்பை அமைக்கப்பட்டுள்ளதால், எங்கள் பரவலாக்கப்பட்ட செயலியை (dapp) அதனுடன் இணைப்போம்!

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

`connectWallet` செயல்பாடு

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

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

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

export const connectWallet = async () => {
  if (window.ethereum) {
    try {
      const addressArray = await window.ethereum.request({
        method: "eth_requestAccounts",
      })
      const obj = {
        status: "👆🏽 Write a message in the text-field above.",
        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`}>
              You must install MetaMask, a virtual Ethereum wallet, in your
              browser.
            </a>
          </p>
        </span>
      ),
    }
  }
}

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

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

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

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

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

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

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

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

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

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

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

import { useEffect, useState } from "react";
import { connectWallet } from "./utils/interact.js";

const Minter = (props) => {

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

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

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

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

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

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

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

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

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

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

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

getCurrentWalletConnected செயல்பாடு

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

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: "👆🏽 Write a message in the text-field above.",
        }
      } else {
        return {
          address: "",
          status: "🦊 Connect to MetaMask using the top right button.",
        }
      }
    } catch (err) {
      return {
        address: "",
        status: "😥 " + err.message,
      }
    }
  } else {
    return {
      address: "",
      status: (
        <span>
          <p>
            {" "}
            🦊 <a target="_blank" href={`https://metamask.io/download`}>
              You must install MetaMask, a virtual Ethereum wallet, in your
              browser.
            </a>
          </p>
        </span>
      ),
    }
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

function addWalletListener() {
  if (window.ethereum) {
    window.ethereum.on("accountsChanged", (accounts) => {
      if (accounts.length > 0) {
        setWallet(accounts[0])
        setStatus("👆🏽 Write a message in the text-field above.")
      } else {
        setWallet("")
        setStatus("🦊 Connect to MetaMask using the top right button.")
      }
    })
  } else {
    setStatus(
      <p>
        {" "}
        🦊 <a target="_blank" href={`https://metamask.io/download`}>
          You must install MetaMask, a virtual Ethereum wallet, in your browser.
        </a>
      </p>
    )
  }
}

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

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

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

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

  addWalletListener()
}, [])

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

NFT மீத்தரவு 101

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

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

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

நாம் அதை எத்திரியம் தொகுதிச்சங்கிலியில் சேமிக்கலாம்; இருப்பினும், அவ்வாறு செய்வது மிகவும் விலை உயர்ந்ததாக இருக்கும்.
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 கோப்புறையில் இருப்பதை உறுதிசெய்து, பின்னர் உங்கள் முனையத்தில் பின்வரும் கட்டளையை இயக்கவும்:

npm install dotenv --save

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

vim.env

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

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

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

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

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

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

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

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

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

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

const axios = require("axios")

export const pinJSONToIPFS = async (JSONBody) => {
  const url = `https://api.pinata.cloud/pinning/pinJSONToIPFS`
  //Pinata-விற்கு axios POST கோரிக்கையை உருவாக்குகிறது ⬇️
  return axios
    .post(url, JSONBody, {
      headers: {
        pinata_api_key: key,
        pinata_secret_api_key: secret,
      },
    })
    .then(function (response) {
      return {
        success: true,
        pinataUrl:
          "https://gateway.pinata.cloud/ipfs/" + response.data.IpfsHash,
      }
    })
    .catch(function (error) {
      console.log(error)
      return {
        success: false,
        message: error.message,
      }
    })
}

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

முதலில், இது உலாவி மற்றும் 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 பொருளை வழங்கும். வழங்கப்படும் இந்த pinataUrl ஐ எங்கள் திறன் ஒப்பந்தத்தின் அச்சிடும் செயல்பாட்டிற்கான tokenURI உள்ளீடாகப் பயன்படுத்துவோம்.
இந்த 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 அவசியமாகும்.

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

உங்கள் Alchemy API திறவுகோலை உருவாக்கவும்

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

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

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

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

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

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

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

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

இப்போது எங்களிடம் எங்கள் ஒப்பந்த ABI மற்றும் எங்கள் Alchemy API திறவுகோல் உள்ளதால், Alchemy Web3 (opens in a new tab) ஐப் பயன்படுத்தி எங்கள் திறன் ஒப்பந்தத்தை ஏற்ற நாங்கள் தயாராக உள்ளோம்.

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

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

cd ..
npm install @alch/alchemy-web3

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

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

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

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

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 = "0x4C4a07F737Bf57F6632B6CAB089B78f62385aCaE"

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

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

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

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

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

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

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

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

export const mintNFT = async (url, name, description) => {
  //பிழை கையாளுதல்
  if (url.trim() == "" || name.trim() == "" || description.trim() == "") {
    return {
      success: false,
      status: "❗Please make sure all fields are completed before minting.",
    }
  }
}

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

மீத்தரவை IPFS இல் பதிவேற்றவும்

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

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

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

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

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

export const mintNFT = async (url, name, description) => {
  //பிழை கையாளுதல்
  if (url.trim() == "" || name.trim() == "" || description.trim() == "") {
    return {
      success: false,
      status: "❗Please make sure all fields are completed before minting.",
    }
  }

  //மீத்தரவை உருவாக்கவும்
  const metadata = new Object()
  metadata.name = name
  metadata.image = url
  metadata.description = description

  //Pinata அழைப்பைச் செய்யவும்
  const pinataResponse = await pinJSONToIPFS(metadata)
  if (!pinataResponse.success) {
    return {
      success: false,
      status: "😢 Something went wrong while uploading your tokenURI.",
    }
  }
  const tokenURI = pinataResponse.pinataUrl
}

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

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

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

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

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

//உங்கள் எத்திரியம் பரிவர்த்தனையை அமைக்கவும்
const transactionParameters = {
  to: contractAddress, // ஒப்பந்த வெளியீடுகளின் போது தவிர மற்ற நேரங்களில் தேவை.
  from: window.ethereum.selectedAddress, // பயனரின் செயலில் உள்ள முகவரியுடன் பொருந்த வேண்டும்.
  data: window.contract.methods
    .mintNFT(window.ethereum.selectedAddress, tokenURI)
    .encodeABI(), //NFT திறன் ஒப்பந்தத்திற்கு அழைப்பைச் செய்யவும்
}

//மெட்டாமேஸ்க் வழியாக பரிவர்த்தனையில் கையொப்பமிடவும்
try {
  const txHash = await window.ethereum.request({
    method: "eth_sendTransaction",
    params: [transactionParameters],
  })
  return {
    success: true,
    status:
      "✅ Check out your transaction on Etherscan: https://ropsten.etherscan.io/tx/" +
      txHash,
  }
} catch (error) {
  return {
    success: false,
    status: "😥 Something went wrong: " + error.message,
  }
}

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

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

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

export const mintNFT = async (url, name, description) => {
  //பிழை கையாளுதல்
  if (url.trim() == "" || name.trim() == "" || description.trim() == "") {
    return {
      success: false,
      status: "❗Please make sure all fields are completed before minting.",
    }
  }

  //மீத்தரவை உருவாக்கவும்
  const metadata = new Object()
  metadata.name = name
  metadata.image = url
  metadata.description = description

  //Pinata பின் கோரிக்கை
  const pinataResponse = await pinJSONToIPFS(metadata)
  if (!pinataResponse.success) {
    return {
      success: false,
      status: "😢 Something went wrong while uploading your tokenURI.",
    }
  }
  const tokenURI = pinataResponse.pinataUrl

  //திறன் ஒப்பந்தத்தை ஏற்றவும்
  window.contract = await new web3.eth.Contract(contractABI, contractAddress) //loadContract();

  //உங்கள் எத்திரியம் பரிவர்த்தனையை அமைக்கவும்
  const transactionParameters = {
    to: contractAddress, // ஒப்பந்த வெளியீடுகளின் போது தவிர மற்ற நேரங்களில் தேவை.
    from: window.ethereum.selectedAddress, // பயனரின் செயலில் உள்ள முகவரியுடன் பொருந்த வேண்டும்.
    data: window.contract.methods
      .mintNFT(window.ethereum.selectedAddress, tokenURI)
      .encodeABI(), //NFT திறன் ஒப்பந்தத்திற்கு அழைப்பைச் செய்யவும்
  }

  //மெட்டாமேஸ்க் வழியாக பரிவர்த்தனையில் கையொப்பமிடவும்
  try {
    const txHash = await window.ethereum.request({
      method: "eth_sendTransaction",
      params: [transactionParameters],
    })
    return {
      success: true,
      status:
        "✅ Check out your transaction on Etherscan: https://ropsten.etherscan.io/tx/" +
        txHash,
    }
  } catch (error) {
    return {
      success: false,
      status: "😥 Something went wrong: " + error.message,
    }
  }
}

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

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

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

import {
  connectWallet,
  getCurrentWalletConnected,
  mintNFT,
} from "./utils/interact.js"

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

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

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

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

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

தொகுதிச்சங்கிலி உலகைக் கலக்குங்கள்

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

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

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

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

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