クレイトンネットワーク上でNFT(Truffle)を開発

Truffleを使用してKIP-17を配備します.

Truffleは、イーサネットベースのdAppの開発を支援するブロックチェーンフレームワークです.

インテリジェント契約のコンパイルと配布をサポートします.

クライトンはイーサネットで、Truffleを使用して開発環境を設定できます.

Truffle設定

コードを記述するフォルダでtruffle initでtruffleを初期化し、npm initを使用してnpmを初期化します.

クレイトン財布の秘密鍵が必要であるためdotnvを環境変数として秘密鍵を管理する.

リモートENノードに配備するためにtruffle-hdwallet-provider-klaytnをインストールします.

truffle-hdwallet-provider-klaytnはtruffle-hdwallet-providerから派生したjavascript HD財布プロバイダである.

truffle-config.jsでネットワークを設定します.
🍍 private keyを使用して財布プロバイダを設定します.

🍑 Truffle Clairtonドキュメント:https://ko.docs.klaytn.com/smart-contract/ide-and-tools/truffle#configuring-truffle-hdwallet-provider-klaytn

const HDWalletProvider = require('truffle-hdwallet-provider-klaytn');
require('dotenv').config();
const { PRIVATE_KEY } = process.env;
const URL = 'https://api.baobab.klaytn.net:8651';

// ... 코드 생략

	// 바오밥 테스트 네트워크 설정
    baobab: {
      provider: new HDWalletProvider(PRIVATE_KEY, URL),
      network_id: 1001,
      gas: 20000000,
      gasPrice: 750000000000,
    }

truffle-config.jsでは、コンパイラのSolcバージョンはContractのSolcバージョンと一致します.
🍒 このドキュメントではsolidityを0.5.6に設定します.

pragma solidity 0.5.6;

--- --- --- --- --- --- --- --- ---

  compilers: {
    solc: {
      version: "0.5.6",
    }
  },

契約フォルダに

KIP-17コードを書き込み、migrationsフォルダに1 initial migrationを入れます.jsファイルで作成したKIP-17コードを設定して配布できます.

// 1_initial_migration.js

const Migrations = artifacts.require('Migrations');
const MyKlaytnNFTs = artifacts.require('배포할_컨트랙트_이름.sol'); 

module.exports = function (deployer) {
	deployer.deploy(Migrations);
	deployer.deploy(MyKlaytnNFTs); 
};

Truffle設定完了後のフォルダ構造

KIP-17のコードは、klaytn-contractsライブラリで表示および使用できます.
🍑 https://github.com/klaytn/klaytn-contracts/tree/master/contracts/token/KIP17

導入のテスト

trufflemigrate--compile-all--ネットワークbaobabを使用してbobobテストネットワークにネットワークを接続して導入します.

の導入が完了すると、フォルダ構造(新しい構築フォルダとテストフォルダが作成されます)

端末は配布に関する情報を表示する.

デプロイが完了したら、truffle console-network babaを使用してTruffleコンソールを実行します.

コンソールは正常に動作しています.

Truffleコンソールを操作して、配置されたContract関数を実行できます.

mint機能があれば実際にNFTを発行することもできます.

🍎 ハブアドレス:https://github.com/citron03/Truffle-KIP17-development
🍈 Baobab Klaytnscopeで導入されたスマート契約を表示:https://baobab.scope.klaytn.com/account/0xf98c89b2724db980c96e7f615ec11cba715336fe?tabId=txList

クライアントアプリケーション(react)とtruffle

truffle公式サイトにアクセスすると、Truffle Boxesが表示されます.

Truffle Boxは、フロントエンドdAppの簡単な作成をサポートします.

🍫 truffle公式サイト:https://trufflesuite.com/boxes/index.html

の複数のフレームワークをサポートするTruffle Boxから反応が分かる.

🍫 React Truffle Box : https://trufflesuite.com/boxes/react/

の公式ファイルによれば、Truffleのreact dAppを使用するには、次の手順で構成できます.

// 1. truffle을 설치하고, Create-React-App으로 react app을 시작한다.

npm install -g truffle // truffle 설치 (이미 설치했다면, 건너 뛴다)
truffle unbox react // truffle을 사용하는 CRA

또는

npx truffle unbox react

// 2. truffle 개발 콘솔을 실행한다.

truffle develop

// 3. 스마트 컨트랙트를 컴파일 하고 배포한다.
// 스마트 컨트랙트에 변경사항이 있을 때, 이 작업을 다시 한다.

compile
migrate

// 4. 생성된 디렉토리의 client 폴더 내부에 react app이 있다.
// 해당 폴더로 이동 후 react app을 실행할 수 있다.

cd client 
npm run start

npx truffle unbox reactで生成されたプロジェクトのファイルとフォルダの構成.

基本的には既存のtruffleフォルダと似ています.

clientフォルダの内部には、おなじみのCRAによって生成されたreactionアプリケーションの構成が表示されます.

clientフォルダに入り、reactionアプリケーションを実行します.実行するreaction clientアプリケーションは自動的に財布との接続を行います.

ただし、dAppにはイーサネットが必要なため、実行後にエラーが発生します.

のため、Trupleネットワークを実行しているときに見たDevelop Networkの財布(Truffleが開発したNimonic財布)に接続し、この財布で支払います.
🍉 このときガス代エラーが発生した場合、truffle-config.jsのネットワーク設定でガス代を調整します.
🍉 それだけでなく、ネット接続財布も開発される.

イーサネットを送信すると、上で反応アプリケーションを実行している画面が表示されます.

振り返る

最初はtruffle-configjsでSolcバージョンが設定されていることを知らず戸惑っています.

Remix IDEや同様のKlaytn IDE環境とは異なり、Truffleは導入後にコンソール会議を使用する必要があるため、少し気まずいです.

クレイトンネットワークは75億ドルの固定ガス代を支払う必要があり、ガス代が不足したときに間違いがあった.

実際、ボブテストネット上でNFTを発行し、クレイトン顕微鏡で確認することができます.

しかし,KIP−17は関数の内容が多く,すべての関数の機能については把握していない.

Truffleを使用してインテリジェントなContractを導入および使用できますが、実際のdApp開発ではtruffleをどのように使用するかが疑問であり、truffleの公式ドキュメントで答えを見つけることができます.

ほとんどの正解は正式な書類にあります.正式な書類をよく確認する習慣をつける.

上記のTrupleBoxメソッドで設定を変更すれば、クレイトン開発環境を作成できます.時間があるときはやってみなければなりません.