Con Web3, es posible crear aplicaciones descentralizadas en una red de cadena de bloques o blockchain, lo que otorga a los usuarios la propiedad total de sus propios datos. La red blockchain utiliza contratos inteligentes o smart contracts para manejar toda la lógica de backend de las aplicaciones descentralizadas. Vamos a ver como integrar Web3 en aplicaciones Vue.
Como la red blockchain programable más popular, Ethereum permite a los desarrolladores crear y manipular aplicaciones descentralizadas (DApps), finanzas descentralizadas (DeFi), contratos inteligentes y tokens no fungibles (NFT).
En este artículo, cubriremos los conceptos básicos del uso de Web3 en aplicaciones Vue, incluido el proceso de instalación y la interacción con smart contracts. Para seguir este artículo, necesitará lo siguiente:
- Conocimientos del de Vue
- Comprensión básica de Web3
- Familiaridad con los contratos inteligentes de Solidity
- Conocimiento de cómo implementarlos
Tabla de contenidos
Entendiendo Blockchain y Smart Contracts
¿Qué es Web3?
Web3 es una nueva generación de Internet que se basa en la tecnología blockchain, que promueve la descentralización y la economía basada en tokens. Las llamadas a contratos inteligentes y el envío de transacciones constituyen la mayoría de las interacciones en una red de cadena de bloques.
¿Qué son los smart contracts?
Un contrato inteligente es una pieza de software autoejecutable que se aloja dentro de una red blockchain. La cadena de bloques ejecuta un contrato inteligente tan pronto como se implementa. Cuando se ejecuta el contrato, crea interfaces que las DApps utilizan para ampliar su funcionalidad.
Considere el siguiente smart contract de Solidity:
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.8.0;
contract Contract {
string private text;
function speak() public view returns (string memory) {
return text;
}
function changeText(string memory newText) public {
text = newText;
}
}
Cuando implementa el contrato anterior en la red blockchain, crea dos métodos de interfaz, speak, que devuelve una cadena de texto, y changeText, que cambia la cadena que devuelve speak.
Puedes echar un vistazo al artículo «Entendiendo Blockchain y Smart Contracts» para más detalle.
Integrar Web3 en aplicaciones Vue
- Enlace al repositorio github: https://github.com/jdzuri/web3-vue
Todo el código de este artículo está en un repositorio github que puede clonar para facilitar el seguimiento de este artículo.
Configuración del proyecto
Se asume que ya tiene el CLI Vue instalado de forma global sino ejecute el siguiente comando:
npm install -g @vue/cli
Si ya tiene un proyecto de Vue listo para la integración, puede omitir esta sección. Si no lo hace, cree el proyecto usando el siguiente comando para el administrador de paquetes npx:
npx vue create web3-vue
o si usa el gestor de paquetes yarn entonces:
yarn vue create web3-vue
En las indicaciones del menú, seleccione Vue3 aunque podría también seleccionar Vue2. No importa cuál elijas porque puedes integrar Web3 en ambos de la misma manera.
Después de crear el proyecto, escriba el siguiente código en su archivo App.vue:
<template>
<div>
<!-- connect-wallet button is visible if the wallet is not connected -->
<button v-if="!connected">Connect wallet</button>
<!-- call-contract button is visible if the wallet is connected -->
<button v-if="connected">Call contract</button>
{{ contractResult }}
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
connected: false,
contractResult: '',
}
},
}
</script>
Aquí, tenemos dos botones: el primero es para conectar un monedero o wallet y el segundo es para llamar a un método de contrato inteligente o smart contract.
El botón call contract queda oculto hasta que el usuario conecta su wallet a la aplicación web. Nuestra aplicación utiliza la variable de estado connected para guardar el estado de conexión del wallet.
Configurando Web3
En el directorio raíz del proyecto, ejecute el siguiente comando para instalar el paquete Web3 usando npm:
npm install web3 --save # or yarn add web3
Después de instalar el paquete, importamos Web3 al archivo App.vue y ejecutamos el proyecto para probar su compatibilidad:
...
<script>
import Web3 from 'web3'
export default {
name: 'App',
…
Si no recibe ningún mensaje de error aparte de Web3 is imported but never used, Web3 es compatible con su entorno de trabajo. Pero, si se muestran otros errores, debe cambiar a una versión anterior de Vue. Surgen problemas de compatibilidad con Web3 con el módulo Webpack 5, que utiliza Vue 3.
En caso de error, cambiamos import Web3 from ‘web3’ por import Web3 from 'web3/dist/web3.min.js'
Conectando nuestro wallet
MetaMask es una aplicación que permite a los usuarios almacenar y conectar sus monederos a aplicaciones Web3. Metamask se puede instalar en todos los principales navegadores. Al conectar su billetera a un sitio web, un usuario puede hacer lo siguiente:
- Comprar y vender tokens en un sitio web
- Administrar activos digitales en una red blockchain
- Realizar transacciones a cuentas en un sitio web
- Interactuar con contratos inteligentes en una red blockchain
Cuando instala la extensión MetaMask en su navegador, la extensión crea un objeto window.ethereum. Las aplicaciones Web3 usan el objeto window.ethereum para acceder al monedero del usuario y conectarse a la red Ethereum.
En nuestro caso vamos a usar el wallet que viene integrado en el navegador web Brave.
El método window.ethereum.request() solicita al usuario que conecte su wallet MetaMask:
ethereum.request({ method: 'eth_requestAccounts' })
Podemos usar este indicador para registrar un evento de conexión de wallet en nuestro botón de conexión. Agregue el siguiente código a su archivo App.vue:
<template>
<div>
<!-- "connect" click event is registered -->
> <button v-if="!connected" @click="connect">Connect wallet</button>
<button v-if="connected">Call contract</button>
{{ contractResult }}
</div>
</template>
<script>
import Web3 from 'web3/dist/web3.min.js';
export default {
name: 'App',
data() {
return {
connected: false,
contractResult: '',
};
},
methods: {
connect: function () {
// this connects to the wallet
if (window.ethereum) { // first we check if metamask is installed
window.ethereum.request({ method: 'eth_requestAccounts' }).then(() => {
this.connected = true; // If users successfully connected their wallet
});
}
}
}
};
</script>
Cuando el usuario hace clic en el botón connect wallet, aparece un mensaje de MetaMask que le permite seleccionar las cuentas que desea conectar. Después de que el usuario conecte su wallet, la variable de estado connected en el archivo App.vue se establece a true.
Interactuar con los smart contracts desplegados
Los contratos inteligentes implementados crean interfaces con las que interactúan las aplicaciones Web3. Para acceder a estas interfaces, debemos proporcionar a Web3 la ABI, una descripción de la interfaz del contrato inteligente y la dirección del contrato, la ubicación del contrato en la red Ethereum.
Antes de escribir este artículo, implementé un contrato inteligente en la red de prueba de Rinkeby. Usaré su ABI y dirección en el siguiente ejemplo, pero si ya tiene un contrato inteligente implementado, puede usar la dirección y el ABI de ese contrato en lugar de los que se incluyen aquí.
Para interactuar con contratos implementados, cree una instancia de Web3 usando el objeto window.ethereum:
let web3 = new Web3(window.ethereum);
Luego, cree una referencia al contrato implementado usando su ABI y dirección:
let contract = new web3.eth.Contract(abi, contractAddress)
Después de inicializar el contrato, puede interactuar con él. Si el contrato tiene un método de interfaz llamado greet, lo llamamos usando el siguiente código:
contract.methods.greet().call()
Ahora, modificaremos el botón call contract para llamar a un contrato con el método greet de su contrato implementado:
<button v-if="connected" @click="callContract">Call contract</button>
A continuación, cree un método callContract en el objeto Vue al que llama el botón call contract:
callContract: function () {
// method for calling the contract method
let web3 = new Web3(window.ethereum);
let contractAddress = '0xC0B2D76aB95B7E31E241ce713ea1C72d0a50588e';
let abi = JSON.parse(`[{"inputs": [],"stateMutability": "nonpayable","type": "constructor"},{"inputs": [],"name": "greet","outputs": [{"internalType": "string","name": "","type": "string"}],"stateMutability": "view","type": "function"}]`);
let contract = new web3.eth.Contract(abi, contractAddress);
contract.methods.greet().call()
.then(result => this.contractResult = result);
}
El método callContract atenderá al evento de click del botón y llamará al método greet en el contrato inteligente implementado. App.vue queda como sigue:
<template>
<div>
<!-- "connect" click event is registered -->
<button v-if="!connected" @click="connect">Connect wallet</button>
<button v-if="connected" @click="callContract">Call contract</button>
{{ contractResult }}
</div>
</template>
<script>
import Web3 from 'web3/dist/web3.min.js';
export default {
name: 'App',
data() {
return {
connected: false,
contractResult: '',
};
},
methods: {
connect: function () {
// this connects to the wallet
if (window.ethereum) { // first we check if metamask is installed
window.ethereum.request({ method: 'eth_requestAccounts' }).then(() => {
this.connected = true; // If users successfully connected their wallet
});
}
},
callContract: function () {
// method for calling the contract method
let web3 = new Web3(window.ethereum);
let contractAddress = '0xC0B2D76aB95B7E31E241ce713ea1C72d0a50588e';
let abi = JSON.parse(`[{"inputs": [],"stateMutability": "nonpayable","type": "constructor"},{"inputs": [],"name": "greet","outputs": [{"internalType": "string","name": "","type": "string"}],"stateMutability": "view","type": "function"}]`);
let contract = new web3.eth.Contract(abi, contractAddress);
contract.methods.greet().call().then(result => this.contractResult = result);
}
}
};
</script>
Ahora ejecutamos el proyecto, con el comando npm run serve en nuestro caso, y accedemos mediante el navegador en el que tenemos Metamask o un navegador con wallet como Brave a la url http://localhost:8080/.
Después de que el usuario conecte su wallet y llame al contrato, la aplicación debería verse como la imagen a continuación:
Conclusión
En este artículo, aprendimos a usar Vue para crear una aplicación Web3 usando la red de cadena de bloques Ethereum, conectar un wallet e interactuar con contratos inteligentes.
Como puede ver, integrar Web3 en una aplicación Vue es bastante sencillo siempre que esté familiarizado con Solidity. Web3 ofrece importantes beneficios para la privacidad y la propiedad de los datos, y exploramos algunas de las herramientas y conceptos que conforman este proceso, como los contratos inteligentes.
Espero que el artículo «Integrar Web3 en aplicaciones Vue» te haya sido de ayuda ❤️