Como executar Ganache em um navegador

Ao desenvolver projetos Web3, te ajudará muito ter uma devnet na blockchain local para teste. Ganache é uma das ferramentas mais populares para isso no ecossistema Ethereum e parte do Truffle. O Ganache permite que você configure uma blockchain local com configurações diferentes para testar minuciosamente seus contratos inteligentes antes da implantação.

Ver a saída de uma blockchain local no terminal ajuda você a entender como seu projeto se comportará em um ambiente ativo. A capacidade de definir a saída para variáveis ​​para manipular algum código de front-end é ainda mais útil. Alguns usuários podem não saber que você pode fazer isso executando o Ganache em seu navegador.

Este artigo explora como executar o Ganache em seu navegador e destaca três ótimos novos recursos que facilitam o desenvolvimento de seus projetos Web3.

Ganache no navegador

A execução de uma instância de blockchain local para testar seus contratos inteligentes é uma etapa essencial no processo de desenvolvimento do Web3. Ao testar dessa maneira, você confirma que as coisas estão funcionando corretamente antes de usar um serviço de nó, como o Infura, para implantar seus contratos em uma rede de teste ou rede principal. Isso minimiza o risco de aumentar os limites diários e garante que você só precise implantar uma vez. Ganache é uma excelente ferramenta que simula a rede Ethereum e permite aos desenvolvedores:

• Fork de qualquer rede Ethereum sem esperar para sincronizar
• Estabeleça regras de mineração de bloco (instantâneo, sob demanda, intervalos)
• Personificar qualquer conta real sem precisar de suas chaves privadas
• Faça chamadas de função com suporte Ethereum JSON-RPC

No entanto, muitos que usam essa ferramenta podem não saber que, desde a v7.0.0.0, o Ganache também pode ser executado em seu navegador. A execução no navegador permite definir a saída da blockchain local para variáveis, que você pode usar para testar seu código de front-end. Esse processo visual ajuda você a entender como seus usuários irão interagir com seu projeto e também permite que você teste seu dapp totalmente offline (ao usar uma instância local).

Ao executar primeiro o Ganache no navegador e ajustar como seu dapp reage, você pode alternar facilmente o provedor para sua API de serviço de nó assim que as coisas estiverem funcionando conforme o esperado. Além disso, desde a atualização mais recente do Ganache (v7.3.2 no momento da redação), agora você pode bifurcar a rede principal Ethereum ao executar o Ganache no navegador. Isso permite que você interaja com contas e contratos reais por meio de seu código de front-end.

O projeto

Nesta seção, criaremos um contrato inteligente básico usando Truffle e sua extensão VS Code. Em seguida, primeiro implantaremos nosso contrato no Ganache por meio da linha de comando. Em seguida, criaremos um front-end simples para usar o Ganache no navegador e interagir com nosso contrato implantado.

Requisitos

Para este projeto, usaremos o seguinte:

• NodeJS / NPM
• Truffle & Ganache
• O Editor VS Code
• A Extensão Truffle for VS Code

Passo 1 – Instalação

Primeiro, podemos executar o comando node --version em nosso terminal para garantir que o NodeJS e o NPM estejam instalados corretamente em nossa máquina.

Em seguida, instalaremos Truffle e Ganache executando o seguinte comando:

npm install -g truffle ganache

Verificar o número da versão de Truffle e Ganache com truffle --version e ganache --version respectivamente, nos informará se ambas as ferramentas foram instaladas com sucesso.

A próxima etapa é instalar o VS Code, navegue até a guia Extensions no editor e procure por Truffle for VS Code.

Com tudo instalado, estamos prontos para começar a trabalhar no projeto.

Etapa 2 - Configurar o projeto

Com a extensão Truffle for VS Code, podemos criar facilmente um novo projeto Truffle por meio da paleta de comandos do VS Code. Pressione ctrl + shift + P no editor para abrir a paleta de comandos e digite truffle para ver uma lista de comandos que podemos usar. Selecione Truffle: New Solidity Project e em seguida crie projeto básico para criar um novo projeto na pasta desejada.

Isso cria um projeto inicializado com uma estrutura de pastas simples e um código de exemplo que podemos usar se desejarmos.

A capacidade de usar console.log em nosso código de contrato inteligente é outro grande novo recurso recentemente disponível para Ganache. Antes de criarmos o contrato inteligente para nosso projeto, vamos configurá-lo instalando o pacote necessário. Navegue até a pasta do projeto no terminal e digite o seguinte comando:

npm install @ganache/console.log

Passo 3 – Escreva o Contrato Inteligente

O contrato inteligente para o nosso projeto será básico para o qual podemos doar alguns ETH e solicitar para ver o saldo.

Na pasta de contratos, crie um novo arquivo e chame-o de SimpleContract.sol. Em seguida, preencha-o com o seguinte código de contrato inteligente:

// SPDX-License-Identifier: UNLICENSED

pragma solidity ^0.8.13;

import '@ganache/console.log/console.sol';

