Construyendo un Tablero Visual de Analíticas para la Blockchain Celo usando React.js y Web3.js: un Tutorial Paso a Paso

Introduccion

Mientras la adopción de la tecnología blockchain sigue creciendo, hay una necesidad de herramientas que puedan analizar y visualizar datos blockchains de forma efectiva para entenderlos mejor y tomar decisiones. En este tutorial, los desarrolladores aprenderán a cómo crear un tablero de visualización de datos, dinámico e interactivo, que proporciona información en tiempo real dentro de la blockchain Celo. Aprovechando el poder de React.js y web3.js, estarás equipado con los conocimientos técnicos para desarrollar un tablero amigable con el usuario, que muestre varias métricas blockchain y permita a los usuarios monitorear y analizar la actividad en la blockchain Celo.

También exploraremos cómo buscar datos de la blockchain en tiempo real, integrarlos con los componentes de React.js y crear visualizaciones dinámicas que proporcionen conocimientos valiosos dentro de la actividad de la blockchain Celo. Aprovechando el proveedor Web3 de Celo, serás capaz de buscar y actualizar datos en tiempo real, asegurando que tu tablero refleje la información más reciente.

A través de este tutorial, explorarás varias métricas blockchain como el volumen de transacciones, los tiempos de confirmación de los bloques y la actividad de la red. Aprenderás a cómo diseñar visualizaciones intuitivas que presentan estas métricas en una forma interactiva e informativa. El tablero que construirás le permitirá a los usuarios rastrear tendencias, analizar patrones y ganar un conocimiento profundo sobre el performance de la blockchain de Celo.

Si eres un desarrollador experimentado, y buscas expandir tu conocimiento sobre la tecnología blockchain, o un novato, interesado en explorar el potencial de la visualización de datos en el espacio de la blockchain, este tutorial te proporcionará con herramientas y experiencia práctica. Al final de este tutorial, estarás bien equipado para construir un tablero totalmente funcional que permita a los usuarios visualizar y analizar la actividad en la blockchain Celo, empoderándote para que tomes decisiones informadas, basados en datos en tiempo real. Así que, vamos a profundizar y a embarcarnos en este camino emocionante sobre construir un tablero visual de analíticas en la blockchain Celo usando React.js y web3.js.

Configurando el proyecto

Vamos a continuar configurando el proyecto para construir el tablero visual de analíticas para la blockchain Celo. Aquí está una guía paso a paso para ayudarte a comenzar.

Primero, vamos a configurar el entorno de trabajo instalando Node.js en nuestro aparato. Visita la página web oficial de Node.js y descarga la última versión estable que sea compatible con tu sistema operativo.

Para comenzar, en el directorio del proyecto ejecuta el siguiente comando para iniciar un nuevo proyecto Node.js y luego instalaremos react:

npm init -y

Esto creará un nuevo archivo (package.json) para nuestro proyecto.
Instala los paquetes React y React DOM en nuestro proyecto.

npm install react react-dom

Ahora vamos a configurar un nuevo proyecto React.js en el directorio deseado, donde el proyecto será creado y navegaremos al directorio del proyecto:

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

Aquí, tenemos un proyecto React.js básico configurado y listo para ser personalizado para nuestro tablero visual de analíticas.

Segundo, instalamos dependencias adicionales y todos los paquetes necesarios para trabajar con Celo y la visualización de datos desde el directorio del proyecto y lo conectamos a la blockchain Celo. Estos paquetes incluyen web3.js para la interacción de la blockchain Celo, @celo/contractkit para la funcionalidad específica de Celo, chart.js para la visualización de datos y react-chartjs-2 como el envoltorio React para chart.js:

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

Conéctate a la blockchain Celo. Creamos un nuevo archivo (celo.js) y el directorio (src) de nuestro proyecto e importamos las dependencias necesarias

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

Estamos utilizando la biblioteca web3.js para que se conecte a la red blockchain de Celo:

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

Nota:

La nueva Web3() crea una nueva instancia del objeto Web3, el cual actúa como nuestra conexión a la blockchain Celo.

El parámetro “https:// /alfajores-forno.celo-testnet.org” especifíca la URL de la red Celo a la que queremos conectarla.

Para el propósito de este tutorial, nos conectaremos a la red de prueba de Celo. Las redes de pruebas (testnets) son redes separadas que simulan la red principal para propósitos de desarrollo y de prueba. Siempre podrás reemplazar la URL con la URL de la red Celo apropiada dependiendo de tus necesidades, bien sea a la red de prueba o la mainnet.

ContractKit.netKitFromWeb3() es una función proporcionada por el paquete @celo/contractkit el cual toma la instancia web3 como el parámetro e inicializa una nueva instancia de ContractKit.

