Home-theater-designers
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.
MUO päeva video SISUGA JÄTKAMISEKS KERIMISE
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.
töölaua ilmarakendus Windows 7 jaoks
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 web3
or
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:
<!-- 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>
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 .päike laiend näitab, et see on Solidity fail. Solidity on üks populaarsemaid keeli kaasaegsete nutikate lepingute kirjutamiseks.
Selle faili sees kirjutage ja koostage oma Solidity kood :
android auto ei tööta s9 -ga
// 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];
};
};
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
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);
});
});
Ülaltoodud koodiplokk kasutab veebiliidese kaudu teie nutikate lepingufunktsioonidega suhtlemiseks Web3.js-i. Põhimõtteliselt kasutate Solidity funktsioonide kutsumiseks JavaScripti funktsioone main.js .
mida teha vanade tk -dega
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ääl(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