Ethereum blok zinciriyle etkileşim için kusursuz bir arayüz oluşturmak üzere Web3.js JavaScript kitaplığından yararlanın.
Akıllı sözleşmeler, Web3 uygulamaları için birincil yapı taşlarıdır. Web3 uygulamalarında işlevselliklerin etkinleştirilmesi için bir akıllı sözleşmede belirtilen işlevlerle uygun bir şekilde etkileşim kurulabilmesi önemlidir. Bu iletişimi kurmak için JavaScript gibi popüler bir dili ve iyi bilinen Web3.js kitaplığını kullanabilirsiniz.
Web3.js Kitaplığına Giriş
Web3.js, Ethereum blockchain ile etkileşim için bir arayüz sunan bir JavaScript kitaplığıdır. Bina sürecini basitleştirir merkezi olmayan uygulamalar (DApps) Ethereum düğümlerine bağlanmak, işlem göndermek, akıllı sözleşme verilerini okumak ve olayları işlemek için yöntemler ve araçlar sağlayarak.
Web3.js, geleneksel geliştirme ve blok zinciri teknolojisi arasında köprü kurarak, tanıdık JavaScript sözdizimi ve işlevselliğini kullanarak merkezi olmayan ve güvenli uygulamalar oluşturmanıza olanak tanır.
Web3.js'yi JavaScript Projesine Aktarma
Web3.js'yi Düğüm projenizde kullanmak için öncelikle kitaplığı bir proje bağımlılığı olarak yüklemeniz gerekir.
Projenizin içinde bu komutu çalıştırarak kitaplığı kurun:
npm install web3or
yarn add web3
Web3.js'yi yükledikten sonra, artık kitaplığı Düğüm projenize bir ES modülü olarak içe aktarabilirsiniz:
const Web3 = require('web3');
Dağıtılmış Akıllı Sözleşmelerle Etkileşim
Web3.js kullanarak Ethereum ağında konuşlandırılmış bir akıllı sözleşme ile nasıl etkileşim kurabileceğinizi düzgün bir şekilde göstermek için, konuşlandırılmış akıllı sözleşme ile çalışan bir web uygulaması oluşturacaksınız. Web uygulamasının amacı, bir cüzdanın bir adaya oy verebileceği ve bu oyları kaydedebileceği basit bir oy pusulası olacaktır.
Başlamak için projeniz için yeni bir dizin oluşturun ve onu bir Node.js projesi olarak başlatın:
npm init
Web3.js'yi projeye bir bağımlılık olarak yükleyin ve basit oluşturun index.html Ve stiller.css projenin kökündeki dosyalar.
Aşağıdaki kodu içe aktarın index.html dosya:
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>
İçinde stiller.css dosya, aşağıdaki kodu içe aktarın:
/* 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;
}
Ortaya çıkan arayüz aşağıdadır:
Artık başlamak için temel bir arayüze sahip olduğunuza göre, bir sözleşme akıllı sözleşmenizin kodunu içeren projenizin kökündeki klasör.
Remix IDE, akıllı sözleşmeler yazmak, dağıtmak ve test etmek için basit bir yol sağlar. Sözleşmenizi Ethereum ağına dağıtmak için Remix'i kullanacaksınız.
Şu yöne rotayı ayarla remix.ethereum.org ve altında yeni bir dosya oluşturun. sözleşmeler dosya. dosyaya isim verebilirsiniz test_contract.sol.
bu .sol uzantı, bunun bir Solidity dosyası olduğunu gösterir. Solidity en popüler dillerden biridir modern akıllı sözleşmeler yazmak için.
Bu dosyanın içinde, Solidity kodunuzu yazın ve derleyin:
// 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];
};
};
Remix, Solidity kodunu derlediğinde, ayrıca JSON formatında bir ABI (Application Binary Interface) oluşturur. ABI, bir akıllı sözleşme ile bir istemci uygulaması arasındaki arayüzü tanımlar.
Aşağıdakileri belirtirdi:
- Akıllı sözleşme tarafından sunulan işlevlerin ve olayların adları ve türleri.
- Her işlev için bağımsız değişkenlerin sırası.
- Her işlevin dönüş değerleri.
- Her olayın veri biçimi.
ABI'yi almak için Remix IDE içinden kopyalayın. Oluşturmak sözleşme.abi.json dosya içinde sözleşme projenizin kök dizinine girin ve ABI'yi dosyanın içine yapıştırın.
Devam etmeli ve sözleşmenizi Ganache gibi bir araç kullanarak bir test ağına dağıtmalısınız.
Dağıtılmış Akıllı Sözleşmenizle Web3.js Kullanarak İletişim Kurma
Sözleşmeniz artık bir Ethereum test ağına dağıtıldı. Kullanıcı Arabirimi arabiriminizden dağıtılan sözleşmeyle etkileşim kurmaya başlayabilirsiniz. Oluşturmak ana.js projenizin kökündeki dosya. Hem Web3.js'yi hem de kayıtlı ABI dosyanızı içe aktaracaksınız. ana.js. Bu dosya akıllı sözleşmenizle konuşacak ve sözleşmeden veri okumaktan, işlevlerini çağırmaktan ve işlemleri yapmaktan sorumlu olacaktır.
Aşağıda senin nasıl ana.js dosya şöyle görünmelidir:
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);
});
});
Yukarıdaki kod bloğu, web arayüzünüzden akıllı sözleşme işlevlerinizle konuşmak için Web3.js'yi kullanır. Esasen, Solidity fonksiyonlarını çağırmak için JavaScript fonksiyonlarını kullanıyorsunuz. ana.js.
Kodda değiştirin "SÖZLEŞME_ADRES" gerçek dağıtılan sözleşme adresi ile. Remix IDE, dağıtım sırasında size bunu sağlayacaktır.
İşte kodda olanlar:
- DOM öğeleri seçimini HTML yapınıza göre güncelleyin. Bu örnekte, her aday öğenin bir veri adayı adayın adına karşılık gelen özellik.
- bir örneği Web3 sınıf daha sonra enjekte edilen sağlayıcı kullanılarak oluşturulur. pencere. ethereum nesne.
- bu oylama Sözleşmesi değişkeni, sözleşme adresini ve ABI'yı kullanarak bir sözleşme örneği oluşturur.
- bu oy işlevi oylama sürecini yönetir. çağırır oy kullanarak akıllı sözleşmenin işlevi oylamaContract.methods.vote (aday).send(). Kullanıcının oyunu kaydederek sözleşmeye bir işlem gönderir. bu oy sayısı değişken daha sonra çağırır GetVoteCount belirli bir aday için mevcut oy sayısını almak için akıllı sözleşmenin işlevi. Ardından, kullanıcı arayüzündeki oy sayısını alınan oylarla eşleşecek şekilde güncelleyecektir.
Bunu eklemeyi unutma ana.js kullanarak HTML dosyanızda dosya etiketi.
Ayrıca, sözleşme adresinin ve ABI'nin doğru olduğundan ve uygun şekilde sahip olduğunuzdan emin olun. yerinde hata işleme.
DApps Oluşturmada JavaScript'in Rolü
JavaScript, merkezi olmayan uygulamalarda kullanılan akıllı sözleşmelerle etkileşim kurma yeteneğine sahiptir. Bu, Web3 dünyasını, Web2 uygulamalarının oluşturulmasında kullanılan ve Web3'ün benimsenmesini kolaylaştırmaya yardımcı olan birincil programlama diliyle bir araya getirir. Web3.js ile Web2 geliştiricileri, Web3 sosyal medya platformu gibi uygulamalar oluşturmaya geçiş yapabilir.