ContractKites una biblioteca utilitaria proporcionada por Celo que simplifica la interacción con la blockchain Celo. Abstrae alguna de las complejidades y proporciona funciones y herramientas útiles para interactuar con los contratos y hacer operaciones de performance comunes en la blockchain Celo. ¿Inteligente?

Tercero, manejamos el Procesamiento de Datos y la Visualización:

Crearemos un nuevo archivo index.js, el cual sirve como un punto de entrada para nuestra aplicación React: es responsable de hacer el componente del renderizado de la App y montarlo al DOM. Llamando a ReactDOM.render(, document.getElementById(‘root’)), estaremos instruyendo a React a que renderize el componente de la App e insertarlo al elemento con la “raíz” del ID de tu archivo HTML. Básicamente, el archivo index.js es necesario para arrancar y comenzar nuestra aplicación React. Importa el componente de la App desde el archivo App.js y lo renderiza en el DOM.

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

Creamos un archivo HTML llamado index.html en el mismo directorio y añadimos el siguiente bloque:

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

El tag script es añadido al archivo HTML el cual apunta al archivo agrupado de JavaScript generado por el agrupador. Cuando el archivo HTMl es cargado a un navegador web, el código JavaScript agrupado será ejecutado, renderizando la aplicación React en el elemento “div” especificado con el ID de la “raíz”.

Ejecutando el comando bundler, el código JavaScript desde App.js y sus dependencias serán agrupados en un solo archivo (es decir, bundle.js) que puede ser referenciado en el archivo HTML para que la aplicación funcione correctamente.

Instalando Babel y Webpack: Babel es una toolchain que ayuda a convertir el código JavaScript moderno a versiones retrocompatibles. Webpack es un agrupador que agrupa tu código y sus dependencias. Instala Babel y Webpack junto a los plugins y cargadores necesarios, ejecutando el siguiente comando:

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

Crea un nuevo archivo llamado babel.config.js en el directorio raíz de tu proyecto.

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

Este archivo de configuración especifica los presets para que Babel compile el código moderno JavaScript y el sintaxis de React JSX.

Crea un nuevo archivo llamado webpack.config.js en el directorio raíz de tu proyecto.

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 archivo de configuración especifica el punto de entrada de tu aplicación (index.js), el archivo output (bundle.js) y el uso del cargador de Babel para compilar el código de React.

Instala las dependencias necesarias:

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"
},

Esto nos permitirá ejecutar (npm start) para comenzar el servidor de desarrollo con la carga en vivo y (npm run build) crear una producción agrupada lista.

Con esta configuración en lugar, ahora puedes ejecutar nmp start para comenzar el desarrollo del servidor y acceder a tu aplicación React. El código será compilado y agrupado usando Babel y Webpack, permitiéndote escribir un código React y JavaScript moderno mientras mantiene compatibilidad con navegadores antiguos.

Crea un nuevo archivo llamado “App.js”

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

// Actualiza los siguientes valores con tus detalles de la blockchain Celo.
const rpcEndpoint = 'https://alfajores-forno.celo-testnet.org';
const contractAddress = '0xYourContractAddress';
const abi = []; // Actualiza con el ABI de tu 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);

      // Busca los datos del volumen de transacción
      const transactionVolume = await fetchTransactionVolume(kit);
      const processedTransactionVolume = processTransactionVolume(transactionVolume);
      setTransactionVolumeData(processedTransactionVolume);

      // Busca los tiempos de los datos de confirmación del bloque
      const blockConfirmationTimes = await fetchBlockConfirmationTimes(kit);
      const processedBlockConfirmationTimes = processBlockConfirmationTimes(blockConfirmationTimes);
      setBlockConfirmationTimeData(processedBlockConfirmationTimes);

       // Busca datos de la actividad de la red
      const networkActivity = await fetchNetworkActivity(kit);
      const processedNetworkActivity = processNetworkActivity(networkActivity);
      setNetworkActivityData(processedNetworkActivity);
    } catch (error) {
      console.error('Error fetching data from Celo blockchain:', error);
    }
  };

  const fetchTransactionVolume = async (kit) => {
    // Busca volúmen de transacción de datos desde la blockchain Celo
    const contract = new kit.web3.eth.Contract(abi, contractAddress);
    const transactionVolume = await contract.methods.getTransactionVolume().call();
    return transactionVolume;
  };
    const processTransactionVolume = (transactionVolume) => {
// Procesa el volumen de transacción de datos en tu formato elegido para el gráfico
const processedData = {
  labels: ['Label 1', 'Label 2', 'Label 3'],
  datasets: [
    {
      label: 'Transaction Volume',
      data: [1000, 2000, 3000], // Swapping with your processed data
      backgroundColor: 'rgba(75,192,192,0.4)',
      borderColor: 'rgba(75,192,192,1)',
      borderWidth: 2,
    },
  ],
};
return processedData;
};

