Tutorial de DApp Full-stack com Vite + React, Tailwind CSS, e Solidity

Neste tutorial, demonstraremos como construir um DApp full-stack, testá-lo no Ropsten testnet e implementá-lo com a plataforma de desenvolvimento Web3 Alchemy. Vamos usar Vite, React e Tailwind CSS para construir o frontend do DApp e Solidity para criar o backend.

Pule adiante:

• Pré-requisitos
• Começando
• Cimbrando o projeto
• Construindo a UI com Vite+React e Tailwind CSS]
• Construindo o contrato inteligente usando Hardhat
• Testando o contrato inteligente com o Ropsten testnet
• Implantando o DApp no Alchemy

Pré-requisitos

Para acompanhar a demonstração deste artigo, você vai precisar do seguinte:

• Experiência profissional em construção de UIs de Front-end com React e CSS
• Familiaridade com Tailwind CSS, Vite, VS Code, e npm
• Compreensão básica da sintaxe da linguagem Solidity
• Familiaridade com o ecossistema Ethereum

Além disso, será útil ter as seguintes extensões no VS Code:

• Tailwind CSS IntelliSense
• Prettier
• Auto Close Tag
• Javascript (ES6) Code Snippets
• Solidity by Juan Blanco

Começando

Começaremos criando uma pasta com o nome de nosso projeto pretendido. Em seguida, abriremos a pasta no VS code. Você pode usar o editor de código de sua escolha.

Agora, vamos criar duas pastas, client e smart_contract, e depois navegamos até a pasta client no terminal.

Cimbrando o projeto

Vamos criar um cimbramento para nossa aplicação React usando Vite. Esta ferramenta de construção (Vite em francês significa rapidez) ajuda os desenvolvedores a criar um cimbramento de forma rápida e fácil.

Instale o Vite com npm, assim:

$ npm create vite@latest

Em seguida, execute o seguinte comando para inicializar um cimbramento para o projeto e permitir a instalação de create-vite@latest:

$ npm init vite@latest

Quando a criação do cimbramento estiver completo, você verá a saída em seu terminal solicitando detalhes do projeto.

Escolha um nome do projeto e depois um nome do pacote. Esta demonstração usa web3-world.com tanto para o nome do projeto como para o nome do pacote.

Em seguida, selecione React tanto para o framework quanto para a variante.

Você deverá ver o seguinte na tela:

Isto cria os seguintes arquivos para o projeto:

• index.html
• package.json
• pasta src
• vite.config.js

Em seguida, execute os seguintes comandos:

$ npm install

$ npm run dev

Este código implementará o projeto como uma aplicação React acessível na rede local especificada. Se Navegarmos até a porta no localhost, deveremos ver o seguinte:

Podemos parar o terminal de hospedar o servidor com o comando Ctrl + C.

Em seguida, vamos navegar no diretório smart_contract e executar o seguinte:

$ npm init -y

Isto cria um arquivo package.json para nossa pasta smart_contract.

Agora, vamos usar o npm para instalar o CSS Tailwind. Vamos adicionar o Tailwind ao nosso projeto React com o create-react-app. Para fazer isso, simplesmente seguiremos os quatro passos descritos na documentação do Tailwind.

Depois, instalamos o Tailwind na pasta client, assim:

$ npm install -D tailwindcss postcss autoprefixer

$ npx tailwindcss init -p

Após executar estes comandos, podemos confirmar que dois arquivos foram adicionados a nossa pasta de projetos: um arquivo de configuração CSS Tailwind e um arquivo de configuração PostCSS.

Agora, vamos apagar o conteúdo do arquivo tailwind.config.js do projeto e substituí-lo pelo conteúdo do arquivo tailwind.config na página da documentação:

module.exports = {

 content: [

   "./src/**/*.{js,jsx,ts,tsx}",

 ],

 theme: {

   extend: {},

 },

 plugins: [],

}

Em seguida, substituiremos o conteúdo da cópia do arquivo index.css do projeto pelas diretrizes mostradas na página de documentação:

