Benytt JavaScript-biblioteket Web3.js for å etablere et sømløst grensesnitt for interaksjon med Ethereum-blokkjeden.
Smarte kontrakter er de primære byggesteinene for Web3-applikasjoner. For å aktivere funksjonalitet i Web3-applikasjoner er det viktig å kunne samhandle med funksjonene spesifisert i en smart kontrakt på en praktisk måte. Du kan bruke et populært språk som JavaScript og det velkjente Web3.js-biblioteket for å etablere denne kommunikasjonen.
Introduksjon til Web3.js-biblioteket
Web3.js er et JavaScript-bibliotek som tilbyr et grensesnitt for interaksjon med Ethereum-blokkjeden. Det forenkler byggeprosessen desentraliserte applikasjoner (DApps) ved å tilby metoder og verktøy for å koble til Ethereum-noder, sende transaksjoner, lese smart kontraktsdata og håndtere hendelser.
Web3.js bygger bro mellom tradisjonell utvikling og blokkjedeteknologi, slik at du kan lage desentraliserte og sikre applikasjoner ved å bruke kjent JavaScript-syntaks og funksjonalitet.
Hvordan importere Web3.js til et JavaScript-prosjekt
For å bruke Web3.js i Node-prosjektet ditt, må du først installere biblioteket som en prosjektavhengighet.
Installer biblioteket ved å kjøre denne kommandoen i prosjektet ditt:
npm install web3or
yarn add web3
Etter å ha installert Web3.js, kan du nå importere biblioteket i Node-prosjektet ditt som en ES-modul:
const Web3 = require('web3');
Samhandling med implementerte smarte kontrakter
For å demonstrere riktig hvordan du kan samhandle med en utplassert smart kontrakt på Ethereum-nettverket ved å bruke Web3.js, vil du lage en nettapplikasjon som fungerer med utplassert smart kontrakt. Formålet med nettappen vil være en enkel stemmeseddel der en lommebok kan avgi stemmer på en kandidat og få disse stemmene registrert.
For å starte, opprett en ny katalog for prosjektet og initialiser den som et Node.js-prosjekt:
npm init
Installer Web3.js i prosjektet som en avhengighet og lag enkelt index.html og styles.css filer i prosjektets rot.
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>
Inne 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 det resulterende grensesnittet:
Nå som du har et grunnleggende grensesnitt for å komme i gang, lag en kontrakt mappen i prosjektets rot for å inneholde koden for smartkontrakten din.
Remix IDE gir en enkel måte å skrive, distribuere og teste smarte kontrakter. Du vil bruke Remix for å distribuere kontrakten din til Ethereum-nettverket.
Navigere til remix.ethereum.org og lag en ny fil under kontrakter mappe. Du kan navngi filen test_contract.sol.
De .sol utvidelse indikerer at dette er en Solidity-fil. Soliditet er et av de mest populære språkene for å skrive moderne smarte kontrakter.
Inne i denne filen, skriv og kompiler 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, lager den også et ABI (Application Binary Interface) i et JSON-format. ABI definerer grensesnittet mellom en smart kontrakt og en klientapplikasjon.
Det vil spesifisere følgende:
- Navnene og typene av funksjoner og hendelser som er eksponert av den smarte kontrakten.
- Rekkefølgen av argumentene til hver funksjon.
- Returverdiene for hver funksjon.
- Dataformatet for hver hendelse.
For å få ABI, kopier den fra Remix IDE. Lage en contract.abi.json fil inne kontrakt i prosjektets rot og lim inn ABI i filen.
Du bør gå videre og distribuere kontrakten din til et testnettverk ved å bruke et verktøy som Ganache.
Kommunisere med din utplasserte smarte kontrakt ved å bruke Web3.js
Kontrakten din er nå distribuert til et Ethereum-testnettverk. Du kan begynne å jobbe med å samhandle med den distribuerte kontrakten fra grensesnittet ditt. Lage en main.js fil i prosjektets rot. Du vil importere både Web3.js og din lagrede ABI-fil til main.js. Denne filen vil snakke med din smarte kontrakt og vil være ansvarlig for å lese data fra kontrakten, kalle opp funksjonene og håndtere transaksjoner.
Nedenfor er hvordan din main.js filen skal se ut:
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 bruker Web3.js for å snakke med smartkontraktsfunksjonene dine fra nettgrensesnittet. I hovedsak bruker du JavaScript-funksjoner til å kalle Solidity-funksjoner fra main.js.
Bytt ut i koden 'CONTRACT_ADDRESS' med den faktiske utplasserte kontraktadressen. Remix IDE vil gi deg dette ved distribusjon.
Her er hva som skjer i koden:
- Oppdater utvalget av DOM-elementer basert på HTML-strukturen din. I dette eksemplet antar det at hvert kandidatelement har en data-kandidat attributt som tilsvarer kandidatens navn.
- Et eksempel på Web3 klasse opprettes deretter ved å bruke den injiserte leverandøren fra window.ethereum gjenstand.
- De stemmekontrakt variabel oppretter en kontraktsforekomst ved å bruke kontraktsadressen og ABI.
- De stemme funksjonen håndterer stemmeprosessen. Den kaller stemme funksjonen til den smarte kontrakten som bruker votingContract.methods.vote (kandidat).send(). Den sender en transaksjon til kontrakten, og registrerer brukerens stemme. De antall stemmer variabelen kaller deretter getVoteCount funksjonen til den smarte kontrakten for å hente gjeldende stemmetelling for en spesifikk kandidat. Den vil da oppdatere stemmetellingen i brukergrensesnittet for å matche de hentede stemmene.
Husk å inkludere dette main.js fil i HTML-filen ved hjelp av en tag.
I tillegg må du sørge for at kontraktsadressen og ABI er korrekte og at du har riktig feilhåndtering på plass.
JavaScripts rolle i å bygge DApps
JavaScript har muligheten til å samhandle med smarte kontrakter som brukes i desentraliserte applikasjoner. Dette samler Web3-verdenen med et primært programmeringsspråk som brukes til å bygge Web2-apper, noe som bidrar til å lette bruken av Web3. Med Web3.js kan Web2-utviklere gå over til å bygge apper som en Web3-plattform for sosiale medier.
