Используйте Flutter для создания произведений искусства и управления смарт-контрактами

Вы поклонник Flutter и хотите изучить основы невзаимозаменяемых токенов и смарт-контрактов. В этом проекте мы создадим коллекцию NFT и разместим ее на рынке OpenSea. Мы создадим два приложения Flutter: одно для создания рисунков, другое для управления нашим смарт-контрактом. Мы будем использовать многие инструменты Web3: IPFS, Pinata, MetaMask, Hardhat, Solidity, OpenZeppelin, Polygonscan, Alchemy.

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

Вот шаги в этом проекте:

  1. Поймите, что мы будем развивать.
  2. Создавайте искусство: создайте приложение Flutter для создания изображений и описаний. Загрузите их в IPFS — межпланетную файловую систему.
  3. Получите кошелек с криптовалютой.
  4. Создайте и разверните смарт-контракт, который будет жить в блокчейне и отслеживать ваши NFT.
  5. Создайте приложение Flutter для управления своим контрактом и чеканки NFT.
  6. Разместите свои NFT на торговой площадке OpenSea.
  7. Переход от тестовой среды к производственной.

1. Что будем развивать

OpenSea является наиболее используемой торговой площадкой для NFT. Нажмите на эту ссылку, чтобы увидеть Коллекцию Bling NFT в OpenSea. Он был разработан, как описано в этом документе. Сначала ознакомьтесь со страницей коллекции. Затем щелкните один из NFT и просмотрите страницу NFT, включая свойства и сведения.

Вы создадите свою собственную коллекцию, подобную этой, хотя и с гораздо более простыми изображениями.

2. Создавайте искусство

Вы можете продать в основном что угодно как NFT. Но в большинстве случаев NFT привязан к изображению. Опять же, это может быть любое изображение, например. изображение милой собаки, загруженное из Интернета. Но обычно коллекция NFT содержит изображения, сгенерированные компьютерной программой. Изображение имеет ряд свойств, называемых признаками, и, меняя их, можно создать большое количество (часто тысячи) похожих, но разных изображений. Погуглите «генеративное искусство», чтобы узнать больше.

В этом проекте мы создадим приложение Flutter для создания таких изображений:

Действительно очень простые и не очень красивые, но они послужат нашей цели. Каждое изображение имеет три характеристики: цвет фона, цвет переднего плана и радиус круга. Класс ArtWork определяет изображение:

class ArtWork {
  String title;
  Size artSize;
  int backgroundIndex;
  int forgroundIndex;
  int radiusIndex;

  ArtWork(
      {this.title = 'Generate art',
      this.artSize = const Size(500, 1000),
      this.backgroundIndex = 0,
      this.forgroundIndex = 2,
      this.radiusIndex = 5});
}

Цвета определяются как индекс в списке цветов Материала Colors.primaries. RadiusIndex — это целое число от 1 до 10, а радиус круга — это ширина изображения * radiusIndex / 20.

Вы можете выбрать, хотите ли вы создать приложение для Android или приложение для Windows. Чтобы создать приложение для Android, используйте проект File — New — New Flutter в Android Studio. Чтобы создать приложение Windows, выполните следующие команды:

  • запустите ms-settings:developers и включите режим разработчика в Windows
  • конфигурация флаттера --enable-windows-desktop
  • флаттер создать genwin
  • cd genwin
  • flutter run -d windows и убедитесь, что пример программы Flutter работает.

В обоих случаях в каталоге вашего проекта добавьте Поставщик пути в pubspec.yaml:

name: gen_art
description: Generate art for NFTs.
publish_to: 'none'
version: 1.0.0+1
environment:
  sdk: ">=2.15.0 <3.0.0"
dependencies:
  flutter:
    sdk: flutter
  path_provider: ^2.0.8
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^1.0.0
flutter:
  uses-material-design: true

и выполните флаттер паб get.

Замените lib/main.dart следующим:

Приложение отобразит это (на мобильном телефоне, в Windows измените размер окна до тех же пропорций):

При нажатии на кнопку это произойдет десять раз:

  • Генерируется новое изображение на основе случайных значений. Отображается с помощью Custom Paint, код ниже.
  • Изображение записывается в файл с именем Circle x.png (x = 0, 1, … 9).
  • Файл в формате JSON, описывающий изображение, записывается в Circle x.json. Например, для круга 6: {«имя»: «круг 6», «описание»: «это круг номер 6», «изображение»: «ipfs://IMAGES_CID/круг 6.png»,» атрибуты»: [{«trait_type»: «BgColor», «value»: «17»}, {«trait_type»: «FgColor», «value»: «8»}, {«trait_type»: «Radius», « значение”: “5”}]}
  • Это соответствует стандартному формату метаданных NFT в OpenSea. IMAGES_CID — это заполнитель для адреса папки, содержащей изображения, подробнее ниже.

Сам рисунок делается в lib/artpainter.dart. Скопируйте это:

drawArt() рисует изображение на холсте. Это называется

  • ArtPainter(), который является рисовальщиком для виджета CustomPaint. Ширина холста составляет половину ширины устройства.
  • getPng(), который возвращает Uint8List в формате .png, который можно записать в файл как файл .png. Размер холста 500х1000 пикселей. Владелец NFT может захотеть отправить «свое» изображение в типографию и повесить его на стену. Тогда желательно высокое разрешение.

Запустите приложение. Если вы запускаете приложение Android, используйте проводник файлов устройства в Android Studio, чтобы проверить результат. Файлы находятся в папке data/data/(your_app_name)/app_flutter.

Если вы запустите приложение Windows, вы получите сообщение об ошибке, например Необработанное исключение: FileSystemException: Невозможно открыть файл, путь = 'C:\Users\Bo\Documents/Circle 0.png' (Ошибка ОС: Отказано в доступе) . Просто предоставьте доступ и запустите снова. И теперь вы знаете, где найти ваши файлы.

Создайте две папки с именами Images и JSON. Скопируйте файлы .png в изображения и файлы .json в JSON.

Мы могли бы хранить наши файлы на любом файловом сервере. Но, как стало стандартом для NFT, мы будем хранить их на IPFS с помощью Pinata. У этого есть много преимуществ, о которых вы можете прочитать здесь. Перейдите в Pinata и зарегистрируйтесь на бесплатный план. Нажмите +Загрузить и выберите папку Изображения. Обратите внимание на CID, который вы получите через несколько секунд.

Сохраните этот код JavaScript вне папки JSON:

Замените xxx во второй строке на CID, который вы только что получили от Pinata. Запустите сценарий: узел updatejson.js 0 9. Убедитесь, что заполнитель IMAGES_CID в файлах JSON был заменен реальным CID.

Вернитесь в Pinata и загрузите папку JSON. Обратите внимание на CID этой папки.

Теперь вы закончили с созданием и подготовкой искусства и можете перейти к следующей задаче:

3. Получите кошелек

Чтобы хранить криптовалюту и NFT, а также оплачивать транзакции в блокчейне, вам нужен кошелек. В этом проекте мы будем использовать MetaMask. Вы можете установить его как расширение Chrome на свой компьютер, как приложение на свой мобильный Android или и то, и другое (есть функция синхронизации). Мы будем использовать расширение Chrome. Перейдите на домашнюю страницу MetaMask и нажмите Установить MetaMask для Chrome.

Что касается того, какой блокчейн использовать для ваших NFT, есть несколько возможностей. Ethereum — это место, где живут самые известные коллекции, но его использование очень дорого из-за высоких комиссий за транзакции. Для этого проекта мы будем использовать Polygon, который также очень популярен для NFT. Обе цепи имеют боковые цепи для бесплатного тестирования. У Ethereum есть сайдчейны Rinkeby и Ropsten, у Polygon — Mumbai. Для проверки транзакций, контрактов, кошельков и т. д. на Polygon используйте Polygon Chain Explorer на https://polygonscan.com/. Это бесплатно и не требует идентификатора пользователя или входа в систему. Чтобы сделать то же самое в Мумбаи, перейдите на https://mumbai.polygonscan.com/. Добавьте их в закладки, потому что вы будете их часто использовать.

Чтобы добавить поддержку Polygon и Mumbai в свой кошелек, вы можете щелкнуть раскрывающееся меню «Сети» в своем кошельке, а затем нажать «Добавить сеть». Но есть более простой способ: перейдите на сайт polygonscan.com, прокрутите веб-страницу вниз и нажмите кнопку Добавить полигональную сеть. Затем сделайте то же самое для Мумбаи: перейдите на сайт mumbai.polygonscan.com, прокрутите веб-страницу вниз и нажмите кнопку Добавить сеть Мумбаи.

Вам также понадобится криптовалюта для оплаты ваших транзакций в Мумбаи. Валюта, используемая для этого, называется MATIC. Переключите свой кошелек на Мумбаи. Скопируйте адрес своего кошелька. Перейдите в Полигональный кран. Вставьте адрес своего кошелька на панель Получить тестовые токены, выберите Matic Token и нажмите Отправить. Через какое-то время у вас в кошельке будет 0,5 MATIC, которые вы можете увидеть на mumbai.polygonscan.com, если ввести адрес своего кошелька — проверить Balance и Internal Txns. Но, возможно, вы не видите этого в MetaMask. Затем вы должны добавить поддержку MATIC в MetaMask, щелкнув Импорт токенов в разделе Активы. Или, опять же, есть более простой способ: перейдите на сайт polygonscan.com (не Мумбаи) и введите Matic Token в поле поиска. В строке сводки профиля справа щелкните значок с тремя вертикальными точками. Нажмите Добавить токен в кошелек Web3.

Теперь у вас есть кошелек, который можно использовать для тестирования.

4. Создайте и разверните смарт-контракт

На этом этапе мы напишем смарт-контракт, скомпилируем его и развернем в тестовой цепочке Polygon под названием Mumbai.

Смарт-контракт отслеживает ваши NFT — их количество и для каждого NFT URL-адрес для описания (файл JSON), кому он принадлежит (адрес кошелька) и многое другое. Он также используется для создания новых NFT — процесс, называемый созданием NFT.

Смарт-контракты написаны на специальном языке под названием Solidity. На него влияет JavaScript. К счастью, есть стандартные контракты, которые вы можете включить, а затем добавить лишь несколько строк, специфичных для вашего проекта.

Следуйте инструкциям ниже. Есть отличная статья Бхаскара Датты Обучение искусству с описанием того, что мы делаем в этом разделе, если вам нужны подробности.

  1. Убедитесь, что у вас установлена ​​последняя версия node.js (15 или более поздняя). С node.js идут команды npm и npx, которые мы будем часто использовать.
  2. Создайте каталог для этой части проекта, например. Круги и нажмите на них.

3. Установите Hardhat, среду разработки блокчейн-приложений. Выполните команду npm install -g hardhat.

4. Создайте проект Hardhat. Запустите команду npx hardhat. Нажимайте Enter во всех вопросах, принимая значения по умолчанию, включая «Создать базовый пример проекта».

5. Hardhat предложит вам установить несколько дополнительных пакетов в качестве зависимостей для разработки. Запустите команды (игнорируйте предупреждения)

npm install --save-dev "[email protected]"
npm install --save-dev "@nomiclabs/[email protected]"
npm install --save-dev "[email protected]"
npm install --save-dev "[email protected]"
npm install --save-dev "@nomiclabs/[email protected]"
npm install --save-dev "[email protected]"
npm install @nomiclabs/hardhat-etherscan

6. Установите библиотеку контрактов OpenZeppelin. Здесь мы получаем стандартный контракт для NFT, который называется ERC721.sol. Запустите команду npm install @openzeppelin/contracts.

7. Наконец, установите пакет dotenv. Это позволяет нам помещать такие вещи, как адрес кошелька и идентификаторы IPFS CID, в файл .env вместо их жесткого кодирования. Выполните команду npm install dotenv.

8. Откройте каталог Circles в Android Studio или VS Code и ознакомьтесь с содержимым. harhat.config.js — это файл конфигурации для Hardhat. В папку contracts помещаются контракты Solidity. У него есть образец контракта с именем Greeter.sol. Более старые скрипты содержат файлы JavaScript для развертывания контрактов и многое другое.

9. Чтобы убедиться, что установка прошла успешно, скомпилируйте пример контракта: npx hardhat compile.

10. Создайте в корне файл с именем .env и добавьте следующие строки:

CONTRACT_NAME = "John Doe's Circles Collection"
CONTRACT_SYMBOL = "JDCC"
CONTRACT_ADDRESS = ""
WALLET_OWNER = "0x6f3298d259e6EC1c48FA0d6265E8D49ad78EBFD7"
WALLET_PRIVATE_KEY="ecb5bfd5be173f61c24415bd3787600caeb3f0c50ebe3827e168da7e0b751a68"
POLYGONSCAN_KEY=""
ALCHEMY_KEY_TEST = ""
ALCHEMY_KEY_PROD = ""
JSON_CID = "QmQuXH6UCaY9iAYt5VcrTurF4BBeLC3XxxRfMxCuU4g3Gu"
IMAGES_CID = "QmPDLL5r7mxDZ3nhVVFzLxE5fRxxfDW1UAqeZsvRYoEzdq"

где

  • CONTRACT_NAME — это имя, которое вы хотите присвоить своему контракту. Замените Джона Доу своим именем. Имя не обязательно должно быть уникальным, но поскольку оно также будет именем коллекции по умолчанию в OpenSea, использование одного и того же имени может привести к путанице.
  • CONTRACT_SYMBOL — это имя, которое вы хотите дать типу используемого токена, обычно это три или четыре символа. Замените JD своими инициалами.
  • CONTRACT_ADDRESS будет заполнен позже после развертывания контракта.
  • В WALLET_OWNER укажите публичный адрес вашего кошелька MetaMask.
  • В WALLET_PRIVATE_KEY поместите закрытый ключ вашего кошелька. Откройте бумажник, перейдите в раздел Сведения об учетной записи и выберите Экспортировать закрытый ключ. Тот, кто знает этот ключ, может украсть все активы в вашем кошельке. Поэтому вы должны быть очень осторожны, чтобы не дать доступ к файлу .env. Убедитесь, что .env указан в файле .gitgnore.
  • POLYGONSCAN_KEY объясняется ниже.
  • ALCHEMY_KEY_TEST и _PROD объясняются ниже.
  • JSON_CID и IMAGES_CID — это CID IPFS.

11. Поместите CID IPFS, полученные выше, в JSON_CID и IMAGES_CID.

12. Для программного использования Polygonscan нам нужен API. Перейдите на сайт polygonscan.com и зарегистрируйтесь для получения бесплатного плана API. Создайте ключ API и введите его в файл .env как POLYGONSCAN_KEY. (Тот же ключ используется для Мумбаи).

13. Мы также будем использовать платформу разработчиков блокчейнов под названием Alchemy. Зарегистрируйтесь, перейдите в панель инструментов, нажмите +Создать приложение и получите два ключа API, один для тестирования в Мумбаи и один для производства в Polygon Mainnet. Поместите их в файл .env (начиная с https://).

14. Обновите hardhat.config.js, чтобы он выглядел следующим образом:

15. В папке контрактов удаляем Greeter.sol и добавляем наш контракт NFT.sol:

Объяснения см. в статье Figment. Переопределение isApproveForAll является обязательным для OpenSea, как описано здесь.

16. Скомпилируйте контракт: компилируйте npx в жестком шлеме. Вы должны получить сообщение «Компиляция успешно завершена».

17. В папку скриптов добавьте скрипт с именем deploy.js:

18. Теперь выполните команду
npx hardhat run scripts/deploy.js --network Mumbai

Вы должны получить сообщение вроде

Коллекция кругов Джона Доу (JDCC) развернута по адресу: 0x410FbeCc285F3a833f09d51D8CC10f8e7d30F556

Это адрес вашего контракта. Скопируйте/вставьте его в файл .env! (Ctrl/m для копирования).

Если вы получаете сообщение Ошибка: недостаточно средств для внутренней стоимости транзакции, еще раз проверьте WALLET_OWNER и WALLET_PRIVATE_KEY, а также наличие валюты MATIC.

19. Изучите контракт в mumbai.polygonscan. Вы не увидите многого, так как он еще не подтвержден. После проверки исходный код смарт-контракта становится общедоступным и поддающимся проверке. Это создает прозрачность и доверие. И вы сможете управлять договором с помощью Polygonscan. Добавьте скрипт с именем verify.js в скрипты:

Затем запустите команду

npx hardhat run scripts/verify.js --network Mumbai

Вы должны получить (это может занять некоторое время) сообщение типа

Коллекция кругов Джона Доу (JDCC) проверена по адресу: (контрактный адрес)

Если вы получаете ошибки, попробуйте очистку npx hardhat, компиляцию npx hardhat и повторите проверку.

20. Теперь снова изучите контракт в mumbai.polygonscan. Нажмите Контракт, который теперь должен иметь зеленую галочку, означающую, что он проверен. Нажмите Прочитать договор и просмотрите информацию, которую вы (любой) можете получить о договоре. Нажмите Записать контракт и Подключиться к Web3 и узнайте, как вы (только вы!) можете обновить контракт. Самое главное, вы можете создавать NFT (токены JDCC) с помощью функции mint. Если вы хотите создать только несколько NFT, этого может быть достаточно. Но если вы хотите 100 или 10 000 NFT, вы должны использовать программу для чеканки, что мы и делаем в следующем разделе.

5. Создайте приложение Flutter для управления своим контрактом

Чеканка NFT на Ethereum может стоить 100 долларов и более в виде так называемых комиссий за газ. Минтинг на Polygon практически бесплатен (около 0,005 MATIC). Таким образом, для многих коллекций на Ethereum NFT не чеканится до тех пор, пока покупатель не будет готов заплатить прейскурантную цену плюс комиссию. Это иногда называют ленивой чеканкой. В этом проекте мы заранее создадим все 10 NFT, используя приложение Flutter.

Пакет web3dart используется для взаимодействия с блокчейном. Создайте новое приложение Flutter и замените pubspec.yaml следующим:

name: nft_contract
description: Manage NFT contract
publish_to: 'none'
version: 1.0.0+1
environment:
  sdk: ">=2.15.0 <3.0.0"
dependencies:
  flutter:
    sdk: flutter
  web3dart: ^2.3.1
  http: ^0.13.4
  flutter_dotenv: ^5.0.2
dev_dependencies:
  flutter_test:
    sdk: flutter
flutter:
  uses-material-design: true
  assets:
    - assets/abi.json
    - .env

Затем сделайте порхающий паб. Замените lib/main.dart следующим:

Приложение может находиться в одном из трех режимов: нет (при запуске), shownfts для отображения всех NFT, которые в данный момент находятся в контракте, с помощью виджета showNFTs и mint. to mint для отображения новых NFT с помощью виджета showLatestMint.

Скопируйте виджеты шоу в конец main.dart:

Для взаимодействия с контрактом и с IPFS используется шесть фьючерсов и один поток. Скопируйте их в конец main.dart:

Строка abi представляет собой текстовую (json) версию контракта, о которой позже.

getTokenSymbol, getTokenCounter и getTokenURI используют API web3dart для чтения символов, TokenCounter и TokenURI из контракта.

mintStream использует API web3dart для вызова функции mint в контракте. Для каждого NFT он ожидает завершения трех фьючерсов (параллельно, используя Future.wait):

  • транзакция монетного двора
  • получение из IPFS соответствующего изображения
  • двухсекундная задержка, чтобы убедиться, что NFT можно просмотреть до отображения следующего NFT.

Затем он генерирует событие с изображением в качестве параметра.

Когда монетный двор! кнопка нажата, поток запускается и прослушивается. Для каждого события отображается изображение NFT и некоторый текст.

Перед запуском приложения

  • Скопируйте файл .env из предыдущего шага в корень проекта.
  • Создайте папку assets в корне проекта. Отобразите контракт на сайте mumbai.polygonscan.com. Нажмите «Контракт» и прокрутите вниз почти до конца. Там вы найдете Контракт ABI. Нажмите Копировать ABI в буфер обмена. Создайте файл assets/abi.json и вставьте его.

Теперь запустите Flutter и создайте несколько NFT. Начните с круга 0 и, если он работает должным образом, сделайте круги с 1 по 9.

Чтобы увидеть NFT в вашем кошельке, вы сначала должны добавить тип токена. Нажмите «Активы», затем «Импорт токенов». Теперь кошелек должен показать, что у вас есть 10 токенов типа JDCC или того, что вы установили для CONTRACT_SYMBOL в файле .env. С версией расширения Chrome для MetaMask вы не можете отображать изображения NFT в кошельке. С версией приложения для Android вы можете. Попробуйте это, если хотите.

6. Перечислите NFT в OpenSea

Если вы хотите зарабатывать на своих NFT, вы должны разместить их на сайте, где люди смогут их найти и купить. Самый популярный такой сайт — OpenSea. Пока мы тестируем, мы будем использовать их тестовую версию на testnets.opensea.io.

Перейдите туда и найдите коллекцию кругов Джона Доу или что-то еще, что вы установили для CONTRACT_NAME в файле .env. Теперь вы должны увидеть свои NFT (в первый раз это может занять некоторое время). Нажмите символ «Редактировать» (ручка) и введите необходимую информацию, например логотип и описание. Отправить изменения. Затем нажмите на первый NFT.

Осмотрите поля. Нажмите «Подробнее», чтобы увидеть адрес контракта и номер токена. Теперь вы можете сделать его доступным для покупателей, нажав Продать. Введите цену на следующем экране, например. 0,01 ETH (около 25 долларов США). Введите продолжительность (максимум 6 месяцев). Щелкните Полный список.

Повторите это для всех ваших 10 NFT — но что, если у вас их 100 или 10 000? Есть API для OpenSea, но, к сожалению, (на момент написания) он не поддерживает Mumbai или Polygon, только Ethereum. Вместо этого вы можете автоматизировать графический интерфейс OpenSea, используя такие пакеты, как Puppeteer или Macro Scheduler. Мы не будем освещать это здесь, но вы можете найти статьи об этом в Интернете.

7. Перейти от тестирования к производству

Если вы довольны своей коллекцией в Мумбаи и testnets.opensea.io, теперь вы можете развернуть ее в Polygon Mainnet. Это не дорого, но и не бесплатно, и вы должны получить на свой кошелек настоящую криптовалюту. Переключите свой кошелек на Polygon.

  • Много не надо, достаточно 1 MATIC. Есть много сайтов, которые продают криптовалюту (Coinbase, Binance, …). Они отличаются сложностью регистрации, минимальной покупкой, поддерживаемыми блокчейнами и валютами. Я использовал Трансак. Их минимальная покупка даст вам гораздо больше MATIC, чем вам нужно. Вместо этого купите USDT на Polygon или WETH (Wrapped Ether = ETH на Polygon). Затем перейдите на https://wallet.polygon.technology/gas-swap и получите 1 MATIC.
  • Теперь вы можете создать контракт на Polygon: npx hardhat run scripts/deploy.js --network Main. Это может занять несколько минут.
  • Скопируйте/вставьте новый адрес контракта в файлы .env (как файл, используемый Hardhat, так и копию, используемую приложением nft_contract).
  • Запустите npx hardhat run scripts/verify.js --network Main. Это также может занять некоторое время.
  • Обновите приложение nft_contract: в переопределении initState измените

finalALCHEMY_KEY = dotenv.env['ALCHEMY_KEY_TEST'];
to
final ALCHEMY_KEY = dotenv.env['ALCHEMY_KEY_PROD'];

  • Теперь запустите приложение и создайте свои NFT.
  • Через некоторое время вы сможете увидеть свою коллекцию на производственном сайте OpenSea. Отредактируйте коллекцию, как описано выше. Вы также можете ввести процентную комиссию (максимум 10) в разделе Доход авторов. Затем каждый раз, когда один из ваших NFT продается (или перепродается), вы получаете 10% от цены продажи. Щелкните каждый NFT и перечислите его.

Готово!

Заключительные замечания

Спасибо, что прочитали эту длинную статью. Мы покрыли много земли. Если вам понравилось, хлопайте в ладоши. Если у вас есть вопросы или комментарии, пожалуйста, ответьте. Вы можете отблагодарить меня, купив один из моих NFT. Вероятно, это не очень хорошая инвестиция, но кто знает?