Applez Nous: +41 22 518 70 00
Contrairement à une application Web2 classique (où le navigateur dialogue avec un serveur d’application et une base de données MySQL privée), une dApp Web3 se compose de :
Navigateur Web (React / Next.js)
│
├──> Portefeuille utilisateur (MetaMask / Extension Web3)
│ └── Signature cryptographique des transactions avec la clé privée locale
│
├──> Nœud RPC / Fournisseur de réseau (Infura, Alchemy ou nœud local) via Ethers.js
│ └── Envoi des transactions signées vers la Blockchain (EVM)
│
└──> Stockage décentralisé (IPFS / Arweave)
└── Hébergement des fichiers volumineux (images, vidéos, métadonnées JSON)
Voici le code JavaScript standard pour connecter un bouton de site web au portefeuille MetaMask et interagir avec un contrat :
import { ethers } from "ethers";
async function connecterEtLireSolde(adresseContrat, abiContrat) {
// 1. Vérifier si le navigateur possède un portefeuille Web3 injecté
if (!window.ethereum) {
alert("Veuillez installer MetaMask !");
return;
}
// 2. Créer le fournisseur et demander la connexion du compte utilisateur
const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner();
const adresseUtilisateur = await signer.getAddress();
console.log("Connecté avec l'adresse :", adresseUtilisateur);
// 3. Instancier l'objet Contrat avec son ABI (Interface Binaire d'Application)
const contrat = new ethers.Contract(adresseContrat, abiContrat, signer);
// 4. Exécuter un appel de lecture (gratuit)
const solde = await contrat.balanceOf(adresseUtilisateur);
console.log("Solde de jetons :", ethers.formatUnits(solde, 18));
}
Stocker des images ou des fichiers lourds directement dans l’EVM coûte des sommes prohibitives. Le protocole IPFS (InterPlanetary File System) utilise un adressage par contenu (Content Identifier – CID) : l’adresse d’un fichier est le hash cryptographique de son contenu. Il est impossible de modifier le fichier sans altérer son CID, garantissant l’intégrité absolue des métadonnées du NFT.
Restitution de projet : Chaque apprenant finalise une interface dApp réactive permettant de minter des jetons et d’afficher le solde du portefeuille en direct.