Configurați web3.js pentru a utiliza blockchain-ul Ethereum în JavaScript

În acest tutorial vom învăța cum să începem folosirea web3.js(opens in a new tab) pentru a interacționa cu blockchain-ul Ethereum. Web3.js poate fi folosit atât în frontend-uri, cât și în backend-uri pentru a citi date din blockchain sau pentru a face tranzacții și chiar pentru a implementa contracte inteligente.

Prima etapă este să includeți web3.js în proiectul dvs. Pentru a-l utiliza într-o pagină web, puteți importa biblioteca direct folosind un CDN (content delivery network) cum ar fi „JSDeliver”.

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

Dacă preferați să instalați biblioteca pentru a o folosi în backend sau într-un proiect frontend care folosește compilări (build), o puteți face folosind „npm”:

npm install web3 --save

Then to import Web3.js into a Node.js script or Browserify frontend project, you can use the following line of JavaScript:

1const Web3 = require("web3")
 Copiați

Acum că am inclus biblioteca în proiect, trebuie să o inițializăm. Your project needs to be able to communicate with the blockchain. Majoritatea bibliotecilor Ethereum comunică prin apeluri RPC cu un nod. To initiate our Web3 provider, we’ll instantiate a Web3 instance passing as the constructor the URL of the provider. Dacă aveți un nod sau o instanță „ganache” care rulează pe computerul dvs.(opens in a new tab), va arăta astfel:

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

If you’d like to directly access a hosted node you can use Infura or the free ones provided by Cloudflare(opens in a new tab):

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

To test that we correctly configured our Web3 instance, we’ll try to retrieve the latest block number using the getBlockNumber function. This function accepts a callback as a parameter and returns the block number as an integer.

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

Dacă executați acest program, acesta va imprima pur și simplu ultimul număr de bloc: vârful blockchain-ului. You can also use await/async function calls to avoid nesting callbacks in your code:

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

You can see all the functions available on the Web3 instance in the official web3.js documentation(opens in a new tab).

Majoritatea bibliotecilor Web3 sunt asincrone, deoarece în fundal biblioteca face apeluri JSON RPC către nodul care trimite înapoi rezultatul.

If you are working in the browser, some wallets directly inject a Web3 instance and you should try to use it whenever possible especially if you plan to interact with the user’s Ethereum address to make transactions.

Here is the snippet to detect if a MetaMask wallet is available and try to enable it if it is. Vă va permite ulterior să citiți soldul utilizatorului, iar acestuia să valideze tranzacțiile pe care doriți să le efectueze pe blockchain-ul 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    // Accounts now exposed
7  } catch (error) {
8    // User denied account access...
9  }
10}
Afișează tot
 Copiați

Există și alternative la utilizarea web3.js, cum ar fi Ethers.js(opens in a new tab) dar noi ne vom axa toate tutorialele JavaScript pe web3.js, întrucât este biblioteca oficială pentru a interacționa cu Ethereum în browser. În următorul tutorial vom afla cum să ascultăm cu ușurință noile blocuri primite pe blockchain și să vedem ce conțin acestea(opens in a new tab).