Configurer web3.js pour utiliser la blockchain Ethereum en JavaScript

Dans ce tutoriel, nous allons voir comment débuter avec web3.js(opens in a new tab) pour interagir avec la blockchain Ethereum. Web3.js peut être utilisé à la fois en front-end et en back-end pour lire les données de la blockchain, effectuer des transactions et même déployer des contrats intelligents.

La première étape consiste à inclure web3.js dans votre projet. Pour l'utiliser dans une page web, vous pouvez importer la bibliothèque en utilisant un CDN comme JSDeliver.

1<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

Si vous préférez installer la bibliothèque pour l'utiliser dans votre back-end ou pour un projet front-end qui a recours à un « build », vous pouvez l'installer via npm :

npm install web3 --save

Ensuite, pour importer Web3.js dans un script Node.js ou un projet frontend, vous pouvez utiliser l'instruction JavaScript suivante :

1const Web3 = require("web3")
 Copier

Maintenant que nous avons importé la bibliothèque au sein du projet, nous devons l'initialiser. Notre projet doit être en mesure de communiquer avec la blockchain. La plupart des librairies Ethereum communiquent avec un nœud via des appels RPC. Pour lancer notre fournisseur Web3, nous instancierons une instance Web3 en passant comme constructeur l'URL du fournisseur. Si vous disposez d'un nœud ou d'une instance Ganache qui s'exécute sur votre ordinateur(opens in a new tab) cela ressemblera à ça :

1const web3 = new Web3("http://localhost:8545")
 Copier

Si vous souhaitez accéder directement à un nœud hébergé, vous pouvez utiliser Infura. Vous pouvez également utiliser les programmes gratuits fournis par Cloudflare(opens in a new tab), Moralis(opens in a new tab), ou Alchimie(opens in a new tab):

1const web3 = new Web3("https://cloudflare-eth.com")
 Copier

Pour vérifier que nous avons correctement configuré notre instance Web3, nous allons essayer de récupérer le dernier numéro de bloc en utilisant la fonction getBlockNumber. Cette fonction accepte une fonction de rappel comme paramètre et retourne le numéro de bloc sous la forme d'un entier.

1var Web3 = require("web3")
2const web3 = new Web3("https://cloudflare-eth.com")
3
4web3.eth.getBlockNumber(function (error, result) {
5  console.log(result)
6})
 Copier

Si vous exécutez ce programme, il affichera simplement le dernier numéro de bloc : le haut de la blockchain. Vous pouvez également utiliser les appels de fonctions await/async pour éviter d'imbriquer les rappels dans votre code :

1async function getBlockNumber() {
2  const latestBlockNumber = await web3.eth.getBlockNumber()
3  console.log(latestBlockNumber)
4  return latestBlockNumber
5}
6
7getBlockNumber()
 Copier

Vous pouvez consulter toutes les fonctions disponibles sur l'instance Web3 dans la documentation officielle de Web3.js(opens in a new tab).

La plupart des bibliothèques Web3 sont asynchrones parce qu'en arrière-plan, la bibliothèque fait appel au serveur JSON RPC pour accéder au noeud qui renvoie le résultat.

Si vous travaillez dans le navigateur, certains portefeuilles injectent directement une instance Web3 et vous devriez essayer de l'utiliser dans la mesure du possible, surtout si vous prévoyez d'interagir avec l'adresse Ethereum de l'utilisateur pour effectuer des transactions.

Voici le snippet pour détecter si un portefeuille MetaMask est disponible et si c'est le cas, tenter de l'activer. Cela vous permettra plus tard de lire le solde de l'utilisateur et de valider les transactions que vous souhaitez faire sur la blockchain Ethereum :

1if (window.ethereum != null) {
2  state.web3 = new Web3(window.ethereum)
3  try {
4    // Request account access if needed
5    await window.ethereum.enable()
6    // Accounts now exposed
7  } catch (error) {
8    // User denied account access...
9  }
10}
Afficher tout
 Copier

Des alternatives aux web3.js comme Ethers.js(opens in a new tab) existent et sont également couramment utilisées. Dans le prochain tutoriel, nous verrons comment prendre en charge facilement les nouveaux blocs entrants sur la blockchain et voir ce qu'ils contiennent(opens in a new tab).