contract SimpleContract {

  constructor() {

    console.log('\n\n#################################################\n'

    '####         Now Deploying Contract          ####\n'

    '#################################################'

    );

  }

  function donate() public payable {

    console.log('Successfully Donated ', msg.value);

  }

  function getBalance() public view returns (uint256) {

    console.log("This contract's balance is:", address(this).balance);

    return address(this).balance;

  }

  // Necessário para receber pagamentos

  receive() external payable {}

}

O código em nosso contrato inteligente é relativamente simples. Ele exibe uma mensagem no console quando implantamos nosso contrato inteligente, fornece a funcionalidade de doar ETH, consultar o saldo e imprimir mensagens no console ao chamar as funções.

Etapa 4 – Implantar no Ganache

Após instalar o Truffle for VS Code Extension, podemos implantar facilmente clicando com o botão direito do mouse no arquivo de contrato inteligente e escolhendo Deploy Contracts. No entanto, se quisermos ver nossas mensagens de console, teremos que usar nosso próprio terminal em vez do integrado no VS Code. Isso pode mudar no futuro, mas, por enquanto, teremos que criar um script de migração simples para realizar a implantação.

Na pasta migrations , crie um novo script chamado 1_SimpleContract.js e insira o seguinte código:

const SimpleContract = artifacts.require("SimpleContract");

module.exports = function (deployer) {

  deployer.deploy(SimpleContract);

};

Em seguida, abra uma nova janela de terminal e inicie o Ganache:

ganache 

Esta janela de terminal é onde veremos nossas mensagens de console quando elas aparecerem. Agora temos duas janelas de terminal abertas: uma rodando Ganache e outra aberta na pasta do nosso projeto Truffle.

Na janela do terminal que está aberta no local do nosso projeto Truffle, digite o seguinte comando para iniciar a implantação:

truffle migrate --network development 

Se a implantação for bem-sucedida, podemos ver nossa mensagem de console impressa no terminal:

Excelente! Nosso contrato está ativo em nossa instância Ganache local! Vamos deixar o Ganache rodando por enquanto para podermos interagir com nosso contrato usando o navegador. Antes de chegarmos a isso, copie o contract address da saída no terminal onde digitamos o comando migrate. Usaremos esse endereço para apontar nosso front-end para nosso contrato inteligente.

Passo 5 – Construir o Front-end

5.a – Configuração

Para o front-end deste projeto, usaremos o React. Navegue até uma nova pasta vazia e digite:

npx create-react-app ganache-browser-test

Em seguida, instalaremos o Web3.JS para interagir facilmente com nosso contrato inteligente. Navegue até nossa nova pasta de projeto e instale o Web3.JS com este comando:

cd ganache-browser-test

npm install web3

Versões mais recentes de create-react-app não funcionam bem com Web3.JS, então precisamos instalar uma versão específica de React Scripts. Podemos fazer isso com este comando:

npm install --save-exact [email protected]

Finalmente, para usar o Ganache em nosso navegador, vamos instalá-lo diretamente como uma dependência:

npm install ganache

Como alternativa, você pode adicionar o link CDN no html para acessar o Ganache no navegador:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web/ganache.min.js"></script>

Antes de começarmos a trabalhar no código do front-end, precisamos criar um arquivo contendo a ABI do nosso contrato para podermos interagir com o nosso contrato inteligente. Podemos copiar esse arquivo diretamente do nosso projeto Truffle. Navegue até a pasta build/contracts em nosso projeto Truffle e copie o arquivo SimpleContract.json.

Em seguida, abra nosso projeto de front-end no editor e crie uma nova pasta chamada abi. Nessa pasta, cole o arquivo SimpleContract.json. A estrutura do arquivo para nosso front-end agora se parece com isso:

5.b – O Código Frontend

Com toda a configuração pronta, podemos começar a trabalhar em nosso front-end. Primeiro, abra o arquivo App.js na pasta src e substitua o código clichê por este:

import { useState } from 'react';

import './App.css';

import SimpleContract from './abi/SimpleContract.json';

const ganache = require('ganache');

const Web3 = require('web3');

const options = {}  

const provider = ganache.provider(options);

const web3 = new Web3('http://127.0.0.1:8545');  

const CONTRACT_ADDRESS = 'YOUR_CONTRACT_ADDRESS'  

const USER_ADDRESS = web3.utils.toChecksumAddress('YOUR_ACCOUNT_ADDRESS');

const contractInstance = new web3.eth.Contract(SimpleContract.abi, CONTRACT_ADDRESS);

