Configurar Web3.js para usar la cadena de bloques de Ethereum en JavaScript

En este tutorial, veremos cómo empezar a usar Web3.js (opens in a new tab) para interactuar con la cadena de bloques de Ethereum. Web3.js se puede usar tanto en el frontend como en el backend para leer datos de la cadena de bloques o realizar transacciones e incluso desplegar contratos inteligentes.

El primer paso es incluir Web3.js en su proyecto. Para usarlo en una página web, puede importar la biblioteca directamente usando una CDN como JSDeliver.

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

Si prefiere instalar la biblioteca para usarla en su backend o en un proyecto frontend que utilice un proceso de compilación, puede instalarla usando npm:

npm install web3 --save

Luego, para importar Web3.js en un script de Node.js o en un proyecto frontend con Browserify, puede usar la siguiente línea de JavaScript:

const Web3 = require("web3")

Ahora que hemos incluido la biblioteca en el proyecto, necesitamos inicializarla. Su proyecto debe poder comunicarse con la cadena de bloques. La mayoría de las bibliotecas de Ethereum se comunican con un nodo a través de llamadas RPC. Para iniciar nuestro proveedor de Web3, crearemos una instancia de Web3 pasando como constructor la URL del proveedor. Si tiene un nodo o una instancia de ganache ejecutándose en su computadora (opens in a new tab), se verá así:

const web3 = new Web3("http://localhost:8545")

Si desea acceder directamente a un nodo alojado, puede encontrar opciones en nodos como servicio.

const web3 = new Web3("https://cloudflare-eth.com")

Para probar que configuramos correctamente nuestra instancia de Web3, intentaremos recuperar el número del último bloque usando la función getBlockNumber. Esta función acepta un callback como parámetro y devuelve el número de bloque como un número entero.

var Web3 = require("web3")
const web3 = new Web3("https://cloudflare-eth.com")

web3.eth.getBlockNumber(function (error, result) {
  console.log(result)
})

Si ejecuta este programa, simplemente imprimirá el número del último bloque: la cima de la cadena de bloques. También puede usar llamadas a funciones await/async para evitar anidar callbacks en su código:

async function getBlockNumber() {
  const latestBlockNumber = await web3.eth.getBlockNumber()
  console.log(latestBlockNumber)
  return latestBlockNumber
}

getBlockNumber()

Puede ver todas las funciones disponibles en la instancia de Web3 en la documentación oficial de Web3.js (opens in a new tab).

La mayoría de las bibliotecas de Web3 son asíncronas porque, en segundo plano, la biblioteca realiza llamadas JSON-RPC al nodo, el cual devuelve el resultado.

Si está trabajando en el navegador, algunas billeteras inyectan directamente una instancia de Web3 y debería intentar usarla siempre que sea posible, especialmente si planea interactuar con la dirección de Ethereum del usuario para realizar transacciones.

Aquí está el fragmento de código para detectar si una billetera MetaMask está disponible e intentar habilitarla si lo está. Más adelante le permitirá leer el saldo del usuario y habilitarlo para validar las transacciones que le gustaría que realizara en la cadena de bloques de Ethereum:

if (window.ethereum != null) {
  state.web3 = new Web3(window.ethereum)
  try {
    // Solicitar acceso a la cuenta si es necesario
    await window.ethereum.enable()
    // Cuentas ahora expuestas
  } catch (error) {
    // El usuario denegó el acceso a la cuenta...
  }
}

Existen alternativas a Web3.js como Ethers.js (opens in a new tab) y también se usan comúnmente. En el próximo tutorial veremos cómo escuchar fácilmente los nuevos bloques entrantes en la cadena de bloques y ver qué contienen (opens in a new tab).