Mkataba Mahiri wa Hello World kwa Wanaoanza - Fullstack

Mwongozo huu ni kwa ajili yako ikiwa wewe ni mgeni katika uundaji wa kiambajengo na hujui wapi pa kuanzia au jinsi ya kusambaza na kuingiliana na mikataba mahiri. Tutapitia hatua za kuunda na kusambaza mkataba mahiri rahisi kwenye mtandao wa testnet wa Goerli kwa kutumia MetaMask (opens in a new tab), Solidity (opens in a new tab), Hardhat (opens in a new tab), na Alchemy (opens in a new tab).

Utahitaji akaunti ya Alchemy ili kukamilisha mafunzo haya. Jisajili kwa akaunti ya bure (opens in a new tab).

Ikiwa una maswali wakati wowote, jisikie huru kuuliza katika Alchemy Discord (opens in a new tab)!

Sehemu ya 1 - Unda na Usambaze Mkataba Mahiri wako ukitumia Hardhat

Unganisha kwenye mtandao wa Ethereum

Kuna njia nyingi za kufanya maombi kwenye mnyororo wa Ethereum. Kwa urahisi, tutatumia akaunti ya bure kwenye Alchemy, jukwaa la msanidi wa kiambajengo na API inayoturuhusu kuwasiliana na mnyororo wa Ethereum bila kujiendeshea Nodi sisi wenyewe. Alchemy pia ina zana za wasanidi kwa ajili ya ufuatiliaji na uchanganuzi; tutatumia fursa hizi katika mafunzo haya ili kuelewa kinachoendelea nyuma ya pazia katika usambazaji wetu wa mkataba mahiri.

Unda programu yako na ufunguo wa API

Mara tu unapounda akaunti ya Alchemy, unaweza kuzalisha ufunguo wa API kwa kuunda programu. Hii itakuruhusu kufanya maombi kwenye testnet ya Goerli. Ikiwa hufahamu kuhusu testnets unaweza kusoma mwongozo wa Alchemy wa kuchagua mtandao (opens in a new tab).

Kwenye dashibodi ya Alchemy, tafuta menyu kunjuzi ya Apps katika upau wa kusogeza na ubofye Create App.

Ipe programu yako jina la 'Hello World' na uandike maelezo mafupi. Chagua Staging kama mazingira yako na Goerli kama mtandao wako.

Kumbuka: hakikisha umechagua Goerli, la sivyo mafunzo haya hayatafanya kazi.

Bofya Create app. Programu yako itaonekana kwenye jedwali hapa chini.

Unda akaunti ya Ethereum

Unahitaji akaunti ya Ethereum ili kutuma na kupokea miamala. Tutatumia MetaMask, mkoba wa mtandaoni kwenye kivinjari unaoruhusu watumiaji kudhibiti anwani ya akaunti yao ya Ethereum.

Unaweza kupakua na kuunda akaunti ya MetaMask bila malipo hapa (opens in a new tab). Unapounda akaunti, au ikiwa tayari una akaunti, hakikisha umebadilisha kwenda kwenye "Goerli Test Network" upande wa juu kulia (ili tusiwe tunashughulika na pesa halisi).

Hatua ya 4: Ongeza ether kutoka kwenye Bomba la majaribio

Ili kusambaza mkataba mahiri wako kwenye mtandao wa majaribio, utahitaji ETH bandia. Ili kupata ETH kwenye mtandao wa Goerli, nenda kwenye bomba la majaribio la Goerli na uweke anwani ya akaunti yako ya Goerli. Kumbuka kwamba mabomba ya majaribio ya Goerli yanaweza kuwa yasiyotegemewa hivi karibuni - tazama ukurasa wa mitandao ya majaribio kwa orodha ya chaguo za kujaribu:

Kumbuka: kutokana na msongamano wa mtandao, hii inaweza kuchukua muda. ``

Hatua ya 5: Angalia Salio lako

Ili kuhakikisha kuwa ETH ipo kwenye mkoba wako, hebu tufanye ombi la eth_getBalance (opens in a new tab) tukitumia zana ya kutunga ya Alchemy (opens in a new tab). Hii itarejesha kiasi cha ETH kwenye mkoba wetu. Ili kujifunza zaidi angalia mafunzo mafupi ya Alchemy kuhusu jinsi ya kutumia zana ya kutunga (opens in a new tab).

Weka anwani ya akaunti yako ya MetaMask na ubofye Send Request. Utaona jibu linalofanana na kijisehemu cha msimbo hapa chini.

1{ "jsonrpc": "2.0", "id": 0, "result": "0x2B5E3AF16B1880000" }
Nakala

Kumbuka: Matokeo haya yapo katika wei, si ETH. Wei inatumika kama kiasi kidogo zaidi cha ether.

Phew! Pesa zetu bandia zote zipo hapo.

Hatua ya 6: Anzisha mradi wetu

Kwanza, tutahitaji kuunda folda kwa ajili ya mradi wetu. Nenda kwenye mstari wako wa amri na uweke yafuatayo.

1mkdir hello-world
2cd hello-world

Sasa kwa kuwa tuko ndani ya folda yetu ya mradi, tutatumia npm init kuanzisha mradi.

Ikiwa bado hujasakinisha npm, fuata maagizo haya ili kusakinisha Node.js na npm (opens in a new tab).

Kwa madhumuni ya mafunzo haya, haijalishi jinsi unavyojibu maswali ya kuanzisha. Hivi ndivyo tulivyofanya kwa marejeleo:

1package name: (hello-world)
2version: (1.0.0)
3description: hello world smart contract
4entry point: (index.js)
5test command:
6git repository:
7keywords:
8author:
9license: (ISC)
10
11About to write to /Users/.../.../.../hello-world/package.json:
12
13{
14   "name": "hello-world",
15   "version": "1.0.0",
16   "description": "hello world smart contract",
17   "main": "index.js",
18   "scripts": {
19      "test": "echo \"Error: no test specified\" && exit 1"
20   },
21   "author": "",
22   "license": "ISC"
23}
Onyesha yote

Idhinisha package.json na tuko tayari kuendelea!

Hatua ya 7: Pakua Hardhat

Hardhat ni mazingira ya usanidi ya kukusanya, kusambaza, kujaribu, na kurekebisha programu yako ya Ethereum. Inasaidia wasanidi wanapounda mikataba mahiri na mfumo mtawanyo wa kimamlaka (dapps) ndani ya kompyuta zao kabla ya kusambaza kwenye mnyororo wa moja kwa moja.

Ndani ya mradi wetu wa hello-world endesha:

1npm install --save-dev hardhat

Angalia ukurasa huu kwa maelezo zaidi kuhusu maagizo ya usakinishaji (opens in a new tab).

Hatua ya 8: Unda mradi wa Hardhat

Ndani ya folda yetu ya mradi wa hello-world, endesha:

1npx hardhat

Kisha unapaswa kuona ujumbe wa kukaribisha na chaguo la kuchagua unachotaka kufanya. Chagua "create an empty hardhat.config.js":

1888    888                      888 888               888
2888    888                      888 888               888
3888    888                      888 888               888
48888888888  8888b.  888d888 .d88888 88888b.   8888b.  888888
5888    888     "88b 888P"  d88" 888 888 "88b     "88b 888
6888    888 .d888888 888    888  888 888  888 .d888888 888
7888    888 888  888 888    Y88b 888 888  888 888  888 Y88b.
8888    888 "Y888888 888     "Y88888 888  888 "Y888888  "Y888
9
10👷 Welcome to Hardhat v2.0.11 👷‍
11
12What do you want to do? …
13Create a sample project
14❯ Create an empty hardhat.config.js
15Quit
Onyesha yote

Hii itazalisha faili la hardhat.config.js kwenye mradi. Tutatumia hii baadaye katika mafunzo ili kubainisha usanidi wa mradi wetu.

Hatua ya 9: Ongeza folda za mradi

Ili kuweka mradi ukiwa umepangiliwa, hebu tuunde folda mbili mpya. Kwenye mstari wa amri, nenda kwenye saraka kuu ya mradi wako wa hello-world na uandike:

1mkdir contracts
2mkdir scripts

• contracts/ ndipo tutakapoweka faili letu la msimbo wa mkataba mahiri wa hello world
• scripts/ ndipo tutakapoweka hati za kusambaza na kuingiliana na mkataba wetu

Hatua ya 10: Andika mkataba wetu

Unaweza kuwa unajiuliza, ni lini tutaandika msimbo? Ni wakati sasa!

Fungua mradi wa hello-world kwenye kihariri chako unachokipenda. Mikataba mahiri mara nyingi huandikwa kwa Solidity, ambayo tutaitumia kuandika mkataba mahiri wetu.‌

1. Nenda kwenye folda ya contracts na uunde faili jipya linaloitwa HelloWorld.sol
2. Hapa chini kuna sampuli ya mkataba mahiri wa Hello World ambao tutautumia kwa mafunzo haya. Nakili yaliyomo hapa chini kwenye faili la HelloWorld.sol.

Kumbuka: Hakikisha unasoma maoni ili kuelewa kile mkataba huu unafanya.

1// Specifies the version of Solidity, using semantic versioning.
2// Learn more: https://solidity.readthedocs.io/en/v0.5.10/layout-of-source-files.html#pragma
3pragma solidity >=0.7.3;
4
5// Defines a contract named `HelloWorld`.
6// A contract is a collection of functions and data (its state). Once deployed, a contract resides at a specific address on the Ethereum blockchain. Learn more: https://solidity.readthedocs.io/en/v0.5.10/structure-of-a-contract.html
7contract HelloWorld {
8
9   //Emitted when update function is called
10   //Smart contract events are a way for your contract to communicate that something happened on the blockchain to your app front-end, which can be 'listening' for certain events and take action when they happen.
11   event UpdatedMessages(string oldStr, string newStr);
12
13   // Declares a state variable `message` of type `string`.
14   // State variables are variables whose values are permanently stored in contract storage. The keyword `public` makes variables accessible from outside a contract and creates a function that other contracts or clients can call to access the value.
15   string public message;
16
17   // Similar to many class-based object-oriented languages, a constructor is a special function that is only executed upon contract creation.
18   // Constructors are used to initialize the contract's data. Learn more:https://solidity.readthedocs.io/en/v0.5.10/contracts.html#constructors
19   constructor(string memory initMessage) {
20
21      // Accepts a string argument `initMessage` and sets the value into the contract's `message` storage variable).
22      message = initMessage;
23   }
24
25   // A public function that accepts a string argument and updates the `message` storage variable.
26   function update(string memory newMessage) public {
27      string memory oldMsg = message;
28      message = newMessage;
29      emit UpdatedMessages(oldMsg, newMessage);
30   }
31}
Onyesha yote

