Пошаговое руководство по использованию этой сети разработчиков блокчейна

При разработке проектов Web3 полезно иметь локальную сеть разработчиков блокчейна для тестирования. Ganache — один из самых популярных инструментов для этого в экосистеме Ethereum, и он является частью Truffle. Ganache позволяет настроить локальную цепочку блоков с различными настройками для тщательного тестирования смарт-контрактов перед развертыванием.

Просмотр выходных данных локальной цепочки блоков в терминале поможет вам понять, как ваш проект будет вести себя в реальной среде. Еще полезнее возможность устанавливать выходные данные в переменные для манипулирования некоторым внешним кодом. Некоторые пользователи могут не знать, что вы можете сделать это, запустив Ganache в своем браузере.

В этой статье рассказывается, как запустить Ganache в браузере, и выделяются три замечательные новые функции, упрощающие разработку проектов Web3.

Ганаш в браузере

Запуск локального экземпляра блокчейна для тестирования ваших смарт-контрактов имеет важное значение в процессе разработки Web3. Тестируя таким образом, вы подтверждаете, что все работает правильно, прежде чем использовать службу узла, такую ​​​​как Infura, для развертывания ваших контрактов в тестовой или основной сети. Это сводит к минимуму риск увеличения дневных лимитов и гарантирует, что вам потребуется выполнить развертывание только один раз. Ganache — отличный инструмент, имитирующий сеть Ethereum и позволяющий разработчикам:

Однако многие, кто использует этот инструмент, могут не знать, что, начиная с версии 7.0.0.0, Ganache также может работать в вашем браузере. Запуск в браузере позволяет вам установить выходные данные локального блокчейна в переменные, которые вы затем можете использовать для тестирования своего внешнего кода. Этот визуальный процесс помогает вам понять, как ваши пользователи будут взаимодействовать с вашим проектом, а также позволяет полностью протестировать dApp в автономном режиме (при использовании локального экземпляра).

Сначала запустив Ganache в браузере и настроив реакцию вашего dApp, вы можете легко переключить провайдера на API службы вашего узла, как только все заработает, как задумано. Кроме того, после последнего обновления Ganache (v7.3.2 на момент написания статьи) теперь вы можете разветвить сеть Ethereum при запуске Ganache в браузере. Это позволяет вам взаимодействовать с реальными счетами и контрактами через ваш интерфейсный код.

Проект

В этом разделе будет создан базовый смарт-контракт с использованием Truffle и его расширения VS Code. Затем мы сначала развернем наш контракт в Ganache через командную строку. После этого мы создадим простой интерфейс для использования Ganache в браузере и взаимодействия с нашим развернутым контрактом.

Требования

Для этого проекта мы будем использовать следующее:

Шаг 1 — Установка

Во-первых, мы можем запустить команду node --version в нашем терминале, чтобы убедиться, что NodeJS и NPM правильно установлены на нашей машине.

Далее мы установим Truffle и Ganache, выполнив следующую команду:

npm install -g truffle ganache

Проверка номера версии для Truffle и Ganache с truffle --version и ganache --version соответственно покажет нам, успешно ли были установлены оба инструмента.

Следующий шаг — установить VS Code, затем перейти на вкладку Расширения в редакторе и выполнить поиск Truffle for VS Code.

Мы готовы начать работу над проектом со всем установленным.

Шаг 2 — Настройте проект

С расширением Truffle for VS Code мы можем легко создать новый проект Truffle с помощью палитры команд VS Code. Нажмите ctrl + shift + P в редакторе, чтобы открыть палитру команд, и введите truffle, чтобы увидеть список команд, которые мы можем использовать. Выберите Truffle: New Solidity Project, а затем создайте базовый проект, чтобы создать новый проект в нужной папке.

Это создает инициализированный проект с простой структурой папок и примером кода, который мы можем использовать, если захотим.

Возможность использовать console.log в коде нашего смарт-контракта — еще одна новая функция, недавно доступная для Ganache. Прежде чем мы создадим смарт-контракт для нашего проекта, давайте настроим его, установив необходимый пакет. Перейдите в папку проекта в терминале и введите следующую команду:

npm install @ganache/console.log

Шаг 3 — Напишите смарт-контракт

Смарт-контракт для нашего проекта будет базовым, мы можем пожертвовать немного ETH и запросить баланс.

В папке contracts создайте новый файл и назовите его SimpleContract.sol. Затем заполните его следующим кодом смарт-контракта:

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

Шаг 4 — Развертывание в Ganache

После установки расширения Truffle for VS Code мы можем легко развернуть его, щелкнув правой кнопкой мыши файл смарт-контракта и выбрав «Развернуть контракты». Однако, если мы хотим видеть наши консольные сообщения, нам придется использовать собственный терминал, а не встроенный в VS Code. Это может измениться в будущем, но нам нужно будет создать простой сценарий миграции для выполнения развертывания.

В папке migrations создайте новый скрипт с именем 1_SimpleContract.js и введите следующий код:

const SimpleContract = artifacts.require("SimpleContract");
module.exports = function (deployer) {
  deployer.deploy(SimpleContract);
};

Затем откройте новое окно терминала и запустите Ganache:

ganache

В этом окне терминала мы будем видеть наши консольные сообщения, когда они появятся. Теперь у нас открыто два окна терминала: одно с запущенным Ganache, а другое открыто в папке нашего проекта Truffle.

В окне терминала, которое открыто в расположении нашего проекта Truffle, введите следующую команду, чтобы начать развертывание:

truffle migrate --network development

Если развертывание прошло успешно, мы можем увидеть наше консольное сообщение, напечатанное в терминале:

Большой! Наш контракт действует на нашем локальном экземпляре Ganache! Мы пока оставим Ganache работающим, чтобы мы могли взаимодействовать с нашим контрактом с помощью браузера. Прежде чем мы доберемся до этого, скопируйте contract address из вывода в терминале, где мы набрали команду migrate. Мы будем использовать этот адрес, чтобы указать нашему интерфейсу на наш смарт-контракт.

Шаг 5 — Создайте интерфейс

5а. — Настройка

Для интерфейса этого проекта мы будем использовать React. Перейдите в новую пустую папку и введите:

npx create-react-app ganache-browser-test

Далее мы установим Web3.JS, чтобы легко взаимодействовать с нашим смарт-контрактом. Перейдите в папку нашего нового проекта и установите Web3.JS с помощью этой команды:

cd ganache-browser-test
npm install web3

Более новые версии create-react-app плохо работают с Web3.JS, поэтому нам нужно установить определенную версию React Scripts. Мы можем сделать это с помощью этой команды:

npm install --save-exact [email protected]

Наконец, чтобы использовать Ganache в нашем браузере, мы установим его напрямую как зависимость:

npm install ganache

Кроме того, вы можете добавить ссылку CDN в HTML для доступа к Ganache из браузера:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web/ganache.min.js"></script>

Перед работой над внешним кодом нам нужно создать файл, содержащий ABI нашего контракта для взаимодействия с нашим смарт-контрактом. Мы можем скопировать этот файл прямо из нашего проекта Truffle. Перейдите в папку build/contracts нашего проекта Truffle и скопируйте файл SimpleContract.json.

Затем откройте наш внешний проект в редакторе и создайте новую папку с именем abi. В эту папку вставьте файл SimpleContract.json. Файловая структура нашего интерфейса теперь выглядит так:

5б. — Код внешнего интерфейса

Мы можем начать работать над нашим интерфейсом со всеми настройками. Сначала откройте файл App.js в папке src и замените шаблонный код следующим:

Обязательно измените CONTRACT_ADDRESS на адрес, который мы получили при развертывании нашего смарт-контракта на шаге 4. Кроме того, USER_ADDRESS — это учетная запись, которая будет вызывать функции. Мы можем получить это из списка учетных записей, который отображается при первом запуске нашего экземпляра Ganache в терминале:

Любой из этих адресов учетной записи будет работать.

Прежде чем мы двинемся дальше, давайте на секунду пройдемся по написанному нами коду:

  • Мы импортируем наши зависимости и файл SimpleContract JSON.
  • Установите переменные ganache и Web3.
  • Создайте пустую переменную options, которой мы инициализируем наш экземпляр provider.
  • Примечание. В этой переменной options мы могли бы установить любой из параметров, который мы хотели бы включить в наш локальный экземпляр блокчейна, например, разветвление Mainnet или Goerli, при запуске Ganache строго в браузере (без работает в нашем другом окне терминала).
  • Инициализируйте наш объект web3, используя наш localhost URL и порт 8545, где уже запущен наш экземпляр Ganache.
  • Примечание. На этом этапе вы можете запускать Ganache строго в браузере, используя переменную provider вместо localhost. В данном случае мы используем localhost, так как хотим взаимодействовать с нашим уже развернутым смарт-контрактом и видеть наши сообщения console.log в выводе терминала.
  • Установите наши переменные CONTRACT_ADDRESS и USER_ADDRESS.
  • Создайте экземпляр контракта, который мы можем использовать для вызова наших функций в коде App.
  • Создайте переменную состояния contractBalance React и ее метод set.
  • Определите наши функции donate и getBalance.
  • Наконец, мы возвращаем html для нашего внешнего интерфейса.

5с. — Запустить проект

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

Когда мы тестируем наш проект, мы видим результаты и наши сообщения console.log, отображаемые в окне терминала, на котором работает Ganache, а баланс ETH на нашем интерфейсе успешно обновляется с новым балансом.

Шаг 6 — Форк Goerli или Mainnet с Ganache в браузере

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

Во-первых, переменная options должна указать, какую сеть мы хотим разветвить:

const options = { fork: { network: 'goerli' } };

Or:

const options = { fork: { network: 'mainnet' } };

Затем нам нужно обновить объявление нашей переменной web3:

const web3 = new Web3(options);

Наконец, нам нужно убедиться, что мы обновляем CONTRACT_ADDRESS нашим адресом в любой сети, которую мы разветвляем. Нам также необходимо обновить USER_ADDRESS до адреса учетной записи в той же сети, на которой достаточно средств для пожертвования нашему контракту.

При разветвлении основной сети этот раздел кода может выглядеть примерно так:

const options = { fork: { network: 'mainnet' } };
const provider = ganache.provider(options);
const web3 = new Web3(provider);
const CONTRACT_ADDRESS = '0x692586eaC70114C8F4714D89E7f72FAAbaeE0Cd7'  
const USER_ADDRESS = web3.utils.toChecksumAddress('0xCe7A99Bba7018fa455E6eD5CF88a7F26010F1E8F');

И с этим мы могли протестировать наш проект с разветвленной версией основной сети, используя Ganache в нашем браузере.

Заключение

Тестирование проектов путем создания интерфейса помогает визуализировать, как работает ваше dApp, и дает вам лучшее представление о том, как оно будет работать для пользователей после входа в основную сеть. Запуск в браузере во время тестирования внешнего кода — это одна из функций, которая делает Ganache таким мощным инструментом в вашем наборе инструментов для разработки. Для получения дополнительной информации о работе с Ganache или участии в проекте ознакомьтесь с их GitHub или документацией.