Utilizza la libreria JavaScript Web3.js per stabilire un'interfaccia perfetta per l'interazione con la blockchain di Ethereum.
I contratti intelligenti sono gli elementi costitutivi principali per le applicazioni Web3. Per abilitare le funzionalità nelle applicazioni Web3, è importante poter interagire comodamente con le funzioni specificate in uno smart contract. Potresti usare un linguaggio popolare come JavaScript e la ben nota libreria Web3.js per stabilire questa comunicazione.
Introduzione alla libreria Web3.js
Web3.js è una libreria JavaScript che offre un'interfaccia per interagire con la blockchain di Ethereum. Semplifica il processo di costruzione applicazioni decentralizzate (DApp) fornendo metodi e strumenti per connettersi ai nodi Ethereum, inviare transazioni, leggere dati di smart contract e gestire eventi.
Web3.js collega lo sviluppo tradizionale e la tecnologia blockchain, consentendo di creare applicazioni decentralizzate e sicure utilizzando la sintassi e le funzionalità JavaScript familiari.
Come importare Web3.js in un progetto JavaScript
Per utilizzare Web3.js nel tuo progetto Node, devi prima installare la libreria come dipendenza del progetto.
Installa la libreria eseguendo questo comando all'interno del tuo progetto:
npm install web3or
yarn add web3
Dopo aver installato Web3.js, ora puoi importare la libreria all'interno del tuo progetto Node come modulo ES:
const Web3 = require('web3');
Interagire con gli Smart Contract distribuiti
Per dimostrare correttamente come puoi interagire con uno smart contract distribuito sulla rete Ethereum utilizzando Web3.js, creerai un'applicazione web che funziona con lo smart contract distribuito. Lo scopo dell'app Web sarà una semplice scheda elettorale in cui un portafoglio può esprimere voti per un candidato e registrare tali voti.
Per iniziare, crea una nuova directory per il tuo progetto e inizializzala come progetto Node.js:
npm init
Installa Web3.js nel progetto come dipendenza e crea simple indice.html E styles.css file all'interno della radice del progetto.
Importa il seguente codice nel file indice.html file:
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>
Dentro il styles.css importare il seguente codice:
/* 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;
}
Di seguito è riportata l'interfaccia risultante:
Ora che hai un'interfaccia di base per iniziare, crea un file contrarre cartella nella root del tuo progetto per contenere il codice per il tuo smart contract.
L'IDE Remix fornisce un modo semplice per scrivere, distribuire e testare contratti intelligenti. Utilizzerai Remix per distribuire il tuo contratto sulla rete Ethereum.
Navigare verso remix.ethereum.org e creare un nuovo file sotto l'estensione contratti cartella. Puoi nominare il file test_contratto.sol.
IL .sol l'estensione indica che si tratta di un file Solidity. La solidità è uno dei linguaggi più popolari per scrivere contratti intelligenti moderni.
All'interno di questo file, scrivi e compila il tuo codice 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];
};
};
Quando Remix compila il codice Solidity, crea anche un'ABI (Application Binary Interface) in formato JSON. L'ABI definisce l'interfaccia tra uno smart contract e un'applicazione client.
Preciserebbe quanto segue:
- I nomi e i tipi di funzioni ed eventi esposti dallo smart contract.
- L'ordine degli argomenti di ogni funzione.
- I valori di ritorno di ciascuna funzione.
- Il formato dei dati di ciascun evento.
Per ottenere l'ABI, copialo dall'IDE Remix. Creare un contratto.abi.json file all'interno contrarre nella root del tuo progetto e incolla l'ABI all'interno del file.
Dovresti andare avanti e distribuire il tuo contratto a una rete di test utilizzando uno strumento come Ganache.
Comunicare con il tuo Smart Contract implementato utilizzando Web3.js
Il tuo contratto è stato ora implementato su una rete di test Ethereum. Puoi iniziare a lavorare sull'interazione con il contratto distribuito dall'interfaccia utente. Creare un principale.js file nella root del tuo progetto. Importerai sia Web3.js che il tuo file ABI salvato in principale.js. Questo file parlerà con il tuo smart contract e sarà responsabile della lettura dei dati dal contratto, della chiamata delle sue funzioni e della gestione delle transazioni.
Di seguito è come il tuo principale.js il file dovrebbe apparire:
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);
});
});
Il blocco di codice sopra utilizza Web3.js per comunicare con le funzioni del tuo contratto intelligente dalla tua interfaccia web. Essenzialmente stai usando le funzioni JavaScript per chiamare le funzioni Solidity da principale.js.
Nel codice, sostituire 'INDIRIZZO_CONTRATTO' con l'effettivo indirizzo del contratto distribuito. L'IDE Remix ti fornirà questo durante la distribuzione.
Ecco cosa sta succedendo nel codice:
- Aggiorna la selezione degli elementi DOM in base alla tua struttura HTML. In questo esempio, si presuppone che ogni elemento candidato abbia a dati-candidato attributo che corrisponde al nome del candidato.
- Un'istanza di Web3 class viene quindi creata utilizzando il provider inserito da finestra.ethereum oggetto.
- IL contratto di voto La variabile crea un'istanza di contratto utilizzando l'indirizzo del contratto e l'ABI.
- IL votazione La funzione gestisce il processo di voto. Chiama il votazione funzione del contratto intelligente utilizzando voteContract.methods.vote (candidato).send(). Invia una transazione al contratto, registrando il voto dell'utente. IL conteggio dei voti variabile quindi chiama il getVoteCount funzione del contratto intelligente per recuperare il conteggio dei voti corrente per un candidato specifico. Quindi aggiornerà il conteggio dei voti nell'interfaccia utente in modo che corrisponda ai voti recuperati.
Ricordati di includere questo principale.js file nel file HTML utilizzando a tag.
Inoltre, assicurati che l'indirizzo del contratto e l'ABI siano corretti e di avere gestione degli errori in atto.
Ruolo di JavaScript nella creazione di DApp
JavaScript ha la capacità di interagire con i contratti intelligenti utilizzati nelle applicazioni decentralizzate. Ciò riunisce il mondo Web3 con un linguaggio di programmazione primario utilizzato nella creazione di app Web2, che aiuta a facilitare l'adozione di Web3. Con Web3.js, gli sviluppatori Web2 possono passare alla creazione di app come una piattaforma di social media Web3.