Cara Mencetak NFT (Bagian 2/3 dari Seri Tutorial NFT)

NFTERC-721AlchemySoliditykontrak pintar

Pemula

Sumi Mudgil

22 April 2021

8 bacaan singkat minute read

Beeple(opens in a new tab): $69 Juta 3LAU(opens in a new tab): $11 Juta Grimes(opens in a new tab): $6 Juta

Semuanya mencetak NFT mereka menggunakan API efektif Alchemy. Dalam tutorial ini, kami akan mengajarkan Anda cara melakukan hal yang sama dalam waktu <10 menit.

"Mencetak NFT" adalah tindakan mempublikasikan instance unik dari token ERC-721 Anda di rantai blok. Dengan menggunakan kontrak pintar kita dari Bagian 1 seri tutorial NFT ini, mari gunakan kemampuan web3 kita dan cetak NFT. Pada akhir tutorial ini, Anda akan dapat mencetak sebanyak mungkin NFT sesuai keinginan (dan dompet) Anda!

Ayo mulai!

Langkah 1: Instal web3

Jika Anda mengikuti tutorial pertama tentang membuat kontrak pintar NFT Anda, Anda telah memiliki pengalaman menggunakan Ethers.js. Web3 sama dengan Ethers, karena merupakan pustaka yang digunakan untuk membuat permintaan ke rantai blok Ethereum dengan lebih mudah. Dalam tutorial ini, kami akan menggunakan Web3 Alchemy(opens in a new tab), yang merupakan pustaka web3 yang ditingkatkan yang menawarkan percobaan ulang otomatis dan dukungan WebSocket yang kokoh.

Dalam direktori beranda proyek Anda jalankan:

1npm install @alch/alchemy-web3

Langkah 2: Buat berkas mint-nft.js

Inside your scripts directory, create a mint-nft.js file and add the following lines of code:

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

Langkah 3: Ambil ABI kontrak Anda

ABI (Antarmuka Biner Aplikasi) kontrak kita adalah antarmuka untuk berinteraksi dengan kontrak pintar kita. Anda dapat belajar lebih banyak tentang ABI Kontrak di sini(opens in a new tab). Hardhat secara otomatis membuat ABI untuk kita dan menyimpannya dalam berkas MyNFT.json. Untuk menggunakan ini, kita perlu mengurai kontennya dengan menambahkan barisan kode berikut ke berkas mint-nft.js kita:

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

Jika Anda ingin melihat ABInya, Anda dapat mencetaknya di konsol Anda:

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

Untuk menjalankan mint-nft.js dan melihat ABI Anda yang dicetak ke konsol, navigasikan ke terminal Anda dan jalankan

1node scripts/mint-nft.js
 Salin

Langkah 4: Konfigurasikan metadata untuk NFT Anda dengan menggunakan IPFS

Jika Anda ingat dari tutorial di Bagian 1, fungsi kontrak pintar mintNFT kita memasukkan parameter tokenURI yang seharusnya mengurai dokumen JSON yang mendeskripsikan metadata NFT — merupakan bagian yang menghidupkan NFT, yang memungkinkannya memiliki properti yang dapat dikonfigurasikan, seperti nama, deskripsi, gambar, dan atribut lainnya.

Sistem Berkas Antarplanet (IPFS) adalah protokol terdesentralisasi dan jaringan peer-to-peer untuk menyimpan dan membagikan data dalam sistem berkas yang terdistribusi.

Kita akan menggunakan Pinata, API dan kotak peralatan IPFS yang mudah digunakan, untuk menyimpan aset NFT dan metadata kita untuk memastikan NFT kita benar-benar terdesentralisasi. Jika Anda tidak memiliki akun Pinata, mendaftarlah untuk membuat akun gratis di sini(opens in a new tab) dan lengkapi langkah-langkahnya untuk memverifikasi surel Anda.

Setelah Anda membuat akun:

Navigasikan ke halaman "Berkas" dan klik tombol "Unggah" biru di bagian kiri atas halaman.
Unggah gambar ke pinata — ini akan menjadi aset gambar untuk NFT Anda. Silahkan menamai asetnya dengan apa pun yang Anda inginkan
Setelah Anda mengunggahnya, Anda akan melihat info berkas di tabel pada halaman Berkas. Anda juga akan melihat kolom CID. Anda dapat menyalin CID dengan mengklik tombol salin di sebelahnya. Anda dapat melihat ungggahan Anda di: https://gateway.pinata.cloud/ipfs/<CID>. Anda dapat menemukan gambar yang kita gunakan di IPFS di sini(opens in a new tab), sebagai contoh.

Untuk pelajar yang lebih visual, langkah-langkah di atas diringkaskan di sini:

(opens in a new tab)

Sekarang, kita akan mengunggah satu lagi dokumen ke Pinata. Tetapi sebelum kita melakukannya, kita perlu membuatnya!

Dalam direktori akar Anda, buat berkas baru yang disebut nft-metadata.json dan tambahkan kode json berikut:

1{
2  "attributes": [
3    {
4      "trait_type": "Breed",
5      "value": "Maltipoo"
6    },
7    {
8      "trait_type": "Eye color",
9      "value": "Mocha"
10    }
11  ],
12  "description": "The world's most adorable and sensitive pup.",
13  "image": "ipfs://QmWmvTJmJU3pozR9ZHFmQC2DNDwi2XJtf3QGyYiiagFSWb",
14  "name": "Ramses"
15}
Tampilkan semua
 Salin

Silahkan mengubah data dalam json-nya. Anda dapat menghilangkan atau menambah bagian atributnya. Yang paling penting, pastikan field gambar menunjuk ke lokasi gambar IPFS Anda — jika tidak, NFT Anda akan memasukkan foto anjing (sangat imut!).

Setelah Anda selesai mengedit berkas jsonnya, simpan dan unggah ke Pinata, dengan mengikuti langkah yang sama seperti yang kita lakukan untuk mengunggah gambar.

Langkah 5: Buat instance kontrak Anda

Sekarang, untuk berinteraksi dengan kontrak kita, kita perlu membuat instance-nya dalam kode kita. Untuk melakukannya, kita perlu akun kontrak kita yang bisa didapat dari penyebaran atau Etherscan(opens in a new tab) dengan mencari alamat yang Anda gunakan untuk menyebar kontrak.

Dalam contoh di atas, akun kontrak kita adalah 0x81c587EB0fE773404c42c1d2666b5f557C470eED.

Selanjutnya, kita akan menggunakan metode kontrak(opens in a new tab) web3 untuk membuat kontrak kita menggunakan ABI dan alamat. Dalam berkas mint-nft.js Anda, tambahkan berikut ini:

1const contractAddress = "0x81c587EB0fE773404c42c1d2666b5f557C470eED"
2
3const nftContract = new web3.eth.Contract(contract.abi, contractAddress)
 Salin

Langkah 6: Perbarui berkas .env

Sekarang, untuk membuat dan mengirim transaksi ke rantai Ethereum, kita akan menggunakan alamat akun Ethereum publik Anda untuk mendapatkan nonce akun (akan dijelaskan di bawah).

Tambahkan kunci publik Anda ke berkas .env Anda — Jika Anda menyelesaikan bagian 1 dari tutorial, berkas .env kita seharusnya sekarang tampak seperti ini:

1API_URL = "https://eth-ropsten.alchemyapi.io/v2/your-api-key"
2PRIVATE_KEY = "your-private-account-address"
3PUBLIC_KEY = "your-public-account-address"
 Salin

Langkah 7: Buat transaksi Anda

Pertama, mari tentukan fungsi yang bernama mintNFT(tokenData) dan buat transaksi kita dengan melakukan yang berikut ini:

Ambil PRIVATE_KEY dan PUBLIC_KEY dari berkas .env.
Selanjutnya, kita perlu mengetahui nonce akun. Spesifikasi nonce digunakan untuk melacak jumlah transaksi yang dikirim dari alamat Anda — yang kita perlukan untuk alasan keamanan dan mencegah serangan perulangan(opens in a new tab). Untuk mendapatkan jumlah transaksi yang dikirim dari alamat Anda, kita menggunakan getTransactionCount(opens in a new tab).
Akhirnya, kita akan menyiapkan transaksi kita dengan info berikut:

'from': PUBLIC_KEY — Asal transaksi kita adalah alamat publik kita
'to': contractAddress — Kontrak yang dengannya kita ingin berinteraksi dan mengirimkan transaksi
'nonce': nonce — Nonce akun dengan jumlah transaksi yang dikirimkan dari alamat kita
'gas': estimatedGas — Gas perkiraan yang diperlukan untuk menyelesaikan transaksi
'data': nftContract.methods.mintNFT(PUBLIC_KEY, md).encodeABI() — Komputasi yang ingin kita lakukan dalam transaksi ini — yang dalam kasus ini adalah mencetak NFT

Berkas mint-nft.js Anda seharusnya tampak seperti ini sekarang:

1   require('dotenv').config();
2   const API_URL = process.env.API_URL;
3   const PUBLIC_KEY = process.env.PUBLIC_KEY;
4   const PRIVATE_KEY = process.env.PRIVATE_KEY;
5
6   const { createAlchemyWeb3 } = require("@alch/alchemy-web3");
7   const web3 = createAlchemyWeb3(API_URL);
8
9   const contract = require("../artifacts/contracts/MyNFT.sol/MyNFT.json");
10   const contractAddress = "0x81c587EB0fE773404c42c1d2666b5f557C470eED";
11   const nftContract = new web3.eth.Contract(contract.abi, contractAddress);
12
13   async function mintNFT(tokenURI) {
14     const nonce = await web3.eth.getTransactionCount(PUBLIC_KEY, 'latest'); //get latest nonce
15
16   //the transaction
17     const tx = {
18       'from': PUBLIC_KEY,
19       'to': contractAddress,
20       'nonce': nonce,
21       'gas': 500000,
22       'data': nftContract.methods.mintNFT(PUBLIC_KEY, tokenURI).encodeABI()
23     };
24   }
Tampilkan semua
 Salin

Langkah 8: Tandatangani transaksi

Sekarang kita telah membuat transaksi kita, kita perlu menandatanganinya untuk mengirimkannya. Di sini adalah di mana kita akan menggunakan kunci pribadi kita.

web3.eth.sendSignedTransaction akan memberi kita hash transaksi, yang dapat kita gunakan untuk memastikan transaksi kita ditambang dan tidak dilewatkan oleh jaringan. Anda akan melihat dalam bagian penandatanganan transaksi, kita telah menambahkan beberapa pemeriksaan kesalahan sehingga kita tahu jika transaksi kita berhasil diproses.

1require("dotenv").config()
2const API_URL = process.env.API_URL
3const PUBLIC_KEY = process.env.PUBLIC_KEY
4const PRIVATE_KEY = process.env.PRIVATE_KEY
5
6const { createAlchemyWeb3 } = require("@alch/alchemy-web3")
7const web3 = createAlchemyWeb3(API_URL)
8
9const contract = require("../artifacts/contracts/MyNFT.sol/MyNFT.json")
10const contractAddress = "0x81c587EB0fE773404c42c1d2666b5f557C470eED"
11const nftContract = new web3.eth.Contract(contract.abi, contractAddress)
12
13async function mintNFT(tokenURI) {
14  const nonce = await web3.eth.getTransactionCount(PUBLIC_KEY, "latest") //get latest nonce
15
16  //the transaction
17  const tx = {
18    from: PUBLIC_KEY,
19    to: contractAddress,
20    nonce: nonce,
21    gas: 500000,
22    data: nftContract.methods.mintNFT(PUBLIC_KEY, tokenURI).encodeABI(),
23  }
24
25  const signPromise = web3.eth.accounts.signTransaction(tx, PRIVATE_KEY)
26  signPromise
27    .then((signedTx) => {
28      web3.eth.sendSignedTransaction(
29        signedTx.rawTransaction,
30        function (err, hash) {
31          if (!err) {
32            console.log(
33              "The hash of your transaction is: ",
34              hash,
35              "\nCheck Alchemy's Mempool to view the status of your transaction!"
36            )
37          } else {
38            console.log(
39              "Something went wrong when submitting your transaction:",
40              err
41            )
42          }
43        }
44      )
45    })
46    .catch((err) => {
47      console.log(" Promise failed:", err)
48    })
49}
Tampilkan semua
 Salin

Langkah 9: Panggil mintNFT dan jalankan simpul mint-nft.js