Huu ni mkataba mahiri wa msingi unaohifadhi ujumbe unapoundwa. Unaweza kusasishwa kwa kuita kipengele cha update.

Hatua ya 11: Unganisha MetaMask na Alchemy kwenye mradi wako

Tumeunda mkoba wa MetaMask, akaunti ya Alchemy, na kuandika mkataba mahiri wetu, sasa ni wakati wa kuunganisha vyote vitatu.

Kila muamala unaotumwa kutoka kwenye mkoba wako unahitaji saini kwa kutumia ufunguo binafsi wako wa kipekee. Ili kuipa programu yetu ruhusa hii, tunaweza kuhifadhi ufunguo binafsi wetu kwa usalama kwenye faili la mazingira. Pia tutahifadhi ufunguo wa API wa Alchemy hapa.

Ili kujifunza zaidi kuhusu kutuma miamala, angalia mafunzo haya (opens in a new tab) kuhusu kutuma miamala kwa kutumia web3.

Kwanza, sakinisha kifurushi cha dotenv kwenye saraka yako ya mradi:

1npm install dotenv --save

Kisha, unda faili la .env kwenye saraka kuu ya mradi. Ongeza ufunguo binafsi wako wa MetaMask na URL ya HTTP ya API ya Alchemy ndani yake.

Faili lako la mazingira lazima liitwe .env la sivyo halitatambuliwa kama faili la mazingira.

Usiliite process.env au .env-custom au jina lingine lolote.

• Fuata maagizo haya (opens in a new tab) ili kuhamisha ufunguo binafsi wako
• Tazama hapa chini ili kupata URL ya HTTP ya API ya Alchemy

Faili lako la .env linapaswa kuonekana hivi:

1API_URL = "https://eth-goerli.alchemyapi.io/v2/your-api-key"
2PRIVATE_KEY = "your-metamask-private-key"

Ili kuunganisha haya kwenye msimbo wetu, tutarejelea vigezo hivi kwenye faili letu la hardhat.config.js katika hatua ya 13.

Hatua ya 12: Sakinisha Ethers.js

Ethers.js ni maktaba inayorahisisha kuingiliana na kufanya maombi kwenye Ethereum kwa kufunga njia za kawaida za JSON-RPC (opens in a new tab) na njia zinazofaa zaidi kwa mtumiaji.

Hardhat inaturuhusu kujumuisha programu-jalizi (opens in a new tab) kwa zana za ziada na utendaji uliopanuliwa. Tutatumia fursa ya programu-jalizi ya Ethers (opens in a new tab) kwa usambazaji wa mkataba.

Kwenye saraka yako ya mradi andika:

npm install --save-dev @nomiclabs/hardhat-ethers "ethers@^5.0.0"

Hatua ya 13: Sasisha hardhat.config.js

Tumeongeza vitegemezi na programu-jalizi kadhaa hadi sasa, sasa tunahitaji kusasisha hardhat.config.js ili mradi wetu uzitambue zote.

Sasisha hardhat.config.js yako ili ionekane hivi:

1/**
2 * @type import('hardhat/config').HardhatUserConfig */
3
4require("dotenv").config()
5require("@nomiclabs/hardhat-ethers")
6
7const { API_URL, PRIVATE_KEY } = process.env
8
9module.exports = {
10  solidity: "0.7.3",
11  defaultNetwork: "goerli",
12  networks: {
13    hardhat: {},
14    goerli: {
15      url: API_URL,
16      accounts: [`0x${PRIVATE_KEY}`],
17    },
18  },
19}
Onyesha yote

Hatua ya 14: Kusanya mkataba wetu

Ili kuhakikisha kila kitu kinafanya kazi hadi sasa, hebu tukusanye mkataba wetu. Kazi ya compile ni mojawapo ya kazi zilizojengewa ndani za hardhat.

Kutoka kwenye mstari wa amri endesha:

npx hardhat compile

Unaweza kupata onyo kuhusu SPDX license identifier not provided in source file, lakini hakuna haja ya kuwa na wasiwasi kuhusu hilo — tunatumai kila kitu kingine kinaonekana vizuri! Ikiwa sivyo, unaweza kutuma ujumbe kwenye discord ya Alchemy (opens in a new tab) wakati wowote.

Hatua ya 15: Andika hati yetu ya kusambaza

Sasa kwa kuwa mkataba wetu umeandikwa na faili letu la usanidi liko tayari, ni wakati wa kuandika hati yetu ya kusambaza mkataba.

Nenda kwenye folda ya scripts/ na uunde faili jipya linaloitwa deploy.js , ukiongeza yaliyomo yafuatayo ndani yake:

1async function main() {
2  const HelloWorld = await ethers.getContractFactory("HelloWorld")
3
4  // Anza usambazaji, ukirudisha ahadi inayotatuliwa kuwa kitu cha mkataba
5  const hello_world = await HelloWorld.deploy("Hello World!")
6  console.log("Contract deployed to address:", hello_world.address)
7}
8
9main()
10  .then(() => process.exit(0))
11  .catch((error) => {
12    console.error(error)
13    process.exit(1)
14  })
Onyesha yote

Hardhat inafanya kazi nzuri sana ya kueleza kile kila mstari wa msimbo huu unafanya katika mafunzo yao ya Mikataba (opens in a new tab), tumetumia maelezo yao hapa.

1const HelloWorld = await ethers.getContractFactory("HelloWorld")

ContractFactory katika ethers.js ni dhana inayotumika kusambaza mikataba mahiri mipya, kwa hivyo HelloWorld hapa ni kiwanda (opens in a new tab) cha matukio ya mkataba wetu wa hello world. Unapotumia programu-jalizi ya hardhat-ethers ContractFactory na Contract, matukio huunganishwa kwa mtia saini wa kwanza (mmiliki) kwa chaguo-msingi.

1const hello_world = await HelloWorld.deploy()

Kuita deploy() kwenye ContractFactory kutaanzisha usambazaji, na kurejesha Promise inayotatuliwa kuwa kipengee cha Contract. Hiki ndicho kipengee kilicho na mbinu kwa kila moja ya kazi zetu za mkataba mahiri.

Hatua ya 16: Sambaza mkataba wetu

Hatimaye tuko tayari kusambaza mkataba mahiri wetu! Nenda kwenye mstari wa amri na uendeshe:

npx hardhat run scripts/deploy.js --network goerli

Kisha unapaswa kuona kitu kama:

Contract deployed to address: 0x6cd7d44516a20882cEa2DE9f205bF401c0d23570

Tafadhali hifadhi anwani hii. Tutaitumia baadaye katika mafunzo.

Tukienda kwenye Goerli etherscan (opens in a new tab) na kutafuta anwani ya mkataba wetu tunapaswa kuweza kuona kwamba umesambazwa kwa ufanisi. Muamala utaonekana kama hivi:

Anwani ya From inapaswa kulingana na anwani ya akaunti yako ya MetaMask na anwani ya To itasema Contract Creation. Tukibofya kwenye muamala tutaona anwani ya mkataba wetu kwenye sehemu ya To.

Hongera! Umetoka tu kusambaza mkataba mahiri kwenye testnet ya Ethereum.

Ili kuelewa kinachoendelea nyuma ya pazia, hebu twende kwenye kichupo cha Kichunguzi katika dashibodi yetu ya Alchemy (opens in a new tab). Ikiwa una programu nyingi za Alchemy hakikisha unachuja kwa programu na uchague Hello World.

Hapa utaona njia chache za JSON-RPC ambazo Hardhat/Ethers ilitutengenezea nyuma ya pazia tulipoiita kazi ya .deploy(). Njia mbili muhimu hapa ni eth_sendRawTransaction (opens in a new tab), ambalo ni ombi la kuandika mkataba wetu kwenye mnyororo wa Goerli, na eth_getTransactionByHash (opens in a new tab), ambalo ni ombi la kusoma taarifa kuhusu muamala wetu kwa kutumia hashi. Ili kujifunza zaidi kuhusu kutuma miamala, angalia mafunzo yetu kuhusu kutuma miamala kwa kutumia Web3.

Sehemu ya 2: Kuingiliana na Mkataba Mahiri wako

Kwa kuwa sasa tumefanikiwa kusambaza mkataba mahiri kwenye mtandao wa Goerli hebu tujifunze jinsi ya kuingiliana nao.

Unda faili la interact.js

Hili ndilo faili ambapo tutaandika hati yetu ya mwingiliano. Tutakuwa tukitumia maktaba ya Ethers.js uliyosakinisha hapo awali katika Sehemu ya 1.

Ndani ya folda ya scripts/, unda faili jipya linaloitwa interact.js ongeza msimbo ufuatao:

1// interact.js
2
3const API_KEY = process.env.API_KEY
4const PRIVATE_KEY = process.env.PRIVATE_KEY
5const CONTRACT_ADDRESS = process.env.CONTRACT_ADDRESS

Sasisha faili lako la .env

Tutakuwa tukitumia vigezo vipya vya mazingira, kwa hivyo tunahitaji kuvifafanua katika faili la .env ambalo tuliunda mapema.

Tutahitaji kuongeza ufafanuzi kwa API_KEY yetu ya Alchemy na CONTRACT_ADDRESS ambapo mkataba mahiri wako ulisambazwa.

Faili lako la .env linapaswa kuonekana kama hivi:

# .env

API_URL = "https://eth-goerli.alchemyapi.io/v2/<your-api-key>"
API_KEY = "<your-api-key>"
PRIVATE_KEY = "<your-metamask-private-key>"
CONTRACT_ADDRESS = "0x<your contract address>"

