Friday 29 October 2021

Membuat NFT Marketplace Yang Terkoneksi ke Blockchain

cara membuat aplikasi marketplace NFT - Non-Fungible Token (NFT) adalah aset digital yang kepemilikannya diverifikasi oleh Blockchain, sebuah open ledger terdesentralisasi yang tersebar di jaringan seluruh dunia.

NFT dapat berupa media atau program digital yang tersimpan dalam IPFS. Pada umumnya, NFT ditampilkan dalam sebuah DApps (Decentralize Apps) yang bisa berlaku sebagai marketplace. 

Di artikel kali ini, saya tidak akan menjelaskan secara dasar tentang NFT atau Blockchain. Tujuan pokoknya adalah, kita akan belajar membuat DApps NFT Marketplace yang akan kita koneksikan ke Blockchain. Sebagaimana kita ketahui, untuk melakukan aksi ke Blockchain, terdapat banyak sekali biaya untuk deploying ataupun gas fee. Tapi tenang, di artikel ini, kita akan bereksperimen di testnet yang sama sekali tidak ada biaya.

Apa yang akan dipelajari?

Di artikel ini, kita akan belajar untuk:

  1. Membuat crypto wallet & mendapat ETH coin.
  2. Membuat NFT Token di blockchain network.
  3. Menginstall starter pack marketplace DApps yang akan kita buat.
  4. Mengkoneksikan DApps kita ke token yang telah kita buat di blockchain.
  5. Upload NFT ke IPFS via DApps.
  6. Transfer kepemilikian NFT.
Flow NFT Marketplace DApps

