tech

基于Bitquery的以太坊数据分析

在本教程中，我们将使用 Bitquery 的 API 来分析以太坊区块数据。Bitquery 的 API 提供对各种区块链数据的访问，使其成为强大的分析工具。

基于Bitquery的以太坊数据分析
一键发币： SUI | SOL | BNB | ETH | BASE | ARB | OP | POLYGON | AVAX | FTM | OK

使用 React 和 Tailwind CSS 创建用于区块链数据历史数据分析的 Web 应用程序是构建用户友好且视觉吸引力强的应用程序的绝佳方式。

在本教程中，我们将使用 Bitquery 的 API 来分析以太坊区块数据。Bitquery 的 API 提供对各种区块链数据的访问，使其成为强大的分析工具。

我们将专注于以太坊区块并从提供的数据中提取有价值的信息。

1、获取 Bitquery API

转到 bitquery网站 查看来自不同链的区块链数据。

单击拟选择的任何区块链。对于本教程，我们将单击 Gorlie Ethereum Testnet：

要获取API，请点击右侧的“获取API”按钮：

点击绿色按钮查询区块链：

我们将获得一个响应数据来进行分析：

2、先决条件

开始之前，请确保你具备以下先决条件：

  • Bitquery API 密钥：需要 Bitquery 的 API 密钥才能访问其服务。吗可以注册一个帐户并从其网站获取 API 密钥。
  • API 客户端：你可以使用 cURL 之类的工具或 javascript 之类的编程语言向 Bitquery API 请求 HTTP。
  • Nodejs：确保你的计算机上安装了 Node.js 和 npm（Node 包管理器）。如果尚未安装，你可以从官方网站安装它们：Node.js。

3、创建一个新的 React 应用程序

首先使用 Create React App 创建一个新的 React 应用程序。

打开你的终端并运行以下命令：

npx create-react-app blockchain-analysis-app
cd blockchain-analysis-app

4、安装依赖项

在你的项目目录中，安装必要的依赖项。

你需要 Axios 来发出 API 请求、Chart.js 来进行数据可视化以及 Tailwind CSS 来进行样式设置：

npm install axios chart.js tailwindcss

5、创建组件

在 src 文件夹中，创建以下组件：

  • DataFetcher.js：此组件将从 Bitquery 的 API 获取历史区块链数据。
  • Chart.js：此组件将使用 Chart.js 呈现数据以实现可视化。
  • Report.js：此组件将根据数据生成报告。

6、实现 DataFetcher 组件

在 DataFetcher.js 中，你可以使用 Axios 从 Bitquery 的 API 获取历史区块链数据。将此代码添加到 DataFetcher.js：

import React, { useEffect, useState } from "react";
import axios from "axios";

