チュートリアル:Cryptopunks V 1サイトへの解析学の追加

NFTのプロジェクトのために、それは最近の売上高とチャートのような項目をウェブサイトに追加するのは難しいことができます.既存のNFT APIがあります.しかし、ほとんどの場合、ユーザーキーを公開したくないAPIキーが必要です.完全に(自由に)使用しましょうSort API クライアント側のJavaScriptだけを使用して、CryptopUnks V 1ウェブサイトに解析論を追加します.
完全な例(コードを見るために検査することができます)を以下に含みます.

リアルタイム販売フィードの追加

まず、問い合わせをする予定です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 }
}

NFTRANイベント-販売のみを探す

NftCountアドレス- CryptopUnks V 1契約アドレスを使用してください

limit -最新の10の結果を得る

timestamp - 2022 - 04 - 01以降( GTE以上)のみ検索する

フィールド-パフォーマンスを上げるためにレスポンスから2つの非常に長いフィールドを省略します

JavaScriptを書く

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>";

NFTimagechen url -パンクのイメージに対するURL

NFT値ETH - ETHでの販売の値(必要な変換は必要ありません)

NFTTokenHeightインデックス-パンクの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
  }
  ...
}

トランザクションの日付については、sortxyzchen data [ i ]を使用します.タイムスタンプ

チャート追加

平均販売価格のグラフを追加する

我々は、1日あたりの平均クリプトトップV 1の販売価格を得るために集計データをする必要があります.

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

NFTRANTイベント、NFTSEN Address -前と同じですが、ここで変更はありません

aggregate -フィールドのNVG値を取得します.Valukeeth eth '、1日でバッケティング

限界-最後の10の結果

timestamp - 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 さらに学び、さらに複雑な集約やクエリを作成します.