Jak wybijać NFT (Część 2/3 serii samouczków o NFT)

ERC-721

Alchemy

Solidity

inteligentne kontrakty

Początkujący

Sumi Mudgil

22 kwietnia 2021

8 minut czytania

Beeple (opens in a new tab): 69 milionów dolarów 3LAU (opens in a new tab): 11 milionów dolarów Grimes (opens in a new tab): 6 milionów dolarów

Wszyscy oni wybili swoje NFT przy użyciu potężnego API Alchemy. W tym samouczku nauczymy Cię, jak zrobić to samo w <10 minut.

„Wybijanie NFT” to proces publikowania unikalnej instancji Twojego tokena ERC-721 na blockchainie. Korzystając z naszego inteligentnego kontraktu z części 1 tej serii samouczków o NFT, wykorzystajmy nasze umiejętności Web3 i wybijmy NFT. Na koniec tego samouczka będziesz w stanie wybić tyle NFT, ile tylko zapragnie Twoje serce (i portfel)!

Zaczynajmy!

Krok 1: Instalacja Web3

Jeśli postępowałeś zgodnie z pierwszym samouczkiem dotyczącym tworzenia inteligentnego kontraktu NFT, masz już doświadczenie w korzystaniu z Ethers.js. Web3 jest podobne do Ethers, ponieważ jest to biblioteka używana do ułatwienia tworzenia żądań do blockchaina Ethereum. W tym samouczku będziemy używać Alchemy Web3 (opens in a new tab), ulepszonej biblioteki Web3, która oferuje automatyczne ponawianie prób i solidną obsługę WebSocket.

W katalogu głównym projektu uruchom:

npm install @alch/alchemy-web3

Krok 2: Utworzenie pliku `mint-nft.js`

Wewnątrz katalogu scripts utwórz plik mint-nft.js i dodaj następujące wiersze kodu:

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

Krok 3: Pobranie ABI kontraktu

Nasze ABI (Application Binary Interface) kontraktu to interfejs do interakcji z naszym inteligentnym kontraktem. Możesz dowiedzieć się więcej o ABI kontraktów tutaj (opens in a new tab). Hardhat automatycznie generuje dla nas ABI i zapisuje je w pliku MyNFT.json. Aby z niego skorzystać, będziemy musieli przeanalizować zawartość, dodając następujące wiersze kodu do naszego pliku mint-nft.js:

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

Jeśli chcesz zobaczyć ABI, możesz wydrukować je w konsoli:

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

Aby uruchomić mint-nft.js i zobaczyć swoje ABI wydrukowane w konsoli, przejdź do terminala i uruchom:

node scripts/mint-nft.js

Krok 4: Konfiguracja metadanych dla Twojego NFT przy użyciu IPFS

Jeśli pamiętasz z naszego samouczka w części 1, nasza funkcja inteligentnego kontraktu mintNFT przyjmuje parametr tokenURI, który powinien wskazywać na dokument JSON opisujący metadane NFT — co tak naprawdę ożywia NFT, pozwalając mu na posiadanie konfigurowalnych właściwości, takich jak nazwa, opis, obraz i inne atrybuty.

Interplanetary File System (IPFS) to zdecentralizowany protokół i sieć peer-to-peer do przechowywania i udostępniania danych w rozproszonym systemie plików.

Użyjemy Pinata, wygodnego API i zestawu narzędzi IPFS, do przechowywania naszego zasobu NFT i metadanych, aby upewnić się, że nasze NFT jest naprawdę zdecentralizowane. Jeśli nie masz konta Pinata, zarejestruj darmowe konto tutaj (opens in a new tab) i wykonaj kroki w celu weryfikacji adresu e-mail.

Po utworzeniu konta:

Przejdź do strony „Files” i kliknij niebieski przycisk „Upload” w lewym górnym rogu strony.
Prześlij obraz do Pinata — będzie to zasób obrazu dla Twojego NFT. Możesz nazwać zasób jak tylko chcesz.
Po przesłaniu zobaczysz informacje o pliku w tabeli na stronie „Files”. Zobaczysz również kolumnę CID. Możesz skopiować CID, klikając przycisk kopiowania obok niego. Możesz wyświetlić przesłany plik pod adresem: https://gateway.pinata.cloud/ipfs/<CID>. Obraz, którego użyliśmy w IPFS, możesz znaleźć na przykład tutaj (opens in a new tab).

Dla wzrokowców powyższe kroki zostały podsumowane tutaj:

Teraz będziemy chcieli przesłać jeszcze jeden dokument do Pinata. Ale zanim to zrobimy, musimy go utworzyć!

W katalogu głównym utwórz nowy plik o nazwie nft-metadata.json i dodaj następujący kod json:

{
  "attributes": [
    {
      "trait_type": "Breed",
      "value": "Maltipoo"
    },
    {
      "trait_type": "Eye color",
      "value": "Mocha"
    }
  ],
  "description": "The world's most adorable and sensitive pup.",
  "image": "ipfs://QmWmvTJmJU3pozR9ZHFmQC2DNDwi2XJtf3QGyYiiagFSWb",
  "name": "Ramses"
}

Możesz dowolnie zmieniać dane w pliku json. Możesz usuwać lub dodawać elementy do sekcji atrybutów. Co najważniejsze, upewnij się, że pole image wskazuje na lokalizację Twojego obrazu w IPFS — w przeciwnym razie Twoje NFT będzie zawierać zdjęcie (bardzo uroczego!) psa.

Po zakończeniu edycji pliku JSON zapisz go i prześlij do Pinata, wykonując te same kroki, co w przypadku przesyłania obrazu.

Krok 5: Utworzenie instancji kontraktu

Teraz, aby wejść w interakcję z naszym kontraktem, musimy utworzyć jego instancję w naszym kodzie. W tym celu będziemy potrzebować adresu naszego kontraktu, który możemy uzyskać z wdrożenia lub z Blockscout (opens in a new tab), wyszukując adres użyty do wdrożenia kontraktu.

W powyższym przykładzie adres naszego kontraktu to 0x5a738a5c5fe46a1fd5ee7dd7e38f722e2aef7778.

Następnie użyjemy metody kontraktu (opens in a new tab) Web3, aby utworzyć nasz kontrakt przy użyciu ABI i adresu. W pliku mint-nft.js dodaj następujący kod:

const contractAddress = "0x5a738a5c5fe46a1fd5ee7dd7e38f722e2aef7778"

const nftContract = new web3.eth.Contract(contract.abi, contractAddress)

Krok 6: Aktualizacja pliku `.env`

Teraz, aby tworzyć i wysyłać transakcje do łańcucha Ethereum, użyjemy adresu Twojego publicznego konta Ethereum, aby uzyskać nonce konta (wyjaśnimy to poniżej).

Dodaj swój klucz publiczny do pliku .env — jeśli ukończyłeś część 1 samouczka, nasz plik .env powinien teraz wyglądać tak:

API_URL = "https://eth-sepolia.g.alchemy.com/v2/your-api-key"
PRIVATE_KEY = "your-private-account-address"
PUBLIC_KEY = "your-public-account-address"

Krok 7: Utworzenie transakcji

Najpierw zdefiniujmy funkcję o nazwie mintNFT(tokenData) i utwórzmy naszą transakcję, wykonując następujące czynności:

Pobierz swój PRIVATE_KEY i PUBLIC_KEY z pliku .env.
Następnie będziemy musieli ustalić nonce konta. Specyfikacja nonce służy do śledzenia liczby transakcji wysłanych z Twojego adresu — czego potrzebujemy ze względów bezpieczeństwa i aby zapobiec atakom typu replay (opens in a new tab). Aby uzyskać liczbę transakcji wysłanych z Twojego adresu, używamy getTransactionCount (opens in a new tab).
Na koniec skonfigurujemy naszą transakcję z następującymi informacjami:

'from': PUBLIC_KEY — Źródłem naszej transakcji jest nasz adres publiczny
'to': contractAddress — Kontrakt, z którym chcemy wejść w interakcję i wysłać transakcję
'nonce': nonce — Nonce konta z liczbą transakcji wysłanych z naszego adresu
'gas': estimatedGas — Szacowany gaz potrzebny do zakończenia transakcji
'data': nftContract.methods.mintNFT(PUBLIC_KEY, md).encodeABI() — Obliczenia, które chcemy wykonać w tej transakcji — w tym przypadku jest to wybijanie NFT

Twój plik mint-nft.js powinien teraz wyglądać tak:

   require('dotenv').config();
   const API_URL = process.env.API_URL;
   const PUBLIC_KEY = process.env.PUBLIC_KEY;
   const PRIVATE_KEY = process.env.PRIVATE_KEY;

   const { createAlchemyWeb3 } = require("@alch/alchemy-web3");
   const web3 = createAlchemyWeb3(API_URL);

   const contract = require("../artifacts/contracts/MyNFT.sol/MyNFT.json");
   const contractAddress = "0x5a738a5c5fe46a1fd5ee7dd7e38f722e2aef7778";
   const nftContract = new web3.eth.Contract(contract.abi, contractAddress);

   async function mintNFT(tokenURI) {
     const nonce = await web3.eth.getTransactionCount(PUBLIC_KEY, 'latest'); //pobierz najnowszy nonce

   //transakcja
     const tx = {
       'from': PUBLIC_KEY,
       'to': contractAddress,
       'nonce': nonce,
       'gas': 500000,
       'data': nftContract.methods.mintNFT(PUBLIC_KEY, tokenURI).encodeABI()
     };
   }

Krok 8: Podpisywanie transakcji

Teraz, gdy utworzyliśmy naszą transakcję, musimy ją podpisać, aby ją wysłać. W tym miejscu użyjemy naszego klucza prywatnego.

web3.eth.sendSignedTransaction da nam hash transakcji, którego możemy użyć, aby upewnić się, że nasza transakcja została wydobyta i nie została odrzucona przez sieć. Zauważysz, że w sekcji podpisywania transakcji dodaliśmy sprawdzanie błędów, abyśmy wiedzieli, czy nasza transakcja zakończyła się pomyślnie.

require("dotenv").config()
const API_URL = process.env.API_URL
const PUBLIC_KEY = process.env.PUBLIC_KEY
const PRIVATE_KEY = process.env.PRIVATE_KEY

const { createAlchemyWeb3 } = require("@alch/alchemy-web3")
const web3 = createAlchemyWeb3(API_URL)

const contract = require("../artifacts/contracts/MyNFT.sol/MyNFT.json")
const contractAddress = "0x5a738a5c5fe46a1fd5ee7dd7e38f722e2aef7778"
const nftContract = new web3.eth.Contract(contract.abi, contractAddress)

async function mintNFT(tokenURI) {
  const nonce = await web3.eth.getTransactionCount(PUBLIC_KEY, "latest") //pobierz najnowszy nonce

  //transakcja
  const tx = {
    from: PUBLIC_KEY,
    to: contractAddress,
    nonce: nonce,
    gas: 500000,
    data: nftContract.methods.mintNFT(PUBLIC_KEY, tokenURI).encodeABI(),
  }

  const signPromise = web3.eth.accounts.signTransaction(tx, PRIVATE_KEY)
  signPromise
    .then((signedTx) => {
      web3.eth.sendSignedTransaction(
        signedTx.rawTransaction,
        function (err, hash) {
          if (!err) {
            console.log(
              "The hash of your transaction is: ",
              hash,
              "\nCheck Alchemy's Mempool to view the status of your transaction!"
            )
          } else {
            console.log(
              "Something went wrong when submitting your transaction:",
              err
            )
          }
        }
      )
    })
    .catch((err) => {
      console.log(" Promise failed:", err)
    })
}

