Mari kita bina bahagian hadapan web kepada kontrak pintar! Ini adalah susulan kepada siaran saya sebelum ini tentang membuat kontrak pintar mudah dengan Solidity dan Hardhat. Arahan di sini menganggap anda menerima kontrak yang sama yang baru kami gunakan untuk persekitaran Hardhat kami.

Dalam siaran terakhir kami mencipta dan menguji kontrak yang akan menambah pembilang yang disimpan dalam pembolehubah keadaan. Menggunakan konsol Hardhat kami memanggil fungsi incrementCount() dan getCount(). Di dunia nyata, antara muka dengan kontrak tidak akan melalui konsol pembangunan. Satu cara untuk mencipta aplikasi yang memanggil fungsi ini adalah melalui Javascript (melalui perpustakaan ethers.js) dalam halaman web - aplikasi Web3!

Seperti yang dinyatakan dalam catatan sebelum ini, berinteraksi dengan aplikasi web3 memerlukan pelayar yang mempunyai dompet terbina dalam. Dalam contoh mudah ini kita akan menggunakan Metamask. Metmask datang prakonfigurasi untuk Etherium dan mungkin beberapa blok blok berasaskan EVM lain, tetapi bukan blok blok simulasi kami dalam persekitaran Hardhat. Untuk menjalankan semua ini, kami akan menyediakan Metmask dahulu, kemudian mencipta HTML/Javascript yang diperlukan untuk memanggil kontrak kami.

Pelayar Metamask / Web3

1. Pasang Metamask. Saya akan menggunakan sambungan Chrome yang terdapat di sini. Jika anda seorang pengguna Chrome, ini akan membolehkan anda melihat dan berinteraksi dengan kandungan web3.

   Saya tidak akan membimbing anda melalui persediaan awal, tetapi anda mungkin akan digesa untuk mengimport kunci peribadi sedia ada atau menjana kunci baharu dan menulis frasa pemulihan. Lakukan itu.

2. Seterusnya kami akan menambah rangkaian Hardhat pada Metamask. Metamask menyokong mana-mana EVM yang anda mahukan, tetapi ia perlu dikonfigurasikan untuk berbuat demikian. Biasanya ini hanyalah soal menambah ID rantaian dan URL RPC. Dari dalam Metamask (anda mungkin perlu memulakannya dengan mengklik pada pemalam Chrome anda dan memilihnya) anda seharusnya melihat alamat awam anda di bahagian tengah atas. Di sebelah kiri alamat anda akan terdapat dropdown yang menunjukkan rangkaian semasa. Klik itu untuk melihat rangkaian lain yang tersedia:

   

   Klik "Tambah Rangkaian Tersuai". Isikan Nama Rangkaian dengan sesuatu seperti "Hardhat", URL RPC Rangkaian dengan alamat IP dan Pelabuhan Nod Hardhat anda, mungkin seperti ini jika anda menjalankannya secara setempat:
   http://127.0.0.1:8545/

   Masukkan ID Rantaian 1337 dan simbol hanya boleh menjadi ETH buat masa ini. Ambil perhatian bahawa kami tidak berurusan dengan ETH sebenar pada rangkaian Ethereum sebenar, tetapi berhati-hati untuk kekal di rangkaian Hardhat kami jika anda mempunyai ETH sebenar dalam dompet anda.

   Sekarang tukar kepada Rangkaian Hardhat yang baru kami tambah dalam pemalam Metamask. Dalam terminal anda yang memantau nod Hardhat anda yang sedang berjalan, anda sepatutnya melihat beberapa aktiviti semasa dompet anda disambungkan.

3. Memandangkan dompet Metamask anda pada masa ini tidak mempunyai sebarang ETH (palsu), mari hantarkannya. Dapatkan alamat awam anda daripada Metamask (di bahagian atas tetingkap Metamask, di bawah nama dompet, klik butang salin). Dari tetingkap terminal anda yang menjalankan konsol Hardhat, lakukan:
   

   const [owner,  feeCollector, operator] = await 
   ethers.getSigners();
   await owner.sendTransaction({ to: "PasteYourMetamaskAddressHere", value: ethers.parseEther("0.1") });
   

   Jika anda kembali ke Metamask, anda sepatutnya melihat bahawa anda kini mempunyai beberapa ETH dalam dompet Hardhat anda! Kini kami bersedia untuk melakukan beberapa transaksi web3 pada rangkaian Hardhat kami.

Buat Halaman Web Web3

1. Mari buat halaman web ringkas untuk melihat dan menambah kaunter kami. Saya tidak akan menggunakan sebarang rangka kerja yang berat, hanya HTML lama biasa, Javascript dan perpustakaan ethers.js. Walau bagaimanapun, anda tidak boleh hanya menghalakan penyemak imbas ke dokumen .htm, anda perlu menjalankan pelayan web di suatu tempat untuk pemalam Metamask berfungsi. Bergantung pada OS anda, anda mungkin boleh menggunakan pelayan ringan seperti http-server atau sesuatu setempat.

   Kami memerlukan beberapa perkara sejak kami menggunakan kontrak kami dalam siaran sebelumnya. Rujuk kembali siaran terakhir dan ambil alamat kontrak dan tatasusunan JSON ABI kontrak daripada direktori artifak. Kami tidak memerlukan JSON yang lain daripada fail itu, hanya apa yang ada dalam sifat "abi", ia harus bermula dengan [ dan berakhir dengan ] dan lihat sesuatu seperti ini:
   

   [
       {
         "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. Mari kita masukkan ini ke dalam beberapa HTML dan 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. You'll need to redeploy your smart contract every time you restart your Hardhat node.

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

Atas ialah kandungan terperinci WebI Untuk Kontrak Pintar Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!