Налаштування Web3.js для використання блокчейну Етеріум у JavaScript

У цьому посібнику ми розглянемо, як почати роботу з Web3.js (opens in a new tab) для взаємодії з блокчейном Етеріум. Web3.js можна використовувати як у фронтенді, так і в бекенді для читання даних із блокчейну, здійснення транзакцій і навіть для того, щоб розгортати смарт-контракти.

Перший крок — додати Web3.js до вашого проєкту. Щоб використовувати його на вебсторінці, ви можете імпортувати бібліотеку безпосередньо за допомогою CDN, наприклад JSDeliver.

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

Якщо ви віддаєте перевагу встановленню бібліотеки для використання у вашому бекенді або фронтенд-проєкті, який використовує збірку, ви можете встановити її за допомогою npm:

npm install web3 --save

Потім, щоб імпортувати Web3.js у скрипт Node.js або фронтенд-проєкт Browserify, ви можете використати такий рядок JavaScript:

const Web3 = require("web3")

Тепер, коли ми додали бібліотеку до проєкту, нам потрібно її ініціалізувати. Ваш проєкт повинен мати можливість обмінюватися даними з блокчейном. Більшість бібліотек Етеріум взаємодіють із вузлом через виклики RPC. Щоб ініціювати нашого провайдера Web3, ми створимо екземпляр Web3, передавши як конструктор URL-адресу провайдера. Якщо у вас є вузол або екземпляр ganache, що працює на вашому комп'ютері (opens in a new tab), це виглядатиме так:

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

Якщо ви хочете отримати прямий доступ до розміщеного вузла, ви можете знайти варіанти в розділі вузли як послуга.

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

Щоб перевірити, чи правильно ми налаштували наш екземпляр Web3, ми спробуємо отримати номер останнього блоку за допомогою функції getBlockNumber. Ця функція приймає зворотний виклик (callback) як параметр і повертає номер блоку у вигляді цілого числа.

var Web3 = require("web3")
const web3 = new Web3("https://cloudflare-eth.com")

web3.eth.getBlockNumber(function (error, result) {
  console.log(result)
})

Якщо ви виконаєте цю програму, вона просто виведе номер останнього блоку: вершину блокчейну. Ви також можете використовувати виклики функцій await/async, щоб уникнути вкладеності зворотних викликів у вашому коді:

async function getBlockNumber() {
  const latestBlockNumber = await web3.eth.getBlockNumber()
  console.log(latestBlockNumber)
  return latestBlockNumber
}

getBlockNumber()

Ви можете переглянути всі функції, доступні в екземплярі Web3, в офіційній документації Web3.js (opens in a new tab).

Більшість бібліотек Web3 є асинхронними, оскільки у фоновому режимі бібліотека робить виклики JSON-RPC до вузла, який надсилає результат назад.

Якщо ви працюєте в браузері, деякі гаманці безпосередньо впроваджують екземпляр Web3, і вам слід намагатися використовувати його за можливості, особливо якщо ви плануєте взаємодіяти з адресою Етеріум користувача для здійснення транзакцій.

Ось фрагмент коду, щоб виявити, чи доступний гаманець МетаМаск, і спробувати ввімкнути його, якщо він є. Пізніше це дозволить вам зчитувати баланс користувача та дасть йому змогу підтверджувати транзакції, які ви хотіли б, щоб він здійснив у блокчейні Етеріум:

if (window.ethereum != null) {
  state.web3 = new Web3(window.ethereum)
  try {
    // Запитати доступ до облікового запису за потреби
    await window.ethereum.enable()
    // Облікові записи тепер доступні
  } catch (error) {
    // Користувач відмовив у доступі до облікового запису...
  }
}

Існують альтернативи Web3.js, такі як Ethers.js (opens in a new tab), які також часто використовуються. У наступному посібнику ми розглянемо, як легко відстежувати нові вхідні блоки в блокчейні та бачити, що вони містять (opens in a new tab).