Contents
Tretji koraki
Torej, osnove ste dobili. V prejšnjem razdelku ste razvili pametno pogodbo in jo uvedli s pomočjo Truffle. Vendar so bile v prejšnjem poglavju vaše pametne pogodbe razporejene v lokalno razvojno omrežje – in to ni zabavno, saj lahko samo vi razmestite stvari in komunicirate s tem lokalnim testnim omrežjem! Želimo si prijatelje! In dostop do drugih pametnih pogodb, ki so jih uvedli drugi!
Zato bomo v tem poglavju prešli na uporabo javnega testnega omrežja Ethereum, tako da se boste lahko pridružili vsem dejanjem okoli ekosistema Ethereum!
Začnimo!
Najprej se bomo pogovorili o tem, kako dobite dostop do teh javnih omrežij Ethereum.
Za dostop do teh omrežij se morate povezati z vozliščem, ki je povezano z ustreznim omrežjem. Vsako omrežje Ethereum si lahko ogledate kot svoj mali svet Ethereuma, vozlišče Ethereum pa lahko vidite kot svoj prehod ali dostopno točko do vsakega od teh svetov! Ker je Ethereum porazdeljeno omrežje, vsako vozlišče Ethereum shrani celotno stanje omrežja, s katerim je povezan (obstajajo vozlišča, ki jim ni treba shraniti celotnega stanja, vendar za zdaj ne skrbite za to), in nenehno komunicira z drugimi vozlišči v omrežju, da bo to stanje na tekočem! Da bomo lahko brali in pisali v to stanje, bomo morali dobiti dostop do enega od teh vozlišč.
Zelo dobro bi lahko gostili svoje vozlišče z uporabo enega od številnih odjemalcev Ethereum, ki so trenutno na voljo (Hyperledger Besu (odjemalec Java, ki ga je razvil ConsenSys), Geth (odjemalec Go), Parity (odjemalec Rust itd.)) – vendar obstaja precej malo stroškov DevOps, ki prihajajo z gostovanjem in vzdrževanjem lastnega vozlišča Ethereum – še posebej, če želite to storiti zanesljivo! Kot taki smo pri ConsenSys zgradili Infuro – vrhunsko infrastrukturo Ethereum, ki ponuja infrastrukturo. Infura za vas poskrbi za celoten del ‘upravljanja vozlišč’, ki vam omogoča takojšen, zanesljiv in razširljiv dostop do skupin vozlišč Ethereum! Infuro lahko predstavljate kot “Ethereum-nodes-as-a-a-service” &# 128578;
Uvod v infuro
Če želite začeti z infuro, morate registrirati račun na infura.io. Ne skrbite – za začetek je popolnoma brezplačno in vam ne bo treba vnašati nobenih občutljivih podatkov!
Po registraciji boste preusmerjeni na stran, ki je videti takole:
Kot predlaga ta stran, za začetek izberete prvo možnost »Začnite in ustvarite svoj prvi projekt za dostop do omrežja Ethereum!«
Svoj projekt lahko poimenujete, kot želite – mi bomo imenovali našega “test-projekt”.
Zdaj boste prejeli poverilnice, ki jih boste potrebovali za dostop do vozlišč Infura!
Naj bo ta stran odprta! Na to se bomo vrnili kasneje &# 128578;
Naslednja stvar, ki jo bomo storili, je inicializiranje novega projekta Tartuf. Če potrebujete pomoč pri namestitvi Truffle, glejte prejšnji odstavek te dokumentacije.
Če želite inicializirati nov projekt Tartuf, ustvarite novo mapo in zaženite
tartuf init
Nato boste želeli v nov inicializiran projekt dodati ponudnika denarnice Truffle HD Wallet, da boste lahko podpisali svoje transakcije, preden bodo poslane v vozlišča Infura. Vsaka sprememba stanja, ki jo naredite v Ethereumu, je v obliki transakcije – ne glede na to, ali uvaja pogodbo, kliče funkcijo v pogodbi ali pošilja žeton! Vsaka transakcija mora biti podpisana z računom – zato naša aplikacija potrebuje možnost podpisovanja transakcij, da bo lahko Ethereum izvedla spremembe v državi!
Vsaka transakcija stane tudi eter. Ti transakcijski stroški se imenujejo „stroški plina“. Zato bomo morali, da bo naše podpisane transakcije po obdelavi v omrežju obdelalo, ko bodo poslane v vozlišča Infura, svoj račun financirati z nekaj etra. To bomo obravnavali malo kasneje, vendar je to le še en pomemben razlog, zakaj boste potrebovali denarnico & ponudnik denarnice!
Če želite dodati ponudnika denarnice Truffle HD v novo inicializirano vrsto projekta v terminalu:
npm install –save @ tartuf / hdwallet-ponudnik
To lahko povzroči nekaj opozoril, vendar dokler se namesti, ste pripravljeni!
Zdaj lahko ustvarimo račun Ethereum za uporabo naše aplikacije! Ker je naš ponudnik denarnice denarnica HD (hierarhično deterministična), lahko deterministično ustvarjamo račune z uporabo iste besedne zveze ali mnemonike.
Če želite ustvariti svoj račun, moramo najprej zagnati Ganache. Ganache je izdelek s tartufi, ki nam omogoča enostavno ustvarjanje lastnega lokalnega razvojnega omrežja. Če želite zagnati ganache, preprosto vnesite
ganache-cli
Če ste zaključili 2. korak tega vodnika, bi morali imeti že nameščen Ganache / ganache-cli – če ga ne, ga lahko namestite z ukazom npm:
npm namestite -g ganache-cli
Ali če uporabljate prejo
preja globalno dodaj ganache-cli
Nato bomo morali naši aplikaciji dovoliti, da se pogovarja z Ganacheom. Pojdite v svoj imenik projekta in preverite datoteko tartuf-config.js, preprosto odkomentirajte (ali dodajte) naslednje vrstice pod omrežje:
razvoj: {gostitelj: "127.0.0.1", // Vrata Localhost (privzeto: nič): 8545, // Standardna vrata Ethereum (privzeto: nič) network_id: "*" // katero koli omrežje (privzeto: nobeno)},
Lepo! Zdaj lahko naša aplikacija govori z našo razvojno mrežo Ganache, ki deluje na 127.0.0.1:8545! Zdaj v novem terminalskem oknu (vendar še vedno v mapi projekta) zaženite ukaz
konzola za tartufe
za povezavo z omrežjem Ganache. Ne skrbite – kasneje se bomo povezali z javnim omrežjem! Takoj se moramo povezati z Ganachejem, da ustvarimo svoje ključe &# 128578;
Opomba: Če naletite na težave, preverite, ali se v Ganacheu številka vrat vašega strežnika RPC ujema s konfiguracijsko datoteko tartufa. V privzetem primeru bi moral delovati 8545, sicer spremenite svojo konfiguracijsko datoteko tako, da se ujema z Ganacheom.
Zdaj v konzolo Tartuf vnesite naslednje ukaze, da ustvarite svojo denarnico:
const HDWalletProvider = require (‘@ tartuf / ponudnik hdwallet’);
To bi moralo imeti za posledico odgovor „nedefinirano“
Za 12-besedno mnemoteko lahko uporabite mnemonski generator, kot je tale če želite!
PREPREČITE, DA REŠITE MNEMONIČNO (SEMENSKO) FRAZO! Potrebovali ga bomo pozneje &# 128515;
Nato v terminal dodajte naslednji ukaz (še v fazi razvoja tartufov):
const mnemonic = ’12 besed tukaj’; const wallet = new HDWalletProvider (mnemonična, "http: // localhost: 8545");
Zdaj na svoji konzoli za tartufe vnesite ukaz
denarnico
Če se pomaknete navzgor, bi morali videti seznam računov, kot je ta!
Kljub temu, da je bil ta račun ustvarjen, ko smo bili povezani z Ganacheom, lahko uporabimo iste račune Ethereum v katerem koli omrežju Ethereum (vendar upoštevajte – čeprav se isti račun lahko uporablja v katerem koli omrežju Ethereum, sredstva / dejavnosti, ki se nanašajo na to račun je specifičen za omrežje – na primer, če opravim transakcijo v omrežju Ethereum Mainnet, se bo ta transakcija zgodila samo v omrežju Ethereum Mainnet in nobenega drugega omrežja). Zdaj bomo prenehali sodelovati z Ganache (lokalno razvijalno omrežje) in začeli uporabljati ta račun za interakcijo z nekaterimi javnimi omrežji!!
Običajno je prva stvar, ki jo morate storiti pri interakciji z javnim omrežjem, pridobiti nekaj etra tega omrežja. V našem primeru se bomo povezali z javnim testnim omrežjem Ropsten, zato bomo morali dobiti nekaj Ropsten etra (ETH)! Ne skrbite – testna mreža ETH je brezplačna in bogata ter zelo enostavna za pridobitev &# 128077;
Čas za pridobitev testnega ETH
Če želite dobiti nekaj Eps Ropsten, pojdite na Ropsten pipa. Prilepite naslov svojega računa in violo! Prejeli ste nekaj Ropsten ETH in lahko začnete pošiljati transakcije (tj. Spreminjati stanje) omrežja Ropsten!
Za referenco je testna mreža Ropsten javno testno omrežje Ethereum, kjer lahko svojo kodo preizkusite v okolju, ki natančno odraža tisto omrežja Ethereum. Glavna razlika med testno mrežo Ropsten (in drugimi javnimi mrežami za testiranje Ethereuma) je v tem, da je ETH v testnet-landu v izobilju in nima nobene resnične vrednosti! Ko začnete komunicirati z glavnim omrežjem Ethereum, bo Eter, s katerim plačujete svoje transakcije (stroški plina), dejansko stal dolarjev – in zato se moramo prepričati, da stvari delamo vnaprej, da ne bomo izgubili trdega -zasluženi denar / naš dragoceni mainnet ETH!
V testni mreži Ropsten je skupaj z večino drugih javnih testnih omrežij veliko raziskovalcev blokov, s katerimi si lahko ogledate dejavnost, ki se dogaja v verigi (https://ropsten.etherscan.io/). Če si želite ogledati svoj financirani račun, preprosto prilepite naslov svojega računa v raziskovalec – in lahko si ogledate vso zgodovino, povezano z njim:
Vredu! Zdaj, ko imamo ponudnika denarnice in račun, ki ga financira Ropsten ETH, se lahko vrnemo k našemu projektu in ga usmerimo na vozlišča Infura, ki so povezana s testno mrežo Ropsten.
Prva stvar, ki jo bomo želeli narediti, je ustvariti datoteko.env, v kateri bodo naše dragocene SKRIVNOSTI! Te skrivnosti vključujejo ključ Infura API (ustvarjen ob ustvarjanju računa Infura) in mnemografsko besedno zvezo.
Na korenski ravni vašega projekta preprosto ustvarite novo datoteko “.env”. Paket dotenv NPM boste morali namestiti tudi tako, da v terminal vnesete naslednji ukaz
npm install –save dotenv
V tej datoteki new.env boste potrebovali dve stvari:
INFURA_API_KEY = TUKAJ VSTAVITE SVOJ KLJUČ API (brez citatov)
MNEMONIC = “leča kit kit ventilator žica spletni sedež izpostavi številko zaloge zmagovalec stavka”
INFURA_API_KEY je ID projekta iz projekta, ki ste ga prej ustvarili v infuri:
In MNEMONIC je 12-besedna besedna zveza, ki ste jo prej uporabljali za ustvarjanje računa.
Vaša datoteka naj bi zdaj izgledala takole:
V redu, blizu smo!
OPOMBA: Če boste to potisnili v repozitorij Github ali na kakršen koli način objavili ta projekt, OBVEZNO zagotovite, da bo datoteka.env shranjena v.gitignore, da vaše skrivnosti ne bodo razkrite!
Zdaj bomo morali odpreti datoteko tartuf-config.js. Tukaj bomo morali dodati nekaj stvari, ki označujejo našega ponudnika (ki se uporablja za interakcijo z Infuro (ponudnik tartufov HDWallet, ki smo ga prej namestili), in usmeriti našo aplikacijo na vozlišča Ropsten Infura.
Na vrh datoteke dodajte:
zahteva ("dotenv") .config (); const HDWalletProvider = zahteva ("@ tartuf / ponudnik hdwallet");
Nato pod »omrežja« dodate naslednje omrežje:
ropsten: {ponudnik: () => novi HDWalletProvider (process.env.MNEMONIC, `https://ropsten.infura.io/v3/$ {process.env.INFURA_API_KEY}`), network_id: 3, // Ropsten’s id gas: 5500000, // Ropsten has a spodnja omejitev blokov kot potrditve glavnega omrežja: 2, // # konf, ki čakajo med uvedbami. (privzeto: 0) timeoutBlocks: 200, // # blokov pred potekom uvajanja (najmanj / privzeto: 50) skipDryRun: true // Želite preskočiti suho zagon pred selitvami? (privzeto: false za javne mreže)}
Zdaj bi morala biti vaša datoteka tartuf-config.js videti približno tako!
Stranska opomba:
Če uporabljate končne točke Infura, je potreben parameter `from`, saj nimajo denarnice. Če uporabljate končne točke Ganache ali Geth RPC, je to neobvezen parameter.
ZDAJ SMO PRIPRAVLJENI NA ČAROBIJO! Čas je, da uvedete pametno pogodbo za ROPSTEN!
Nastavitev pametne pogodbe
Nastavitev trdnosti
Najprej bomo želeli ustvariti pametno pogodbo za uvajanje! Lahko zgrabite pametno pogodbo, ki ste jo razvili v prejšnjem poglavju tega vodnika, sestavite svojo pametno pogodbo ali preprosto uporabite naslednji (zelo preprost) vzorec pogodbe:
trdnost pragme >= 0,5,8; pogodba SimpleStorage {uint256 storedData; nabor funkcij (uint256 x) public {storedData = x; } funkcija get () javni pogled vrne (uint256) {vrne shranjene podatke; }}
To pogodbo je treba ustvariti kot datoteko “.sol” (Solidity) v mapi “pogodbe” vašega projekta (v tem primeru smo ustvarili datoteko SimpleStorage.sol, ki je naša pogodba SimpleStorage:
Nastavitev selitve
Nato bomo morali nastaviti svojo datoteko za selitev!
Migracije so datoteke JavaScript, ki vam pomagajo razporediti pogodbe v omrežje Ethereum. Te datoteke so odgovorne za uprizoritev vaših nalog uvajanja in so napisane pod predpostavko, da se bodo vaše potrebe po uvajanju sčasoma spremenile. Ko se vaš projekt razvija, boste ustvarjali nove skripte za selitev, ki bodo pospeševale ta razvoj na verigi blokov. Zgodovina predhodno izvedenih migracij se zabeleži v verigi s posebno pogodbo o migracijah. Več informacij o njih najdete tukaj.
Naša migracijska datoteka za uvedbo pogodbe bo videti takole:
const SimpleStorage = artefakti.require ("SimpleStorage.sol"); module.exports = funkcija (uvajalnik) {deployer.deploy (SimpleStorage); };
Datoteko shranite v mapo »migracije« pod imenom »2_deploy_contracts.js«.
Uvajanje prve javne pogodbe
Čas za selitev
Zdaj ste dejansko pripravljeni na ČAROVIJO, DA SE DOGODI! Vrnite se do konzole in vnesite
tartuf seli – mreža ropsten
Bum!&# 128163; Vaša koda je bila nameščena v javni Ropsten Ethereum Test Net!!!
Pravkar se je zgodilo:
-
Vaša pametna pogodba Solidity (v mapi »pogodbe«) je bila sestavljena na bajt kodo – strojno berljivo kodo za uporabo navideznega računalnika Ethereum.
-
Ta bajtoda in nekateri drugi podatki so bili združeni v transakcijo.
-
To transakcijo je podpisal vaš račun.
-
Ta transakcija je bila poslana vozlišču Infura, ki je povezano z Ropstenom.
-
Transakcija je bila razširjena po celotnem omrežju, pobral jo je rudar Ropsten in vključil v blok Ropsten.
-
Vaša pametna pogodba je zdaj v ŽIVO na verigi blokov Ropsten!
Pogodbo si lahko ogledate z uporabo Etherscan: https://ropsten.etherscan.io/ – preprosto prilepite naslov pogodbe (naj bo na vašem terminalu), da si jo ogledate!
Neverjetno! Pravkar smo napotili svojo prvo pametno pogodbo v omrežje PUBLIC Ethereum! &# 129327;
Postopek je popolnoma enak za razmestitev v glavni omrežje Ethereum, le da boste v datoteki tartuf-config.js zamenjali omrežje za glavno mrežo Ethereum (in seveda zagnali ukaz za selitev glavnega omrežja Truffle namesto tistega iz Ropstena) ! Ne bomo vas vodili skozi ta postopek tukaj, ker vas bo postavitev na glavni računalnik Ethereum stala dejanskih dolarjev – če pa želite pomoč pri tem, skočite na ConsenSys Discord in z veseljem bi pomagali!
Izdelava Web3 Frontenda
Zdaj, ko smo svojo pogodbo razporedili na Ropsten, zgradimo preprost uporabniški vmesnik za interakcijo z njim!
Opomba: dApp “front-end” so samo vaši vsakdanji, običajni stari front-endi – kot taka lahko uporabimo vsa naša stara orodja, ki jih poznamo (create-response-app itd.), Da zavrtimo naš front front , nato pa dodajte le nekaj stvari, ki bodo omogočale branje in pisanje v sprednji del Ethereuma! To pomeni, da so vse vaše stare veščine spletnega razvijalca neposredno prenosljive na Ethereum-land / Web3!!
Zavrtite naš projekt React
V redu, začnimo.
Najprej se prepričajte, da imate imenik, ki vsebuje vse informacije, ki smo jih pravkar ustvarili za pogodbo o shranjevanju. Svojo mapo sem poimenoval »povratno shranjevanje« in vsebuje delo, ki smo ga pravkar zaključili, da smo lahko nastavili in uvedli pogodbo.
Zdaj bomo začeli z zavijanjem reakcijskega projekta, poimenujmo našega v tem primeru “skladiščni laboratorij”
V našem terminalu zaženimo naslednje, da začnemo naš projekt
npx create-response-app storage-lab
Zdaj, ko smo dobili svoj novi projektni primer, pojdimo v imenik projektov
cd skladiščni laboratorij
Zdaj, ko smo v našem projektu, bomo zdaj dodali paket Web3, ki bo omogočil našemu projektu interakcijo z Ethereumom! Več na spletnem mestu3 tukaj
npm namestite web3
Web3 je eden od dveh glavnih paketov, ki jih lahko uporabimo, drugi pa ethers.js. V tem primeru bomo uporabili web3, če pa želite prebrati več o ethers.js, si oglejte tukaj
Za podrobno razlago obeh si oglejte ta zapis web3 v primerjavi z etri
Super! Zdaj smo skoraj pripravljeni, da bo naš projekt reagiranja sodeloval z našo pogodbo!
Najprej vzemimo naš imenik iz prejšnjih časov (zame je to “storage-back”), ki vsebuje samo delo, ki smo ga že opravili z našimi pametnimi pogodbami, zdaj pa to dodamo našemu novemu projektu reagiranja. Ta bo živel na isti ravni kot naša src, zdaj pa bi morali imeti vse, kar potrebujemo, skupaj v našem reakcijskem REPO.
Nato bomo morali nastaviti svojo datoteko, ki vsebuje naše podatke o ABI.
“ABI?”
Vesel sem, da ste vprašali!
Binarni vmesnik za uporabo pogodb (ABI) je standardni način interakcije s pogodbami znotraj ekosistema Ethereum, tako zunaj verige blokov kot za interakcijo med pogodbami. Ko smo v prejšnjem koraku sestavili pogodbo SimpleStorage, je za nas ustvarila datoteko JSON. Preverite sami, v naši gradnji / pogodbah je datoteka SimpleStorage.json
Začetni pogled na to datoteko bo razkril veliko informacij, zdaj se moramo osredotočiti samo na ABI, da bomo svojo pogodbo sinhronizirali s sprednjim koncem, ki ga razvijamo. Ta JSON vsebuje informacije, ki jih potrebujemo za sporočanje pogodbe z našim prednjim delom.
Naš ABI je matrika, ki vsebuje predmete. Če pogledate datoteko bližje, lahko vidite, da je vsak od teh predmetov dejansko vsaka funkcija, ki jo vsebuje naša pogodba SimpleStorage.
Hitro lahko vidite
“Name”: “set”
“Name”: “get”
oba s funkcijo “type:” funkcija obe funkciji, ki smo jih navedli pri pisanju pametne pogodbe!
Čeprav Tartuf zamegli naslednjih nekaj korakov, se bomo sprehodili po veliko bolj “ročnem” načinu dela, tako da boste izpostavljeni vsem osnovam &# 128578;
Najprej nadaljujte in kopirajte svoje podatke o abi – jih bomo potrebovali v trenutku.
Ustvarimo mapo v srcu z imenom “abi”.
Znotraj naše sveže izdelane mape abi zdaj naredimo datoteko z imenom abi.js
Opomba: teh ločitev tehnično ne potrebujemo in bi lahko samo dodali svoj abi.js v naš src, vendar ohranjanje naših datotek abi.js pomaga pri organizaciji.
Zdaj bomo kopirali našo abi matriko, ki smo jo prej zajeli iz datoteke SimpleStorage.JSON, in jo dodali v novo izdelano datoteko abi.js. Datoteko bomo nekoliko spremenili, da bo naš projekt lahko uvozil podatke v naš App.js. Ne pozabite, ker gre za datoteko a.js, moramo dodati izvoz, da jo bomo lahko pozneje povlekli v naš app.js. Poimenujmo const enako kot pogodba, razen s kamelo (glej spodnjo kodo):
To bo koda, ki jo shranimo v datoteko abi.js
izvoz const simpleStorage = [{konstanta: false, vnosi: [{ime: "x", vrsta: "uint256", },], ime: "nastavite", izhodi: [], plačljivo: false, stateMutability: "neplačljivo", vrsta: "funkcijo", }, {konstanta: res, vnosi: [], ime: "dobili", izhodi: [{ime: "", vrsta: "uint256", },], plačljivo: false, stateMutability: "pogled", vrsta: "funkcijo", },];
Čas je, da se odpravite na naš App.js in uvozite web3 in našo sveže izdelano datoteko abi.js.
V tem primeru bomo uporabili tudi kljuke (zato uvozimo tudi {useState}, več o useState si lahko preberete tukaj.
Vrh naše datoteke App.js bi moral biti videti takole:
uvozi React, {useState} iz "reagirati"; uvozi {simpleStorage} iz "./ abi / abi"; uvozi Web3 iz "splet3"; uvoz "./App.css";
Zdaj moramo zagotoviti, da imajo poljubni uporabniki možnost povezave in uporabe našega dApp, če imajo ponudnika denarnice.!
Glavna denarnica, ki se v prostoru Ethereum uporablja za interakcijo dApp, je MetaMask, predstavljen v 1. koraku.
Če nimate MetaMask, obiščite metamask.io.
Z nameščeno MetaMask lahko dostopamo do naše denarnice znotraj našega dappa z:
const web3 = nov Web3 (Web3.givenProvider);
“Web3.givenProvider” bo nastavljen v brskalniku, ki ga podpira Ethereum.
(lahko preberete več o tem, zakaj je to potrebno tukaj)
Torej, zdaj bi morala biti naša koda videti tako:
uvozi React, {useState} iz "reagirati"; uvozi {simpleStorage} iz "./ abi / abi"; uvozi Web3 iz "splet3"; uvoz "./App.css"; const web3 = nov Web3 (Web3.givenProvider);
V redu! Zaenkrat smo:
- Začel projekt React
- Nameščen Web3
- V naš projekt React smo dodali našo mapo z našo gradnjo + pogodbo + selitev
- Ustvarili smo datoteko abi.js, ki vsebuje podatke abi, ki smo jih povlekli iz SimpleStorage.json
- Uvozili smo podatke, ki jih potrebujemo za interakcijo z našo pogodbo
- Ustvaril spremenljivko, ki omogoča, da naš dApp komunicira z uporabniško denarnico
Kljub temu, da Truffle naslednjih nekaj korakov ne bo več potreben (kasneje vas bomo vodili skozi precej preprostejšo različico), bomo v dApp v izobraževalne namene dodali nekoliko več ročne zapletenosti.
Zdaj bomo ustvarili dve novi spremenljivki: eno za shranjevanje naslova pogodbe, ki smo jo uvedli na Ropstenu, in drugo, ki bo to pogodbo uskladila z našim ABI, tako da bo naša aplikacija znala govoriti z njo!
Če želite poiskati naslov pogodbe, se pomaknite do datoteke JSON, v kateri smo bili prej (ki vsebuje ABI (SimpleStorage.json)), in se pomaknite na dno. Naslov je v polju »naslov« tukaj:
"prevajalnik": { "ime": "solc", "različico": "0.5.8 + commit.23d335f2.Emscripten.clang" }, "omrežja": { "3.": { "dogodkov": {}, "povezave": {}, "naslov": "0x24164F46A62a73de326E55fe46D1239d136851d8", "transactionHash": "0x1f02006b451b9e85f70acdff15a01c6520e4beddfd93a20e88a9b702a607a7b0" }}, "schemaVersion": "3.0.16", "updatedAt": "2020-06-30T20: 45: 38.686Z", "devdoc": { "metode": {}}, "uporabniški dokument": { "metode": {}}}
Lahko pa se odpravite na https://ropsten.etherscan.io/ in poiščite naslov računa, ki je uvedel pogodbo! V Etherscanu s klikom na »Ustvarjanje pogodbe« boste razkrili naslov pogodbe.
Zdaj bomo vzeli kopijo naslova vaše pogodbe in ustvarili novo spremenljivko za shranjevanje.
Brez tega ne bomo mogli komunicirati s pogodbo in naš dApp ne bo deloval, kot je bilo predvideno.
To boste dodali pod našo const web3 = new Web3 (Web3.givenProvider);
const contractAddress = "svoj pogodbeni naslov tukaj";
Nato bomo ustvarili novo spremenljivko z imenom “storageContract”, ki bo vsebovala tako naslov pogodbe (tako da naša aplikacija ve, kje je pogodba), kot tudi ABI (tako da naša aplikacija ve, kako lahko sodeluje s pogodbo).
const storageContract = new web3.eth.Contract (simpleStorage, contractAddress);
Naš App.js bi zdaj moral izgledati tako
uvozi React, {useState} iz "reagirati"; uvozi {simpleStorage} iz "./ abi / abi"; uvozi Web3 iz "splet3"; uvoz "./App.css"; const web3 = nov Web3 (Web3.givenProvider); const contractAddress = "svoj pogodbeni naslov tukaj"; const storageContract = new web3.eth.Contract (simpleStorage, contractAddress);
Zdaj moramo zagotoviti, da imajo kljuke spremenljivke, ki bodo vplivale na našo pogodbo in prednji del. To bomo storili tako, da bomo v naši aplikacijski funkciji navedli naslednje:
uvozi React, {useState} iz "reagirati"; uvozi {simpleStorage} iz "./ abi / abi"; uvozi Web3 iz "splet3"; uvoz "./App.css"; const web3 = nov Web3 (Web3.givenProvider); const contractAddress = "naslov pogodbe"; const storageContract = new web3.eth.Contract (simpleStorage, contractAddress); funkcija App () {const [število, setUint] = useState (0); const [getNumber, setGet] = useState ("0");
Prva uporaba useState (0) bo vsebovala uint256, ki ga uporabnik izjavi.
(pravila o poimenovanju števil, setUint, getNumber, setGet, upam, pomagajo pokazati, kaj se dogaja)
vrednost useState (“0”) deluje kot nadomestni znak, dokler ne dobimo potrditve našega podpisanega dejanja (naša deklarirana uint256)
setUint bomo kmalu poklicali ob vrnitvi (več o tem kasneje)
Čas za našo logiko
Nato bomo dodali logiko numberSet in NumberGet (v funkcijo App dodamo numberSet)
const numberSet = async (t) => {t.preventDefault (); const računi = počakajte window.ethereum.enable (); const račun = računi [0]; const gas = čaka na storageContract.methods.set (število) .estimateGas (); const post = await storageContract.methods.set (number) .send ({from: account, gas,}); }; const numberGet = async (t) => {t.preventDefault (); const post = await storageContract.methods.get (). call (); setGet (post); };
Nastavili smo prevenDefault (najdene so podrobnosti o prevenDefault tukaj)
Za pogodbo uporabljamo tudi asinhroni klic za get (najdene so podrobnosti o async-u tukaj)
Naš kavelj setGet () shrani privzeto vrednost, ki si jo najprej ogledamo (»0«)
const računi = počakajte window.ethereum.enable ();
poskrbi, da prek MetaMaska pokličemo svoj povezani naslov.
const račun = računi [0];
Vleče račun za povezovanje
Morda se sprašujete, kaj se dogaja
const gas = čaka na storageContract.methods.set (število) .estimateGas ();
Naša aplikacija potrebuje dovoljenje za dostop do uporabniških sredstev za plačilo pristojbin za plin in za vse funkcije, ki zahtevajo eter, ne glede na to, ali je v testnem ali glavnem omrežju. Tu pride prav naša povezava z MetaMaskom, da se podpišete za to uporabo, da nastavite naš uint256 in ga plačate (s testnim ETH).
Za vsako funkcijo, ki potrebuje plin, morate izračunati potencialni porabljeni plin.
Funkcija “Set” v naši pogodbi zahteva plin
“Get” ne.
(to je zato, ker “Get” si ogleda tisto, kar je že bilo prijavljeno z “Set”)
const post bo prevzel uint256, potrdite transakcijo (naknadno plačate pristojbino za plin) iz svoje denarnice MetaMask v omrežju Ropsten.
Nato parametre funkcij posredujemo prek methods.set () in z navedenim naslovom (naslov uporabnika) nato obdelamo funkcijo Set.
Transakcijo pametne pogodbe ustvarimo tako, da parametre naše funkcije prenesemo v metode pametne pogodbe.set () in ocenim naslov plina in uporabniškega računa na.send ().
const post = await storageContract.methods.set (number) .send ({from: account, gas,});
To bi morala biti vsa logika, ki jo potrebujemo za pokrivanje našega nabora številk.
Zdaj potrebujemo našo številkoGet
const numberGet = async (t) => {t.preventDefault (); const post = await storageContract.methods.get (). call (); setGet (post); };
Naša objava const pridobi našo nastavljeno številko in setGet poda v novo vrednost, ki smo jo prijavili
Torej, naša “0” se bo onClick sklicevala na našo številkoGet in prikazala naš unint256!
Torej bi moral biti vaš app.js videti tako
uvozi React, {useState} iz "reagirati"; uvozi {simpleStorage} iz "./ abi / abi"; uvozi Web3 iz "splet3"; uvoz "./App.css"; const web3 = nov Web3 (Web3.givenProvider); const contractAddress = "naslov pogodbe"; const storageContract = new web3.eth.Contract (simpleStorage, contractAddress); funkcija App () {const [število, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); const računi = počakajte window.ethereum.enable (); const račun = računi [0]; const gas = čaka na storageContract.methods.set (število) .estimateGas (); const post = await storageContract.methods.set (number) .send ({from: account, gas,}); }; const numberGet = async (t) => {t.preventDefault (); const post = await storageContract.methods.get (). call (); setGet (post); };
Ustvarimo zelo osnovno vrnitev upodabljanja, da bomo lahko preizkusili, ali lahko
- nastavite vrednost unint256,
- Izvlecite denarnico z metamasko in potrdite transakcijo
- Plačajte stroške plina
- nato dobite vrednost (unint256), ki smo jo shranili, ko je transakcija končana.
Naš povratek je videti tako:
return (Nastavite svoj uint256: setUint (t.target.value)}} /> Potrdite
Pridobite svoj uint256 {getNumber}); } izvoz privzete aplikacije;
Nekaj hitrih CSS
Pojdimo zdaj k datoteki App.css, izbrišemo kodo plošče kotla in jo namesto tega dodamo
.glavni {poravnava besedila: center; zaslon: flex; justify-content: center; barva ozadja: # f2f1f5; višina: 100vh; } .kartica {min-višina: 50vh; širina: 50vw; zaslon: flex; smer upogiba: stolpec; align-items: center; justify-content: center; } .form {višina: 20vh; širina: 20vw; zaslon: flex; upraviči vsebino: prostor enakomerno; smer upogiba: stolpec; } .button {širina: 20vw; višina: 5vh; }
Zdaj smo pripravljeni na testiranje!
V zagonu terminala
začetek preje
V našem localhostu: 3000 bi morali izgledati takole
Zdaj bi morali v polje za vnos vnesti vrednost unint256!
Ko potrdimo svojo številko v našem dApp, se nato podpišemo prek MetaMask (preverite, ali je vaša denarnica nastavljena na omrežje Ropsten)
Uspelo nam je! &# 129303;
Zdaj imamo pametno pogodbo priključeno na prednji del in imamo možnost manipulirati s funkcijo Set (pod pogojem, da imamo testni ETH za plačilo pristojbine za plin za transakcijo). Nato lahko pokličemo funkcijo Get in pridobimo shranjeno vrednost uint265.
Precej kul huh!?!
Dodaten styling
Zdaj je čas, da pokažemo, kako enostavno je v naš projekt vpeljati še bolj priljubljeno tehnologijo Web2.
Za dodajanje osnovnega sloga bomo uporabili MUI, če že razvijate React, boste morda že poznali material-ui. (Podrobnosti najdene tukaj) Material-UI ali na kratko MUI je zelo priljubljen okvir React, ki vam omogoča, da hitro zavrtite projekt z veliko pripravljenega stila, pod pogojem, da upoštevate konvencije o poimenovanju. Z njim je zelo enostavno manipulirati, če želite samo uporabiti podlago in od tam prilagoditi.
* To bo zelo kratek primer, kako dodati projekt MUI v projekt z majhnimi dodatki, da pokažete, kako hitro lahko vključite naš projekt, kakršen je, s tehnologijo Web2.
Dodajanje MUI
Začeli bomo z zagonom ukaza (medtem ko je še vedno v našem imeniku projekta v terminalu (če se aplikacija še vedno izvaja, jo morate zapreti (ctrl + c) ali odpreti nov zavihek)):
Če želite namestiti z npm:
npm namestite @ material-ui / core
Ali s prejo:
preja dodaj @ material-ui / core
Zdaj, ko smo vbrizgali MUI, bomo začeli s spreminjanjem stila. Na vrh naše datoteke app.js bomo uvozili nekaj novih stvari:
uvozi {simpleStorage} iz "./ abi / abi"; gumb za uvoz iz "@ material-ui / core / Button"; uvozi TextField iz "@ material-ui / core / TextField"; uvozi {makeStyles} iz "@ material-ui / jedro / slogi";
Uvoz {makeStyles} nam omogoča manipulacijo s stilom (v tem primeru) z gumbi in besedilnim poljem, skupaj z uvozom privzetega sloga MUI.
Zdaj bomo naredili spremenljivko (nad našo funkcijo), ki prinaša stilski okvir iz MUI
const useStyles = makeStyles ((tema) => ({koren: { "& > *": {margin: theme.spacing (1),},},}));
Zdaj bomo v funkcijo aplikacije dodali tudi spremenljivko z imenom »razredi«, ki vleče definirane sloge, ki smo jih pravkar navedli zgoraj.
funkcija App () {const class = useStyles (); const [število, setUint] = useState (0); const [getNumber, setGet] = useState ("0");
Zdaj bomo v naši vrnitvi naredili prilagoditve, da bomo nekatera polja zamenjali s tistim, kar smo pravkar uvozili.
return (setUint (t.target.value)} variant ="orisano" /> Potrdite
Pridobite svoj uint256 {getNumber}); } izvoz privzete aplikacije;
Vaša koda bi zdaj morala izgledati tako
uvozi React, {useState} iz "reagirati"; uvozi {simpleStorage} iz "./ abi / abi"; uvozi Web3 iz "splet3"; uvoz "./App.css"; uvozi {makeStyles} iz "@ material-ui / jedro / slogi"; gumb za uvoz iz "@ material-ui / core / Button"; uvozi TextField iz "@ material-ui / core / TextField"; const useStyles = makeStyles ((tema) => ({koren: { "& > *": {margin: theme.spacing (1),},},})); const web3 = nov Web3 (Web3.givenProvider); const contractAddress = "svoj pogodbeni naslov tukaj"; const storageContract = new web3.eth.Contract (simpleStorage, contractAddress); funkcija App () {const class = useStyles (); const [število, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); const računi = počakajte window.ethereum.enable (); const račun = računi [0]; const gas = čaka na storageContract.methods.set (število) .estimateGas (); const post = await storageContract.methods.set (number) .send ({from: account, gas,}); }; const numberGet = async (t) => {t.preventDefault (); const post = await storageContract.methods.get (). call (); setGet (post); }; return (setUint (t.target.value)} variant ="orisano" /> Potrdite
Pridobite svoj uint256 {getNumber}); } izvoz privzete aplikacije;
Zdaj, če si ogledamo naš projekt reagiranja, bi moral biti videti tako!
Dobro opravljeno!
Še vedno imamo vse funkcionalnosti prej in zdaj smo vstavili enostaven okvir za nadaljnjo prilagoditev našega projekta, kakorkoli želimo. Oglejte si MUI dokumentacijo eksperimentirati z lastnimi dodatki / spremembami!
Bonusni krog
Lepo bi bilo uporabnikom pokazati naslov za povezavo znotraj našega dApp, kajne?
No, naredimo zelo hitro in osnovno komponento, ki bo naredila točno to!
Začeli bomo z izdelavo ločene komponente, ki jo lahko uvozimo nazaj v našo datoteko App.js. Dobro je ločiti našo logiko, da ne bo samo App.js enostaven za krmarjenje, temveč tudi slediti praksi komponente, ki v idealnem primeru počne samo eno stvar. Če na koncu raste, ga je treba razgraditi na manjše podkomponente.
Izdelava komponent
Naredili bomo novo mapo, imenovano komponente, na isti ravni kot naša src, v njej pa bomo naredili datoteko Nav.js. Naš projektni oder bi zdaj moral izgledati nekako takole
V mapo naših komponent bomo izdelali tudi datoteko Nav.css, s katero bomo uvozili vse sloge, ki jih posebej uporabimo za komponento Nav.
Odprimo naš Nav.js in uvozimo svojo React, Web3 in datoteko empty.css
uvoz React iz "reagirati"; uvozi Web3 iz "splet3"; uvoz "./Nav.css"
Zdaj bomo naredili predavanje z imenom Nav in vanj bomo dodali le nekaj stvari, da bodo prikazali naš povezani naslov. Začeli bomo z nastavitvijo našega stanja za branje računa
class Nav razširja React.Component {state = {account: "" };
Še vedno bomo v svojem razredu naložili račun za branje, tako da bomo dodali logiko async loadAccount
async loadAccount () {const web3 = new Web3 (Web3.givenProvider || "http: // localhost: 8080"); const network = await web3.eth.net.getNetworkType (); const accounts = await web3.eth.getAccounts (); this.setState ({račun: računi [0]}); }
Naslednjič bomo ustvarili komponentoDidMount (ki jo bomo poklicali takoj po namestitvi komponente). V našem primeru bomo potegnili naložen račun. Preberi več tukaj
componentDidMount () {this.loadAccount (); }
Stranska opomba:
To lahko storimo drugače, namesto razreda lahko ustvarimo funkcijo in uporabimo kljuke v nasprotju z componentDidMount, vendar se bomo zaradi tega primera držali te metode.
Nato bomo ustvarili upodobitev nad vrnitvijo, render je metoda, ki je potrebna, ko pišete komponento React z uporabo metode razreda. Po vrnitvi na naš div dodamo razred naslova (da kasneje dobimo osnovni slog) vzdolž oznake p, da prikažemo povezani naslov, ki ga pridobimo s pomočjo {this.state.account}
render () {return (Vaš povezani naslov: {this.state.account}); }} izvoz privzeto Nav;
Naša datoteka Nav.js bi zdaj morala izgledati tako
uvoz React iz "reagirati"; uvozi Web3 iz "splet3"; uvoz "./Nav.css" class Nav razširja React.Component {state = {account: "" }; async loadAccount () {const web3 = new Web3 (Web3.givenProvider || "http: // localhost: 8080"); const network = await web3.eth.net.getNetworkType (); const accounts = await web3.eth.getAccounts (); this.setState ({račun: računi [0]}); } componentDidMount () {this.loadAccount (); } render () {return (Vaš povezani naslov: {this.state.account}); }} izvoz privzeto Nav;
Pojdimo na datoteko Nav.css in dodajte zelo osnovni slog
.naslov {prikaz: flex; justify-content: center; }
Tehnično bi lahko to dodali v datoteko App.css, vendar ne pozabite, čeprav lahko hitro pride do nereda. Sestavni deli naj bodo za večkratno uporabo in da se izognete čim večjemu trenju, če delite svoje delo, vam lahko prihrani glavobol po cesti.
Zdaj pa se vrnimo na naš App.js in uvozimo novo izdelano komponento ter poskrbimo, da jo dodamo vrnitvi, da jo prikažemo!
Naša končana datoteka App.js bi morala izgledati tako
uvozi React, {useState} iz "reagirati"; uvozi {simpleStorage} iz "./ abi / abi"; uvozi Web3 iz "splet3"; uvozi Nav iz "./components/Nav.js"; uvoz "./App.css"; uvozi {makeStyles} iz "@ material-ui / jedro / slogi"; gumb za uvoz iz "@ material-ui / core / Button"; uvozi TextField iz "@ material-ui / core / TextField"; const useStyles = makeStyles ((tema) => ({koren: { "& > *": {margin: theme.spacing (1),},},})); const web3 = nov Web3 (Web3.givenProvider); const contractAddress = "vaš naslov tukaj"; const storageContract = new web3.eth.Contract (simpleStorage, contractAddress); funkcija App () {const class = useStyles (); const [število, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); const računi = počakajte window.ethereum.enable (); const račun = računi [0]; const gas = čaka na storageContract.methods.set (število) .estimateGas (); const post = await storageContract.methods.set (number) .send ({from: account, gas,}); }; const numberGet = async (t) => {t.preventDefault (); const post = await storageContract.methods.get (). call (); setGet (post); }; vrnitev ( setUint (t.target.value)} varianta ="orisano" /> Potrdite
Pridobite svoj uint256 {getNumber}); } izvoz privzete aplikacije;
Zdaj bi morali videti naš povezani naslov zgoraj in še vedno ohraniti vso svojo funkcionalnost!
&# 127881; Uspelo nam je! &# 127881;
Zdaj imamo dApp, ki smo ga zgradili od začetka. Svojo pametno pogodbo smo povlekli v projekt React, napisali logiko, da se prepričamo, da imamo uporabniško funkcionalnost, ustvarili komponento za upodabljanje povezanega naslova in v naš projekt dodali celo priljubljen okvir za oblikovanje.
Dobro opravljeno! To je šele začetek vaših razvojnih dogodivščin Web3 in že imate nekaj za pokazati, da ste ne samo ustvarili, ampak tudi zavili glavo. Obrnite se na nas v Discordu in delite svoj projekt (še posebej, če ste izvedli kakršne koli spremembe ali dopolnitve) z nami!
- Vključevanje razvijalcev: 1. korak
Vključevanje razvijalcev: 1. korak
Vključitev razvijalcev: 2. korak
Vključitev razvijalcev: 2. korak
10-minutna orientacija Ethereum
10-minutna orientacija Ethereum
