Využijte JavaScriptovou knihovnu Web3.js k vytvoření bezproblémového rozhraní pro interakci s blockchainem Ethereum.
Inteligentní smlouvy jsou primárními stavebními kameny pro Web3 aplikace. Aby bylo možné povolit funkce v aplikacích Web3, je důležité mít možnost pohodlně pracovat s funkcemi uvedenými v chytré smlouvě. K navázání této komunikace můžete použít populární jazyk jako JavaScript a známou knihovnu Web3.js.
Úvod do knihovny Web3.js
Web3.js je JavaScriptová knihovna, která nabízí rozhraní pro interakci s blockchainem Ethereum. Zjednodušuje proces výstavby decentralizované aplikace (DApps) poskytováním metod a nástrojů pro připojení k uzlům Ethereum, odesílání transakcí, čtení dat inteligentních smluv a zpracování událostí.
Web3.js překlenuje tradiční vývoj a technologii blockchain a umožňuje vám vytvářet decentralizované a bezpečné aplikace pomocí známé syntaxe a funkcí JavaScriptu.
Jak importovat Web3.js do projektu JavaScript
Chcete-li použít Web3.js ve svém projektu Node, musíte nejprve nainstalovat knihovnu jako závislost projektu.
Nainstalujte knihovnu spuštěním tohoto příkazu ve vašem projektu:
npm install web3or
yarn add web3
Po instalaci Web3.js můžete nyní importovat knihovnu v rámci projektu Node jako modul ES:
const Web3 = require('web3');
Interakce s nasazenými inteligentními smlouvami
Chcete-li správně demonstrovat, jak můžete komunikovat s nasazenou inteligentní smlouvou v síti Ethereum pomocí Web3.js, vytvoříte webovou aplikaci, která funguje s nasazenou inteligentní smlouvou. Účelem webové aplikace bude jednoduchý hlasovací lístek, kde může peněženka hlasovat pro kandidáta a nechat si tyto hlasy zaznamenat.
Chcete-li začít, vytvořte nový adresář pro svůj projekt a inicializujte jej jako projekt Node.js:
npm init
Nainstalujte Web3.js do projektu jako závislost a vytvořte jednoduchý index.html a styly.css soubory v kořenovém adresáři projektu.
Importujte následující kód do index.html soubor:
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>
Uvnitř styly.css soubor, importujte následující 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;
}
Níže je výsledné rozhraní:
Nyní, když máte základní rozhraní pro začátek, vytvořte a smlouva složku v kořenovém adresáři vašeho projektu, která bude obsahovat kód pro vaši inteligentní smlouvu.
Remix IDE poskytuje jednoduchý způsob, jak psát, nasazovat a testovat chytré smlouvy. Remix budete používat k nasazení své smlouvy do sítě Ethereum.
Navigovat do remix.ethereum.org a vytvořte nový soubor pod smlouvy složku. Soubor můžete pojmenovat zkušební_smlouva.sol.
The .sol přípona označuje, že se jedná o soubor Solidity. Solidity je jedním z nejoblíbenějších jazyků pro psaní moderních chytrých smluv.
Uvnitř tohoto souboru napište a zkompilujte svůj 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];
};
};
Když Remix zkompiluje kód Solidity, vytvoří také ABI (Application Binary Interface) ve formátu JSON. ABI definuje rozhraní mezi inteligentní smlouvou a klientskou aplikací.
Specifikovalo by to následující:
- Názvy a typy funkcí a událostí, které jsou vystaveny inteligentní smlouvou.
- Pořadí argumentů každé funkce.
- Návratové hodnoty každé funkce.
- Formát dat každé události.
Chcete-li získat ABI, zkopírujte jej z IDE Remix. Vytvořit contract.abi.json soubor uvnitř smlouva v kořenovém adresáři vašeho projektu a vložte ABI do souboru.
Měli byste pokračovat a nasadit svou smlouvu do testovací sítě pomocí nástroje, jako je Ganache.
Komunikace s vaší nasazenou inteligentní smlouvou pomocí Web3.js
Vaše smlouva byla nyní nasazena do testovací sítě Ethereum. Můžete začít pracovat na interakci s nasazenou smlouvou z rozhraní uživatelského rozhraní. Vytvořit main.js soubor v kořenovém adresáři vašeho projektu. Importujete jak Web3.js, tak váš uložený soubor ABI main.js. Tento soubor bude mluvit s vaší inteligentní smlouvou a bude zodpovědný za čtení dat ze smlouvy, volání jejích funkcí a zpracování transakcí.
Níže je uveden váš main.js soubor by měl vypadat:
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 výše využívá Web3.js ke komunikaci s funkcemi inteligentní smlouvy z vašeho webového rozhraní. V podstatě používáte funkce JavaScriptu k volání funkcí Solidity main.js.
V kódu nahraďte „CONTRACT_ADDRESS“ se skutečnou adresou nasazené smlouvy. Remix IDE vám to poskytne při nasazení.
Zde je to, co se děje v kódu:
- Aktualizujte výběr prvků DOM na základě vaší struktury HTML. V tomto příkladu se předpokládá, že každý kandidátský prvek má a datový kandidát atribut, který odpovídá jménu kandidáta.
- Příklad Web3 třída je pak vytvořena pomocí vloženého poskytovatele z okno.ethereum objekt.
- The hlasováníSmlouva proměnná vytvoří instanci smlouvy pomocí adresy smlouvy a ABI.
- The hlasování funkce zpracovává proces hlasování. Volá to hlasování funkce smart kontraktu pomocí hlasováníContract.methods.vote (kandidát).odeslat(). Odešle transakci do smlouvy, zaznamenává hlas uživatele. The počet hlasů proměnná pak volá getVoteCount funkce chytré smlouvy k načtení aktuálního počtu hlasů pro konkrétního kandidáta. Poté aktualizuje počet hlasů v uživatelském rozhraní tak, aby odpovídal načteným hlasům.
Nezapomeňte uvést toto main.js soubor ve vašem HTML souboru pomocí a tag.
Dodatečně se ujistěte, že adresa smlouvy a ABI jsou správné a že máte správné zpracování chyb na místě.
Role JavaScriptu při vytváření DApps
JavaScript má schopnost komunikovat s inteligentními smlouvami používanými v decentralizovaných aplikacích. To spojuje svět Web3 s primárním programovacím jazykem používaným při vytváření aplikací Web2, což pomáhá usnadnit přijetí Web3. S Web3.js mohou vývojáři Web2 přejít na vytváření aplikací, jako je platforma sociálních médií Web3.
