Tutoriel développement Ethereum : Etape 2 Une application web dans la blockchain Ethereum

Nous avons vu dans l’étape précédente comment créer un smart contract et comment le déployer dans la blockchain.

Nous allons voir maintenant comment créer une web application sur qui se connectera à la blockchain Ethereum pour y réaliser des transactions avec un smart contract.

Pour rappel nous avons comme contexte un élevage qui contient 16 enclos et nous souhaitons avoir une application dans la blockchain qui permet de gérer les adoptions et de retrouver facilement le propriétaire d’un animal. Il s’agit avant tout d’une situation d’apprentissage nous permettant de voir comment fonctionne le développement d’un contrat intelligent sur Ethereum.

Nous allons donc créer une page web pour interagir avec la blockchain.

Nous allons pour cela créer une page HTML avec web3.js : c’est un ensemble de librairies permet d’interagir avec un smart contract. Le but de ce tutoriel n’est pas d’apprendre le HTML et le Javascript, nous considérerons que vous possédez déjà des bases solides sur ces domaines (il existe sinon plein d’excellents tutoriels sur ces langages).
La Truffle box que nous avons installé dans l’étape précédente contient déjà le HTML/CSS et javascript du projet. L’ensemble est visible dans le dossier ‘src’ de notre projet. Nous allons uniquement nous concentrer ici sur ce qui concerne la blockchain.

Le fichier index.html est on ne peut plus basique, il contient de quoi gérer l’affichage des animaux, et les librairies javascript nécessaires.

Ouvrez maintenant le fichier /src/js/app.js, c’est lui que nous allons compléter avec des fonctionnalités spécifiques de web3. Il contient tout d’abord un objet App global qui va gérer l’ensemble de notre application. Une fonction init s’occupe de charger les données des animaux qui ont été entrées au préalable dans un fichier JSON, puis d’appeler web3.

Notre première tâche consiste à nous connecter à une instance web3, soit par l’intermédiaire d’une connexion déjà présente (par exemple en utilisant l’extension Metamask sur Chrome, ce que nous ferons par la suite), soit à nous connecter à Ganache localement si aucune instance n’existe dans le navigateur.

Nous allons donc remplir le squelette de la fonction initWeb3 présente dans notre fichier avec ceci :

if (typeof web3 !== 'undefined') {
App.web3Provider = web3.currentProvider;
} else {
// Si aucune connexion web3 n'existe, nous allons nous connecter à Ganache
App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
}
web3 = new Web3(App.web3Provider);

Une fois connecté à la blockchain grâce à web3, nous allons devoir nous connecter au smart contrat, ici aussi Truffle apporte une grande aide puisqu’il permet d’éviter de devoir entrer manuellement l’adresse du contrat, par exemple lors des migrations ou le contrat restera synchronisé automatiquement.

Nous allons donc avoir notre fonction initContract sous cette forme :

$.getJSON('Adoption.json', function(data) {
// On récupère les données bytecode du contrat
var AdoptionArtifact = data;
App.contracts.Adoption = TruffleContract(AdoptionArtifact);

// On utilise le provider définit dans la section précédente
App.contracts.Adoption.setProvider(App.web3Provider);

// On vérifie si un animal est déjà adopté
return App.markAdopted();
});

Plusieurs choses importantes ici : tout d’abord on récupère le fichier .json du contrat qui avait été créé à l’étape précédente au moment de la compilation du contrat. Ensuite, on se connecte au provider, et enfin, on lance une fonction markAdopted qui vérifier si un animal est déjà adopté.

Remplissez donc cette nouvelle fonction markAdopted avec le code suivant :

var adoptionInstance;

App.contracts.Adoption.deployed().then(function(instance) {
adoptionInstance = instance;

return adoptionInstance.getAdopters.call();
}).then(function(adopters) {
for (i = 0; i < adopters.length; i++) {
if (adopters[i] !== '0x0000000000000000000000000000000000000000') {
$('.panel-pet').eq(i).find('button').text('Success').attr('disabled', true);
}
}
}).catch(function(err) {
console.log(err.message);
});

Ils se déroulent ici plusieurs étapes importantes, puisqu’on se connecte au contrat, et on utilise la méthode getAdopters du contrat intelligent, si vous vous souvenez de l’étape précédente, il s’agit de celle qui permet de récupérer toute la liste des propriétaires, et enfin, si l’adresse a déjà été associée à un animal, on désactive le bouton d’adoption.
A noter aussi dans cette étape : l’utilisation de la méthode call(), qui a l’énorme avantage de ne pas envoyer de transaction, et donc de ne pas consommer d’ether.

Dernière fonction à écrire, celle qui permet d’adopter un animal, elle s’appelle ici handleAdopt, qui va maintenant contenir le code suivant :

var adoptionInstance;

web3.eth.getAccounts(function(error, accounts) {
if (error) {
console.log(error);
}

var account = accounts[0];

App.contracts.Adoption.deployed().then(function(instance) {
adoptionInstance = instance;

// Execute adopt as a transaction by sending account
return adoptionInstance.adopt(petId, {from: account});
}).then(function(result) {
return App.markAdopted();
}).catch(function(err) {
console.log(err.message);
});
});

Les étapes importantes ici :
– On récupère l’adresse de l’utilisateur
– On déclenche la fonction d’adoption (.adopt) qui va envoyer au contrat l’ID de l’animal adopté et l’adresse Ethereum. Contrairement à tout à l’heure, des données seront modifiées sur la blockchain, et il est donc obligatoire d’indiquer le ‘from‘ puisque cette transaction aura un coût en GAS.
– Enfin, si tout s’est bien passé, on déclenche la fonction qui va marquer un chien adopté que l’on a créé juste avant (markAdopted)

Explication sur le GAS (gaz) dans la blockchain Ethereum

Le gaz (la traduction française la plus couramment utilisée, même si le terme essence en anglais représente plus l’utilité du concept), est la plus petite unité de l’Ether, et permet de rémunérer ceux qui utilise leur puissance de calcul pour sécuriser et valider les blocks Ethereum, ceux qu’on appelle les mineurs dans le fonctionnement des blockchains. Il s’agit donc d’un infime coût de transaction.

C’est terminé ! Enfin presque, puisque devons d’abord installer l’extension pour Google Chrome METAMASK qui permet d’interragir avec une dApp très simplement, en injectant dans le navigateur une instance web3, ce que nous avons besoin comme nous l’avons vu au début de cette étape avec la ligne ‘web3.currentProvider’.

Installation et configuration de METAMASK

Bon, je parle beaucoup de Google Chrome car je l’utilise, mais l’extension existe aussi pour Firefox ou Opera, et il existe même un navigateur ‘Brave’ qui l’incorpore directement. Dans tous les cas, rendez vous ici pour l’installer : https://metamask.io/

Une fois l’installation terminée, cliquez sur le renard en haut à droite à côté de l’url en cours, puis sur ‘restore from seed phrase‘, puis copié/collé depuis Ganache la liste de mots qui se situe en haut à gauche dans MNEMONIC. En dessous entrez le mot de passe que vous souhaitez utiliser.

Il faut maintenant configurer Metasmask pour se connecter à notre blockchain local, car il est par défaut configuré pour fonctionner sur la blockchain réel Ethereum. Cliquer en haut à gauche de la fenêtre Metamask sur ‘Main Network‘ et sélectionnez dans la liste ‘Custom RPC’, dans ‘New RPC url’ entrez l’adresse de notre blockchain de dev : HTTP://127.0.0.1:7545 , puis sauvegarder en cliquant sur SAVE.

Si tout a fonctionné normalement, vous devriez voir dans la fenêtre Metamask le début d’adresse du premier compte Ethereum, qui doit être le même que dans Ganache, avec le même nombre d’ETHER, comme sur la capture suivante :

Pour lancer notre test, nous allons utiliser lite-server, un petit plugin node qui permet de faire tourner un serveur web localement, et qui est un inclut dans la truffle box que nous utilisons, il est déjà installé et configuré, il n’y a rien à faire de plus que l’utiliser.

Tout est prêt ! il suffit maintenant de lancer la commande suivante :

 npm run dev

Ce qui va ouvrir le navigateur avec l’application. Lorsque vous cliquez sur ‘Adopt‘, une fenêtre METASMAK vous demandera de confirmer la transaction. Vous pouvez cliquer sur SUBMIT pour valider la transaction. Si tout fonctionne, elle apparaîtra dans Ganache dans l’onglet transaction sous la forme d’un CONTRACT CALL, et dans metamask à l’heure ou vous avez validé.

Vous verrez alors dans la fenêtre de l’application le statut du chien sur lequel vous avez cliqué changer en ‘Success’, et il n’est plus disponible à l’adoption. (rechargez sinon la page du navigateur).

C’est terminé !
Vous avez désormais une dApp qui fonctionne, et avez si vous avez suivi ce tutoriel depuis le début réussi plusieurs étapes importantes :
– Créer un smart contract
– Déployer celui-ci dans une blockchain local
– Tester toutes les fonctionnalités de celui-ci grâce à Truffle
– Créer une application web avec web3.js
– Interagit sur le web avec votre smart contract grâce à Metamask