Ponga en marcha el desarrollo frontend de su dapp con create-eth-app

La última vez que analizamos el panorama general de Solidity (opens in a new tab) ya mencionamos create-eth-app (opens in a new tab). Ahora descubrirá cómo usarla, qué características tiene integradas e ideas adicionales sobre cómo ampliarla. Iniciada por Paul Razvan Berg, el fundador de Sablier (opens in a new tab), esta aplicación impulsará su desarrollo frontend y viene con varias integraciones opcionales para elegir.

Instalación

La instalación requiere Yarn 0.25 o superior (npm install yarn --global). Es tan simple como ejecutar:

yarn create eth-app my-eth-app
cd my-eth-app
yarn react-app:start

Utiliza create-react-app (opens in a new tab) de forma interna. Para ver su aplicación, abra http://localhost:3000/. Cuando esté listo para implementar en producción, cree un paquete minificado con yarn build. Una forma fácil de alojar esto sería Netlify (opens in a new tab). ¡Puede crear un repositorio de GitHub, añadirlo a Netlify, configurar el comando de compilación y listo! Su aplicación será alojada y podrá ser utilizada por todo el mundo. Y todo de forma gratuita.

Características

React y create-react-app

En primer lugar, el corazón de la aplicación: React y todas las características adicionales que vienen con create-react-app. Usar solo esto es una gran opción si no desea integrar Ethereum. React (opens in a new tab) en sí mismo hace que la creación de interfaces de usuario interactivas sea realmente fácil. Puede que no sea tan fácil para principiantes como Vue (opens in a new tab), pero sigue siendo el más utilizado, tiene más características y, lo que es más importante, miles de librerías adicionales para elegir. El create-react-app también facilita mucho el comienzo e incluye:

• Compatibilidad con la sintaxis de React, JSX, ES6, TypeScript y Flow.
• Extras del lenguaje más allá de ES6, como el operador de propagación de objetos.
• CSS con prefijos automáticos, por lo que no necesita -webkit- u otros prefijos.
• Un ejecutor de pruebas unitarias rápido e interactivo con soporte integrado para informes de cobertura.
• Un servidor de desarrollo en vivo que advierte sobre errores comunes.
• Un script de compilación para empaquetar JS, CSS e imágenes para producción, con hashes y sourcemaps.

La create-eth-app en particular hace uso de los nuevos efectos de los hooks (opens in a new tab). Un método para escribir componentes potentes, pero muy pequeños, llamados componentes funcionales. Consulte la sección de Apollo a continuación para ver cómo se utilizan en create-eth-app.

Espacios de trabajo de Yarn

Los espacios de trabajo de Yarn (opens in a new tab) le permiten tener varios paquetes, pero con la capacidad de administrarlos todos desde la carpeta raíz e instalar las dependencias para todos a la vez usando yarn install. Esto tiene especial sentido para paquetes adicionales más pequeños como la gestión de direcciones/ABI de contratos inteligentes (la información sobre dónde implementó qué contratos inteligentes y cómo comunicarse con ellos) o la integración de grafos, ambos parte de create-eth-app.

ethers.js

Aunque Web3 (opens in a new tab) sigue siendo el más utilizado, ethers.js (opens in a new tab) ha ganado mucha más tracción como alternativa en el último año y es el que está integrado en create-eth-app. Puede trabajar con este, cambiarlo a Web3 o considerar la posibilidad de actualizar a ethers.js v5 (opens in a new tab), que ya casi ha salido de la versión beta.

The Graph

GraphQL (opens in a new tab) es una forma alternativa de manejar datos en comparación con una API RESTful (opens in a new tab). Tienen varias ventajas sobre las API RESTful, especialmente para los datos descentralizados de la cadena de bloques. Si le interesa el razonamiento que hay detrás de esto, eche un vistazo a GraphQL Will Power the Decentralized Web (opens in a new tab).

Normalmente, obtendría los datos de su contrato inteligente directamente. ¿Quiere leer la hora de la última operación? Solo tiene que llamar a MyContract.methods.latestTradeTime().call(), que obtiene los datos de un nodo de Ethereum y los envía a su dapp. Pero, ¿y si necesita cientos de puntos de datos diferentes? Eso daría lugar a cientos de recuperaciones de datos al nodo, cada una de las cuales requeriría un RTT (opens in a new tab), lo que haría que su dapp fuera lenta e ineficiente. Una solución podría ser una función de llamada de obtención dentro de su contrato que devuelva varios datos a la vez. Sin embargo, esto no siempre es lo ideal.

