Solidity를 사용하여 5분 안에 온체인 NFT를 만드는 방법을 알아보세요.

ChinaDeFi

特邀专栏作者

2022-01-05 08:19

이 기사는 약 4902자로, 전체를 읽는 데 약 8분이 소요됩니다

NFT를 만드는 것은 어려운 작업이 아닙니다.

AI 요약

펼치기

NFT를 만드는 것은 어려운 작업이 아닙니다.

오프체인 NFT

이것은 질문을 합니다. 모든 NFT가 온체인이 아닙니까? 이더리움 블록체인에서 NFT로 작업한 사람이라면 온체인 데이터 스토리지에 한계가 있다고 말할 수 있습니다. 비용이 많이 들고 대부분의 NFT 프로젝트는 이미지와 메타데이터 파일을 오프체인에 저장하기 때문입니다. 종종 "온체인"에 저장된 유일한 데이터는 메타데이터의 불변 해시(우리의 tokenURI)입니다. 이 해시를 설명하는 가장 쉬운 방법은 실제 NFT에 대한 링크입니다. 여기서 차이점은 해시는 데이터에 따라 달라집니다. 소스를 변경하면 해시가 더 이상 유효하지 않으므로 변경할 수 없습니다. 누구나 블록체인 노드 마이너 또는 컨센서스를 실행할 수 있는 것처럼 누구나 IPFS 노드를 실행할 수 있습니다.

이제 우리는 Loot와 같은 "온체인" 프로젝트에 대해 잘 알고 있을 것입니다. 이것이 어떻게 수행되는지, 실제로 적절한 시각적 미디어를 온체인에 저장할 수 있습니까?

대답은 '예'이지만 Base64 인코딩과 SVG 이미지 유형과 같은 몇 가지 사항이 필요합니다. 둘 다 PNG 또는 JPEG와 같은 일반적인 메모리 "집중" 시각 데이터가 아닌 텍스트 데이터로 작업할 수 있습니다. 즉, 다음 두 가지 작업을 수행해야 합니다.

Base64는 json 메타데이터를 인코딩합니다.
이미지 렌더링 "지침"을 SVG 형식으로 인코딩

다행스럽게도 브라우저는 두 형식을 모두 이해하고 OpenSea와 같은 브라우저 기반 마켓플레이스는 IPFS 스토어 해시에 대한 링크와 같은 방식으로 NFT를 렌더링할 수 있지만 브라우저는 이미지를 "가져오고 캐싱"하는 것이 아니라 대신 이미지를 렌더링합니다.

Base64 인코딩

온체인 메타데이터 스토리지를 달성하고 IPFS와 같은 도구의 필요성을 피하는 한 가지 방법은 이를 base64로 인코딩하여 NFT 토큰 데이터에 직접 저장하는 것입니다. 우리의 경우 tokenURI는 실제 메타데이터를 인코딩된 형식으로 반환합니다. 이것은 더 이상 "링크"가 아니라 메타데이터 자체입니다.

내가 말했듯이 GitHub의 기존 Base64.sol 라이브러리를 활용할 것입니다. github에서 가져오거나 단순히 코드를 복제/복사하고 붙여넣은 동일한 디렉터리에서 이 파일을 가져올 수 있습니다.

Base64로 인코딩할 때 유의할 점은 인코딩이 데이터 압축의 한 형태가 아니므로 데이터 크기를 줄이는 것이 아니라 브라우저가 디코딩할 수 있는 형식으로 데이터를 저장한다는 것입니다. NFT 이미지의 경우와 같이 메타데이터는 그다지 크지 않습니다. 아래는 예입니다.

예제 코드에서 우리는 tokenId(NFT의 ID)를 가져오고 NFT에 필요한 모든 것을 렌더링하기 위해 이름, 설명, 속성을 사용하여 OpenSea를 포함하는 base64로 인코딩된 json 텍스트 문자열을 반환하는 'BuildMetaData' 함수를 활용합니다. 그리고 매우 중요한 것은 우리의 이미지입니다. 또한 아래에서 설명할 BuildImage 기능을 사용합니다.

다음은 메타데이터의 예입니다.

{
"name":"NFT1",
"description":"This is our on-chain NFT",
"image": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCBpZD0ic3ZnXzExIiBoZWlnaHQ9IjYwMCIgd2lkdGg9IjUwMyIgeT0iMCIgeD0iMCIgZmlsbD0iaHNsKDI5Myw1MCUsMjUlKSIvPjx0ZXh0IGZvbnQtc2l6ZT0iMTgiIHk9IjEwJSIgeD0iNSUiIGZpbGw9ImhzbCg5MCwxMDAlLDgwJSkiPlNvbWUgVGV4dDwvdGV4dD48dGV4dCBmb250LXNpemU9IjE4IiB5PSIxNSUiIHg9IjUlIiBmaWxsPSJoc2woOTAsMTAwJSw4MCUpIj5Tb21lIFRleHQ8L3RleHQ+PHRleHQgZm9udC1zaXplPSIxOCIgeT0iMjAlIiB4PSI1JSIgZmlsbD0iaHNsKDkwLDEwMCUsODAlKSI+U29tZSBUZXh0PC90ZXh0Pjx0ZXh0IGZvbnQtc2l6ZT0iMTgiIHk9IjEwJSIgeD0iODAlIiBmaWxsPSJoc2woOTAsMTAwJSw4MCUpIj5Ub2tlbjogMTwvdGV4dD48dGV4dCBmb250LXNpemU9IjE4IiB5PSI1MCUiIHg9IjUwJSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0iaHNsKDkwLDEwMCUsODAlKSI+dXNlclRleHQ8L3RleHQ+PC9zdmc+",
"attributes": [
{
"trait_type": "TextColor",
"value":"328"
}
]
}