Chukua ABI ya mkataba wako

ya mkataba wetu ni kiolesura cha kuingiliana na mkataba mahiri wetu. Hardhat inazalisha ABI kiotomatiki na kuihifadhi katika HelloWorld.json. Ili kutumia ABI, tutahitaji kuchanganua yaliyomo kwa kuongeza mistari ifuatayo ya msimbo kwenye faili letu la interact.js:

1// interact.js
2const contract = require("../artifacts/contracts/HelloWorld.sol/HelloWorld.json")

Ikiwa unataka kuona ABI unaweza kuichapisha kwenye kiweko chako:

1console.log(JSON.stringify(contract.abi))

Ili kuona ABI yako ikichapishwa kwenye kiweko, nenda kwenye kituo chako na uendeshe:

npx hardhat run scripts/interact.js

Unda mfano wa mkataba wako

Ili kuingiliana na mkataba wetu, tunahitaji kuunda mfano wa mkataba katika msimbo wetu. Ili kufanya hivyo na Ethers.js, tutahitaji kufanya kazi na dhana tatu:

1. Mtoa huduma - mtoa huduma wa Nodi anayekupa ufikiaji wa kusoma na kuandika kwenye kiambajengo
2. Mtia saini - inawakilisha akaunti ya Ethereum inayoweza kutia saini miamala
3. Mkataba - kipengee cha Ethers.js kinachowakilisha mkataba maalum uliosambazwa ndani ya mnyororo

Tutatumia ABI ya mkataba kutoka hatua iliyopita ili kuunda mfano wetu wa mkataba:

1// interact.js
2
3// Mtoa huduma
4const alchemyProvider = new ethers.providers.AlchemyProvider(
5  (network = "goerli"),
6  API_KEY
7)
8
9// Mtia saini
10const signer = new ethers.Wallet(PRIVATE_KEY, alchemyProvider)
11
12// Mkataba
13const helloWorldContract = new ethers.Contract(
14  CONTRACT_ADDRESS,
15  contract.abi,
16  signer
17)
Onyesha yote

Jifunze zaidi kuhusu Watoa huduma, Watia saini, na Mikataba katika nyaraka za ethers.js (opens in a new tab).

Soma ujumbe wa kuanzisha

Unakumbuka tuliposambaza mkataba wetu na initMessage = "Hello world!"? Sasa tutasoma ujumbe huo uliohifadhiwa katika mkataba mahiri wetu na kuuchapisha kwenye kiweko.

Katika JavaScript, vitendaji visivyolingana (asynchronous functions) hutumika wakati wa kuingiliana na mitandao. Ili kujifunza zaidi kuhusu vitendaji visivyolingana, soma makala haya ya medium (opens in a new tab).

Tumia msimbo ulio hapa chini kuita kitendaji cha message katika mkataba mahiri wetu na usome ujumbe wa kuanzisha:

1// interact.js
2
3// ...
4
5async function main() {
6  const message = await helloWorldContract.message()
7  console.log("The message is: " + message)
8}
9main()
Onyesha yote

Baada ya kuendesha faili kwa kutumia npx hardhat run scripts/interact.js kwenye kituo tunapaswa kuona jibu hili:

1The message is: Hello world!

Hongera! Umefanikiwa kusoma data ya mkataba mahiri kutoka kwenye kiambajengo cha Ethereum, kazi nzuri!

Sasisha ujumbe

Badala ya kusoma tu ujumbe, tunaweza pia kusasisha ujumbe uliohifadhiwa katika mkataba mahiri wetu kwa kutumia kitendaji cha update! Inapendeza sana, sivyo?

Ili kusasisha ujumbe, tunaweza kuita moja kwa moja kitendaji cha update kwenye kipengee chetu cha Mkataba kilichoundwa:

1// interact.js
2
3// ...
4
5async function main() {
6  const message = await helloWorldContract.message()
7  console.log("The message is: " + message)
8
9  console.log("Updating the message...")
10  const tx = await helloWorldContract.update("This is the new message.")
11  await tx.wait()
12}
13main()
Onyesha yote

Kumbuka kwamba kwenye mstari wa 11, tunaita .wait() kwenye kipengee cha muamala kilichorejeshwa. Hii inahakikisha kwamba hati yetu inasubiri muamala kuchimbwa kwenye kiambajengo kabla ya kutoka kwenye kitendaji. Ikiwa wito wa .wait() haujajumuishwa, hati inaweza isione thamani iliyosasishwa ya message katika mkataba.

Soma ujumbe mpya

Unapaswa kuweza kurudia hatua iliyopita ili kusoma thamani iliyosasishwa ya message. Chukua muda na uone ikiwa unaweza kufanya mabadiliko yanayohitajika ili kuchapisha thamani hiyo mpya!

Ikiwa unahitaji dokezo, hivi ndivyo faili lako la interact.js linapaswa kuonekana kwa wakati huu:

1// interact.js
2
3const API_KEY = process.env.API_KEY
4const PRIVATE_KEY = process.env.PRIVATE_KEY
5const CONTRACT_ADDRESS = process.env.CONTRACT_ADDRESS
6
7const contract = require("../artifacts/contracts/HelloWorld.sol/HelloWorld.json")
8
9// mtoa huduma - Alchemy
10const alchemyProvider = new ethers.providers.AlchemyProvider(
11  (network = "goerli"),
12  API_KEY
13)
14
15// mtia saini - wewe
16const signer = new ethers.Wallet(PRIVATE_KEY, alchemyProvider)
17
18// mfano wa mkataba
19const helloWorldContract = new ethers.Contract(
20  CONTRACT_ADDRESS,
21  contract.abi,
22  signer
23)
24
25async function main() {
26  const message = await helloWorldContract.message()
27  console.log("The message is: " + message)
28
29  console.log("Updating the message...")
30  const tx = await helloWorldContract.update("this is the new message")
31  await tx.wait()
32
33  const newMessage = await helloWorldContract.message()
34  console.log("The new message is: " + newMessage)
35}
36
37main()
Onyesha yote

Sasa endesha tu hati na unapaswa kuweza kuona ujumbe wa zamani, hali ya kusasisha, na ujumbe mpya uliochapishwa kwenye kituo chako!

npx hardhat run scripts/interact.js --network goerli

1The message is: Hello World!
2Updating the message...
3The new message is: This is the new message.

Wakati unaendesha hati hiyo, unaweza kugundua kuwa hatua ya Updating the message... inachukua muda kupakia kabla ya ujumbe mpya kupakia. Hiyo inatokana na mchakato wa uchimbaji; ikiwa una hamu ya kufuatilia miamala wakati inachimbwa, tembelea mempool ya Alchemy (opens in a new tab) ili kuona hali ya muamala. Ikiwa muamala utaachwa, inasaidia pia kuangalia Goerli Etherscan (opens in a new tab) na kutafuta hashi ya muamala wako.

Sehemu ya 3: Chapisha Mkataba Mahiri wako kwenye Etherscan

Umefanya kazi ngumu yote ya kuleta mkataba mahiri wako kwenye uhalisia; sasa ni wakati wa kuushiriki na ulimwengu!

Kwa kuthibitisha mkataba mahiri wako kwenye Etherscan, mtu yeyote anaweza kutazama msimbo wako wa chanzo na kuingiliana na mkataba mahiri wako. Hebu tuanze!

Hatua ya 1: Tengeneza Ufunguo wa API kwenye akaunti yako ya Etherscan

Ufunguo wa API wa Etherscan ni muhimu ili kuthibitisha kuwa unamiliki mkataba mahiri unaojaribu kuuchapisha.

Ikiwa bado huna akaunti ya Etherscan, jisajili kwa ajili ya akaunti (opens in a new tab).

Baada ya kuingia, tafuta jina lako la mtumiaji kwenye upau wa kusogeza, weka mshale juu yake na uchague kitufe cha My profile.

Kwenye ukurasa wako wa wasifu, unapaswa kuona upau wa kusogeza wa pembeni. Kutoka kwenye upau wa kusogeza wa pembeni, chagua API Keys. Kisha, bonyeza kitufe cha "Add" ili kuunda ufunguo mpya wa API, ipatie programu yako jina la hello-world na ubonyeze kitufe cha Create New API Key.

Ufunguo wako mpya wa API unapaswa kuonekana kwenye jedwali la ufunguo wa API. Nakili ufunguo wa API kwenye ubao wako wa kunakili (clipboard).

Kisha, tunahitaji kuongeza ufunguo wa API wa Etherscan kwenye faili yetu ya .env.

Baada ya kuuongeza, faili yako ya .env inapaswa kuonekana hivi:

1API_URL = "https://eth-goerli.alchemyapi.io/v2/your-api-key"
2PUBLIC_KEY = "your-public-account-address"
3PRIVATE_KEY = "your-private-account-address"
4CONTRACT_ADDRESS = "your-contract-address"
5ETHERSCAN_API_KEY = "your-etherscan-key"

Mikataba mahiri iliyosambazwa na Hardhat

Sakinisha hardhat-etherscan

Kuchapisha mkataba wako kwenye Etherscan kwa kutumia Hardhat ni rahisi. Kwanza utahitaji kusakinisha programu-jalizi ya hardhat-etherscan ili kuanza. hardhat-etherscan itathibitisha kiotomatiki msimbo wa chanzo wa mkataba mahiri na ABI kwenye Etherscan. Ili kuongeza hii, katika saraka ya hello-world endesha:

1npm install --save-dev @nomiclabs/hardhat-etherscan

Baada ya kusakinishwa, jumuisha taarifa ifuatayo juu ya hardhat.config.js yako, na uongeze chaguo za usanidi za Etherscan:

1// hardhat.config.js
2
3require("dotenv").config()
4require("@nomiclabs/hardhat-ethers")
5require("@nomiclabs/hardhat-etherscan")
6
7const { API_URL, PRIVATE_KEY, ETHERSCAN_API_KEY } = process.env
8
9module.exports = {
10  solidity: "0.7.3",
11  defaultNetwork: "goerli",
12  networks: {
13    hardhat: {},
14    goerli: {
15      url: API_URL,
16      accounts: [`0x${PRIVATE_KEY}`],
17    },
18  },
19  etherscan: {
20    // Ufunguo wako wa API kwa Etherscan
21    // Pata moja kwenye https://etherscan.io/
22    apiKey: ETHERSCAN_API_KEY,
23  },
24}
Onyesha yote

