Izmantojiet Web3.js JavaScript bibliotēku, lai izveidotu netraucētu saskarni mijiedarbībai ar Ethereum blokķēdi.
Viedie līgumi ir Web3 lietojumprogrammu galvenie elementi. Lai iespējotu funkcionalitāti Web3 lietojumprogrammās, ir svarīgi ērti mijiedarboties ar viedlīgumā norādītajām funkcijām. Lai izveidotu šo saziņu, varat izmantot populāru valodu, piemēram, JavaScript un labi zināmo Web3.js bibliotēku.
Ievads Web3.js bibliotēkā
Web3.js ir JavaScript bibliotēka, kas piedāvā saskarni mijiedarbībai ar Ethereum blokķēdi. Tas vienkāršo būvniecības procesu decentralizētas lietojumprogrammas (DApps) nodrošinot metodes un rīkus, lai izveidotu savienojumu ar Ethereum mezgliem, nosūtītu darījumus, lasītu viedo līgumu datus un apstrādātu notikumus.
Web3.js savieno tradicionālās izstrādes un blokķēdes tehnoloģiju, ļaujot jums izveidot decentralizētas un drošas lietojumprogrammas, izmantojot pazīstamo JavaScript sintaksi un funkcionalitāti.
Kā importēt Web3.js JavaScript projektā
Lai savā Node projektā izmantotu Web3.js, vispirms ir jāinstalē bibliotēka kā projekta atkarība.
Instalējiet bibliotēku, izpildot šo komandu savā projektā:
npm install web3or
yarn add web3
Pēc Web3.js instalēšanas tagad varat importēt bibliotēku savā Node projektā kā ES moduli:
const Web3 = require('web3');
Mijiedarbība ar ieviestajiem viedajiem līgumiem
Lai pareizi parādītu, kā Ethereum tīklā varat mijiedarboties ar izvietotu viedo līgumu, izmantojot Web3.js, izveidosit tīmekļa lietojumprogrammu, kas darbojas ar izvietoto viedo līgumu. Tīmekļa lietotnes mērķis būs vienkāršs balsošanas biļetens, kurā makā varēs balsot par kandidātu un šīs balsis reģistrēt.
Lai sāktu, izveidojiet savam projektam jaunu direktoriju un inicializējiet to kā Node.js projektu:
npm init
Instalējiet Web3.js projektā kā atkarību un izveidojiet vienkāršu index.html un stili.css faili projekta saknē.
Importējiet šo kodu mapē index.html fails:
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>
Iekšpusē stili.css failu, importējiet šādu kodu:
/* 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;
}
Tālāk ir parādīts iegūtais interfeiss:
Tagad, kad jums ir pamata saskarne, lai sāktu darbu, izveidojiet a līgums mapi sava projekta saknē, lai tajā būtu jūsu viedā līguma kods.
Remix IDE nodrošina vienkāršu veidu, kā rakstīt, izvietot un pārbaudīt viedos līgumus. Jūs izmantosit Remix, lai izvietotu līgumu Ethereum tīklā.
Dodieties uz remix.ethereum.org un izveidojiet jaunu failu zem līgumiem mapi. Jūs varat nosaukt failu testa_līgums.sol.
The .sol paplašinājums norāda, ka šis ir Solidity fails. Solidity ir viena no populārākajām valodām modernu viedo līgumu rakstīšanai.
Šajā failā uzrakstiet un apkopojiet savu Solidity kodu:
// 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];
};
};
Kad Remix apkopo Solidity kodu, tas arī izveido ABI (Application Binary Interface) JSON formātā. ABI nosaka saskarni starp viedo līgumu un klienta lietojumprogrammu.
Tajā būtu norādīts:
- Viedajā līgumā redzamo funkciju un notikumu nosaukumi un veidi.
- Katras funkcijas argumentu secība.
- Katras funkcijas atgriešanas vērtības.
- Katra notikuma datu formāts.
Lai iegūtu ABI, kopējiet to no Remix IDE. Izveidot a contract.abi.json fails iekšā līgums sava projekta saknē un ielīmējiet ABI failā.
Jums vajadzētu iet uz priekšu un izvietot savu līgumu testa tīklā, izmantojot tādu rīku kā Ganache.
Saziņa ar savu izvietoto viedo līgumu, izmantojot Web3.js
Jūsu līgums tagad ir izvietots Ethereum testa tīklā. Varat sākt strādāt pie mijiedarbības ar izvietoto līgumu no sava lietotāja interfeisa. Izveidot a galvenais.js failu sava projekta saknē. Jūs importēsit gan Web3.js, gan saglabāto ABI failu galvenais.js. Šis fails sazināsies ar jūsu viedo līgumu un būs atbildīgs par datu nolasīšanu no līguma, tā funkciju izsaukšanu un darījumu apstrādi.
Zemāk ir norādīts, kā jūsu galvenais.js failam vajadzētu izskatīties:
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);
});
});
Iepriekš minētais koda bloks izmanto Web3.js, lai sarunātos ar viedā līguma funkcijām no jūsu tīmekļa saskarnes. Būtībā jūs izmantojat JavaScript funkcijas, lai izsauktu Solidity funkcijas galvenais.js.
Kodā nomainiet "CONTRACT_ADDRESS" ar faktisko izvietoto līguma adresi. Remix IDE to nodrošinās izvietošanas laikā.
Lūk, kas notiek kodā:
- Atjauniniet DOM elementu atlasi, pamatojoties uz jūsu HTML struktūru. Šajā piemērā tiek pieņemts, ka katram kandidāta elementam ir a datu kandidāts atribūts, kas atbilst kandidāta vārdam.
- Piemērs Web3 pēc tam tiek izveidota klase, izmantojot ievadīto pakalpojumu sniedzēju no logs.ethereum objektu.
- The balsošanaLīgums mainīgais izveido līguma gadījumu, izmantojot līguma adresi un ABI.
- The balsot funkcija apstrādā balsošanas procesu. To sauc par balsot viedā līguma funkcija balsošanaLīgums.metodes.balsojums (kandidāts).nosūtīt(). Tas nosūta darījumu uz līgumu, ierakstot lietotāja balsojumu. The balsu skaits mainīgais pēc tam izsauc getVoteCount viedā līguma funkcija, lai izgūtu pašreizējo balsu skaitu konkrētam kandidātam. Pēc tam tas atjauninās balsu skaitu lietotāja saskarnē, lai tas atbilstu izgūtajām balsīm.
Atcerieties to iekļaut galvenais.js failu savā HTML failā, izmantojot a tag.
Turklāt pārliecinieties, vai līguma adrese un ABI ir pareiza un ka jums ir pareiza kļūdu apstrāde ir vietā.
JavaScript loma DApps veidošanā
JavaScript ir iespēja mijiedarboties ar viedajiem līgumiem, ko izmanto decentralizētās lietojumprogrammās. Tas apvieno Web3 pasauli ar primāro programmēšanas valodu, ko izmanto Web2 lietotņu veidošanā, kas palīdz atvieglot Web3 ieviešanu. Izmantojot Web3.js, Web2 izstrādātāji var pāriet uz tādu lietotņu izveidi kā Web3 sociālo mediju platforma.
