Créa-blog

#100JoursPourCoder
Projet Créa-code

Ressources pour développeur web

Théme de la semaine : Web3 et Blockchain

Comment lire et écrire sur la blockchain depuis un site web

⏱️ Temps de lecture estimé : 8 minutes
Accueil → Web3 → Comment lire et écrire sur la blockchain depuis un site web

La blockchain n’est plus un concept réservé aux spécialistes de la finance ou aux développeurs de cryptomonnaies. Aujourd’hui, vous pouvez interagir avec la blockchain directement depuis un site web, que ce soit pour lire des données, suivre des transactions, ou même écrire des informations sur un contrat intelligent. Cette capacité ouvre des perspectives incroyables, qu’il s’agisse de créer des applications décentralisées (DApps), de gérer des NFT, ou d’intégrer des fonctionnalités de paiement sécurisé à votre site.

Dans ce chapitre, nous allons explorer en détail comment lire et écrire sur la blockchain en utilisant deux bibliothèques JavaScript très populaires : Web3.js et Ethers.js.

Nous détaillerons chaque étape pour que vous puissiez suivre même si vous êtes débutant. À la fin, vous serez capable de créer un mini-projet concret pour interagir avec la blockchain Ethereum depuis votre site web.

Comprendre les bases avant de coder

Avant de plonger dans le code, il est essentiel de comprendre quelques notions fondamentales. La blockchain est une base de données décentralisée, transparente et sécurisée. Chaque bloc contient des transactions, et une fois validées, elles deviennent immuables. Cela signifie que tout ce que vous écrivez sur la blockchain ne peut pas être modifié, ce qui assure la sécurité et la confiance dans les applications décentralisées.

Pour interagir avec la blockchain, vous aurez besoin d’un nœud qui vous permet de communiquer avec le réseau. Vous pouvez soit exécuter votre propre nœud Ethereum, soit utiliser un service comme Infura ou Alchemy qui fournit un accès simplifié.

Enfin, pour lire et écrire sur la blockchain depuis votre site web, vous aurez besoin d’un portefeuille Ethereum comme MetaMask, qui permet de signer des transactions et d’authentifier l’utilisateur.

Introduction à Web3.js et Ethers.js

Web3.js et Ethers.js sont des bibliothèques JavaScript qui simplifient l’interaction avec la blockchain.

Web3.js est la bibliothèque la plus ancienne et largement utilisée pour interagir avec Ethereum. Elle offre des fonctions pour envoyer des transactions, lire des données de contrats intelligents, écouter des événements, et bien plus encore.

Ethers.js est plus récente, plus légère et souvent considérée comme plus moderne et sécurisée. Elle offre une API plus simple pour gérer les portefeuilles, signer des transactions et interagir avec les contrats.

Dans ce chapitre, nous allons illustrer les deux approches, mais nous commencerons par Web3.js, car elle reste très populaire dans les tutoriels débutants et de nombreux projets existants.

Installer et configurer votre environnement

Pour commencer, vous devez disposer d’un environnement Node.js fonctionnel. Vous pouvez installer Node.js depuis nodejs.org. Une fois Node.js installé, créez un projet et installez Web3.js avec la commande suivante :

npm init -y
npm install web3

Pour Ethers.js, la commande est similaire :

npm install ethers

Ensuite, vous aurez besoin d’un fichier HTML pour votre site web et d’un fichier JavaScript où vous écrirez votre code pour interagir avec la blockchain.

Se connecter à Ethereum depuis votre site web

La première étape pour lire et écrire sur la blockchain consiste à se connecter au réseau Ethereum. Avec Web3.js, vous pouvez utiliser MetaMask comme fournisseur. Dans votre fichier JavaScript, vous pouvez ajouter le code suivant :

if (typeof window.ethereum !== 'undefined') {
    console.log('MetaMask détecté !');
    const web3 = new Web3(window.ethereum);
    try {
        await window.ethereum.request({ method: 'eth_requestAccounts' });
        console.log('Connexion réussie');
    } catch (error) {
        console.error('Utilisateur refusé', error);
    }
} else {
    console.log('Veuillez installer MetaMask');
}

Ce code détecte si MetaMask est installé, puis demande à l’utilisateur l’autorisation de se connecter à son portefeuille. Cette étape est cruciale avant de pouvoir lire et écrire sur la blockchain.

Avec Ethers.js, la connexion est tout aussi simple :

if (typeof window.ethereum !== 'undefined') {
    const provider = new ethers.BrowserProvider(window.ethereum);
    try {
        await provider.send("eth_requestAccounts", []);
        console.log('Connexion réussie avec Ethers.js');
    } catch (error) {
        console.error('Utilisateur refusé', error);
    }
} else {
    console.log('Veuillez installer MetaMask');
}

