Как автоматизировать утомительные задачи по настройке, чтобы сосредоточиться исключительно на функциональности
Что такое трюфельный люкс?
Truffle - самый популярный в мире пакет для разработки блокчейнов. Своими словами:
«Среда разработки мирового класса, среда тестирования и конвейер активов для блокчейнов с использованием виртуальной машины Ethereum (EVM), призванные облегчить жизнь разработчикам».
Если вы не знаете, как начать писать полнофункциональные децентрализованные приложения Ethereum (DApps), подумайте об использовании Truffle Suite.
Коробки для трюфелей
Truffle Boxes - это шаблонные проекты, которые поставляются предварительно упакованными с набором установленных для вас зависимостей. Это избавляет от необходимости запускать пустой проект Truffle с нуля, а также от необходимости устанавливать и настраивать собственный.
Например, если вам нравится Vue.js и вы хотите использовать его в своем проекте, вы можете распаковать Vue.js Truffle Box.
Мне больше всего нравится React Box. Практически каждый проект, который я начинаю, начинается с распаковки именно этого ящика.
Моя проблема в том, что я почти всегда использую Redux и Bootstrap, которых нет в комплекте. Я устанавливаю их и каждый раз выполняю одну и ту же структуру папок.
Через какое-то время эта игра-покер стала однообразной, и, как любой достойный разработчик, я увидел возможность ее автоматизировать. Итак, я создал Коробку для Трюфелей! Вот как.
Создание коробки
У Truffle есть хорошая документация о том, как создать Truffle Box. Каждый Box, по сути, вращается вокруг truffle-box.json файла конфигурации. Этот файл определяет, какие команды следует запустить в момент распаковки, чтобы он был готов к работе.
Поскольку я так привык начинать с React Truffle Box, я считал это хорошей отправной точкой. Код доступен на GitHub, поэтому я разветвил проект и приступил к работе, выполняя ту же работу, что и каждый раз, когда начинаю новый проект.
Расширение React Box
Прежде всего, я объясню структуру папок, которая поставляется с React Box.
Сверху вниз:
client/- Где живет внешний код. Все наши скомпилированные контракты и компоненты React находятся здесь.contracts/- Здесь живет код для смарт-контрактов.migrations/- Здесь размещены сценарии развертывания для переноса ваших смарт-контрактов в блокчейн.test/- Здесь находятся файлы для тестирования ваших смарт-контрактов..gitattributes— Содержит конфигурацию для Git (не беспокойтесь об этом).LICENSE- Коробочная лицензия (опять же, не беспокойтесь об этом).truffle-config.js- Конфигурация для проекта. Такие вещи, как версия компилятора Solidity и подробности о сети, находятся здесь.
Я никогда не меняю структуру корневой папки, поэтому она соответствует новому окну. В папке client/ я внес изменения.
Добавление зависимостей
На рисунке 2 показано, как выглядит папка client/ в React Box после компиляции контрактов. (В нашем truffle-config.js файле указано, что скомпилированные смарт-контракты должны храниться в client/src/contracts/.)
Существующие зависимости, которые поставляются с Box, - это react, react-dom, react-scripts и web3. Он прост, что делает Box гибким.
Как я упоминал ранее, я всегда добавляю Redux и Bootstrap, поэтому после добавления их и некоторых других на рисунке 3 показано, как выглядел package.json.
Новые зависимости: bootstrap и react-bootstrap для внешнего оформления; redux, redux-logger и react-redux для интеграции Redux; и lodash и reselect для селекторов (подробнее об этом позже).
Папка Redux
Я всегда помещаю свой код Redux в папку, чтобы хранить его отдельно от файлов компонентов.
При кодировании Redux-стороны любого DApp я следую парадигме IARS для структурирования кода Redux, который состоит из четырех файлов: interactions.js, actions.js, reducers.js и selectors.js.
После их добавления структура папок выглядела так:
Вы заметите, что есть два файла, о которых я еще не упомянул: configure.js, который содержит некоторые стандартные конфигурации для работы Redux, и subscriptions.js, к которому мы скоро вернемся.
Загрузите блокчейн
Хороший Truffle Box должен содержать достаточно кода для запуска из коробки (простите за каламбур). Это позволяет разработчику повозиться с кодом и проверить, какие изменения в DApp.
Например, React Box загружает блокчейн при загрузке страницы, затем извлекает данные из контракта SimpleStorage и отображает их на странице.
Проблема с этим рабочим процессом заключается в том, что если MetaMask не готов для DApp (пользователь вошел в систему и находится в правильной сети), это приведет к ошибке, которая может напугать новых разработчиков.
Вместо этого я хотел, чтобы DApp загружал данные блокчейна при нажатии кнопки Подключиться на странице. Эта кнопка вызывает взаимодействие, которое загружает web3 и данные блокчейна.
Затем он отправлял действие, перехваченное reducer, который сохранял данные в хранилище Redux. Затем компонент может использовать селектор для извлечения данных из хранилища.
Файл getWeb3.js содержит слушателя, который ожидает загрузки окна перед получением web3. Я удалил это, чтобы его можно было вызвать взаимодействием, а не событием окна.
Затем я удалил все из App.js файла компонента и начал переписывать свой собственный. Все, что мне было нужно, это кнопка и несколько ярлыков для отображения информации о web3 и блокчейне после ее загрузки.
На рисунках 5, 6, 7 и 8 показана последовательность кода, выполняемого при нажатии кнопки подключения. Как показано на рисунке 8, редуктор сохраняет экземпляр web3 в хранилище Redux, как показано на рисунке 9.
Контракт на загрузку
Поскольку я хотел как можно больше использовать существующий код, предоставляемый React Box, я сохранил SimpleStorage смарт-контракт.
DApp необходимо загрузить развернутый смарт-контракт так же, как загружал блокчейн для отображения данных из него. В функции connectBlockchain() я добавил следующие строки:
Затем я добавил следующие взаимодействие, действие и reducer. То же самое касается загрузки текущей учетной записи, используемой MetaMask для взаимодействия с DApp.
Использование селекторов
Пока все подключено правильно, компоненты будут использовать селекторы для извлечения данных из хранилища Redux и отображения на странице.
Selectors.js - это то место, где используются зависимости lodash и reselect.
Подпишитесь на изменение аккаунта
И последнее, что я хотел добавить в коробку, прежде чем закончить. MetaMask больше не поддерживает перезагрузку учетной записи при изменении учетной записи, что означает, что DApps должны прослушивать, когда пользователь меняет ее.
На самом деле это никогда не реализуется по умолчанию, и может потребоваться много времени, чтобы копаться в документации (особенно для новых разработчиков), чтобы найти, как решить эту проблему.
Файл subscriptions.js, о котором я упоминал ранее, - это то место, где живет прослушивание событий.
Добавив эту небольшую функцию, данные магазина Redux будут перезагружаться каждый раз, когда пользователь меняет свою активную учетную запись.
Финальная коробка для трюфелей
После добавления этих функций страница выглядит так при первоначальной распаковке, выполнении миграции и запуске клиента.
В видео, показанном на рисунке 13, DApp подключается к блокчейну при нажатии кнопки и загружает информацию об учетной записи и стоимость из контракта.
Когда учетная запись изменяется в MetaMask, учетная запись, отображаемая на экране, обновляется посредством подписки в файле subscribers.js и шаблона IARS. Последние несколько секунд показывают данные, хранящиеся в хранилище Redux.
Я думаю, что этот Box отлично справляется с настройкой каркаса, необходимого, чтобы помочь разработчикам быстро начать кодирование новых функций с помощью React, Redux и Bootstrap 4.
Если вы хотите попробовать это самостоятельно, следуйте приведенным ниже инструкциям по установке.
Инструкция по установке
Сначала (при условии, что у вас установлен Truffle) убедитесь, что вы находитесь в новом и пустом каталоге, затем выполните команду unbox:
truffle unbox alexroan/react-redux-bootstrap-box
Настройте свой truffle-config.js файл для подключения к локальной сети разработки, затем запустите следующее:
truffle migrate
Чтобы запустить интерфейсное приложение, cd в папку client/ и начните использовать следующие команды:
cd client/ npm run start
Репо
Полный репозиторий с подробными инструкциями по установке и работе находится на GitHub.
Если у вас есть какие-либо улучшения или предложения, отправьте вопрос или запрос на включение на GitHub.
Спасибо за прочтение!
Дальнейшее чтение
Если вас интересует разработка блокчейнов, я пишу учебные пособия, пошаговые руководства, подсказки и советы по началу работы и созданию портфолио. Ознакомьтесь с некоторыми из этих ресурсов:
