NFTのAPIを取得してM5Stack Core2に最新情報を表示する



下記の記事でNFTマーケットプレイスから情報を取得しました。

https://qiita.com/tendots/items/0bd485b0465a81d6b775

その後、様々なNFTのデータが取得できるサービス「NFT Port」を見つけたので、
こちらを使用してデータを取得し、せっかくなのでM5Stack core2に情報を表示してみます。


# NFT　Portとは？
https://www.nftport.xyz/
![スクリーンショット 2022-12-23 22.23.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242072/3af8d1cc-04da-071c-f6d6-8e17713b115c.png)

[こちらのページ](https://www.nftport.xyz/about)によると

> NFTPortは、ワンストップでシンプルかつ開発者に優しいNFTインフラ＆APIを開発者向けに提供しています（例：Stripe for NFTs）。同社は元NATOのAIとサイバーセキュリティの専門家によって設立され、Jaan Tallinn（Skypeの共同創業者、DeepMindの初期投資家）、Taavet Hinrikus（Wiseの共同創業者）、Jaynti Kanani（Polygonの共同創業者など世界的投資家から資金援助を受けています。）

とのことで、開発者向けのAPIを公開してくれているサービスのようです。
サインインすればAPI取得用の認証キーがすぐに作れました。

# NFT Portからデータを呼び出す
今回は試しにSolana collectionsの最新売上ランキングの情報を取得してみます。
APIは下記を使用しました。

https://docs.nftport.xyz/reference/retrieve-trending-collections-solana

![スクリーンショット 2022-12-23 22.35.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242072/355f9faf-bd60-c3e8-3c5a-fc18b79daa7c.png)

# APIを呼び出すenebularのノードを作成する

まずはenebularからNFT PortのAPIを叩きます。
ノードはこんな感じです

![スクリーンショット 2022-12-23 22.46.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242072/5571d43d-5616-cbff-d777-695e4242bcc2.png)

取得したデータはJSONオブジェクトになっているので、
スプレッドシートに書き込むため、functionノードで整形しています。
その後、一番右のノードでスプレッドシートに書き込みを行っています。


# スプレッドシートのデータを返すノードを作成する
今度はM5Stack Core2からスプレッドシートのデータを呼び出すためのノードを作成します。

![スクリーンショット 2022-12-23 22.47.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242072/75f28f58-2482-d5d5-004d-9202a7f8e01a.png)

こんどは配列で返ってくる値をJSON形式にしてレスポンスするようにしています。


# M5Stack Core2から上のノードを呼び出すコードを書く
最後にM5Stack Core2からenebularのノードを呼び出し、画面に表示させるプログラムを作成します。
今回画面にはNFTコレクションの名前と、24時間以内の取引額を表示するようにしました。

```
#include <M5Core2.h>
#include <Arduino.h>
#include <WiFi.h>
#include <WiFiMulti.h>
#include <HTTPClient.h>
#include <Arduino_JSON.h>

WiFiMulti wifiMulti;
HTTPClient http;

const char* ssid = "SSIDが入る";
const char* pass = "パスワードが入る";
const String url = "URLが入る";

void setup() {
  Serial.begin(9600); 
  M5.begin();          //Init M5Core.
  M5.Lcd.setTextColor(
    YELLOW);              //Set the font color to yellow
  M5.Lcd.setTextSize(2);  //Set the font size.
  M5.Lcd.setCursor(
    65, 10);  //Move the cursor position to (x, y).
  M5.Lcd.setTextColor(RED);

  wifiMulti.addAP(ssid, pass);             //Storage wifi configuration information.
  M5.Lcd.print("\nConnecting Wifi...\n");  //print format output string on lcd.
}

void loop() {
  M5.update();

  JSONVar myObject;
  //Read the press state of the key.
  if ((wifiMulti.run() == WL_CONNECTED)) {  // wait for WiFi connection.
    M5.Lcd.print("[HTTP] begin...\n");
    http.begin(url + "gettrend/");  // configure traged server and url.
    M5.Lcd.print("[HTTP] GET...\n");
    int httpCode = http.GET();  // start connection and send HTTP header.
    if (httpCode > 0) {         // httpCode will be negative on error.
      M5.Lcd.printf("[HTTP] GET... code: %d\n", httpCode);

      if (httpCode == HTTP_CODE_OK) {  // file found at server.

        M5.Lcd.clear();
        M5.Lcd.setCursor(0, 0);

        String payload = http.getString();

        myObject = JSON.parse(payload);
        Serial.println(myObject);
        for (int i = 0; i < 10; i++) {
          String name = myObject[i][2];
          M5.Lcd.print(name);
          M5.Lcd.print(":");
          String str = myObject[i][8];
          int strint = str.toInt();
          M5.Lcd.print(strint);
          M5.Lcd.println(" sol");
        }
      } else {
        Serial.println("error");
      }
    } else {
      M5.Lcd.printf("[HTTP] GET... failed, error: %s\n", http.errorToString(httpCode).c_str());
    }
    http.end();
  } else {
    M5.Lcd.print("connect failed");
  }

  delay(10000);

  M5.Lcd.clear();  //clear the screen.
  M5.Lcd.setCursor(0, 0);
}

```

これでM5Stack Core2で情報が表示できるようになりました。

![IMG_8211.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242072/e0a722f5-b0d8-ecda-33a5-66211effb969.png)


# まとめ
実はM5Stackに情報を表示するだけであればenbularを中継する必要はありません。
M5Stackから直接NFT PortのAPIを叩けば取得できます。


ただ、定期的にAPIから最新データを取得し、スプレッドシートに記入し、
今回の内容を少し変えて取得したデータを貯めれば、
統計を出したり、加工するのに便利なツールとなります。

また、スマホ以外の表示ディスプレイとして、机の上にあると色々と捗るのではないでしょうか。