En terminant la Leçon 5, notre DApp zombie est terminée. Maintenant, nous allons créer une page web basique où vos utilisateurs pourrons interagir avec.
Pour cela, nous allons utiliser une bibliothèque JavaScript de la fondation Ethereum appelée Web3.js.
Rappelez-vous, le réseau Ethereum est fait de nœuds, dont chacun contient une copie de la blockchain. Quand vous voulez appeler une fonction d'un smart contract, vous avez besoin de faire une demande à l'un de ces nœuds en lui indiquant :
Les nœuds Ethereum parlent seulement un langage appelé JSON-RPC, qui n'est pas vraiment lisible par l'homme. Une requête pour indiquer à un nœud que vous voulez appeler une fonction d'un contrat ressemble à ça :
// Oui... Bonne chance pour écrire toutes vos fonctions comme ça !
{"jsonrpc":"2.0","method":"eth_sendTransaction","params":[{"from":"0xb60e8dd61c5d32be8058bb8eb970870f07233155","to":"0xd46e8dd67c5d32be8058bb8eb970870f07244567","gas":"0x76c0","gasPrice":"0x9184e72a000","value":"0x9184e72a","data":"0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675"}],"id":1}
Heureusement, Web3.js cache ces vilaines requêtes de notre vue, et vous avez seulement besoin d'interagir avec une interface JavaScript pratique et lisible.
Au lieu d'écrire la requête ci-dessus, appelez une fonction dans votre code ressemblera à ceci :
CryptoZombies.methods.createRandomZombie("Vitalik Nakamoto 🤔")
.send({ from: "0xb60e8dd61c5d32be8058bb8eb970870f07233155", gas: "3000000" })
Nous vous expliquerons la syntaxe plus en détails dans les prochains chapitres, mais pour l'instant, configurons votre projet pour utiliser Web3.js.
Dépendamment de votre environnement de travail, vous pouvez ajouter Web3.js en utilisant la plupart des gestionnaires de paquets :
// Avec NPM
npm install web3
// Avec Yarn
yarn add web3
// Avec Bower
bower install web3
// ...etc.
Ou vous pouvez simplement télécharger le fichier .js minifié à partir de github et l'inclure dans votre projet :
<script language="javascript" type="text/javascript" src="web3.min.js"></script>
Puisque nous ne voulons pas faire trop d'hypothèses quand à votre environnent de travail et quel gestionnaire de paquets vous utilisez, pour ce tutoriel nous allons simplement inclure Web3.js dans notre projet en utilisant la balise de script ci-dessus.