<nobr id="4wlah"><code id="4wlah"></code></nobr>
<span id="4wlah"></span>
\n            
The counter is at: \n\n<\/li>\n
  • \n
    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>\n\n
    \"WebI<\/p>\n<\/li>\n
  • 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>\n
  • Congratulations, we are interacting with our contract through a web UI!<\/p><\/li>\n<\/ol>\n\n
    A few notes as you dive deeper into Hardhat and Metamask for development:<\/p>\n\n
      \n
    • 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. <\/pre>\n<\/li>\n
    • You'll need to redeploy your smart contract every time you restart your Hardhat node.<\/p><\/li>\n
    • \n
      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:
      \n<\/p>\n
      const signers = await ethers.getSigners();\nconst newSigner = signers[1]; \/\/ Change the 1 to a different number that corolates with one of the pre-generated testing addresses\nconst newMain = await main.connect(newSigner);\n\nnewMain.setContractAddress(\"test\",\"0xYourContractAddress\");\n<\/pre>\n\n<\/li>\n\n\n\n          \n\n            \n  \n\n            \n        <\/ol>"}	
	







      国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂
      
	

      
    

      

	
	
      
		
      
			
      
							
      
					
      
						ホームページ
						
												ウェブフロントエンド
						
												jsチュートリアル
						
						シンプルなスマートコントラクトのWebI
					
      
					
					
      
						
      
							
      シンプルなスマートコントラクトのWebI
      
							
							Nov 29, 2024 am	 03:21 AM
														
						
      
					
      
					
      
					
      
						
      
						
						
						

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


      前回の投稿では、狀態(tài)変數(shù)に格納されているカウンターをインクリメントするコントラクトを作成してテストしました。 Hardhat コンソールを使用して、incrementCount() 関數(shù)と getCount() 関數(shù)を呼び出しました?，F(xiàn)実の世界では、開発コンソールを介して契約をやり取りすることはありません。これらの関數(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ブラウザ

      


        

      1. 

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


        初期設(shè)定については説明しませんが、おそらく、既存の秘密キーをインポートするか、新しい秘密キーを生成して、リカバリ フレーズを書き留めるよう求められるでしょう。そうしてください。
        

        2. 

      2. 

        次に、Hardhat ネットワークをメタマスクに追加します。 Metamask は任意の EVM をサポートしますが、そのように構(gòu)成する必要があります。通常、これはチェーン ID と RPC URL を追加するだけです。 Metamask 內(nèi)から (Chrome プラグインをクリックして選択して起動(dòng)する必要がある場(chǎng)合があります)、上部中央にパブリック アドレスが表示されるはずです。アドレスの左側(cè)に、現(xiàn)在のネットワークを示すドロップダウンがあります。それをクリックすると、利用可能な他のネットワークが表示されます:
        


        WebI For Simple Smart Contract
        


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


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


        ここで、メタマスク プラグインに追加したばかりのハードハット ネットワークに切り替えます。実行中の Hardhat ノードを監(jiān)視しているターミナルでは、ウォレットの接続時(shí)に何らかのアクティビティが表示されるはずです。
        

        3. 

      3. 

        あなたのメタマスクウォレットには現(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)備が整いました。
        

        4. 

      


      
  
  
  Web3 Webページを作成する

      


        

      1. 

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


        前回の投稿でコントラクトをデプロイしたときから必要なものがいくつかあります。前回の投稿に戻り、アーティファクト ディレクトリから 契約アドレス と契約の ABI JSON 配列を取得します。そのファイルの殘りの JSON は必要ありません?！竌bi」プロパティにあるものだけが必要です。[ で始まり、] で終わり、何かが見えるはずです。このように:
        

        

        [
    {
      "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"
    }
  ]

        


        2. 

      2. 

        これを 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. 
        

        3. 

      3. You'll need to redeploy your smart contract every time you restart your Hardhat node.
        4. 

      4. 

        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");

        


        5. 



          

            
  

            
        
      以上がシンプルなスマートコントラクトのWebIの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。
      


						
      
					
      
					
      
						
      このウェブサイトの聲明
      
						
      この記事の內(nèi)容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰屬します。このサイトは、それに相當(dāng)する法的責(zé)任を負(fù)いません。盜作または侵害の疑いのあるコンテンツを見つけた場(chǎng)合は、admin@php.cn までご連絡(luò)ください。
      
					
      
				
      

				



				
      


				
    


					


											
      
							
      
								
      
									
									
      ホットAIツール
      
								
      
								
      
																		
      
											
												Undress AI Tool
											
											
      
												
													
      Undress AI Tool
      
												      
												
      脫衣畫像を無(wú)料で
      
											
      
										
      
																		
      
											
												Undresser.AI Undress
											
											
      
												
													
      Undresser.AI Undress
      
												      
												
      リアルなヌード寫真を作成する AI 搭載アプリ
      
											
      
										
      
																		
      
											
												AI Clothes Remover
											
											
      
												
													
      AI Clothes Remover
      
												      
												
      寫真から衣服を削除するオンライン AI ツール。
      
											
      
										
      
																		
      
											
												Clothoff.io
											
											
      
												
													
      Clothoff.io
      
												      
												
      AI衣類リムーバー
      
											
      
										
      
																		
      
											
												Video Face Swap
											
											
      
												
													
      Video Face Swap
      
												      
												
      完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
      
											
      
										
      
																
      
								
							
      
						
      
					


					


											
      
							
      
								
      
									
									
      ホットツール
      
								
      
								
      
																		
      
											
												メモ帳++7.3.1
											
											
      
												
													
      メモ帳++7.3.1
      
												      
												
      使いやすく無(wú)料のコードエディター
      
											
      
										
      
																			
      
											
												SublimeText3 中國(guó)語(yǔ)版
											
											
      
												
													
      SublimeText3 中國(guó)語(yǔ)版
      
												      
												
      中國(guó)語(yǔ)版、とても使いやすい
      
											
      
										
      
																			
      
											
												ゼンドスタジオ 13.0.1
											
											
      
												
													
      ゼンドスタジオ 13.0.1
      
												      
												
      強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
      
											
      
										
      
																			
      
											
												ドリームウィーバー CS6
											
											
      
												
													
      ドリームウィーバー CS6
      
												      
												
      ビジュアル Web 開発ツール
      
											
      
										
      
																			
      
											
												SublimeText3 Mac版
											
											
      
												
													
      SublimeText3 Mac版
      
												      
												
      神レベルのコード編集ソフト（SublimeText3）
      
											
      
										
      
																	
      
								
							
      
						
      
										

					
					
				
      
			
      
							
      
					
      
						
						
      

													
      
								
									Java vs. JavaScript：混亂を解消します
								
								Java vs. JavaScript：混亂を解消します
								Jun 20, 2025 am	 12:27 AM
								
      JavaとJavaScriptは異なるプログラミング言語(yǔ)であり、それぞれ異なるアプリケーションシナリオに適しています。 Javaは大規(guī)模なエンタープライズおよびモバイルアプリケーション開発に使用されますが、JavaScriptは主にWebページ開発に使用されます。
      
							
      
														
      
								
									JavaScriptコメント：短い説明
								
								JavaScriptコメント：短い説明
								Jun 19, 2025 am	 12:40 AM
								
      JavaScriptcommentsEareEssentialential-formaining、およびGuidingCodeexecution.1）single-linecommentseared forquickexplanations.2）多LinecommentsexplaincomplexlogiCorprovidededocumentation.3）clarifyspartsofcode.bestpractic
      
							
      
														
      
								
									JSで日付と時(shí)間を操作する方法は？
								
								JSで日付と時(shí)間を操作する方法は？
								Jul 01, 2025 am	 01:27 AM
								
      JavaScriptで日付と時(shí)間を処理する場(chǎng)合は、次の點(diǎn)に注意する必要があります。1。日付オブジェクトを作成するには多くの方法があります。 ISO形式の文字列を使用して、互換性を確保することをお?jiǎng)幛幛筏蓼埂?2。時(shí)間情報(bào)を取得および設(shè)定して、メソッドを設(shè)定でき、月は0から始まることに注意してください。 3.手動(dòng)でのフォーマット日付には文字列が必要であり、サードパーティライブラリも使用できます。 4.ルクソンなどのタイムゾーンをサポートするライブラリを使用することをお?jiǎng)幛幛筏蓼?。これらの重要なポイントを?xí)得すると、一般的な間違いを効果的に回避できます。
      
							
      
														
      
								
									なぜの下部にタグを配置する必要があるのですか？
								
								なぜの下部にタグを配置する必要があるのですか？
								Jul 02, 2025 am	 01:22 AM
								
      PLACSTHETTHETTHE BOTTOMOFABLOGPOSTORWEBPAGESERVESPAGESPORCICALPURPOSESESFORSEO、userexperience、andDesign.1.IthelpswithiobyAllowingseNStoAccessKeysword-relevanttagwithtagwithtagwithtagwithemaincontent.2.iTimrovesexperiencebyepingepintepepinedeeping
      
							
      
														
      
								
									JavaScript vs. Java：開発者向けの包括的な比較
								
								JavaScript vs. Java：開発者向けの包括的な比較
								Jun 20, 2025 am	 12:21 AM
								
      javascriptispreferredforwebdevelopment、whilejavaisbetterforlge-scalebackendsystemsandroidapps.1）javascriptexcelsininintingtivewebexperiences withitsdynAmicnature anddommanipulation.2）javaofferstruntypyping-dobject-reientedpeatures
      
							
      
														
      
								
									JavaScript：効率的なコーディングのためのデータ型の調(diào)査
								
								JavaScript：効率的なコーディングのためのデータ型の調(diào)査
								Jun 20, 2025 am	 12:46 AM
								
      javascripthassevenfundamentaldatypes：number、string、boolean、undefined、null、object、andsymbol.1）numberseadouble-precisionformat、有用であるため、有用性の高いものであるため、but-for-loating-pointarithmetic.2）ストリングリムムット、使用率が有用であること
      
							
      
														
      
								
									DOMでのイベントの泡立ちとキャプチャとは何ですか？
								
								DOMでのイベントの泡立ちとキャプチャとは何ですか？
								Jul 02, 2025 am	 01:19 AM
								
      イベントキャプチャとバブルは、DOMのイベント伝播の2つの段階です。キャプチャは最上層からターゲット要素までであり、バブルはターゲット要素から上層までです。 1.イベントキャプチャは、AddEventListenerのUseCaptureパラメーターをTrueに設(shè)定することにより実裝されます。 2。イベントバブルはデフォルトの動(dòng)作であり、UseCaptureはfalseに設(shè)定されているか、省略されます。 3。イベントの伝播を使用して、イベントの伝播を防ぐことができます。 4.イベントバブルは、動(dòng)的なコンテンツ処理効率を改善するためにイベント委任をサポートします。 5.キャプチャを使用して、ロギングやエラー処理など、事前にイベントを傍受できます。これらの2つのフェーズを理解することは、タイミングとJavaScriptがユーザー操作にどのように反応するかを正確に制御するのに役立ちます。
      
							
      
														
      
								
									JavaとJavaScriptの違いは何ですか？
								
								JavaとJavaScriptの違いは何ですか？
								Jun 17, 2025 am	 09:17 AM
								
      JavaとJavaScriptは、異なるプログラミング言語(yǔ)です。 1.Javaは、エンタープライズアプリケーションや大規(guī)模なシステムに適した、靜的に型付けされ、コンパイルされた言語(yǔ)です。 2。JavaScriptは動(dòng)的なタイプと解釈された言語(yǔ)であり、主にWebインタラクションとフロントエンド開発に使用されます。
      
							
      
													
      

													
								See all articles