Lire des données depuis la blockchain

Une fois connecté, vous pouvez lire des données publiques, comme le solde d’une adresse Ethereum. Avec Web3.js, cela se fait ainsi :

const address = "0xVotreAdresseEthereum";
const balance = await web3.eth.getBalance(address);
console.log("Solde en Ether :", web3.utils.fromWei(balance, "ether"));

Ici, getBalance retourne le solde en wei, la plus petite unité d’Ether, que nous convertissons ensuite en Ether lisible.

Avec Ethers.js, la lecture est similaire :

const balance = await provider.getBalance(address);
console.log("Solde en Ether :", ethers.formatEther(balance));

Premier exemple concret : lire un contrat intelligent

Les contrats intelligents stockent des données sur la blockchain. Pour lire ces données, vous aurez besoin de l’adresse du contrat et de son ABI (Application Binary Interface). L’ABI décrit les fonctions du contrat et comment interagir avec lui.

Voici un exemple avec Web3.js pour lire le nom d’un token ERC-20 :

const tokenAddress = "0xAdresseDuToken";
const tokenABI = [ /* ABI du contrat */ ];
const tokenContract = new web3.eth.Contract(tokenABI, tokenAddress);
const name = await tokenContract.methods.name().call();
console.log("Nom du token :", name);

Avec Ethers.js, le code est équivalent :

const tokenContract = new ethers.Contract(tokenAddress, tokenABI, provider);
const name = await tokenContract.name();
console.log("Nom du token :", name);

Écrire sur la blockchain depuis un site web

Lire des données sur la blockchain est relativement simple, mais écrire dessus implique quelques notions supplémentaires, notamment la création et la signature de transactions. Chaque action qui modifie l’état de la blockchain nécessite des frais de transaction (gas), et la sécurité est essentielle pour éviter toute perte de fonds.

Avant d’envoyer une transaction, vous devez comprendre que l’écriture sur la blockchain n’est pas instantanée : elle passe par un processus de validation par les mineurs ou validateurs du réseau.

Envoyer de l’Ether avec Web3.js

Pour commencer, nous allons voir comment envoyer de l’Ether d’une adresse à une autre depuis votre site web. Voici un exemple simple :

const sender = "0xVotreAdresse";
const receiver = "0xAdresseDestinataire";

const amount = web3.utils.toWei("0.01", "ether"); // 0.01 ETH

try {
    const tx = await web3.eth.sendTransaction({
        from: sender,
        to: receiver,
        value: amount
    });
    console.log("Transaction réussie :", tx.transactionHash);
} catch (error) {
    console.error("Erreur lors de la transaction :", error);
}

Ici, Web3.js utilise MetaMask pour signer la transaction. L’utilisateur verra une fenêtre de confirmation et devra accepter les frais de gas avant que la transaction soit envoyée.

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 ?

Avec Ethers.js, l’équivalent est légèrement différent, car Ethers.js gère le portefeuille via un signer :

const signer = provider.getSigner();
try {
    const tx = await signer.sendTransaction({
        to: receiver,
        value: ethers.parseEther("0.01")
    });
    console.log("Transaction envoyée :", tx.hash);
    await tx.wait();
    console.log("Transaction confirmée !");
} catch (error) {
    console.error("Erreur :", error);
}

Le wait() permet d’attendre la confirmation de la transaction sur la blockchain.

Interagir avec un contrat intelligent

Pour écrire sur un contrat intelligent, vous devez utiliser ses fonctions qui modifient l’état. Prenons un exemple avec un token ERC-20 : envoyer des tokens depuis votre adresse vers une autre.

Avec Web3.js :

const tokenContract = new web3.eth.Contract(tokenABI, tokenAddress);
const amountTokens = web3.utils.toWei("10", "ether"); // 10 tokens

try {
    const receipt = await tokenContract.methods.transfer(receiver, amountTokens)
        .send({ from: sender });
    console.log("Transaction token réussie :", receipt.transactionHash);
} catch (error) {
    console.error("Erreur :", error);
}

Et avec Ethers.js :

const tokenContract = new ethers.Contract(tokenAddress, tokenABI, signer);
try {
    const tx = await tokenContract.transfer(receiver, ethers.parseUnits("10", 18));
    console.log("Transaction token envoyée :", tx.hash);
    await tx.wait();
    console.log("Transaction confirmée !");
} catch (error) {
    console.error("Erreur :", error);
}

