Искористите ЈаваСцрипт библиотеку Веб3.јс да бисте успоставили беспрекоран интерфејс за интеракцију са Етхереум блоцкцхаином.
Паметни уговори су примарни градивни блокови за Веб3 апликације. Да би се омогућиле функционалности у Веб3 апликацијама, важно је бити у могућности да на погодан начин комуницирате са функцијама наведеним у паметном уговору. За успостављање ове комуникације можете користити популарни језик као што је ЈаваСцрипт и позната библиотека Веб3.јс.
Увод у библиотеку Веб3.јс
Веб3.јс је ЈаваСцрипт библиотека која нуди интерфејс за интеракцију са Етхереум блоцкцхаином. То поједностављује процес изградње децентрализоване апликације (ДАппс) пружањем метода и алата за повезивање са Етхереум чворовима, слање трансакција, читање података паметног уговора и руковање догађајима.
Веб3.јс повезује традиционални развој и блоцкцхаин технологију, омогућавајући вам да креирате децентрализоване и безбедне апликације користећи познату ЈаваСцрипт синтаксу и функционалност.
Како да увезете Веб3.јс у ЈаваСцрипт пројекат
Да бисте користили Веб3.јс у свом Ноде пројекту, прво морате да инсталирате библиотеку као зависност пројекта.
Инсталирајте библиотеку тако што ћете покренути ову команду унутар вашег пројекта:
npm install web3or
yarn add web3
Након инсталирања Веб3.јс, сада можете да увезете библиотеку у свој Ноде пројекат као ЕС модул:
const Web3 = require('web3');
Интеракција са примењеним паметним уговорима
Да бисте правилно демонстрирали како можете да комуницирате са примењеним паметним уговором на Етхереум мрежи користећи Веб3.јс, креираћете веб апликацију која функционише са примењеним паметним уговором. Сврха веб апликације биће једноставно гласање где новчаник може да гласа за кандидата и да ти гласови буду забележени.
За почетак, креирајте нови директоријум за свој пројекат и иницијализујте га као Ноде.јс пројекат:
npm init
Инсталирајте Веб3.јс у пројекат као зависност и креирајте једноставно индек.хтмл и стилес.цсс датотеке у корену пројекта.
Увезите следећи код у индек.хтмл фајл:
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>
Унутар стилес.цсс датотеку, увезите следећи код:
/* 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;
}
Испод је резултујући интерфејс:
Сада када имате основни интерфејс за почетак, креирајте а уговор фолдер у корену вашег пројекта који садржи код за ваш паметни уговор.
Ремик ИДЕ пружа једноставан начин за писање, примену и тестирање паметних уговора. Користићете Ремик да примените свој уговор на Етхереум мрежу.
Иди на ремик.етхереум.орг и креирајте нову датотеку испод уговори фолдер. Можете именовати датотеку тест_цонтрацт.сол.
Тхе .сол проширење означава да је ово датотека Солидити. Солидити је један од најпопуларнијих језика за писање савремених паметних уговора.
Унутар ове датотеке, напишите и компајлирајте свој Солидити код:
// 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];
};
};
Када Ремик компајлира Солидити код, он такође креира АБИ (Апликацијски бинарни интерфејс) у ЈСОН формату. АБИ дефинише интерфејс између паметног уговора и клијентске апликације.
То би прецизирало следеће:
- Имена и типови функција и догађаја који су изложени паметном уговору.
- Редослед аргумената сваке функције.
- Повратне вредности сваке функције.
- Формат података сваког догађаја.
Да бисте добили АБИ, копирајте га из Ремик ИДЕ-а. Створити цонтрацт.аби.јсон фајл унутра уговор унутар корена вашег пројекта и налепите АБИ унутар датотеке.
Требало би да наставите и распоредите свој уговор на тестну мрежу користећи алат као што је Ганацхе.
Комуникација са вашим распоређеним паметним уговором помоћу Веб3.јс
Ваш уговор је сада распоређен на Етхереум тестну мрежу. Можете да почнете да радите на интеракцији са распоређеним уговором из вашег корисничког интерфејса. Створити маин.јс датотеку у корену вашег пројекта. Увезићете и Веб3.јс и своју сачувану АБИ датотеку маин.јс. Ова датотека ће разговарати са вашим паметним уговором и биће одговорна за читање података из уговора, позивање његових функција и руковање трансакцијама.
Испод је како ваш маин.јс датотека треба да изгледа:
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);
});
});
Горњи блок кода користи Веб3.јс за разговор са функцијама паметног уговора из вашег веб интерфејса. У суштини, користите ЈаваСцрипт функције за позивање Солидити функција маин.јс.
У коду, замените 'ЦОНТРАЦТ_АДДРЕСС' са стварно распоређеном адресом уговора. Ремик ИДЕ ће вам то пружити приликом постављања.
Ево шта се дешава у коду:
- Ажурирајте избор ДОМ елемената на основу ваше ХТМЛ структуре. У овом примеру, претпоставља се да сваки елемент кандидата има а подаци-кандидат атрибут који одговара имену кандидата.
- Пример за Веб3 класа се затим креира коришћењем убаченог провајдера из виндов.етхереум објекат.
- Тхе вотингЦонтрацт променљива креира инстанцу уговора користећи адресу уговора и АБИ.
- Тхе воте функција управља процесом гласања. То зове воте функцију паметног уговора користећи вотингЦонтрацт.метходс.воте (кандидат).сенд(). Он шаље трансакцију уговору, бележећи глас корисника. Тхе вотеЦоунт променљива затим позива тхе гетВотеЦоунт функција паметног уговора за преузимање тренутног броја гласова за одређеног кандидата. Затим ће ажурирати број гласова у корисничком интерфејсу како би одговарао преузетим гласовима.
Не заборавите да укључите ово маин.јс датотеку у вашој ХТМЛ датотеци помоћу а
