Maak gebruik van de Web3.js JavaScript-bibliotheek om een naadloze interface tot stand te brengen voor interactie met de Ethereum-blockchain.
Slimme contracten zijn de belangrijkste bouwstenen voor Web3-applicaties. Om functionaliteiten in Web3-applicaties mogelijk te maken, is het belangrijk om gemakkelijk te kunnen communiceren met de functies die zijn gespecificeerd in een slim contract. U kunt een populaire taal zoals JavaScript en de bekende Web3.js-bibliotheek gebruiken om deze communicatie tot stand te brengen.
Inleiding tot de Web3.js-bibliotheek
Web3.js is een JavaScript-bibliotheek die een interface biedt voor interactie met de Ethereum-blockchain. Het vereenvoudigt het bouwproces gedecentraliseerde applicaties (DApps) door methoden en hulpmiddelen te bieden om verbinding te maken met Ethereum-knooppunten, transacties te verzenden, slimme contractgegevens te lezen en gebeurtenissen af te handelen.
Web3.js overbrugt traditionele ontwikkeling en blockchain-technologie, waardoor u gedecentraliseerde en veilige applicaties kunt maken met behulp van de bekende JavaScript-syntaxis en -functionaliteit.
Hoe Web3.js in een JavaScript-project te importeren
Om Web3.js in uw Node-project te gebruiken, moet u eerst de bibliotheek als projectafhankelijkheid installeren.
Installeer de bibliotheek door deze opdracht in uw project uit te voeren:
npm install web3or
yarn add web3
Na het installeren van Web3.js, kunt u nu de bibliotheek binnen uw Node-project importeren als een ES-module:
const Web3 = require('web3');
Interactie met geïmplementeerde slimme contracten
Om goed te demonstreren hoe u kunt communiceren met een geïmplementeerd slim contract op het Ethereum-netwerk met behulp van Web3.js, maakt u een webtoepassing die werkt met een geïmplementeerd slim contract. Het doel van de web-app is een eenvoudig stembiljet waarbij een portemonnee stemmen kan uitbrengen op een kandidaat en die stemmen kan laten registreren.
Maak om te beginnen een nieuwe map voor uw project en initialiseer deze als een Node.js-project:
npm init
Installeer Web3.js in het project als een afhankelijkheid en creëer eenvoudig index.html En stijlen.css bestanden in de root van het project.
Importeer de volgende code in het index.html bestand:
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>
Binnen in de stijlen.css bestand, importeer de volgende code:
/* 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;
}
Hieronder is de resulterende interface:
Nu je een basisinterface hebt om aan de slag te gaan, maak je een contract map in de hoofdmap van uw project om de code voor uw slimme contract te bevatten.
De Remix IDE biedt een eenvoudige manier om slimme contracten te schrijven, implementeren en testen. U gebruikt Remix om uw contract op het Ethereum-netwerk te implementeren.
Navigeren naar remix.ethereum.org en maak een nieuw bestand onder de contracten map. U kunt het bestand een naam geven test_contract.sol.
De .Sol extensie geeft aan dat dit een Solidity-bestand is. Soliditeit is een van de meest populaire talen voor het schrijven van moderne slimme contracten.
In dit bestand, schrijf en compileer uw Solidity-code:
// 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];
};
};
Wanneer Remix Solidity-code compileert, creëert het ook een ABI (Application Binary Interface) in een JSON-indeling. De ABI definieert de interface tussen een slim contract en een clienttoepassing.
Het zou het volgende specificeren:
- De namen en soorten functies en gebeurtenissen die worden weergegeven door het slimme contract.
- De volgorde van de argumenten voor elke functie.
- De retourwaarden van elke functie.
- Het gegevensformaat van elke gebeurtenis.
Om de ABI te krijgen, kopieert u deze vanuit de Remix IDE. Maak een contract.abi.json dossier binnen contract in de hoofdmap van uw project en plak de ABI in het bestand.
U moet doorgaan en uw contract implementeren in een testnetwerk met behulp van een tool zoals Ganache.
Communiceren met uw geïmplementeerde slimme contract met behulp van Web3.js
Uw contract is nu geïmplementeerd in een Ethereum-testnetwerk. U kunt vanuit uw UI-interface gaan werken aan de interactie met het geïmplementeerde contract. Maak een main.js bestand in de root van uw project. U importeert zowel Web3.js als uw opgeslagen ABI-bestand in main.js. Dit bestand praat met uw slimme contract en is verantwoordelijk voor het lezen van gegevens uit het contract, het aanroepen van de functies en het afhandelen van transacties.
Hieronder ziet u hoe uw main.js bestand zou er uit moeten zien:
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);
});
});
Het bovenstaande codeblok maakt gebruik van Web3.js om te praten met uw slimme contractfuncties vanuit uw webinterface. In wezen gebruikt u JavaScript-functies om Solidity-functies aan te roepen main.js.
Vervang in de code 'CONTRACT_ADDRESS' met het werkelijke ingezette contractadres. De Remix IDE zal u hiervan voorzien bij de implementatie.
Dit is wat er gebeurt in de code:
- Werk de selectie van DOM-elementen bij op basis van uw HTML-structuur. In dit voorbeeld wordt ervan uitgegaan dat elk kandidaat-element een data-kandidaat attribuut dat overeenkomt met de naam van de kandidaat.
- Een voorbeeld van de Web3 class wordt vervolgens gemaakt met behulp van de geïnjecteerde provider van de venster.ethereum voorwerp.
- De stemmenContract variabele maakt een contractinstantie met behulp van het contractadres en ABI.
- De stemmen functie verzorgt het stemproces. Het noemt de stemmen functie van het slimme contract gebruiken votingContract.methods.vote (kandidaat).send(). Het stuurt een transactie naar het contract en registreert de stem van de gebruiker. De stemmenCount variabele roept dan de krijgVoteCount functie van het slimme contract om het huidige aantal stemmen voor een specifieke kandidaat op te halen. Vervolgens wordt het aantal stemmen in de gebruikersinterface bijgewerkt zodat het overeenkomt met de opgehaalde stemmen.
Vergeet niet dit erbij te vermelden main.js bestand in uw HTML-bestand met behulp van een tag.
Zorg er bovendien voor dat het contractadres en ABI correct zijn en dat u de juiste foutafhandeling aanwezig.
De rol van JavaScript bij het bouwen van DApps
JavaScript heeft de mogelijkheid om te communiceren met slimme contracten die worden gebruikt in gedecentraliseerde applicaties. Dit brengt de Web3-wereld samen met een primaire programmeertaal die wordt gebruikt bij het bouwen van Web2-apps, wat de acceptatie van Web3 helpt vergemakkelijken. Met Web3.js kunnen Web2-ontwikkelaars overstappen op het bouwen van apps zoals een Web3-platform voor sociale media.
