Как взаимодействовать со смарт-контрактами с помощью JavaScript

Смарт-контракты являются основными строительными блоками для приложений Web3. Для включения функций в Web3-приложении важно, чтобы вы могли удобно взаимодействовать с функциями, указанными в смарт-контракте. Вы можете использовать популярный язык, такой как JavaScript, и известную библиотеку Web3.js, чтобы установить эту связь.

Что такое библиотека Web3.js?

Web3.js — это библиотека JavaScript, которая предоставляет интерфейс для блокчейна Ethereum. Он упрощает процесс создания децентрализованных приложений (DApps), предоставляя методы и инструменты для подключения к узлам Ethereum, отправки транзакций, чтения данных смарт-контрактов и обработки событий. подать в суд.

Web3.js объединяет технологию блокчейна с традиционной разработкой, позволяя создавать безопасные и децентрализованные приложения, используя знакомый синтаксис и функции JavaScript.

Как импортировать Web3.js в проект JavaScript

Чтобы использовать Web3.js в проекте Node, сначала необходимо установить библиотеку как зависимость проекта.

Установите библиотеку, выполнив следующую команду внутри проекта:

npm установить web3 hoặc yarn добавить web3

После установки Web3.js теперь вы можете импортировать библиотеку в свой проект Node как модуль ES:

const Web3 = требуется(‘web3’);

Взаимодействие с развернутым смарт-контрактом

Чтобы проиллюстрировать, как вы можете взаимодействовать со смарт-контрактами, развернутыми в сети Ethereum, с помощью Web3.js, вы создадите веб-приложение, которое работает с развернутым смарт-контрактом. Целью веб-приложения будет простой бюллетень для голосования, в котором кошелек может голосовать за кандидата и записывать эти голоса.

Для начала создайте новый каталог для своего проекта и инициализируйте его как проект Node.js:

инициализация нпм

Установите Web3.js как зависимость и создайте простые файлы index.html и styles.css в корневом каталоге проекта.

Введите следующий код в файл index.html:

Приложение для голосования Кандидат A Голосовать 0 голосов Кандидат B Голосовать 0 голосов Кандидат C Голосовать 0 голосов

Внутри файла styles.css введите следующий код:

/* styles.css */ body { font-family: Arial, sans-serif; выравнивание текста: по центру; } h1 { margin-top: 30px; } .candidates { display: flex; выравнивание содержимого: по центру; поле сверху: 50 пикселей; } .candidate { поле: 20px; } .name { вес шрифта: полужирный; } .vote-btn { padding: 10px 20px; цвет фона: #4CAF50; белый цвет; граница: нет; радиус границы: 4px; курсор: указатель; } .vote-count { margin-top: 5px; }

Ниже приведен получившийся интерфейс:

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

Remix IDE предоставляет простой способ написания, развертывания и тестирования смарт-контрактов. Вы будете использовать Remix для развертывания контрактов в сети Ethereum.

Перейдите на remix.ethereum.org и создайте новый файл в папке с контрактами. Вы можете назвать файл test_contract.sol .

Расширение .sol говорит, что это файл Solidity — один из самых популярных языков для написания современных смарт-контрактов.

Внутри этого файла напишите и скомпилируйте код Solidity:

// SPDX-License-Identifier: прагма MIT Solidity ^0.8.0; контракт Голосование { сопоставление (строка => uint256) private voiceCounts; функция голосования (кандидат в строковую память) public { voiceCounts (кандидат) ++; }; Функция getVoteCount (строковый кандидат в память) возвращает публичное представление (uint256) { return voiceCounts (кандидат); }; };

Когда Remix компилирует код Solidity, он также создает ABI (бинарный интерфейс приложения) в формате JSON. ABI определяет интерфейс между смарт-контрактом и клиентским приложением.

В нем будет указано следующее:

1. Имя и тип функции, событие, предоставляемое смарт-контрактом.
2. Порядок аргументов для каждой функции.
3. Возвращаемое значение каждого индиго.
4. Формат данных каждого события.

Чтобы получить ABI, скопируйте его из Remix IDE. Создайте файл contract.abi.json в контракте в корне проекта и вставьте ABI внутрь файла.

JavaScript может очень просто взаимодействовать со смарт-контрактами, используемыми в децентрализованных приложениях. Просто следуйте инструкциям выше, и у вас все получится!