Krok 9: Wywołanie `mintNFT` i uruchomienie węzła `mint-nft.js`

Pamiętasz plik metadata.json, który przesłałeś do Pinata? Pobierz jego kod hash z Pinata i przekaż następujący parametr do funkcji mintNFT https://gateway.pinata.cloud/ipfs/<metadata-hash-code>

Oto jak uzyskać kod hash:

Jak uzyskać kod hash metadanych NFT w Pinata

Upewnij się, że skopiowany kod hash prowadzi do Twojego pliku metadata.json, ładując https://gateway.pinata.cloud/ipfs/<metadata-hash-code> w osobnym oknie. Strona powinna wyglądać podobnie do poniższego zrzutu ekranu:

Twoja strona powinna wyświetlać metadane json

W sumie Twój kod powinien wyglądać mniej więcej tak:

require("dotenv").config()
const API_URL = process.env.API_URL
const PUBLIC_KEY = process.env.PUBLIC_KEY
const PRIVATE_KEY = process.env.PRIVATE_KEY

const { createAlchemyWeb3 } = require("@alch/alchemy-web3")
const web3 = createAlchemyWeb3(API_URL)

const contract = require("../artifacts/contracts/MyNFT.sol/MyNFT.json")
const contractAddress = "0x5a738a5c5fe46a1fd5ee7dd7e38f722e2aef7778"
const nftContract = new web3.eth.Contract(contract.abi, contractAddress)

async function mintNFT(tokenURI) {
  const nonce = await web3.eth.getTransactionCount(PUBLIC_KEY, "latest") //pobierz najnowszy nonce

  //transakcja
  const tx = {
    from: PUBLIC_KEY,
    to: contractAddress,
    nonce: nonce,
    gas: 500000,
    data: nftContract.methods.mintNFT(PUBLIC_KEY, tokenURI).encodeABI(),
  }

  const signPromise = web3.eth.accounts.signTransaction(tx, PRIVATE_KEY)
  signPromise
    .then((signedTx) => {
      web3.eth.sendSignedTransaction(
        signedTx.rawTransaction,
        function (err, hash) {
          if (!err) {
            console.log(
              "The hash of your transaction is: ",
              hash,
              "\nCheck Alchemy's Mempool to view the status of your transaction!"
            )
          } else {
            console.log(
              "Something went wrong when submitting your transaction:",
              err
            )
          }
        }
      )
    })
    .catch((err) => {
      console.log("Promise failed:", err)
    })
}

mintNFT("ipfs://QmYueiuRNmL4MiA2GwtVMm6ZagknXnSpQnB3z2gWbz36hP")

Teraz uruchom node scripts/mint-nft.js, aby wdrożyć swoje NFT. Po kilku sekundach powinieneś zobaczyć w terminalu odpowiedź podobną do tej:

The hash of your transaction is: 0x301791fdf492001fcd9d5e5b12f3aa1bbbea9a88ed24993a8ab2cdae2d06e1e8

Check Alchemy's Mempool to view the status of your transaction!

Następnie odwiedź swój mempool Alchemy (opens in a new tab), aby sprawdzić status swojej transakcji (czy jest oczekująca, wydobyta, czy została odrzucona przez sieć). Jeśli Twoja transakcja została odrzucona, warto również sprawdzić Blockscout (opens in a new tab) i wyszukać hash transakcji.

Wyświetl hash transakcji NFT w Etherscan

I to wszystko! Właśnie wdrożyłeś I wybiłeś NFT na blockchainie Ethereum

Używając mint-nft.js, możesz wybić tyle NFT, ile tylko zapragnie Twoje serce (i portfel)! Pamiętaj tylko, aby przekazać nowe tokenURI opisujące metadane NFT (w przeciwnym razie po prostu utworzysz mnóstwo identycznych z różnymi identyfikatorami).

Prawdopodobnie chciałbyś móc pochwalić się swoim NFT w portfelu — więc koniecznie sprawdź Część 3: Jak wyświetlić NFT w portfelu!