Thibitisha mkataba mahiri wako kwenye Etherscan

Hakikisha faili zote zimehifadhiwa na vigezo vyote vya .env vimesanidiwa kwa usahihi.

Endesha jukumu la verify, ukipitisha anwani ya mkataba, na mtandao ambapo imesambazwa:

1npx hardhat verify --network goerli DEPLOYED_CONTRACT_ADDRESS 'Hello World!'

Hakikisha kwamba DEPLOYED_CONTRACT_ADDRESS ni anwani ya mkataba mahiri wako uliosambazwa kwenye mtandao wa testnet wa Goerli. Pia, hoja ya mwisho ('Hello World!') lazima iwe thamani sawa ya mfuatano iliyotumika wakati wa hatua ya kusambaza katika sehemu ya 1.

Ikiwa yote yataenda vizuri, utaona ujumbe ufuatao kwenye terminal yako:

1Successfully submitted source code for contract
2contracts/HelloWorld.sol:HelloWorld at 0xdeployed-contract-address
3for verification on Etherscan. Waiting for verification result...
4
5
6Successfully verified contract HelloWorld on Etherscan.
7https: // goerli.etherscan.io/address/<contract-address>#contracts

Hongera! Msimbo wako wa mkataba mahiri upo kwenye Etherscan!

Angalia mkataba mahiri wako kwenye Etherscan!

Unapoenda kwenye kiungo kilichotolewa kwenye terminal yako, unapaswa kuweza kuona msimbo wako wa mkataba mahiri na ABI iliyochapishwa kwenye Etherscan!

Wahooo - umefanya vizuri bingwa! Sasa mtu yeyote anaweza kuita au kuandika kwenye mkataba mahiri wako! Hatuwezi kusubiri kuona utajenga nini baadaye!

Sehemu ya 4 - Kuunganisha mkataba mahiri wako na frontend

Kufikia mwisho wa mafunzo haya, utajua jinsi ya:

• Kuunganisha mkoba wa MetaMask kwenye dapp yako
• Kusoma data kutoka kwenye mkataba mahiri wako ukitumia API ya Alchemy Web3 (opens in a new tab)
• Kusaini miamala ya Ethereum ukitumia MetaMask

Kwa dapp hii, tutatumia React (opens in a new tab) kama mfumo wetu wa frontend; hata hivyo, ni muhimu kutambua kwamba hatutatumia muda mwingi kuchambua misingi yake, kwani tutazingatia zaidi kuleta utendaji wa Web3 kwenye mradi wetu.

Kama sharti, unapaswa kuwa na uelewa wa kiwango cha kuanza wa React. Ikiwa sivyo, tunapendekeza ukamilishe Mafunzo ya Utangulizi wa React (opens in a new tab) rasmi.

Nakili faili za kuanzia

Kwanza, nenda kwenye hifadhi ya GitHub ya hello-world-part-four (opens in a new tab) ili kupata faili za kuanzia za mradi huu na unakili hifadhi hii kwenye mashine yako ya ndani.

Fungua hifadhi iliyonakiliwa ndani ya kompyuta yako. Kumbuka kwamba ina folda mbili: starter-files na completed.

• starter-files- tutakuwa tukifanya kazi katika saraka hii, tutaunganisha UI kwenye mkoba wako wa Ethereum na mkataba mahiri tuliouchapisha kwenye Etherscan katika Sehemu ya 3.
• completed ina mafunzo yote yaliyokamilika na inapaswa kutumika tu kama rejeleo ikiwa utakwama.

Ifuatayo, fungua nakala yako ya starter-files kwenye kihariri chako cha msimbo unachokipenda, na kisha nenda kwenye folda ya src.

Msimbo wote tutakaoandika utakuwa chini ya folda ya src. Tutakuwa tukihariri kipengele cha HelloWorld.js na faili za JavaScript za util/interact.js ili kuupa mradi wetu utendaji wa Web3.

Angalia faili za kuanzia

Kabla hatujaanza kuandika msimbo, hebu tuchunguze kile tulichopewa kwenye faili za kuanzia.

Fanya mradi wako wa react ufanye kazi

Hebu tuanze kwa kuendesha mradi wa React kwenye kivinjari chetu. Uzuri wa React ni kwamba mara tu tunapokuwa na mradi wetu unaoendeshwa kwenye kivinjari chetu, mabadiliko yoyote tunayohifadhi yatasasishwa moja kwa moja kwenye kivinjari chetu.

Ili kufanya mradi ufanye kazi, nenda kwenye saraka kuu ya folda ya starter-files, na uendeshe npm install kwenye terminal yako ili kusakinisha vitegemezi vya mradi:

cd starter-files
npm install

Mara tu hizo zitakapomaliza kusakinishwa, endesha npm start kwenye terminal yako:

npm start

Kufanya hivyo kunapaswa kufungua http://localhost:3000/ (opens in a new tab) kwenye kivinjari chako, ambapo utaona frontend ya mradi wetu. Inapaswa kuwa na uwanja mmoja (mahali pa kusasisha ujumbe uliohifadhiwa kwenye mkataba mahiri wako), kitufe cha "Connect Wallet", na kitufe cha "Update".

Ikiwa utajaribu kubofya kitufe chochote, utagundua kuwa havifanyi kazi—hiyo ni kwa sababu bado tunahitaji kupanga utendaji wao.

Kipengele cha HelloWorld.js

Hebu turudi kwenye folda ya src kwenye kihariri chetu na tufungue faili ya HelloWorld.js. Ni muhimu sana tuelewe kila kitu katika faili hili, kwani ndicho kipengele kikuu cha React tutakachokuwa tukifanyia kazi.

Juu ya faili hili, utagundua tuna taarifa kadhaa za kuingiza ambazo ni muhimu ili kufanya mradi wetu ufanye kazi, ikiwa ni pamoja na maktaba ya React, ndoano za useEffect na useState, baadhi ya vipengee kutoka ./util/interact.js (tutavielezea kwa undani zaidi hivi karibuni!), na nembo ya Alchemy.

1// HelloWorld.js
2
3import React from "react"
4import { useEffect, useState } from "react"
5import {
6  helloWorldContract,
7  connectWallet,
8  updateMessage,
9  loadCurrentMessage,
10  getCurrentWalletConnected,
11} from "./util/interact.js"
12
13import alchemylogo from "./alchemylogo.svg"
Onyesha yote

Ifuatayo, tuna vigezo vyetu vya hali ambavyo tutavisasisha baada ya matukio maalum.

1// HelloWorld.js
2
3// Vigezo vya hali
4const [walletAddress, setWallet] = useState("")
5const [status, setStatus] = useState("")
6const [message, setMessage] = useState("No connection to the network.")
7const [newMessage, setNewMessage] = useState("")

Hapa kuna kile kila kigezo kinawakilisha:

• walletAddress - mfuatano unaohifadhi anwani ya mkoba wa mtumiaji
• status- mfuatano unaohifadhi ujumbe wa msaada unaomwongoza mtumiaji jinsi ya kuingiliana na dapp
• message - mfuatano unaohifadhi ujumbe wa sasa katika mkataba mahiri
• newMessage - mfuatano unaohifadhi ujumbe mpya utakaondikwa kwenye mkataba mahiri

Baada ya vigezo vya hali, utaona vitendaji vitano ambavyo havijatekelezwa: useEffect ,addSmartContractListener, addWalletListener , connectWalletPressed, na onUpdatePressed. Tutafafanua kile wanachofanya hapa chini:

1// HelloWorld.js
2
3// huitwa mara moja tu
4useEffect(async () => {
5  // TODO: tekeleza
6}, [])
7
8function addSmartContractListener() {
9  // TODO: tekeleza
10}
11
12function addWalletListener() {
13  // TODO: tekeleza
14}
15
16const connectWalletPressed = async () => {
17  // TODO: tekeleza
18}
19
20const onUpdatePressed = async () => {
21  // TODO: tekeleza
22}
Onyesha yote

• useEffect (opens in a new tab)- hii ni ndoano ya React inayoitwa baada ya kipengele chako kutolewa. Kwa sababu ina propu ya safu tupu [] iliyopitishwa ndani yake (tazama mstari wa 4), itaitwa tu kwenye utoaji wa kwanza wa kipengele. Hapa tutapakia ujumbe wa sasa uliohifadhiwa kwenye mkataba mahiri wetu, tutaita wasikilizaji wetu wa mkataba mahiri na mkoba, na kusasisha UI yetu ili kuonyesha ikiwa mkoba tayari umeunganishwa.
• addSmartContractListener- kitendaji hiki kinaweka msikilizaji ambaye atatazama tukio la UpdatedMessages la mkataba wetu wa HelloWorld na kusasisha UI yetu wakati ujumbe unabadilishwa kwenye mkataba mahiri wetu.
• addWalletListener- kitendaji hiki kinaweka msikilizaji anayegundua mabadiliko katika hali ya mkoba wa MetaMask wa mtumiaji, kama vile wakati mtumiaji anapokata muunganisho wa mkoba wao au kubadilisha anwani.
• connectWalletPressed- kitendaji hiki kitaitwa ili kuunganisha mkoba wa MetaMask wa mtumiaji kwenye dapp yetu.
• onUpdatePressed - kitendaji hiki kitaitwa wakati mtumiaji anataka kusasisha ujumbe uliohifadhiwa kwenye mkataba mahiri.

Karibu na mwisho wa faili hili, tuna UI ya kipengele chetu.

