Этот пост является первым в серии постов, в которых я делюсь своим опытом написания простого Dapp с использованием Drizzle и Svelte.
Во время работы в EdgeFund я хотел изучить возможность создания Dapp с использованием новой коллекции библиотек Truffle Suite под названием Drizzle.
Согласно веб-сайту, самый простой способ начать работу с Drizzle - это использовать их исходный проект React, запустив truffle unbox drizzle, но, не имея опыта реагирования, я хотел попробовать разработать Dapp без дополнительных компонентов и библиотек реагирования, просто используя вместо этого лежащая в основе технология измороси.
Для работы с Drizzle, независимо от того, какой интерфейсный фреймворк вы решите использовать для пользовательского интерфейса, вам необходимо настроить свой экземпляр drizzle и подключить его к смарт-контракту, с которым вы хотите работать. Это делается с помощью вариантов мороси.
Я использую наш контракт CoinToss в качестве основы для интерфейса, чтобы у меня было с чем работать. Я упаковал исходный код нашего контракта и скомпилировал файлы .json в пакет npm, который я импортирую вверху и установил, запустив npm install @edgefund/core
Drizzle необходимо знать о контракте, чтобы знать, какие функции и события доступны, а также как получить информацию о контракте при обнаружении любых новых блоков в цепочке блоков. Вы также можете указать в файле параметров, как часто (если вообще) вы хотите, чтобы дождь опрашивал новые блоки, или как часто проверять, вошли ли вы в учетную запись с помощью web3 (библиотека, которая обычно вводится в страницу плагином браузера MetaMask).
После создания объекта drizzleOptions пришло время создать наш магазин Drizzle redux.
Для этого нам нужно убедиться, что у нас установлен пакет drizzle npm.
npm install drizzle --save
Чтобы правильно визуализировать, что делает магазин измороси, я рекомендую загрузить и установить Redux Dev Tools plugin для вашего браузера.
После того как вы создали простую страницу index.html и связали ее со своим JavaScript, вы должны увидеть следующее в своем браузере, при условии, что у вас установлен вышеупомянутый плагин.
Как вы можете видеть на диаграмме выше, определение контракта загружено, и у меня есть доступ ко всем свойствам, определенным в смарт-контракте. У меня также есть доступ к дополнительным свойствам, которые говорят мне о состоянии самого дождя, инициализирован ли он и синхронизируется ли он с блокчейном и (через объект web3), подробности о том, к какой сети я подключен.
Установка магазина мороси и установленных инструментов разработчика redux для браузера - хорошая отправная точка для начала создания вашего Dapp.
В следующем посте я объясню, как взаимодействовать с объектами из хранилища дождя и мороси, чтобы начать визуализацию актуальных данных из вашего смарт-контракта в браузере.
—
Если вы нашли эту статью интересной, пожалуйста, хлопните в ладоши и следуйте за мной на Medium, чтобы увидеть больше подобного контента.
В настоящее время я работаю над EdgeFund, платформой с открытым исходным кодом, которая предлагает децентрализованный общий банкролл на блокчейне. Чтобы узнать больше о EdgeFund, посетите наш сайт или присоединитесь к нашей группе Telegram, чтобы пообщаться с командой и не забудьте подписаться на нас в Twitter!