@tailwind base;

@tailwind components;

@tailwind utilities;

Construindo a UI do DApp

Agora, vamos trabalhar na construção do frontend da nossa aplicação.

Vamos começar criando uma nova pasta, chamada de componentes, dentro da pasta src. Lá, criaremos os componentes do painel de controle para nosso projeto:

• Navigation_bar.jsx
• Footer.jsx
• Loader.jsx
• Services.jsx
• Welcome.jsx
• Transactions.jsx

Cada um desses componentes conterá o seguinte código, substituindo o Component_name por seus respectivos nomes:

const Component_name = () => {

    return (

    <h1>Component_name</h1>

    );

}

export default Component_name;

Usaremos o seguinte código para criar um arquivo index.js para exportar todos estes componentes:

export { default as Loader } from './Loader';

export { default as Navbar } from './Navbar';

export { default as Footer } from './Footer';

export { default as Welcome } from './Welcome';

export { default as Services } from './Services';

export { default as Transactions } from './Transactions';

Em seguida, vamos nos concentrar em trabalhar na interface de usuário do cliente. Por enquanto, trataremos principalmente destes três arquivos e pastas:

• index.css: contém nosso estilo de front-end desejado
• pasta images: esta está localizada sob a pasta do cliente e contém nossas imagens desejadas
• pasta components: contém nossos elementos do dashboard, como os listados acima

Agora, vamos instalar os react-icons e os pacotes ethers. O pacote ethers nos permitirá interagir com o contrato inteligente.

$ npm install react-icons ethers

Se executarmos a aplicação após a instalação, devemos ver as novas mudanças.

Construindo o contrato inteligente usando Hardhat

Hardhat é um ambiente de desenvolvimento Ethereum que é usado para executar o código Solidity localmente.

Execute o seguinte comando na pasta smart_contracts para instalar o Hardhat em sua máquina local:

npm install --save-dev hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers

Este comando instala as dependências necessárias para utilizar o ecossistema de desenvolvimento do Hardhat. Você vai notar que há novas pastas e arquivos na base do código. Para testar que estes estão funcionando perfeitamente, execute este comando:

npx hardhat test

Isto deve compilar o arquivo fonte Solidity agora disponível na pasta contracts no diretório principal do projeto. Ele implantará o arquivo de Solidity e testará para ver se ele funciona com sucesso.

Para construir o backend para nosso DApp, adicionaremos nosso código Solidity à pasta contracts e apagaremos o arquivo Greeter.sol.

Em seguida, criaremos um arquivo Transactions.sol e inserimos o seguinte código:

// SPDX-License-Identifier: UNLICENSED

pragma solidity ^0.8.0;

// o nome do contrato é convencionalmente o mesmo que o nome do arquivo

contract Transactions {

    //transactionCounter tem o número das nossas transações

    uint256 transactionCounter;

    // nós vamos chamar o evento mais tarde

    event Transfer(address from, address receiver, uint amount, string message, uint256 timestamp, string keyword);

    // struct terá todas as propriedades dos objetos acima

    struct TransferStructure {

        address sender;

        address receiver;

        uint amount;

        string message;

        uint256 timestamp;

        string keyword;

    }

    // criar um array para armazenar transações com os objetos acima como campos

    TransferStructure[] transactions;

    function addToBlockchain(address payable receiver, uint amount, string memory message, string memory keyword) public {

        transactionCounter += 1;

        transactions.push(TransferStructure(msg.sender, receiver, amount, message, block.timestamp, keyword));

        emit Transfer(msg.sender, receiver, amount, message, block.timestamp, keyword);

    }

    function getAllTransactions() public view returns (TransferStructure[] memory) {

        return transactions;

    }

    function getTransactionCount() public view returns (uint256) {

        return transactionCounter;

    }

}

Neste ponto, todo o backend está completo!

Agora, podemos passar aos testes e depois à implantação. Na pasta de scripts, há um sample-script.js que podemos converter para um script deploy-script.js script.

