Démarrez le développement front-end de votre dapp avec create-eth-app

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

Installation

L'installation nécessite Yarn 0.25 ou une version supérieure (npm install yarn --global). Il suffit d'exécuter :

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

Il utilise create-react-app (opens in a new tab) en interne. Pour voir votre application, ouvrez http://localhost:3000/. Lorsque vous êtes prêt à déployer en production, créez un paquet minifié avec yarn build. Un moyen simple de l'héberger serait Netlify (opens in a new tab). Vous pouvez créer un dépôt GitHub, l'ajouter à Netlify, configurer la commande de compilation et vous avez terminé ! Votre application sera hébergée et utilisable par tous. 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. L'utiliser seul est une excellente option si vous ne souhaitez pas intégrer Ethereum. React (opens in a new tab) en soi rend la création d'interfaces utilisateur interactives très facile. Il n'est peut-être pas aussi accessible aux débutants que Vue (opens in a new tab), mais il reste le plus utilisé, possède plus de fonctionnalités et surtout des milliers de bibliothèques supplémentaires parmi lesquelles choisir. create-react-app permet également de démarrer très facilement et inclut :

• La prise en charge de la syntaxe React, JSX, ES6, TypeScript et Flow.
• Des ajouts au langage au-delà d'ES6, comme l'opérateur de décomposition d'objet (object spread operator).
• Du CSS auto-préfixé, vous n'avez donc pas besoin de -webkit- ou d'autres préfixes.
• Un exécuteur de tests unitaires interactif et rapide avec prise en charge intégrée des rapports de couverture.
• Un serveur de développement en direct qui avertit des erreurs courantes.
• Un script de compilation pour regrouper le JS, le CSS et les images pour la production, avec des hachages et des sourcemaps.

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

Espaces de travail Yarn (Yarn Workspaces)

Les espaces de travail Yarn (opens in a new tab) vous permettent d'avoir plusieurs paquets, tout en pouvant les gérer tous depuis le dossier racine et en installant les dépendances pour tous en une seule fois à l'aide de yarn install. Cela prend tout son sens pour les petits paquets supplémentaires comme la gestion des adresses/ABI des contrats intelligents (les informations sur l'endroit où vous avez déployé quels contrats intelligents et comment communiquer avec eux) ou l'intégration de The Graph, qui font tous deux partie de create-eth-app.

Ethers.js

Bien que Web3 (opens in a new tab) soit encore le plus utilisé, Ethers.js (opens in a new tab) a gagné beaucoup plus de terrain en tant qu'alternative au cours de la dernière année et c'est celui 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 sa phase bêta.

The Graph

GraphQL (opens in a new tab) est une méthode alternative pour gérer les 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 décentralisées de la chaîne de blocs. Si vous êtes intéressé par le raisonnement qui sous-tend cela, jetez un œil à GraphQL Will Power the Decentralized Web (opens in a new tab).

Habituellement, vous récupéreriez 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 application décentralisée (dapp). Mais que se passe-t-il si vous avez besoin de centaines de points de données différents ? Cela entraînerait des centaines de requêtes de données vers le nœud, nécessitant à chaque fois 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 à l'intérieur de votre contrat qui renvoie plusieurs données à la fois. Ce n'est cependant pas toujours idéal.

Et puis vous pourriez également être intéressé par les données historiques. Vous voulez connaître non seulement l'heure de la dernière transaction, mais aussi les heures de toutes les transactions que vous avez vous-même effectuées. Utilisez le paquet de sous-graphe 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'il existe déjà un sous-graphe. Consultez l'explorateur de sous-graphes (opens in a new tab).

Une fois que vous avez un sous-graphe, il vous permet d'écrire une simple requête dans votre dapp qui récupère toutes les données importantes de la chaîne de blocs, y compris les données historiques dont vous avez besoin, en une seule requête.

Apollo

Grâce à l'intégration d'Apollo Boost (opens in a new tab), vous pouvez facilement intégrer The Graph dans votre dapp React. Surtout lors de l'utilisation des hooks React et d'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 :

const { loading, error, data } = useQuery(myGraphQlQuery)

React.useEffect(() => {
  if (!loading && !error && data) {
    console.log({ data })
  }
}, [loading, error, data])

Modèles

De plus, vous pouvez choisir parmi plusieurs modèles différents. Jusqu'à présent, vous pouvez utiliser une intégration Aave, Compound, Uniswap ou Sablier. Ils ajoutent tous des adresses de contrats intelligents de services importants ainsi que des intégrations de sous-graphes préconçues. 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 de la liquidité au marché pour gagner un revenu passif, tandis que les emprunteurs peuvent emprunter en utilisant des collatéraux. L'une des caractéristiques uniques d'Aave réside dans ces prêts éclairs (opens in a new tab) qui vous permettent d'emprunter de l'argent sans aucun collatéral, à condition que vous remboursiez le prêt en une seule transaction. Cela peut être utile, par exemple, pour vous donner des liquidités supplémentaires lors d'opérations 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 sous-graphe (opens in a new tab). Aave utilise The Graph et vous fournit déjà plusieurs sous-graphes prêts à l'emploi sur Ropsten (opens in a new tab) et le Réseau principal (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 sous-graphe Compound v2 (opens in a new tab). Les jetons rapportant des intérêts ici sont étonnamment appelés cTokens.

Uniswap

Uniswap (opens in a new tab) est un échange décentralisé (DEX). Les fournisseurs de liquidité peuvent gagner des frais en fournissant les jetons ou l'ether requis pour les deux côtés d'un échange. Il est largement utilisé et possède donc l'une des liquidités les plus élevées 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 de cet article, l'intégration ne concerne que Uniswap v1 et non la v2 qui vient de sortir (opens in a new tab).

Sablier

Sablier (opens in a new tab) permet aux utilisateurs de diffuser des paiements en continu. Au lieu d'un seul jour de paie, vous recevez en fait votre argent en continu sans administration supplémentaire après la configuration initiale. L'intégration inclut son propre sous-graphe (opens in a new tab).

Et ensuite ?

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 entrer en contact avec les auteurs de create-eth-app. Pour vos prochaines é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.