Utilisez la bibliothèque JavaScript Web3.js pour établir une interface transparente pour interagir avec la blockchain Ethereum.
Les contrats intelligents sont les principaux éléments constitutifs des applications Web3. Afin d'activer les fonctionnalités dans les applications Web3, il est important de pouvoir interagir facilement avec les fonctions spécifiées dans un contrat intelligent. Vous pouvez utiliser un langage populaire comme JavaScript et la célèbre bibliothèque Web3.js pour établir cette communication.
Présentation de la bibliothèque Web3.js
Web3.js est une bibliothèque JavaScript qui offre une interface pour interagir avec la blockchain Ethereum. Il simplifie le processus de construction applications décentralisées (DApps) en fournissant des méthodes et des outils pour se connecter aux nœuds Ethereum, envoyer des transactions, lire les données des contrats intelligents et gérer les événements.
Web3.js relie le développement traditionnel et la technologie blockchain, vous permettant de créer des applications décentralisées et sécurisées à l'aide de la syntaxe et des fonctionnalités JavaScript familières.
Comment importer Web3.js dans un projet JavaScript
Pour utiliser Web3.js dans votre projet Node, vous devez d'abord installer la bibliothèque en tant que dépendance du projet.
Installez la bibliothèque en exécutant cette commande dans votre projet :
npm install web3or
yarn add web3
Après avoir installé Web3.js, vous pouvez maintenant importer la bibliothèque dans votre projet Node en tant que module ES :
const Web3 = require('web3');
Interagir avec les contrats intelligents déployés
Pour démontrer correctement comment vous pouvez interagir avec un contrat intelligent déployé sur le réseau Ethereum à l'aide de Web3.js, vous allez créer une application Web qui fonctionne avec un contrat intelligent déployé. Le but de l'application Web sera un simple bulletin de vote où un portefeuille peut voter pour un candidat et faire enregistrer ces votes.
Pour commencer, créez un nouveau répertoire pour votre projet et initialisez-le en tant que projet Node.js :
npm init
Installez Web3.js dans le projet en tant que dépendance et créez des index.html et styles.css fichiers à la racine du projet.
Importez le code suivant dans le index.html déposer:
html>
<html>
<head>
<title>Voting Apptitle>
<linkrel="stylesheet"href="styles.css" />
head>
<body>
<h1>Voting Apph1><divclass="candidates">
<divclass="candidate">
<spanclass="name">Candidate Aspan>
<buttonclass="vote-btn"data-candidate="A">Votebutton>
<spanclass="vote-count">0 votesspan>
div>
<divclass="candidate">
<spanclass="name">Candidate Bspan>
<buttonclass="vote-btn"data-candidate="B">Votebutton>
<spanclass="vote-count">0 votesspan>
div>
<divclass="candidate">
<spanclass="name">Candidate Cspan>
<buttonclass="vote-btn"data-candidate="C">Votebutton>
<spanclass="vote-count">0 votesspan>
div>
div>
<scriptsrc="main.js">script>
body>
html>
À l'intérieur de styles.css fichier, importez le code suivant :
/* styles.css */
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 30px;
}
.candidates {
display: flex;
justify-content: center;
margin-top: 50px;
}
.candidate {
margin: 20px;
}
.name {
font-weight: bold;
}
.vote-btn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.vote-count {
margin-top: 5px;
}
Ci-dessous l'interface résultante :
Maintenant que vous disposez d'une interface de base pour commencer, créez un contracter dossier à la racine de votre projet pour contenir le code de votre contrat intelligent.
L'IDE Remix fournit un moyen simple d'écrire, de déployer et de tester des contrats intelligents. Vous utiliserez Remix pour déployer votre contrat sur le réseau Ethereum.
Aller vers remix.ethereum.org et créer un nouveau fichier sous le contrats dossier. Vous pouvez nommer le fichier test_contract.sol.
Le .sol indique qu'il s'agit d'un fichier Solidity. La solidité est l'un des langages les plus populaires pour rédiger des contrats intelligents modernes.
Dans ce fichier, écrire et compiler votre code Solidity:
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract Voting {
mapping(string => uint256) private voteCounts;
functionvote(string memory candidate) public{
voteCounts[candidate]++;
};
functiongetVoteCount(string memory candidate) publicviewreturns (uint256){
return voteCounts[candidate];
};
};
Lorsque Remix compile le code Solidity, il crée également une ABI (Application Binary Interface) au format JSON. L'ABI définit l'interface entre un contrat intelligent et une application cliente.
Il préciserait ce qui suit :
- Les noms et types de fonctions et d'événements qui sont exposés par le contrat intelligent.
- L'ordre des arguments de chaque fonction.
- Les valeurs de retour de chaque fonction.
- Le format de données de chaque événement.
Pour obtenir l'ABI, copiez-le depuis l'IDE Remix. Créer un contrat.abi.json fichier à l'intérieur contracter dans la racine de votre projet et collez l'ABI dans le fichier.
Vous devriez aller de l'avant et déployer votre contrat sur un réseau de test à l'aide d'un outil comme Ganache.
Communiquer avec votre contrat intelligent déployé à l'aide de Web3.js
Votre contrat a maintenant été déployé sur un réseau de test Ethereum. Vous pouvez commencer à travailler sur l'interaction avec le contrat déployé à partir de votre interface utilisateur. Créer un main.js fichier à la racine de votre projet. Vous importerez à la fois Web3.js et votre fichier ABI enregistré dans main.js. Ce fichier parlera à votre contrat intelligent et sera chargé de lire les données du contrat, d'appeler ses fonctions et de gérer les transactions.
Voici comment votre main.js le fichier doit ressembler à :
const Web3 = require('web3');
const contractAddress = "CONTRACT_ADDRESS"; // Replace with the actual deployed contract address
import contractAbi from'../contract/contract.abi.json'// Create an instance of web3 using the injected provider (e.g., MetaMask)
const web3 = new Web3(window.ethereum);// Create a contract instance using the contract address and ABI
const votingContract = new web3.eth.Contract(contractAbi, contractAddress);// Retrieve the candidate elements from the DOM
const candidates = document.querySelectorAll('.candidate');// Function to handle voting for a candidate
asyncfunctionvote(candidate) {
try {
// Call the 'vote' function of the smart contract
await votingContract.methods.vote(candidate).send({ from: web3.eth.defaultAccount });// Update the vote count in the UI
const voteCount = await votingContract.methods.getVoteCount(candidate).call();
const voteCountElement = document.querySelector(`[data-candidate="${candidate}"] .vote-count`);
voteCountElement.textContent = `${voteCount} votes`;
} catch (error) {
console.error(error);
// Handle error cases, such as invalid transactions or network issues
}
}
// Add click event listeners to the vote buttons
candidates.forEach(candidate => {
const candidateName = candidate.getAttribute('data-candidate');
const voteBtn = candidate.querySelector('.vote-btn');
voteBtn.addEventListener('click', () => {
vote(candidateName);
});
});
Le bloc de code ci-dessus utilise Web3.js pour communiquer avec vos fonctions de contrat intelligent à partir de votre interface Web. Essentiellement, vous utilisez des fonctions JavaScript pour appeler des fonctions Solidity à partir de main.js.
Dans le code, remplacez 'CONTRACT_ADDRESS' avec l'adresse réelle du contrat déployé. L'IDE Remix vous le fournira lors du déploiement.
Voici ce qui se passe dans le code :
- Mettez à jour la sélection des éléments DOM en fonction de votre structure HTML. Dans cet exemple, il suppose que chaque élément candidat a un données-candidat attribut qui correspond au nom du candidat.
- Un exemple de Web3 la classe est ensuite créée à l'aide du fournisseur injecté à partir du fenêtre.ethereum objet.
- Le voteContrat La variable crée une instance de contrat à l'aide de l'adresse du contrat et de l'ABI.
- Le vote La fonction gère le processus de vote. Il appelle le vote fonction du contrat intelligent utilisant votingContract.methods.vote (candidate).send(). Il envoie une transaction au contrat, enregistrant le vote de l'utilisateur. Le voteCount la variable appelle alors la getVoteCount fonction du contrat intelligent pour récupérer le nombre de votes actuel pour un candidat spécifique. Il mettra ensuite à jour le nombre de votes dans l'interface utilisateur pour correspondre aux votes récupérés.
N'oubliez pas d'inclure ceci main.js fichier dans votre fichier HTML à l'aide d'un tag.
En outre, assurez-vous que l'adresse du contrat et l'ABI sont corrects et que vous disposez des gestion des erreurs en place.
Rôle de JavaScript dans la création de DApps
JavaScript a la capacité d'interagir avec les contrats intelligents utilisés dans les applications décentralisées. Cela rassemble le monde Web3 avec un langage de programmation principal utilisé dans la création d'applications Web2, ce qui facilite l'adoption de Web3. Avec Web3.js, les développeurs Web2 peuvent passer à la création d'applications comme une plate-forme de médias sociaux Web3.
