Aprenda a interagir com um contrato inteligente com Ethers.js
ÍNDICE
Neste tutorial, vamos para aprender a construir um dApp Ethereum básico com um frontend que interage com um contrato inteligente Solidity usando a biblioteca Ethers.js.
Este tutorial é uma continuação da série Solidity Tutorial . Se você é novo na escrita de contratos inteligentes Solidity, confira Como construir seu primeiro contrato inteligente antes de continuar com este artigo.
Introdução
Um contrato inteligente é uma função que é implantada e executada na blockchain somente quando uma condição específica é atendida. Existem algumas maneiras pelas quais podemos interagir com nosso contrato inteligente implantado no blockchain.
Uma maneira é usar a biblioteca Ethers.js para conectar nosso front-end dApp ao nosso contrato inteligente, que serve como back-end.
Neste artigo, vamos escrever e implantar um contrato inteligente que aceita o nome de um animal de estimação, o nome de seu dono e sua idade. Também recuperaremos os detalhes do animal de estimação do contrato inteligente usando uma função getter do nosso projeto de front-end.
Demo
Aqui está o vídeo de demonstração do dApp pet que vamos construir no final deste tutorial:
Pré requisitos
Antes de prosseguir com este tutorial, você deve ter:
- Conhecimento básico de HTML e CSS,
- Conhecimento de funções e DOM em JavaScript,
- uma compreensão básica do Solidity, que você pode encontrar aqui.
Outras tecnologias usadas neste tutorial incluem: biblioteca Ethers.js, Remix IDE e Metamask.
Construindo o dApp
Nosso projeto é dividido em duas partes: o back-end, no qual escreveremos e implantaremos nosso contrato inteligente Solidity na Goerli Testnet; e o front-end, onde construiremos nossa interface dApp com HTML e CSS e interagiremos com nosso contrato inteligente implantado usando JavaScript com Ethers.js.
Construindo o back-end
Nesta parte, vamos escrever e implantar nosso contrato inteligente Solidity na Goerli Testnet usando Remix IDE e Metamask.
Passo 1 - Solidity IDE (Remix)
O Remix IDE é um compilador Solidity baseado na web. Ele nos permite escrever, testar e implantar nosso contrato inteligente Solidity diretamente do nosso navegador, sem nenhuma configuração ou configuração.
Vamos usar o Remix IDE para escrever e implantar nosso contrato inteligente de pet.
Clique aqui para iniciar o Remix IDE no seu navegador:
Passo 2 - Escrevendo o contrato inteligente
Localize a contratos em "File Explorers" do Remix e crie um novo arquivo chamado Pet_Contract.sol:
Copie e cole o contrato inteligente Solidity abaixo, dentro do Pet_Contract.sol file:
// SPDX-License-Identifier: MIT
pragma solidity ^ 0.8.13;
// 1. Criando um novo contrato pet
contract Pet_Contract{
// 2. Declarando as variaveis de estado do contrato inteligente.
string public petName;
string public petOwner;
string public petAge;
// 3. Criando uma função setpet
function setPet(
string memory newPetName,
string memory newPetOwner,
string memory newPetAge
) public {
petName = newPetName;
petOwner = newPetOwner;
petAge = newPetAge;
}
// 4. Criando uma função de busca de pet
function getPet() public view returns (
string memory,
string memory,
string memory
){
return (petAge, petName, petOwner);
}
}
O contrato inteligente acima é uma modificação do primeiro contrato inteligente que escrevemos aqui. Estamos criando uma setPetque recebe três parâmetros: petName, petOwnere petAge, e os armazena na memória quando invocamos a setPet.
A função getPetretornará os valores atuais dos estados petAge, petNamee petOwnerem nossa memória de contrato inteligente.
As explicações completas de detalhamento do contrato inteligente podem ser encontradas aqui.
Etapa 3 - Compilando o contrato inteligente
Siga as etapas abaixo para compilar seu contrato inteligente Solidity no Remix IDE:
- Certifique-se de salvar seu arquivo de origem com ctrl + s.
- Em seguida, navegue até a seção "Solidity Compiler":
- Selecione a versão do compilador que corresponde à especificada em nosso contrato inteligente (se você não fizer isso, a verificação verde ficará vermelha): \
- Em seguida, salve seu arquivo e clique em no botão "Compile": \
Passo 4 - Obtendo Token Goerli Testnet
Agora, vamos implantar nosso contrato inteligente de estimação na rede Goerli Test, e precisamos de algum ETH falso para pagar a taxa de gas.
Siga as etapas abaixo para obter um token Goerli Testnet gratuito para sua carteira Metamask:
- Instale a Metamask se ainda não o fez.
- Em seguida, navegue até faucets.chain.link.
- Conecte-se com sua carteira Metamask: \
- Certifique-se de mudar para a rede Goerli Test em sua Metamask: \
- Resolva o captcha e clique no botão "Send 0.1 test ETH": \
- Aguarde a confirmação da transação: \
- Verifique seu Metamask para o novo saldo: \
\
Você pode conferir outros lugares para obter ETH grátis para desenvolvimento de dApp aqui.
Etapa 5 - Implantando o contrato inteligente
Agora que compilamos com sucesso nosso contrato inteligente (consulte a Etapa 3) e temos alguns tokens Goerli Testnet em nossa carteira Metamask, vamos implantar nosso contrato inteligente na rede de teste Goerli.
- Navegue até a seção "Deploy and Run Transactions": \
- Selecione "Injected Web3" como o ambiente: \
- Clique no botão "Deploy" para implantar nosso contrato inteligente na Goerli Testnet: \
- Você será solicitado a confirmar a taxa de gas de implantação do contrato:
- Se a implantação foi bem-sucedida, você verá o nome do nosso contrato inteligente na seção "Deployed Contracts", conforme mostrado abaixo: \
Etapa 6 - Testando o contrato inteligente
Nesta etapa, vamos testar e interagir com nosso contrato inteligente no IDE Remix.
- Clique na seta para baixo na
setPetpara expandir as caixas de entrada: \
- Preencha as caixas de entrada com os detalhes do seu pet e clique no botão "Transact": \
- Confirme a taxa do gas da transação: \
- Aguarde a confirmação da transação: \
- Clique na função
getPet:: \
\
Como mostrado acima, a getPet deve retornar um array com o nome do pet, o nome de seu dono e sua idade.
- Em seguida, clique em todos os botões "getter". Cada função getter deve retornar o valor de suas respectivas variáveis de estado, conforme mostrado abaixo: \
Nosso contrato inteligente Solidity está funcionando conforme o esperado. Você seguir e testar o contrato inteligente com um nome de pet diferente, nome do proprietário e idade.
Construindo o Front End
Nesta parte, vamos construir o front end do nosso dApp, que interage com nosso contrato inteligente usando Ethers.js.
O que é Ethers.js
Ethers.js é uma alternativa à biblioteca web3.js. É uma biblioteca JavaScript que permite aos desenvolvedores interagirem com a blockchain Ethereum.
Etapa 1 - Instalando o Ethers.js
A maneira mais rápida de trabalhar com o Ethers.js em nosso projeto é através da CDN do Ethers.js.
- Crie um novo index.html com o conteúdo abaixo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Importing css styles -->
<link rel="stylesheet" href="./index.css" />
<title>Pet dApp</title>
</head>
<body>
<!-- Importing Ethers.js script -->
<script
src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"
type="application/javascript"
></script>
<!-- Importing javascript file -->
<script src="./index.js"></script>
</body>
</html>
No código acima , estamos importando o script Ethers.js CDN, nosso CSS e os arquivos JavaScript que criaremos mais tarde.
Seu arquivo JavaScript deve ser importado após o script Ethers.js CDN.
Passo 2 - Construindo o Formulário do Pet
Nesta etapa, vamos criar um formulário que aceitará o nome do pet, o nome do dono e sua idade, bem como um botão "Submit" para enviar os detalhes para o nosso contrato inteligente.
Adicione as seguintes linhas de código dentro da tag body em seu index.html :
<section class="pet-form-section">
<section class="section-header">
<h1>Pet Form</h1>
</section>
<!-- Form -->
<form>
<label for="pet-name">Pet Name</label>
<input type="text" id="pet-name" />
<label for="pet-owner">Pet Owner</label>
<input type="text" id="pet-owner" />
<label for="pet-age">Pet Age</label>
<input type="number" id="pet-age" />
<input type="button" value="Submit" id="set-new-pet" />
</form>
</section>
Em seguida, crie um novo index.css e adicione o código abaixo:
/* Reseta o estilo do browser */
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial;
line-height: 1.5;
color: #333333;
display: flex;
justify-content: center;
flex-direction: column;
min-height: 100vh;
max-width: 500px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
.section-header{
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1rem;
background-color: #333333;
color: #ffffff;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
text-align: center;
}
/* Seção do formulário Pet */
form {
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
label {
font-size: 14px;
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
border: 1px solid #cccccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
input[type=button]{
border: 1px solid #333333;
background-color: #333333;
color: #fff;
cursor: pointer;
}
Nosso formulário de pet deve se parecer com isto no navegador:
Etapa 3 - Construindo a seção de detalhes do pet
Nesta etapa, vamos criar a detalhes do pet que exibirá as informações do animal de estimação atual armazenadas em nossa memória de contrato inteligente.
Após o formulário pet, adicione o código abaixo em seu index.html :
<!-- seção de detalhes do pet -->
<section class="pet-detail-section">
<section class="section-header">
<h1>Pet Details</h1>
</section>
<section class="pet-details">
<h3 class="pet-detail-heading">
Pet Name:
<span class="pet-data pet-detail-name"></span>
</h3>
<h3 class="pet-detail-heading">
Pet Owner:
<span class="pet-data pet-detail-owner"></span>
</h3>
<h3 class="pet-detail-heading">
Pet Age:
<span class="pet-data pet-detail-age"></span>
</h3>
</section>
<section class="section-footer">
<button class="show-pet-form-btn">Set New Pet</button>
<button class="refresh-pet-details-btn">Refresh</button>
</section>
</section>
<!-- seção de detalhes do pet -->
<section class="pet-detail-section">
<section class="section-header">
<h1>Pet Details</h1>
</section>
<section class="pet-details">
<h3 class="pet-detail-heading">
Pet Name:
<span class="pet-data pet-detail-name"></span>
</h3>
<h3 class="pet-detail-heading">
Pet Owner:
<span class="pet-data pet-detail-owner"></span>
</h3>
<h3 class="pet-detail-heading">
Pet Age:
<span class="pet-data pet-detail-age"></span>
</h3>
</section>
<section class="section-footer">
<button class="show-pet-form-btn">Set New Pet</button>
<button class="refresh-pet-details-btn">Refresh</button>
</section>
</section>
Em seguida, atualize seu index.css com o código abaixo:
/* seção de detalhes do pet */
.pet-detail-section{
display: none; /* hidden by default */
}
.pet-details {
margin-bottom: 10px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.pet-detail-heading {
font-size: 16px;
margin-bottom: 10px;
font-weight: 500;
letter-spacing: 0.5px;
}
.section-footer{
display: flex;
gap: 12px;
}
.show-pet-form-btn, .refresh-pet-details-btn{
width: 50%;
padding: 10px;
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
}
.show-pet-form-btn{
background-color: #4CAF50;
}
.refresh-pet-details-btn{
background-color: #00a8ff;
}
No código acima, os detalhes do pet ficarão no hiddenpor padrão; ele ficará visível apenas se os detalhes do pet estiverem definidos em nosso contrato inteligente. Implementaremos a lógica na próxima etapa.
Nossa seção de detalhes do pet ficará assim:
- O botão "Set new pet" retornará o usuário de volta à formulário do pet que criamos anteriormente.
- A confirmação da transação Goerli pode demorar alguns segundos. Podemos atualizar os detalhes do pet clicando no botão "Refresh".
Etapa 4 - Criando a lógica do signatário
Nesta etapa, solicitaremos que o usuário conecte seu endereço de carteira Metamask com nosso dApp antes que ele possa interagir com nosso contrato inteligente. O usuário será então identificado como o signatário, usando seu endereço de carteira.
- Crie um novo
index.jscom o conteúdo abaixo:
// 1. Declaração de variável global para armazenar a instância web3
let PetContract;
// 2. Configuração do endereço do contrato e ABI
const Pet_Contract_Address = "";
const Pet_Contract_ABI = [];
/* 3. Prompt user to sign in to MetaMask */
const provider = new ethers.providers.Web3Provider(window.ethereum, "goerli");
provider.send("eth_requestAccounts", []).then(() => {
provider.listAccounts().then((accounts) => {
const signer = provider.getSigner(accounts[0]);
/* 3.1 Criação da instância do contrato inteligente de Pet */
PetContract = new ethers.Contract(
Pet_Contract_Address,
Pet_Contract_ABI,
signer
);
});
});
No código acima:
1. Estamos tornando a variável PetContract global porque vamos reutilizá-la em outras funções.
2. Forneça seu endereço de contrato inteligente e ABI emPet_Contract_Address e Pet_Contract_ABI.
- Você pode obter o código ABI do contrato inteligente na seção "Solidity Compiler" do Remix: \
- Navegue até a seção "Deploy & Run Transactions" do Remix para copiar o endereço do contrato inteligente: \
3. Estamos solicitando que o usuário se conecte à rede Goerli em sua carteira MetaMask, onde nosso contrato inteligente é implantado (consulte Backend - Etapa 5).
Quando um usuário visita nosso formulário de pet, ele verá a tela abaixo:
Depois que um endereço de carteira foi conectado, agora podemos acessa-lo no setPet e getPet do nosso contrato inteligente, por meio da PetContract.
Etapa 5 - Criando a SetNewPetfunção
Nesta etapa, vamos criar uma setNewPetque enviará os detalhes do formulário de pet para o nosso contrato inteligente, usando a PetContract.setPet() do nosso contrato inteligente (consulte Backend - Etapa 2).
Atualize seu index.js com o código abaixo:
// 4. Criando variáveis para o re-uso dos elementos DOM
const petFormSection = document.querySelector(".pet-form-section");
const showPetFormBtn = document.querySelector(".show-pet-form-btn");
const petSection = document.querySelector(".pet-detail-section");
const setPetButton = document.querySelector("#set-new-pet");
const refreshBtn = document.querySelector(".refresh-pet-details-btn");
/* 5. Função para setar os detalhes do Pet */
const setNewPet = () => {
// atualizar botão de valor
setPetButton.value = "Setting Pet...";
/* 5.1 Pega os inputs do formulário pet */
const petNameInput = document.querySelector("#pet-name");
const petOwnerInput = document.querySelector("#pet-owner");
const petAgeInput = document.querySelector("#pet-age");
// 5.2 pegando valores dos inputs
petName = petNameInput.value;
petOwner = petOwnerInput.value;
petAge = petAgeInput.value;
/* 5.3 Seta os detalhes do pet no contrato inteligente */
PetContract.setPet(petName, petOwner, petAge)
.then(() => {
// valor do botão de atualização
setPetButton.value = "Pet Set...";
/* 5.4 Limpa o formuário */
petNameInput.value = "";
petOwnerInput.value = "";
petAgeInput.value = "";
// valor do botão de atualização
setPetButton.value = "Set Pet";
/* 5.5 Seta os detalhes do pet no contrato inteligente */
getCurrentPet();
})
.catch((err) => {
// Se um erro ocorrer , mostra a mensagem de erro
setPetButton.value = "Set Pet";
alert("Error setting pet details" + err.message);
});
};
/* Função para setar detalhes do pet quando clicar no botão */
setPetButton.addEventListener("click", setNewPet);
Etapa 6 - Criando a função getCurrentPet
Nesta etapa, vamos criar a getCurrentPet para buscar os últimos detalhes do pet em nossa memória de contrato inteligente, usando a PetContract.getPet() de nosso contrato inteligente (consulte Backend - Etapa 2 ).
Atualize seu index.js com o código abaixo:
/* 6. função para pegar os detalhes do pet */
const getCurrentPet = async () => {
setPetButton.value = "Getting Pet...";
/* 6.1 Pega detalhes do pet no contrato inteligente */
const pet = await PetContract.getPet();
/* 6.2 Mostra a seção de detalhes do pet
6.2.1 Esconde o formulário de pet no DOM */
petSection.style.display = "block";
petFormSection.style.display = "none";
/* 6.3 Pet é um array com 3 strings [petName, petOwner, petAge] */
const petName = pet[0];
const petOwner = pet[1];
const petAge = pet[2];
/* 6.4 Mostra os detalhes do pet no DOM */
document.querySelector(".pet-detail-name").innerText = petName;
document.querySelector(".pet-detail-owner").innerText = petOwner;
document.querySelector(".pet-detail-age").innerText = petAge;
};
Por fim, adicionaremos uma função para permitir que o usuário retorne ao formulário do pet e outra função para atualizar os detalhes do pet.
Adicione as seguintes linhas de código ao seu index.js :
/* 7. Função para mostrar o formulário pet quando se clica no botão */
showPetFormBtn.addEventListener("click", () => {
petSection.style.display = "none";
petFormSection.style.display = "block";
setPetButton.value = "Submit";
});
/* 8. Função para atualizar os detalhes do pet */
refreshBtn.addEventListener("click", (e) => {
e.target.innerText = "Refreshing...";
getCurrentPet().then(() => {
e.target.innerText = "Refreshed";
setTimeout(() => {
e.target.innerText = "Refresh";
}, 2000);
});
});
Testando nosso dApp
Agora que nosso dApp está pronto para o código, podemos prosseguir para testar nossas implementações, conforme mostrado abaixo:
O código-fonte completo deste projeto pode ser encontrado neste repositório.
Conclusão
Neste tutorial, aprendemos como interagir com um contrato inteligente Solidity a partir de um aplicativo front-end usando Ether.js.
Este artigo faz parte do blog Hashnode Web3, onde uma equipe de escritores selecionados está trazendo novos recursos para ajudá-lo a descobrir o universo da web3. Consulte-nos para saber mais sobre NFTs, DAOs, blockchains e o futuro descentralizado.
Web3SoliditySmart ContractsEthereumBlockchain
Este artigo foi escrito por Ayodele Samuel Adebayo e traduzido por Diogo Jorge. O artigo original pode ser encontrado aqui.
Top comments (0)