Codez une page web connectée à une blockchain Ethereum

Depuis quelques années, le mot blockchain est sur toutes les lèvres. On en parle pour les cryptomonnaies, les NFT, les contrats intelligents et les fameuses DApps (applications décentralisées). Pourtant, pour beaucoup de développeurs web, tout cela semble encore réservé à un monde lointain, complexe et rempli de jargon technique.

Bonne nouvelle : ce n’est pas le cas.
Dans cet article, vous allez apprendre à créer votre première page web connectée à une blockchain, sans serveur, sans backend et sans ligne de code compliquée. Vous n’aurez besoin que de trois ingrédients : du HTML, du JavaScript et une bibliothèque comme Web3.js ou Ethers.js.

L’objectif ? Comprendre concrètement comment une simple page web peut interagir directement avec une blockchain comme Ethereum ou Polygon, et permettre à un utilisateur de se connecter avec son portefeuille (comme MetaMask), de lire son solde ou même d’envoyer une transaction — tout cela sans passer par un serveur centralisé.

Ce tutoriel ne s’adresse pas seulement aux experts du code. Au contraire, il est pensé pour être accessible à tous : que vous soyez débutant en développement web ou déjà à l’aise avec JavaScript, vous allez découvrir pas à pas comment fonctionnent les interactions Web3 côté navigateur.

À la fin de ce guide, vous serez capable de :

Créer une page HTML capable de détecter un portefeuille blockchain ;
Se connecter à un réseau de test (Ethereum Goerli ou Polygon Mumbai) ;
Lire des données publiques sur la blockchain ;
Comprendre comment les sites Web3 fonctionnent sans backend.

Et surtout, vous saurez comment passer de simple page web à petite application décentralisée (DApp), une compétence de plus en plus recherchée dans le monde du développement.

Comprendre les bases : blockchain, DApp et Web3
Préparer son environnement
Créer votre première page HTML connectée à la blockchain
Interagir avec la blockchain via Web3.js
Faire la même chose avec Ethers.js
Ajouter une interaction réelle : envoyer une transaction
Ce qui se passe en coulisse
- 7.1 Limites et bonnes pratiques

Comprendre les bases : blockchain, DApp et Web3

Avant de plonger dans le code, il est essentiel de comprendre ce que nous allons manipuler. La blockchain n’est pas seulement un mot à la mode : c’est une technologie qui change en profondeur la manière dont les données sont stockées, partagées et vérifiées.

1.1 Qu’est-ce qu’une blockchain, simplement ?

Imaginez un grand livre de comptes public, que tout le monde peut consulter, mais que personne ne peut falsifier.
Chaque fois qu’une transaction est ajoutée, elle est enregistrée dans un “bloc”, puis ce bloc est relié à tous les précédents pour former une “chaîne” de blocs — d’où le nom blockchain.

Chaque bloc contient :

Une liste de transactions ;
Un identifiant unique (appelé “hash”) ;
Le hash du bloc précédent.

Cela signifie que si quelqu’un tente de modifier une seule ligne dans un ancien bloc, tous les suivants deviennent invalides. C’est cette structure cryptographique qui rend la blockchain immuable et sécurisée.

La force de la blockchain vient du fait qu’elle est décentralisée.
Au lieu d’un serveur unique (comme c’est le cas pour un site classique), la blockchain repose sur des milliers de nœudsqui partagent et valident les données entre eux.
Aucun acteur unique ne peut “supprimer” une transaction, car elle est copiée et validée par le réseau entier.

1.2 Qu’est-ce qu’une DApp ?

Une DApp, ou Decentralized Application, est une application qui utilise une blockchain pour stocker ou vérifier ses données.
Contrairement à un site web classique qui s’appuie sur un serveur et une base de données centralisée (comme MySQL), une DApp se connecte directement à la blockchain via un portefeuille crypto comme MetaMask.

Prenons un exemple simple : Imaginons une DApp de vote.

Dans un site traditionnel, les votes seraient enregistrés dans une base de données hébergée sur un serveur.
Dans une DApp, les votes sont enregistrés directement sur la blockchain, ce qui les rend publics, vérifiables et impossibles à modifier.

Notre page web va donc devenir une interface capable de lire ou d’écrire des données sur la blockchain, sans dépendre d’un serveur. C’est cette indépendance qui rend les DApps si puissantes.

1.3 Le rôle de Web3.js et d’Ethers.js

