Вы когда-нибудь хотели взаимодействовать с узлами Ethereum через HTTP или WebSocket? Что ж, с библиотекой web3.js вы можете! 🤯

В этом руководстве мы рассмотрим, что такое Web3.js, для чего он используется, как он используется и другие связанные детали, так что без дальнейших проволочек давайте сразу приступим!🚀

Обзор Web3.js

В процессе разработки децентрализованных приложений необходимо выполнить два требования:

  1. Разработка смарт-контрактов
  2. Взаимодействие со смарт-контрактами с использованием клиента JavaScript (где в основном используется web3.js)

Web3.js соответствует второй части требований, перечисленных выше. Это набор библиотек, которые позволяют взаимодействовать с узлами Ethereum. Некоторые из этих взаимодействий включают чтение, запись и создание смарт-контрактов, передачу эфира между учетными записями, получение учетных записей пользователей. По сути, Web3.js — это просто способ взаимодействия со смарт-контрактами.

Web3.js в архитектуре децентрализованных приложений

Вот информативная диаграмма, показывающая архитектуру децентрализованного приложения и место в нем web3.js:

Как вы видите на диаграмме выше, web3.js является частью внешнего приложения и содержится внутри него. Фронтенд-приложение может быть создано с использованием любого популярного фреймворка, такого как Vue.js, React.js, Angular.js, Svelte.js и т. д.…

Узел Ethereum, показанный в приложении, скорее всего, мог быть экземпляром Ganache, если мы говорим о средах разработки. Ganache — персональный блокчейн для быстрой разработки распределенных приложений Ethereum (нажмите здесь, чтобы узнать больше о Ganache на их официальном сайте)

Экземпляры смарт-контрактов, показанные на диаграмме, скорее всего, написаны на Solidity из-за его способности предоставлять ABI (двоичный интерфейс приложения) и из-за того, что он поддерживает сложные типы данных и переменные-члены. Если вы не знали, Solidity — это объектно-ориентированный язык программирования, специально разработанный для написания смарт-контрактов (нажмите здесь, чтобы посетить его официальную страницу документации)

Web3.js в действии

Теперь давайте посмотрим на простую демонстрацию того, как работает web3.js!

Чтобы получить смарт-контракт с помощью web3.js, нам нужен ABI. ABI — это тип файла JSON, который определяет, что может делать смарт-контракт, например, все функции и переменные, которые он имеет. Вот пример ABI:

[{
	"constant": true,
	"inputs": [],
	"name": "mintingFinished",
	"outputs": [{
		"name": "",
		"type": "bool"
	}],
	"payable": false,
	"type": "function"
}, {
	"constant": true,
	"inputs": [],
	"name": "name",
	"outputs": [{
		"name": "",
		"type": "string"
	}],
	"payable": false,
	"type": "function"
}, {
	"constant": false,
	"inputs": [{
		"name": "_spender",
		"type": "address"
	}, {
		"name": "_value",
		"type": "uint256"
	}],
	"name": "approve",
	"outputs": [],
	"payable": false,
	"type": "function"
},
...
]

Нам также необходимо знать адрес смарт-контракта, чтобы web3.js мог взаимодействовать с указанным смарт-контрактом.

Обратите внимание, что все, что подключено к сети Ethereum, имеет адрес. Это означает, что у всех пользователей, включая вас, есть собственный уникальный адрес, представляющий вашу учетную запись. Смарт-контракты не являются исключением, у них тоже есть свой адрес.

По сути, web3.js подключается к указанной сети Ethereum и считывает смарт-контракты, развернутые в этой сети Ethereum. Если использовать аналогию, относящуюся к веб-разработке: использование web3.js для взаимодействия с сетями и узлами Ethereum — это аналогичные веб-клиенты, которые взаимодействуют с серверными REST API. Следовательно, блокчейн Ethereum будет выступать в качестве нашего бэкэнда, если мы будем думать с точки зрения дизайна веб-приложений.

Вот простой пример использования Web3.js:

const Web3 = require('web3')
const RPC_URL = 'http://127.0.0.1:7545'
const web3 = new Web3(RPC_URL)
const address = '<YOUR_METAMASK_ACCOUNT_ADDRESS_HERE>' 
web3.eth.getBalance(address, (err, wei) => { balance = web3.utils.fromWei(wei, 'ether') })

Выражение require('web3') импортирует Web3.js в переменную Web3. Переменной RPC_URL нужен адрес URL-адреса RPC. URL-адрес RPC — это URL-адрес, который необходим для взаимодействия с API-интерфейсами на основе JSON RPC, к которым относятся все сети Ethereum. Если вы используете MetaMask в качестве своего крипто-кошелька, просто нажмите кнопку «Настройки» -> «Сети», затем нажмите на сеть Ethereum, которую вы используете, чтобы найти ее URL-адрес RPC, например:

Затем вам нужно будет скопировать и вставить уникальный адрес вашей учетной записи в качестве значения переменной address. Если вы используете MetaMask, этот адрес можно найти на странице панели управления учетной записью. Наконец, метод web3.eth.getBalance() используется для связи с блокчейном и получения баланса блока, которому назначен адрес.

Заключение

Ну, вот и все для этого сообщения в блоге! Надеюсь, теперь вы лучше понимаете, что такое web3.js и как его использовать🚀

Спасибо, что следите за этой записью в блоге. Если у вас есть какие-либо вопросы или проблемы, пожалуйста, не стесняйтесь оставлять комментарии в разделе комментариев, и я свяжусь с вами, когда найду время.

Если вы нашли эту статью полезной, поделитесь ею и обязательно подпишитесь на меня в Twitter и GitHub, свяжитесь со мной в LinkedIn и подпишитесь на мой канал YouTube.