Construindo um Painel de Análise Visual para a Blockchain Celo usando React.js e Web3.js: Um Tutorial Passo a Passo

Introdução:

À medida que a adoção da tecnologia blockchain continua a crescer, há uma necessidade de ferramentas que possam analisar e visualizar efetivamente dados da blockchain para melhor compreensão e tomada de decisões. Neste tutorial, os desenvolvedores aprenderão como criar um painel de visualização de dados dinâmico e interativo que fornece informações em tempo real sobre a blockchain Celo. Ao aproveitar o poder do React.js e do Web3.js, você será equipado com as habilidades técnicas para desenvolver um painel amigável que exibe várias métricas da blockchain e permite que os usuários monitorem e analisem a atividade na blockchain Celo.

Também exploraremos como buscar dados da blockchain em tempo real, integrá-los aos componentes do React.js e criar visualizações dinâmicas que ofereçam informações valiosas sobre a atividade da blockchain Celo. Ao usar o provedor Web3 da Celo, você poderá buscar e atualizar dados em tempo real, garantindo que seu painel reflita as informações mais recentes.

Ao longo deste tutorial, você conhecerá várias métricas da blockchain, como volume de transações, tempos de confirmação de blocos e atividade de rede. Você aprenderá a projetar visualizações intuitivas que apresentam essas métricas de maneira atrativa e informativa. O painel que você vai construir permitirá que os usuários acompanhem tendências, analisem padrões e compreendam melhor o desempenho da blockchain Celo.

Se você é um desenvolvedor experiente em busca de expandir seu conhecimento sobre tecnologias blockchain ou um novato interessado em explorar o potencial da visualização de dados no espaço blockchain, este tutorial fornecerá habilidades práticas e experiência prática. Ao final deste tutorial, você estará bem equipado para construir um painel totalmente funcional que permite aos usuários visualizar e analisar a atividade na blockchain Celo, capacitando-os a tomar decisões informadas com base em dados em tempo real.

Então, vamos começar e embarcar nesta empolgante jornada de construir um painel de análise visual na blockchain Celo usando React.js e Web3.js.

Configurando o Projeto:

Vamos prosseguir com a configuração do projeto para construir o painel de análise visual para a blockchain Celo. Aqui está um guia passo a passo para ajudá-lo a começar.

Primeiro, configuramos o ambiente de trabalho instalando o Node.js em nosso dispositivo. Visite o site oficial do Node.js e baixe a versão estável mais recente adequada para seu sistema operacional.

Para inicializar o projeto, no diretório do mesmo, execute o seguinte comando para inicializar um novo projeto Node.js, depois instale o React:

npm init -y

Isso criará um novo arquivo (package.json) para o nosso projeto.

Instalando os pacotes React e React DOM em nosso projeto.

npm install react react-dom

Agora, configuramos um novo projeto React.js no diretório desejado onde o projeto será criado e navegamos até o diretório do projeto:

npx create-react-app celo-dashboard
cd celo-dashboard

Aqui, temos um projeto básico React.js configurado e pronto para ser personalizado para nosso painel de análise visual.

Em segundo lugar, instalamos dependências adicionais e todos os pacotes necessários para trabalhar com a Celo e visualizar de dados a partir do diretório do projeto e nos conectamos à blockchain Celo. Esses pacotes incluem Web3.js para interação com a blockchain Celo, @celo/contractkit para funcionalidades específicas da Celo, chart.js para visualização de dados e react-chartjs-2 como um empacotador React para chart.js:

npm install web3 @celo/contractkit chart.js react-chartjs-2

Conectando-se à blockchain Celo, criamos um novo arquivo (celo.js) no diretório (src) do nosso projeto e importamos a dependência necessária:

import Web3 from 'web3';
import ContractKit from '@celo/contractkit';

Estamos utilizando a biblioteca Web3.js para conectar-se à rede da blockchain Celo:

const web3 = new Web3('https:// /alfajores-forno.celo-testnet.org');
const kit = ContractKit.newKitFromWeb3(web3);
export { web3, kit };

Observação:

A nova instância Web3() cria um novo objeto Web3, que age como nossa conexão com a blockchain Celo.

O parâmetro 'https:// /alfajores-forno.celo-testnet.org' especifica o URL da rede Celo à qual queremos nos conectar.

Para fins deste tutorial, estamos nos conectando à rede de testes da Celo. Rede de testes são redes separadas que simulam a rede principal para fins de desenvolvimento e teste. Você sempre pode substituir o URL pelo URL apropriado da rede Celo, dependendo de suas necessidades, seja na rede de testes ou na rede principal.

ContractKit.newKitFromWeb3() é uma função fornecida pelo pacote @celo/contractkit, que recebe a instância Web3 como parâmetro e inicializa uma nova instância de ContractKit.

ContractKit é uma biblioteca de utilidades fornecida pela Celo que simplifica a interação com a blockchain Celo. Ela abstrai algumas das complexidades e fornece funções e ferramentas úteis para interagir com contratos e realizar operações comuns na blockchain Celo. Entendeu?

Em terceiro lugar, lidamos com o Processamento e Visualização de Dados:

Criamos um novo arquivo index.js que serve como o ponto de entrada de nossa aplicação React: ele é responsável por renderizar o componente App e inseri-lo no DOM. Ao chamar ReactDOM.render(,document.getElementById('root')), estaremos instruindo o React a renderizar o componente App e inseri-lo no elemento com o ID 'root' em seu arquivo HTML. Basicamente, o arquivo index.js é necessário para inicializar e iniciar nossa aplicação React. Ele importa o componente App do arquivo App.js e o renderiza no DOM.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

Criamos um arquivo HTML chamado index.html no mesmo diretório e adicionamos o seguinte bloco:

<!DOCTYPE html>
<html>
  <head>
    <title>Análise da Blockchain Celo</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

A tag de script é adicionada ao arquivo HTML, apontando para o arquivo JavaScript agrupado gerado pelo empacotador (bundler). Quando o arquivo HTML é carregado em um navegador da Web, o código JavaScript agrupado será executado, renderizando a aplicação React no elemento 'div' especificado com o ID 'root'.

Ao executar o comando do empacotador, o código JavaScript de App.js e suas dependências serão agrupados em um único arquivo (por exemplo, bundle.js) que pode ser referenciado no arquivo HTML para que a aplicação funcione corretamente.

Instalando o Babel e o Webpack: o Babel é uma ferramenta que ajuda a converter código JavaScript moderno em versões compatíveis com versões anteriores. O Webpack é um empacotador que agrupa seu código e suas dependências. Instale o Babel e o Webpack, juntamente com seus plugins e carregadores necessários, executando o seguinte comando:

npm install @babel/core @babel/preset-react babel-loader webpack webpack-cli --save-dev

Crie um novo arquivo chamado babel.config.js no diretório raiz do seu projeto.

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
  ],
};

Este arquivo de configuração especifica as definições para o Babel compilar o código JavaScript moderno e a sintaxe JSX do React.

Crie um novo arquivo chamado webpack.config.js no diretório raiz do seu projeto.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

Este arquivo de configuração especifica o ponto de entrada da sua aplicação (index.js), o arquivo de saída (bundle.js) e o uso do carregador do Babel para compilar o código React.

Instale as dependências necessárias:

npm install babel-loader @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli --save-dev
Update the scripts section in your package.json file:
"scripts": {
  "start": "webpack --mode development --watch",
  "build": "webpack --mode production"
},

Isto nos permitirá executar (npm start) para iniciar o servidor de desenvolvimento com recarregamento em tempo real e (npm run build) para criar um pacote pronto para produção.

Com essas configurações no lugar, agora você pode executar npm start para iniciar o servidor de desenvolvimento e acessar sua aplicação React. O código será compilado e agrupado usando o Babel e o Webpack, permitindo que você escreva código JavaScript e React moderno mantendo a compatibilidade com navegadores mais antigos.

Crie um novo arquivo chamado "App.js":

import React, { useState, useEffect } from 'react';
import { Line, Bar } from 'react-chartjs-2';
import { ContractKit } from '@celo/contractkit';
import Web3 from 'web3';

// Atualize os seguintes valores com os detalhes da sua blockchain Celo
const rpcEndpoint = 'https://alfajores-forno.celo-testnet.org';
const contractAddress = '0xSeuEnderecoDoContrato';
const abi = []; // Atualize com a ABI do seu contrato

