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

La dernière fois nous nous sommes intéressés à Solidity(opens in a new tab) et avons mentionné create-eth-app(opens in a new tab). Vous allez maintenant découvrir comment l'utiliser, quelles fonctionnalités y sont intégrées et comment l'étendre encore. Initiée par Paul Razvan Berg, fondateur de Sablier(opens in a new tab), cette application livrée avec plusieurs intégrations facultatives au choix va vous permettre de débuter le développement de votre interface.

Installation

L'installation nécessite au minimum Yarn 0.25 (npm install yarn --global). L'installation est aussi simple que l'exécution :

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

Elle s'appuie sur create-react-app(opens in a new tab). Pour voir votre application, ouvrez http://localhost:3000/. Lorsque vous êtes prêt à déployer en production, créez un paquet minifié avec le constructeur yarn. Un moyen simple de l'héberger est 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 ceci gratuitement.

Fonctionnalités

React & create-react-app

Premièrement, le coeur de l'application : React et toutes les fonctionnalités additionnelles livrées 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) rend la construction d'interfaces utilisateur interactives très facile. La prise en main n'est peut-être pas aussi facile qu'avec Vue(opens in a new tab), mais l'application est encore largement utilisée, possède plus de fonctionnalités et surtout offre un choix de plusieurs milliers de bibliothèques supplémentaires. Avec create-react-app, le démarrage est très simple. L'application inclut :

• React, JSX, ES6, TypeScript et le support pour Flow syntax.
• Langages complémentaires à ES6 comme l'opérateur de propagation d'objet.
• CSS auto-préfixé, pour se passer 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 signale les erreurs courantes.
• Un script de construction pour associer du JS, du CSS et des images en vue de la mise en production, avec des hachages et une cartographie du code source.

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

Espaces de travail Yarn

Les espaces de travail Yarn(opens in a new tab) vous permettent de disposer de plusieurs paquets, mais également d'être en mesure de tous les gérer à partir du dossier racine et d'installer toutes leurs dépendances en une fois en utilisant yarn install. Ceci est particulièrement adapté pour les petits packs additionnels, tels que les adresses de contrats intelligents/la gestion ABI (les informations sur l'endroit où vous avez déployé tels contrats intelligents et comment communiquer avec eux) ou l'intégration de graphes, les deux parties de create-eth-app.

ethers.js

Si Web3(opens in a new tab) est encore largement utilisé, ethers.js(opens in a new tab) a davantage été employé comme alternative l'année dernière et est intégré à create-eth-app. Vous pouvez travailler avec celui-ci, le faire évoluer vers Web3 ou envisager une mise à niveau pour passer à ethers.js v5(opens in a new tab) qui n'est pratiquement plus en version bêta.

Le réseau Graph

GraphQL(opens in a new tab) est un moyen alternatif de gérer les données par rapport à une API Restful(opens in a new tab). Il offre plusieurs avantages par rapport aux APIs REST, en particulier pour les données décentralisées de la blockchain. Si vous êtes intéressé par le raisonnement qui le sous-tend, jetez un œil à GraphQL va propulser le Web décentralisé(opens in a new tab).

Vous récupérez normalement directement les données de votre contrat intelligent. Vous souhaitez connaître l'instant précis de la dernière transaction ? Appelez simplement MyContract.methods.latestTradeTime().call() qui récupère les données d'un nœud Ethereum comme Infura dans votre dApp. Mais que faire si vous avez besoin de centaines de points de données différents ? Il en résulterait des centaines d'extractions de données vers le nœud, nécessitant à chaque fois un RTT(opens in a new tab) qui ralentirait votre dApp et lui ferait perdre son efficacité. Pour éviter cela, une solution pourrait être d'utiliser une fonction d'appel de récupération dans votre contrat qui restitue 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-la à vos propres contrats. Si vous êtes à la recherche de contrats intelligents populaires, il se peut même qu'il en existe déjà un avec subgraph. Jetez un œil à l'explorateur de sous-graphes(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 demande de récupération suffit.

Apollo

Grâce à l'intégration d'Apollo Boost(opens in a new tab), vous pouvez facilement intégrer Graph dans votre dApp React. Surtout lorsque vous utilisez des hooks React et Apollo(opens in a new tab), récupérer des données est aussi simple que d'écrire une 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 (Templates)

En haut, il est possible de choisir parmi différents modèles. À ce jour, 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 aav.

Aave

Aave(opens in a new tab) est un marché décentralisé de prêt d'argent. Les déposants fournissent des liquidités au marché pour gagner un revenu passif, tandis que les emprunteurs peuvent emprunter avec des garanties. Une fonctionnalité exclusive d'Aave réside dans ces prêts flash(opens in a new tab) qui vous permettent d'emprunter de l'argent sans aucune garantie, pour autant que vous remboursiez le prêt en une seule transaction. Cela peut être utile par exemple pour vous donner de l'argent supplémentaire sur l'arbitrage d'échange.

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

Si vous choisissez d'intégrer Aave avec create-eth-app, vous obtiendrez une intégration 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 le réseau principal(opens in a new tab) en formulaire brut(opens in a new tab) ou formaté(opens in a new tab).

Compound

Compound(opens in a new tab) est similaire à Aave. L'intégration inclut déjà le nouveau Compound v2 Subgraph(opens in a new tab). Les intérêts gagnés des jetons sont ici étonnamment appelés cTokens.

Uniswap

Uniswap(opens in a new tab) est un système d'échange décentralisé (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. Le protocole est largement utilisé et dispose donc de liquidités très nombreuses pour une très large gamme de jetons. Vous pouvez facilement l'intégrer dans votre dApp pour permettre, par exemple, aux utilisateurs d'échanger leur ETH contre du DAI.

Malheureusement, à l'heure où ces lignes sont écrites, l'intégration est uniquement proposée pour Uniswap v1 et non pour la toute nouvelle version v2(opens in a new tab).

Sablier

Sablier(opens in a new tab) permet aux utilisateurs d'effectuer des paiements 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 sous-graphe(opens in a new tab).

Et après ?

Si vous avez des questions sur create-eth-app, allez sur le serveur de la Communauté Sablier(opens in a new tab), où vous pouvez entrer en contact avec les auteurs de create-eth-app. Dans un premier temps, 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.