Ini adalah flow NFT DApps yang akan kita buat di tutorial kali ini. Kita akan menggunakan Moralis (https://moralis.io) sebagai pihak ketiga, ini akan saya jelaskan detailnya nanti. So, let's start the tutorial!

A. Membuat Crypto Wallet

Dalam kasus ini, saya menggunakan Metamask sebagai crypto wallet.
Kita bisa menginstallnya melalui ekstensi browser Google Chrome. Silahkan install Metamask disini.
Setelah ekstensi terinstall, buka Metamask lalu daftar.


Jika kalian sudah memiliki wallet di aplikasi selain Metamask, kalian boleh import paraprhase wallet kalian. Jika belum, silahan klik Create a Wallet dan ikuti pendaftaran sampai akhir.

B. Meminta Crypto Coin Dari Faucet

Pembuatan kontrak , token, dan mint NFT memerlukan biaya menggunakan ETH (Ethereum) coin. Tapi karena kita menggunakan Ropsten testnet, kita bisa mendapatkannya gratis dari Faucet. Kunjungi Ropsten Faucet untuk meminta koin ETH yang bisa kita pakai di Testnet.

C. Mendaftar Moralis

Moralis adalah aplikasi pihak ketiga yang sangat penting dalam tutorial ini. Moralis adalah development platform yang menyediakan berbagai layanan terkait Blockchain. Di dalam kasus ini, kita akan menggunakan beberapa layanan moralis, yaitu:

  1. Server & Database: Untuk menyimpan data user dan NFT
  2. Node: Untuk mengakses data di Blockchain
  3. API Key: Untuk melakukan interaksi ke Blockchain menggunakan Moralis API
Silahkan daftar terlebih dahulu ke https://moralis.io.

Setelah itu, cobalah untuk membuat server baru dengan klik Create New Server di halaman server, lalu pilih Testnet server dan hubungkan ke ETH (Ropsten)

D. Membuat NFT DApps

Setelah wallet siap dan kita telah berhasil mendapatkan koin ETH, sekarang saatnya menginstall NFT DApps.

1. Clone starterpack NFT DApps.

Kita akan menggunakan starter pack (source code) dari @mtegarsantosa/nft-dapps.

$ git clone https://github.com/mtegarsantosa/nft-dapps.git
$ cd nft-dapps
$ npm install

2. ENV Setup

Ubah file .env.example menjadi .env, Lalu edit dengan mengikuti pattern ini.

BLOCKCHAIN_NETWORK=ethRopsten

WALLET_MNEMONIC=<METAMASK-PARAPHRASE>
WALLET_ADDRESS=<METAMASK-ADDRESS>

MORALIS_APP_ID=<APP-ID-MORALIS-KAMU>
MORALIS_SERVER_URL=<SERVER-URL-MORALIS-KAMU>
MORALIS_API_KEY=<API-KEY-MORALIS-KAMU>
MORALIS_API_URL=https://deep-index.moralis.io/api/v2

CONTRACT_ADDRESS=

<METAMASK-PARAPHRASE>: Ini adalah secret key yang ada di metamask wallet mu.
<METAMASK-ADDRESS>: Alamat akun wallet yang telah dibuat dan memiliki ETH koin dari faucet.
<APP-ID-MORALIS-KAMU>: Kalian bisa cek di View Details pada server yang telah dibuat di moralis.
<SERVER-URL-MORALIS-KAMU>: Kalian bisa cek di View Details pada server yang telah dibuat di moralis.
<API-KEY-MORALIS-KAMU>:  Kalian bisa mendapatkan API Key melalui halaman Moralis Web3API.

3. Deploy NFT Token ke Blockchain

Pertama, kita buat dulu NFT Token dengan standar ERC-721. Saya akan membuat token bernama ArsanNFT (ANFT). Caranya cukup dengan memasukan perintah.

$ npm run generate token


Setelah itu, tinggal deploy token & smart contract address yang telah kita buat dengan perintah:
$ npm run token deploy


Setelah token dideploy ke Blockchain, kalian bisa cek kembali file .env di bagian CONTRACT_ADDRESS. Itu adalah alamat smart contract dan token yang kita dapat. Biarkan tetap berada di file .env agar DApps nya nanti terkoneksi ke sana.

Kalian bisa akses smart contract & token kalian secara langsung di blockchain Ropsten. Kunjungi https://ropsten.etherscan.io/token/<CONTRACT-ADDRESS-MU>.

3. Menjalankan UI NFT DApps.

Untuk run DApps nya, cukup masukan perintah ini:

$ npm run client

E. Fitur-Fitur NFT DApps

Setelah kalian berhasil merilis smart contract & NFT token, terkoneksi dengan Moralis, dan berhasil menjalankan DApps client, maka kalian telah berhasil merilis DApps kalian sendiri. Selamat!!!

Setelah menjalankan client, kalian akan otomatis di-redirect browser ke http://127.0.0.1:8080. Oh iya, untuk menggunaka keseluruhan fitur DApps, kalian harus mengkoneksikan wallet Metamask melalui tombol Connect to Metamask, pop up akan muncul, lalu tinggal klik connect. Berikut ini beberapa fitur yang bisa kalian gunakan.

1. List NFT

Disini kalian bisa melihat list seluruh NFT yang di-mint di token yang telah kalian rilis.


2. My NFT

Disini kalian bisa melihat seluruh NFT milik address Metamask yang kalian koneksikan ke DApps. Bisa NFT yang kalian mint, atau NFT yang ditransfer orang lain ke address kalian.



2. Mint (Upload) NFT

Di halaman ini, kalian bisa mint atau upload NFT baru. Pop up metamask akan muncul ketika transaksi berlangsung. Jika NFT telah berhasil diupload, Transaction ID beserta link ke block explorer akan muncul.



3. Transfer NFT

Di halaman ini, kalian bisa mengubah kepemilikan NFT yang kalian punya ke address lain secara gratis.



Oke, sekian artikel tentang cara membuat nft marketplace sendiri yang terkoneksi ke blockchain. Semoga bermanfaat! Terima kasih!

3 komentar:

  1. cara belajar programming buat beginner enaknya dimana ya kak?:)

    ReplyDelete
  2. mampir kakak https://opensea.io/assets/matic/0x2953399124f0cbb46d2cbacd8a89cf0599974963/70602964834226182000751827476303322373819507646892352521711712860421494931457/

    ReplyDelete
  3. om, pas npm run generate token terjadi error, kira2 dimana ya kenanya?

    ReplyDelete

Hai, Mohon Komentar Yang Relevan Dan Tidak OOT!