Configura web3.js para utilizar el blockchain de Ethereum en JavaScript

En este tutorial, veremos cómo comenzar con web3.js(opens in a new tab) para interactuar con el blockchain de Ethereum. Web3.js se puede utilizar tanto en frontends como en backends para leer datos del blockchain, realizar transacciones e incluso implementar smart contracts.

El primer paso es incluir web3.js en tu proyecto. Para usarlo en una página web, puedes 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 prefieres instalar la biblioteca para usarla en un proyecto de backend o frontend que usa compilación, puedes instalarla usando npm:

npm install web3 --save

Luego, para importar Web3.js a una secuencia de comandos de Node.js o a un proyecto de frontend de Browserify, puedes utilizar la siguiente línea de JavaScript:

1const Web3 = require("web3")
 Copiar

Ahora que incluimos la librería en el proyecto, necesitamos inicializarla. Tu proyecto necesita ser capaz de comunicarse con 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 el URL del proveedor. Si tienes un nodo o una instancia de ganache ejecutándose en tu computadora(opens in a new tab), se verá así:

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

Si te gustaría acceder directamente a un nodo rentado, puedes encontrar opciones en nodos como servicio..

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

Para probar que nuestra instancia Web3 se ha 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 ejecutas este programa, simplemente imprimirá el último número de bloque: la parte superior del blockchain. También puedes usar las llamadas de función await/async para evitar anidar las devoluciones de llamadas 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

Puedes ver todas las funciones disponibles en la instancia 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ás trabajando en el navegador, algunas billeteras inyectan directamente una instancia Web3 y deberías tratar de usarla cuando sea posible, especialmente si planeas interactuar con la dirección Ethereum del usuario para hacer transacciones.

Aquí está el fragmento para detectar si una billetera MetaMask está disponible y probar activarla si lo está. Más tarde, te permitirá leer el saldo del usuario y permitirle validar las transacciones que te gustaría que hicieran en el blockchain 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 los nuevos bloques entrantes en el blockchain y ver lo que contienen(opens in a new tab).