Configura web3.js per usare la blockchain di Ethereum in JavaScript

web3.jsjavascript

Principiante

jdourlens

EthereumDev(opens in a new tab)

11 aprile 2020

3 minuti letti

Autore suggerimento 0x19dE91Af973F404EDF5B4c093983a7c6E3EC8ccE

In questo tutorial, vedremo come muovere i primi passi con web3.js(opens in a new tab) per interagire con la blockchain di Ethereum. Web3.js è utilizzabile sia in frontend che backend per leggere i dati dalla blockchain o effettuare transazioni e persino distribuire gli smart contract.

Per prima cosa occorre includere web3.js nel progetto. Per usarlo in una pagina web, puoi importare la libreria direttamente usando un CDN come JSDeliver.

1<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
2

Se preferisci installare la libreria da usare nel progetto di backend o frontend che usa build, puoi usare npm:

npm install web3 --save

A questo punto, per importare Web3.js in uno script Node.js o un progetto frontend di Browserify, puoi usare la seguente riga di JavaScript:

1const Web3 = require("web3")
2
 Copia

Ora che hai incluso la libreria nel progetto, dobbiamo inizializzarla. Il progetto deve poter comunicare con la blockchain. Gran parte delle librerie di Ethereum comunica con un nodo tramite le chiamate RPC. Per avviare il nostro provider Web3, istanzieremo un'istanza di Web3 passando per il costruttore dell'URL del provider. Se hai un nodo o un'istanza ganache in esecuzione sul tuo computer(opens in a new tab), apparirà così:

1const web3 = new Web3("http://localhost:8545")
2
 Copia

Se desideri accedere direttamente a un nodo ospitato, puoi usare Infura o quelli gratuiti forniti da Cloudflare(opens in a new tab):

1const web3 = new Web3("https://cloudflare-eth.com")
2
 Copia

Per verificare di aver configurato correttamente la nostra istanza di Web3, proveremo a recuperare il numero dell'ultimo blocco usando la funzione getBlockNumber. Questa funzione accetta un callback come parametro e restituisce il numero del blocco come un intero.

1var Web3 = require("web3")
2const web3 = new Web3("https://cloudflare-eth.com")
3
4web3.eth.getBlockNumber(function (error, result) {
5  console.log(result)
6})
7
 Copia

Se viene eseguito, questo programma produrrà semplicemente il numero dell'ultimo blocco: la cima della blockchain. Puoi anche usare le chiamate della funzione await/async per evitare di annidare delle callback nel tuo codice:

1async function getBlockNumber() {
2  const latestBlockNumber = await web3.eth.getBlockNumber()
3  console.log(latestBlockNumber)
4  return latestBlockNumber
5}
6
7getBlockNumber()
8
 Copia

Puoi vedere tutte le funzioni disponibili sull'istanza di web3 nella documentazione ufficiale di web3.js(opens in a new tab).

Gran parte delle librerie di Web3 sono asincrone perché, in background, la libreria effettua chiamate RPC di JSON al nodo, il quale restituisce il risultato.

Se lavori nel browser, alcuni portafogli iniettano direttamente un'istanza Web3 e dovresti provare a usarla appena possibile, specialmente se prevedi di interagire con l'indirizzo di Ethereum dell'utente per effettuare le transazioni.

Qui riportiamo il frammento che permette di rilevare se è disponibile un portafoglio di MetaMask e, in tal caso, provare ad abilitarlo. In seguito, ti consentirà di leggere il saldo dell'utente e abilitarlo per convalidare le transazioni che vorresti effettuasse sulla blockchain di Ethereum:

1if (window.ethereum != null) {
2  state.web3 = new Web3(window.ethereum)
3  try {
4    // Request account access if needed
5    await window.ethereum.enable()
6    // Acccounts now exposed
7  } catch (error) {
8    // User denied account access...
9  }
10}
11
Mostra tutto
 Copia

Esistono alternative a web3.js, come Ethers.js(opens in a new tab), ma concentreremo tutti i tutorial di JavaScript su web3.js, essendo la libreria ufficiale per interagire con Ethereum nel browser. Nel prossimo tutorial vedremo come ascoltare facilmente i nuovi blocchi in arrivo sulla blockchain e esaminarne il contenuto(opens in a new tab).