Les bibliothèques Web3.js et Ethers.js servent d’intermédiaires entre le navigateur de l’utilisateur et la blockchain.
Elles permettent à votre JavaScript de :

Détecter si MetaMask (ou un autre portefeuille Web3) est installé ;
Se connecter au compte de l’utilisateur ;
Lire des informations (comme le solde en ETH ou MATIC) ;
Envoyer des transactions signées par l’utilisateur.

Autrement dit, ces bibliothèques remplacent le rôle du backend, en permettant à votre page web de communiquer directement avec la blockchain.

Web3.js est la plus ancienne et la plus connue. Elle a été développée par la fondation Ethereum et est très complète, mais parfois un peu verbeuse.

Ethers.js, plus récente, est plus légère, mieux structurée et très populaire auprès des développeurs modernes.
Dans ce tutoriel, nous verrons les deux, pour que vous puissiez choisir celle qui vous convient le mieux.

1.4 Ethereum et Polygon : quelle différence ?

Ethereum est la blockchain la plus utilisée pour les DApps. C’est elle qui a introduit les smart contracts, ces petits programmes exécutés directement sur la blockchain.
Mais Ethereum a aussi un inconvénient : elle peut être lente et coûteuse à cause des frais de transaction (“gas fees”).

C’est là qu’interviennent les sidechains comme Polygon, qui fonctionne comme une extension d’Ethereum.
Polygon permet d’effectuer des transactions plus rapides et moins chères, tout en restant compatible avec les outils Ethereum comme Web3.js ou MetaMask.

Pour notre premier projet, nous utiliserons un réseau de test :

Goerli pour Ethereum,
Mumbai pour Polygon.

Ces réseaux de test reproduisent exactement le fonctionnement d’une vraie blockchain, mais sans argent réel. Vous pourrez donc expérimenter librement, sans aucun risque.

1.5 Les concepts clés à connaître

Avant de passer au code, voici trois notions importantes à bien comprendre :

Le compte (ou adresse)
Sur la blockchain, tout utilisateur est identifié par une adresse unique, souvent représentée par une suite de caractères commençant par 0x.
Cette adresse correspond à une clé publique, associée à une clé privée connue uniquement de l’utilisateur.
La clé privée sert à “signer” les transactions, un peu comme une signature électronique.

Le réseau
Il existe plusieurs réseaux : le principal (mainnet), où circulent les vrais fonds, et des réseaux de test (testnets), utilisés pour le développement.
Lorsque vous configurez MetaMask, vous pouvez choisir sur quel réseau votre page web se connecte.

Le contrat intelligent (smart contract)
Un smart contract est un programme autonome qui s’exécute sur la blockchain.
Il peut gérer des transactions, des NFT, des votes, des jeux…
Dans ce premier tutoriel, nous n’allons pas encore créer de contrat, mais simplement interagir avec le réseau et le portefeuille.

Préparer son environnement

Avant d’écrire la moindre ligne de code, prenons quelques minutes pour préparer correctement notre environnement de travail.
L’objectif est simple : vous permettre de tester votre future page web en conditions réelles, c’est-à-dire avec une vraie connexion blockchain via votre navigateur.

2.1 Les outils nécessaires

Pour ce tutoriel, vous n’aurez besoin que de quelques éléments faciles à installer :

Un navigateur moderne
Google Chrome, Brave ou Firefox feront parfaitement l’affaire.
L’essentiel est qu’il soit compatible avec les extensions Web3, comme MetaMask.
Un éditeur de code
Vous pouvez utiliser Visual Studio Code (gratuit et très complet) ou même un simple éditeur de texte comme Sublime Text ou Notepad++.
L’objectif est de créer un petit fichier HTML et un fichier JavaScript.
L’extension MetaMask
C’est le cœur de notre expérience Web3.
MetaMask est un portefeuille numérique (wallet) qui s’intègre directement à votre navigateur et vous permet d’interagir avec la blockchain sans serveur.
Il est disponible gratuitement sur https://metamask.io.

Une fois ces outils prêts, nous pouvons passer à la configuration du réseau de test.

Pour allez plus loin, VS Code assité par l’IA

2.2 Installation et configuration de MetaMask

Après avoir installé MetaMask, cliquez sur son icône dans votre barre d’extensions.
La première fois, MetaMask vous proposera deux options :

