Dê o pontapé inicial no desenvolvimento do frontend do seu dapp com o create-eth-app
Na última vez, vimos o panorama geral do Solidity (opens in a new tab) e já mencionamos o create-eth-app (opens in a new tab). Agora você descobrirá como usá-lo, quais recursos estão integrados e ideias adicionais sobre como expandi-lo. Iniciado por Paul Razvan Berg, o fundador do Sablier (opens in a new tab), este aplicativo dará o pontapé inicial no seu desenvolvimento de frontend e vem com várias integrações opcionais para você escolher.
Instalação
A instalação requer o Yarn 0.25 ou superior (npm install yarn --global). É tão simples quanto executar:
yarn create eth-app my-eth-appcd my-eth-appyarn react-app:startEle usa o create-react-app (opens in a new tab) por baixo dos panos. Para ver seu app, abra http://localhost:3000/. Quando estiver pronto para implantar em produção, crie um pacote minificado com yarn build. Uma maneira fácil de hospedar isso seria o Netlify (opens in a new tab). Você pode criar um repositório no GitHub, adicioná-lo ao Netlify, configurar o comando de build e pronto! Seu app será hospedado e poderá ser usado por todos. E tudo isso gratuitamente.
Recursos
React e create-react-app
Primeiramente, o coração do app: o React e todos os recursos adicionais que vêm com o create-react-app. Usar apenas isso é uma ótima opção se você não quiser integrar o Ethereum. O próprio React (opens in a new tab) torna a criação de UIs interativas muito fácil. Pode não ser tão amigável para iniciantes quanto o Vue (opens in a new tab), mas ainda é o mais utilizado, tem mais recursos e, o mais importante, milhares de bibliotecas adicionais para escolher. O create-react-app também torna muito fácil começar a usá-lo e inclui:
- Suporte às sintaxes React, JSX, ES6, TypeScript e Flow.
- Recursos de linguagem além do ES6, como o operador de propagação de objeto.
- CSS com prefixo automático, para que você não precise de
-webkit-ou outros prefixos. - Um executor de testes unitários rápido e interativo com suporte integrado para relatórios de cobertura.
- Um servidor de desenvolvimento em tempo real que avisa sobre erros comuns.
- Um script de build para empacotar JS, CSS e imagens para produção, com hashes e sourcemaps.
O create-eth-app em particular faz uso dos novos efeitos de hooks (opens in a new tab). Um método para escrever os chamados componentes funcionais, que são poderosos, mas muito pequenos. Veja a seção abaixo sobre o Apollo para saber como eles são usados no create-eth-app.
Yarn Workspaces
Os Yarn Workspaces (opens in a new tab) permitem que você tenha vários pacotes, mas com a capacidade de gerenciá-los todos a partir da pasta raiz e instalar as dependências de todos de uma vez usando yarn install. Isso faz sentido especialmente para pacotes adicionais menores, como o gerenciamento de endereços/ABIs de contratos inteligentes (as informações sobre onde você implantou quais contratos inteligentes e como se comunicar com eles) ou a integração do graph, ambos parte do create-eth-app.
ethers.js
Embora o Web3 (opens in a new tab) ainda seja o mais usado, o ethers.js (opens in a new tab) tem ganhado muito mais força como alternativa no último ano e é o que está integrado no create-eth-app. Você pode trabalhar com ele, alterá-lo para Web3 ou considerar a atualização para o ethers.js v5 (opens in a new tab), que está quase saindo da versão beta.
The Graph
GraphQL (opens in a new tab) é uma forma alternativa de lidar com dados em comparação com uma API Restful (opens in a new tab). Eles têm várias vantagens sobre as APIs Restful, especialmente para dados descentralizados da cadeia de blocos. Se você estiver interessado no raciocínio por trás disso, dê uma olhada em GraphQL Will Power the Decentralized Web (opens in a new tab).
Normalmente, você buscaria dados diretamente do seu contrato inteligente. Quer ler o horário da última negociação? Basta chamar MyContract.methods.latestTradeTime().call(), que busca os dados de um nó do Ethereum para o seu dapp. Mas e se você precisar de centenas de pontos de dados diferentes? Isso resultaria em centenas de buscas de dados no nó, cada uma exigindo um RTT (opens in a new tab), tornando seu dapp lento e ineficiente. Uma solução alternativa pode ser uma função de chamada de busca dentro do seu contrato que retorna múltiplos dados de uma vez. No entanto, isso nem sempre é o ideal.
E você também pode se interessar por dados históricos. Você quer saber não apenas o horário da última negociação, mas os horários de todas as negociações que você mesmo já fez. Use o pacote subgraph do create-eth-app, leia a documentação (opens in a new tab) e adapte-o aos seus próprios contratos. Se você estiver procurando por contratos inteligentes populares, pode ser que já exista um subgraph. Confira o explorador de subgraphs (opens in a new tab).
Depois de ter um subgraph, ele permite que você escreva uma consulta simples em seu dapp que recupera todos os dados importantes da cadeia de blocos, incluindo os históricos que você precisa, com apenas uma busca necessária.
Apollo
Graças à integração do Apollo Boost (opens in a new tab), você pode integrar facilmente o graph em seu dapp React. Especialmente ao usar React hooks e Apollo (opens in a new tab), buscar dados é tão simples quanto escrever uma única consulta GraphQL em seu componente:
1const { loading, error, data } = useQuery(myGraphQlQuery)23React.useEffect(() => {4 if (!loading && !error && data) {5 console.log({ data })6 }7}, [loading, error, data])Modelos
Além disso, você pode escolher entre vários modelos diferentes. Até agora, você pode usar uma integração com Aave, Compound, UniSwap ou sablier. Todos eles adicionam endereços de contratos inteligentes de serviços importantes, juntamente com integrações de subgraphs pré-fabricadas. Basta adicionar o modelo ao comando de criação, como yarn create eth-app my-eth-app --with-template aave.
Aave
O Aave (opens in a new tab) é um mercado descentralizado de empréstimo de dinheiro. Os depositantes fornecem liquidez ao mercado para obter uma renda passiva, enquanto os mutuários podem pegar emprestado usando garantias. Uma característica única do Aave são os empréstimos-relâmpago (flash loans) (opens in a new tab), que permitem que você pegue dinheiro emprestado sem qualquer garantia, desde que devolva o empréstimo em uma única transação. Isso pode ser útil, por exemplo, para lhe dar um dinheiro extra em negociações de arbitragem.
Os tokens negociados que rendem juros são chamados de aTokens.
Ao optar por integrar o Aave com o create-eth-app, você obterá uma integração de subgraph (opens in a new tab). O Aave usa o The Graph e já fornece vários subgraphs prontos para uso na Ropsten (opens in a new tab) e na Rede Principal (Mainnet) (opens in a new tab) em formato bruto (raw) (opens in a new tab) ou formatado (formatted) (opens in a new tab).
Compound
O Compound (opens in a new tab) é semelhante ao Aave. A integração já inclui o novo Compound v2 Subgraph (opens in a new tab). Os tokens que rendem juros aqui são, surpreendentemente, chamados de cTokens.
Uniswap
A Uniswap (opens in a new tab) é uma corretora descentralizada (DEX). Os provedores de liquidez podem ganhar taxas fornecendo os tokens ou ether necessários para ambos os lados de uma negociação. É amplamente utilizada e, portanto, tem uma das maiores liquidez para uma gama muito ampla de tokens. Você pode integrá-la facilmente em seu dapp para, por exemplo, permitir que os usuários façam o swap de seus ETH por DAI.
Infelizmente, no momento em que este artigo foi escrito, a integração é apenas para a Uniswap v1 e não para a versão v2 recém-lançada (opens in a new tab).
Sablier
O Sablier (opens in a new tab) permite que os usuários façam pagamentos de dinheiro por streaming. Em vez de um único dia de pagamento, você recebe seu dinheiro constantemente, sem necessidade de administração adicional após a configuração inicial. A integração inclui seu próprio subgraph (opens in a new tab).
O que vem a seguir?
Se você tiver dúvidas sobre o create-eth-app, acesse o servidor da comunidade Sablier (opens in a new tab), onde você pode entrar em contato com os autores do create-eth-app. Como próximos passos, você pode querer integrar um framework de UI como o Material UI (opens in a new tab), escrever consultas GraphQL para os dados que você realmente precisa e configurar a implantação.
Última atualização da página: 29 de setembro de 2025
