Configure web3.js para usar la cadena de bloques de Ethereum en JavaScript

En este tutorial, veremos cómo comenzar con web3.js(opens in a new tab) para interactuar con la cadena de bloques de Ethereum. Web3.js se puede utilizar tanto en frontends como en backends para leer datos de la cadena de bloques o realizar transacciones, e incluso implementar contrato inteligentes.

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

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

Si prefiere instalar la biblioteca para usarla en su proyecto de backend o un frontend que use 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 de frontend de Browserify, puede utilizar la siguiente línea de JavaScript:

1const Web3 = require("web3")
 Copiar

Ahora que incluimos la biblioteca en el proyecto, necesitamos inicializarla. Su proyecto necesita 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 la computadora(opens in a new tab), se verá así:

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

Si le gustaría acceder directamente a un nodo alojado, puede encontrar opciones de nodos como servicio.

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

Para probar que nuestra instancia de Web3 se haya configurado correctamente, trataremos de recuperar el último número de bloque usando la función getBlockNumber. Esta función acepta una devolución de llamada como parámetro y devuelve el número de bloque como un número entero.

1var Web3 = require("web3")
2const web3 = new Web3("https://cloudflare-eth.com")
3
4web3.eth.getBlockNumber(function (error, result) {
5  console.log(result)
6})
 Copiar

Si ejecuta este programa, simplemente imprimirá el último número de bloque: la parte superior de la cadena de bloques. También puede usar llamadas a la función await/async para evitar anidar devoluciones de llamada en el código:

1async function getBlockNumber() {
2  const latestBlockNumber = await web3.eth.getBlockNumber()
3  console.log(latestBlockNumber)
4  return latestBlockNumber
5}
6
7getBlockNumber()
 Copiar

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 Web3 son asíncronas porque, en segundo plano, la biblioteca realiza llamadas JSON RPC al nodo que devuelve el resultado.

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

Este es el fragmento de código para detectar si una billetera de MetaMask está disponible e intentar activarla si lo está. Más tarde, le permitirá leer el saldo del usuario y le permitirá a este validar las transacciones que le gustaría hacerle en la cadena de bloques de Ethereum:

1if (window.ethereum != null) {
2  state.web3 = new Web3(window.ethereum)
3  try {
4    // Request account access if needed
5    await window.ethereum.enable()
6    // Accounts now exposed
7  } catch (error) {
8    // User denied account access...
9  }
10}
Mostrar todo
 Copiar

Existen alternativas a web3.js como Ethers.js(opens in a new tab) y son muy usadas. En el siguiente tutorial, veremos cómo escuchar fácilmente nuevos bloques entrantes en la cadena de bloques y ver lo que contienen(opens in a new tab).