Créer un nouveau portefeuille.
Importer un portefeuille existant.

Si vous débutez, choisissez Créer un portefeuille.
MetaMask vous demandera un mot de passe et vous fournira une phrase de récupération composée de 12 mots. Cette phrase est extrêmement importante : elle permet de restaurer votre compte en cas de perte.
Conservez-la précieusement, hors ligne, dans un endroit sûr.

Une fois votre compte créé, vous verrez apparaître une adresse commençant par 0x. C’est votre adresse Ethereum.
Nous allons maintenant connecter MetaMask à un réseau de test.

2.3 Choisir un réseau de test

Par défaut, MetaMask se connecte au Mainnet Ethereum, le réseau principal où les transactions coûtent de l’argent réel.
Pour apprendre sans risque, nous allons utiliser un réseau de test, qui fonctionne de la même manière, mais avec de la monnaie fictive.

Cliquez sur le menu déroulant en haut de MetaMask, puis sélectionnez Afficher les réseaux de test si ce n’est pas déjà activé.
Ensuite, choisissez un des réseaux suivants :

Goerli Test Network (Ethereum)
Mumbai Test Network (Polygon)

Si Polygon n’apparaît pas, vous pouvez l’ajouter manuellement :

Nom du réseau : Polygon Mumbai Testnet
Nouvelle URL RPC : https://rpc-mumbai.maticvigil.com/
ID de chaîne : 80001
Symbole : MATIC
Explorateur de blocs : https://mumbai.polygonscan.com/

Une fois ajouté, votre MetaMask sera prêt à interagir avec Polygon.

2.4 Obtenir des jetons de test (faucet)

Sur un réseau de test, les transactions nécessitent des jetons fictifs.
Heureusement, il existe des sites appelés faucets qui en distribuent gratuitement.

Par exemple :

Pour Goerli : https://goerlifaucet.com/
Pour Polygon Mumbai : https://faucet.polygon.technology/

Connectez votre MetaMask sur le site du faucet, entrez votre adresse (celle qui commence par 0x…), et cliquez sur Send Me Tokens.
Au bout de quelques secondes, vous verrez apparaître une petite quantité d’ETH ou de MATIC sur votre compte.

Ces jetons n’ont aucune valeur réelle, mais ils permettent de tester l’envoi de transactions et de payer les “frais de gas”.

2.5 Vérifier le bon fonctionnement

Pour vérifier que tout fonctionne, allez sur https://goerli.etherscan.io ou https://mumbai.polygonscan.com.
Collez votre adresse MetaMask dans la barre de recherche.
Vous devriez voir apparaître votre solde et les transactions récentes.

Si tout est en place, félicitations ! Vous êtes prêt à créer votre première page web Web3.

Créer votre première page HTML connectée à la blockchain

Nous allons maintenant coder une page web toute simple capable de détecter MetaMask et de se connecter à la blockchain.
Pas besoin de backend, ni de serveur PHP : tout se fait directement côté navigateur.

3.1 Structure de base du projet

Créez un nouveau dossier, par exemple web3-test, et à l’intérieur, créez un fichier nommé index.html.

Voici la structure de base :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Connexion à la blockchain Ethereum</title>
</head>
<body>
  <h1>Ma première page connectée à la blockchain</h1>
  <button id="connect">Se connecter à MetaMask</button>
  <p id="status">Non connecté</p>

  <script src="https://cdn.jsdelivr.net/npm/web3/dist/web3.min.js"></script>
  <script src="main.js"></script>
</body>
</html>

Ce fichier HTML contient :

Un titre pour identifier la page ;
Un bouton permettant à l’utilisateur de se connecter à MetaMask ;
Une balise <p> qui affichera l’état de la connexion ;
L’inclusion de la bibliothèque Web3.js via un CDN ;
Et enfin, notre futur script main.js où nous allons écrire la logique JavaScript.

3.2 Le script JavaScript de connexion

Dans le même dossier, créez un fichier main.js et copiez-y le code suivant :

const connectButton = document.getElementById("connect");
const statusText = document.getElementById("status");

connectButton.addEventListener("click", async () => {
  if (typeof window.ethereum !== "undefined") {
    try {
      const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
      const account = accounts[0];
      statusText.textContent = "Connecté avec : " + account;
      console.log("Adresse connectée :", account);
    } catch (error) {
      statusText.textContent = "Connexion refusée.";
    }
  } else {
    statusText.textContent = "MetaMask n'est pas installé.";
  }
});