Remarquez que pour les tokens ERC-20, vous devez toujours respecter le nombre de décimales du token, d’où l’usage de parseUnits avec Ethers.js.

Gestion des erreurs et bonnes pratiques

Lorsque vous écrivez sur la blockchain depuis un site web, plusieurs erreurs peuvent survenir :

  1. L’utilisateur refuse la transaction dans MetaMask.
  2. Le solde est insuffisant pour couvrir le gas.
  3. Le contrat peut rejeter la transaction si elle ne respecte pas certaines conditions.

Il est donc important de prévoir un traitement des erreurs et de montrer à l’utilisateur un message clair pour chaque situation. Vous pouvez également utiliser estimateGas pour calculer le gas nécessaire avant d’envoyer la transaction :

const gasEstimate = await tokenContract.methods.transfer(receiver, amountTokens).estimateGas({ from: sender });
console.log("Gas estimé :", gasEstimate);

Cela permet d’éviter des échecs liés à un gas trop faible.

Exemple concret : mini-application web pour lire et écrire

Maintenant que nous avons vu la théorie, nous allons créer un mini-projet web complet pour lire et écrire sur la blockchain. L’application permettra à l’utilisateur de consulter son solde Ether et d’envoyer une petite quantité à une autre adresse.

1. Fichier HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mini DApp Web3</title>
</head>
<body>
    <h1>Mon application blockchain</h1>
    <button id="connect">Se connecter à MetaMask</button>
    <p id="balance">Solde : 0 ETH</p>

    <h2>Envoyer de l'Ether</h2>
    <input type="text" id="receiver" placeholder="Adresse du destinataire">
    <input type="text" id="amount" placeholder="Montant en ETH">
    <button id="send">Envoyer</button>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

2. Fichier JavaScript (app.js)

let web3;
let account;

document.getElementById("connect").onclick = async () => {
    if (window.ethereum) {
        web3 = new Web3(window.ethereum);
        try {
            const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
            account = accounts[0];
            alert("Connecté : " + account);
            updateBalance();
        } catch (error) {
            console.error(error);
            alert("Connexion refusée !");
        }
    } else {
        alert("Veuillez installer MetaMask !");
    }
};

async function updateBalance() {
    const balanceWei = await web3.eth.getBalance(account);
    const balanceEth = web3.utils.fromWei(balanceWei, "ether");
    document.getElementById("balance").innerText = "Solde : " + balanceEth + " ETH";
}

document.getElementById("send").onclick = async () => {
    const receiver = document.getElementById("receiver").value;
    const amount = web3.utils.toWei(document.getElementById("amount").value, "ether");
    try {
        const tx = await web3.eth.sendTransaction({
            from: account,
            to: receiver,
            value: amount
        });
        alert("Transaction réussie : " + tx.transactionHash);
        updateBalance();
    } catch (error) {
        console.error(error);
        alert("Erreur lors de la transaction !");
    }
};

Avec cette application, vous pouvez lire le solde de votre compte et envoyer de l’Ether en quelques clics. Il s’agit d’un exemple simple, mais il illustre parfaitement comment lire et écrire sur la blockchain depuis un site web.

Interagir avec des contrats intelligents personnalisés

Maintenant que vous savez envoyer de l’Ether et interagir avec un token ERC-20, il est temps de passer à l’étape suivante : interagir avec vos propres contrats intelligents. Supposons que vous ayez un contrat simple permettant aux utilisateurs d’écrire un message sur la blockchain et de le lire ensuite.

Voici un exemple de contrat Solidity très simple :

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract MessageBoard {
    string public message;

    event MessageUpdated(string newMessage);

    function setMessage(string memory _message) public {
        message = _message;
        emit MessageUpdated(_message);
    }

    function getMessage() public view returns (string memory) {
        return message;
    }
}

Ce contrat stocke un message unique et émet un événement chaque fois que le message est mis à jour.

Lire et écrire des messages avec Web3.js

Pour lire et écrire sur ce contrat depuis votre site web, vous avez besoin de son ABI et de son adresse déployée. Voici un exemple avec Web3.js :

const contractAddress = "0xAdresseDuContrat";
const contractABI = [ /* ABI générée par le compilateur */ ];

const messageContract = new web3.eth.Contract(contractABI, contractAddress);

// Lire le message
async function readMessage() {
    const currentMessage = await messageContract.methods.getMessage().call();
    console.log("Message actuel :", currentMessage);
}

// Écrire un nouveau message
async function writeMessage(newMessage) {
    try {
        const receipt = await messageContract.methods.setMessage(newMessage).send({ from: account });
        console.log("Message mis à jour ! Transaction :", receipt.transactionHash);
    } catch (error) {
        console.error("Erreur :", error);
    }
}

