Kasutage Web3.js JavaScripti teeki, et luua sujuv liides Ethereumi plokiahelaga suhtlemiseks.
Nutikad lepingud on Web3 rakenduste peamised ehitusplokid. Funktsionaalsuste võimaldamiseks Web3 rakendustes on oluline, et nutilepingus määratud funktsioonidega saaks mugavalt suhelda. Selle suhtluse loomiseks võite kasutada mõnda populaarset keelt, nagu JavaScript ja tuntud Web3.js teeki.
Web3.js teegi tutvustus
Web3.js on JavaScripti teek, mis pakub liidest Ethereumi plokiahelaga suhtlemiseks. See lihtsustab ehitusprotsessi detsentraliseeritud rakendused (DApps) pakkudes meetodeid ja tööriistu Ethereumi sõlmedega ühenduse loomiseks, tehingute saatmiseks, nutikate lepinguandmete lugemiseks ja sündmuste haldamiseks.
Web3.js ühendab traditsioonilise arenduse ja plokiahela tehnoloogia, võimaldades luua detsentraliseeritud ja turvalisi rakendusi, kasutades tuttavat JavaScripti süntaksit ja funktsioone.
Kuidas importida Web3.js-i JavaScripti projekti
Web3.js-i kasutamiseks oma Node projektis peate esmalt installima teegi projekti sõltuvusena.
Installige raamatukogu, käivitades oma projekti sees selle käsu:
npm install web3or
yarn add web3
Pärast Web3.js'i installimist saate nüüd importida oma Node projekti teegi ES-moodulina:
const Web3 = require('web3');
Suhtlemine juurutatud nutikate lepingutega
Et demonstreerida õigesti, kuidas saate Web3.js-i abil Ethereumi võrgus juurutatud nutika lepinguga suhelda, loote veebirakenduse, mis töötab juurutatud nutika lepinguga. Veebirakenduse eesmärk on lihtne hääletussedel, kus rahakott saab kandidaadi poolt hääli anda ja need hääled salvestada.
Alustuseks looge oma projekti jaoks uus kataloog ja lähtestage see Node.js-projektina:
npm init
Installige Web3.js projekti sõltuvusse ja looge lihtne index.html ja stiilid.css failid projekti juurtes.
Importige järgmine kood index.html fail:
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>
Sees stiilid.css faili, importige järgmine kood:
/* 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;
}
Allpool on saadud liides:
Nüüd, kui teil on alustamiseks põhiliides, looge a leping projekti juurkausta, mis sisaldab teie nutika lepingu koodi.
Remix IDE pakub lihtsat viisi nutikate lepingute kirjutamiseks, juurutamiseks ja testimiseks. Lepingu Ethereumi võrku juurutamiseks kasutate Remixit.
Navigeerige remix.ethereum.org ja looge all uus fail lepingud kausta. Saate failile nime anda test_leping.sol.
The .sol laiend näitab, et see on Solidity fail. Solidity on üks populaarsemaid keeli kaasaegsete nutikate lepingute kirjutamiseks.
Selle faili sees kirjutage ja kompileerige oma Solidity kood:
// 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];
};
};
Kui Remix kompileerib Solidity koodi, loob see ka JSON-vormingus ABI (Application Binary Interface). ABI määratleb liidese nutika lepingu ja kliendirakenduse vahel.
See täpsustaks järgmist:
- Nutika lepinguga kuvatavate funktsioonide ja sündmuste nimed ja tüübid.
- Iga funktsiooni argumentide järjekord.
- Iga funktsiooni tagastusväärtused.
- Iga sündmuse andmevorming.
ABI hankimiseks kopeerige see Remix IDE-st. Loo contract.abi.json fail sees leping oma projekti juure ja kleepige ABI faili sisse.
Peaksite jätkama ja juurutama oma lepingu testvõrku, kasutades sellist tööriista nagu Ganache.
Suhtlemine juurutatud nutika lepinguga, kasutades Web3.js-i
Teie leping on nüüd kasutusele võetud Ethereumi testvõrku. Saate alustada oma kasutajaliidese kaudu juurutatud lepinguga suhtlemist. Loo main.js faili oma projekti juurus. Impordite nii Web3.js-i kui ka salvestatud ABI-faili main.js. See fail suhtleb teie nutika lepinguga ja vastutab lepingu andmete lugemise, selle funktsioonide helistamise ja tehingute käsitlemise eest.
Allpool on näha, kuidas teie main.js fail peaks välja nägema:
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);
});
});
Ülaltoodud koodiplokk kasutab veebiliidese kaudu teie nutikate lepingufunktsioonidega suhtlemiseks Web3.js-i. Põhimõtteliselt kasutate Solidity funktsioonide kutsumiseks JavaScripti funktsioone main.js.
Asendage koodis „CONTRACT_ADDRESS” tegeliku lepingu aadressiga. Remix IDE annab teile selle juurutamisel.
Koodis toimub järgmine:
- Värskendage DOM-i elementide valikut oma HTML-i struktuuri põhjal. Selles näites eeldatakse, et igal kandidaatelemendil on a andmekandidaat atribuut, mis vastab kandidaadi nimele.
- Näide sellest Veeb3 klass luuakse seejärel sisestatud pakkuja abil aken.eethereum objektiks.
- The hääletamine Leping muutuja loob lepingu eksemplari, kasutades lepingu aadressi ja ABI-d.
- The hääletada funktsioon haldab hääletusprotsessi. See kutsub hääletada nutika lepingu funktsioon hääletamineLeping.meetodid.hääletus (kandidaat).saata(). See saadab tehingu lepingusse, salvestades kasutaja hääle. The häälte arv muutuja kutsub seejärel välja saada VoteCount nutika lepingu funktsioon konkreetse kandidaadi praeguse häälte lugemiseks. Seejärel värskendab see kasutajaliidese häälte arvu, et see vastaks hangitud häältele.
Ärge unustage seda lisada main.js faili oma HTML-faili kasutades a märgend.
Lisaks veenduge, et lepingu aadress ja ABI on õiged ning et teil on õiged vigade käsitlemine on paigas.
JavaScripti roll DApp-ide loomisel
JavaScriptil on võime suhelda detsentraliseeritud rakendustes kasutatavate nutikate lepingutega. See ühendab Web3 maailma peamise programmeerimiskeelega, mida kasutatakse Web2 rakenduste koostamisel, mis aitab hõlbustada Web3 kasutuselevõttu. Web3.js-iga saavad Web2 arendajad üle minna selliste rakenduste loomisele nagu Web3 sotsiaalmeediaplatvorm.
