Une page web qui communique avec Ethereum grâce à web3.js

2

Pour développer une page web qui pourra interagir sur la blockchain Ethereum, nous devons utiliser une bibliothèque javascript appelée web3.js

Celle-ci permet d’entrer l’adresse d’un smart contract et d’appeler les fonctions qu’il contient, en passant éventuellement les paramètres nécessaires.
Pour l’installer, vous pouvez utiliser votre gestionnaire de paquet habituel (si vous utiliser npm :
npm install web3), ou depuis Github sur la page officiel du projet en téléchargement simplement le fichier js à cette adresse: https://github.com/ethereum/web3.js/

Nous pouvons maintenant charger cette bibliothèque simplement comme ceci :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Ethereum connexion</title>
    <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="web3.min.js"></script>
  </head>
  <body>
 
  
  </body>
</html>

Avant de s’attaquer au code proprement dit de notre application, il faut expliquer comment fonctionne un site qui interagit avec la blockchain. Celui-ci aura besoin d’un élément qui fait la connexion avec la blockchain:

  • Soit, il devra se connecter à un noeud de la blockchain. Pour rappel, chaque nœud possède une copie de toutes les données présentes dans la chaîne de blocs, c’est ce qui la rend sécurisée car tous les nœuds devront nécessairement valider les transactions. Vous pouvez alors soit héberger vous même un nœud complet (ce qui peut consommer pas mal de ressources/espace disque), soit utiliser un service tiers, comme Infura , Infura a l’avantage de posséder plusieurs noeuds et un système de cache. Pour utiliser Infura , il suffit de le déclarer en tant que provider avec la ligne suivante
    var web3 = new Web3(new Web3.providers.WebsocketProvider("wss://mainnet.infura.io/ws"));
    
  • Soit, un outil qui permet à l’utilisateur d’utiliser son propre portefeuille Ethereum pour signer ses transactions. Nous avons déjà présenter l’outil Metamask qui permet de faire cela. Il est aussi possible d’utiliser le navigateur Mist qui contient cette fonctionnalité. Techniquement le fonctionnement sera le même dans les deux cas. Nous allons privilégier cette deuxième solution pour l’instant, car Infura fera l’objet d’un tutoriel dédié. Nous allons maintenant ajouter un code qui permettra de vérifier que le visiteur possède bien l’extension Metamask ou le navitateur Mist
    window.addEventListener('load', function() {
    
      // Vérifier si web3 a bien été injecté (Mist/MetaMask)
      if (typeof web3 !== 'undefined') {
        // Si oui, on peut utiliser l'injection
        web3js = new Web3(web3.currentProvider);
      } else {
        // si non, on peut ajouter ici un code qui invite à télécharger l'extension
      }
    
      // on peut démarrer l'utilisation de l'application
      startApp()
    
    })

    Communiquer avec un smart contract

    Pour communiquer avec un smart contract depuis une page web, nous allons instancier web3 comme indiqué ci dessus avec 2 paramètres, tout d’abord l’adresse du contrat sur la blockchain, et ce qu’on appelle l’ABI du contrat , que l’on peut traduire par « Application Binary Interface » (Interface Binaire d’Application). Il s’agit d’une représentation au format JSON des fonctions du contrat. Cela permet à web3 de savoir comment communiquer avec lui. Vous pourrez retrouver l’ABI d’un contrat en suivant ce tutoriel Une fois l’ABI récupéré il suffit de l’inclure dans un fichier JS et de l’ajouter dans l’entête HTML de notre page en ajoute cette ligne
    <script language="javascript" type="text/javascript" src="abi_message.js"></script>
    Je vous recommande de lui donner un nom de variable(qui sera utilisé plus tard dans la connexion au contrat), ce qui donnera alors pour notre fichier abi_message.js :
    var messageABI = [
    	{
    		"constant": false,
    		"inputs": [
    			{
    				"name": "_nouveaumessage",
    				"type": "string"
    			}
    		],
    		"name": "definirMessage",
    		"outputs": [],
    		"payable": false,
    		"stateMutability": "nonpayable",
    		"type": "function"
    	},
    	{
    		"inputs": [],
    		"payable": false,
    		"stateMutability": "nonpayable",
    		"type": "constructor"
    	},
    	{
    		"constant": true,
    		"inputs": [],
    		"name": "voirMessage",
    		"outputs": [
    			{
    				"name": "",
    				"type": "string"
    			}
    		],
    		"payable": false,
    		"stateMutability": "view",
    		"type": "function"
    	}
    ]
    

    Le javascript pour lire sur la blockchain

    Pour se connecter et lire sur la blockchain depuis notre page web, nous devons suivre plusieurs étapes :
    – Tout d’abord, établir la connexion en récupérant la session web3 de Metamask avec cette ligne
    web3js = new Web3(web3.currentProvider);
    – Nous allons ensuite nous connecter au contrat en indiquant l’ABI de celui ci et son adresse (il faudra qu’il est été au préalable déployé depuis Remix)
           var MessagesContract = web3.eth.contract(messageABI);
           var Message = MessagesContract.at("0x72c17c6e483febf50fd9099ea0f48532128ffc38");
    – Maintenant que la connexion est établie, il suffit d’appeler notre méthode VoirMessage, sans oublier le callback qui pourra nous informer en cas de problème :
           Message.voirMessage(function(error, result){
            if(!error){
              console.log(result);
              }
           else
             console.error(error);
           });
    
    C’est terminé ! En ouvrant la console, vous verrez désormais apparaître le dernier message enregistré sur votre contrat !

2 Commentaires

  1. Bonsoir et merci pour votre tutoriel. J’ai créé un token ERC-20 et Je voudrais savoir comment faire pour générer automatiquement une adresse Wallet d’un token ERC-20 à chaque fois qu’un client ouvre un compte dans mon site internet. Comment faire apparaître de manière automatique une adresse Wallet d’un token ERC-20 dans un site internet à chaque fois qu’un client ouvre un compte. Merci

LAISSER UN COMMENTAIRE

Please enter your comment!
Please enter your name here

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.