Vous pouvez maintenant créer un petit formulaire sur votre site web pour permettre aux utilisateurs de modifier et de consulter le message en temps réel.

Lire et écouter les événements

Les événements sont un élément clé pour rendre vos DApps interactives. Chaque fois qu’une action est effectuée sur un contrat, vous pouvez l’écouter pour mettre à jour votre interface. Par exemple :

messageContract.events.MessageUpdated()
.on('data', (event) => {
    console.log("Nouvelle mise à jour :", event.returnValues.newMessage);
    document.getElementById("displayMessage").innerText = event.returnValues.newMessage;
});

Ainsi, chaque modification du message est immédiatement reflétée dans l’interface utilisateur, offrant une expérience interactive et en temps réel.

Sécurité et bonnes pratiques

Lorsque vous créez une DApp qui écrit sur la blockchain, la sécurité est primordiale. Voici quelques conseils :

  1. Valider les entrées utilisateur : même si la blockchain est sécurisée, votre interface web doit vérifier les données avant de les envoyer pour éviter des erreurs ou des abus.
  2. Limiter les coûts en gas : certaines fonctions complexes peuvent coûter très cher. Utilisez estimateGas pour prévenir les échecs.
  3. Signer les transactions côté client : ne jamais stocker de clés privées sur le serveur. Utilisez MetaMask ou un portefeuille similaire.
  4. Gérer les erreurs et le feedback utilisateur : les transactions peuvent échouer. Affichez des messages clairs pour rassurer l’utilisateur.

Exemple avancé : mini DApp de message

Voici comment vous pourriez combiner tout ce que nous avons appris pour créer une mini-application de message sur la blockchain :

<h1>Message Board DApp</h1>
<p id="displayMessage">Chargement...</p>
<input type="text" id="newMessage" placeholder="Écrivez un message">
<button id="sendMessage">Envoyer</button>
document.getElementById("sendMessage").onclick = async () => {
    const newMsg = document.getElementById("newMessage").value;
    await writeMessage(newMsg);
};
readMessage();
messageContract.events.MessageUpdated()
.on('data', (event) => {
    document.getElementById("displayMessage").innerText = event.returnValues.newMessage;
});

Cette DApp permet à l’utilisateur de lire et écrire sur la blockchain en toute sécurité, tout en offrant un retour immédiat via les événements.

Interagir avec la blockchain depuis un site web n’est plus réservé aux experts. Grâce à Web3.js ou Ethers.js, vous pouvez créer des applications décentralisées où vos utilisateurs peuvent lire des données, envoyer des transactions, ou interagir avec des contrats intelligents personnalisés.

Au fil de ce chapitre, nous avons commencé par les bases : la connexion à MetaMask, la lecture de solde Ether et de tokens. Nous avons ensuite abordé l’écriture : envoyer de l’Ether, interagir avec un token ERC-20 et même créer une DApp simple pour écrire et lire des messages. Enfin, nous avons vu l’importance de la sécurité et des bonnes pratiques pour offrir une expérience utilisateur fiable.

Ce chapitre montre que, même pour un débutant, il est possible de développer une DApp fonctionnelle, sécurisée et interactive. En maîtrisant ces concepts, vous ouvrez la porte à des projets plus ambitieux, comme la gestion de NFT, de DeFi ou d’applications collaboratives sur la blockchain. L’avenir des applications web est décentralisé, et chaque développeur peut aujourd’hui contribuer à cette révolution directement depuis son navigateur.

Articles relatifs

  1. Comment un site web classique peut tirer parti du Web3
    Découvrez comment votre site web peut profiter du Web3 : micro-paiements instantanés, identité numérique sécurisée et réputation décentralisée. Transformez votre site, gagnez en confiance et fidélisez vos utilisateurs facilement….
  2. NFT : Comprendre le concept à l’affichage sur un site web
    Découvrez comment les NFT transforment le développement web : de la blockchain à leur affichage sur un site. Comprenez, codez et affichez vos propres NFT grâce à un guide clair,…
  3. Qu’est-ce que le Web3 ? Comprendre l’évolution du Web au Web3
    Découvrez comment le Web a évolué du Web1 au Web3. Comprenez simplement la décentralisation, la blockchain et l’avenir d’un Internet plus libre, transparent et centré sur les utilisateurs….
  4. Blockchain et développement web : Comment cela fonctionne ?
    Découvrez comment la blockchain révolutionne le web. Comprenez son fonctionnement, la sécurité des données, les smart contracts et pourquoi chaque développeur web doit maîtriser cette technologie incontournable pour l’avenir numérique….