シンプルなスマートコントラクトのWebI-jsチュートリアル-php.cn

スマートコントラクトの Web フロントエンドを構築しましょう!これは、Solidity と Hardhat を使用したシンプルなスマートコントラクトの作成に関する前回の投稿の続編です。ここでの手順は、Hardhat 環境に展開したのと同じ契約を使用して受け取りを行っていることを前提としています。

前回の投稿では、状態変数に格納されているカウンターをインクリメントするコントラクトを作成してテストしました。 Hardhat コンソールを使用して、incrementCount() 関数と getCount() 関数を呼び出しました。現実の世界では、開発コンソールを介して契約をやり取りすることはありません。これらの関数を呼び出すアプリケーションを作成する 1 つの方法は、Web ページ内の Javascript (ethers.js ライブラリ経由)、Web3 アプリケーション!

を使用することです。

前の投稿で述べたように、Web3 アプリケーションと対話するには、ウォレットが組み込まれたブラウザが必要です。この簡単な例では、メタマスクを使用します。 Metmask は、Ethereum およびおそらく他のいくつかの EVM ベースのブロックチェーン用に事前構成されていますが、Hardhat 環境でシミュレートされたブロックチェーン用には構成されていません。これをすべて実行するには、まず Metmask をセットアップし、次にコントラクトを呼び出すために必要な HTML/JavaScript を作成します。

メタマスク/Web3ブラウザ

メタマスクをインストールします。ここにある Chrome 拡張機能を使用します。 Chrome ユーザーの場合、これにより、Web3 コンテンツを表示して操作できるようになります。

初期設定については説明しませんが、おそらく、既存の秘密キーをインポートするか、新しい秘密キーを生成して、リカバリフレーズを書き留めるよう求められるでしょう。そうしてください。
次に、Hardhat ネットワークをメタマスクに追加します。 Metamask は任意の EVM をサポートしますが、そのように構成する必要があります。通常、これはチェーン ID と RPC URL を追加するだけです。 Metamask 内から (Chrome プラグインをクリックして選択して起動する必要がある場合があります)、上部中央にパブリックアドレスが表示されるはずです。アドレスの左側に、現在のネットワークを示すドロップダウンがあります。それをクリックすると、利用可能な他のネットワークが表示されます:

[カスタムネットワークの追加] をクリックします。ネットワーク名に「Hardhat」のようなものを入力し、ネットワーク RPC URL にハードハットノードの IP アドレスとポートを入力します。ローカルで実行している場合は、次のようになります。
http://127.0.0.1:8545/

1337 のチェーン ID を入力します。シンボルは今のところ ETH にすることができます。私たちは実際のイーサリアムネットワーク上で本物の ETH を扱っているではないことに注意してください。ただし、ウォレットに本物の ETH がある場合は、ハードハットネットワークに留まるよう十分に注意してください。

ここで、メタマスクプラグインに追加したばかりのハードハットネットワークに切り替えます。実行中の Hardhat ノードを監視しているターミナルでは、ウォレットの接続時に何らかのアクティビティが表示されるはずです。
あなたのメタマスクウォレットには現在（偽の）ETHがないので、いくらか送ってみましょう。メタマスクからパブリックアドレスを取得します (メタマスクウィンドウの上部、ウォレット名の下にあるコピーボタンをクリックします)。 Hardhat コンソールを実行しているターミナルウィンドウから、次の操作を実行します:
```
const [owner,  feeCollector, operator] = await 
ethers.getSigners();
await owner.sendTransaction({ to: "PasteYourMetamaskAddressHere", value: ethers.parseEther("0.1") });
```
ログイン後にコピー
メタマスクに戻ると、ハードハットウォレットに ETH が入っていることがわかります。これで、Hardhat ネットワーク上で Web3 トランザクションを実行する準備が整いました。

Web3 Webページを作成する

カウンタを表示して増加させるための簡単な Web ページを作成してみましょう。重いフレームワークは使用せず、単純に古い HTML、JavaScript、ethers.js ライブラリを使用します。ただし、ブラウザーで .htm ドキュメントを指定することはできません。メタマスクプラグインが機能するには、どこかで Web サーバーを実行する必要があります。 OS によっては、http-server などの軽量サーバーをローカルで使用できる場合があります。

前回の投稿でコントラクトをデプロイしたときから必要なものがいくつかあります。前回の投稿に戻り、アーティファクトディレクトリから 契約アドレス と契約の ABI JSON 配列を取得します。そのファイルの残りの JSON は必要ありません。「abi」プロパティにあるものだけが必要です。[ で始まり、] で終わり、何かが見えるはずです。このように:
```
[
    {
      "inputs": [],
      "stateMutability": "nonpayable",
      "type": "constructor"
    },
    {
      "inputs": [],
      "name": "getCount",
      "outputs": [
        {
          "internalType": "uint256",
          "name": "",
          "type": "uint256"
        }
      ],
      "stateMutability": "view",
      "type": "function"
    },
    {
      "inputs": [],
      "name": "incrementCount",
      "outputs": [],
      "stateMutability": "nonpayable",
      "type": "function"
    }
  ]
```
ログイン後にコピー

これを HTML と Javascript に入れてみましょう:

<html>
    <head>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/5.2.0/ethers.umd.min.js" type="application/javascript"></script>
    </head>

    <body>
            <h2>The counter is at: <span>

</li>
<li>
<p>We should now be able to view our HTML document in a web browser with the Metamask plugin installed. I won't go through the Javascript, but if you are familiar with JavaScript and following the concepts and what we did in the Hardhat terminal previously, what is happening in the code should be fairly straight-forward. Metamask should prompt you that you are connecting to the site and you'll need to select the Hardnet network that we set up earlier. You should see something like this in the browser:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173282167151033.jpg" alt="WebI For Simple Smart Contract" /></p>
</li>
<li><p>If all went well, you can click on the "Increment" button. Metamask will let you know that you are about to make a transaction and inform you of the gas fee. You can Confirm this transaction in Metamask and see the count increment on both the website and in the terminal where you have the hardhat node running!</p></li>
<li><p>Congratulations, we are interacting with our contract through a web UI!</p></li>
</ol>

<p>A few notes as you dive deeper into Hardhat and Metamask for development:</p>

<ul>
<li><p>Each transaction has an nonce. When you reset your hardhat node, that nonce gets reset and you might loose sync with what Metamask thinks is a unique nonce. When that happens, Metmask has an option to set a custom nonce with the transaction, or you can reset Metamask's nonces in Settings->Advanced->Clear Activity Tab data.

ログイン後にコピー

You'll need to redeploy your smart contract every time you restart your Hardhat node.
If you are writing contracts that will keep track of users by their public address and want to experiment in the Hardhat console with transactions form different users, you can impersonate different addresses in the console that were displayed when you first started the Hardhat node with something like this before you connect to the contract:
```
const signers = await ethers.getSigners();
const newSigner = signers[1]; // Change the 1 to a different number that corolates with one of the pre-generated testing addresses
const newMain = await main.connect(newSigner);

newMain.setContractAddress("test","0xYourContractAddress");
```
ログイン後にコピー

以上がシンプルなスマートコントラクトのWebIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。