Käytä Web3.js JavaScript-kirjastoa luodaksesi saumattoman käyttöliittymän vuorovaikutukseen Ethereum-lohkoketjun kanssa.
Älykkäät sopimukset ovat Web3-sovellusten ensisijaisia rakennuspalikoita. Toimintojen mahdollistamiseksi Web3-sovelluksissa on tärkeää, että älykkäässä sopimuksessa määriteltyjä toimintoja voidaan käyttää kätevästi. Voit käyttää suosittua kieltä, kuten JavaScriptiä, ja tunnettua Web3.js-kirjastoa tämän viestinnän luomiseen.
Web3.js-kirjaston esittely
Web3.js on JavaScript-kirjasto, joka tarjoaa käyttöliittymän vuorovaikutukseen Ethereum-lohkoketjun kanssa. Se yksinkertaistaa rakennusprosessia hajautetut sovellukset (DApps) tarjoamalla menetelmiä ja työkaluja yhteyden muodostamiseen Ethereum-solmuihin, tapahtumien lähettämiseen, älykkäiden sopimustietojen lukemiseen ja tapahtumien käsittelemiseen.
Web3.js yhdistää perinteisen kehityksen ja lohkoketjuteknologian, jolloin voit luoda hajautettuja ja suojattuja sovelluksia tutun JavaScript-syntaksin ja toimintojen avulla.
Web3.js: n tuominen JavaScript-projektiin
Jos haluat käyttää Web3.js: ää Node-projektissasi, sinun on ensin asennettava kirjasto projektiriippuvuutena.
Asenna kirjasto suorittamalla tämä komento projektissasi:
npm install web3or
yarn add web3
Web3.js: n asentamisen jälkeen voit nyt tuoda Node-projektisi kirjaston ES-moduulina:
const Web3 = require('web3');
Vuorovaikutus käyttöön otettujen älykkäiden sopimusten kanssa
Osoittaaksesi oikein, kuinka voit olla vuorovaikutuksessa käyttöönotetun älykkään sopimuksen kanssa Ethereum-verkossa Web3.js: n avulla, luot verkkosovelluksen, joka toimii käyttöönotetun älykkään sopimuksen kanssa. Verkkosovelluksen tarkoitus on yksinkertainen äänestyslippu, jossa lompakko voi äänestää ehdokasta ja äänittää ne.
Aloita luomalla projektillesi uusi hakemisto ja alustamalla se Node.js-projektiksi:
npm init
Asenna Web3.js projektiin riippuvuutena ja luo yksinkertainen index.html ja styles.css tiedostot projektin juurissa.
Tuo seuraava koodi tiedostoon index.html tiedosto:
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>
Sisällä styles.css tiedosto, tuo seuraava koodi:
/* 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;
}
Alla on tuloksena oleva käyttöliittymä:
Nyt kun sinulla on peruskäyttöliittymä aloittaaksesi, luo a sopimus kansio projektisi juuressa, joka sisältää älysopimuksen koodin.
Remix IDE tarjoaa yksinkertaisen tavan kirjoittaa, ottaa käyttöön ja testata älykkäitä sopimuksia. Käytät Remixiä sopimuksesi käyttöönottoon Ethereum-verkkoon.
Navigoida johonkin remix.ethereum.org ja luo uusi tiedosto alle sopimuksia kansio. Voit nimetä tiedoston testi_sopimus.sol.
The .sol -tunniste osoittaa, että tämä on Solidity-tiedosto. Solidity on yksi suosituimmista kielistä nykyaikaisten älykkäiden sopimusten kirjoittamiseen.
Tämän tiedoston sisällä kirjoittaa ja kääntää Solidity-koodisi:
// 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];
};
};
Kun Remix kääntää Solidity-koodin, se luo myös ABI: n (Application Binary Interface) JSON-muodossa. ABI määrittelee rajapinnan älykkään sopimuksen ja asiakassovelluksen välillä.
Siinä täsmennettäisiin seuraavaa:
- Älykkään sopimuksen paljastamien toimintojen ja tapahtumien nimet ja tyypit.
- Kunkin funktion argumenttien järjestys.
- Kunkin funktion palautusarvot.
- Kunkin tapahtuman tietomuoto.
Saadaksesi ABI, kopioi se Remix IDE: stä. Luo contract.abi.json tiedosto sisällä sopimus projektisi juureen ja liitä ABI tiedoston sisään.
Sinun tulisi edetä ja ottaa sopimuksesi käyttöön testiverkkoon käyttämällä Ganachen kaltaista työkalua.
Viestintä käyttöönotetun älykkään sopimuksen kanssa Web3.js: n avulla
Sopimuksesi on nyt otettu käyttöön Ethereum-testiverkkoon. Voit aloittaa vuorovaikutuksen käyttöönotetun sopimuksen kanssa käyttöliittymäsi kautta. Luo main.js tiedosto projektisi juureen. Tuot sekä Web3.js: n että tallennetun ABI-tiedoston sisään main.js. Tämä tiedosto keskustelee älykkään sopimuksen kanssa ja vastaa sopimuksen tietojen lukemisesta, sen toimintojen kutsumisesta ja tapahtumien käsittelystä.
Alla on kuinka sinun main.js tiedoston pitäisi näyttää:
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);
});
});
Yllä oleva koodilohko käyttää Web3.js: ää keskustellakseen älykkäiden sopimustoimintojesi kanssa verkkokäyttöliittymästäsi. Käytät pääasiassa JavaScript-funktioita Solidity-funktioiden kutsumiseen main.js.
Korvaa koodissa 'CONTRACT_ADDRESS' todellisen käyttöönotetun sopimusosoitteen kanssa. Remix IDE tarjoaa sinulle tämän käyttöönoton yhteydessä.
Tässä on mitä koodissa tapahtuu:
- Päivitä DOM-elementtien valinta HTML-rakenteen perusteella. Tässä esimerkissä se olettaa, että jokaisella ehdokaselementillä on a data-ehdokas attribuutti, joka vastaa ehdokkaan nimeä.
- Esimerkki siitä Web3 luokka luodaan sitten käyttämällä injektoitua palveluntarjoajaa osoitteesta ikkuna.ethereum esine.
- The äänestyssopimus muuttuja luo sopimusesiintymän käyttämällä sopimusosoitetta ja ABI: ta.
- The äänestys toiminto hoitaa äänestysprosessin. Se kutsuu äänestys älykkään sopimuksen toiminto äänestysContract.methods.vote (kandidaatti).lähetä(). Se lähettää tapahtuman sopimukseen ja tallentaa käyttäjän äänen. The ääntenlaskenta muuttuja kutsuu sitten getVoteCount älykkään sopimuksen toiminto noutaa tietyn ehdokkaan nykyinen äänimäärä. Se päivittää sitten käyttöliittymän äänimäärän vastaamaan haettuja ääniä.
Muista sisällyttää tämä main.js tiedosto HTML-tiedostoosi käyttämällä a -tunniste.
Varmista lisäksi, että sopimusosoite ja ABI ovat oikein ja että sinulla on oikea virheenkäsittely paikallaan.
JavaScriptin rooli DApps-rakennusten rakentamisessa
JavaScriptillä on kyky olla vuorovaikutuksessa hajautetuissa sovelluksissa käytettyjen älykkäiden sopimusten kanssa. Tämä yhdistää Web3-maailman ensisijaiseen ohjelmointikieleen, jota käytetään Web2-sovellusten rakentamisessa, mikä helpottaa Web3:n käyttöönottoa. Web3.js: n avulla Web2-kehittäjät voivat siirtyä rakentamaan sovelluksia, kuten Web3-sosiaalisen median alusta.