Usaremos o seguinte para o conteúdo do script deploy-script.js script:

const main = async () => {



  // Nós pegamos o contrato para implantar

  const Transactions = await hre.ethers.getContractFactory("Transactions");

  const transactions = await Transactions.deploy();

  await transactions.deployed();

  console.log("Transactions deployed to:", transactions.address);

}

const runMain = async () => {

  try {

    await main();

    process.exit(0);

  } catch (error) {

    console.error(error);

    process.exit(1);

  }

}

runMain(); 

Você deve ter uma estrutura de projeto semelhante a esta:

Testando o contrato inteligente com o Ropsten testnet

A construção do projeto está completa e o roteiro de implantação está pronto para ser executado. Entretanto, a implantação de contratos inteligentes na blockchain Ethereum garante o uso de um recurso computacional chamado gas. O gas deve ser comprado com ether, e o preço pode flutuar. Dependendo do poder do contrato inteligente, o preço pode ser um pouco ou pode ser muito.

Felizmente, o Ethereum permite o uso de ether de teste (ether falso) que pode ser usado para testar contratos inteligentes em redes de teste. Para tirar proveito disso, criaremos uma carteira Ethereum com a MetaMask. Em seguida, solicitamos o ether de teste para nossa implantação.

Depois de criar, ou entrar na sua carteira Ethereum no metamask.io, vá para Show Test Networks em Settings e selecione Ropsten Account. A seguir, copie o endereço Ropsten e navegue até faucet.egorfine.com para obter o testenet faucet.

Uma vez que você receba o eth de test em seu endereço, passaremos à implantação.

• Não perca um momento com The Replay, uma newsletter com curadoria da LogRocket
  • Saiba como o LogRocket Galileo corta o ruído para resolver proativamente os problemas em seu aplicativo
  • Use o UseEffect do React para otimizar o desempenho de sua aplicação
  • Alternar entre múltiplas versões do Node
  • Descubra como animar seu aplicativo React com AnimXYZ
  • Explore Tauri, uma novo framework para a construção de binários
  • Compare NestJS vs. Express.js

Implantação com Alchemy

Vamos implantar nosso contrato inteligente com a plataforma de desenvolvimento Alchemy Web3.

A partir do site alchemy.com, clicamos em Get started for free e registre-se para obter uma conta. Em seguida, selecionaremos a opção Ethereum + L2 e depois clicamos em Get Started.

Isto nos levará a um painel de controle onde podemos especificar as credenciais solicitadas:

No painel de controle suspenso, no campo Network, selecionaremos Ropsten. Se preferir, você pode selecionar as redes Kovan ou Rinkeby; ambas permitem pedidos de eth de teste.

A seguir, seremos solicitados a escolher um plano de implantação. Como isto é uma demonstração, selecionaremos o plano FREE FOREVER por $0, Skip For Now para detalhes de pagamento e Capped Capacity para a política de escalonamento. A seguir, clique em Continue.

No painel de controle, clicamos no botão +Create App. Em seguida, adicionaremos uma descrição para o aplicativo. Estamos implantando na rede de teste Ropsten agora, mas podemos implantar este mesmo contrato na Mainnet (usando a eth principal) mais tarde.

Clique no botão View Key e copie a chave HTTP. Agora, vamos voltar ao nosso ambiente de codificação e colar a chave no arquivo hardhat.config.js na pasta smart_contract de nossa base de códigos.

Vamos formatar o arquivo para conter o seguinte código:

require("@nomiclabs/hardhat-waffle");

module.exports = {

  solidity: "0.8.0",

  networks: {

    ropsten: {

      url: 'https://eth-ropsten.alchemyapi.io/v2/HwDxJjZs10sSafsRoYKKqQ0Db1Yaexhv',

      accounts: '0xPrivateKeyToYourAccount' // replace with your private key

    }

  }

};

Para implantar o contrato inteiro, navegaremos para nossa pasta smart_contract no terminal e executaremos o seguinte comando:

npx hardhat run scripts/deploy.js --network ropsten

Isto compilará o código e o implantará em um endereço contratual. Esse endereço contratual será especificado no terminal, e um novo arquivo Transactions.json será criado na pasta contracts.

Em seguida, faremos uma pasta utils e, em seguida, criaremos os seguintes arquivos nela:

• constants.js
• Transactions.json, contendo o conteúdo de Transactions.json na pasta de contratos
• dados fictícios em um arquivo JavaScript aleatório (dummyData.js, por exemplo)

Importaremos a Interface Binária de Aplicação (ABI) do arquivo Transactions.json para o arquivo Constants.js, desta forma:

import abi from "./Transactions.json";

export const contractAddress = "0xTheGeneratedContractAddress";

export const contractABI = abi.abi;

Uma pasta context no diretório cliente/src terá de ser conectada à blockchain. Dentro da pasta, nós escreveremos um arquivo TransactionContext.jsx que importará o seguinte:

import React, { useEffect, useState } from "react";

import { ethers } from "ethers";

import { contractABI, contractAddress } from "../utils/constants";

export const TransactionContext = React.createContext();

Também conterá o objeto da janela Ethereum que nos permitirá administrar a conexão com a blockchain Ethereum:

const { ethereum } = window;

É isso aí! Nós construímos, testamos e implantamos nosso DApp!

Conclusão

Neste tutorial, demonstramos um processo passo-a-passo para a construção de um DApp full-stack que poderia servir como um mercado NFT ou uma plataforma de troca para negociar Ethereum. Mostramos como estruturar um projeto DApp full-stack e detalhamos os requisitos e o processo para construir, testar e implantar um contrato inteligente Solidity.

Espero que tenham gostado deste tutorial. Para melhorar ainda mais suas habilidades de desenvolvimento da Web3, tente construir este projeto por você mesmo usando este artigo como guia.

Visibilidade total na produção de Aplicações React

Depuração de Aplicações React podem ser difíceis, especialmente quando os usuários experimentam problemas difíceis de reproduzir. Se você estiver interessado em monitorar e rastrear o estado do Redux, automaticamente navegarr por erros JavaScript e rastrear solicitações de redes lentas e tempo de carga de componentes, experimente o LogRocket.

LogRocket é como um DVR para aplicativos web e móveis, gravando literalmente tudo o que acontece em seu aplicativo React. Em vez de adivinhar por que os problemas acontecem, você pode agregar e relatar em que estado seu aplicativo estava quando um problema ocorreu. O LogRocket também monitora o desempenho de seu aplicativo, relatando com métricas como carga de CPU do cliente, uso de memória do cliente, e muito mais.

O pacote de middleware LogRocket Redux acrescenta uma camada extra de visibilidade em suas sessões de usuário. O LogRocket registra todas as ações e estados de suas lojas Redux.

Modernize como você depura suas aplicações React – comece a monitorar de graça

Junte-se a organizações como Bitso e Coinsquare que usam LogRocket para monitorar proativamente seus aplicativos Web3

Problemas do lado do cliente que afetam a capacidade dos usuários de ativar e transacionar em seus aplicativos podem afetar drasticamente seus resultados. Se você estiver interessado em monitorar problemas de UX, automaticamente navegar por erros JavaScript e rastrear solicitações de rede lentas e tempo de carga de componentes, experimente o LogRocket.

https://logrocket.com/signup/

LogRocket é como um DVR para aplicativos web e móveis, gravando tudo o que acontece em seu aplicativo web ou site. Em vez de adivinhar por que os problemas acontecem, você pode agregar e relatar as principais métricas de desempenho do frontend, reproduzir as sessões do usuário junto com o estado do aplicativo, registrar as solicitações da rede e automaticamente detectar todos os erros.

Modernize como você depura aplicações web e móveis – comece a monitorar de graça

Artigo escrito por MacBobby Chibuzor. A versão original pode ser encontrada aqui. Traduzido e adaptado por Dimitris Calixto.