const DataFetcher = ({ onDataFetched }) => {
  const [historicalData, setHistoricalData] = useState([]);

  useEffect(() => {
    // Define your API endpoint
    const API_ENDPOINT = "https://graphql.bitquery.io/";
    // Define your API key
    const API_KEY = "YOUR_BITQUERY_API_KEY"; // Replace with your Bitquery API key

    // Define the query variables
    const variables = {
      network: "ethereum",
      limit: 10,
      offset: 0,
      from: "2023-10-01T00:00:00Z",
      till: "2023-10-30T23:59:59Z",
    };

    // Define the GraphQL query
    const query = `
      query ($network: EthereumNetwork!, $limit: Int!, $offset: Int!, $from: ISO8601DateTime, $till: ISO8601DateTime) {
        ethereum(network: $network) {
          blocks(
            options: {desc: "height", limit: $limit, offset: $offset}
            time: {since: $from, till: $till}
          ) {
            timestamp {
              time(format: "%Y-%m-%d %H:%M:%S")
            }
            height
            transactionCount
            address: miner {
              address
              annotation
            }
            reward
            reward_usd: reward(in: USD)
            rewardCurrency {
              symbol
            }
          }
        }
      }
    `;

    // Make an API request to fetch historical blockchain data from Bitquery
    axios
      .post(
        API_ENDPOINT,
        {
          query: query,
          variables: variables,
        },
        {
          headers: {
            "Content-Type": "application/json",
            "X-API-KEY": API_KEY,
          },
        }
      )
      .then((response) => {
        const data = response.data.data.ethereum.blocks;
        setHistoricalData(data);
        onDataFetched(data);
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
  }, []);

  return (
    <div>{/* Display a loading indicator or data summary if needed */}</div>
  );
};

export default DataFetcher;

别忘了将上面代码中的 YOUR_BITQUERY_API_KEY替换为你的实际的 Bitquery API 密钥。

7、实现图表组件

在 Chart.js 中，你可以使用 Chart.js 根据历史数据创建可视化效果。

将此代码添加到 Chart.js：

import React, { useEffect, useRef } from "react";
import Chart from "chart.js/auto";

const ChartComponent = ({ data }) => {
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  useEffect(() => {
    if (!data || data.length === 0 || !Array.isArray(data)) {
      return;
    }

    const ctx = chartRef.current.getContext("2d");

    // Destroy the previous Chart instance if it exists
    if (chartInstance.current) {
      chartInstance.current.destroy();
    }

    chartInstance.current = new Chart(ctx, {
      type: "line",
      data: {
        labels: data.map((item) => item.height),
        datasets: [
          {
            label: "Transaction Count",
            data: data.map((item) => item.transactionCount),
            borderColor: "rgb(75, 192, 192)",
            borderWidth: 1,
          },
        ],
      },
      options: {
        scales: {
          x: {
            type: "linear",
          },
        },
      },
    });
  }, [data]);

  return (
    <div className="w-full md:w-3/4 mx-auto">
      <canvas ref={chartRef}></canvas>
    </div>
  );
};

export default ChartComponent;

此组件将根据提供的历史数据呈现折线图。

8、实现报告组件

在 Report.js 中，你可以根据历史区块链数据生成报告。

将此代码添加到 Report.js：

import React from "react";

const Report = ({ data }) => {
  // Implement logic to generate reports from the data
  return <div></div>;
};

export default Report;

9、使用 Tailwind CSS 进行样式设置

Tailwind CSS 可让您轻松设置 React 组件的样式。你可以通过将 Tailwind CSS 类直接添加到 JSX 元素来自定义组件的外观。

例如，在提供的代码中，Tailwind CSS 类用于样式设置。

10、在 App.js 中使用组件

在 src/App.js 中，你可以使用创建的组件来显示数据、可视化和报告。将此代码添加到 App.js：

import React, { useState } from 'react';
import './App.css';
import DataFetcher from './DataFetcher';
import ChartComponent from './Chart';
import Report from './Report';

function App() {
  const [historicalData, setHistoricalData] = useState([]);

  const onDataFetched = (data) => {
    setHistoricalData(data);
  };

  return (
    <div className="bg-gray-100 p-4">
      <div className="max-w-3xl mx-auto">
        <header className="bg-white p-4 shadow-md rounded-lg mb-4">
          <h1 className="text-2xl font-semibold mb-2">Blockchain Historical Data Analysis</h1>
          <DataFetcher onDataFetched={onDataFetched} />
          <ChartComponent data={historicalData} />
          <Report data={historicalData} />
        </header>
      </div>
    </div>
  );
}

export default App;

11、启动开发服务器

使用以下命令启动你的 React 应用：

npm run dev

你的应用可以在网络浏览器中通过 http://localhost:3000 访问。它将获取历史区块链数据，将其显示在图表中，并生成一份简单的报告，所有样式均使用 Tailwind CSS。

12、分析响应

发出 API 请求后，你将收到来自 Bitquery 的 JSON 响应。

以下是响应中重要字段的细分：

  • 时间戳：挖掘区块的时间戳。
  • 高度：区块的高度或编号。
  • 交易计数：区块中的交易数量。
  • 地址：矿工的地址。
  • 奖励：以 GTH（Gas 代币持有者）为单位的区块奖励。
  • 奖励美元：以美元为单位的区块奖励。
  • 奖励货币：用于奖励的货币符号（在本例中为 GTH）。

13、结论

在本教程中，我们了解了如何使用 Bitquery 的 API 访问和分析以太坊区块数据。

通过利用 Bitquery 的强大功能，可以深入了解以太坊网络的活动，并根据区块链数据做出明智的决策。

你可以将此分析扩展到多个区块、时间范围或项目所需的任何其他标准。

原文链接：Analyzing Ethereum Block Data with Bitquery's API

DefiPlot翻译整理，转载请标明出处

免责声明：本站资源仅用于学习目的，也不应被视为投资建议，读者在采取任何行动之前应自行研究并对自己的决定承担全部责任。
通过 NowPayments 打赏

Read next