Home-theater-designers
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.
Dagens MUO-video RULL FOR Å FORTSETTE MED INNHOLD
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.
Slik importerer du 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 web3
or
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 utplasserte 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.
hvordan du installerer spill på kodi
Importer følgende kode i index.html fil:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Voting App</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Voting App</h1>
<div class="candidates">
<div class="candidate">
<span class="name">Candidate A</span>
<button class="vote-btn" data-candidate="A">Vote</button>
<span class="vote-count">0 votes</span>
</div>
<div class="candidate">
<span class="name">Candidate B</span>
<button class="vote-btn" data-candidate="B">Vote</button>
<span class="vote-count">0 votes</span>
</div>
<div class="candidate">
<span class="name">Candidate C</span>
<button class="vote-btn" data-candidate="C">Vote</button>
<span class="vote-count">0 votes</span>
</div>
</div>
<script src="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 .
gjør det selv landskapsdesign online
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;
function vote(string memory candidate) public {
voteCounts[candidate]++;
};
function getVoteCount(string memory candidate) public view returns (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
async function vote(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(candidate).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