Introduction au Web3 et Configuration de l'Environnement de Développement

Bienvenue dans le cours "Maîtrisez le Développement Web3 : Créer des DApps avec Solidity et React" ! Cette première leçon est fondamentale. Elle posera les bases de votre compréhension du Web3 et vous guidera pas à pas dans la configuration de votre environnement de développement, un prérequis indispensable pour coder vos premières applications décentralisées (DApps).

Le Web3 est en train de redéfinir la manière dont nous interagissons avec Internet, en passant d'un modèle centralisé à un modèle décentralisé, transparent et axé sur la propriété des utilisateurs. Comprendre ses principes et maîtriser les outils pour y bâtir est la clé pour naviguer et innover dans cette nouvelle ère numérique.

Dans cette leçon, nous allons :

Définir ce qu'est le Web3 et explorer ses concepts fondamentaux.
Comprendre pourquoi le Web3 est une évolution nécessaire du Web actuel.
Identifier et installer les outils essentiels pour le développement Web3.
Configurer un projet de développement de smart contracts avec Hardhat.
Créer et compiler un premier smart contract simple.

Préparez-vous à plonger dans le futur du web !

1. Comprendre le Web3 : Une Révolution Numérique

Le terme "Web3" fait référence à la prochaine génération d'Internet, construite sur les principes de décentralisation, d'ouverture et de propriété des utilisateurs. Pour bien saisir son essence, il est utile de le situer par rapport aux versions précédentes.

1.1. Brève Histoire du Web : Web1, Web2, Web3

