Tutorial Solidity: Criando um dApp Ethereum com Ethers.js

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.js com 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.