function App() {
  const [transactionVolumeData, setTransactionVolumeData] = useState({});
  const [blockConfirmationTimeData, setBlockConfirmationTimeData] = useState({});
  const [networkActivityData, setNetworkActivityData] = useState({});

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const web3 = new Web3(rpcEndpoint);
      const kit = ContractKit.newKitFromWeb3(web3);

      // Obtendo dados de volume de transações
      const transactionVolume = await fetchTransactionVolume(kit);
      const processedTransactionVolume = processTransactionVolume(transactionVolume);
      setTransactionVolumeData(processedTransactionVolume);

      // Obtendo dados de tempo de confirmação de blocos
      const blockConfirmationTimes = await fetchBlockConfirmationTimes(kit);
      const processedBlockConfirmationTimes = processBlockConfirmationTimes(blockConfirmationTimes);
      setBlockConfirmationTimeData(processedBlockConfirmationTimes);

      // Obtendo dados de atividade da rede
      const networkActivity = await fetchNetworkActivity(kit);
      const processedNetworkActivity = processNetworkActivity(networkActivity);
      setNetworkActivityData(processedNetworkActivity);
    } catch (error) {
      console.error('Erro ao buscar dados da blockchain Celo:', error);
    }
  };

  const fetchTransactionVolume = async (kit) => {
    // Obtendo dados de volume de transações da blockchain Celo
    const contract = new kit.web3.eth.Contract(abi, contractAddress);
    const transactionVolume = await contract.methods.getTransactionVolume().call();
    return transactionVolume;
  };

  const processTransactionVolume = (transactionVolume) => {
    // Processando dados de volume de transações para o formato desejado para o gráfico
    const processedData = {
      labels: ['Rótulo 1', 'Rótulo 2', 'Rótulo 3'],
      datasets: [
        {
          label: 'Volume de Transações',
          data: [1000, 2000, 3000], // Substitua pelos seus dados processados
          backgroundColor: 'rgba(75,192,192,0.4)',
          borderColor: 'rgba(75,192,192,1)',
          borderWidth: 2,
        },
      ],
    };
    return processedData;
  };

  const fetchBlockConfirmationTimes = async (kit) => {
    // Obtendo dados de tempo de confirmação de blocos da blockchain Celo
    const contract = new kit.web3.eth.Contract(abi, contractAddress);
    const blockConfirmationTimes = await contract.methods.getBlockConfirmationTimes().call();
    return blockConfirmationTimes;
  };

  const processBlockConfirmationTimes = (blockConfirmationTimes) => {
    // Processando dados de tempo de confirmação de blocos para o formato desejado para o gráfico
    const processedData = {
      labels: ['Rótulo 1', 'Rótulo 2', 'Rótulo 3'],
      datasets: [
        {
          label: 'Tempos de Confirmação de Blocos',
          data: [10, 20, 30], // Substitua pelos dados processados
          backgroundColor: 'rgba(75,192,192,0.4)',
          borderColor: 'rgba(75,192,192,1)',
          borderWidth: 2,
        },
      ],
    };
    return processedData;
  };

  const fetchNetworkActivity = async (kit) => {
    // Obtendo dados de atividade da rede da blockchain Celo
    const contract = new kit.web3.eth.Contract(abi, contractAddress);
    const networkActivity = await contract.methods.getNetworkActivity().call();
    return networkActivity;
  };

  const processNetworkActivity = (networkActivity) => {
    // Processando dados de atividade da rede para o formato desejado para o gráfico
    const processedData = {
      labels: ['Rótulo 1', 'Rótulo 2', 'Rótulo 3'],
      datasets: [
        {
          label: 'Atividade da Rede',
          data: [500, 1000, 1500], // Substitua pelos dados processados
          backgroundColor: 'rgba(75,192,192,0.4)',
          borderColor: 'rgba(75,192,192,1)',
          borderWidth: 2,
        },
      ],
    };
    return processedData;
  };

  return (
    <div className="App">
      <h1>Painel de Análise da Blockchain Celo</h1>

      <div className="chart-container">
        <h2>Volume de Transações</h2>
        <Line data={transactionVolumeData} />
      </div>

      <div className="chart-container">
        <h2>Tempos de Confirmação de Blocos</h2>
        <Bar data={blockConfirmationTimeData} />
      </div>

      <div className="chart-container">
        <h2>Atividade da Rede</h2>
        <Line data={networkActivityData} />
      </div>
    </div>
  );
}

export default App;

Aqui está um link para o repositório contendo a base de código.

Seguindo essas etapas, você deverá conseguir executar o painel localmente e visualizar os dados da blockchain. No entanto, é importante observar que a base de código fornecida no tutorial serve como ponto de partida e você pode precisar personalizá-la e estendê-la com base em seus outros requisitos específicos e na criatividade.Antes de executar a aplicação, certifique-se de executar o comando npm start para iniciar o servidor de desenvolvimento com recarregamento em tempo real. Você pode acessar o projeto React abrindo o URL fornecido em seu navegador da Web.

Conclusão

Neste tutorial, exploramos como construir um painel de análise visual na blockchain Celo usando React.js e Web3.js. Aprendemos como buscar dados da blockchain em tempo real, integrá-los aos componentes do React.js e criar visualizações dinâmicas para fornecer informações valiosas sobre a atividade da blockchain Celo. Isso permite que os usuários interessados acompanhem tendências, analisem padrões e compreendam melhor o desempenho da blockchain Celo. Ao seguir este tutorial, você terá as habilidades básicas para construir um painel de análise visual na blockchain Celo. Agora você pode aplicar esses conceitos e técnicas para analisar e visualizar dados de outras blockchains ou estender a funcionalidade do painel para atender a qualquer uma de suas necessidades específicas.

Sobre o Autor

ADEWALE EMMANUEL é um entusiasta de criptomoedas e um criador de conteúdo para a Web 3.0. Ele se dedica à missão de ajudar organizações com projetos potenciais da blockchain a criar conteúdo educacional para atrair e interessar as pessoas em infraestruturas financeiras descentralizadas futuras.

Conecte-se com ele no Twitter.

Artigo escrito por 9Manueldre22. Traduzido por Marcelo Panegali.