Web1 (les années 1990 - début 2000) : Le Web Statique et en Lecture Seule Le Web1 était principalement constitué de sites web statiques où les utilisateurs pouvaient consulter des informations. L'interaction était minimale, et la création de contenu était réservée à une minorité d'experts. C'était le "Read-Only Web".
Web2 (début 2000 - aujourd'hui) : Le Web Social et Centralisé Le Web2 a introduit l'interactivité et la participation des utilisateurs. Des plateformes comme Facebook, YouTube, Twitter ont permis à chacun de créer et de partager du contenu. Cependant, cette interactivité est centralisée : les données des utilisateurs sont détenues et contrôlées par de grandes entreprises technologiques, qui agissent comme intermédiaires, monétisent ces données et peuvent imposer leurs règles (censure, suspension de compte, etc.). C'est le "Read-Write Web".
Web3 (aujourd'hui et au-delà) : Le Web Décentralisé et axé sur la Propriété Le Web3 vise à corriger les lacunes du Web2 en restituant le contrôle aux utilisateurs. Il s'appuie sur des technologies comme la blockchain, les smart contracts et les cryptomonnaies pour créer un Internet où :
- Les utilisateurs possèdent leurs données et leur identité numérique.
- Les applications ne dépendent pas d'un serveur central unique.
- La gouvernance est distribuée et communautaire. C'est le "Read-Write-Own Web".

1.2. Concepts Fondamentaux du Web3

Pour comprendre le fonctionnement du Web3, il est essentiel de maîtriser quelques concepts clés :

Décentralisation : C'est le principe central. Au lieu qu'un seul serveur ou une seule entité contrôle l'information, le Web3 distribue le contrôle sur un réseau de pair-à-pair. Cela rend le système plus résilient, transparent et résistant à la censure.
Blockchain : C'est la technologie sous-jacente qui permet la décentralisation. Une blockchain est un registre numérique distribué et immuable. Chaque "bloc" contient des transactions validées et est lié cryptographiquement au bloc précédent, formant une "chaîne". Une fois qu'une transaction est enregistrée sur la blockchain, elle ne peut pas être modifiée ou supprimée.
Contrats Intelligents (Smart Contracts) : Ce sont des programmes autonomes stockés et exécutés directement sur une blockchain. Ils définissent les règles et exécutent automatiquement les termes d'un accord lorsque des conditions prédéfinies sont remplies. Ils sont immuables et transparents, éliminant le besoin d'intermédiaires. Solidity est le langage de programmation le plus populaire pour écrire des smart contracts sur la blockchain Ethereum.
Cryptomonnaies et Tokens : Les cryptomonnaies (comme l'Ether d'Ethereum) sont des monnaies numériques qui utilisent la cryptographie pour sécuriser les transactions. Les tokens, souvent créés sur des plateformes blockchain existantes (comme les tokens ERC-20 sur Ethereum), peuvent représenter une valeur, une propriété, un droit de vote, ou d'autres actifs numériques.
DApps (Applications Décentralisées) : Ce sont des applications construites sur des réseaux décentralisés (comme Ethereum). Contrairement aux applications traditionnelles (dont le backend est sur un serveur central), le backend d'une DApp est un ensemble de smart contracts déployés sur une blockchain. L'interface utilisateur (frontend) peut être développée avec des technologies web classiques (HTML, CSS, JavaScript/React).
NFTs (Non-Fungible Tokens) : Un type de token unique et indivisible qui représente la propriété d'un actif numérique ou physique (art numérique, musique, immobilier virtuel, etc.). Chaque NFT est unique et ne peut pas être remplacé par un autre.
DAO (Organisations Autonomes Décentralisées) : Des organisations dont les règles de fonctionnement et de gouvernance sont écrites dans des smart contracts et sont gérées par la communauté de détenteurs de tokens, plutôt que par une entité centrale.

1.3. Pourquoi le Web3 ? Les Problèmes Résolus

Le Web3 cherche à résoudre plusieurs problèmes inhérents au Web2 :

Centralisation et Contrôle : Les géants du Web2 (Meta, Google, Amazon) détiennent un pouvoir immense sur nos données, nos interactions et le contenu que nous voyons. Le Web3 redistribue ce pouvoir aux utilisateurs.
Vie Privée et Sécurité des Données : Nos données personnelles sont constamment collectées et utilisées, souvent sans notre plein consentement. La blockchain permet des modèles où les utilisateurs contrôlent mieux leurs données, et l'identité est souvent pseudonyme.
Censure et Blocage : Des plateformes peuvent censurer du contenu ou bloquer des utilisateurs à leur discrétion. Les DApps, étant décentralisées, sont beaucoup plus résistantes à la censure.
Modèles Économiques : Le modèle publicitaire du Web2 favorise l'attention et non la valeur réelle. Le Web3 permet des modèles économiques plus équitables, où les créateurs et les utilisateurs sont directement récompensés (économie des créateurs, GameFi, Play-to-Earn).
Transparence : Les opérations sur la blockchain sont publiquement vérifiables, ce qui offre une transparence inégalée par rapport aux systèmes centralisés.

2. L'Environnement de Développement Web3 : Les Outils du Maître Bâtisseur

Pour créer des DApps, vous aurez besoin d'un ensemble d'outils spécifiques qui vous permettront d'écrire, de compiler, de tester et de déployer vos smart contracts, ainsi que de bâtir des interfaces utilisateur pour interagir avec eux.

2.1. Vue d'Ensemble des Outils Nécessaires

Voici les catégories d'outils que nous allons utiliser dans ce cours :

Node.js et npm/yarn : Indispensables pour le développement JavaScript/TypeScript, qui est le langage prédominant pour les outils Web3 et le frontend React. npm (Node Package Manager) ou yarn est utilisé pour gérer les dépendances de vos projets.
Un Compilateur Solidity : Pour transformer votre code Solidity lisible en bytecode exécutable sur la blockchain. Ce compilateur est généralement intégré aux frameworks de développement.
Outils de Développement de Blockchain Locale : Des outils qui simulent un environnement blockchain sur votre machine locale, vous permettant de tester et d'itérer rapidement sans encourir de frais ni dépendre d'un réseau public (ex: Hardhat Network, Ganache).
Frameworks de Développement de Smart Contracts : Des suites d'outils complètes pour gérer le cycle de vie de vos smart contracts (compilation, déploiement, tests, débogage). Les plus populaires sont Hardhat et Truffle. Nous allons nous concentrer sur Hardhat.
Bibliothèques d'Interaction avec la Blockchain : Pour votre frontend React, vous aurez besoin de bibliothèques JavaScript qui vous permettent d'interagir avec la blockchain (envoyer des transactions, lire des données). Les plus utilisées sont Ethers.js et Web3.js. Hardhat utilise Ethers.js par défaut.
Un Éditeur de Code : Un environnement de développement intégré (IDE) pour écrire votre code. Visual Studio Code (VS Code) est fortement recommandé pour ses extensions riches et sa polyvalence.

2.2. Installation des Prérequis

Commençons par installer les bases.

2.2.1. Node.js et npm (ou Yarn)

Node.js est un environnement d'exécution JavaScript côté serveur qui est essentiel pour la plupart des outils Web3. npm est son gestionnaire de paquets, et yarn est une alternative populaire.

Téléchargement et Installation de Node.js :
- Rendez-vous sur le site officiel de Node.js : https://nodejs.org/.
- Téléchargez la version LTS (Long Term Support) recommandée pour la plupart des utilisateurs.
- Suivez les instructions d'installation pour votre système d'exploitation. npm est généralement inclus dans l'installation de Node.js.
Vérification de l'Installation : Ouvrez votre terminal ou invite de commande et exécutez les commandes suivantes pour vérifier que Node.js et npm sont correctement installés :
```
node -v
npm -v
```
Vous devriez voir les numéros de version de Node.js et de npm. Par exemple :
```
v20.10.0 # Exemple pour Node.js
10.2.3  # Exemple pour npm
```

2.2.2. Git (Fortement Recommandé)

Git est un système de contrôle de version distribué, indispensable pour gérer le code de vos projets, collaborer et revenir à des versions antérieures. Bien que non strictement nécessaire pour cette première leçon, il est un outil fondamental pour tout développeur.

Installation de Git :
- Windows : Téléchargez l'installeur depuis https://git-scm.com/download/win.
- macOS : Vous pouvez l'installer via Homebrew (brew install git) ou en téléchargeant l'installeur depuis https://git-scm.com/download/mac.
- Linux : Utilisez le gestionnaire de paquets de votre distribution (ex: sudo apt install git pour Debian/Ubuntu).
Vérification de l'Installation :
```
git --version
```

2.2.3. Un Éditeur de Code (Visual Studio Code)

Visual Studio Code (VS Code) est un éditeur de code gratuit, léger et puissant, avec un écosystème d'extensions fantastique. C'est le choix par défaut pour le développement Web3 pour sa prise en charge de JavaScript, TypeScript et des extensions Solidity.

Téléchargement et Installation de VS Code :
- Rendez-vous sur https://code.visualstudio.com/.
- Téléchargez et installez la version adaptée à votre système d'exploitation.
Extensions Recommandées pour le Web3 : Une fois VS Code installé, ouvrez-le et recherchez ces extensions dans la section "Extensions" (icône carrée sur la barre latérale gauche) :
- Solidity (par NomicFoundation) : Fournit la coloration syntaxique, l'autocomplétion, le linting et la vérification des erreurs pour les fichiers Solidity. Essentiel !
- Prettier - Code formatter : Un formateur de code qui assure un style de code cohérent. Très utile avec les extensions Prettier pour Solidity.

2.3. Choisir et Configurer un Framework de Développement : Hardhat

Hardhat est un environnement de développement pour Ethereum. Il offre des outils pour compiler, déployer, tester et déboguer votre code Solidity. Sa principale force est sa flexibilité et son réseau local intégré (Hardhat Network), qui simplifie grandement le processus de développement.

2.3.1. Initialisation d'un Projet Hardhat

Maintenant que vous avez Node.js, npm et VS Code, vous êtes prêt à initialiser votre premier projet Hardhat.

Créez un Répertoire de Projet : Créez un nouveau dossier pour votre projet et naviguez-y dans votre terminal.
```
mkdir mon-projet-web3
cd mon-projet-web3
```
Initialisez un Projet npm : Ceci crée un fichier package.json qui gérera les dépendances de votre projet.
```
npm init -y
```
L'option -y répond "oui" à toutes les questions et utilise les valeurs par défaut.
Installez Hardhat : Installez Hardhat en tant que dépendance de développement.
```
npm install --save-dev hardhat
```

Créez un Projet Hardhat : Maintenant, utilisez la commande npx hardhat pour initialiser le projet Hardhat. npx exécute un package npm sans l'installer globalement.

npx hardhat

Le terminal vous présentera différentes options. Pour ce cours, choisissez :

Create a JavaScript project (ou TypeScript si vous préférez, mais nous utiliserons JavaScript dans les exemples).
Appuyez sur Entrée pour accepter les chemins par défaut pour hardhat.config.js, contracts/ et test/.
Appuyez sur Entrée pour ajouter un .gitignore.

L'output de votre terminal devrait ressembler à ceci :

Welcome to Hardhat vX.Y.Z

? What do you want to do? ...
  Create a TypeScript project
> Create a JavaScript project
  Create an empty hardhat.config.js
  Quit

✔ A sample project will be created. Press Enter to continue. ··············
✔ Project folder: mon-projet-web3
✔ Create a .gitignore file? (Y/n) ······································· Yes
✔ Install Hardhat's dependencies? (Y/n) ································ Yes

You need to install these dependencies to use Hardhat:
  - @nomicfoundation/hardhat-toolbox@^3.0.0

Configuring your Hardhat project
... (quelques messages d'installation) ...

You are all set!

Hardhat va alors installer les dépendances nécessaires, notamment @nomicfoundation/hardhat-toolbox, qui inclut Ethers.js, la bibliothèque de test Waffle, et d'autres utilitaires.

Votre répertoire de projet mon-projet-web3 devrait maintenant contenir la structure suivante (générée par Hardhat) :

mon-projet-web3/
├── node_modules/       # Dépendances Node.js
├── contracts/          # Vos fichiers Solidity (.sol) iront ici
│   └── Lock.sol        # Un exemple de contrat généré par Hardhat
├── scripts/            # Vos scripts de déploiement et d'interaction iront ici
│   └── deploy.js       # Un exemple de script de déploiement
├── test/               # Vos fichiers de test pour les smart contracts iront ici
│   └── Lock.js         # Un exemple de test
├── hardhat.config.js   # Le fichier de configuration de Hardhat
├── package.json        # Informations sur le projet et ses dépendances
├── package-lock.json   # Verrouillage des versions des dépendances
└── .gitignore          # Fichier pour Git ignorant les dossiers/fichiers inutiles

Vous avez maintenant un environnement de développement Hardhat fonctionnel !

3. Premier Pas avec Hardhat : Créer un Contrat Simple

Nous allons maintenant écrire un smart contract Solidity très simple et apprendre à le compiler localement avec Hardhat.

3.1. Création d'un Smart Contract Solidity

Nous allons créer un contrat Greeter.sol qui stocke un message et permet de le récupérer ou de le changer.

Créez un Nouveau Fichier de Contrat : Dans le dossier contracts/, créez un nouveau fichier nommé Greeter.sol.

mon-projet-web3/
├── contracts/
│   ├── Greeter.sol  <-- Nouveau fichier
│   └── Lock.sol
...

Écrivez le Code Solidity : Ouvrez Greeter.sol dans VS Code et collez le code suivant :
```
// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.9; // Spécifie la version du compilateur Solidity

// Définition du contrat intelligent nommé Greeter
contract Greeter {
    // Déclaration d'une variable d'état (stockée sur la blockchain)
    string private greeting; // 'private' signifie qu'elle ne peut pas être lue directement de l'extérieur

    // Constructeur : fonction exécutée une seule fois lors du déploiement du contrat
    constructor(string memory _greeting) {
        greeting = _greeting; // Initialise le message de bienvenue
    }

    // Fonction pour récupérer le message de bienvenue
    // 'view' indique que la fonction ne modifie pas l'état de la blockchain
    // 'returns (string memory)' spécifie le type de retour
    function greet() public view returns (string memory) {
        return greeting;
    }

    // Fonction pour changer le message de bienvenue
    // 'public' signifie que la fonction peut être appelée de l'extérieur
    function setGreeting(string memory _newGreeting) public {
        greeting = _newGreeting; // Met à jour le message
    }
}
```
Explication du code Greeter.sol :
- // SPDX-License-Identifier: UNLICENSED : Une ligne obligatoire pour spécifier la licence du code. UNLICENSED est utilisé pour les exemples.
- pragma solidity ^0.8.9; : Indique que ce contrat doit être compilé avec une version de Solidity supérieure ou égale à 0.8.9 et inférieure à 0.9.0.
- contract Greeter { ... } : C'est ainsi que l'on déclare un contrat en Solidity. Greeter est le nom de notre contrat.
- string private greeting; : Déclare une variable d'état nommée greeting de type string. Les variables d'état sont stockées de manière permanente sur la blockchain. private signifie qu'elle n'est pas accessible directement de l'extérieur du contrat (nous devrons utiliser une fonction pour la lire).
- constructor(string memory _greeting) : Le constructeur est une fonction spéciale qui s'exécute une seule fois lorsque le contrat est déployé sur la blockchain. Il prend un argument _greeting et l'affecte à notre variable d'état greeting. memory indique que _greeting est une variable temporaire stockée en mémoire pendant l'exécution de la fonction.
- function greet() public view returns (string memory) :
  - function greet() : Déclare une fonction nommée greet.
  - public : Rend la fonction accessible de l'extérieur du contrat.
  - view : Indique que cette fonction ne modifie pas l'état de la blockchain. Elle ne fait que lire des données. Les fonctions view sont gratuites à appeler.
  - returns (string memory) : Spécifie que la fonction retourne une chaîne de caractères.
- function setGreeting(string memory _newGreeting) public :
  - function setGreeting() : Déclare une fonction pour modifier le message.
  - public : Accessible de l'extérieur.
  - Cette fonction modifie l'état de la blockchain (greeting), elle n'a donc pas le modificateur view. Appeler une telle fonction coûte du gaz (frais de transaction).

3.2. Compilation et Déploiement Local avec Hardhat

Hardhat peut compiler vos contrats et les déployer sur un réseau blockchain. Pour le développement, nous utiliserons le réseau local (Hardhat Network) fourni par Hardhat.

Compilation du Contrat : Hardhat compile automatiquement vos contrats lorsque vous exécutez certaines commandes (comme le déploiement ou les tests). Vous pouvez aussi le faire manuellement :
```
npx hardhat compile
```
Vous devriez voir un message indiquant que Greeter.sol a été compilé. Un nouveau dossier artifacts/ sera créé, contenant le bytecode de votre contrat et son ABI (Application Binary Interface), qui est nécessaire pour interagir avec le contrat depuis l'extérieur.

Création d'un Script de Déploiement : Les smart contracts doivent être "déployés" sur une blockchain pour être utilisables. Hardhat utilise des scripts JavaScript pour cela. Ouvrez le fichier scripts/deploy.js (ou créez-en un nouveau si vous souhaitez conserver l'exemple Lock.js) et remplacez son contenu par le code suivant :

// scripts/deploy.js
const hre = require("hardhat"); // Importe l'environnement Hardhat

async function main() {
  // Obtenez la fabrique du contrat pour 'Greeter'
  // 'hre.ethers.getContractFactory' est une fonction de Hardhat qui utilise Ethers.js
  // pour obtenir une abstraction de contrat qui vous permet de déployer un nouveau contrat.
  const Greeter = await hre.ethers.getContractFactory("Greeter");

  // Déployez le contrat Greeter avec le message initial "Hello, Hardhat!"
  // Le constructeur du contrat Greeter attend un argument de type string.
  const greeter = await Greeter.deploy("Hello, Hardhat!");

  // Attendez que le contrat soit réellement déployé sur le réseau.
  // Cela garantit que la transaction de déploiement a été minée.
  await greeter.waitForDeployment();

  // Affichez l'adresse du contrat déployé dans la console.
  // C'est l'adresse que vous utiliserez pour interagir avec votre contrat.
  console.log(`Greeter contract deployed to: ${greeter.target}`);

  // Vous pouvez maintenant interagir avec le contrat directement depuis le script.
  // Par exemple, lisons le message actuel :
  const currentGreeting = await greeter.greet();
  console.log(`Current greeting: ${currentGreeting}`);

  // Changeons le message :
  const tx = await greeter.setGreeting("Bonjour, le Web3!");
  await tx.wait(); // Attendez que la transaction soit confirmée

  // Lisons le nouveau message :
  const newGreeting = await greeter.greet();
  console.log(`New greeting after update: ${newGreeting}`);
}

// Nous recommandons cette approche pour gérer les erreurs.
// Exécute la fonction main et gère les erreurs en cas de rejet.
main().catch((error) => {
  console.error(error);
  process.exitCode = 1; // Indique une sortie avec erreur
});

Explication du script deploy.js :

const hre = require("hardhat"); : Importe l'environnement d'exécution Hardhat, qui nous donne accès à toutes les fonctionnalités (compilation, déploiement, réseau, etc.).
async function main() { ... } : La fonction principale asynchrone qui contient la logique de déploiement.
const Greeter = await hre.ethers.getContractFactory("Greeter"); : Utilise la bibliothèque ethers.js (incluse dans Hardhat) pour obtenir une "fabrique de contrat" pour notre contrat Greeter. C'est un objet qui nous permet de créer des instances de ce contrat.
const greeter = await Greeter.deploy("Hello, Hardhat!"); : Déploie une nouvelle instance du contrat Greeter sur le réseau. L'argument "Hello, Hardhat!" est passé au constructeur du contrat.
await greeter.waitForDeployment(); : Attend que la transaction de déploiement soit confirmée sur la blockchain.
console.log(...) : Affiche l'adresse à laquelle le contrat a été déployé.
Les lignes suivantes montrent comment interagir avec le contrat après son déploiement :
- await greeter.greet() : Appelle la fonction greet du contrat.
- await greeter.setGreeting(...) : Appelle la fonction setGreeting. Notez que await tx.wait() est utilisé après l'appel à setGreeting car cette fonction modifie l'état de la blockchain et nécessite une transaction qui doit être minée.

Déploiement du Contrat : Dans votre terminal, exécutez le script de déploiement sur le réseau local Hardhat :
```
npx hardhat run scripts/deploy.js
```
Lorsque vous exécutez cette commande sans spécifier de --network, Hardhat utilise son réseau local intégré (Hardhat Network), qui est un environnement blockchain éphémère et léger, parfait pour le développement et les tests.

Vous devriez voir un output similaire à ceci :
```
Compile with 0.8.19
Compiled 1 Solidity file successfully
Greeter contract deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3 # L'adresse peut varier
Current greeting: Hello, Hardhat!
New greeting after update: Bonjour, le Web3!
```
Félicitations ! Vous venez de compiler et de déployer votre premier smart contract sur un réseau blockchain local, et d'interagir avec lui via un script.

Conclusion et Prochaines Étapes

Vous avez franchi une étape cruciale dans votre parcours de développeur Web3 !

Dans cette leçon, nous avons :

Exploré les fondements du Web3, en le contrastant avec le Web1 et le Web2, et en détaillant des concepts clés comme la blockchain, les smart contracts et les DApps.
Identifié les outils essentiels pour le développement Web3 et configuré votre environnement avec Node.js, npm et Visual Studio Code.
Initialisé un projet avec Hardhat, le framework de développement de smart contracts le plus populaire pour Ethereum.
Écrit un smart contract simple en Solidity et appris à le compiler et à le déployer sur un réseau local Hardhat Network.

Vous avez maintenant une compréhension théorique solide du Web3 et une base technique fonctionnelle pour commencer à bâtir.

Dans les prochaines leçons, nous approfondirons les tests de smart contracts, l'interaction avancée avec Ethers.js, et la création de l'interface utilisateur (frontend React) pour interagir avec vos DApps.

Le monde du Web3 est vaste et en constante évolution. Continuez à expérimenter, à lire la documentation et à rester curieux. Le meilleur est à venir !