Voyons ensemble ce que fait ce code :

Nous détectons si MetaMask est installé dans le navigateur grâce à window.ethereum.
Si oui, nous demandons la permission de nous connecter au portefeuille via eth_requestAccounts.
MetaMask affiche alors une fenêtre demandant à l’utilisateur de valider la connexion.
Si l’utilisateur accepte, nous récupérons son adresse et l’affichons sur la page.
Sinon, nous affichons un message d’erreur.

3.3 Testons notre page

Enregistrez vos fichiers, puis ouvrez index.html dans votre navigateur.
Cliquez sur le bouton Se connecter à MetaMask.
MetaMask devrait s’ouvrir et vous proposer de choisir un compte à connecter.
Une fois validé, votre adresse s’affiche sur la page.

Vous venez de créer votre première page web connectée à la blockchain Ethereum !

Même si ce n’est encore qu’une simple connexion, c’est déjà la base de n’importe quelle DApp moderne.

3.4 Explication du mécanisme

À ce stade, il est intéressant de comprendre ce qui vient de se passer :

Votre page HTML n’a jamais eu besoin d’un serveur. Tout le code est exécuté dans le navigateur.
MetaMask agit comme un intermédiaire sécurisé entre votre page et la blockchain.
Lorsqu’un utilisateur se connecte, MetaMask injecte une variable ethereum dans la fenêtre JavaScript.
Toutes les interactions passent par cette interface : lecture du solde, envoi de transaction, signature de message, etc.

Autrement dit, vous venez de créer un site Web3 statique, capable de communiquer avec la blockchain sans backend.

3.5 Et maintenant ?

Dans la prochaine étape, nous allons aller plus loin.
Nous verrons comment lire des données depuis la blockchain, par exemple le solde ETH ou MATIC du compte connecté, en utilisant Web3.js, puis la même opération avec Ethers.js.

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Vous apprendrez à manipuler ces bibliothèques pour créer une vraie interface dynamique, capable d’afficher les informations d’un utilisateur en temps réel.

Interagir avec la blockchain via Web3.js

Nous avons maintenant une page web capable de détecter MetaMask et de s’y connecter.
C’est un bon début, mais pour que notre application ait un vrai intérêt, il faut qu’elle puisse lire des informations depuis la blockchain.

Nous allons commencer par la bibliothèque Web3.js, l’outil historique du développement Ethereum côté navigateur.

4.1 Qu’est-ce que Web3.js ?

Web3.js est une bibliothèque JavaScript officielle créée par la fondation Ethereum.
Elle permet de communiquer avec la blockchain à travers un fournisseur (provider) comme MetaMask.
Grâce à elle, vous pouvez interroger le réseau, lire le solde d’une adresse, envoyer des transactions ou interagir avec des contrats intelligents.

En résumé, Web3.js transforme la blockchain en une simple API JavaScript.

4.2 Préparer notre code

Nous allons modifier notre projet précédent pour y ajouter une fonction qui affiche le solde ETH (ou MATIC) de l’adresse connectée.

Voici la nouvelle version de main.js :

const connectButton = document.getElementById("connect");
const statusText = document.getElementById("status");

connectButton.addEventListener("click", async () => {
  if (typeof window.ethereum !== "undefined") {
    try {
      // Connexion au portefeuille
      const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
      const account = accounts[0];
      statusText.textContent = "Connecté avec : " + account;

      // Création de l'instance Web3
      const web3 = new Web3(window.ethereum);

      // Lecture du solde
      const balanceWei = await web3.eth.getBalance(account);
      const balanceEth = web3.utils.fromWei(balanceWei, "ether");
      const balanceText = document.createElement("p");
      balanceText.textContent = "Solde du compte : " + balanceEth + " ETH";
      document.body.appendChild(balanceText);

    } catch (error) {
      statusText.textContent = "Connexion refusée ou erreur.";
      console.error(error);
    }
  } else {
    statusText.textContent = "MetaMask n'est pas installé.";
  }
});

4.3 Explication du code

Regardons ce qu’il se passe, étape par étape.

