Conectando la blockchain con el navegador: Web3.js y Ether.js

Desarrollar un contrato inteligente es como desarrollar cualquier backend. Solo es el 50% del trabajo de un desarrollador blockchain, o de un equipo de desarrollo. El siguiente paso es desarrollar el otro 50%, el front-end de la aplicación que se comunique con la blockchain e interactúe con el contrato.

Conexión y comunicación con un contrato inteligente

La conexión con una blockchain para acceder a la información o interactuar con un smart contract requiere, en primer lugar, de las típicas tecnologías para el desarrollo de cualquier front-end: HTML, CSS, Javascript. Además de eso, una parte fundamental para lograrlo es un provider, mejor conocido como una wallet.

Parámetros necesarios para establecer la conexión

Billeteras como Metamask crean el enlace entre el front-end y una blockchain. No solo es importante la misma para el despliegue de un contrato y el pago de las comisiones, también requeriremos de una wallet en la aplicación web3 para interactuar con cualquier contrato.

Otra parte esencial para lograr dicha comunicación, es un cliente o librería que nos facilite la tarea. La comunicación con cualquier blockchain se realiza por medio de un protocolo llamado JSON RPC, en lugar de utilizar HTTP o HTTPS como en el desarrollo de software tradicional.

Las dependencias para lograr conectarnos con cualquier blockchain basada en EVM son Web3.js o Ether.js. Siendo web3.js la más adoptada por la comunidad y la que más tiempo lleva en el mercado, pero ether.js no se queda atrás y ha ganado mucha popularidad en los últimos años.

Programando la conexión con Ethereum

Para esta demostración de conexión con una blockchain, utilizaremos ether.js. Ingresa al sitio oficial de Ether.js y encontrarás múltiples formas de instalar esta dependencia. Por supuesto que puedes hacerlo con NPM. Pero, para este sencillo ejemplo, utilizaremos un simple CDN en nuestro archivo HTML.

Utilizaremos un trivial archivo .html en donde importaremos el CDN y escribiremos el código necesario de la dapp:

```

```

Observa que necesitarás la siguiente información: El CONTRACT_ABI lo encontrarás en los archivos luego de compilar el smart contract, se trata de un arreglo con toda la información necesaria para comunicarnos con dicho contrato. Luego de desplegar el contrato, habrás obtenido el CONTRACT_ADDRESS del mismo, también lo necesitaremos.

Wallets como Metamask inyectan en el objeto window del navegador el provider con toda la lógica que necesitarás para comunicarte con, en este caso, Ethereum. Lo encontrarás en window.ethereum. De no tener instalado Metamask como extensión del navegador, la aplicación no funcionará.

Especifica la red a la cual quieres comunicarte. En este caso, nos conectaremos a la red de prueba de Goerli. Seguido de la lógica para capturar en el código, el acceso a tu wallet Metamask para firmar las transacciones posteriormente e instanciar el contrato con la dirección y el ABI.

Finalmente, encontrarás una función para cada método del contrato al cual nos estamos comunicando. En este caso, tenemos dos funciones, una para obtener el valor del contador y otra para incrementarlo. Al tratarse de una comunicación con una blockchain, observa que deben ser métodos asíncronos, como si de una típica API se tratara.

Esta es toda la lógica Javascript que necesitarás. El siguiente paso será crear algunos simples botones en el HTML para ejecutar cada función y lograr la interacción con el contrato.

Conclusión

En este ejemplo, nos encontramos utilizando HTML y Javascript de manera muy simple para que logres ver que, con unas pocas líneas de código, es posible comunicarnos con Ethereum. Podrás desarrollar aplicaciones más sofisticadas con Angular, React o Vue, posteriormente a aprender lo básico sobre el uso de estas tecnologías del lado del front-end.

Contribución creada por: Kevin Fiorentino (Platzi Contributor).