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

ホームページ

ウェブフロントエンド

jsチュートリアル

シンプルなスマートコントラクトのWebI

Susan Sarandon

Nov 29, 2024 am 03:21 AM

スマートコントラクトの 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="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173282167151033.jpg"  class="lazy" 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1657

CakePHP チュートリアル

1415

Laravel チュートリアル

1309

PHP チュートリアル

1257

C# チュートリアル

1229

Related knowledge

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptの進化：現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptエンジン：実装の比較 Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

JavaScript：Web言語の汎用性の調査 Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

Python vs. JavaScript：学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合） Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

C/CからJavaScriptへ：すべてがどのように機能するか Apr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptをインストールするにはどうすればよいですか？ Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1）ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2）node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

See all articles