Gør brug af Web3.js JavaScript-biblioteket til at etablere en problemfri grænseflade til interaktion med Ethereum blockchain.
Smarte kontrakter er de primære byggesten til Web3-applikationer. For at aktivere funktionaliteter i Web3-applikationer er det vigtigt at kunne interagere med de funktioner, der er specificeret i en smart kontrakt, bekvemt. Du kan bruge et populært sprog som JavaScript og det velkendte Web3.js-bibliotek til at etablere denne kommunikation.
Introduktion til Web3.js-biblioteket
Web3.js er et JavaScript-bibliotek, der tilbyder en grænseflade til interaktion med Ethereum blockchain. Det forenkler byggeprocessen decentraliserede applikationer (DApps) ved at levere metoder og værktøjer til at oprette forbindelse til Ethereum-noder, sende transaktioner, læse smarte kontraktdata og håndtere hændelser.
Web3.js bygger bro mellem traditionel udvikling og blockchain-teknologi, så du kan skabe decentraliserede og sikre applikationer ved hjælp af velkendt JavaScript-syntaks og funktionalitet.
Sådan importeres Web3.js til et JavaScript-projekt
For at bruge Web3.js i dit Node-projekt skal du først installere biblioteket som en projektafhængighed.
Installer biblioteket ved at køre denne kommando inde i dit projekt:
npm install web3or
yarn add web3
Efter installation af Web3.js kan du nu importere biblioteket i dit Node-projekt som et ES-modul:
const Web3 = require('web3');
Interaktion med implementerede smarte kontrakter
For korrekt at demonstrere, hvordan du kan interagere med en implementeret smart kontrakt på Ethereum-netværket ved hjælp af Web3.js, vil du oprette en webapplikation, der fungerer med implementeret smart kontrakt. Formålet med webappen vil være en simpel stemmeseddel, hvor en pung kan afgive stemmer på en kandidat og få disse stemmer registreret.
For at starte skal du oprette en ny mappe til dit projekt og initialisere den som et Node.js-projekt:
npm init
Installer Web3.js i projektet som en afhængighed og opret enkelt index.html og styles.css filer i projektets rod.
Importer følgende kode i index.html fil:
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>
Inde i styles.css fil, importer følgende kode:
/* 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;
}
Nedenfor er den resulterende grænseflade:
Nu hvor du har en grundlæggende grænseflade til at komme i gang, skal du oprette en kontrakt mappe i dit projekts rod for at indeholde koden til din smarte kontrakt.
Remix IDE giver en enkel måde at skrive, implementere og teste smarte kontrakter. Du vil bruge Remix til at implementere din kontrakt til Ethereum-netværket.
Naviger til remix.ethereum.org og opret en ny fil under kontrakter folder. Du kan navngive filen test_contract.sol.
Det .sol udvidelse angiver, at dette er en Solidity-fil. Soliditet er et af de mest populære sprog til at skrive moderne smarte kontrakter.
Inde i denne fil, skriv og kompilér din Solidity-kode:
// 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];
};
};
Når Remix kompilerer Solidity-kode, opretter det også en ABI (Application Binary Interface) i et JSON-format. ABI definerer grænsefladen mellem en smart kontrakt og en klientapplikation.
Det ville specificere følgende:
- Navne og typer af funktioner og hændelser, der er afsløret af den smarte kontrakt.
- Argumenternes rækkefølge til hver funktion.
- Returværdierne for hver funktion.
- Dataformatet for hver begivenhed.
For at få ABI'en skal du kopiere den fra Remix IDE'en. Lave en contract.abi.json fil indeni kontrakt i dit projekts rod, og indsæt ABI i filen.
Du bør gå videre og implementere din kontrakt til et testnetværk ved hjælp af et værktøj som Ganache.
Kommunikation med din implementerede smarte kontrakt ved hjælp af Web3.js
Din kontrakt er nu blevet implementeret til et Ethereum-testnetværk. Du kan begynde at arbejde på at interagere med den implementerede kontrakt fra din brugergrænseflade. Lave en main.js fil i dit projekts rod. Du vil importere både Web3.js og din gemte ABI-fil til main.js. Denne fil vil tale med din smarte kontrakt og vil være ansvarlig for at læse data fra kontrakten, kalde dens funktioner og håndtere transaktioner.
Nedenfor er hvordan din main.js filen skal se ud:
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);
});
});
Kodeblokken ovenfor bruger Web3.js til at tale med dine smarte kontraktfunktioner fra din webgrænseflade. Grundlæggende bruger du JavaScript-funktioner til at kalde Solidity-funktioner fra main.js.
Udskift i koden 'CONTRACT_ADDRESS' med den faktiske udsendte kontraktadresse. Remix IDE vil give dig dette ved udrulning.
Her er hvad der sker i koden:
- Opdater DOM-elementvalg baseret på din HTML-struktur. I dette eksempel antager det, at hvert kandidatelement har en data-kandidat egenskab, der svarer til kandidatens navn.
- Et eksempel på Web3 klasse oprettes derefter ved hjælp af den injicerede udbyder fra vindue.ethereum objekt.
- Det stemmeaftale variabel opretter en kontraktinstans ved hjælp af kontraktadressen og ABI.
- Det stemme funktion varetager afstemningsprocessen. Det kalder stemme funktion af den smarte kontrakt ved hjælp af votingContract.methods.vote (kandidat).send(). Den sender en transaktion til kontrakten og registrerer brugerens stemme. Det antal stemmer variabel kalder derefter getVoteCount funktion af den smarte kontrakt til at hente det aktuelle stemmetal for en specifik kandidat. Det vil derefter opdatere stemmetællingen i brugergrænsefladen, så den matcher de hentede stemmer.
Husk at medtage dette main.js fil i din HTML-fil ved hjælp af en tag.
Sørg derudover, at kontraktadressen og ABI er korrekte, og at du har korrekt fejlhåndtering på plads.
JavaScripts rolle i opbygning af DApps
JavaScript har evnen til at interagere med smarte kontrakter, der bruges i decentrale applikationer. Dette samler Web3-verdenen med et primært programmeringssprog, der bruges til at bygge Web2-apps, som hjælper med at lette overtagelsen af Web3. Med Web3.js kan Web2-udviklere gå over til at bygge apps som en Web3 social medieplatform.