1// HelloWorld.js
2
3// kiolesura cha mtumiaji cha kijenzi chetu
4return (
5  <div id="container">
6    <img id="logo" src={alchemylogo}></img>
7    <button id="walletButton" onClick={connectWalletPressed}>
8      {walletAddress.length > 0 ? (
9        "Connected: " +
10        String(walletAddress).substring(0, 6) +
11        "..." +
12        String(walletAddress).substring(38)
13      ) : (
14        <span>Connect Wallet</span>
15      )}
16    </button>
17
18    <h2 style={{ paddingTop: "50px" }}>Current Message:</h2>
19    <p>{message}</p>
20
21    <h2 style={{ paddingTop: "18px" }}>New Message:</h2>
22
23    <div>
24      <input
25        type="text"
26        placeholder="Update the message in your smart contract."
27        onChange={(e) => setNewMessage(e.target.value)}
28        value={newMessage}
29      />
30      <p id="status">{status}</p>
31
32      <button id="publishButton" onClick={onUpdatePressed}>
33        Update
34      </button>
35 
36</div>
37 
38</div>
39)
Onyesha yote

Ikiwa utachunguza msimbo huu kwa uangalifu, utagundua mahali tunapotumia vigezo vyetu mbalimbali vya hali katika UI yetu:

• Kwenye mistari ya 6-12, ikiwa mkoba wa mtumiaji umeunganishwa (yaani, walletAddress.length > 0), tunaonyesha toleo lililofupishwa la walletAddress ya mtumiaji kwenye kitufe chenye kitambulisho "walletButton;" vinginevyo inasema tu "Connect Wallet."
• Kwenye mstari wa 17, tunaonyesha ujumbe wa sasa uliohifadhiwa kwenye mkataba mahiri, ambao unanaswa katika mfuatano wa message.
• Kwenye mistari ya 23-26, tunatumia kipengele kinachodhibitiwa (opens in a new tab) kusasisha kigezo chetu cha hali cha newMessage wakati ingizo katika uwanja wa maandishi linabadilika.

Mbali na vigezo vyetu vya hali, utaona pia kwamba vitendaji vya connectWalletPressed na onUpdatePressed vinaitwa wakati vitufe vyenye vitambulisho publishButton na walletButton vinapobofywa mtawalia.

Hatimaye, hebu tushughulikie wapi kipengele hiki cha HelloWorld.js kinaongezwa.

Ikiwa utaenda kwenye faili ya App.js, ambayo ni kipengele kikuu katika React kinachofanya kazi kama chombo cha vipengele vingine vyote, utaona kwamba kipengele chetu cha HelloWorld.js kinaingizwa kwenye mstari wa 7.

Mwisho kabisa, hebu tuangalie faili moja zaidi uliyopewa, faili ya interact.js.

Faili ya interact.js

Kwa sababu tunataka kufuata dhana ya M-V-C (opens in a new tab), tutataka faili tofauti ambalo lina vitendaji vyetu vyote vya kusimamia mantiki, data, na sheria za dapp yetu, na kisha kuweza kuhamisha vitendaji hivyo kwenye frontend yetu (kipengele chetu cha HelloWorld.js).

👆🏽Hili ndilo dhumuni hasa la faili yetu ya interact.js!

Nenda kwenye folda ya util katika saraka yako ya src, na utagundua tumejumuisha faili inayoitwa interact.js ambayo itakuwa na mwingiliano wetu wote wa mkataba mahiri na vitendaji na vigezo vya mkoba.

1// interact.js
2
3// export const helloWorldContract;
4
5export const loadCurrentMessage = async () => {}
6
7export const connectWallet = async () => {}
8
9const getCurrentWalletConnected = async () => {}
10
11export const updateMessage = async (message) => {}
Onyesha yote

Utagundua juu ya faili kwamba tumetoa maoni kwenye kipengee cha helloWorldContract. Baadaye katika mafunzo haya, tutaondoa maoni kwenye kipengee hiki na kuanzisha mkataba mahiri wetu katika kigezo hiki, ambacho kisha tutakihamisha kwenye kipengele chetu cha HelloWorld.js.

Vitendaji vinne ambavyo havijatekelezwa baada ya kipengee chetu cha helloWorldContract vinafanya yafuatayo:

• loadCurrentMessage - kitendaji hiki kinashughulikia mantiki ya kupakia ujumbe wa sasa uliohifadhiwa kwenye mkataba mahiri. Kitafanya wito wa kusoma kwenye mkataba mahiri wa Hello World kwa kutumia API ya Alchemy Web3 (opens in a new tab).
• connectWallet - kitendaji hiki kitaunganisha MetaMask ya mtumiaji kwenye dapp yetu.
• getCurrentWalletConnected - kitendaji hiki kitaangalia ikiwa akaunti ya Ethereum tayari imeunganishwa kwenye dapp yetu wakati wa kupakia ukurasa na kusasisha UI yetu ipasavyo.
• updateMessage - kitendaji hiki kitasasisha ujumbe uliohifadhiwa kwenye mkataba mahiri. Kitafanya wito wa kuandika kwenye mkataba mahiri wa Hello World, kwa hivyo mkoba wa MetaMask wa mtumiaji utalazimika kusaini muamala wa Ethereum ili kusasisha ujumbe.

Sasa kwa kuwa tunaelewa kile tunachofanya kazi nacho, hebu tujue jinsi ya kusoma kutoka kwenye mkataba mahiri wetu!

Hatua ya 3: Soma kutoka kwenye mkataba mahiri wako

Ili kusoma kutoka kwenye mkataba mahiri wako, utahitaji kuweka kwa ufanisi:

• Muunganisho wa API kwenye mnyororo wa Ethereum
• Mfano uliopakiwa wa mkataba mahiri wako
• Kitendaji cha kuita kwenye kitendaji cha mkataba mahiri wako
• Msikilizaji wa kutazama sasisho wakati data unayosoma kutoka kwenye mkataba mahiri inabadilika

Hii inaweza kusikika kama hatua nyingi, lakini usijali! Tutakutembeza jinsi ya kufanya kila moja wapo hatua kwa hatua! :)

Anzisha muunganisho wa API kwenye mnyororo wa Ethereum

Kwa hivyo kumbuka jinsi katika Sehemu ya 2 ya mafunzo haya, tulitumia ufunguo wetu wa Alchemy Web3 kusoma kutoka kwenye mkataba mahiri wetu (opens in a new tab)? Utahitaji pia ufunguo wa Alchemy Web3 kwenye dapp yako ili kusoma kutoka kwenye mnyororo.

Ikiwa huna tayari, kwanza sakinisha Alchemy Web3 (opens in a new tab) kwa kwenda kwenye saraka kuu ya starter-files yako na kuendesha yafuatayo kwenye terminal yako:

1npm install @alch/alchemy-web3

Alchemy Web3 (opens in a new tab) ni kanga inayozunguka Web3.js (opens in a new tab), ikitoa mbinu zilizoboreshwa za API na faida zingine muhimu ili kurahisisha maisha yako kama msanidi wa web3. Imeundwa kuhitaji usanidi mdogo ili uweze kuanza kuitumia kwenye programu yako mara moja!

Kisha, sakinisha kifurushi cha dotenv (opens in a new tab) katika saraka ya mradi wako, ili tuwe na mahali salama pa kuhifadhi ufunguo wetu wa API baada ya kuuchukua.

1npm install dotenv --save

Kwa dapp yetu, tutatumia ufunguo wetu wa API wa Websockets badala ya ufunguo wetu wa API wa HTTP, kwani itaturuhusu kuweka msikilizaji anayegundua wakati ujumbe uliohifadhiwa kwenye mkataba mahiri unabadilika.

Mara tu unapokuwa na ufunguo wako wa API, tengeneza faili ya .env katika saraka yako kuu na uongeze url yako ya Alchemy Websockets kwake. Baadaye, faili yako ya .env inapaswa kuonekana hivi:

1REACT_APP_ALCHEMY_KEY = wss: // eth-goerli.ws.alchemyapi.io/v2/<key>

Sasa, tuko tayari kuweka mwisho wetu wa Alchemy Web3 kwenye dapp yetu! Hebu turudi kwenye interact.js yetu, ambayo imewekwa ndani ya folda yetu ya util na tuongeze msimbo ufuatao juu ya faili:

1// interact.js
2
3require("dotenv").config()
4const alchemyKey = process.env.REACT_APP_ALCHEMY_KEY
5const { createAlchemyWeb3 } = require("@alch/alchemy-web3")
6const web3 = createAlchemyWeb3(alchemyKey)
7
8// export const helloWorldContract;

Hapo juu, kwanza tuliingiza ufunguo wa Alchemy kutoka kwenye faili yetu ya .env na kisha tukapitisha alchemyKey yetu kwa createAlchemyWeb3 ili kuanzisha mwisho wetu wa Alchemy Web3.

Pamoja na mwisho huu kuwa tayari, ni wakati wa kupakia mkataba mahiri wetu!

Kupakia mkataba mahiri wako wa Hello World

Ili kupakia mkataba mahiri wako wa Hello World, utahitaji anwani ya mkataba wake na ABI, ambazo zote zinaweza kupatikana kwenye Etherscan ikiwa ulikamilisha Sehemu ya 3 ya mafunzo haya.

Jinsi ya kupata ABI ya mkataba wako kutoka Etherscan

Ikiwa uliruka Sehemu ya 3 ya mafunzo haya, unaweza kutumia mkataba wa HelloWorld wenye anwani 0x6f3f635A9762B47954229Ea479b4541eAF402A6A (opens in a new tab). ABI yake inaweza kupatikana hapa (opens in a new tab).

ABI ya mkataba ni muhimu kwa kubainisha ni kitendaji gani mkataba utaita na pia kuhakikisha kwamba kitendaji kitarudisha data katika muundo unaotarajia. Mara tu tunaponakili ABI ya mkataba wetu, hebu tuihifadhi kama faili ya JSON inayoitwa contract-abi.json katika saraka yako ya src.

Faili yako ya contract-abi.json inapaswa kuhifadhiwa kwenye folda yako ya src.

Tukiwa na anwani yetu ya mkataba, ABI, na mwisho wa Alchemy Web3, tunaweza kutumia mbinu ya mkataba (opens in a new tab) kupakia mfano wa mkataba mahiri wetu. Ingiza ABI ya mkataba wako kwenye faili ya interact.js na uongeze anwani ya mkataba wako.

1// interact.js
2
3const contractABI = require("../contract-abi.json")
4const contractAddress = "0x6f3f635A9762B47954229Ea479b4541eAF402A6A"

