Využite knižnicu JavaScript Web3.js na vytvorenie bezproblémového rozhrania na interakciu s blockchainom Ethereum.
Inteligentné zmluvy sú hlavnými stavebnými kameňmi pre Web3 aplikácie. Aby bolo možné povoliť funkcie v aplikáciách Web3, je dôležité, aby ste mohli pohodlne komunikovať s funkciami špecifikovanými v inteligentnej zmluve. Na nadviazanie tejto komunikácie môžete použiť populárny jazyk ako JavaScript a známu knižnicu Web3.js.
Úvod do knižnice Web3.js
Web3.js je knižnica JavaScript, ktorá ponúka rozhranie na interakciu s blockchainom Ethereum. Zjednodušuje proces výstavby decentralizované aplikácie (DApps) poskytovaním metód a nástrojov na pripojenie k uzlovým bodom Ethereum, odosielanie transakcií, čítanie údajov inteligentných zmlúv a spracovanie udalostí.
Web3.js spája tradičný vývoj a technológiu blockchain a umožňuje vám vytvárať decentralizované a bezpečné aplikácie pomocou známej syntaxe a funkcií JavaScriptu.
Ako importovať Web3.js do projektu JavaScript
Ak chcete použiť Web3.js vo svojom projekte Node, musíte najprv nainštalovať knižnicu ako závislosť projektu.
Nainštalujte knižnicu spustením tohto príkazu vo svojom projekte:
npm install web3or
yarn add web3
Po nainštalovaní Web3.js môžete teraz importovať knižnicu v rámci projektu Node ako modul ES:
const Web3 = require('web3');
Interakcia s nasadenými inteligentnými zmluvami
Aby ste správne ukázali, ako môžete interagovať s nasadeným smart kontraktom v sieti Ethereum pomocou Web3.js, vytvoríte webovú aplikáciu, ktorá funguje s nasadeným smart kontraktom. Účelom webovej aplikácie bude jednoduchý hlasovací lístok, kde môže peňaženka odovzdať hlasy kandidátovi a nechať si tieto hlasy zaznamenať.
Ak chcete začať, vytvorte nový adresár pre svoj projekt a inicializujte ho ako projekt Node.js:
npm init
Nainštalujte Web3.js do projektu ako závislosť a vytvorte jednoduchý index.html a styles.css súbory v koreňovom adresári projektu.
Importujte nasledujúci kód do index.html súbor:
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>
Vnútri styles.css súbor, importujte nasledujúci kód:
/* 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;
}
Nižšie je výsledné rozhranie:
Teraz, keď máte základné rozhranie na začiatok, vytvorte a zmluvy priečinok v koreňovom adresári vášho projektu, ktorý obsahuje kód vašej inteligentnej zmluvy.
Remix IDE poskytuje jednoduchý spôsob písania, nasadzovania a testovania inteligentných zmlúv. Remix budete používať na nasadenie vašej zmluvy do siete Ethereum.
Prejdite na remix.ethereum.org a vytvorte nový súbor pod zmluvy priečinok. Súbor môžete pomenovať skúšobná_zmluva.sol.
The .sol prípona označuje, že ide o súbor Solidity. Solidita je jedným z najpopulárnejších jazykov pre písanie moderných inteligentných zmlúv.
Vo vnútri tohto súboru napíšte a zostavte svoj kód Solidity:
// 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];
};
};
Keď Remix skompiluje kód Solidity, vytvorí aj ABI (Application Binary Interface) vo formáte JSON. ABI definuje rozhranie medzi smart kontraktom a klientskou aplikáciou.
Špecifikovalo by to nasledovné:
- Názvy a typy funkcií a udalostí, ktoré sú vystavené inteligentnou zmluvou.
- Poradie argumentov pre každú funkciu.
- Návratové hodnoty každej funkcie.
- Formát údajov každej udalosti.
Ak chcete získať ABI, skopírujte ho z prostredia Remix IDE. Vytvor contract.abi.json súbor vnútri zmluvy v koreňovom adresári vášho projektu a vložte ABI do súboru.
Mali by ste pokračovať a nasadiť svoju zmluvu do testovacej siete pomocou nástroja ako Ganache.
Komunikácia s vašou nasadenou inteligentnou zmluvou pomocou Web3.js
Vaša zmluva bola teraz nasadená do testovacej siete Ethereum. Môžete začať pracovať na interakcii s nasadeným kontraktom z vášho používateľského rozhrania. Vytvor main.js súbor v koreňovom adresári vášho projektu. Naimportujete Web3.js aj váš uložený súbor ABI main.js. Tento súbor bude hovoriť s vašou inteligentnou zmluvou a bude zodpovedný za čítanie údajov zo zmluvy, volanie jej funkcií a spracovanie transakcií.
Nižšie je uvedený váš main.js súbor by mal vyzerať:
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);
});
});
Blok kódu vyššie využíva Web3.js na komunikáciu s vašimi funkciami inteligentnej zmluvy z vášho webového rozhrania. V podstate používate funkcie JavaScript na volanie funkcií Solidity main.js.
V kóde nahraďte „CONTRACT_ADDRESS“ so skutočne nasadenou zmluvnou adresou. Remix IDE vám to poskytne pri nasadení.
Tu je to, čo sa deje v kóde:
- Aktualizujte výber prvkov DOM na základe vašej štruktúry HTML. V tomto príklade sa predpokladá, že každý kandidátsky prvok má a dátový kandidát atribút, ktorý zodpovedá menu kandidáta.
- Príklad Web3 trieda sa potom vytvorí pomocou injektovaného poskytovateľa z okno.ethereum objekt.
- The hlasovanieZmluva premenná vytvorí inštanciu zmluvy pomocou adresy zmluvy a ABI.
- The hlasovať funkcia spravuje proces hlasovania. Volá to hlasovať funkcie smart kontraktu hlasovanieContract.methods.vote (kandidát).odoslať(). Do zmluvy odošle transakciu, pričom zaznamená hlas používateľa. The počet hlasov premenná potom volá getVoteCount funkcia inteligentnej zmluvy na získanie aktuálneho počtu hlasov pre konkrétneho kandidáta. Potom aktualizuje počet hlasov v používateľskom rozhraní tak, aby zodpovedal získaným hlasom.
Nezabudnite uviesť toto main.js súbor vo vašom súbore HTML pomocou a tag.
Okrem toho sa uistite, že adresa zmluvy a ABI sú správne a že máte správne spracovanie chýb na mieste.
Úloha JavaScriptu pri vytváraní DApps
JavaScript má schopnosť interagovať s inteligentnými zmluvami používanými v decentralizovaných aplikáciách. To spája svet Web3 s primárnym programovacím jazykom používaným pri vytváraní aplikácií Web2, čo pomáha uľahčiť prijatie Web3. S Web3.js môžu vývojári Web2 prejsť na vytváranie aplikácií, ako je platforma sociálnych médií Web3.