Démarrez le développement de votre interface de dApp avec create-eth-app.

La dernière fois, nous avons examiné la vue d'ensemble de Solidity (opens in a new tab) et déjà mentionné create-eth-app (opens in a new tab). Vous allez maintenant découvrir comment l'utiliser, quelles fonctionnalités sont intégrées et des idées supplémentaires sur la façon de l'étendre. Lancée par Paul Razvan Berg, le fondateur de Sablier (opens in a new tab), cette application donnera un coup d'envoi à votre développement d'interface et est livrée avec plusieurs intégrations optionnelles au choix.

Installation

L'installation nécessite Yarn 0.25 ou une version ultérieure (npm install yarn --global). C'est aussi simple que d'exécuter :

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

Elle utilise create-react-app (opens in a new tab) sous le capot. Pour voir votre application, ouvrez http://localhost:3000/. Quand vous êtes prêt à déployer en production, créez un paquet minifié avec yarn build. Une façon simple de l'héberger serait d'utiliser Netlify (opens in a new tab). Vous pouvez créer un dépôt GitHub, l'ajouter à Netlify, configurer la commande de construction et le tour est joué ! Votre application sera hébergée et utilisable par tout le monde. Et tout cela, gratuitement.

Fonctionnalités

React et create-react-app

Tout d'abord, le cœur de l'application : React et toutes les fonctionnalités supplémentaires fournies avec create-react-app. Utiliser cette seule application est une excellente option si vous ne souhaitez pas intégrer Ethereum. React (opens in a new tab) en soi facilite grandement la création d'interfaces utilisateur interactives. Sa prise en main n'est peut-être pas aussi facile qu'avec Vue (opens in a new tab), mais il reste le plus utilisé, il possède plus de fonctionnalités et, surtout, il offre un choix de milliers de bibliothèques supplémentaires. create-react-app facilite également le démarrage et inclut :

• Prise en charge de la syntaxe React, JSX, ES6, TypeScript et Flow.
• Des fonctionnalités de langage au-delà d'ES6, comme l'opérateur de décomposition d'objet.
• CSS avec préfixes automatiques, pour que vous n'ayez pas besoin de -webkit- ou d'autres préfixes.
• Un exécuteur de test unitaire interactif rapide avec une prise en charge intégrée pour les rapports de couverture.
• Un serveur de développement en direct qui avertit des erreurs courantes.
• Un script de construction pour empaqueter le JS, le CSS et les images pour la production, avec des hachages et des sourcemaps.

L'application create-eth-app utilise en particulier les nouveaux effets de hooks (opens in a new tab). Une méthode pour écrire de puissants mais très petits composants, dits fonctionnels. Consultez la section ci-dessous sur Apollo pour voir comment ils sont utilisés dans create-eth-app.

Yarn Workspaces