Connexion au portefeuille
Comme précédemment, on demande à MetaMask de nous fournir la liste des comptes connectés via eth_requestAccounts.
Création de l’objet Web3
La ligne const web3 = new Web3(window.ethereum) permet d’instancier la bibliothèque Web3.js en utilisant MetaMask comme fournisseur de connexion.
Ainsi, toutes les requêtes passeront par le réseau sélectionné dans MetaMask (Goerli, Mumbai, etc.).
Lecture du solde
web3.eth.getBalance(account) retourne le solde du compte, mais sous une forme brute appelée Wei, la plus petite unité d’Ethereum (1 Ether = 10¹⁸ Wei).
Pour obtenir un nombre plus lisible, on le convertit en Ether grâce à web3.utils.fromWei(balanceWei, "ether").
Affichage dans la page
Enfin, on crée dynamiquement un élément <p> pour afficher le solde sur la page.

4.4 Test du script

Rechargez votre page HTML dans le navigateur.
Cliquez sur Se connecter à MetaMask.
Après la connexion, vous devriez voir apparaître votre solde :

Solde du compte : 0.245 ETH

Si vous utilisez Polygon Mumbai, le symbole affiché restera “ETH”, mais il s’agit bien de MATIC.
Vous pouvez le changer manuellement pour plus de cohérence.

4.5 Ce que fait réellement Web3.js

Derrière ce code apparemment simple, Web3.js interroge directement un nœud blockchain via MetaMask.
Cela signifie que votre page web ne dépend d’aucun serveur : elle dialogue avec le réseau distribué.

Chaque fois que vous appelez web3.eth.getBalance, la bibliothèque envoie une requête JSON-RPC à la blockchain.
MetaMask fait office d’intermédiaire sécurisé, garantissant que toutes les communications respectent le réseau choisi par l’utilisateur.

Cette approche est ce qui rend le Web3 si différent : vos données ne proviennent plus d’une base centralisée, mais directement du réseau blockchain.

Faire la même chose avec Ethers.js

Maintenant que vous avez vu comment interagir avec la blockchain via Web3.js, découvrons Ethers.js, la bibliothèque concurrente.
Plus moderne et plus légère, elle est souvent préférée pour les projets récents.
Son code est plus lisible et mieux adapté à JavaScript moderne (async/await, promesses, etc.).

5.1 Introduction à Ethers.js

Ethers.js a été conçue pour être simple, compacte et sécurisée.
Elle propose les mêmes fonctionnalités que Web3.js :
connexion, lecture du solde, envoi de transactions, interaction avec des contrats…
Mais sa syntaxe est plus claire, ce qui en fait un excellent choix pour les débutants comme pour les professionnels.

Son autre avantage est qu’elle fonctionne aussi bien côté navigateur que côté serveur Node.js.

5.2 Mettre en place Ethers.js

Modifions notre page HTML pour inclure la bibliothèque via un CDN :

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ethers.umd.min.js"></script>
<script src="main-ethers.js"></script>

Ensuite, créons un fichier main-ethers.js et copions le code suivant :

const connectButton = document.getElementById("connect");
const statusText = document.getElementById("status");

connectButton.addEventListener("click", async () => {
  if (typeof window.ethereum !== "undefined") {
    try {
      // Demande de connexion à MetaMask
      await window.ethereum.request({ method: "eth_requestAccounts" });

      // Création du fournisseur (provider)
      const provider = new ethers.providers.Web3Provider(window.ethereum);

      // Récupération du compte connecté
      const signer = provider.getSigner();
      const address = await signer.getAddress();
      statusText.textContent = "Connecté avec : " + address;

      // Lecture du solde
      const balance = await provider.getBalance(address);
      const balanceEth = ethers.utils.formatEther(balance);
      const balanceText = document.createElement("p");
      balanceText.textContent = "Solde du compte : " + balanceEth + " ETH";
      document.body.appendChild(balanceText);

    } catch (error) {
      statusText.textContent = "Connexion refusée ou erreur.";
      console.error(error);
    }
  } else {
    statusText.textContent = "MetaMask n'est pas installé.";
  }
});

5.3 Explication détaillée

Regardons la logique étape par étape :

Connexion à MetaMask
Même principe que précédemment : on demande à l’utilisateur la permission d’accéder à ses comptes.
Création du “provider”
ethers.providers.Web3Provider(window.ethereum) crée un fournisseur à partir de MetaMask.
Ce fournisseur sait dialoguer avec la blockchain via l’extension.
Récupération du “signer”
Le signer représente le compte actuellement connecté.
C’est lui qui permet de signer ou d’envoyer des transactions plus tard.
Lecture du solde
provider.getBalance(address) récupère le solde en Wei.
Puis ethers.utils.formatEther(balance) convertit le montant en Ether lisible.
Affichage
Comme avec Web3.js, on affiche le solde directement dans la page.

