В этой статье вы узнаете, как настроить приложение Web3 с помощью Solidity, Hardhat, React и Web3.js библиотека. Хотя наше приложение будет выглядеть простым, оно будет иметь большую ценность. Вы узнаете, как соединить точки приложения Web3. В будущем вы можете использовать его как отправную точку для более сложных проектов.
Примечание. Если вы здесь только ради кода, вы можете взять его с моего GitHub. Кроме того, вы найдете файлы CSS, отсутствующие в статье.
Примечание 2. Чтобы следовать этой статье, должно быть достаточно базовых знаний JavaScript. Также вам понадобятся node.js и npm на вашем компьютере. В противном случае вы не сможете вызывать приведенные выше команды.
Самый удобный способ тестирования приложений Web 3 — запустить локальную цепочку блоков. Это быстрее, чем настоящие сети, и предоставляет трассировку стека Solidity и сообщения об ошибках. Для запуска локальной цепочки блоков мы будем использовать сеть Hardhat.
Давайте погрузимся в наш проект!
Подготовка смарт-контракта.
Воспользуемся образцом контракта от Hardhat.
Чтобы использовать каску для своих проектов, вы должны установить ее с помощью npm
$ npm install hardhat
После этого вы сможете использовать команды каски. Разработчики Hardhat рекомендуют использовать npx hardhat [options]
в своих проектах. Однако сначала мы должны инициализировать проект. Откройте терминал и введите:
$ npx hardhat
Вы должны увидеть что-то вроде этого:
Для простоты мы будем использовать базовый пример проекта. Выберите эту опцию и нажмите Enter. Вам нужно будет выбрать еще несколько параметров:
✔ What do you want to do? · Create a basic sample project ✔ Hardhat project root: - <you can just press enter> ✔ Do you want to add a .gitignore? (Y/n)- <I usually press ‘y’ because it’s going to my github> ✔ Do you want to install this sample project’s dependencies with npm (hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers)? (Y/n)- <press ‘y’ because we’ll need them>
На данный момент у нас есть базовый проект каски с образцом смарт-контракта. Проверьте contracts/Greeter.sol
, чтобы найти его. В scripts/sample-script.js,
есть скрипт для развертывания контракта. Нам понадобятся следующие шаги:
- Скомпилируйте контракт. Для взаимодействия с нашим контрактом из Frontend нам нужны две вещи: ABI контракта и Адрес контракта. Подробнее об этом я писал в этой статье. Чтобы скомпилировать тип контракта в вашем терминале:
$ npx hardhat compile
Это создаст два файла в папке artifacts/contracts/Greeter.sol/
. ABI контракта находится в файле Greeter.sol
. Позже мы будем использовать его в нашем интерфейсе.
- Запустите узел Hardhat. Как я уже объяснял, запускать локальный блокчейн целесообразно. К счастью, Hardhat позволяет нам сделать это с помощью простой команды:
$ npx hardhat node
Вы должны увидеть что-то вроде этого:
По умолчанию он создает локальную цепочку блоков с 20 учетными записями. Если вы прочитаете сообщение, выделенное зеленым цветом, вы найдете местоположение. По умолчанию это порт 8545. Перейдем к следующему шагу.
- Развернуть контракт. Для этого мы будем использовать ранее упомянутый скрипт.
Важно! Откройте новый терминал. Важно, чтобы узел из предыдущего шага оставался работающим.
$ npx hardhat run scripts/sample-script.js — network localhost
Если он работает правильно, вы должны увидеть сообщение в своем терминале:
Greeter deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3
Обратите внимание, что адрес контракта может отличаться. Если вы сохранили наш локальный узел каски работающим, вы должны найти там следующий вывод:
Во второй строке мы видим тот же адрес контракта, что и раньше. У нас есть договор ABI и адрес. Итак, мы готовы перейти к Frontend части!
Построение фронтенда.
Запуск простого приложения React.
Как всегда, мы должны начать с установки. Давайте создадим проект React.
$ npx create-react-app my-project $ cd my-project
Это распространенный способ запуска проектов React. Он устанавливает множество необходимых зависимостей и позволяет нам запускать сценарии React. Кроме того, в src/App.js
это отправная точка нашего приложения. Чтобы запустить приложение, введите в терминале:
$ npm start
Затем откройте http://localhost:3000
в своем браузере, и вы увидите.
Добавление Web3.js в проект.
Чтобы добавить часть Web 3, мы установим библиотеку web3.js.
$ npm install web3
Затем мы должны импортировать его в App.js
вот так.
Исправление импорта Web3.
К сожалению, по состоянию на апрель 2022 года этот импорт не работает. В этом ответе на StackOverflow я нашел два обходных пути. Давайте воспользуемся первым, который требует понижения реагирующих скриптов до 4-й версии. Нам нужно три шага:
- Удалите папку
node_modules
. - В
package.json
обновите строку с реактивными скриптами до"react-scripts”: “4.0.3”
- Снова установите модули узла, набрав
$ npm install
в своем терминале.
Добавление ABI контракта и адреса.
Помните, я говорил вам, что нам нужен ABI контракта и адрес для взаимодействия с ним? Пришло время добавить их в наш проект. Мой любимый способ сделать это — создать utils
в папке src
. Затем я добавляю в него следующие файлы:
-utils/ |- constants.js |- Greeter.json
Greeter.json
— это файл, который мы создали с помощью Hardhat. Итак, из проекта Hardhat мы копируем файл artifacts/contracts/Greeter.sol/Greeter.json
и вставляем его в папку src/utils/
. Затем в constants.js
добавляем:
Круто, у нас есть контрактный ABI и адрес в нашем приложении React. Они нужны нам для создания экземпляра контракта из web3.js. Опять же, адрес контракта исходит из части развертывания.
Создание контракта web3.
На данный момент у нас есть все для создания нового контракта. Давайте обновим верхнюю часть файла App.js
.
Мы разделим процесс на следующие этапы:
- создание экземпляра web3. Написав
new Web("ws://localhost:8545")
мы передаем провайдера. В нашем случае это локальный узел, который мы запустили ранее. Мы хотим подключиться через WebSocket, поэтому пишемws://…
вместоhttp://...
- создание нового экземпляра контракта. Вот тогда мы, наконец, сдаем договор ABI и обращаемся.
Если все правильно, теперь мы сможем взаимодействовать с контрактом, который мы развернули с помощью Hardhat.
Важно! Не забудьте запустить узел Hardhat в консоли. Без него WebSocket не сможет подключиться.
Вызов общедоступных функций просмотра.
Давайте посмотрим на контракт Greeter.
Он имеет две функции:
function greet() public view … {}
Ключевое слово представление имеет решающее значение. Это указывает на то, чтоgreet()
является функцией только для чтения. Это означает, что мы не будем ничего менять в блокчейне.function setGreeting(string memory _greeting) public {}
В отличие от предыдущего примера,setGreeting()
направлен на изменение значений в блокчейне.
Начнем с первой функции. Мы готовим кнопку для вызова функции greet()
нашего смарт-контракта. Для этого мы создаем функцию greetMe()
в JavaScript. Он вызывает функцию greet()
из Solidity и возвращает ее значение. Базовый пример будет выглядеть так:
const greetMe = async () => { const greetMsg = await greeterContract.methods.greet().call(); return greetMsg; }
Как видите, мы используем экземпляр контракта, созданный на предыдущем шаге. Как это выглядит в браузере?
Наше «Приветствуйте меня!» Кнопка вызывает функцию greetMe()
в JavaScript. Затем мы отображаем возвращенное значение. Хотя функция короткая, следует упомянуть две важные вещи:
- это асинхронно. Обратите внимание на обозначения
async
иawait
. Мы должны дождаться ответа от нашего контракта перед выполнением следующей строки кода, - чтобы вызвать функцию контрактов, мы должны использовать имя контракта, ключевое слово
methods
, имя функции и ключевое словоcall()
.
Изменение значений в блокчейне.
Вы уже знаете, как читать данные из блокчейна. Но что, если вы хотите обновить данные, т. е. изменить состояние блокчейна? Наша функция setGreeting()
в Solidity позволяет нам это сделать. Позвольте мне показать вам, как выполнение этой функции выглядит в JavaScript.
await greeterContract.methods.setGreeting(newGreetings).send( { from: ‘0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266’ })
Давайте посмотрим поближе:
- нам нужно ключевое слово
await
, потому что мы должны дождаться ответа от нашего блокчейна, прежде чем двигаться дальше, - меняем переменную
greetings
на значениеnewGreetings
, - мы используем ключевое слово
send()
вместоcall()
из предыдущего примера, - мы передаем адрес вызывающего абонента после ключа
from
. Я захватил первого пользователя с нашего узла Hardhat.
Каждый раз, когда мы меняем состояние блокчейна, мы совершаем транзакцию. Мы должны сообщить другим узлам блокчейна: «Привет, я [адрес] пытаюсь изменить это значение. Надеюсь, вы не возражаете…» Каждая транзакция в блокчейне требует платы за газ.
Хорошо, давайте посмотрим, как работает обновление значений Blockchain в нашем проекте. После внесения необходимых изменений в часть JavaScript файл App.js
выглядит следующим образом.
Позвольте мне разбить новые части:
- мы добавили функцию
updateGreets()
для вызоваsetGreetings()
в наш смарт-контракт, - мы используем два общих хука React:
useState
иuseEffect.
Последний устанавливает начальное приветствие после загрузки страницы. Первый позволяет нам обновлять состояние нашего приложения React. Я призываю вас узнать больше о хуках React.
Хорошо, мы закончили проект. Как это выглядит в браузере?
Последние мысли
Потрясающий! Если вы все еще читаете, вы многому научились! Хотя наш проект не выглядит впечатляющим, он учит, как соединить точки приложения Web 3.
Есть вопросы? Оставьте их в разделе комментариев.
Рекомендации
[2] Документация по React Hooks
Присоединяйтесь к Coinmonks, Каналу Telegram и Каналу Youtube, узнайте о криптотрейдинге и инвестировании