Masih ingat dengan metadata.json yang Anda unggah ke Pinata? Dapatkan kode hashnya dari Pinata dan kosongkan yang berikut sebagai parameter pada mintNFT fungsi https://gateway.pinata.cloud/ipfs/<metadata-hash-code>

Berikut cara mendapatkan kode hash:

Cara mendapatkan kode hash metadata nft Anda di Pinata

Periksa ulang bahwa kode hash yang Anda salin menautkan ke metadata.json Anda dengan memuat https://gateway.pinata.cloud/ipfs/<metadata-hash-code> ke dalam jendela terpisah. Halamannya seharusnya tampak sama seperti tangkapan layar di bawah:

Halaman Anda seharusnya menampilkan metadata json

Secara keseluruhan, kode Anda seharusnya tampak seperti ini:

1require("dotenv").config()
2const API_URL = process.env.API_URL
3const PUBLIC_KEY = process.env.PUBLIC_KEY
4const PRIVATE_KEY = process.env.PRIVATE_KEY
5
6const { createAlchemyWeb3 } = require("@alch/alchemy-web3")
7const web3 = createAlchemyWeb3(API_URL)
8
9const contract = require("../artifacts/contracts/MyNFT.sol/MyNFT.json")
10const contractAddress = "0x81c587EB0fE773404c42c1d2666b5f557C470eED"
11const nftContract = new web3.eth.Contract(contract.abi, contractAddress)
12
13async function mintNFT(tokenURI) {
14  const nonce = await web3.eth.getTransactionCount(PUBLIC_KEY, "latest") //get latest nonce
15
16  //the transaction
17  const tx = {
18    from: PUBLIC_KEY,
19    to: contractAddress,
20    nonce: nonce,
21    gas: 500000,
22    data: nftContract.methods.mintNFT(PUBLIC_KEY, tokenURI).encodeABI(),
23  }
24
25  const signPromise = web3.eth.accounts.signTransaction(tx, PRIVATE_KEY)
26  signPromise
27    .then((signedTx) => {
28      web3.eth.sendSignedTransaction(
29        signedTx.rawTransaction,
30        function (err, hash) {
31          if (!err) {
32            console.log(
33              "The hash of your transaction is: ",
34              hash,
35              "\nCheck Alchemy's Mempool to view the status of your transaction!"
36            )
37          } else {
38            console.log(
39              "Something went wrong when submitting your transaction:",
40              err
41            )
42          }
43        }
44      )
45    })
46    .catch((err) => {
47      console.log("Promise failed:", err)
48    })
49}
50
51mintNFT("ipfs://QmYueiuRNmL4MiA2GwtVMm6ZagknXnSpQnB3z2gWbz36hP")
Tampilkan semua
 Salin

Sekarang, jalankan node scripts/mint-nft.js untuk menyebarkan NFT Anda. Setelah beberapa detik, Anda seharusnya melihat respon seperti ini di terminal Anda:

1The hash of your transaction is: 0x10e5062309de0cd0be7edc92e8dbab191aa2791111c44274483fa766039e0e00
2
3Check Alchemy's Mempool to view the status of your transaction!

Selanjutnya, buka kolam memori Alchemy(opens in a new tab) Anda untuk melihat status transaksi Anda (apakah berstatus tunggu, ditambang, atau dilewatkan oleh jaringan). Jika transaksi Anda dilewatkan, akan juga menolong untuk melihat Ropsten Etherscan(opens in a new tab) dan mencari hash transaksi Anda.

Lihat hash transaksi NFT Anda di Etherscan

Dan selesai! Anda sekarang telah menyebarkan DAN mencetak dengan NFT di rantai blok Ethereum

Dengan menggunakan mint-nft.js, Anda dapat mencetak sebanyak mungkin NFT sesuai keinginan hati (dan dompet) Anda! Hanya pastikan untuk mengosongkan tokenURI baru yang mendeskripsikan metadata NFT (jika tidak, Anda hanya akan membuat sekumpulan NFT yang sama dengan ID berbeda).

Agaknya, Anda ingin memamerkan NFT Anda dalam dompet Anda — jadi pastikan melihat Bagian 3: Cara Melihat NFT di Dompet Anda!

Terakhir diedit: @pettinarip(opens in a new tab), 23 November 2023