Iskoristite Web3.js JavaScript biblioteku za uspostavljanje besprijekornog sučelja za interakciju s Ethereum blockchainom.
Pametni ugovori primarni su građevni blokovi za Web3 aplikacije. Kako bi se omogućile funkcionalnosti u Web3 aplikacijama, važno je imati mogućnost prikladne interakcije s funkcijama navedenim u pametnom ugovoru. Za uspostavljanje ove komunikacije možete upotrijebiti popularan jezik kao što je JavaScript i dobro poznatu biblioteku Web3.js.
Uvod u biblioteku Web3.js
Web3.js je JavaScript biblioteka koja nudi sučelje za interakciju s Ethereum blockchainom. Pojednostavljuje proces izgradnje decentralizirane aplikacije (DApps) pružanjem metoda i alata za povezivanje s Ethereum čvorovima, slanje transakcija, čitanje podataka pametnih ugovora i rukovanje događajima.
Web3.js premošćuje tradicionalni razvoj i blockchain tehnologiju, omogućujući vam stvaranje decentraliziranih i sigurnih aplikacija koristeći poznatu JavaScript sintaksu i funkcionalnost.
Kako uvesti Web3.js u JavaScript projekt
Da biste koristili Web3.js u svom Node projektu, prvo trebate instalirati biblioteku kao ovisnost projekta.
Instalirajte biblioteku pokretanjem ove naredbe unutar vašeg projekta:
npm install web3or
yarn add web3
Nakon instaliranja Web3.js, sada možete uvesti biblioteku unutar svog Node projekta kao ES modul:
const Web3 = require('web3');
Interakcija s implementiranim pametnim ugovorima
Da biste pravilno demonstrirali kako možete komunicirati s implementiranim pametnim ugovorom na mreži Ethereum pomoću Web3.js, izradit ćete web aplikaciju koja funkcionira s implementiranim pametnim ugovorom. Svrha web aplikacije bit će jednostavan glasački listić gdje novčanik može dati glasove za kandidata i zabilježiti te glasove.
Za početak izradite novi direktorij za svoj projekt i inicijalizirajte ga kao Node.js projekt:
npm init
Instalirajte Web3.js u projekt kao ovisnost i kreirajte jednostavan index.html i stilovi.css datoteke u korijenu projekta.
Uvezite sljedeći kod u index.html datoteka:
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>
Unutar stilovi.css datoteku, uvezite sljedeći 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;
}
Ispod je rezultirajuće sučelje:
Sada kada imate osnovno sučelje za početak, stvorite ugovor mapu u korijenu vašeg projekta koja sadrži kod za vaš pametni ugovor.
Remix IDE pruža jednostavan način za pisanje, implementaciju i testiranje pametnih ugovora. Koristit ćete Remix za implementaciju svog ugovora na Ethereum mrežu.
Idite do remix.ethereum.org i stvorite novu datoteku pod ugovori mapa. Datoteci možete dati naziv test_ugovor.sol.
The .sol ekstenzija označava da je ovo Solidity datoteka. Solidity je jedan od najpopularnijih jezika za pisanje modernih pametnih ugovora.
Unutar ove datoteke, napisati i kompajlirati svoj Solidity 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];
};
};
Kada Remix kompajlira Solidity kod, također stvara ABI (Application Binary Interface) u JSON formatu. ABI definira sučelje između pametnog ugovora i klijentske aplikacije.
To bi odredilo sljedeće:
- Imena i vrste funkcija i događaja koji su izloženi pametnim ugovorom.
- Redoslijed argumenata za svaku funkciju.
- Povratne vrijednosti svake funkcije.
- Format podataka svakog događaja.
Da biste dobili ABI, kopirajte ga iz Remix IDE. Stvoriti ugovor.abi.json datoteka unutra ugovor unutar korijena vašeg projekta i zalijepite ABI unutar datoteke.
Trebali biste nastaviti i implementirati svoj ugovor na testnu mrežu pomoću alata kao što je Ganache.
Komunikacija s vašim implementiranim pametnim ugovorom pomoću Web3.js
Vaš je ugovor sada raspoređen na testnu mrežu Ethereum. Možete početi raditi na interakciji s implementiranim ugovorom iz svog korisničkog sučelja. Stvoriti glavni.js datoteku u korijenu vašeg projekta. Uvest ćete i Web3.js i svoju spremljenu ABI datoteku glavni.js. Ova će datoteka komunicirati s vašim pametnim ugovorom i bit će odgovorna za čitanje podataka iz ugovora, pozivanje njegovih funkcija i rukovanje transakcijama.
Ispod je kako vaš glavni.js datoteka bi trebala izgledati:
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);
});
});
Gornji blok koda koristi Web3.js za komunikaciju s vašim funkcijama pametnog ugovora s vašeg web sučelja. U biti koristite JavaScript funkcije za pozivanje Solidity funkcija glavni.js.
U kodu zamijenite 'ADRESA_UGOVORA' sa stvarno raspoređenom adresom ugovora. Remix IDE će vam to pružiti prilikom postavljanja.
Evo što se događa u kodu:
- Ažurirajte odabir DOM elemenata na temelju vaše HTML strukture. U ovom primjeru pretpostavlja se da svaki kandidatski element ima a podaci-kandidat atribut koji odgovara imenu kandidata.
- Primjer od Web3 klasa se zatim stvara pomoću umetnutog pružatelja iz prozor.ethereum objekt.
- The glasački ugovor varijabla stvara instancu ugovora koristeći adresu ugovora i ABI.
- The glasanje funkcija upravlja procesom glasovanja. Poziva se glasanje funkcija korištenja pametnog ugovora votingContract.methods.vote (kandidat).send(). Šalje transakciju u ugovor, bilježeći glas korisnika. The brojanje glasova varijabla tada poziva getVoteCount funkcija pametnog ugovora za dohvaćanje trenutnog brojanja glasova za određenog kandidata. Zatim će ažurirati broj glasova u korisničkom sučelju kako bi odgovarao dohvaćenim glasovima.
Ne zaboravite uključiti ovo glavni.js datoteku u vašoj HTML datoteci koristeći a oznaku.
Osim toga, provjerite jesu li adresa ugovora i ABI točni i imate li odgovarajuće rukovanje pogreškama na mjestu.
Uloga JavaScripta u izgradnji DApps
JavaScript ima mogućnost interakcije s pametnim ugovorima koji se koriste u decentraliziranim aplikacijama. Ovo spaja svijet Web3 s primarnim programskim jezikom koji se koristi u izradi Web2 aplikacija, što pomaže u lakšem usvajanju Web3. Uz Web3.js, Web2 programeri mogu prijeći na izradu aplikacija poput Web3 platforme društvenih medija.