Utilice la biblioteca de JavaScript Web3.js para establecer una interfaz perfecta para interactuar con la cadena de bloques de Ethereum.
Los contratos inteligentes son los componentes principales de las aplicaciones Web3. Para habilitar las funcionalidades en las aplicaciones Web3, es importante poder interactuar convenientemente con las funciones especificadas en un contrato inteligente. Puede usar un lenguaje popular como JavaScript y la conocida biblioteca Web3.js para establecer esta comunicación.
Introducción a la biblioteca Web3.js
Web3.js es una biblioteca de JavaScript que ofrece una interfaz para interactuar con la cadena de bloques de Ethereum. Simplifica el proceso de construcción. aplicaciones descentralizadas (DApps) al proporcionar métodos y herramientas para conectarse a los nodos de Ethereum, enviar transacciones, leer datos de contratos inteligentes y manejar eventos.
Web3.js une el desarrollo tradicional y la tecnología de cadena de bloques, lo que le permite crear aplicaciones descentralizadas y seguras utilizando la sintaxis y la funcionalidad familiar de JavaScript.
Cómo importar Web3.js en un proyecto de JavaScript
Para usar Web3.js en su proyecto Node, primero debe instalar la biblioteca como una dependencia del proyecto.
Instale la biblioteca ejecutando este comando dentro de su proyecto:
npm install web3or
yarn add web3
Después de instalar Web3.js, ahora puede importar la biblioteca dentro de su proyecto Node como un módulo ES:
const Web3 = require('web3');
Interactuar con contratos inteligentes implementados
Para demostrar correctamente cómo puede interactuar con un contrato inteligente implementado en la red Ethereum mediante Web3.js, creará una aplicación web que funcione con un contrato inteligente implementado. El propósito de la aplicación web será una boleta de votación simple donde una billetera puede emitir votos por un candidato y registrar esos votos.
Para comenzar, cree un nuevo directorio para su proyecto e inicialícelo como un proyecto de Node.js:
npm init
Instale Web3.js en el proyecto como una dependencia y cree simples índice.html y estilos.css archivos dentro de la raíz del proyecto.
Importe el siguiente código en el índice.html archivo:
html>
<html>
<head>
<title>Voting Apptitle>
<linkrel="stylesheet"href="styles.css" />
head>
<body>
<h1>Voting Apph1><divclass="candidates">
<divclass="candidate">
<spanclass="name">Candidate Aspan>
<buttonclass="vote-btn"data-candidate="A">Votebutton>
<spanclass="vote-count">0 votesspan>
div>
<divclass="candidate">
<spanclass="name">Candidate Bspan>
<buttonclass="vote-btn"data-candidate="B">Votebutton>
<spanclass="vote-count">0 votesspan>
div>
<divclass="candidate">
<spanclass="name">Candidate Cspan>
<buttonclass="vote-btn"data-candidate="C">Votebutton>
<spanclass="vote-count">0 votesspan>
div>
div>
<scriptsrc="main.js">script>
body>
html>
Dentro de estilos.css archivo, importe el siguiente código:
/* styles.css */
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 30px;
}
.candidates {
display: flex;
justify-content: center;
margin-top: 50px;
}
.candidate {
margin: 20px;
}
.name {
font-weight: bold;
}
.vote-btn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.vote-count {
margin-top: 5px;
}
A continuación se muestra la interfaz resultante:
Ahora que tiene una interfaz básica para comenzar, cree una contrato carpeta en la raíz de su proyecto para contener el código de su contrato inteligente.
El IDE de Remix proporciona una forma sencilla de escribir, implementar y probar contratos inteligentes. Utilizará Remix para implementar su contrato en la red Ethereum.
Navegar a remix.ethereum.org y crea un nuevo archivo bajo el contratos carpeta. Puede nombrar el archivo prueba_contrato.sol.
El .Sol extensión indica que se trata de un archivo Solidity. La solidez es uno de los lenguajes más populares. para escribir contratos inteligentes modernos.
Dentro de este archivo, escribe y compila tu código Solidity:
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract Voting {
mapping(string => uint256) private voteCounts;
functionvote(string memory candidate) public{
voteCounts[candidate]++;
};
functiongetVoteCount(string memory candidate) publicviewreturns (uint256){
return voteCounts[candidate];
};
};
Cuando Remix compila el código de Solidity, también crea una ABI (interfaz binaria de aplicación) en formato JSON. El ABI define la interfaz entre un contrato inteligente y una aplicación cliente.
Especificaría lo siguiente:
- Los nombres y tipos de funciones y eventos que expone el contrato inteligente.
- El orden de los argumentos de cada función.
- Los valores de retorno de cada función.
- El formato de datos de cada evento.
Para obtener el ABI, cópielo desde el IDE de Remix. Crear un contrato.abi.json archivo dentro contrato dentro de la raíz de su proyecto y pegue el ABI dentro del archivo.
Debe continuar e implementar su contrato en una red de prueba utilizando una herramienta como Ganache.
Comunicarse con su contrato inteligente implementado mediante Web3.js
Su contrato ahora se implementó en una red de prueba de Ethereum. Puede comenzar a trabajar en la interacción con el contrato implementado desde su interfaz de interfaz de usuario. Crear un principal.js archivo en la raíz de su proyecto. Importará Web3.js y su archivo ABI guardado en principal.js. Este archivo hablará con su contrato inteligente y será responsable de leer los datos del contrato, llamar a sus funciones y manejar las transacciones.
A continuación se muestra cómo su principal.js el archivo debe verse:
const Web3 = require('web3');
const contractAddress = "CONTRACT_ADDRESS"; // Replace with the actual deployed contract address
import contractAbi from'../contract/contract.abi.json'// Create an instance of web3 using the injected provider (e.g., MetaMask)
const web3 = new Web3(window.ethereum);// Create a contract instance using the contract address and ABI
const votingContract = new web3.eth.Contract(contractAbi, contractAddress);// Retrieve the candidate elements from the DOM
const candidates = document.querySelectorAll('.candidate');// Function to handle voting for a candidate
asyncfunctionvote(candidate) {
try {
// Call the 'vote' function of the smart contract
await votingContract.methods.vote(candidate).send({ from: web3.eth.defaultAccount });// Update the vote count in the UI
const voteCount = await votingContract.methods.getVoteCount(candidate).call();
const voteCountElement = document.querySelector(`[data-candidate="${candidate}"] .vote-count`);
voteCountElement.textContent = `${voteCount} votes`;
} catch (error) {
console.error(error);
// Handle error cases, such as invalid transactions or network issues
}
}
// Add click event listeners to the vote buttons
candidates.forEach(candidate => {
const candidateName = candidate.getAttribute('data-candidate');
const voteBtn = candidate.querySelector('.vote-btn');
voteBtn.addEventListener('click', () => {
vote(candidateName);
});
});
El bloque de código anterior utiliza Web3.js para hablar con las funciones de su contrato inteligente desde su interfaz web. Esencialmente, está utilizando funciones de JavaScript para llamar a las funciones de Solidity desde principal.js.
En el código, reemplaza 'DIRECCIÓN_CONTRATO' con la dirección de contrato real implementada. El IDE de Remix le proporcionará esto en la implementación.
Esto es lo que está sucediendo en el código:
- Actualice la selección de elementos DOM en función de su estructura HTML. En este ejemplo, se supone que cada elemento candidato tiene un datos-candidato atributo que corresponde al nombre del candidato.
- Una instancia de la Web3 Luego, la clase se crea utilizando el proveedor inyectado desde el ventana.ethereum objeto.
- El votacioncontrato variable crea una instancia de contrato usando la dirección del contrato y ABI.
- El votar función maneja el proceso de votación. llama al votar función del contrato inteligente usando VotingContract.methods.vote (candidato).send(). Envía una transacción al contrato, registrando el voto del usuario. El recuento de votos entonces la variable llama al getVoteCount función del contrato inteligente para recuperar el recuento de votos actual para un candidato específico. Luego actualizará el recuento de votos en la interfaz de usuario para que coincida con los votos recuperados.
Recuerda incluir este principal.js archivo en su archivo HTML usando un etiqueta.
Además, asegúrese de que la dirección del contrato y el ABI sean correctos y que tenga la manejo de errores en su lugar.
Rol de JavaScript en la creación de DApps
JavaScript tiene la capacidad de interactuar con contratos inteligentes utilizados en aplicaciones descentralizadas. Esto une el mundo Web3 con un lenguaje de programación principal utilizado en la creación de aplicaciones Web2, lo que ayuda a facilitar la adopción de Web3. Con Web3.js, los desarrolladores de Web2 pueden pasar a crear aplicaciones como una plataforma de redes sociales Web3.