자습서: CryptoPunks V1 사이트에 분석 추가

NFT 프로젝트의 경우 최근 판매 및 차트와 같은 항목을 웹 사이트에 추가하기 어려울 수 있습니다. 기존 NFT API가 있습니다. 그러나 대부분 사용자에게 노출하고 싶지 않은 API 키가 필요합니다. 완전히 개방된(무료)Sort API을 사용하여 클라이언트 측 Javascript만 사용하여 CryptoPunks V1 웹 사이트에 분석을 추가해 보겠습니다.

아래에 전체 예제(코드를 확인하기 위해 검사할 수 있음)가 포함됩니다.

실시간 판매 피드 추가

먼저 POST 호출을 사용하여 transaction API을 쿼리하여 punks 계약에 대한 정보를 얻습니다.

POST https://api.sort.xyz/v0/transaction

BODY:
{
      "nft_event": "sale",
      "nft_address": "0x282bdd42f4eb70e7a9d9f40c8fea0825b7f68c5d",
      "limit" : 10,
      "timestamp" : "gte:2022-04-01",
      "fields" : { "logs" : 0, "function" : 0 }
}

nft_event - 판매만 찾습니다

.

nft_address - CryptoPunks V1 계약 주소 사용

제한 - 최신 10개 결과 가져오기

타임스탬프 - 2022-04-01 이후에만 검색(크거나 같음, gte)

필드 - 성능 향상을 위해 응답에서 매우 긴 필드 2개 생략

자바스크립트 작성

var sortxyz_result = await axios.post('https://api.sort.xyz/v0/transaction',
    {
      "nft_event": "sale",
      "nft_address": "0x282bdd42f4eb70e7a9d9f40c8fea0825b7f68c5d",
      "limit" : 10,
      "timestamp" : "gte:2022-04-01",
      "fields" : { "logs" : 0, "function" : 0 }
    }
);

let sortxyz_data = sortxyz_result.data.result;
for (var i=0; i<sortxyz_data.length; i++) {
  // Fill in our HTML
}

HTML에서 사용할 API 응답의 필드 값을 확인하세요.

 new_sale.innerHTML = 
    "<div class=\"row\"> " + 
      "<div class=\"col\"> " +
        "<img width=\"75\" class=\"lazyload\" src=\""+sortxyz_data[i].nft.image_url+"\" />" +
      "</div>" +
      "<div class=\"col\">" +
        "<div>" + sortxyz_data[i].nft.value_eth + "</div>" +
        "<div>#" + sortxyz_data[i].nft.token_index + "</div>" +
      "</div>" +
    "</div>";

nft.image_url - 판매된 펑크 이미지의 URL입니다

.

nft.value_eth - 판매 가치(ETH)(변환 필요 없음)

nft.token_index - 판매된 펑크의 ID

피드 표시

최근 판매에 대한 산점도 차트 추가

이전 판매 피드에서 동일한 API 호출을 사용하지만 거품형/분산형 도표 차트에서 트랜잭션의 타임스탬프를 사용합니다.

POST https://api.sort.xyz/v0/transaction

BODY:
{
      "nft_event": "sale",
      "nft_address": "0x282bdd42f4eb70e7a9d9f40c8fea0825b7f68c5d",
      "limit" : 10,
      "timestamp" : "gte:2022-04-01",
      "fields" : { "logs" : 0, "function" : 0 }
}

차트의 타임스탬프 사용

let sortxyz_data = sortxyz_result.data.result;
for (var i=0; i<sortxyz_data.length; i++) {
  let chart_item = {
      "y": sortxyz_data[i].nft.value_eth,
      "date" : sortxyz_data[i].timestamp,
      "value": sortxyz_data[i].nft.value_eth,
      "image": sortxyz_data[i].nft.image_url,
      "punk" : sortxyz_data[i].nft.token_index
  }
  ...
}

트랜잭션 날짜에 대해 'sortxyz_data[i].timestamp'를 사용합니다

.

차트 추가

평균 판매 가격에 대한 차트 추가

일일 평균 CryptoPunks V1 판매 가격을 얻으려면 데이터를 집계해야 합니다.

BODY:
{
      "nft_event": "sale",
      "nft_address": "0x282bdd42f4eb70e7a9d9f40c8fea0825b7f68c5d",
      "aggregate" : { "op" : "avg", "by" : "day", "field" : "nft.value_eth" },
      "limit" : 10,
      "timestamp" : "gte:2022-04-01"
}

nft_event, nft_address - 이전과 동일, 변경 사항 없음

집계 - 일별로 분류된 'nft.value_eth' 필드의 평균 값 가져오기

제한 - 최근 10개 결과

타임스탬프 - 2022-04-01에 시작

집계 API 결과 구문 분석

let sortxyz_data = sortxyz_result.data.result;
let position = 0;
for (var i=0; i<sortxyz_data.length; i++) {
    let chart_item = {
      "y": sortxyz_data[i].total,
      "x": position,
      "date" : sortxyz_data[i].timestamp
}

풍부한 트랜잭션을 반환하는 대신 데이터를 집계하기 때문에 이 API 호출의 결과는 이전 API 호출과 형식이 다릅니다.

차트 추가

보너스: 계약 이벤트 추가

계약 이벤트와 같은 추가 정보를 추가할 수 있습니다(모형에는 표시되지 않음).

POST https://api.sort.xyz/v0/transaction

BODY:
{
      "contract_address": "0x282bdd42f4eb70e7a9d9f40c8fea0825b7f68c5d",
      "limit" : 10
}

함께 모아서

completed example here에 액세스합니다(완전한 Javascript 예제를 보려면 소스 코드 보기).

Sort API docs에서 자세히 알아보고 더 복잡한 집계 및 쿼리를 생성하십시오.