シンプルなスマートコントラクトのWebI
スマート コントラクトの 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 サイトの他の関連記事を参照してください。
ホット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）
ホットトピック
1670
14
1428
52
1329
25
1276
29
1256
24
Python vs. JavaScript：学習曲線と使いやすさ
Apr 16, 2025 am 12:12 AM
Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。
C/CからJavaScriptへ：すべてがどのように機能するか
Apr 14, 2025 am 12:05 AM
C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。
JavaScriptとWeb：コア機能とユースケース
Apr 18, 2025 am 12:19 AM
Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScript in Action：実際の例とプロジェクト
Apr 19, 2025 am 12:13 AM
現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。
JavaScriptエンジンの理解：実装の詳細
Apr 17, 2025 am 12:05 AM
JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
Python vs. JavaScript：コミュニティ、ライブラリ、リソース
Apr 15, 2025 am 12:16 AM
PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。
Python vs. JavaScript：開発環境とツール
Apr 26, 2025 am 12:09 AM
開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。
JavaScript通訳者とコンパイラにおけるC/Cの役割
Apr 20, 2025 am 12:01 AM
CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。
