Használja a Web3.js JavaScript könyvtárat, hogy zökkenőmentes felületet hozzon létre az Ethereum blokklánccal való interakcióhoz.
Az intelligens szerződések a Web3-alkalmazások elsődleges építőkövei. A Web3-alkalmazások funkcióinak engedélyezéséhez fontos, hogy kényelmesen tudjunk kommunikálni az intelligens szerződésben meghatározott funkciókkal. A kommunikáció létrehozásához használhat egy népszerű nyelvet, például a JavaScriptet és a jól ismert Web3.js könyvtárat.
Bevezetés a Web3.js könyvtárba
A Web3.js egy JavaScript-könyvtár, amely interfészt kínál az Ethereum blokklánccal való interakcióhoz. Leegyszerűsíti az építési folyamatot decentralizált alkalmazások (DApps) módszerek és eszközök biztosításával az Ethereum csomópontokhoz való csatlakozáshoz, tranzakciók küldéséhez, intelligens szerződésadatok olvasásához és események kezeléséhez.
A Web3.js áthidalja a hagyományos fejlesztési és blokklánc-technológiát, lehetővé téve decentralizált és biztonságos alkalmazások létrehozását az ismert JavaScript szintaxis és funkciók használatával.
Web3.js importálása JavaScript-projektbe
A Web3.js Node-projektben való használatához először telepítenie kell a könyvtárat projektfüggőségként.
Telepítse a könyvtárat a következő parancs futtatásával a projekten belül:
npm install web3or
yarn add web3
A Web3.js telepítése után importálhatja a könyvtárat a Node projekten belül ES-modulként:
const Web3 = require('web3');
Interakció a telepített intelligens szerződésekkel
A Web3.js használatával az Ethereum hálózaton telepített intelligens szerződésekkel való interakció megfelelő bemutatásához létre kell hoznia egy webalkalmazást, amely telepített intelligens szerződéssel működik. A webalkalmazás célja egy egyszerű szavazólap lesz, ahol a pénztárca szavazatokat adhat le egy jelöltre, és ezeket a szavazatokat rögzítheti.
Kezdésként hozzon létre egy új könyvtárat a projekthez, és inicializálja Node.js projektként:
npm init
Telepítse a Web3.js-t a projektbe függőségként, és hozzon létre egyszerűt index.html és stílusok.css fájlokat a projekt gyökerén belül.
Importálja a következő kódot a index.html fájl:
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>
Benne stílusok.css fájlt, importálja a következő kódot:
/* 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;
}
Alább látható az eredményül kapott felület:
Most, hogy rendelkezik egy alapfelülettel a kezdéshez, hozzon létre a szerződés mappát a projekt gyökérkönyvtárában, hogy tartalmazza az intelligens szerződés kódját.
A Remix IDE egyszerű módot biztosít az intelligens szerződések írására, üzembe helyezésére és tesztelésére. Remixet fog használni a szerződés Ethereum hálózatra történő telepítéséhez.
Navigáljon ide remix.ethereum.org és hozzon létre egy új fájlt a szerződéseket mappát. Elnevezheti a fájlt teszt_szerződés.sol.
A .sol kiterjesztés azt jelzi, hogy ez egy Solidity fájl. A Solidity az egyik legnépszerűbb nyelv modern okosszerződések írásához.
Ebben a fájlban írd meg és fordítsd le a Solidity kódodat:
// 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];
};
};
Amikor a Remix Solidity kódot fordít, egy ABI-t (Application Binary Interface) is létrehoz JSON formátumban. Az ABI meghatározza az interfészt az intelligens szerződés és az ügyfélalkalmazás között.
A következőket határozná meg:
- Az intelligens szerződés által megjelenített funkciók és események nevei és típusai.
- Az egyes függvények argumentumainak sorrendje.
- Az egyes függvények visszatérési értékei.
- Az egyes események adatformátuma.
Az ABI beszerzéséhez másolja ki a Remix IDE-ből. Hozzon létre egy contract.abi.json fájl belsejében szerződés a projekt gyökérkönyvtárában, és illessze be az ABI-t a fájlba.
A szerződést egy teszthálózatba kell telepítenie egy olyan eszközzel, mint a Ganache.
Kommunikáció a telepített intelligens szerződéssel a Web3.js használatával
Szerződését most telepítették egy Ethereum teszthálózatra. Elkezdhet dolgozni a telepített szerződéssel való interakción a felhasználói felületről. Hozzon létre egy main.js fájlt a projekt gyökérkönyvtárában. A Web3.js-t és a mentett ABI-fájlt is importálni fogja main.js. Ez a fájl kommunikál az intelligens szerződéssel, és felelős a szerződésből származó adatok beolvasásáért, funkcióinak meghívásáért és a tranzakciók kezeléséért.
Az alábbiakban bemutatjuk, hogyan main.js a fájlnak így kell kinéznie:
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);
});
});
A fenti kódblokk a Web3.js használatával kommunikál az intelligens szerződés funkcióival a webes felületről. Lényegében JavaScript függvényeket használ a Solidity függvények meghívására main.js.
A kódban cserélje ki "CONTRACT_ADDRESS" a tényleges telepített szerződés címével. A Remix IDE biztosítja ezt a telepítéskor.
Íme, mi történik a kódban:
- Frissítse a DOM-elemek kiválasztását a HTML-struktúra alapján. Ebben a példában azt feltételezi, hogy minden jelölt elem rendelkezik a adat-jelölt a jelölt nevének megfelelő attribútum.
- Egy példa a Web3 osztály ezután jön létre a beadott szolgáltató használatával ablak.ethereum tárgy.
- A szavazásSzerződés változó létrehoz egy szerződéspéldányt a szerződés címe és az ABI használatával.
- A szavazás funkció kezeli a szavazási folyamatot. Úgy hívja a szavazás az intelligens szerződés funkciója szavazásContract.methods.vote (candidate).send(). Tranzakciót küld a szerződésbe, rögzítve a felhasználó szavazatát. A szavazatszámlálás változó majd meghívja a getVoteCount az intelligens szerződés funkciója egy adott jelölt aktuális szavazatszámának lekéréséhez. Ezt követően frissíti a szavazatok számát a felhasználói felületen, hogy megfeleljen a visszakeresett szavazatoknak.
Ne felejtse el ezt is feltüntetni main.js fájlt a HTML-fájlban a címkét.
Továbbá győződjön meg arról, hogy a szerződés címe és az ABI helyes, és hibakezelés a helyén.
A JavaScript szerepe a DApps felépítésében
A JavaScript képes együttműködni a decentralizált alkalmazásokban használt intelligens szerződésekkel. Ez egyesíti a Web3 világát a Web2-alkalmazások készítéséhez használt elsődleges programozási nyelvvel, amely elősegíti a Web3 elfogadását. A Web3.js segítségével a Web2 fejlesztői áttérhetnek olyan alkalmazások létrehozására, mint a Web3 közösségi média platform.
