[Dragon Boat Festival Project] It turns out that NFT also has customized specifications | Smart contract development plan #7

May 26, 2022

Introduce what the Metadata and JSON formats of NFT are, how to customize our NFT, how its specifications are set through Metadata, and what Metadata can be used by OpenSea, the largest NFT secondary market at present.

foreword

In the previous article, we have uploaded our own pictures on IPFS, but if we use an NFT second-hand trading market like OpenSea, in addition to the multimedia (pictures, sounds, videos) corresponding to NFTs, we will definitely see many different properties!

Take this jellyfish NFT as an example. It is an ERC-721 NFT. In addition to the common name and picture URL, it can also have other attributes, such as attaching its own official website link, and the rarity of the combination of various parts of this NFT. Information such as degrees, if you want to set these things, you must mention what the "Metadata" in the lower right corner of the picture above is and how it works.

Metadata and JSON format

The so-called Metadata of NFT is a bit like a file used to describe what this NFT is. Through Metadata, we can quickly know what the name of this NFT is ("name"), a paragraph describing the outline of this NFT ("description"), pictures Information about where to put it (“image”), etc. Of course, if the NFT’s Metadata does not have a fixed way of writing, everyone can write their own files at will, which may lead to the NFT you send I can’t understand, the NFT I sent You can't understand it either, so when EIP-721 and EIP-1155 were defined, the official document had the format of Metadata. This data format is a common data format called "JSON" during network transmission. Don't be afraid if you haven't seen JSON, its format is very simple and easy to understand.

JSON (JavaScript Object Notation) is a format used to represent objects in the common language JavaScript when writing web programs. We just use it as Metadata. In fact, we don’t need to fully understand what it is doing. As long as you can register student grades, you can Will JSON!

If you are a junior teacher, after the whole class has finished the exam, the teacher will definitely encounter a time to register the scores. At this time, suppose the teacher wants us to take each classmate as a unit and fill in their scores in each subject, as A student's individual transcript may look like this:

The JSON format is divided into key and value, the key will be the field of the header, and the value is the value of the field, so if the above table is converted into JSON format, it will look like this:

 {
    "Name" : "Alice",
    "Chinese" : 90,
    "English" : 80,
    "Math" : 70
}

After reading it, it should not be difficult to understand. The so-called key is the top title in the table, and the value is the value under the title. A set of data will be stored in the form of "key": "value".

In fact, something like this that can be converted into a table can already be regarded as a simple database. It is also used in a similar way for the Metadata we want to fill in the NFT. If we want to fill in the image URL, we will write "image": " #NFT's image URL...", "image" will be the key value; "#NFT's image URL" will be the value.

Metadata supported by OpenSea

As of the writing of this article, OpenSea is still the largest second-hand NFT trading market. Officially, there is a standard specification about Metadata for our developers to take a look at. The website is:https://docs.opensea.io/docs/metadata -standards

There is a table in it, which refers to the properties of NFTs. Let me pick a few that I think are more useful. Metadata is not only these, but I think it should be enough for the NFTs to be developed this time.

1. image: This is the URL where the NFT image is stored. In addition to using HTTP, it also supports IPFS. We have stored the image on IPFS in the previous article, so you can directly use that URL to fill in the value.

2. external_url: The external link URL, which can be set to link to our own website or the official website of the project. If this Metadata is set, there will be an additional external link button on the NFT page.

3. name: The name of this NFT project.

4. description: An overview of this NFT project.

5. attributes: the attributes of NFTs. When the NFTs you issue are randomly pieced together with multiple parts, they have different rarities. By setting attributes, you can see the rarity of each NFT at a glance, but this time we only want to send a Zhang Dragon Boat Festival picture NFT, so I don't need to set it.

6. animation_url and youtube_url: These are additional URLs. If the project has designed some promotional videos, it can also be put up like this.

A .json file that implements Metadata

I take a few Metadata as an example to implement a JSON file, you can also select a few of the Metadata properties mentioned above to edit, first open a new notepad and enter the following:

 {
    "name": "ITechNote Logo",
    "description": "The first ITechNote logo NFT created by ITechNote",
    "image": "ipfs://QmYHiLbYTK9hMpGwLdG9JZvStRGfBaFwv6XEW2JaENuBox",
    "external_url": "https://itechnote.co/"
}

After saving, rename the file and change the extension from the original .txt to .json to complete. In this example, I use four attributes to tell these secondary market NFTs the name, description, image path, and the official website of the technology essay. URL, the image path is ipfs://#the CID of the image.

Upload to IPFS

IPFS can be used not only to store pictures but also to store files. Naturally, .json files can also be uploaded. Go back to Pinata and upload the .json files. The website is: https://pinata.cloud/

Just like the upload method in the previous article, click "+ Upload" in the upper left corner and select "File".

Follow the same three steps to upload the .json file.

After the upload is complete, you will get a set of CIDs of the .json file, and you are done here!

The URL stored in it will be ipfs://#CID. In the example I uploaded, the CID is "QmdnBQrQa6KXVeeNr7fpc9uxQLtcCyknjcWqLXtoG1ahTK", and the URL of the .json file will be "ipfs://QmdnBQrQa6KXVeeNr7fpc9uxQLtcCyknjcWqLXtoG1ahTK".

Now there are three things to clarify, the NFT itself, the NFT .json file, and the NFT image file.

In the future, when we start to write the code of smart contracts, we will see that NFT needs to fill in a URI field, which is to fill in the IPFS URL of this .json file.

When the NFT display tries to display the appearance of this NFT, it will first connect to the .json file through the URL, and when parsing the Metadata under the .json file, it will find the image field, and then pass the IPFS in the image field. The URL links to the real image to display the NFT in its entirety.