Um guia para iniciantes sobre como interagir com contratos inteligentes usando JavaScript
Os contratos inteligentes servem como os blocos de construção fundamentais dos aplicativos WEB3. Para que os aplicativos WEB3 executem suas funções pretendidas, é imperativo que os usuários possam se comunicar facilmente com as funções descritas em um contrato inteligente. Isso pode ser alcançado por meio da utilização de uma linguagem de programação amplamente usada, como JavaScript, juntamente com a biblioteca Web3.js estabelecida, para facilitar a interação.
Introdução à biblioteca Web3.js
Web3.js é uma biblioteca JavaScript que fornece uma interface conveniente para interface com o blockchain Ethereum. Essa ferramenta facilita o desenvolvimento de aplicativos descentralizados (DApps), oferecendo uma variedade de funcionalidades, como conexão com nós Ethereum, envio de transações, acesso a dados de contratos inteligentes e tratamento de eventos.
O Web3.js serve como uma ponte entre o desenvolvimento de software convencional e a tecnologia blockchain, permitindo a criação de aplicativos descentralizados e seguros utilizando a sintaxe e os recursos familiares do JavaScript.
Como importar Web3.js para um projeto JavaScript
Para incorporar a funcionalidade do Web3.js em um projeto Node.js, é necessário adicionar a biblioteca como um componente necessário por meio de um processo de instalação específico do projeto.
npm install web3
or
yarn add web3
Após a instalação do Web3.js, é possível integrar a biblioteca dentro de um projeto Node como um módulo Es (ECMAScript).
const Web3 = require('web3');
Interagindo com contratos inteligentes implantados
Para mostrar a capacidade de interagir com um contrato inteligente implantado na rede Ethereum utilizando Web3.js, será criado um aplicativo baseado na Internet que funcionará em conjunto com o referido contrato inteligente. O objetivo deste aplicativo é fornecer um sistema de votação direto no qual uma carteira digital pode enviar votos para um determinado candidato, e esses votos devem ser registrados e armazenados no contrato inteligente.
Prossiga com a configuração inicial do seu projeto criando um novo diretório e
npm init
Integre Web3.js como dependências no projeto e
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Voting App</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Voting App</h1>
<div class="candidates">
<div class="candidate">
<span class="name">Candidate A</span>
<button class="vote-btn" data-candidate="A">Vote</button>
<span class="vote-count">0 votes</span>
</div>
<div class="candidate">
<span class="name">Candidate B</span>
<button class="vote-btn" data-candidate="B">Vote</button>
<span class="vote-count">0 votes</span>
</div>
<div class="candidate">
<span class="name">Candidate C</span>
<button class="vote-btn" data-candidate="C">Vote</button>
<span class="vote-count">0 votes</span>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
O seguinte código é importado dentro do arquivo “styles.css”:
/* 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:
Depois de estabelecer um ponto de entrada inicial, é aconselhável estabelecer um diretório de “contrato” dentro do diretório principal do projeto para acomodar o código pertencente ao seu contrato inteligente.
O Remix Integrated Development Environment (IDE) oferece uma plataforma acessível para compor, implantar e testar contratos inteligentes. É através deste aplicativo que você divulgará seu contrato na rede Ethereum.
Navegue até remix.ethereum.org e crie um novo arquivo na pasta de contratos. Você pode nomear o filetest_contract.sol.
O sufixo de nome de arquivo.sol significa que ele pertence a um arquivo Solidity, que é uma das linguagens de programação amplamente usadas para criar contratos inteligentes avançados na era atual.
Neste documento, recomenda-se redigir e
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract Voting {
mapping(string => uint256) private voteCounts;
function vote(string memory candidate) public {
voteCounts[candidate]\+\+;
};
function getVoteCount(string memory candidate) public view returns (uint256){
return voteCounts[candidate];
};
};
Ao processar o código do Solidity pelo Remix, ele gera uma Application Binary Interface (ABI) no formato JSON. Essa ABI serve como um limite definidor entre um contrato inteligente e seu aplicativo cliente associado.
Ele especificaria o seguinte:
A divulgação da designação e categoria de procedimentos e eventos que são exibidos pelo contrato inteligente.
A disposição dos parâmetros dentro de uma determinada função é considerada crucial para determinar sua funcionalidade e desempenho.
⭐ Os valores de retorno de cada função.
⭐ O formato de dados de cada evento.
Obtenha a ABI extraindo-a de dentro do Remix IDE e crie um novo arquivo chamado “contract.abi.json” dentro do diretório “contract” da pasta raiz do seu projeto. Feito isso, basta colar a ABI no arquivo recém-criado.
Posso sugerir que você considere a divulgação de seu contrato em uma rede de teste por meio da utilização de um instrumento como o Ganache para fins de teste.
Comunicação com seu contrato inteligente implantado usando Web3.js
A implantação do seu contrato em uma rede de teste Ethereum foi executada com sucesso. Agora você pode começar a interface com o contrato implantado por meio de sua interface de usuário. Para isso, crie um arquivo “main.js” no diretório raiz do seu projeto e importe o Web3.js e o arquivo ABI salvo para ele. Esse arquivo servirá como o principal ponto de comunicação entre seu contrato inteligente e seu aplicativo, facilitando a recuperação de dados do contrato, a execução de suas funções e o processamento de transações.
Seu arquivo main.js deve ser estruturado da seguinte forma:
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
async function vote(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 mencionado emprega o uso de Web3.js, uma biblioteca JavaScript, para se comunicar com as funções de contrato inteligente na rede Ethereum por meio da interface da web. Isso é obtido aproveitando as funções do JavaScript para invocar as funções do Solidity de dentro do arquivo main.js.
Forneça a seguinte declaração de maneira mais refinada: Substitua o espaço reservado CONTRACT\\_ADDRESS pelo endereço do contrato real implantado, pois o Remix IDE deve oferecer essas informações na implantação.
Aqui está o que está acontecendo no código:
Refletindo sobre a arquitetura HTML apresentada, é prudente alterar a seleção de elementos DOM de acordo com os componentes estruturais da página web. Por exemplo, cada elemento de candidatura deve possuir um atributo de dados-candidato correlato que carrega a nomenclatura do aspirante.
O processo de criação de uma instanciação da classe Web3 envolve a utilização do provedor Ethereum que foi injetado no objeto window.ethereum, que serve como base para estabelecer comunicação com a rede Ethereum.
A variável voteContract é utilizada para estabelecer um objeto de contrato incorporando seu endereço e ABI.
A função de votação executa o processo de votação chamando a função de votação do contrato inteligente usando o método voteContract.methods.vote(candidate).send(). Este método envia uma transação para o contrato, notificando-o do voto do usuário. Em seguida, a função voteCount recupera a contagem de votos atual para um determinado candidato do contrato inteligente, utilizando a função getVoteCount. Por fim, a contagem de votos exibida na interface do usuário é atualizada para se alinhar à contagem de votos recuperada.
Inclua o arquivo main.js em seu arquivo HTML utilizando uma tag de script, como segue:
Certifique-se de que o endereço do contrato e a ABI sejam precisos e implemente mecanismos apropriados de tratamento de erros para mitigar possíveis problemas.
Papel do JavaScript na construção de DApps
Os aplicativos descentralizados utilizam contratos inteligentes e o JavaScript tem a capacidade de se comunicar com esses contratos. Essa integração entre o domínio Web3 e a linguagem de desenvolvimento Web2 amplamente usada promove a proliferação de tecnologias Web3 por meio dos esforços dos desenvolvedores Web2. Com o uso do Web3.js, os desenvolvedores familiarizados com o desenvolvimento Web2 podem facilmente fazer a transição para a criação de aplicativos Web3, como uma plataforma de mídia social baseada em Web3.