![\"WebI](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173282167151033.jpg\")
<\/p>\n<\/li>\n
スマート コントラクトの Web フロントエンドを構(gòu)築しましょう!これは、Solidity と Hardhat を使用したシンプルなスマート コントラクトの作成に関する前回の投稿の続編です。ここでの手順は、Hardhat 環(huán)境に展開(kāi)したのと同じ契約を使用して受け取りを行っていることを前提としています。
前回の投稿では、狀態(tài)変數(shù)に格納されているカウンターをインクリメントするコントラクトを作成してテストしました。 Hardhat コンソールを使用して、incrementCount() 関數(shù)と getCount() 関數(shù)を呼び出しました。現(xiàn)実の世界では、開(kāi)発コンソールを介して契約をやり取りすることはありません。これらの関數(shù)を呼び出すアプリケーションを作成する 1 つの方法は、Web ページ內(nèi)の Javascript (ethers.js ライブラリ経由)、Web3 アプリケーション!
を使用することです。前の投稿で述べたように、Web3 アプリケーションと対話するには、ウォレットが組み込まれたブラウザが必要です。この簡(jiǎn)単な例では、メタマスクを使用します。 Metmask は、Ethereum およびおそらく他のいくつかの EVM ベースのブロックチェーン用に事前構(gòu)成されていますが、Hardhat 環(huán)境でシミュレートされたブロックチェーン用には構(gòu)成されていません。これをすべて実行するには、まず Metmask をセットアップし、次にコントラクトを呼び出すために必要な HTML/JavaScript を作成します。
メタマスク/Web3ブラウザ
-
メタマスクをインストールします。ここにある Chrome 拡張機(jī)能を使用します。 Chrome ユーザーの場(chǎng)合、これにより、Web3 コンテンツを表示して操作できるようになります。
初期設(shè)定については説明しませんが、おそらく、既存の秘密キーをインポートするか、新しい秘密キーを生成して、リカバリ フレーズを書(shū)き留めるよう求められるでしょう。そうしてください。
-
次に、Hardhat ネットワークをメタマスクに追加します。 Metamask は任意の EVM をサポートしますが、そのように構(gòu)成する必要があります。通常、これはチェーン ID と RPC URL を追加するだけです。 Metamask 內(nèi)から (Chrome プラグインをクリックして選択して起動(dòng)する必要がある場(chǎng)合があります)、上部中央にパブリック アドレスが表示されるはずです。アドレスの左側(cè)に、現(xiàn)在のネットワークを示すドロップダウンがあります。それをクリックすると、利用可能な他のネットワークが表示されます:
[カスタム ネットワークの追加] をクリックします。ネットワーク名に「Hardhat」のようなものを入力し、ネットワーク RPC URL にハードハット ノードの IP アドレスとポートを入力します。ローカルで実行している場(chǎng)合は、次のようになります。
http://127.0.0.1:8545/1337 のチェーン ID を入力します。シンボルは今のところ ETH にすることができます。私たちは実際のイーサリアム ネットワーク上で本物の ETH を扱っているではないことに注意してください。ただし、ウォレットに本物の ETH がある場(chǎng)合は、ハードハット ネットワークに留まるよう十分に注意してください。
ここで、メタマスク プラグインに追加したばかりのハードハット ネットワークに切り替えます。実行中の Hardhat ノードを監(jiān)視しているターミナルでは、ウォレットの接続時(shí)に何らかのアクティビティが表示されるはずです。
-
あなたのメタマスクウォレットには現(xiàn)在（偽の）ETHがないので、いくらか送ってみましょう。メタマスクからパブリック アドレスを取得します (メタマスク ウィンドウの上部、ウォレット名の下にあるコピー ボタンをクリックします)。 Hardhat コンソールを?qū)g行しているターミナル ウィンドウから、次の操作を?qū)g行します:
const [owner, feeCollector, operator] = await ethers.getSigners(); await owner.sendTransaction({ to: "PasteYourMetamaskAddressHere", value: ethers.parseEther("0.1") });メタマスクに戻ると、ハードハット ウォレットに ETH が入っていることがわかります。これで、Hardhat ネットワーク上で Web3 トランザクションを?qū)g行する準(zhǔn)備が整いました。
Web3 Webページを作成する
-
カウンタを表示して増加させるための簡(jiǎn)単な Web ページを作成してみましょう。重いフレームワークは使用せず、単純に古い HTML、JavaScript、ethers.js ライブラリを使用します。ただし、ブラウザーで .htm ドキュメントを指定することはできません。メタマスク プラグインが機(jī)能するには、どこかで Web サーバーを?qū)g行する必要があります。 OS によっては、http-server などの軽量サーバーをローカルで使用できる場(chǎng)合があります。
前回の投稿でコントラクトをデプロイしたときから必要なものがいくつかあります。前回の投稿に戻り、アーティファクト ディレクトリから 契約アドレス と契約の ABI JSON 配列を取得します。そのファイルの殘りの JSON は必要ありません?！竌bi」プロパティにあるものだけが必要です。[ で始まり、] で終わり、何かが見(jiàn)えるはずです。このように:
[ { "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の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫(huà)像を無(wú)料で
Undresser.AI Undress
リアルなヌード寫(xiě)真を作成する AI 搭載アプリ
AI Clothes Remover
寫(xiě)真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類(lèi)リムーバー
Video Face Swap
完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無(wú)料のコードエディター
SublimeText3 中國(guó)語(yǔ)版
中國(guó)語(yǔ)版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開(kāi)発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開(kāi)発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
8519
17
1744
16
1599
56
1538
28
1397
31
JavaScript vs. Java：どの言語(yǔ)を?qū)Wぶべきですか？
Jun 10, 2025 am 12:05 AM
JavaScriptisidealforwebdevelopment,whileJavasuitslarge-scaleapplicationsandAndroiddevelopment.1)JavaScriptexcelsincreatinginteractivewebexperiencesandfull-stackdevelopmentwithNode.js.2)Javaisrobustforenterprisesoftwareandbackendsystems,offeringstrong
JavaScriptで使用するコメントシンボル：明確な説明
Jun 12, 2025 am 10:27 AM
JavaScriptでは、シングルラインコメント（//）またはマルチラインコメント（//）を選択することは、コメントの目的とプロジェクトの要件に依存します。 2。詳細(xì)なドキュメントには、マルチラインコメントを使用します。 3。コメントスタイルの一貫性を維持します。 4。過(guò)剰な承認(rèn)を避けます。 5.コメントがコードと同期して更新されていることを確認(rèn)してください。適切な注釈スタイルを選択すると、コードの読みやすさと保守性を向上させることができます。
JavaScriptの究極のガイドコメント：コードの明確さを強(qiáng)化します
Jun 11, 2025 am 12:04 AM
はい、javascriptcommentsは不必要に使用されています。
Java vs. JavaScript：混亂を解消します
Jun 20, 2025 am 12:27 AM
JavaとJavaScriptは異なるプログラミング言語(yǔ)であり、それぞれ異なるアプリケーションシナリオに適しています。 Javaは大規(guī)模なエンタープライズおよびモバイルアプリケーション開(kāi)発に使用されますが、JavaScriptは主にWebページ開(kāi)発に使用されます。
JavaScriptコメント：短い説明
Jun 19, 2025 am 12:40 AM
JavaScriptcommentsEareEssentialential-formaining、およびGuidingCodeexecution.1）single-linecommentseared forquickexplanations.2）多LinecommentsexplaincomplexlogiCorprovidededocumentation.3）clarifyspartsofcode.bestpractic
JavaScriptのマスターコメント：包括的なガイド
Jun 14, 2025 am 12:11 AM
ContureCrucialInjavascript formantaining andFosteringCollaboration.1）TheypindeBugging、Onboarding、およびUnderstandingCodeevolution.2）usesingle-linecomments for quickexplanations andmulti-linecomments fordeTeTaileddespransions.3）BestPractsinclud
JavaScriptデータ型：ディープダイビング
Jun 13, 2025 am 12:10 AM
javascripthasseveralprimitivedatypes：number、string、boolean、undefined、null、symbol、andbigint、andnon-primitiveTypeslike objectandarray
JavaScript vs. Java：開(kāi)発者向けの包括的な比較
Jun 20, 2025 am 12:21 AM
javascriptispreferredforwebdevelopment、whilejavaisbetterforlge-scalebackendsystemsandroidapps.1）javascriptexcelsininintingtivewebexperiences withitsdynAmicnature anddommanipulation.2）javaofferstruntypyping-dobject-reientedpeatures