Yarn Workspaces (opens in a new tab) vous permettent d'avoir plusieurs paquets, tout en pouvant les gérer tous depuis le dossier racine et installer les dépendances pour tous en même temps en utilisant yarn install. C'est particulièrement pertinent pour les paquets supplémentaires plus petits, comme la gestion des adresses de contrats intelligents/ABI (les informations sur l'endroit où vous avez déployé quels contrats intelligents et comment communiquer avec eux) ou l'intégration de graphe, qui font tous deux partie de create-eth-app.

ethers.js

Bien que Web3 (opens in a new tab) soit encore majoritairement utilisé, ethers.js (opens in a new tab) a gagné en popularité comme alternative au cours de l'année dernière et c'est lui qui est intégré dans create-eth-app. Vous pouvez travailler avec celui-ci, le remplacer par Web3 ou envisager de passer à ethers.js v5 (opens in a new tab) qui est presque sorti de la version bêta.

The Graph

GraphQL (opens in a new tab) est une méthode alternative de gestion des données par rapport à une API RESTful (opens in a new tab). Il présente plusieurs avantages par rapport aux API RESTful, en particulier pour les données de blockchain décentralisées. Si les raisons qui motivent ce choix vous intéressent, consultez GraphQL Will Power the Decentralized Web (opens in a new tab).

Habituellement, vous récupérez les données directement depuis votre contrat intelligent. Vous voulez lire l'heure de la dernière transaction ? Il suffit d'appeler MyContract.methods.latestTradeTime().call() qui récupère les données d'un nœud Ethereum dans votre dapp. Mais que faire si vous avez besoin de centaines de points de données différents ? Cela entraînerait des centaines de récupérations de données vers le nœud, chacune nécessitant un RTT (opens in a new tab), ce qui rendrait votre dapp lente et inefficace. Une solution de contournement pourrait être une fonction d'appel de récupération dans votre contrat qui renvoie plusieurs données à la fois. Ce n'est cependant pas toujours idéal.

Vous pourriez également être intéressé par les données historiques. Vous souhaitez peut-être connaître non seulement le moment de la dernière transaction mais également le moment de chacune des transactions que vous avez réalisées vous-même. Utilisez le paquet subgraph de create-eth-app, lisez la documentation (opens in a new tab) et adaptez-le à vos propres contrats. Si vous recherchez des contrats intelligents populaires, il se peut même qu'un subgraph existe déjà. Consultez l'explorateur de subgraphs (opens in a new tab).

Une fois que vous disposez d'un subgraph, vous pouvez écrire une simple requête dans votre dapp afin de récupérer toutes les données importantes de la blockchain, y compris les données historiques dont vous avez besoin. Une seule récupération suffit.

Apollo

Grâce à l'intégration de Apollo Boost (opens in a new tab), vous pouvez facilement intégrer The Graph dans votre dapp React. En particulier lorsque vous utilisez les hooks React et Apollo (opens in a new tab), la récupération de données est aussi simple que d'écrire une seule requête GraphQL dans votre composant :

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

Modèles

En plus, vous pouvez choisir parmi plusieurs modèles différents. Pour l'instant, vous pouvez utiliser une intégration Aave, Compound, Uniswap ou Sablier. Ces modèles ajoutent tous des adresses importantes de contrats intelligents de service ainsi que des intégrations pré-construites de subgraph. Il suffit d'ajouter le modèle à la commande de création, comme yarn create eth-app my-eth-app --with-template aave.

Aave

Aave (opens in a new tab) est un marché de prêt d'argent décentralisé. Les déposants fournissent des liquidités au marché pour gagner un revenu passif, tandis que les emprunteurs peuvent emprunter avec des garanties. Une caractéristique unique d'Aave sont les prêts flash (opens in a new tab) qui vous permettent d'emprunter de l'argent sans aucune garantie, tant que vous remboursez le prêt en une seule transaction. Cela peut être utile, par exemple, pour vous donner des liquidités supplémentaires pour du trading d'arbitrage.

Les jetons échangés qui vous rapportent des intérêts sont appelés aTokens.

Lorsque vous choisissez d'intégrer Aave avec create-eth-app, vous obtiendrez une intégration de subgraph (opens in a new tab). Aave utilise The Graph et vous fournit déjà plusieurs subgraphs prêts à l'emploi sur Ropsten (opens in a new tab) et Mainnet (opens in a new tab) sous forme brute (opens in a new tab) ou formatée (opens in a new tab).

Compound

Compound (opens in a new tab) est similaire à Aave. L'intégration inclut déjà le nouveau subgraph Compound v2 (opens in a new tab). De manière surprenante, les jetons qui rapportent des intérêts sont ici appelés cTokens.

Uniswap

Uniswap (opens in a new tab) est une plateforme d'échange décentralisée (DEX). Les fournisseurs de liquidités peuvent percevoir des commissions en fournissant les jetons ou l'éther requis pour les deux parties d'une transaction. Il est largement utilisé et dispose donc de l'une des plus grandes liquidités pour une très large gamme de jetons. Vous pouvez facilement l'intégrer dans votre dapp pour, par exemple, permettre aux utilisateurs d'échanger leurs ETH contre des DAI.

Malheureusement, au moment de la rédaction, l'intégration n'est disponible que pour Uniswap v1 et non pour la v2 qui vient de sortir (opens in a new tab).

Sablier

Sablier (opens in a new tab) permet aux utilisateurs d'effectuer des paiements d'argent en continu. Au lieu d'un seul versement, vous recevez en fait votre argent en continu sans avoir rien d'autre à faire après la mise en place initiale. L'intégration inclut son propre subgraph (opens in a new tab).

Et après ?

Si vous avez des questions sur create-eth-app, rendez-vous sur le serveur communautaire de Sablier (opens in a new tab), où vous pourrez contacter les auteurs de create-eth-app. Comme premières étapes, vous pourriez vouloir intégrer un framework d'interface utilisateur comme Material UI (opens in a new tab), écrire des requêtes GraphQL pour les données dont vous avez réellement besoin et configurer le déploiement.

Dernière mise à jour de la page : 29 septembre 2025

m (opens in a new tab)

c (opens in a new tab)

b (opens in a new tab)

+2

Voir les contributeurs