5.4 Différences entre Web3.js et Ethers.js

Même si les deux bibliothèques accomplissent les mêmes tâches, elles diffèrent dans leur philosophie :

Aspect	Web3.js	Ethers.js
Taille	Plus lourde	Plus légère
Syntaxe	Style ancien, verbeux	Moderne, propre, orientée promesses
Documentation	Historique, parfois confuse	Très claire et bien structurée
Usage	Projet historique	Projet moderne, plus maintenu

En pratique, si vous débutez, Ethers.js est souvent le meilleur choix.
Elle s’intègre plus facilement dans des frameworks modernes (React, Vue, Svelte) et offre une meilleure compatibilité avec TypeScript.

5.5 Exemple concret d’utilisation

Pour aller un peu plus loin, imaginons que vous vouliez afficher le nom du réseau sur lequel l’utilisateur est connecté.
Avec Ethers.js, rien de plus simple :

Ajoutez ceci dans votre code après la lecture du solde :

const network = await provider.getNetwork();
const networkText = document.createElement("p");
networkText.textContent = "Réseau connecté : " + network.name;
document.body.appendChild(networkText);

Cela affichera par exemple :

Réseau connecté : goerli

Réseau connecté : mumbai

Cette petite ligne donne déjà un aperçu du potentiel d’Ethers.js :
vous pouvez interroger le réseau, écouter des événements, surveiller des transactions, ou interagir avec un smart contract déployé.

Vous avez désormais une page web entièrement fonctionnelle qui :

détecte la présence de MetaMask ;
se connecte à un compte utilisateur ;
lit le solde du portefeuille sur la blockchain ;
affiche le nom du réseau connecté.

Et tout cela, sans aucun serveur web, sans PHP, ni base de données.
Juste du HTML, du JavaScript, et une bibliothèque Web3.

C’est la base de toute application décentralisée (DApp) moderne.

Ajouter une interaction réelle : envoyer une transaction

Jusqu’à présent, nous avons vu comment se connecter à MetaMask et lire le solde d’un compte.
Pour transformer votre page en vraie DApp interactive, il faut maintenant permettre à l’utilisateur d’envoyer une transaction sur la blockchain de test.

Une transaction peut être simple : transférer une petite quantité de crypto d’un compte à un autre.

6.1 Comprendre le gas, la signature et le nonce

Avant de coder, quelques notions importantes :

Gas : Chaque action sur Ethereum ou Polygon nécessite de l’énergie (gas). Même sur un réseau de test, ce concept existe, mais il ne coûte rien pour les jetons de test.
Signature : L’utilisateur doit approuver chaque transaction via MetaMask. Cette signature garantit que personne d’autre ne peut envoyer de fonds à sa place.
Nonce : Chaque transaction d’un compte possède un numéro unique appelé nonce. Il sert à éviter les doublons et à conserver l’ordre des transactions.

En pratique, MetaMask gère automatiquement le gas et le nonce pour vous.
Vous n’avez donc qu’à préparer la transaction et demander à l’utilisateur de la signer.

6.2 Exemple de code avec Web3.js

Ajoutons un bouton pour envoyer 0,001 ETH (ou MATIC) à une autre adresse de test.

Dans votre fichier HTML :

<button id="send">Envoyer une transaction</button>

Puis dans main.js (après la connexion) :

const sendButton = document.getElementById("send");

sendButton.addEventListener("click", async () => {
  const recipient = prompt("Entrez l'adresse de destination :");
  if (!recipient) return;

  const amount = prompt("Entrez le montant à envoyer (ex: 0.001) :");
  if (!amount) return;

  try {
    const tx = await web3.eth.sendTransaction({
      from: accounts[0],
      to: recipient,
      value: web3.utils.toWei(amount, "ether")
    });
    alert("Transaction envoyée ! Hash : " + tx.transactionHash);
  } catch (error) {
    alert("Erreur lors de l'envoi : " + error.message);
  }
});

6.3 Explication du code