Sasa tunaweza hatimaye kuondoa maoni kwenye kigezo chetu cha helloWorldContract, na kupakia mkataba mahiri kwa kutumia mwisho wetu wa AlchemyWeb3:

1// interact.js
2export const helloWorldContract = new web3.eth.Contract(
3  contractABI,
4  contractAddress
5)

Kwa muhtasari, mistari 12 ya kwanza ya interact.js yako sasa inapaswa kuonekana hivi:

1// interact.js
2
3require("dotenv").config()
4const alchemyKey = process.env.REACT_APP_ALCHEMY_KEY
5const { createAlchemyWeb3 } = require("@alch/alchemy-web3")
6const web3 = createAlchemyWeb3(alchemyKey)
7
8const contractABI = require("../contract-abi.json")
9const contractAddress = "0x6f3f635A9762B47954229Ea479b4541eAF402A6A"
10
11export const helloWorldContract = new web3.eth.Contract(
12  contractABI,
13  contractAddress
14)
Onyesha yote

Sasa kwa kuwa tumepakia mkataba wetu, tunaweza kutekeleza kitendaji chetu cha loadCurrentMessage!

Kutekeleza loadCurrentMessage katika faili yako ya interact.js

Kitendaji hiki ni rahisi sana. Tutafanya wito rahisi wa async wa web3 kusoma kutoka kwenye mkataba wetu. Kitendaji chetu kitarudisha ujumbe uliohifadhiwa kwenye mkataba mahiri:

Sasisha loadCurrentMessage katika faili yako ya interact.js kwa yafuatayo:

1// interact.js
2
3export const loadCurrentMessage = async () => {
4  const message = await helloWorldContract.methods.message().call()
5  return message
6}

Kwa kuwa tunataka kuonyesha mkataba mahiri huu kwenye UI yetu, hebu tusasishe kitendaji cha useEffect katika kipengele chetu cha HelloWorld.js kwa yafuatayo:

1// HelloWorld.js
2
3// huitwa mara moja tu
4useEffect(async () => {
5  const message = await loadCurrentMessage()
6  setMessage(message)
7}, [])

Kumbuka, tunataka tu loadCurrentMessage yetu iitwe mara moja wakati wa utoaji wa kwanza wa kipengele. Hivi karibuni tutatekeleza addSmartContractListener ili kusasisha UI kiotomatiki baada ya ujumbe kwenye mkataba mahiri kubadilika.

Kabla hatujaingia kwenye msikilizaji wetu, hebu tuangalie kile tulicho nacho hadi sasa! Hifadhi faili zako za HelloWorld.js na interact.js, na kisha nenda kwenye http://localhost:3000/ (opens in a new tab)

Utagundua kuwa ujumbe wa sasa hausemi tena "Hakuna muunganisho kwenye mtandao." Badala yake unaonyesha ujumbe uliohifadhiwa kwenye mkataba mahiri. Safi sana!

UI yako sasa inapaswa kuonyesha ujumbe uliohifadhiwa kwenye mkataba mahiri

Sasa tukizungumzia msikilizaji huyo...

Tekeleza addSmartContractListener

Ikiwa unakumbuka faili ya HelloWorld.sol tuliyoiandika katika Sehemu ya 1 ya mfululizo huu wa mafunzo (opens in a new tab), utakumbuka kuwa kuna tukio la mkataba mahiri linaloitwa UpdatedMessages ambalo hutolewa baada ya kitendaji cha update cha mkataba mahiri wetu kuitwa (tazama mistari ya 9 na 27):

1// HelloWorld.sol
2
3// Inabainisha toleo la Solidity, ikitumia uwekaji matoleo wa kisemantiki.
4// Jifunze zaidi: https://solidity.readthedocs.io/en/v0.5.10/layout-of-source-files.html#pragma
5pragma solidity ^0.7.3;
6
7// Inafafanua mkataba unaoitwa `HelloWorld`.
8// Mkataba ni mkusanyiko wa kazi na data (hali yake). Baada ya kusambazwa, mkataba hukaa kwenye anwani maalum kwenye blockchain ya Ethereum. Jifunze zaidi: https://solidity.readthedocs.io/en/v0.5.10/structure-of-a-contract.html
9contract HelloWorld {
10
11   // Hutolewa wakati kazi ya kusasisha inapoitwa
12   // Matukio ya mkataba mahiri ni njia ya mkataba wako kuwasiliana kwamba kuna kitu kimetokea kwenye blockchain kwenda kwenye front-end ya programu yako, ambayo inaweza kuwa 'inasikiliza' matukio fulani na kuchukua hatua yanapotokea.
13   event UpdatedMessages(string oldStr, string newStr);
14
15   // Inatangaza kigezo cha hali `message` cha aina ya `string`.
16   // Vigezo vya hali ni vigezo ambavyo thamani zake huhifadhiwa kabisa kwenye hifadhi ya mkataba. Neno kuu `public` hufanya vigezo viweze kufikiwa kutoka nje ya mkataba na huunda kazi ambayo mikataba mingine au wateja wanaweza kuita ili kufikia thamani.
17   string public message;
18
19   // Sawa na lugha nyingi zinazoelekezwa kwa vitu zinazotegemea darasa, constructor ni kazi maalum ambayo hutekelezwa tu wakati wa kuunda mkataba.
20   // Constructors hutumika kuanzisha data ya mkataba. Jifunze zaidi:https://solidity.readthedocs.io/en/v0.5.10/contracts.html#constructors
21   constructor(string memory initMessage) {
22
23      // Inakubali hoja ya string `initMessage` na kuweka thamani kwenye kigezo cha hifadhi cha `message` cha mkataba).
24      message = initMessage;
25   }
26
27   // Kazi ya umma inayokubali hoja ya string na kusasisha kigezo cha hifadhi cha `message`.
28   function update(string memory newMessage) public {
29      string memory oldMsg = message;
30      message = newMessage;
31      emit UpdatedMessages(oldMsg, newMessage);
32   }
33}
Onyesha yote

Matukio ya mkataba mahiri ni njia ya mkataba wako kuwasiliana kwamba kuna kitu kimetokea (yaani, kulikuwa na tukio) kwenye kiambajengo kwenda kwenye programu yako ya front-end, ambayo inaweza kuwa 'inasikiliza' matukio maalum na kuchukua hatua yanapotokea.

Kitendaji cha addSmartContractListener kitasikiliza haswa tukio la UpdatedMessages la mkataba mahiri wetu wa Hello World, na kusasisha UI yetu ili kuonyesha ujumbe mpya.

Badilisha addSmartContractListener kwa yafuatayo:

1// HelloWorld.js
2
3function addSmartContractListener() {
4  helloWorldContract.events.UpdatedMessages({}, (error, data) => {
5    if (error) {
6      setStatus("😥 " + error.message)
7    } else {
8      setMessage(data.returnValues[1])
9      setNewMessage("")
10      setStatus("🎉 Your message has been updated!")
11    }
12  })
13}
Onyesha yote

Hebu tuchambue kile kinachotokea wakati msikilizaji anagundua tukio:

• Ikiwa hitilafu itatokea wakati tukio linatolewa, itaonyeshwa kwenye UI kupitia kigezo chetu cha hali cha status.
• Vinginevyo, tutatumia kipengee cha data kilichorudishwa. data.returnValues ni safu iliyoorodheshwa kwenye sifuri ambapo kipengele cha kwanza kwenye safu kinahifadhi ujumbe uliopita na kipengele cha pili kinahifadhi ule uliosasishwa. Kwa ujumla, kwenye tukio lenye mafanikio tutaweka mfuatano wetu wa message kwa ujumbe uliosasishwa, kufuta mfuatano wa newMessage, na kusasisha kigezo chetu cha hali cha status ili kuonyesha kwamba ujumbe mpya umechapishwa kwenye mkataba mahiri wetu.

Hatimaye, hebu tuite msikilizaji wetu katika kitendaji chetu cha useEffect ili kianzishwe kwenye utoaji wa kwanza wa kipengele cha HelloWorld.js. Kwa ujumla, kitendaji chako cha useEffect kinapaswa kuonekana hivi:

1// HelloWorld.js
2
3useEffect(async () => {
4  const message = await loadCurrentMessage()
5  setMessage(message)
6  addSmartContractListener()
7}, [])

Sasa kwa kuwa tunaweza kusoma kutoka kwenye mkataba mahiri wetu, itakuwa vizuri kujua jinsi ya kuandika kwake pia! Hata hivyo, ili kuandika kwenye dapp yetu, lazima kwanza tuwe na mkoba wa Ethereum uliounganishwa kwake.

Kwa hivyo, ifuatayo tutashughulikia kuweka mkoba wetu wa Ethereum (MetaMask) na kisha kuuunganisha kwenye dapp yetu!

Hatua ya 4: Weka mkoba wako wa Ethereum

Ili kuandika chochote kwenye mnyororo wa Ethereum, watumiaji lazima wasaini miamala wakitumia funguo zao binafsi za mkoba wao wa mtandaoni. Kwa mafunzo haya, tutatumia MetaMask (opens in a new tab), mkoba wa mtandaoni kwenye kivinjari unaotumika kusimamia anwani ya akaunti yako ya Ethereum, kwani inafanya usainiji huu wa muamala kuwa rahisi sana kwa mtumiaji wa mwisho.

Ikiwa unataka kuelewa zaidi kuhusu jinsi miamala kwenye Ethereum inavyofanya kazi, angalia ukurasa huu kutoka kwa taasisi ya Ethereum.

Pakua MetaMask

Unaweza kupakua na kuunda akaunti ya MetaMask bila malipo hapa (opens in a new tab). Unapounda akaunti, au ikiwa tayari una akaunti, hakikisha unabadilisha kwenda kwenye "Goerli Test Network" upande wa juu kulia (ili tusiwe tunashughulika na pesa halisi).

Ongeza ether kutoka kwenye Bomba la majaribio

Ili kusaini muamala kwenye kiambajengo cha Ethereum, tutahitaji Eth bandia. Ili kupata Eth unaweza kwenda kwenye FaucETH (opens in a new tab) na uweke anwani yako ya akaunti ya Goerli, bofya "Request funds", kisha chagua "Ethereum Testnet Goerli" kwenye menyu kunjuzi na hatimaye bofya kitufe cha "Request funds" tena. Unapaswa kuona Eth kwenye akaunti yako ya MetaMask muda mfupi baadaye!