const App = () => {

  const [contractBalance, setContractBalance] = useState(0);

  const donate = async () => {

    const donationAmount = document.querySelector('#donationAmount').value;

    const response = await contractInstance.methods.donate().send({

      from: USER_ADDRESS,

      value: web3.utils.toWei(donationAmount)

    });

    console.log('donate response:', response);

  };

  const getBalance = async () => {

    const response = await contractInstance.methods.getBalance().call();

    console.log('getBalance response:', response);

    setContractBalance(web3.utils.fromWei(response));

  }

  return (

    <div className="App">

      <header className="App-header">

        <h1>Ganache In The Browser</h1>

        <div>

          <input

            type='number'

            id='donationAmount'

            defaultValue={0.01}

          />

          <label htmlFor='donationAmount'>ETH</label>

          <br></br>

          <button

            id='donate'

            type='button'

            onClick={donate}

          >

            Donate

          </button>

        </div>

        <div>

          <button

            id='getBalance'

            type='button'

            onClick={getBalance}

          >

            Get Contract Balance

          </button>

        </div>

        <div>

          <p>

            {contractBalance} ETH

          </p>

        </div>

      </header>

    </div>

  );

}

export default App;

Certifique-se de alterar CONTRACT_ADDRESS para o endereço que recebemos ao implantar nosso contrato inteligente na Etapa 4. Além disso, é USER_ADDRESS a conta que chamará as funções. Podemos obter isso na lista de contas exibida quando iniciamos nossa instância Ganache no terminal:

Qualquer um desses endereços de conta funcionará.

Antes de prosseguirmos, vamos dar uma olhada no código que escrevemos:

• Importamos nossas dependências e SimpleContract arquivo JSON.
• Defina as variáveis ganache ​​e Web3.
• Crie uma variável de options vazias com a qual inicializamos a nossa instância de provider.
  • Observação: Esta options variável é onde definiremos qualquer uma das opções que gostaríamos que nossa instância de blockchain local incluísse, como bifurcar a rede principal (Mainnet) ou Goerli, ao executar o Ganache estritamente no navegador (sem que ele fosse executado em nossa outra janela de terminal).
• Inicialize o objeto web3 usando nosso localhost URL e a porta 8545, onde nossa instância Ganache já está rodando.
  • Observação: você pode executar o Ganache estritamente no navegador agora usando a variável provider em vez de localhost. Estamos usando localhost neste caso, pois queremos interagir com nosso contrato inteligente já implantado e ver nossas mensagens console.log na saída do terminal.
• Defina as variáveis CONTRACT_ADDRESS ​​e USER_ADDRESS.
• Crie uma instância de contrato que podemos usar para chamar nossas funções no código App.
• Crie a variável contractBalance de estado React e seu método set.
• Defina as funções donate e getBalance.
• Por fim, retornamos o html para nosso front-end.

5.c – Executar o Projeto

Agora podemos executar nosso aplicativo npm start para exibir nosso front-end, que se parece com isso:

Quando testamos nosso projeto, podemos ver os resultados e nossas mensagens console.log exibidas na janela do terminal que está executando o Ganache, e o saldo ETH em nosso front-end é atualizado com sucesso com o novo saldo.

Passo 6 – Fork Goerli ou Mainnet com Ganache no Navegador

Agora que sabemos que nosso projeto funciona corretamente em uma instância do Ganache em execução local, a próxima etapa é executá-lo em uma versão bifurcada de uma rede de teste e depois na rede principal. Não vamos percorrer o processo real de fazer isso neste artigo, mas configurá-lo para fazer isso é simples. Tudo o que precisamos fazer é alterar algumas linhas do nosso código de front-end.

Primeiro, a variável de opções precisa especificar qual rede desejamos bifurcar:

const options = { fork: { network: 'goerli' } };

Ou:

const options = { fork: { network: 'mainnet' } };

Então precisamos atualizar nossa declaração da variável web3:

const web3 = new Web3(options);

Por fim, precisamos garantir que atualizamos nosso endereço CONTRACT_ADDRESS em qualquer rede que estejamos bifurcando. Também precisamos atualizar USER_ADDRESS para um endereço de conta na mesma rede que tenha fundos suficientes para doar ao nosso contrato.

Ao bifurcar a rede principal, essa seção de código pode se parecer com isto:

const options = { fork: { network: 'mainnet' } };

const provider = ganache.provider(options);

const web3 = new Web3(provider);

const CONTRACT_ADDRESS = '0x692586eaC70114C8F4714D89E7f72FAAbaeE0Cd7'  

const USER_ADDRESS = web3.utils.toChecksumAddress('0xCe7A99Bba7018fa455E6eD5CF88a7F26010F1E8F');

E com isso, pudemos testar nosso projeto com uma versão bifurcada da rede principal usando o Ganache em nosso navegador.

Conclusão

Testar projetos criando uma interface ajuda a visualizar como seu dapp está rodando e dá a você uma ideia melhor de como ele funcionará para os usuários quando estiverem na rede principal. Executar em seu navegador enquanto testa seu código de front-end é um dos recursos que tornam o Ganache uma ferramenta tão poderosa em seu kit de ferramentas de desenvolvimento. Para obter mais informações sobre como trabalhar com Ganache ou contribuir com o projeto, confira o Github ou a documentação.

Esse artigo foi escrito por Paul McAviney e traduzido por Arnaldo Campos. Seu original pode ser lido Aqui.