Uporabite knjižnico JavaScript Web3.js za vzpostavitev brezhibnega vmesnika za interakcijo z verigo blokov Ethereum.
Pametne pogodbe so glavni gradniki za aplikacije Web3. Za omogočanje funkcionalnosti v aplikacijah Web3 je pomembno, da lahko priročno komunicirate s funkcijami, določenimi v pametni pogodbi. Za vzpostavitev te komunikacije lahko uporabite priljubljen jezik, kot je JavaScript, in dobro znano knjižnico Web3.js.
Uvod v knjižnico Web3.js
Web3.js je knjižnica JavaScript, ki ponuja vmesnik za interakcijo z verigo blokov Ethereum. Poenostavlja proces gradnje decentralizirane aplikacije (DApps) z zagotavljanjem metod in orodij za povezovanje z vozlišči Ethereum, pošiljanje transakcij, branje podatkov pametnih pogodb in obravnavanje dogodkov.
Web3.js povezuje tradicionalni razvoj in tehnologijo veriženja blokov ter vam omogoča ustvarjanje decentraliziranih in varnih aplikacij z uporabo znane sintakse in funkcionalnosti JavaScript.
Kako uvoziti Web3.js v projekt JavaScript
Če želite uporabljati Web3.js v svojem projektu Node, morate najprej namestiti knjižnico kot odvisnost projekta.
Namestite knjižnico tako, da v svojem projektu zaženete ta ukaz:
npm install web3or
yarn add web3
Po namestitvi Web3.js lahko sedaj uvozite knjižnico znotraj svojega projekta Node kot modul ES:
const Web3 = require('web3');
Interakcija z razporejenimi pametnimi pogodbami
Za pravilno demonstracijo, kako lahko komunicirate z razporejeno pametno pogodbo v omrežju Ethereum z uporabo Web3.js, boste ustvarili spletno aplikacijo, ki deluje z razporejeno pametno pogodbo. Namen spletne aplikacije bo preprosta volilna listič, kjer lahko denarnica odda glasove za kandidata in te glasove zabeleži.
Za začetek ustvarite nov imenik za svoj projekt in ga inicializirajte kot projekt Node.js:
npm init
Namestite Web3.js v projekt kot odvisnost in ustvarite preprosto index.html in styles.css datoteke v korenu projekta.
Uvozite naslednjo kodo v index.html mapa:
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>
Znotraj styles.css datoteko, uvozite naslednjo kodo:
/* 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;
}
Spodaj je nastali vmesnik:
Zdaj, ko imate osnovni vmesnik za začetek, ustvarite pogodba mapo v korenu vašega projekta, da vsebuje kodo za vašo pametno pogodbo.
Remix IDE ponuja preprost način pisanja, uvajanja in testiranja pametnih pogodb. Remix boste uporabljali za uvedbo vaše pogodbe v omrežje Ethereum.
Pojdite na remix.ethereum.org in ustvarite novo datoteko pod pogodbe mapo. Datoteko lahko poimenujete test_contract.sol.
The .sol razširitev pomeni, da je to datoteka Solidity. Solidity je eden najbolj priljubljenih jezikov za pisanje sodobnih pametnih pogodb.
Znotraj te datoteke, napišite in prevedite svojo Solidity kodo:
// 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];
};
};
Ko Remix prevede kodo Solidity, ustvari tudi ABI (Application Binary Interface) v formatu JSON. ABI definira vmesnik med pametno pogodbo in odjemalsko aplikacijo.
Določil bi naslednje:
- Imena in vrste funkcij ter dogodkov, ki jih izpostavlja pametna pogodba.
- Vrstni red argumentov za vsako funkcijo.
- Povratne vrednosti vsake funkcije.
- Podatkovni format vsakega dogodka.
Če želite pridobiti ABI, ga kopirajte iz Remix IDE. Ustvariti contract.abi.json datoteka znotraj pogodba znotraj korena vašega projekta in prilepite ABI v datoteko.
Nadaljujte in razporedite svojo pogodbo v testno omrežje z orodjem, kot je Ganache.
Komuniciranje z vašo nameščeno pametno pogodbo z uporabo Web3.js
Vaša pogodba je zdaj uvedena v testno omrežje Ethereum. Delati na interakciji z razporejeno pogodbo lahko začnete iz vmesnika uporabniškega vmesnika. Ustvariti main.js datoteko v korenu vašega projekta. Uvozili boste tako Web3.js kot shranjeno datoteko ABI main.js. Ta datoteka se bo pogovarjala z vašo pametno pogodbo in bo odgovorna za branje podatkov iz pogodbe, klicanje njenih funkcij in obravnavanje transakcij.
Spodaj je prikazano, kako vaš main.js datoteka bi morala izgledati:
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);
});
});
Zgornji blok kode uporablja Web3.js za pogovor z vašimi funkcijami pametne pogodbe iz vašega spletnega vmesnika. V bistvu uporabljate funkcije JavaScript za klicanje funkcij Solidity main.js.
V kodi zamenjajte 'CONTRACT_ADDRESS' z dejanskim razporejenim pogodbenim naslovom. Remix IDE vam bo to zagotovil ob uvajanju.
Evo, kaj se dogaja v kodi:
- Posodobite izbor elementov DOM na podlagi vaše strukture HTML. V tem primeru predpostavlja, da ima vsak kandidatni element a podatek-kandidat atribut, ki ustreza imenu kandidata.
- Primerek Splet3 razred se nato ustvari z uporabo vstavljenega ponudnika iz okno.ethereum predmet.
- The pogodba o glasovanju spremenljivka ustvari primerek pogodbe z uporabo naslova pogodbe in ABI.
- The glasovati funkcija upravlja postopek glasovanja. Pokliče glasovati funkcijo uporabe pametne pogodbe votingContract.methods.vote (kandidat).send(). V pogodbo pošlje transakcijo in zabeleži uporabnikov glas. The štetje glasov spremenljivka nato pokliče getVoteCount funkcijo pametne pogodbe za pridobitev trenutnega števila glasov za določenega kandidata. Nato bo posodobil štetje glasov v uporabniškem vmesniku, da se bo ujemalo s pridobljenimi glasovi.
Ne pozabite vključiti tega main.js datoteko v vaši datoteki HTML z uporabo a .
Poleg tega se prepričajte, da sta pogodbeni naslov in ABI pravilna ter da imate ustrezno obravnavanje napak na mestu.
Vloga JavaScripta pri izdelavi DApps
JavaScript ima možnost interakcije s pametnimi pogodbami, ki se uporabljajo v decentraliziranih aplikacijah. To združuje svet Web3 s primarnim programskim jezikom, ki se uporablja pri izdelavi aplikacij Web2, kar pomaga olajšati sprejetje Web3. Z Web3.js lahko razvijalci Web2 preidejo na gradnjo aplikacij, kot je platforma družbenih medijev Web3.