L’utilisateur clique sur le bouton Envoyer une transaction.
Une fenêtre prompt demande l’adresse du destinataire et le montant à envoyer.
La fonction web3.eth.sendTransaction crée et envoie la transaction sur la blockchain via MetaMask.
MetaMask affiche une fenêtre demandant la confirmation.
Une fois la transaction validée, le hash unique apparaît et peut être suivi sur Etherscan.

Ainsi, votre page web devient une interface capable d’interagir directement avec le réseau, de façon sécurisée et totalement décentralisée.

6.4 Même exemple avec Ethers.js

Avec Ethers.js, le code est similaire mais plus clair :

sendButton.addEventListener("click", async () => {
  const recipient = prompt("Entrez l'adresse de destination :");
  if (!recipient) return;

  const amount = prompt("Entrez le montant à envoyer (ex: 0.001) :");
  if (!amount) return;

  try {
    const txResponse = await signer.sendTransaction({
      to: recipient,
      value: ethers.utils.parseEther(amount)
    });
    alert("Transaction envoyée ! Hash : " + txResponse.hash);
    await txResponse.wait();
    alert("Transaction confirmée !");
  } catch (error) {
    alert("Erreur lors de l'envoi : " + error.message);
  }
});

Points importants :

signer.sendTransaction prépare et signe la transaction.
ethers.utils.parseEther(amount) convertit le montant en Wei.
txResponse.wait() attend la confirmation de la transaction sur la blockchain.

6.5 Visualiser la transaction

Après l’envoi, copiez le hash de transaction et collez-le sur Etherscan Goerli ou Polygonscan Mumbai.
Vous verrez : l’adresse de l’expéditeur, le destinataire, le montant, le gas utilisé, et le statut (pending, success, ou failed).

C’est exactement ce que fait une DApp “en production” avec de l’argent réel.

Ce qui se passe en coulisse

Maintenant que vous avez une page capable d’envoyer et de recevoir des transactions, il est intéressant de comprendre ce qui se passe derrière les écrans.

Lorsque l’utilisateur clique sur “Envoyer une transaction”, votre JavaScript prépare un objet transaction avec les informations nécessaires : expéditeur, destinataire, montant, gas.
MetaMask intercepte cette transaction et demande à l’utilisateur de la signer via sa clé privée.
Une fois signée, la transaction est transmise au réseau et relayée par des nœuds.
Les mineurs ou validateurs ajoutent la transaction dans un bloc.
Le bloc est ensuite vérifié et relié à la blockchain existante.
Votre transaction est confirmée et visible publiquement.

Ce processus montre pourquoi une DApp peut fonctionner sans serveur : toutes les validations sont faites par le réseau, et votre site web agit uniquement comme une interface pour afficher et envoyer les informations.

7.1 Limites et bonnes pratiques

Même si cette architecture est puissante, quelques points sont à garder en tête :

Ne jamais demander à l’utilisateur de partager sa clé privée.
Toujours tester sur un réseau de test avant d’utiliser le mainnet.
Vérifier les montants et adresses pour éviter des erreurs.
Comprendre que les transactions sont publiques et irréversibles.

Ces précautions sont essentielles pour rester en sécurité et offrir une expérience fiable à vos utilisateurs.

Vous voilà arrivé au terme de ce tutoriel complet, et vous avez désormais acquis une compétence très recherchée : créer une page web connectée à une blockchain, sans serveur.

En partant de zéro, vous avez appris à :

Comprendre les concepts de blockchain, DApp, smart contract et réseau ;
Préparer votre environnement avec MetaMask et des réseaux de test comme Goerli et Mumbai ;
Créer une page HTML capable de détecter un portefeuille et de lire le solde ;
Utiliser Web3.js et Ethers.js pour interagir avec la blockchain ;
Envoyer une transaction et comprendre la mécanique du gas, de la signature et du nonce ;
Visualiser vos actions sur un explorateur blockchain pour vérifier vos tests.

Plus qu’un simple résumé, cette conclusion vous montre la puissance des DApps : elles permettent de créer des applications totalement décentralisées, sécurisées et accessibles à tous, directement depuis un navigateur.

L’étape suivante pourrait être de déployer votre propre smart contract, de créer des NFT ou de construire une interface plus complexe pour gérer plusieurs comptes et interagir avec différentes fonctionnalités blockchain.
Le Web3 est vaste, mais vous venez de franchir la première étape, la plus essentielle : passer de développeur web à développeur Web3.

Chapitre 13 : Les airdrop

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr