Pasinaudokite Web3.js JavaScript biblioteka, kad sukurtumėte vientisą sąsają, skirtą sąveikai su Ethereum blokų grandine.
Išmaniosios sutartys yra pagrindiniai Web3 programų elementai. Norint įjungti funkcijas Web3 programose, svarbu turėti galimybę patogiai sąveikauti su išmaniojoje sutartyje nurodytomis funkcijomis. Norėdami užmegzti šį ryšį, galite naudoti populiarią kalbą, pvz., JavaScript ir gerai žinomą Web3.js biblioteką.
Įvadas į Web3.js biblioteką
Web3.js yra „JavaScript“ biblioteka, siūlanti sąsają sąveikai su „Ethereum“ blokų grandine. Tai supaprastina statybos procesą decentralizuotos programos (DApps) suteikiant metodus ir įrankius prisijungti prie Ethereum mazgų, siųsti operacijas, skaityti išmaniųjų sutarčių duomenis ir tvarkyti įvykius.
Web3.js sujungia tradicinę plėtrą ir blokų grandinės technologiją, leidžiančią kurti decentralizuotas ir saugias programas naudojant pažįstamą JavaScript sintaksę ir funkcijas.
Kaip importuoti Web3.js į „JavaScript“ projektą
Norėdami naudoti Web3.js savo Node projekte, pirmiausia turite įdiegti biblioteką kaip projekto priklausomybę.
Įdiekite biblioteką vykdydami šią komandą savo projekte:
npm install web3or
yarn add web3
Įdiegę Web3.js, dabar galite importuoti biblioteką savo mazgo projekte kaip ES modulį:
const Web3 = require('web3');
Sąveika su įdiegtomis išmaniosiomis sutartimis
Norėdami tinkamai parodyti, kaip galite sąveikauti su įdiegta išmaniąja sutartimi Ethereum tinkle naudodami Web3.js, sukursite žiniatinklio programą, kuri veiks su įdiegta išmaniąja sutartimi. Žiniatinklio programėlės tikslas bus paprastas balsavimo biuletenis, kuriame piniginė gali atiduoti balsus už kandidatą ir tuos balsus įrašyti.
Norėdami pradėti, sukurkite naują projekto katalogą ir inicijuokite jį kaip Node.js projektą:
npm init
Įdiekite Web3.js į projektą kaip priklausomybę ir sukurkite paprastą index.html ir stiliai.css failai projekto šaknyje.
Importuokite šį kodą į index.html failas:
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>
Viduje stiliai.css failą, importuokite šį kodą:
/* 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;
}
Žemiau yra gauta sąsaja:
Dabar, kai turite pagrindinę sąsają, kad galėtumėte pradėti, sukurkite a sutartis projekto šakniniame aplanke, kuriame būtų jūsų išmaniosios sutarties kodas.
Remix IDE suteikia paprastą būdą rašyti, įdiegti ir išbandyti išmaniąsias sutartis. Naudosite Remix, kad įdiegtumėte sutartį į Ethereum tinklą.
Eikite į remix.ethereum.org ir sukurkite naują failą po sutartys aplanką. Galite pavadinti failą test_contract.sol.
The .sol plėtinys rodo, kad tai yra Solidity failas. Solidity yra viena iš populiariausių kalbų už šiuolaikinių išmaniųjų sutarčių rašymą.
Šio failo viduje, parašykite ir sukompiliuokite savo solidumo kodą:
// 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];
};
};
Kai Remix kompiliuoja Solidity kodą, jis taip pat sukuria ABI (Application Binary Interface) JSON formatu. ABI apibrėžia sąsają tarp išmaniosios sutarties ir kliento programos.
Jame būtų nurodyta:
- Funkcijų ir įvykių pavadinimai ir tipai, kuriuos rodo išmanioji sutartis.
- Kiekvienos funkcijos argumentų tvarka.
- Kiekvienos funkcijos grąžinamos reikšmės.
- Kiekvieno įvykio duomenų formatas.
Norėdami gauti ABI, nukopijuokite jį iš Remix IDE. Sukurti contract.abi.json failas viduje sutartis savo projekto šaknyje ir įklijuokite ABI į failą.
Turėtumėte eiti į priekį ir įdiegti sutartį į bandomąjį tinklą naudodami tokį įrankį kaip Ganache.
Bendravimas su įdiegta išmaniąja sutartimi naudojant Web3.js
Dabar jūsų sutartis buvo įdiegta „Ethereum“ bandymų tinkle. Galite pradėti dirbti su įdiegta sutartimi iš savo vartotojo sąsajos sąsajos. Sukurti main.js failą savo projekto šaknyje. Importuosite ir Web3.js, ir išsaugotą ABI failą į main.js. Šis failas susisieks su jūsų išmaniąja sutartimi ir bus atsakingas už duomenų iš sutarties nuskaitymą, jos funkcijų iškvietimą ir operacijų tvarkymą.
Žemiau yra jūsų main.js failas turėtų atrodyti:
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);
});
});
Aukščiau pateiktas kodo blokas naudoja Web3.js, kad galėtų bendrauti su išmaniosiomis sutarties funkcijomis iš žiniatinklio sąsajos. Iš esmės jūs naudojate „JavaScript“ funkcijas, kad iškviestumėte Solidity funkcijas main.js.
Kode pakeiskite „CONTRACT_ADDRESS“ su tikruoju dislokuotos sutarties adresu. „Remix IDE“ jums tai suteiks diegimo metu.
Štai kas vyksta kode:
- Atnaujinkite DOM elementų pasirinkimą pagal savo HTML struktūrą. Šiame pavyzdyje daroma prielaida, kad kiekvienas kandidatas turi a duomenų kandidatas atributas, atitinkantis kandidato vardą.
- Pavyzdys Web3 Tada klasė sukuriama naudojant įšvirkštą teikėją iš langas.ethereum objektas.
- The balsavimo sutartis kintamasis sukuria sutarties egzempliorių naudodamas sutarties adresą ir ABI.
- The balsas funkcija tvarko balsavimo procesą. Tai vadina balsas išmaniosios sutarties funkcija balsavimasSutartis.metodai.balsuoti (kandidatas).siųsti(). Jis siunčia sandorį į sutartį, įrašydamas vartotojo balsavimą. The balsų skaičius kintamasis tada iškviečia gauti VoteCount išmaniosios sutarties funkcija, leidžianti gauti dabartinį balsų skaičių už konkretų kandidatą. Tada jis atnaujins balsų skaičių vartotojo sąsajoje, kad atitiktų gautus balsus.
Nepamirškite tai įtraukti main.js failą savo HTML faile naudodami a žymą.
Be to, įsitikinkite, kad sutarties adresas ir ABI yra teisingi ir kad turite tinkamą klaidų tvarkymas vietoje.
„JavaScript“ vaidmuo kuriant DApps
JavaScript turi galimybę sąveikauti su išmaniosiomis sutartimis, naudojamomis decentralizuotose programose. Tai sujungia Web3 pasaulį su pagrindine programavimo kalba, naudojama kuriant Web2 programas, o tai palengvina Web3 pritaikymą. Naudodami Web3.js, Web2 kūrėjai gali pereiti prie tokių programų kūrimo kaip Web3 socialinės žiniasklaidos platforma.