Angalia Salio lako

Ili kuhakikisha salio letu lipo, hebu tufanye ombi la eth_getBalance (opens in a new tab) tukitumia zana ya mtunzi ya Alchemy (opens in a new tab). Hii itarudisha kiasi cha Eth kwenye mkoba wetu. Baada ya kuweka anwani yako ya akaunti ya MetaMask na kubofya "Send Request", unapaswa kuona jibu kama hili:

1{"jsonrpc": "2.0", "id": 0, "result": "0xde0b6b3a7640000"}

KUMBUKA: Matokeo haya yako katika wei sio eth. Wei inatumika kama kiasi kidogo zaidi cha ether. Ubadilishaji kutoka wei kwenda eth ni: 1 eth = 10¹⁸ wei. Kwa hivyo ikiwa tutabadilisha 0xde0b6b3a7640000 kuwa desimali tunapata 1*10¹⁸ ambayo ni sawa na 1 eth.

Phew! Pesa zetu bandia zote zipo! 🤑

Hatua ya 5: Unganisha MetaMask kwenye UI yako

Sasa kwa kuwa mkoba wetu wa MetaMask umewekwa, hebu tuunganishe dapp yetu kwake!

Kitendaji cha connectWallet

Katika faili yetu ya interact.js, hebu tutekeleze kitendaji cha connectWallet, ambacho kisha tunaweza kukiita katika kipengele chetu cha HelloWorld.js.

Hebu tubadilishe connectWallet kwa yafuatayo:

1// interact.js
2
3export const connectWallet = async () => {
4  if (window.ethereum) {
5    try {
6      const addressArray = await window.ethereum.request({
7        method: "eth_requestAccounts",
8      })
9      const obj = {
10        status: "👆🏽 Write a message in the text-field above.",
11        address: addressArray[0],
12      }
13      return obj
14    } catch (err) {
15      return {
16        address: "",
17        status: "😥 " + err.message,
18      }
19    }
20  } else {
21    return {
22      address: "",
23      status: (
24        <span>
25          <p>
26            {" "}
27            🦊 <a target="_blank" href={`https://metamask.io/download`}>
28              You must install MetaMask, a virtual Ethereum wallet, in your
29              browser.
30            </a>
31          </p>
32        </span>
33      ),
34    }
35  }
36}
Onyesha yote

Kwa hivyo kizuizi hiki kikubwa cha msimbo kinafanya nini hasa?

Kweli, kwanza, inaangalia ikiwa window.ethereum imewezeshwa kwenye kivinjari chako.

window.ethereum ni API ya kimataifa inayoingizwa na MetaMask na watoa huduma wengine wa mkoba ambayo inaruhusu tovuti kuomba akaunti za Ethereum za watumiaji. Ikiidhinishwa, inaweza kusoma data kutoka kwenye viambajengo ambavyo mtumiaji ameunganishwa navyo, na kupendekeza kwamba mtumiaji asaini jumbe na miamala. Angalia nyaraka za MetaMask (opens in a new tab) kwa maelezo zaidi!

Ikiwa window.ethereum haipo, basi hiyo inamaanisha MetaMask haijasakinishwa. Hii inasababisha kipengee cha JSON kurudishwa, ambapo address iliyorudishwa ni mfuatano mtupu, na kipengee cha JSX cha status kinawasilisha kwamba mtumiaji lazima asakinishe MetaMask.

Sasa ikiwa window.ethereum ipo, basi hapo ndipo mambo yanapovutia.

Tukitumia kitanzi cha try/catch, tutajaribu kuunganisha kwenye MetaMask kwa kuita window.ethereum.request({ method: "eth_requestAccounts" }); (opens in a new tab). Kuita kitendaji hiki kutafungua MetaMask kwenye kivinjari, ambapo mtumiaji ataombwa kuunganisha mkoba wao kwenye dapp yako.

• Ikiwa mtumiaji atachagua kuunganisha, method: "eth_requestAccounts" itarudisha safu ambayo ina anwani zote za akaunti za mtumiaji zilizounganishwa kwenye dapp. Kwa ujumla, kitendaji chetu cha connectWallet kitarudisha kipengee cha JSON ambacho kina address ya kwanza katika safu hii (tazama mstari wa 9) na ujumbe wa status unaomwomba mtumiaji kuandika ujumbe kwenye mkataba mahiri.
• Ikiwa mtumiaji atakataa muunganisho, basi kipengee cha JSON kitakuwa na mfuatano mtupu kwa address iliyorudishwa na ujumbe wa status unaoonyesha kwamba mtumiaji alikataa muunganisho.

Sasa kwa kuwa tumeandika kitendaji hiki cha connectWallet, hatua inayofuata ni kukiita kwenye kipengele chetu cha HelloWorld.js.

Ongeza kitendaji cha connectWallet kwenye Kipengele chako cha UI cha HelloWorld.js

Nenda kwenye kitendaji cha connectWalletPressed katika HelloWorld.js, na ukisasishe kwa yafuatayo:

1// HelloWorld.js
2
3const connectWalletPressed = async () => {
4  const walletResponse = await connectWallet()
5  setStatus(walletResponse.status)
6  setWallet(walletResponse.address)
7}

Unaona jinsi utendaji wetu mwingi unavyotengwa kutoka kwenye kipengele chetu cha HelloWorld.js kutoka kwenye faili ya interact.js? Hii ni ili tuzingatie dhana ya M-V-C!

Katika connectWalletPressed, tunafanya tu wito wa await kwenye kitendaji chetu cha connectWallet kilichoingizwa, na kwa kutumia jibu lake, tunasasisha vigezo vyetu vya status na walletAddress kupitia ndoano zao za hali.

Sasa, hebu tuhifadhi faili zote mbili (HelloWorld.js na interact.js) na tujaribu UI yetu hadi sasa.

Fungua kivinjari chako kwenye ukurasa wa http://localhost:3000/ (opens in a new tab), na ubofye kitufe cha "Connect Wallet" upande wa juu kulia wa ukurasa.

Ikiwa umesakinisha MetaMask, unapaswa kuombwa kuunganisha mkoba wako kwenye dapp yako. Kubali mwaliko wa kuunganisha.

Unapaswa kuona kwamba kitufe cha mkoba sasa kinaonyesha kwamba anwani yako imeunganishwa! Ndiyoooo 🔥

Ifuatayo, jaribu kuonyesha upya ukurasa... hii ni ajabu. Kitufe chetu cha mkoba kinatuomba tuunganishe MetaMask, ingawa tayari imeunganishwa...

Hata hivyo, usiwe na hofu! Tunaweza kushughulikia hilo kwa urahisi kwa kutekeleza getCurrentWalletConnected, ambayo itaangalia ikiwa anwani tayari imeunganishwa kwenye dapp yetu na kusasisha UI yetu ipasavyo!

Kitendaji cha getCurrentWalletConnected

Sasisha kitendaji chako cha getCurrentWalletConnected katika faili ya interact.js kwa yafuatayo:

1// interact.js
2
3export const getCurrentWalletConnected = async () => {
4  if (window.ethereum) {
5    try {
6      const addressArray = await window.ethereum.request({
7        method: "eth_accounts",
8      })
9      if (addressArray.length > 0) {
10        return {
11          address: addressArray[0],
12          status: "👆🏽 Write a message in the text-field above.",
13        }
14      } else {
15        return {
16          address: "",
17          status: "🦊 Connect to MetaMask using the top right button.",
18        }
19      }
20    } catch (err) {
21      return {
22        address: "",
23        status: "😥 " + err.message,
24      }
25    }
26  } else {
27    return {
28      address: "",
29      status: (
30        <span>
31          <p>
32            {" "}
33            🦊 <a target="_blank" href={`https://metamask.io/download`}>
34              You must install MetaMask, a virtual Ethereum wallet, in your
35              browser.
36            </a>
37          </p>
38        </span>
39      ),
40    }
41  }
42}
Onyesha yote

Msimbo huu unafanana sana na kitendaji cha connectWallet tulichokiandika katika hatua iliyopita.

Tofauti kuu ni kwamba badala ya kuita mbinu ya eth_requestAccounts, ambayo inafungua MetaMask kwa mtumiaji kuunganisha mkoba wao, hapa tunaita mbinu ya eth_accounts, ambayo inarudisha tu safu iliyo na anwani za MetaMask zilizounganishwa kwa sasa kwenye dapp yetu.

Ili kuona kitendaji hiki kikifanya kazi, hebu tukiite katika kitendaji chetu cha useEffect cha kipengele chetu cha HelloWorld.js:

1// HelloWorld.js
2
3useEffect(async () => {
4  const message = await loadCurrentMessage()
5  setMessage(message)
6  addSmartContractListener()
7
8  const { address, status } = await getCurrentWalletConnected()
9  setWallet(address)
10  setStatus(status)
11}, [])
Onyesha yote

Kumbuka, tunatumia jibu la wito wetu kwa getCurrentWalletConnected kusasisha vigezo vyetu vya hali vya walletAddress na status.

Sasa kwa kuwa umeongeza msimbo huu, hebu tujaribu kuonyesha upya dirisha letu la kivinjari.

Safi sanaaaa! Kitufe kinapaswa kusema kwamba umeunganishwa, na kuonyesha hakikisho la anwani ya mkoba wako uliounganishwa - hata baada ya kuonyesha upya!

Tekeleza addWalletListener

Hatua ya mwisho katika usanidi wa mkoba wa dapp yetu ni kutekeleza msikilizaji wa mkoba ili UI yetu isasishwe wakati hali ya mkoba wetu inabadilika, kama vile wakati mtumiaji anapokata muunganisho au kubadilisha akaunti.

Katika faili yako ya HelloWorld.js, badilisha kitendaji chako cha addWalletListener kama ifuatavyo:

1// HelloWorld.js
2
3function addWalletListener() {
4  if (window.ethereum) {
5    window.ethereum.on("accountsChanged", (accounts) => {
6      if (accounts.length > 0) {
7        setWallet(accounts[0])
8        setStatus("👆🏽 Write a message in the text-field above.")
9      } else {
10        setWallet("")
11        setStatus("🦊 Connect to MetaMask using the top right button.")
12      }
13    })
14  } else {
15    setStatus(
16      <p>
17        {" "}
18        🦊 <a target="_blank" href={`https://metamask.io/download`}>
19          You must install MetaMask, a virtual Ethereum wallet, in your browser.
20        </a>
21      </p>
22    )
23  }
24}
Onyesha yote

Nina uhakika hata huhitaji msaada wetu kuelewa kinachoendelea hapa kwa wakati huu, lakini kwa madhumuni ya ukamilifu, hebu tuchambue haraka:

• Kwanza, kitendaji chetu kinaangalia ikiwa window.ethereum imewezeshwa (yaani, MetaMask imesakinishwa).
  • Ikiwa sivyo, tunaweka tu kigezo chetu cha hali cha status kwa mfuatano wa JSX unaomwomba mtumiaji kusakinisha MetaMask.
  • Ikiwa imewezeshwa, tunaweka msikilizaji window.ethereum.on("accountsChanged") kwenye mstari wa 3 anayesikiliza mabadiliko ya hali katika mkoba wa MetaMask, ambayo ni pamoja na wakati mtumiaji anaunganisha akaunti ya ziada kwenye dapp, kubadilisha akaunti, au kukata muunganisho wa akaunti. Ikiwa kuna angalau akaunti moja iliyounganishwa, kigezo cha hali cha walletAddress kinasasishwa kama akaunti ya kwanza katika safu ya accounts iliyorudishwa na msikilizaji. Vinginevyo, walletAddress inawekwa kama mfuatano mtupu.

Mwisho kabisa, lazima tukiite katika kitendaji chetu cha useEffect:

1// HelloWorld.js
2
3useEffect(async () => {
4  const message = await loadCurrentMessage()
5  setMessage(message)
6  addSmartContractListener()
7
8  const { address, status } = await getCurrentWalletConnected()
9  setWallet(address)
10  setStatus(status)
11
12  addWalletListener()
13}, [])
Onyesha yote

Na ndivyo hivyo! Tumekamilisha kwa ufanisi kupanga utendaji wetu wote wa mkoba! Sasa kwenye kazi yetu ya mwisho: kusasisha ujumbe uliohifadhiwa kwenye mkataba mahiri wetu!

Hatua ya 6: Tekeleza kitendaji cha updateMessage

Sawa jamani, tumefika kwenye hatua ya mwisho! Katika updateMessage ya faili yako ya interact.js, tutafanya yafuatayo:

1. Hakikisha ujumbe tunaotaka kuchapisha kwenye mkataba mahiri wetu ni halali
2. Saini muamala wetu ukitumia MetaMask
3. Ita kitendaji hiki kutoka kwenye kipengele chetu cha frontend cha HelloWorld.js

Hii haitachukua muda mrefu sana; hebu tumalize dapp hii!

Kushughulikia hitilafu za ingizo

Kwa kawaida, inaleta maana kuwa na aina fulani ya ushughulikiaji wa hitilafu za ingizo mwanzoni mwa kitendaji.

Tutataka kitendaji chetu kirudi mapema ikiwa hakuna kiendelezi cha MetaMask kilichosakinishwa, hakuna mkoba uliounganishwa (yaani, address iliyopitishwa ni mfuatano mtupu), au message ni mfuatano mtupu. Hebu tuongeze ushughulikiaji ufuatao wa hitilafu kwenye updateMessage:

1// interact.js
2
3export const updateMessage = async (address, message) => {
4  if (!window.ethereum || address === null) {
5    return {
6      status:
7        "💡 Connect your MetaMask wallet to update the message on the blockchain.",
8    }
9  }
10
11  if (message.trim() === "") {
12    return {
13      status: "❌ Your message cannot be an empty string.",
14    }
15  }
16}
Onyesha yote

Sasa kwa kuwa ina ushughulikiaji sahihi wa hitilafu za ingizo, ni wakati wa kusaini muamala kupitia MetaMask!

Kusaini muamala wetu

Ikiwa tayari unajisikia vizuri na miamala ya jadi ya web3 ya Ethereum, msimbo tutakaoandika unaofuata utakuwa wa kawaida sana. Chini ya msimbo wako wa kushughulikia hitilafu za ingizo, ongeza yafuatayo kwenye updateMessage:

1// interact.js
2
3// weka vigezo vya muamala
4const transactionParameters = {
5  to: contractAddress, // Inahitajika isipokuwa wakati wa uchapishaji wa mkataba.
6  from: address, // lazima ilingane na anwani inayotumika ya mtumiaji.
7  data: helloWorldContract.methods.update(message).encodeABI(),
8}
9
10// weka saini muamala
11try {
12  const txHash = await window.ethereum.request({
13    method: "eth_sendTransaction",
14    params: [transactionParameters],
15  })
16  return {
17    status: (
18      <span>
19        ✅{" "}
20        <a target="_blank" href={`https://goerli.etherscan.io/tx/${txHash}`}>
21          View the status of your transaction on Etherscan!
22        </a>
23        <br />
24        ℹ️ Once the transaction is verified by the network, the message will be
25        updated automatically.
26      </span>
27    ),
28  }
29} catch (error) {
30  return {
31    status: "😥 " + error.message,
32  }
33}
Onyesha yote

Hebu tuchambue kinachotokea. Kwanza, tunaweka vigezo vyetu vya miamala, ambapo:

• to inabainisha anwani ya mpokeaji (mkataba mahiri wetu)
• from inabainisha msainiji wa muamala, kigezo cha address tulichopitisha kwenye kitendaji chetu
• data ina wito kwa mbinu ya update ya mkataba mahiri wetu wa Hello World, ikipokea kigezo chetu cha mfuatano cha message kama ingizo

Kisha, tunafanya wito wa await, window.ethereum.request, ambapo tunaiomba MetaMask kusaini muamala. Kumbuka, kwenye mistari ya 11 na 12, tunabainisha mbinu yetu ya eth, eth_sendTransaction na kupitisha transactionParameters zetu.

Kwa wakati huu, MetaMask itafunguka kwenye kivinjari, na kumwomba mtumiaji kusaini au kukataa muamala.

• Ikiwa muamala utafanikiwa, kitendaji kitarudisha kipengee cha JSON ambapo mfuatano wa JSX wa status unamwomba mtumiaji kuangalia Etherscan kwa maelezo zaidi kuhusu muamala wao.
• Ikiwa muamala utashindwa, kitendaji kitarudisha kipengee cha JSON ambapo mfuatano wa status unawasilisha ujumbe wa hitilafu.

Kwa ujumla, kitendaji chetu cha updateMessage kinapaswa kuonekana hivi:

1// interact.js
2
3export const updateMessage = async (address, message) => {
4  // ushughulikiaji wa makosa ya uingizaji
5  if (!window.ethereum || address === null) {
6    return {
7      status:
8        "💡 Connect your MetaMask wallet to update the message on the blockchain.",
9    }
10  }
11
12  if (message.trim() === "") {
13    return {
14      status: "❌ Your message cannot be an empty string.",
15    }
16  }
17
18  // weka vigezo vya muamala
19  const transactionParameters = {
20    to: contractAddress, // Inahitajika isipokuwa wakati wa uchapishaji wa mkataba.
21    from: address, // lazima ilingane na anwani inayotumika ya mtumiaji.
22    data: helloWorldContract.methods.update(message).encodeABI(),
23  }
24
25  // weka saini muamala
26  try {
27    const txHash = await window.ethereum.request({
28      method: "eth_sendTransaction",
29      params: [transactionParameters],
30    })
31    return {
32      status: (
33        <span>
34          ✅{" "}
35          <a target="_blank" href={`https://goerli.etherscan.io/tx/${txHash}`}>
36            View the status of your transaction on Etherscan!
37          </a>
38          <br />
39          ℹ️ Once the transaction is verified by the network, the message will
40          be updated automatically.
41        </span>
42      ),
43    }
44  } catch (error) {
45    return {
46      status: "😥 " + error.message,
47    }
48  }
49}
Onyesha yote

Mwisho kabisa, tunahitaji kuunganisha kitendaji chetu cha updateMessage kwenye kipengele chetu cha HelloWorld.js.

Unganisha updateMessage kwenye frontend ya HelloWorld.js

Kitendaji chetu cha onUpdatePressed kinapaswa kufanya wito wa await kwenye kitendaji cha updateMessage kilichoingizwa na kubadilisha kigezo cha hali cha status ili kuonyesha ikiwa muamala wetu ulifanikiwa au ulishindwa:

1// HelloWorld.js
2
3const onUpdatePressed = async () => {
4  const { status } = await updateMessage(walletAddress, newMessage)
5  setStatus(status)
6}

Ni safi sana na rahisi. Na nadhani nini... DAPP YAKO IMEKAMILIKA!!!

Endelea na ujaribu kitufe cha Update!

Tengeneza dapp yako mwenyewe maalum

Wooooo, umefika mwisho wa mafunzo! Kwa muhtasari, umejifunza jinsi ya:

• Kuunganisha mkoba wa MetaMask kwenye mradi wako wa dapp
• Kusoma data kutoka kwenye mkataba mahiri wako ukitumia API ya Alchemy Web3 (opens in a new tab)
• Kusaini miamala ya Ethereum ukitumia MetaMask

Sasa una vifaa kamili vya kutumia ujuzi kutoka kwenye mafunzo haya ili kujenga mradi wako mwenyewe wa dapp maalum! Kama kawaida, ikiwa una maswali yoyote, usisite kuwasiliana nasi kwa msaada katika Discord ya Alchemy (opens in a new tab). 🧙‍♂️

Mara tu utakapokamilisha mafunzo haya, tujulishe uzoefu wako ulikuwaje au ikiwa una maoni yoyote kwa kututag kwenye Twitter @alchemyplatform (opens in a new tab)!

Ukurasa ulihaririwa mwisho: 3 Machi 2026

m (opens in a new tab)

c (opens in a new tab)

p (opens in a new tab)

+15

Ona wachangiaji