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 directement 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 Browserify, vous pouvez utiliser la ligne JavaScript suivante :

1const Web3 = require("web3")
Copier

Maintenant que nous avons inclus la bibliothèque dans le projet, nous devons l'initialiser. Votre projet doit pouvoir communiquer avec la blockchain. La plupart des bibliothèques 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 avez un nœud ou une instance de ganache qui s'exécute sur votre ordinateur (opens in a new tab), cela ressemblera à ceci :

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

Si vous souhaitez accéder directement à un nœud hébergé, vous trouverez des options sur les nœuds en tant que service.

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 sommet de la blockchain. Vous pouvez également utiliser les appels de fonction await/async pour éviter d'imbriquer des callbacks 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 voir 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 car, en arrière-plan, la bibliothèque effectue des appels JSON-RPC au nœud 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 l'extrait de code pour détecter si un portefeuille MetaMask est disponible et essayer de l'activer si c'est le cas. Cela vous permettra par la suite de lire le solde de l'utilisateur et de lui permettre de valider les transactions que vous souhaitez lui faire effectuer sur la blockchain Ethereum :

1if (window.ethereum != null) {
2  state.web3 = new Web3(window.ethereum)
3  try {
4    // Demander l'accès au compte si nécessaire
5    await window.ethereum.enable()
6    // Comptes maintenant exposés
7  } catch (error) {
8    // L'utilisateur a refusé l'accès au compte...
9  }
10}
Afficher tout
Copier

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

Dernière mise à jour de la page : 21 août 2025

c (opens in a new tab)

p (opens in a new tab)

n (opens in a new tab)

+10

Voir les contributeurs