Faça uso da biblioteca JavaScript Web3.js para estabelecer uma interface perfeita para interagir com o blockchain Ethereum.
Contratos inteligentes são os principais blocos de construção para aplicativos Web3. Para habilitar funcionalidades em aplicativos Web3, é importante poder interagir com as funções especificadas em um contrato inteligente de maneira conveniente. Você pode usar uma linguagem popular como JavaScript e a conhecida biblioteca Web3.js para estabelecer essa comunicação.
Introdução à biblioteca Web3.js
Web3.js é uma biblioteca JavaScript que oferece uma interface para interagir com o blockchain Ethereum. Simplifica o processo de construção aplicativos descentralizados (DApps) fornecendo métodos e ferramentas para conectar-se a nós Ethereum, enviar transações, ler dados de contratos inteligentes e lidar com eventos.
O Web3.js une o desenvolvimento tradicional e a tecnologia blockchain, permitindo que você crie aplicativos descentralizados e seguros usando a sintaxe e a funcionalidade familiares do JavaScript.
Como importar Web3.js para um projeto JavaScript
Para usar o Web3.js em seu projeto Node, primeiro você precisa instalar a biblioteca como uma dependência do projeto.
Instale a biblioteca executando este comando dentro do seu projeto:
npm install web3or
yarn add web3
Depois de instalar o Web3.js, agora você pode importar a biblioteca dentro do seu projeto Node como um módulo ES:
const Web3 = require('web3');
Interagindo com contratos inteligentes implantados
Para demonstrar adequadamente como você pode interagir com um contrato inteligente implantado na rede Ethereum usando Web3.js, você criará um aplicativo da Web que funciona com o contrato inteligente implantado. O objetivo do aplicativo da web será uma cédula de votação simples, onde uma carteira pode votar em um candidato e registrar esses votos.
Para começar, crie um novo diretório para seu projeto e inicialize-o como um projeto Node.js:
npm init
Instale o Web3.js no projeto como uma dependência e crie index.html e estilos.css arquivos dentro da raiz do projeto.
Importe o seguinte código no index.html arquivo:
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 arquivo, importe o seguinte 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;
}
Abaixo está a interface resultante:
Agora que você tem uma interface básica para começar, crie um contrato pasta na raiz do seu projeto para conter o código do seu contrato inteligente.
O Remix IDE fornece uma maneira simples de escrever, implantar e testar contratos inteligentes. Você usará o Remix para implantar seu contrato na rede Ethereum.
Navegar para remix.ethereum.org e crie um novo arquivo sob o contratos pasta. Você pode nomear o arquivo test_contract.sol.
O .Sol extensão indica que este é um arquivo Solidity. Solidity é uma das linguagens mais populares para escrever contratos inteligentes modernos.
Dentro deste arquivo, escrever e compilar seu 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];
};
};
Quando o Remix compila o código do Solidity, ele também cria uma ABI (Application Binary Interface) no formato JSON. A ABI define a interface entre um contrato inteligente e um aplicativo cliente.
Ele especificaria o seguinte:
- Os nomes e tipos de funções e eventos expostos pelo contrato inteligente.
- A ordem dos argumentos para cada função.
- Os valores de retorno de cada função.
- O formato de dados de cada evento.
Para obter a ABI, copie-a de dentro do Remix IDE. Criar uma contract.abi.json arquivo dentro contrato dentro da raiz do seu projeto e cole a ABI dentro do arquivo.
Você deve prosseguir e implantar seu contrato em uma rede de teste usando uma ferramenta como o Ganache.
Comunicando-se com seu contrato inteligente implantado usando Web3.js
Seu contrato agora foi implantado em uma rede de teste Ethereum. Você pode começar a interagir com o contrato implantado em sua interface de interface do usuário. Criar uma main.js arquivo na raiz do seu projeto. Você importará o Web3.js e o arquivo ABI salvo para main.js. Este arquivo irá conversar com seu contrato inteligente e será responsável por ler os dados do contrato, chamar suas funções e tratar as transações.
Abaixo está como o seu main.js arquivo deve parecer:
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);
});
});
O bloco de código acima utiliza Web3.js para se comunicar com suas funções de contrato inteligente a partir de sua interface da web. Essencialmente, você está usando funções JavaScript para chamar funções Solidity de main.js.
No código, substitua 'CONTRACT_ADDRESS' com o endereço real do contrato implantado. O Remix IDE fornecerá isso na implantação.
Aqui está o que está acontecendo no código:
- Atualize a seleção de elementos DOM com base em sua estrutura HTML. Neste exemplo, assume-se que cada elemento candidato tem um dados-candidato atributo que corresponde ao nome do candidato.
- Uma instância do Web3 classe é então criada usando o provedor injetado do window.ethereum objeto.
- O votoContrato A variável cria uma instância de contrato usando o endereço do contrato e a ABI.
- O voto A função lida com o processo de votação. Ele chama o voto função do contrato inteligente usando voteContract.methods.vote (candidato).enviar(). Ele envia uma transação para o contrato, registrando o voto do usuário. O voteCount variável então chama o getVoteCount função do contrato inteligente para recuperar a contagem de votos atual para um candidato específico. Em seguida, ele atualizará a contagem de votos na interface do usuário para corresponder aos votos recuperados.
Lembre-se de incluir isso main.js arquivo em seu arquivo HTML usando um tag.
Além disso, certifique-se de que o endereço do contrato e a ABI estejam corretos e que você tenha manipulação de erros no local.
Papel do JavaScript na construção de DApps
O JavaScript tem a capacidade de interagir com contratos inteligentes usados em aplicativos descentralizados. Isso reúne o mundo Web3 com uma linguagem de programação principal usada na criação de aplicativos Web2, o que ajuda a facilitar a adoção do Web3. Com o Web3.js, os desenvolvedores Web2 podem fazer a transição para a criação de aplicativos como uma plataforma de mídia social Web3.