const fetchBlockConfirmationTimes = async (kit) => {
// Busca la confirmación del tiempo de los datos del bloque desde la blockchain Celo
const contract = new kit.web3.eth.Contract(abi, contractAddress);
const blockConfirmationTimes = await contract.methods.getBlockConfirmationTimes().call();
return blockConfirmationTimes;
};

const processBlockConfirmationTimes = (blockConfirmationTimes) => {
// Procesa la confirmación de datos del bloque en tu formato elegido para el gráfico
const processedData = {
  labels: ['Label 1', 'Label 2', 'Label 3'],
  datasets: [
    {
      label: 'Block Confirmation Times',
      data: [10, 20, 30], // Swapping with processed data
      backgroundColor: 'rgba(75,192,192,0.4)',
      borderColor: 'rgba(75,192,192,1)',
      borderWidth: 2,
    },
  ],
};
return processedData;
};

const fetchNetworkActivity = async (kit) => {
// Busca datos de la actividad de la red desde la blockchain Celo
const contract = new kit.web3.eth.Contract(abi, contractAddress);
const networkActivity = await contract.methods.getNetworkActivity().call();
return networkActivity;
};

const processNetworkActivity = (networkActivity) => {
// Procesa los datos de la actividad de la red en el formato elegido para el gráfico
const processedData = {
  labels: ['Label 1', 'Label 2', 'Label 3'],
  datasets: [
    {
      label: 'Network Activity',
      data: [500, 1000, 1500], // Swap with processed data
      backgroundColor: 'rgba(75,192,192,0.4)',
      borderColor: 'rgba(75,192,192,1)',
      borderWidth: 2,
    },
  ],
};
return processedData;
};

return (
<div className="App">
  <h1>Celo Blockchain Analytics Dashboard</h1>

  <div className="chart-container">
    <h2>Transaction Volume</h2>
    <Line data={transactionVolumeData} />
  </div>

  <div className="chart-container">
    <h2>Block Confirmation Times</h2>
    <Bar data={blockConfirmationTimeData} />
  </div>

  <div className="chart-container">
    <h2>Network Activity</h2>
    <Line data={networkActivityData} />
  </div>
</div>
);
} 

export default App; 

Aquí hay un enlace al repositorio que tiene el código base.

Siguiendo estos pasos, deberías ser capaz de ejecutar el dashboard localmente y visualizar los datos de la blockchain. Sin embargo, es importante tomar en cuenta que el codebase proporcionado en el tutorial sirve como un punto de partida y puede que necesites personalizar y extenderlo, basados en los requisitos en específico y la creatividad.

Antes de ejecutar la aplicación, asegúrate de ejecutar el comando npm start para iniciar el servidor de desarrollo con la carga en vivo. Puedes acceder al proyecto React, abriendo la URL proporcionada en tu navegador web.

Conclusión

En este tutorial, exploramos cómo construir un tablero visual de analíticas en la blockchain Celo usando React.js y web3.js. Aprendimos cómo buscar datos de la blockchain en vivo, integrarlo con componentes React.js y crear visualizaciones dinámicas para proporcionar información valiosa en la actividad de la blockchain Celo y permitir a los usuarios interesados rastrear tendencias, analizar patrones y ganar un conocimiento profundo sobre la performance de la blockchain Celo. Siguiendo este tutorial, tienes los conocimientos básicos en construir un tablero visual de analíticas en la blockchain Celo. Ahora puedes aplicar estos conceptos y técnicas para analizar y visualizar datos donde otras blockchains o extender la funcionalidad del tablero para que satisfaga cualquiera de tus necesidades.

Sobre el autor

ADEWALE EMMANUEL

Es un cripto entusiasta y un creador de contenido de la Web 3.0. Él es devoto a la misión de ayudar organizaciones con potenciales proyectos blockchain para crear contenido educacional para atraer e interesar a las personas sobre las infraestructuras de las finanzas descentralizadas.

Conéctate con él en Twitter

Este artículo es una traducción de Adewale Emmanuel, hecha por Gabriella Martínez. Puedes encontrar el artículo original aquí
Sería genial escucharte en nuestro Discord, puedes contarnos tus ideas, comentarios, sugerencias y dejarnos saber lo que necesitas.
Si prefieres puedes escribirnos a @web3dev_es en Twitter.