Simple NFT Gallery

สวัสดีครับ วันนี้จะมาสอนทำ NFT Gallery อย่างง่าย โดยจะดึง NFT ที่อยู่ใน wallet address และ NFT ที่เราสนใจมาแสดงนะครับ

Before start

ก่อนเราจะเริ่มเขียนกันเรามาทำความเข้าใจ NFT มาตรฐานของ NFT และฟังก์ชั่นที่จำเป็นจะต้องรู้กันก่อนนะครับ

About NFT

NFT จริงๆ แล้วก็เป็นโปรแกรม โปรแกรมบัญชี asset แบบนึงที่เขียนด้วย Smart Contract โดยจะเก็บว่า NFT id ที่ x มี metadata (link นอก blockchain ที่เก็บข้อมูล attribute ต่างๆ ของ nft id x เช่น รูปภาพรูปอะไร ค่า strength เป็นเท่าไหร่ เป็นต้น) และกระเป๋าไหนเป็นเจ้าของ id ที่ x

ERC-721 เป็นมาตรฐานของ NFT ที่เราใช้กันอยู่ครับ แต่ก็จะมีอีกหลายมาตรฐานเช่น ERC-1155, ERC-721A ที่จะช่วยให้เราทำ NFT เหมาะสมกับงานที่เราจะใช้มากขึ้นครับ

ERC-721 ที่มีเป็นแบบ media (รูปภาพ, วิดิโอ และอื่นๆ) จะเป็น ERC721URIStorage ที่จะเก็บ URI ภายนอกเชนเอาไว้

ซึ่ง ERC-721+ERC721URIStorage แบบเพียวๆ เราจะทำ NFT Gallery แบบไม่ต้องพึ่งการทำ index อาจจะทำได้ค่อนข้างยากครับ วันนี้ก็เลยจะใช้ NFT ที่รองรับ ERC721Enumerable ในการทำนะครับ

ERC721Enumerable

ERC721Enumerable จะช่วยเราในการทราบว่า Wallet Address ที่เราสนใจมี NFT token id อะไรอยู่บ้างครับ

Functions

ฟังก์ชั่นของ ERC-721+ERC721Enumerable ที่เราต้องใช้ในวันนี้จะมี ตัวครับ

balanceOf(address owner) // ERC721
tokenOfOwnerByIndex(address owner, uint256 index) // ERC721Enumerable
tokenURI(uint256 tokenId) // ERC721URIStorage

หลักการคือเราจะไปหาจำนวนที่ Wallet Address นี้มี NFT ที่เราสนใจอยู่ว่ามีเท่าไหร่ แล้วเอามาวนลูปเพื่อหา token id ที่เค้ามี และจากนั้นเอา token id ไปดู uri และนำ uri ดูว่า image ใช้ link ไหนและเอาไปแสดง

Get a3r0nz’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

เอาหล่ะมาเริ่มกันเลยครับ เราจะสร้าง 2 ไฟล์ เหมือนเดิมครับ คือ index.html และ index.js และวันนี้ผมจะใช้ Bitkub Chain เหมือนเดิมครับ โดยจะดึงข้อมูลจาก Mahabharattoon ในกระเป๋ามาแสดงครับ

index.html

<!DOCTYPE html>
<html>

    <head>
        <title>Dashboard</title>
        <link href='https://fonts.googleapis.com/css?family=Open Sans:400,700' rel='stylesheet' type='text/css'>
        <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
    </head>

    <body class="container">
        <div class="row">
            <div class="col-12">
                <h1>Gallery</h1>
            </div>
            <div class="col-12">
                <strong>Mahabharattoon</strong> 
                <div>
                    Balance : <span id="balance"></span><br/>
                    NFTs:
                    <div id="nft-container" class="row"></div>
                </div>
            </div>
        </div>
    </body>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script charset="utf-8" src="https://cdn.ethers.io/scripts/ethers-v4.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
    <script src="./index.js"></script>

</html>

index.js

abi = JSON.parse('[{"inputs": [{"internalType": "address","name": "owner","type": "address"}],"name": "balanceOf","outputs": [{"internalType": "uint256","name": "", "type": "uint256"}],"stateMutability": "view","type": "function"},{"inputs": [{"internalType": "address","name": "owner","type": "address"},{"internalType": "uint256","name": "index","type": "uint256"}],"name": "tokenOfOwnerByIndex","outputs": [{"internalType": "uint256","name": "","type": "uint256"}],"stateMutability": "view","type": "function"},{"inputs": [{"internalType": "uint256","name": "tokenId","type": "uint256"}],"name": "tokenURI","outputs": [{"internalType": "string","name": "","type": "string"}],"stateMutability": "view","type": "function"}]')

walletAddress = '<wallet_address>'
nftAddress = '0x3492113DdEecdd8FBEb9e2774A55219c1683DED8'

provider = new ethers.providers.JsonRpcProvider("https://rpc.bitkubchain.io")
contract = new ethers.Contract(nftAddress, abi, provider)

$(document).ready(function() {
    contract.balanceOf(walletAddress).then((result) => {
        balance = result 
        $("#balance").html(balance.toString())
        for(index = 0;index < balance; index++){
            contract.tokenOfOwnerByIndex(walletAddress,index).then((tokenId) => {
                return contract.tokenURI(tokenId)
            }).then((uri)=>{
                return axios(uri)
            }).then((result)=>{
                meta = result.data
                $("#nft-container").append(
                    '<div class="col-md-3">'+
                    '<img src="'+meta.image+'" width="100%" height="300px" style="object-fit: cover;" />'+
                    '<div class="text-center">'+meta.name+'</div>'+
                    '</div>'
                )
            })
        }
    })
});

ผลลัพธ์จะได้เป็นรูปข้างต้นครับ โดยดูจากโค้ด index.js จะเป็นไปตามหลักการที่บอกครับ คือเราจะเริ่มจากดู balance ของกระเป๋าก่อนว่ามี Mahabharattoon กี่ชิ้นครับ

จากนั้นเราเอามาวนลูป ว่า index ที่ 0 ถึง balance ที่เรามี เรามี token id ไหนบ้าง แล้วเอา token id นั้นมาหา tokenURI อีกที เพื่อไปเอาข้อมูลรูป กับชื่อมาแสดงครับ

ซึ่งลองไปเช็คใน bitkub nft ว่ากระเป๋าผมมีตามที่ดึงมาจริงรึเปล่าก็จะพบว่าตรงกันครับ

ก็จบลงไปแล้วนะครับสำหรับการทำ Simple NFT Gallery จาก Wallet Address และ NFT ที่เราสนใจ

ปล.

• โค้ดที่เอามาให้ดูเป็นเพียงคอนเซปครับ ผิดพลาดประการใดต้องขออภัยมา ณ ที่นี้ด้วยนะครับ
• อยากให้เขียนบล็อกเกี่ยวกับอะไรคอมเมนท์มาได้ครับ