В этом руководстве вы шаг за шагом узнаете, как создать децентрализованный арт-рынок для блокчейна Ethereum с использованием мощной платформы 0xcert, чтобы вы могли научиться создавать уникальные активы ERC-721, идентифицируемые токенами.
В этом 10-минутном руководстве мы рассмотрим следующие темы:
- Краткое описание токенов ERC-721
- Что такое 0xcert? Что я могу с этим сделать?
- Почему я должен волноваться, как это может мне помочь?
- Плюсы и минусы 0xcert
- Создание арт-рынка на блокчейне Ethereum
- Настройка приложения React.js
- Создание пользовательского интерфейса React.js
- Использование 0xcert для генерации токенов ERC-721
1. Краткое описание токенов ERC-721
Я считаю, что вам важно понимать, что мы подразумеваем под токеном ERC-721, чтобы понять, что 0xcert предоставляет вам как разработчику, чтобы вы могли извлечь выгоду из их протокола. С технической точки зрения смарт-контракт ERC-721 должен реализовывать следующие функции:
balanceOf(address _owner): подсчитывает количество токенов, которыми владеет адрес.ownerOf(uint256 _tokenId): возвращает владельца определенного идентификатора токена.safeTransferFrom(address _from, address _to, uint256 _tokenId, bytes _data): для передачи токена другому пользователю с учетом адресов, идентификатора токена и необязательного параметра данных. Это не сработает, если вы отправите контракт, в котором не реализованы функции приема ERC-721.transferFrom(address _from, address _to, uint256 _tokenId): для передачи токенов на другой адрес, не проверяя, реализован ли в контракте ERC-721 или нет.approve(address _approved, uint256 _tokenId): позволяет другому адресу управлять определенным токеном.setApprovalForAll(address _operator, bool _approved): включает или отключает внешний адрес для управления всеми вашими токенами.getApproved(uint256 _tokenId): возвращает утвержденный адрес для одного токена.isApprovedForAll(address _owner, address _operator): возвращается, если адрес может управлять токенами другого адреса.supportsInterface(bytes4 interfaceId): возвращает истину, если контракт реализует определенный интерфейс.
ERC-721 по сути такой же, как ERC20, но для отдельных активов с функциями передачи и утверждения.
Для получения дополнительной информации обратитесь к официальной документации ERC-721: https://github.com/ethereum/EIPs/blob/master/EIPS/eip-721.md
2. Что такое 0xcert? Что я могу с этим сделать?
0xcert (0xcert.org) - это набор библиотек javascript и смарт-контрактов, который предоставляет инструменты для создания децентрализованных приложений, которые работают с цифровыми активами, такими как сертификаты, искусство, предметы коллекционирования и скины для игр и для таких ценностей, как токены ERC20. Активы означают невзаимозаменяемые токены (NFT), соответствующие стандарту ERC-721.
Невзаимозаменяемые токены - это те, которые представляют собой какой-то цифровой элемент с его свойствами и значениями, а не классический токен ERC20, который представляет только тип криптовалюты.
Каждый токен ERC-721 уникален и отличим, поэтому вы можете доказать право собственности на определенный объект в сети, что отлично подходит для всех видов реальных и цифровых активов, таких как дома, карты и даже ссуды. Таким образом, 1 токен ERC-721 представляет собой 1 уникальный актив.
3. Почему я должен волноваться, как это может мне помочь?
Прежде всего, 0xcert framework является бесплатным и с открытым исходным кодом, что является весьма позитивным способом предоставления ценности разработчикам, которые хотят создавать приложения ERC-721, поскольку вы можете быть уверены, что выиграли » За их качественный код не нужно платить.
Их посылка проста:
Увеличить внедрение невзаимозаменяемых токенов, потому что их сложно реализовать, учитывая их сложность и потому, что нам не хватает стандартов, позволяющих приложениям взаимодействовать друг с другом, чтобы разработчики могли работать быстрее, создавая dApps, которые взаимодействуют друг с другом как децентрализованные обмен, но с активами.
Мало того, они создают инструменты, которые дополнительно улучшают протокол цифровых активов, чтобы исправить некоторые из его проблем, таких как ограниченные параллельные передачи токенов, потому что прямо сейчас вы можете отправить только 1 актив другому человеку одновременно, вы не можете легко обработать много переводов. быстро.
Вот почему они создают библиотеки Javascript и смарт-контрактов со своим API, чтобы помочь разработчикам создавать эти новые типы токенов, что приведет к более широкому внедрению полезной технологии блокчейн для решения реальных проблем.
Подробнее об этом можно узнать в официальной документации: docs.0xcert.org
4. Плюсы и минусы 0xcert
Что хорошего в этом проекте?
- Документация великолепна, они проведут вас через все шаги, объясняя концепции с самых основ, чтобы каждый мог их понять. Хотя он ограничен по содержанию.
- Они улучшают технологию, лежащую в основе ERC-721, с помощью своих собственных систем, чтобы работать с крупномасштабными децентрализованными приложениями.
- Размер их пакетов npm значительно оптимизирован для интерфейсной разработки, поскольку они уделили особое внимание сжатию и минимизации своего кода в максимально возможной степени для оптимальной эффективности.
Что можно улучшить в 0xcert?
- Учебные пособия должны быть более полными с большим количеством примеров, объясняющих обоснование каждого действия и реальных реализаций всей системы.
- Их смарт-контракты должны быть объяснены, чтобы помочь пользователям понять, как они работают вместе и где они вписываются в систему.
5. Создание арт-рынка на блокчейне Ethereum.
Рынок искусства - один из лучших вариантов использования невзаимозаменяемых токенов, учитывая, что мы можем идентифицировать каждую уникальную часть с помощью доказуемого безопасного номера, который также помогает отслеживать изменения в отношении того, кто владел им в прошлом. Отлично подходит для того, чтобы убедиться, что изделие попало в надежные руки.
Вот почему вы узнаете, как создать рынок цифрового искусства для продажи произведений искусства в цифровом формате, таких как те, которые вы найдете на DeviantArt и dribble. Мы начнем с настройки проекта в react.js, затем пользовательского интерфейса и, наконец, реализуем платформу для создания всего нашего приложения ERC-721.
6. Настройка приложения React.js
В этом проекте мы будем использовать реакцию, потому что это мощная технология для управления приложениями после их настройки. Начнем с настройки всего необходимого для правильного использования React.
Сначала создайте новый проект с именем art-marketplace. Внутри запустите команду npm init -y, чтобы настроить node.js, чтобы вы могли устанавливать пакеты узлов. Установите следующие пакеты:
npm i -S @0xcert/cert @0xcert/conventions @0xcert/ethereum-asset-ledger @0xcert/ethereum-metamask-provider @babel/core @babel/preset-env @babel/preset-react babel-polyfill babel-loader css-loader html-loader html-webpack-plugin react react-dom style-loader webpack webpack-cli
Эта огромная строка кода установит требуемые зависимости 0xcert, babel, webpack и react.
Затем создайте 2 папки: dist/ и src/. Исходная папка будет содержать несжатый код реакции, а папка распространения будет содержать файлы, которые будут отправлены вашим пользователям.
Теперь создайте webpack.config.js файл для настройки компилятора, который будет генерировать наш код распространения. Вот как это выглядит:
По сути, мы настраиваем ввод, вывод, загрузчики для css, html и javascript.
Внутри папки src/ создайте index.ejs файл, содержащий эту базовую структуру html:
HtmlWebpackPlugin - это плагин, который мы установили в самом начале. Теперь вы будете видеть изменения каждый раз при компиляции веб-пакета без необходимости очищать кеш, поскольку будет создан новый файл html.
Затем создайте 2 пустых файла index.js и index.css, которые мы будем использовать в следующем разделе со всем кодом нашего приложения.
7. Создание пользовательского интерфейса React.js
В этом разделе мы напишем весь код для разработки нашего приложения 0xcert react, которое создаст рынок произведений искусства, на котором вы сможете создавать уникальные произведения искусства. Сначала настройте структуру, обычно используемую во многих реактивных приложениях, внутри index.js:
Затем создайте файл конфигурации babel, который необходим для того, чтобы веб-пакет знал, как обрабатывать эти типы файлов. Создайте файл с именем .babelrc и поместите его содержимое внутрь:
Это правильно скомпилирует ваши файлы. Чтобы увидеть свое приложение, соберите свой код, запустив webpack -d в корневой папке проекта и настройте статический веб-сервер с http-server dist/. Если у вас его нет, вы можете легко установить его с помощью npm i -g http-server
Это сгенерирует для вас статический сервер, который вы можете открыть по адресу localhost:8080. На веб-сайте вы увидите сообщение «Проект настроен». это именно то, что мы закодировали в файле реакции.
Теперь нам нужно добавить несколько кнопок и информацию, чтобы помочь людям понять, что происходит. Измените функцию рендеринга на следующее:
Как видите, я добавил тег h1 с абзацем, чтобы четко описать проект, затем мы добавили контейнер, который будет содержать все наши произведения искусства, и пару кнопок для развертывания и обновления вашей коллекции. Посмотрите на изменения, скомпилировав с webpack -d и снова запустив сервер.
Если вам надоело постоянно перекомпоновывать код, вы можете запустить webpack как службу с помощью команды webpack -w -d, где флаг -w означает смотреть, чтобы пакет обновлялся каждый раз, когда вы сохраняете некоторые изменения в своих файлах. Флаг -d означает разработку, которая не сводит ваш код к минимуму для улучшения сообщений об ошибках.
После завершения вашего приложения используйте флаг -p вместо -d, что означает повышение скорости работы и уменьшение размера пакета. Улучшите внешний вид проекта с помощью CSS:
Чтобы это выглядело так:
Теперь, когда у вас есть дизайн, давайте перейдем к добавлению функциональности 0xcert для создания ресурсов и взаимодействия с ними.
8. Использование 0xcert для генерации токенов ERC-721.
Очень интересно то, как 0xcert генерирует ERC-721. Каждый токен отсортирован по активам, реестрам активов и чертежам. Процесс идет следующим образом:
- Определите схему, которая содержит информацию, описывающую объект. Думайте о книге активов как о коробке с игрушками, о каждом активе как о игрушке, а о схеме как о тексте, описывающем, что находится внутри этой коробки. Схема будет определять название каждого объекта, описание и любую другую функцию, которую вы хотите добавить. Каждая схема имеет разные обязательные свойства. Например, если вы используете схему 88 для определения своих активов, вы должны установить имя, описание и изображение для каждого токена. Затем вы можете добавить дополнительные свойства, например возраст или цвет. В этой схеме 88 вы также должны использовать свойство
$schema, чтобы другие понимали, что вы следуете этой спецификации. - Разверните бухгалтерскую книгу, которая будет содержать 1 тип активов. В бухгалтерской книге содержится 1 тип актива с его уникальными свойствами, например: книга активов гостиница содержит 30 отелей с такими же свойствами, как количество номеров. Журнал активов квартир содержит 100 различных квартир, а реестр активов пентхаусов содержит 20 различных пентхаусов. Мы создаем разные версии домов в каждой книге, в то время как каждая книга содержит идентичные копии.
- Создайте новый актив внутри развернутой бухгалтерской книги с уникальным идентификатором. Если вы попытаетесь развернуть этот актив еще раз, вы получите сообщение об ошибке. Актив связан с выбранной вами учетной записью, как правило, с вами.
Затем вы можете передавать, удалять или создавать новые активы. Обычно бухгалтерские книги управляются различными учетными записями, поэтому они могут создавать или удалять активы по мере необходимости. Обратите внимание, что активы обозначены номерами. Каждый идентификатор номера должен быть уникальным. Вы можете сделать одобрение, как с ERC20.
Сначала нам нужно импортировать необходимые библиотеки 0xcert, сделайте это с помощью этих импортов в верхней части файла:
Вы можете опустить комментарии, если хотите, они предназначены для пояснения. Нам нужен MetamaskProvider для использования метамаски в нашем приложении. Затем schema88, который является нашим планом, описывающим тип токенов ERC-721, которые мы хотим создать, и именно здесь мы определяем характеристики нашего актива.
Затем мы импортировали Cert библиотеку, которая используется для сертификации ваших активов. Класс AssetLedger будет использоваться для создания и использования реестров, а AssetLedgerCapability будет использоваться для указания разрешений, которые имеет наш реестр, когда дело доходит до использования токенов внутри него.
Помните, что мы будем следовать следующему процессу:
- Создайте схему со свойствами наших произведений искусства.
- Разверните бухгалтерскую книгу с
schemaId, которую вы хотите использовать. - Создайте в этой книге столько новых активов, сколько мы хотим. Обратите внимание, что вы должны создать новый отпечаток для каждого актива.
Теперь мы можем приступить к созданию нашего чертежа. Для этого создайте функцию внутри вашего проекта реакции следующим образом:
Объект asset содержит название, описание и изображение произведения искусства, которое мы будем использовать. Вы можете определить столько свойств, сколько захотите, например цвет, размер, возраст и т. Д. Идея состоит в том, чтобы предоставить как можно больше информации об активе для ваших децентрализованных приложений. schema88, который мы используем в этом примере,
Затем мы создаем отпечаток. Отпечаток - это уникальный хеш, содержащий эти входные данные о активах. Это криптографическое доказательство для проверки токена. Затем функция expose используется только для чтения свойств отпечатка, которым в данном случае являются [‘name'] и [‘image'] url. Настройте свойства вашего актива или используйте те же функции, что и я и console.log функции отпечатка и раскрытия, вы можете увидеть результат на консоли инструментов разработчика.
Обновите свой код и снова запустите проект:
Вы можете видеть, что чертеж был успешно создан с помощью функции expose:
Теперь вы можете создать функцию для развертывания регистров активов следующим образом:
schemaId, необходимый для развертывания реестра активов, является одним из соглашений, используемых 0xcert, чтобы позволить вашему dApp взаимодействовать с другими dApps, используя тот же стандарт. Цель состоит в том, чтобы сообщество одобрило несколько схем, определяющих разные классы активов. В нашем случае используется schemaId schema88, идентифицированный идентификатором:
0xa4cf0407b223849773430feaf0949827373c40feb3258d82dd605ed41c5e9a2c
Что я получил из официального определения схемы здесь https://github.com/0xcert/framework/blob/master/conventions/88-crypto-collectible-schema.md:
Эта schema88 определяет информацию о криптографических предметах коллекционирования, так что вы можете использовать предметы коллекционирования ERC721 из другого приложения, а также их от вас, если хотите.
Вы получите адрес развернутой бухгалтерской книги в консоли инструментов разработчика. Поэтому обязательно запускайте эту функцию всякий раз, когда вам понадобится новая книга, и сохраните адрес в безопасном месте:
Обратите внимание, как я выполнил функцию deployNewLedger() непосредственно из метода componentDidMount(). Теперь запустите webpack еще раз и убедитесь, что у вас есть работающий статический сервер с http-server dist/, затем откройте свое приложение, и вы сможете развернуть бухгалтерскую книгу активов после загрузки в ropsten:
После подтверждения транзакции вы увидите на консоли адрес развернутой книги учета активов:
Скопируйте этот адрес для следующей новой функции:
// To set the ledger as a state object
async setExistingLedger() {
const ledgerAddress = '0x0c2eD196797b2e5a45079BB7bfe8f568Ba2C4d5e'
const ledger = AssetLedger.getInstance(this.state.provider, ledgerAddress)
await this.setState({ledger})
}
Теперь, когда вы знакомы с процессом, давайте взглянем на завершенный код, который интегрирует 0xcert с чертежами, активами и бухгалтерскими книгами. Помните, что мы хотим создать арт-рынок для развертывания и изучения токенов:
Я добавил функцию для настройки поставщика метамаск в состоянии нашего компонента с new MetamaskProvider(). Функция для создания экземпляра существующей книги с AssetLedger.getInstance(). Функция для развертывания художественного актива с использованием функции ledger.createAsset(). Функция для получения баланса пользователя, который является просто счетчиком количества активов, которыми вы владеете с ledger.getBalance(). И, наконец, я создал новый компонент под названием ArtPiece, который содержит единственный ресурс с его свойствами.
Как видите, это довольно сложное приложение. Не торопитесь и помните, что после того, как вы настроите свой план с отпечатком, раскроете его внутри evidence.json и создадите свой uriBase.json, вы можете приступить к развертыванию реестров и активов. Вот как приложение будет выглядеть в конце, обязательно используйте его на ropsten для сохранения эфира:
Кроме того, вам потребуется настроить сервер, который создает ссылку URI для каждого токена. Например, если ваш токен находится на art-martketplace.com/tokens (поддельный веб-сайт для демонстрационных целей), вам придется создать сервер, который генерирует URI, например art-marketplace. com / tokens / 10, где 10 - это номер идентификатора 10 вашего токена. Это основной способ показать пользователям наличие определенного токена при отображении свойств токена.
Надеюсь, вы узнали что-то полезное. Если да, обязательно изучите более продвинутые методы, разместив мою книгу Разработчик Ethereum - Изучите Solidity с нуля на моем веб-сайте merunas.io.
Присоединяйтесь к нашему сообществу разработчиков Ethereum, подписавшись на эту публикацию и присоединившись к нашей замечательной группе в Facebook здесь: https://www.facebook.com/groups/ethereumdevelopers/
Если вам нужны более персонализированные руководства и мои собственные советы, присоединяйтесь к моему списку адресов электронной почты, где вы будете получать еженедельные и ежемесячные руководства для перехода на следующий уровень здесь: http://eepurl.com/dDQ2yX
