Il y a un peu plus d’un an Ă  prĂ©sent, nous avons dĂ©veloppĂ© une solution d’horodatage basĂ©e sur une blockchain. Elle permet de prouver l’antĂ©rioritĂ© d’un contenu (une idĂ©e ou une crĂ©ation par exemple) via l’utilisation d’une blockchain publique Ethereum directement depuis son navigateur. Donc sans organe central de contrĂŽle. Il s’agit d’un cas d’usage simple mais parfaitement applicable aux besoins mĂ©tiers des applications de nos clients : sceller un contenu et ses mĂ©tadonnĂ©es de maniĂšre sĂ»re et pĂ©renne. Le code source est publiĂ© sous la licence Apache 2.

Pour faciliter la lecture, nous vous proposons une sĂ©rie de cinq articles qui prĂ©sentent trois points de vue complĂ©mentaires de l’outil :

  1. Point de vue conceptuel : 🎹 Comprendre les notions de base d’une blockchain publique
  2. Point de vue utilisateur : đŸ•ș Interagir avec l’application dĂ©centralisĂ©e
  3. Point de vue dĂ©veloppeur : 🏭 Configurer son environnement de dĂ©veloppement
  4. Point de vue dĂ©veloppeur : đŸ€ Comprendre le dĂ©veloppement du smart contract
  5. Point de vue dĂ©veloppeur : đŸ’» Comprendre le dĂ©veloppement du client

Ce cinquiĂšme et dernier article est l’occasion d’aborder le dĂ©veloppement du client web qui interagit avec le smart contract dĂ©veloppĂ© et dĂ©ployĂ© prĂ©cĂ©demment.

Les sources sont disponibles dans le sous-projet front. Il a principalement été écrit avec VueJS pour la présentation et web3 pour les appels à la blockchain.

Nous nous intéressons ici uniquement aux interactions avec la blockchain. Le code est simplifié dans ce qui suit pour se focaliser sur ce qui est essentiel.

# Module blockchain (web3 / jssha)

Ce qui concerne purement la blockchain a été placé dans un module dédié placé dans front/src/lib/BlckchnAntProver.js.

web3.js est un ensemble de librairies qui permet d’interagir avec un nƓud Ethereum local ou distant via HTTP, IPC ou WebSocket. On l’importe :

Nous importons également les métadonnées produites lors de la compilation du smart contract AntProver.sol (cf. article précédent) afin de référencer le contrat ABI et de récupérer les adresses du smart contract déployé dans différents réseaux :

L’identifiant du rĂ©seau choisi par l’utilisateur dans Metamask est rĂ©cupĂ©rĂ© via web3 :

L’initialisation est rĂ©alisĂ©e par un appel Ă  la fonction init qui prend deux paramĂštres :

  • allowGanache : pour permettre un fallback Ganache. Par exemple on l’interdit en production avec le test process.env.NODE_ENV !== 'production'
  • _hashAddedCallback : un callback optionnel pour rĂ©agir lorsqu’un Ă©vĂ©nement arrive

Pour l’initialisation, on crĂ©e une instance de Web3 en utilisant par ordre de prĂ©fĂ©rence :

  1. window.ethereum injecté par Metamask (derniÚre API)
  2. window.web3.currentProvider également injecté par Metamask dans ses versions plus anciennes
  3. Web3.providers.HttpProvider : un provider HTTP pour se connecter à Ganache en fallback si on l’a permis

Les commentaires indiquent les Ă©tapes d’initialisation :

L’initialisation (ou la rĂ©initialisation) de l’accĂšs au smart contract est rĂ©alisĂ©e dans la fonction initContract. Elle consiste essentiellement Ă  crĂ©er une instance de web3.eth.Contract et relayer l’évĂ©nement HashAdded via le callback de maniĂšre Ă  faire rĂ©agir l’application (pour rappel, les Ă©vĂ©nements entrants sont Ă©coutĂ©s afin de gĂ©nĂ©rer les certificats pdf au besoin) :

Pour le rĂ©fĂ©rencement d’un contenu, on utilise directement la fonction importĂ©e des mĂ©tadonnĂ©es du smart contract en traitant la rĂ©ponse avec un callback aprĂšs s’ĂȘtre assurĂ© d’avoir bien le compte utilisateur (ici, on prend le premier) :

