Χρησιμοποιήστε τη βιβλιοθήκη JavaScript Web3.js για να δημιουργήσετε μια απρόσκοπτη διεπαφή για αλληλεπίδραση με το blockchain Ethereum.
Τα έξυπνα συμβόλαια είναι τα κύρια δομικά στοιχεία για τις εφαρμογές Web3. Προκειμένου να ενεργοποιηθούν οι λειτουργίες σε εφαρμογές Web3, είναι σημαντικό να μπορείτε να αλληλεπιδράτε με τις λειτουργίες που καθορίζονται σε ένα έξυπνο συμβόλαιο εύκολα. Θα μπορούσατε να χρησιμοποιήσετε μια δημοφιλή γλώσσα όπως η JavaScript και η γνωστή βιβλιοθήκη Web3.js για να δημιουργήσετε αυτήν την επικοινωνία.
Εισαγωγή στη Βιβλιοθήκη Web3.js
Το Web3.js είναι μια βιβλιοθήκη JavaScript που προσφέρει μια διεπαφή για αλληλεπίδραση με το blockchain Ethereum. Απλοποιεί τη διαδικασία κατασκευής αποκεντρωμένες εφαρμογές (DApps) παρέχοντας μεθόδους και εργαλεία για σύνδεση με κόμβους Ethereum, αποστολή συναλλαγών, ανάγνωση δεδομένων έξυπνων συμβολαίων και χειρισμό συμβάντων.
Το Web3.js γεφυρώνει την παραδοσιακή ανάπτυξη και την τεχνολογία blockchain, επιτρέποντάς σας να δημιουργείτε αποκεντρωμένες και ασφαλείς εφαρμογές χρησιμοποιώντας οικεία σύνταξη και λειτουργικότητα JavaScript.
Πώς να εισαγάγετε το Web3.js σε ένα έργο JavaScript
Για να χρησιμοποιήσετε το Web3.js στο έργο Node, πρέπει πρώτα να εγκαταστήσετε τη βιβλιοθήκη ως εξάρτηση έργου.
Εγκαταστήστε τη βιβλιοθήκη εκτελώντας αυτήν την εντολή μέσα στο έργο σας:
npm install web3or
yarn add web3
Μετά την εγκατάσταση του Web3.js, μπορείτε πλέον να εισαγάγετε τη βιβλιοθήκη στο έργο Node ως λειτουργική μονάδα ES:
const Web3 = require('web3');
Αλληλεπίδραση με αναπτυγμένα έξυπνα συμβόλαια
Για να δείξετε σωστά πώς μπορείτε να αλληλεπιδράσετε με ένα αναπτυγμένο έξυπνο συμβόλαιο στο δίκτυο Ethereum χρησιμοποιώντας το Web3.js, θα δημιουργήσετε μια εφαρμογή Ιστού που θα λειτουργεί με αναπτυγμένο έξυπνο συμβόλαιο. Ο σκοπός της διαδικτυακής εφαρμογής θα είναι ένα απλό ψηφοδέλτιο όπου ένα πορτοφόλι μπορεί να ψηφίσει για έναν υποψήφιο και να καταγράψει αυτές τις ψήφους.
Για να ξεκινήσετε, δημιουργήστε έναν νέο κατάλογο για το έργο σας και αρχικοποιήστε τον ως έργο Node.js:
npm init
Εγκαταστήστε το Web3.js στο έργο ως εξάρτηση και δημιουργήστε απλά index.html και στυλ.css αρχεία εντός του root του έργου.
Εισαγάγετε τον ακόλουθο κώδικα στο index.html αρχείο:
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>
μεσα στην στυλ.css αρχείο, εισάγετε τον ακόλουθο κώδικα:
/* 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;
}
Παρακάτω είναι η διεπαφή που προκύπτει:
Τώρα που έχετε μια βασική διεπαφή για να ξεκινήσετε, δημιουργήστε ένα σύμβαση φάκελο στη ρίζα του έργου σας για να περιέχει τον κωδικό για το έξυπνο συμβόλαιό σας.
Το Remix IDE παρέχει έναν απλό τρόπο σύνταξης, ανάπτυξης και δοκιμής έξυπνων συμβολαίων. Θα χρησιμοποιήσετε το Remix για να αναπτύξετε το συμβόλαιό σας στο δίκτυο Ethereum.
Πλοηγηθείτε στο remix.ethereum.org και δημιουργήστε ένα νέο αρχείο κάτω από το συμβάσεις ντοσιέ. Μπορείτε να ονομάσετε το αρχείο test_contract.sol.
ο .σολ Η επέκταση υποδεικνύει ότι πρόκειται για αρχείο Solidity. Η Solidity είναι μια από τις πιο δημοφιλείς γλώσσες για τη σύνταξη σύγχρονων έξυπνων συμβολαίων.
Μέσα σε αυτό το αρχείο, γράψτε και μεταγλωττίστε τον κώδικα 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];
};
};
Όταν το Remix μεταγλωττίζει τον κώδικα Solidity, δημιουργεί επίσης ένα ABI (Application Binary Interface) σε μορφή JSON. Το ABI ορίζει τη διεπαφή μεταξύ ενός έξυπνου συμβολαίου και μιας εφαρμογής πελάτη.
Θα όριζε τα εξής:
- Τα ονόματα και οι τύποι λειτουργιών και συμβάντων που εκτίθενται από το έξυπνο συμβόλαιο.
- Η σειρά των ορισμάτων σε κάθε συνάρτηση.
- Οι επιστρεφόμενες τιμές κάθε συνάρτησης.
- Η μορφή δεδομένων κάθε συμβάντος.
Για να λάβετε το ABI, αντιγράψτε το μέσα από το Remix IDE. Δημιουργώ ένα contract.abi.json αρχείο μέσα σύμβαση μέσα στο root του έργου σας και επικολλήστε το ABI μέσα στο αρχείο.
Θα πρέπει να προχωρήσετε και να αναπτύξετε το συμβόλαιό σας σε ένα δοκιμαστικό δίκτυο χρησιμοποιώντας ένα εργαλείο όπως το Ganache.
Επικοινωνία με το αναπτυγμένο έξυπνο συμβόλαιό σας χρησιμοποιώντας το Web3.js
Το συμβόλαιό σας έχει πλέον αναπτυχθεί σε ένα δίκτυο δοκιμών Ethereum. Μπορείτε να αρχίσετε να εργάζεστε για την αλληλεπίδραση με το αναπτυγμένο συμβόλαιο από τη διεπαφή διεπαφής χρήστη. Δημιουργώ ένα main.js αρχείο στο root του έργου σας. Θα εισαγάγετε τόσο το Web3.js όσο και το αποθηκευμένο σας αρχείο ABI main.js. Αυτό το αρχείο θα μιλήσει με το έξυπνο συμβόλαιό σας και θα είναι υπεύθυνο για την ανάγνωση δεδομένων από το συμβόλαιο, την κλήση των λειτουργιών του και τον χειρισμό των συναλλαγών.
Παρακάτω είναι πώς σας main.js το αρχείο πρέπει να φαίνεται:
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);
});
});
Το παραπάνω μπλοκ κώδικα χρησιμοποιεί το Web3.js για να μιλήσει με τις λειτουργίες του έξυπνου συμβολαίου από τη διεπαφή ιστού σας. Ουσιαστικά χρησιμοποιείτε συναρτήσεις JavaScript για να καλέσετε συναρτήσεις Solidity main.js.
Στον κωδικό, αντικαταστήστε 'CONTRACT_ADDRESS' με την πραγματική διεύθυνση της σύμβασης. Το Remix IDE θα σας το παρέχει κατά την ανάπτυξη.
Εδώ είναι τι συμβαίνει στον κώδικα:
- Ενημερώστε την επιλογή στοιχείων DOM με βάση τη δομή HTML σας. Σε αυτό το παράδειγμα, υποθέτει ότι κάθε υποψήφιο στοιχείο έχει α δεδομένα-υποψήφιος χαρακτηριστικό που αντιστοιχεί στο όνομα του υποψηφίου.
- Ένα παράδειγμα του Web3 Κατόπιν δημιουργείται κλάση χρησιμοποιώντας τον παροχέα με ένεση από το παράθυρο.ethereum αντικείμενο.
- ο ψηφοφορία Η μεταβλητή δημιουργεί μια παρουσία συμβολαίου χρησιμοποιώντας τη διεύθυνση σύμβασης και το ABI.
- ο ψήφος λειτουργία χειρίζεται τη διαδικασία ψηφοφορίας. Καλεί το ψήφος λειτουργία του έξυπνου συμβολαίου χρησιμοποιώντας votingContract.methods.vote (υποψήφιος).send(). Στέλνει μια συναλλαγή στο συμβόλαιο, καταγράφοντας την ψήφο του χρήστη. ο καταμέτρηση ψήφων μεταβλητή τότε καλεί το getVoteCount λειτουργία του έξυπνου συμβολαίου για την ανάκτηση της τρέχουσας καταμέτρησης ψήφων για έναν συγκεκριμένο υποψήφιο. Στη συνέχεια, θα ενημερώσει την καταμέτρηση ψήφων στη διεπαφή χρήστη για να ταιριάζει με τις ανακτημένες ψήφους.
Θυμηθείτε να το συμπεριλάβετε main.js αρχείο στο αρχείο HTML χρησιμοποιώντας α ετικέτα.
Επιπλέον, βεβαιωθείτε ότι η διεύθυνση του συμβολαίου και το ABI είναι σωστά και ότι έχετε τη σωστή διεύθυνση χειρισμός σφαλμάτων στη θέση του.
Ο ρόλος της JavaScript στη δημιουργία DApps.
Η JavaScript έχει τη δυνατότητα να αλληλεπιδρά με έξυπνα συμβόλαια που χρησιμοποιούνται σε αποκεντρωμένες εφαρμογές. Αυτό συνδυάζει τον κόσμο του Web3 με μια κύρια γλώσσα προγραμματισμού που χρησιμοποιείται για τη δημιουργία εφαρμογών Web2, η οποία βοηθά στη διευκόλυνση της υιοθέτησης του Web3. Με το Web3.js, οι προγραμματιστές του Web2 μπορούν να μεταβούν στη δημιουργία εφαρμογών όπως μια πλατφόρμα κοινωνικών μέσων Web3.
