Ethereum et Angular — Part 2

Component

Dans l’article précédent nous avons mis en place un module angular pour interagir avec la blockchain Ethereum.

Maintenant que nous avons notre Module prêt à l’emploi, essayons de récupérer le compte actuellement utilisé. Pour cela je vais me connecter à un compte MetaMask sur mon navigateur. Vous pouvez bien entendu utiliser Geth ou Parity ou n’importe quel autre client ethereum si vous avez un nœud installé sur votre ordinateur.

Tout d’abord nous allons importer notre module dans app.module.ts :

imports : [BrowserModule, EthereumModule]

Puis dans app.component.ts injectez le service EthService (remarque : n’oubliez pas d’ajouter EthService dans la liste des providers de EthereumModule) :

constructor(private eth : EthService) {}

Ajoutons un observable address$ qui s’abonne sur l’adresse actuellement utilisée. Utilisons le pipe async dans le HTML pour afficher cette adresse. Dans app.component.html :

<p>Current Account : {{ address$ | async }} </p>

Avec le pipe async nous n’avons pas besoin de gérer l’abonnement et le désabonnement à cet observable, Angular s’en charge pour nous.

Maintenant lions address$ à notre méthode currentAccount. Dans ngOnInit :

this.address$ = this.eth.currentAccount()

Le component devrait ressembler à cela :

Lançons ng serve. Et là, rien ne s’affiche…

Le problème des zones Angular

Le problème est que this.eth.currentAccount se fait en dehors de la zone de Angular.

Pour résoudre ce problème il faut utiliser le service NgZone mis à disposition par Angular. Dans le constructeur il suffit d’ajouter :

constructor(private eth : EthService, private zone : NgZone) {}

L’inconvénient d’utiliser NgZone est que l’on doit s’abonner à l’observable pour réaliser le changement d’UI à l’intérieur de la zone Angular. Cela implique de passer notre address$ : Observable<string> en address : string, d’appeler cette variable dans le HTML, et de gérer l’abonnement et le désabonnement à notre observable nous-même.

Une fois toutes les modifications réalisées, le component devrait ressembler à cela :

On voit bien que cela devient beaucoup plus compliqué à gérer et rend le code beaucoup moins agréable à lire. De plus, utiliser NgZone donne une impression de hack, qui n’est pas très souhaitable.

Une solution long terme: NGRX

La librairie NGRX implémente les principes de Redux dans Angular. Redux a été une petite révolution dans le monde de React, et NGRX nous permet d’intégrer cette philosophie de code pour Angular, ainsi que tous les outils qui vont avec.

Utiliser NGRX nous permet de maintenir un store qui contient toutes les données que l’on souhaite manipuler. Cela nous sert d’interface entre Angular et la blockchain pour récupérer et stocker les données qui nous intéressent. Cela nous permet de nous affranchir de NgZone et d’avoir une maîtrise plus fine sur le chargement des données depuis Ethereum.

NGRX est une technologie assez récente mais beaucoup de développeurs Angular l’ont déjà adoptée. Nous aurions pu recréer un store redux à la main pour ne pas imposer l’utilisation de NGRX, mais je pense que cela serait contre-productif. Pour ceux qui ne sont pas familier avec NGRX, c’est l’occasion de découvrir cette librairie et tous les avantages qu’elle offre (du moins certains).

Cependant cette série d’articles n’a pas pour objectif de former à NGRX dans ses détails. Je vous conseille le très bon cours de Todd Motto pour mieux découvrir cette libraire, ou les vidéos de Angular-Firebase qui expliquent très bien le fonctionnement de NGRX.

Originally published at medium.com on March 26, 2018.