Les fonctions de lecture de donnĂ©es rĂ©pondent au mĂȘme principe. Par exemple, la recherche d’un contenu prend un hash en entrĂ©e et appelle un callback pour traiter le retour :

L’écriture de quelques fonctions de manipulation de hash a Ă©tĂ© nĂ©cessaire  : readUploadedFileAsText, calculateHashFromBytes et calculateHashFromFile. Ces derniĂšres ne sont pas dĂ©taillĂ©es dans cet article. Je vous invite Ă  consulter la librairie jssha utilisĂ©e en background.

Pour finir sur ce module, les fonctions sont exportĂ©es afin d’ĂȘtre utilisĂ©es par l’application. L’ensemble des fonctions est le suivant :

Ainsi ce module permet de traiter l’aspect purement liĂ© Ă  la blockchain : initialiser la connexion au smart contract dĂ©ployĂ© dans la blockchain sĂ©lectionnĂ©e par l’utilisateur dans Metamask, s’assurer que le compte de l’utilisateur est sĂ©lectionnĂ© avant de tenter une Ă©criture dans la blockchain (ou provoquer sa sĂ©lection), se charger des appel Ă  la blockchain et mettre en place l’écoute des Ă©vĂ©nements afin de les relayer.

La suite est moins dĂ©taillĂ©e dans la mesure oĂč il s’agit d’utiliser les fonctions de ce module.

# Initialisation

L’application est constituĂ©e de bloc fonctionnels et techniques. Chacun des blocs est un composant Vue.js crĂ©Ă© dans l’application App.vue. On retrouve logiquement l’inclusion des balises dans le template de l’application :

Ainsi que l’initialisation Ă©voquĂ©e plus haut rĂ©alisĂ©e lorsque l’application Vue.js est montĂ©e et que la page est chargĂ©e.

On initialise le lien avec la blockchain et on stocke les informations dans le store Vuex qui permet la gestion d’états dans l’application. Ce dernier est utilisĂ© Ă  la fois pour les Ă©vĂ©nements entrants et pour les informations techniques sur la blockchain choisie :

# Composant d’écriture

Le bloc J’ancre un contenu est implĂ©mentĂ© par le composant Upload.vue.

Le module blockchain dĂ©crit prĂ©cĂ©demment permet d’interagir avec la blockchain sans connaĂźtre les dĂ©tails sous-jacents. On utilise la fonction de calcul du hash lorsqu’un fichier est chargĂ© :

Ainsi que la fonction d’envoi d’un hash lorsque le formulaire est soumis :

# Composant de lecture

La recherche du rĂ©fĂ©rencement d’un fichier du bloc Je vĂ©rifie un contenu est rĂ©alisĂ©e dans le composant Check.vue.

LĂ  aussi, le composant est agnostique vis Ă  vis de la blockchain. On calcul le hash lorsqu’un fichier est chargĂ© :

Et on effectue la recherche lorsque le formulaire est soumis :

# Smart contract et ABI

Le contrat ABI (Application Binary Interface) dĂ©finit la maniĂšre d’interagir avec un smart contract. Il s’agit d’une interface entre le smart contract et un client.

Nous avons vu au début de cet article que nous avons importé le contrat ABI du smart contract que nous avons développé initialement puisque nous le versionnons dans les sources :

Nous aurions Ă©galement pu le rĂ©cupĂ©rer Ă  partir de la blockchain. Par exemple, le smart contract est dĂ©ployĂ© dans la blockchain Goerli Ă  l’adresse 0xE9D0E1857CcaAE1E608E6e9b5fdFa1CD6D267733 et son code source est vĂ©rifiĂ©. Le contrat ABI est disponible au format json Ă  cette adresse.

 

# Synthùse de l’article

Cet article illustre le dĂ©veloppement d’un client web Ethereum.

Il faut retenir que l’extension Metamask expose son API en injectant l’objet ethereum dans la page que nous fournissons lors de l’initialisation de l’application avec web3, librairie de communication avec les blockchains Ethereum.

Pour simplifier l’interaction avec un smart contract dĂ©ployĂ© dans une blockchain Ethereum, il est conseillĂ© de commencer par Ă©crire une API dĂ©diĂ©e dans un module afin de traiter l’initialisation, la sĂ©lection de compte, les appels concrets et relayer les Ă©vĂ©nements.

Dans le reste de l’application, il s’agit ainsi d’utiliser cette API qui rend la consommation agnostique et facilite l’écriture du code, sa comprĂ©hension et sa maintenance.

Nous pouvons exploiter le contrat ABI gĂ©nĂ©rĂ© lors de la compilation du smart contract ou le rĂ©cupĂ©rer lorsque ce dernier est dĂ©ployĂ©. Il fournit dĂ©jĂ  un premier niveau d’API avec les objets mĂ©tiers du smart contract.

# SynthĂšse de la sĂ©rie d’articles

Cette sĂ©rie d’articles touche Ă  sa fin.

Le cas d’usage se prĂȘte bien Ă  l’exercice pĂ©dagogique : faire de la preuve d’antĂ©rioritĂ© Ă  partir d’un smart contract dĂ©ployĂ© dans une blockchain, directement depuis son navigateur.

Nous avons commencĂ© avec un point de vue conceptuel dans le premier article en expliquant ce qu’apporte la blockchain dans le cas d’usage : notamment la simplicitĂ© administrative, le coĂ»t d’infrastructure quasi nul et la rĂ©silience. Nous avons Ă©galement synthĂ©tisĂ© le fonctionnement d’une blockchain Ethereum : la sĂ©curitĂ© assurĂ©e par la crypto et les consensus, l’organisation du stockage en chaĂźne de blocs distribuĂ©e, le coĂ»t des transactions et les jetons de monnaie et ce qu’apportent les smarts contracts. La suite du premier article a Ă©tĂ© consacrĂ©e Ă  la maniĂšre d’interagir avec une blockchain depuis son navigateur : l’extension Metamask et son portefeuille, comment l’alimenter pour rĂ©aliser des micro-paiements. Puis nous avons montrĂ© en quoi une blockchain publique est transparente : les opĂ©rations sont visibles ainsi que les pseudonymes de leurs auteurs. Les transactions d’une blockchain ne sont donc pas forcĂ©ment anonymes.

Dans un second temps, nous avons exposĂ© un point de vue utilisateur dans le deuxiĂšme article avec la dĂ©monstration de l’ergonomie de l’application : la configuration initiale de Metamask, puis l’utilisation de l’outil qui reste classique hormis lors d’une opĂ©ration d’écriture. En effet, le consentement de l’utilisateur est demandĂ© dans la mesure oĂč ce dernier supporte le coĂ»t de la transaction. En revanche, aucun frais n’est appliquĂ© pour la consultation.

La suite est consacrée au point de vue du développeur en trois temps : la configuration de son environnement de développement, le développement du smart contract et le développement du client web.

Les sources du projet sont accessibles dans la mesure oĂč elles sont publiĂ©es sous la licence Apache 2. Pour les dĂ©veloppements, il est possible d’instancier une blockchain de dĂ©veloppements avec Ganache. C’est cette blockchain qui est exploitĂ©e dans l’article 3 qui dĂ©crit comment compiler et le dĂ©ployer le smart contract dans celle-ci et comment servir le client web pour commencer Ă  valider son environnement.

Le dĂ©veloppement du smart contract est expliquĂ© dans l’article 4 : le langage solidity, le squelette, les structures et les variables, les fonctions d’écriture et de lecture, les prĂ©requis ainsi que la production d’évĂ©nements. Pour complĂ©ter l’article 3, nous prĂ©cisons la maniĂšre de gĂ©rer les migrations grĂące Ă  truffle et le dĂ©ploiement vers une blockchain publique officielle Ă  travers Infura.

Enfin, le dernier article expose une maniĂšre de produire le client web : l’écriture d’un module javascript dĂ©diĂ© aux interactions avec la blockchain via Metamask Ă  travers web3 et l’utilisation de cette API dans le reste de l’application qui constitue un projet classique dans la maniĂšre de l’aborder, l’ergonomie liĂ©e Ă  la configuration de son compte et le consentement mis Ă  part.

Je vous remercie d’avoir pris le temps de nous lire et vous invite Ă  nous laisser un commentaire Ă  la suite de cet article si vous avez des questions ou des remarques ou simplement pour nous indiquer si vous ĂȘtes arrivĂ©s jusque-lĂ  sain et sauf ! ⬎