일반적으로 "이미지" 값은 다음과 같습니다.

{
"image": "ipfs://QmWwMDLz6hQKCqjYba5cSHdrNUvPvAdndtaWjdFpm52GYm/1.gif"

}

이미지 값은 어떻게 되나요?이미지 값은 1 - SVG이고 2 - SVG도 Base64로 인코딩됩니다. 이는 SVG 텍스트가 json(텍스트) 데이터처럼 인코딩되었음을 의미합니다.

다음과 같이 인코딩된 json에 일부 콘텐츠를 추가했음을 알 수 있습니다.

"응용 프로그램/json 데이터:; base64."

이것은 단순히 데이터가 무엇이며 수신자 또는 수신자의 브라우저에서 그에 따라 데이터를 디코딩할 수 있는 방법을 설명합니다.

ABI 인코딩

또한 프로젝트 코드 전체에서 ABI 인코딩을 수행합니다. 우리의 경우 ABI 인코딩 또는 애플리케이션 바이너리 인터페이스는 여러 줄의 텍스트를 연결할 수만 있습니다. "This", "is", "my", "code"는 단일 문자열로 인코딩되지 않으면 오류가 발생합니다.

SVG 파일

SVG란 무엇이며 우리에게 중요한 이유는 무엇입니까?

SVG 또는 Scalable Vector Graphics는 기본적으로 이미지를 xml 유형 형식 또는 텍스트(온체인에 저장할 수 있는 텍스트)로 저장할 수 있게 해줍니다. 대용량 이미지 데이터를 저장하는 대신 원하는 이미지를 텍스트로 설명하고 브라우저와 OpenSea가 렌더링할 수 있는 방식으로 인코딩합니다. 크기, 색상 및 렌더링할 수 있는 텍스트까지 포함하여 이미지의 다양한 특성을 설정할 수 있습니다.

간단한 이미지를 보내려면 고해상도 PNG 이미지를 이메일로 보내거나 문자를 보내거나 간단히 몇 단어로 설명하고 영수증을 받을 수 있습니다. 보낸 사람이 렌더링하거나 생성합니다. . 데이터 전송이 비싸다면 수신자의 비용을 높여 비용을 낮추는 "트레이드 오프"를 할 수 있습니다.

아래의 텍스트 설명은 HD PNG보다 훨씬 데이터 집약적일 가능성이 높습니다. 수신자가 이를 쉽게 제시할 수 있는 도구를 가지고 있는 한 데이터 저장 또는 전송 측면에서 비용을 크게 절감할 수 있습니다.

"'Hello World'라는 흰색 텍스트가 있는 500x500 파란색 배경"

예제 코드는 BuildImage 함수에서 SVG의 매개변수를 설명합니다.

SVG 생성을 위한 훌륭한 온라인 도구와 템플릿이 많이 있으며 아이디어를 SVG로 전환하는 데 도움이 되는 몇 가지 도구를 찾아보시기 바랍니다.

렌더링된 화면 크기를 늘리거나 줄일 때 앱 개발 "하드 코딩된" 값으로 인해 문제가 발생할 수 있으므로 레이아웃에 백분율을 사용해야 합니다. 텍스트의 시작점으로 1000px는 장치의 화면 크기를 1000x1000 미만으로 줄일 때까지 괜찮습니다. 이 경우 80%로 설정하는 것이 좋습니다.

ABI 및 Base64 인코딩 이전의 SVG:

'
'',
'Some Text',
'Some Text',
'Some Text',
'Token: ',
_tokenId.toString(),
"",
'',
currentWord.value,
"",

데이터에 대한 세부 정보를 첨부했음을 다시 한 번 알 수 있습니다.

“data:image/svg+xml;base64”

사용자 입력

스마트 계약의 더 흥미로운 기능 중 하나는 사용자가 일부 텍스트 데이터를 민트 기능에 입력하여 최종 NFT에 기여할 수 있는 기능입니다. 이 사용자 입력은 "메모리의 문자열"로 저장된 다음 BuildImage 기능을 통해 SVG 데이터에 동적으로 추가됩니다.

텍스트 입력의 크기를 제한하고 이 제한에 대한 오류를 추가했지만 사용자는 추가할 수 있는 내용을 완전히 알고 있습니다. 이것은 불변이며 블록체인에 영원히 존재합니다.

mint 함수는 함수에 문자열 예상을 추가하여 이를 수행합니다.

function mint(string memory _userText) public payable {
uint256 supply = totalSupply();
bytes memory strBytes = bytes(_userText);
require(strBytes.length <= stringLimit, "String input exceeds limit.");
require(exists(_userText) != true, "String already exists!");

Word memory newWord = Word(
string(
abi.encodePacked(
"NFT",
uint256(supply + 1).toString()
)
),
"This is our on-chain NFT",
randomNum(361, block.difficulty, supply).toString(),
randomNum(361, block.timestamp, supply).toString(),
_userText
);
if (msg.sender != owner()) {
require(msg.value >= 0.005 ether);
}
wordsToTokenId[supply + 1] = newWord; //Add word to mapping @tokenId

_safeMint(msg.sender, supply + 1);

NFT와 스마트 계약 상호 작용

Remix와 같은 도구를 사용하는 경우 제공된 코드를 수정하고, Remix에 업로드하고, 테스트를 위해 컴파일 및 배포할 수 있습니다.

민트 기능은 사용자가 문자열 데이터를 입력하고 텍스트를 추가한 다음 생성된 내용을 확인하기 위해 tokenURI 기능을 활용해야 하므로 OpenSea와 같은 마켓플레이스에서 NFT 데이터를 검색하거나 구문 분석하는 데 활용하는 것과 동일한 tokenURI 기능입니다. 이미지.