Y puede que también le interesen los datos históricos. Usted querrá saber no solo la hora de la última operación, sino las horas de todas las operaciones que ha realizado. Utilice el paquete de subgrafos create-eth-app, lea la documentación (opens in a new tab) y adáptelo a sus propios contratos. Si está buscando contratos inteligentes populares, puede que ya exista un subgrafo. Eche un vistazo al explorador de subgrafos (opens in a new tab).

Una vez que tenga un subgrafo, este le permite escribir una consulta simple en su dapp que recupera todos los datos importantes de la cadena de bloques, incluidos los históricos que necesita, con una sola recuperación.

Apollo

Gracias a la integración de Apollo Boost (opens in a new tab), puede integrar fácilmente el grafo en su dapp de React. Especialmente cuando se utilizan los hooks de React y Apollo (opens in a new tab), obtener datos es tan simple como escribir una única consulta de GraphQL en su componente:

1const { loading, error, data } = useQuery(myGraphQlQuery)
2
3React.useEffect(() => {
4  if (!loading && !error && data) {
5    console.log({ data })
6  }
7}, [loading, error, data])
Copiar

Plantillas

Además, puede elegir entre varias plantillas diferentes. Hasta ahora puede utilizar una integración de Aave, Compound, UniSwap o sablier. Todas ellas añaden importantes direcciones de contratos inteligentes de servicios junto con integraciones de subgrafos pre-hechas. Solo tiene que añadir la plantilla al comando de creación como yarn create eth-app my-eth-app --with-template aave.

Aave

Aave (opens in a new tab) es un mercado descentralizado de préstamos de dinero. Los depositantes proporcionan liquidez al mercado para obtener ingresos pasivos, mientras que los prestatarios pueden pedir préstamos utilizando garantías. Una característica única de Aave son los préstamos flash (opens in a new tab) que le permiten pedir dinero prestado sin ninguna garantía, siempre que devuelva el préstamo en una sola transacción. Esto puede ser útil, por ejemplo, para darle dinero extra en las operaciones de arbitraje.

Los tókenes intercambiados que le generan intereses se denominan aTokens.

Cuando elige integrar Aave con create-eth-app, obtendrá una integración de subgrafo (opens in a new tab). Aave utiliza The Graph y ya le proporciona varios subgrafos listos para usar en Ropsten (opens in a new tab) y en la red principal (opens in a new tab) en formato sin procesar (opens in a new tab) o con formato (opens in a new tab).

Compound

Compound (opens in a new tab) es similar a Aave. La integración ya incluye el nuevo Subgrafo v2 de Compound (opens in a new tab). Sorprendentemente, los tókenes que generan intereses aquí se llaman cTokens.

Uniswap

Uniswap (opens in a new tab) es un exchange descentralizado (DEX). Los proveedores de liquidez pueden ganar comisiones proporcionando los tókenes o el ether necesarios para ambos lados de una operación. Es muy utilizado y, por lo tanto, tiene una de las mayores liquidez para una gama muy amplia de tókenes. Puede integrarlo fácilmente en su dapp para, por ejemplo, permitir a los usuarios intercambiar su ETH por DAI.

Lamentablemente, en el momento de escribir este artículo, la integración es solo para Uniswap v1 y no para la versión v2 recién lanzada (opens in a new tab).

Sablier

Sablier (opens in a new tab) permite a los usuarios realizar pagos de dinero en streaming. En lugar de un único día de pago, usted recibe su dinero constantemente sin más administración después de la configuración inicial. La integración incluye su propio subgrafo (opens in a new tab).

¿Y ahora qué?

Si tiene preguntas sobre create-eth-app, vaya al servidor de la comunidad de Sablier (opens in a new tab), donde podrá ponerse en contacto con los autores de create-eth-app. Como primeros pasos, es posible que desee integrar un marco de interfaz de usuario como Material UI (opens in a new tab), escribir consultas GraphQL para los datos que realmente necesita y configurar la implementación.

Última actualización de la página: 29 de septiembre de 2025

m (opens in a new tab)

c (opens in a new tab)

b (opens in a new tab)

+2

Ver colaboradores