Contents
Treći koraci
Dakle, spustili ste osnove. U prethodnom ste odjeljku razvili pametni ugovor i primijenili ga pomoću tartufa. Međutim, u prethodnom su odjeljku vaši pametni ugovori raspoređeni na lokalnu razvojnu mrežu – i to nije zabavno, jer samo vi možete rasporediti stvari i komunicirati s tom lokalnom testnom mrežom! Želimo prijatelje! I pristup drugim pametnim ugovorima koje su drugi ljudi primijenili!
Stoga ćemo u ovom odjeljku prijeći na korištenje javnog Ethereum testnog mreža, tako da se možete pridružiti svim akcijama koje se događaju oko ekosustava Ethereum!
Započnimo!
Prvo ćemo razgovarati o tome kako dobivate pristup tim javnim Ethereum mrežama.
Da biste pristupili tim mrežama, morate se povezati s čvorom koji je povezan s odgovarajućom mrežom. Svaku Ethereum mrežu možete gledati kao svoj mali svijet Ethereuma, a Ethereum čvor možete vidjeti kao svoj pristupnik ili pristupnu točku svakom od tih svjetova! Budući da je Ethereum distribuirana mreža, svaki čvor Ethereum pohranjuje cijelo stanje mreže s kojom je povezan (postoje čvorovi koji ne trebaju pohraniti puno stanje, ali za sada o tome ne brinite) i neprestano komunicira s ostalim čvorovima u mreži kako bi to stanje bilo ažurno! Stoga, da bismo mogli čitati iz ovog stanja i pisati u njega, morat ćemo dobiti pristup jednom od tih čvorova.
Mogli biste vrlo dobro ugostiti vlastiti čvor koristeći jedan od mnogih trenutno dostupnih Ethereum klijenata (Hyperledger Besu (Java klijent koji je razvio ConsenSys), Geth (Go klijent), Parity (Rust klijent) itd.) – međutim, postoji poprilično malo DevOps-a koji dolazi s hostingom i održavanjem vlastitog Ethereum čvora – pogotovo ako to želite pouzdano učiniti! Kao takvi, mi u ConsenSysu izgradili smo Infuru – svjetsku klasu Ethereum infrastrukture koja nudi. Infura se za vas brine za cijeli dio ‘upravljanja čvorovima’, pružajući vam trenutni, pouzdani i skalabilni pristup klasterima Ethereum čvorova! Infuru možete smatrati “Ethereum-nodes-as-a-a-service” &# 128578;
Početak rada s Infurom
Da biste započeli s Infurom, morat ćete registrirati račun na infura.io. Ne brinite – početak je potpuno besplatan i nećete trebati unositi nikakve osjetljive podatke!
Jednom kad se registrirate, bit ćete usmjereni na stranicu koja izgleda ovako:
Kao što sugerira ova stranica, za početak ćete odabrati prvu opciju “Započnite i izradite svoj prvi projekt za pristup mreži Ethereum!”
Možete imenovati svoj projekt kako god želite – svoj ćemo nazvati “test-projekt”.
Sad će vam se predstaviti vjerodajnice koje će vam trebati za pristup čvorovima Infura!
Držite ovu stranicu otvorenom! Vratit ćemo se kasnije &# 128578;
Sljedeće što ćemo učiniti je inicijalizirati novi projekt tartufa. Ako trebate pomoć u instaliranju Trufflea, pogledajte prethodni odjeljak ove dokumentacije.
Da biste inicijalizirali novi projekt tartufa, stvorite novu mapu i pokrenite
tartuf init
Zatim ćete htjeti dodati pružatelja usluge novčanika Truffle HD u svoj novo inicijalizirani projekt, tako da možete potpisati svoje transakcije prije nego što budu poslane na čvorove Infura. Svaka promjena stanja koju napravite na Ethereumu dolazi u obliku transakcije – bilo da se radi o primjeni ugovora, pozivanju funkcije unutar ugovora ili slanju tokena! Svaka transakcija mora biti potpisana računom – stoga naša aplikacija treba sposobnost potpisivanja transakcija kako bi mogla izvršiti promjene stanja u Ethereumu!
Svaka transakcija također košta eter. Ovaj se transakcijski trošak naziva “trošak plina”. Stoga, da bi naša potpisana transakcija obrađivala mrežu nakon što se pošalju čvorovima Infure, morat ćemo svoj račun financirati nekim eterom. To ćemo pokriti malo kasnije, ali ovo je samo još jedan važan razlog zašto će vam trebati novčanik & davatelj novčanika!
Da biste dodali pružatelja usluga Truffle HD novčanika u svoj novo inicijalizirani tip projekta u vašem terminalu:
npm install –save @ tartuf / hdwallet-provider
Ovo može donijeti neka upozorenja, ali dok se instalira, spremni ste za početak!
Sada možemo stvoriti Ethereum račun koji će naša aplikacija koristiti! Budući da je naš dobavljač novčanika HD (hijerarhijski deterministički) novčanik, možemo deterministički generirati račune koristeći istu početnu frazu ili mnemoniku.
Da bismo stvorili svoj račun, prvo ćemo morati pokrenuti Ganache. Ganache je proizvod od tartufa koji nam omogućuje lako stvaranje vlastite lokalne razvojne mreže. Da biste pokrenuli ganache, jednostavno upišite
ganache-cli
Ako ste dovršili korak 2 ovog vodiča, trebali biste već instalirati Ganache / ganache-cli – ako to ne učinite, možete ga instalirati pomoću naredbe npm:
npm instalirati -g ganache-cli
Ili ako koristite pređu
pređa globalno dodati ganache-cli
Dalje, morat ćemo omogućiti našoj aplikaciji da razgovara s Ganacheom. Idite u svoj direktorij projekta i provjerite datoteku tartuf-config.js, jednostavno komentirajte (ili dodajte) sljedeće retke u mreži:
razvoj: {domaćin: "127.0.0.1", // Localhost (zadani: nema) port: 8545, // Standardni Ethereum port (zadani: nema) network_id: "*" // Bilo koja mreža (zadano: nema)},
Lijepo! Sada naša aplikacija može razgovarati s našom razvojnom mrežom Ganache koja radi na 127.0.0.1:8545! U novom prozoru terminala (ali još uvijek u mapi vašeg projekta) pokrenite naredbu
konzola za tartufe
za spajanje na vašu Ganache mrežu. Ne brinite – kasnije ćemo se povezati s javnom mrežom! Samo se odmah moramo povezati s Ganacheom kako bismo stvorili svoje ključeve &# 128578;
Napomena: Ako imate problema, provjerite da li se u Ganacheu broj vašeg porta RPC poslužitelja podudara s vašom konfiguracijskom datotekom tartufa. U zadanom slučaju, 8545 bi trebao raditi, inače promijenite svoju konfiguracijsku datoteku tako da se podudara s Ganacheom.
Sada unesite sljedeće naredbe u konzolu tartufa kako biste stvorili novčanik:
const HDWalletProvider = zahtijeva (‘@ tartuf / hdwallet-usluga’);
To bi trebalo rezultirati odgovorom “nedefiniranog”
Za mnemotehniku od 12 riječi možete koristiti mnemotehnički generator kao što je ovaj ako želite!
OBAVEZNO SPASITE SVOJU NEMONIČNU (SJEMENSKU) FRAZU! Trebat će nam kasnije &# 128515;
Dalje, dodajte sljedeću naredbu u svoj terminal (dok je još u fazi tartufa):
const mnemonic = ’12 riječi ovdje’; const wallet = novi HDWalletProvider (mnemotehnički, "http: // localhost: 8545");
Sada u svoju konzolu s tartufima unesite naredbu
novčanik
Ako pomaknete prema gore, trebali biste vidjeti popis računa, poput ovog!
Unatoč tome što je taj račun generiran dok smo bili povezani s Ganacheom, možemo koristiti iste račune Ethereum-a na bilo kojoj Ethereum mreži (imajte na umu, međutim – iako se isti račun može koristiti na bilo kojoj Ethereum mreži, imovina / aktivnosti koje se na njega odnose Račun je specifičan za mrežu – na primjer, ako izvršim transakciju na Ethereum Mainnetu, ta će se transakcija dogoditi samo na Ethereum Mainnet-u, i ni na jednoj drugoj mreži). Sada ćemo prestati komunicirati s Ganacheom (lokalnom razvojnom mrežom) i početi koristiti taj račun za interakciju s nekim javnim mrežama!!
Uobičajeno je da ćete prvo što morate učiniti tijekom interakcije s javnom mrežom dobiti dio etera te mreže. U našem ćemo se slučaju povezati s javnom testnom mrežom Ropsten, pa ćemo morati dobiti malo Ropsten etera (ETH)! Ne brinite – testna mreža ETH besplatna je i obilna te je vrlo jednostavna za nabavku &# 128077;
Vrijeme je za stjecanje testnog ETH
Da biste dobili malo Ropstena ETH, krenite na Ropsten slavina. Zalijepite adresu svog računa i violu! Dobili ste Ropsten ETH i možete započeti slanje transakcija (tj. Unošenje promjena u stanje) mreže Ropsten!
Za referencu, Ropstenova mreža za testiranje javna je mreža za testiranje Ethereuma, u kojoj možete testirati svoj kôd u okruženju koje usko odražava okruženje mreže Ethereum. Glavna razlika između mreže za testiranje Ropsten (i ostalih javnih mreža za testiranje Ethereuma) je ta što je u testnet-landu ETH u izobilju i nema stvarnu vrijednost! Kada započnete interakciju s matičnom mrežom Ethereuma, eter koji koristite za plaćanje transakcija (troškovi plina) koštat će STVARNI dolari – i zato moramo biti sigurni da unaprijed radimo stvari kako ne bismo izgubili teško -zarađeni novac / naš dragocjeni mainnet ETH!
Ropstenova mreža za testiranje, zajedno s većinom ostalih javnih mreža za testiranje, ima mnogo istraživača blokova kako biste mogli vidjeti aktivnosti koje se događaju u lancu (https://ropsten.etherscan.io/). Da biste vidjeli svoj financirani račun, jednostavno zalijepite adresu računa u istraživač – i možete pregledati svu povijest povezanu s njim:
U redu! Sad kad imamo svog davatelja novčanika i račun financiran s Ropsten ETH, možemo se vratiti natrag u naš projekt i usmjeriti ga prema čvorovima Infure povezanim s testnom mrežom Ropsten.
Prvo što ćemo htjeti je stvoriti a.env datoteku za smještaj naših dragocjenih TAJNI! Te tajne uključuju naš ključ Infura API (generiran kada smo kreirali račun Infura) i mnemotehničku frazu.
Na osnovnoj razini vašeg projekta, jednostavno stvorite novu datoteku “.env”. Također, morat ćete instalirati dotenv NPM paket unošenjem sljedeće naredbe u terminal
npm instalacija –save dotenv
U ovoj datoteci new.env trebat će vam dvije stvari:
INFURA_API_KEY = OVDJE UMESTITE KLJUČ API-ja (bez citata)
MNEMONIC = “leća kitova žica žica mjehur na mreži sjedalo izložiti broj dionica pobjednik rečenica”
INFURA_API_KEY je ID projekta iz projekta koji ste prethodno kreirali u infuri:
A MNEMONIC je izraz od 12 riječi koji ste prethodno koristili za generiranje računa.
Vaša datoteka sada bi trebala izgledati ovako:
Dobro, približavamo se!
NAPOMENA: Ako ćete ovo gurnuti u spremište Github-a ili na bilo koji način učiniti ovaj projekt javnim, OBAVEZNO postavite datoteku.env u.gitignore kako vaše tajne ne bi bile izložene!
Sada ćemo morati prijeći na datoteku tartuf-config.js. Ovdje ćemo trebati dodati nekoliko stvari za označavanje našeg davatelja usluga (koji se koristi za interakciju s Infurom (pružatelj tartufa HDWallet kojeg smo prethodno instalirali) i usmjeriti našu aplikaciju na čvorove Ropsten Infura.
Na vrh datoteke dodajte:
zahtijevati ("dotenv") .config (); const HDWalletProvider = zahtijeva ("@ davatelj tartufa / hdwallet-a");
Dalje, pod “mreže”, želite dodati sljedeću mrežu:
ropsten: {provider: () => novi HDWalletProvider (process.env.MNEMONIC, `https://ropsten.infura.io/v3/$ {process.env.INFURA_API_KEY}`), network_id: 3, // Ropstenov id gas: 5500000, // Ropsten ima donja granica bloka od potvrda glavne mreže: 2, // # konf-a za čekanje između postavljanja. (zadano: 0) timeoutBlocks: 200, // # blokova prije isteka vremena implementacije (minimalno / zadano: 50) skipDryRun: true // Preskočiti suho pokretanje prije migracija? (zadano: false za javne mreže)}
Sada bi vaša datoteka tartuf-config.js trebala izgledati otprilike ovako!
Napomena:
Ako koristite krajnje točke Infura, potreban je parametar `from`, jer nemaju novčanik. Ako koristite Ganache ili Geth RPC krajnje točke, ovo je neobavezni parametar.
SAD SMO SPREMNI NA ČAROBNJU! Vrijeme je za postavljanje pametnog ugovora na ROPSTEN!
Postavljanje pametnog ugovora
Postavljanje solidnosti
Prvo ćemo htjeti stvoriti pametni ugovor za implementaciju! Možete preuzeti pametni ugovor koji ste razvili u prethodnom odjeljku ovog vodiča, izraditi vlastiti pametni ugovor ili jednostavno upotrijebiti sljedeći (krajnje jednostavan) uzorak ugovora:
čvrstoća pragme >= 0,5,8; ugovorite SimpleStorage {uint256 storedData; skup funkcija (uint256 x) public {storedData = x; } funkcija get () javni prikaz vraća se (uint256) {return storedData; }}
Ovaj bi ugovor trebao biti izrađen kao datoteka “.sol” (Solidity) u mapi “ugovora” vašeg projekta (u ovom smo scenariju stvorili datoteku SimpleStorage.sol, koja je naš ugovor SimpleStorage:
Postavljanje migracije
Dalje, trebat ćemo postaviti našu datoteku za migraciju!
Migracije su JavaScript datoteke koje vam pomažu u primjeni ugovora na mrežu Ethereum. Te su datoteke odgovorne za postavljanje vaših zadataka implementacije i napisane su pod pretpostavkom da će se vaše potrebe za implementacijom s vremenom promijeniti. Kako se vaš projekt bude razvijao, stvorit ćete nove skripte za migraciju kako biste nastavili ovu evoluciju na blockchainu. Povijest prethodno pokrenutih migracija bilježi se na lancu posebnim ugovorom o migracijama. O njima možete pronaći više informacija ovdje.
Naša migracijska datoteka za implementaciju našeg ugovora izgledat će ovako:
const SimpleStorage = artefakti.require ("SimpleStorage.sol"); module.exports = funkcija (raspored) {deployer.deploy (SimpleStorage); };
Spremite ovu datoteku u mapu “migracije” pod imenom “2_deploy_contracts.js”.
Primjenjivanje vašeg prvog javnog ugovora
Vrijeme je za migraciju
Sad ste STVARNO spremni za MAGIJU KOJA SE DOGAĐA! Vratite se na konzolu i tipkajte
tartuf migrirati – mreža ropsten
Bum!&# 128163; Vaš je kôd postavljen na javnu mrežu za testiranje Ropsten Ethereum!!!
Ono što se upravo dogodilo bilo je:
-
Vaš pametni ugovor Solidity (u mapi “ugovori”) kompiliran je do bajt-koda – strojno čitljivog koda za korištenje Ethereum Virtual Machine.
-
Ovaj bytecode, + neki drugi podaci, povezani su u transakciju.
-
Tu je transakciju potpisao vaš račun.
-
Ta je transakcija poslana na čvor Infura koji je povezan s Ropstenom.
-
Transakcija se širila po mreži, pokupio je rudar Ropsten i uključio u blok Ropsten.
-
Vaš pametni ugovor je sada UŽIVO na blockchainu Ropsten!
Ugovor možete pogledati pomoću Etherscan-a: https://ropsten.etherscan.io/ – jednostavno zalijepite adresu ugovora (trebala bi biti na vašem terminalu) da biste je pregledali!
Nevjerojatno! Upravo smo rasporedili svoj prvi pametni ugovor na PUBLIC Ethereum mrežu! &# 129327;
Postupak je potpuno isti za postavljanje na Ethereum mainnet, osim što ćete mrežu u datoteci truffle-config.js zamijeniti Ethereum mainnetom (i, naravno, pokrenuti naredbu za migraciju mainnet Truffle umjesto one Ropsten) ! Ovdje vas nećemo provesti kroz ovaj postupak, jer će vas postavljanje na matičnu mrežu Ethereuma koštati stvarnih dolara – ali ako želite pomoć oko toga, skočite na ConsenSys Discord i rado bismo pomogli!
Izgradnja web3 sučelja
Sad kad smo svoj ugovor rasporedili na Ropsten, izgradimo jednostavno korisničko sučelje za interakciju s njim!
Napomena: dApp “front-endovi” samo su vaši svakodnevni, redoviti stari front-endi – kao takvi, možemo koristiti sve svoje stare alate koji su nam poznati (create-React-App, itd.) Kako bismo okrenuli svoj front end , a zatim samo dodajte nekoliko stvari koje će omogućiti prednjem kraju čitanje i pisanje u Ethereum! To znači da su sve vaše stare vještine web razvijatelja izravno prenosive na Ethereum-land / Web3!!
Zavrtite naš React projekt
U redu, krenimo.
Prvo provjerite imate li direktorij koji sadrži sve podatke koje smo upravo stvorili za naš ugovor o pohrani. Svoju sam mapu nazvao “back-storage” i ona sadrži posao koji smo upravo završili za postavljanje i postavljanje ugovora.
Sada ćemo početi zakretanjem projekta reagiranja, nazovimo svoj u ovom primjeru “skladišni laboratorij”
U našem terminalu pokrenimo sljedeće da započnemo naš projekt
npx stvori-reagiraj-aplikaciju-laboratorij za pohranu
Sad kad smo dobili novi projektni model, krenimo u direktorij projekata
cd skladište-laboratorij
Sad kad smo unutar našeg projekta, sada ćemo dodati paket Web3, koji će omogućiti našem projektu interakciju s Ethereumom! Više na web3 ovdje
npm instalirati web3
Web3 je jedan od dva glavna paketa koje možemo koristiti, a drugi su ethers.js. U ovom ćemo primjeru koristiti web3, ali ako želite pročitati više o ethers.js-u, pogledajte ovdje
Za detaljno objašnjenje njih dvoje, pogledajte ovaj članak web3 u odnosu na etere
Sjajno! Sada smo gotovo spremni da naš projekt reagiranja bude u interakciji s našim ugovorom!
Prvo, uzmimo naš direktorij iz ranijeg (za mene je to “back-storage”) koji sadrži samo posao koji smo već obavili na našim pametnim ugovorima, a sada to dodajte našem novom projektu reagiranja. Ovo će živjeti na istoj razini kao i naša src, i sada bismo trebali imati sve što nam treba zajedno u našem reakcijskom REPO-u.
Dalje, trebat ćemo postaviti našu datoteku koja sadrži naše ABI podatke.
“ABI?”
Drago mi je što ste pitali!
Binarno sučelje za primjenu ugovora (ABI) standardni je način interakcije s ugovorima unutar ekosustava Ethereum, kako izvan blockchaina, tako i za interakciju između ugovora. Kada smo u ranijem koraku sastavili naš ugovor SimpleStorage, stvorio nam je JSON datoteku. Provjerite sami, u našoj gradnji / ugovorima imamo datoteku SimpleStorage.json
Početni pogled na ovu datoteku otkrit će puno informacija, trenutno se trebamo usredotočiti samo na ABI kako bismo svoj ugovor sinkronizirali s prednjim krajem koji razvijamo. Ovaj JSON sadrži informacije potrebne za komunikaciju našeg ugovora s našim prednjim dijelom.
Naš ABI je niz koji sadrži objekte. Gledajući datoteku bliže možete vidjeti da su svaki od tih objekata zapravo svaka funkcija koju sadrži naš ugovor SimpleStorage.
Možete brzo vidjeti
“Name”: “set”
“Name”: “dobiti”
obje s “type:” function “obje funkcije koje smo deklarirali prilikom pisanja našeg pametnog ugovora!
Iako tartuf zamagljuje sljedećih nekoliko koraka, proći ćemo kroz puno “ručniji” način rada kako biste bili izloženi svim osnovama &# 128578;
Prvo, samo naprijed i kopirajte svoje podatke o abi – trebat će nam za samo trenutak.
Stvorimo mapu unutar našeg src-a pod nazivom “abi”.
Unutar naše svježe izrađene abi mape napravimo sada datoteku pod nazivom abi.js
Napomena: Tehnički ne trebamo imati ovo razdvajanje i mogli bismo samo dodati svoj abi.js u naš src, ali zadržavanje naših abi.js datoteka sadrži pomoć u organizaciji.
Sada ćemo kopirati naš abi niz koji smo ranije uzeli iz datoteke SimpleStorage.JSON i dodati ga u našu novoizrađenu datoteku abi.js. Datoteku ćemo malo izmijeniti kako bismo omogućili našem projektu uvoz podataka u naš App.js. Ne zaboravite jer je ovo a.js datoteka, moramo dodati izvoz kako bismo je kasnije mogli povući u našu aplikaciju.js. Nazovimo const istim kao i ugovor, osim s kamelom (vidi kod dolje):
Ovo će biti kod koji pohranjujemo u našu datoteku abi.js
izvoz const simpleStorage = [{konstanta: netačno, unosi: [{naziv: "x", tip: "uint256", }, ], Ime: "postavljen", izlazi: [], plativo: false, stateMutability: "neplativo", tip: "funkcija", }, {konstanta: istina, ulazi: [], ime: "dobiti", izlazi: [{ime: "", tip: "uint256", },], plativo: false, stateMutability: "pogled", tip: "funkcija", },];
Vrijeme je da se uputite na naš App.js i uvezete web3 i našu svježe napravljenu datoteku abi.js.
U ovom ćemo primjeru također koristiti kuke (zbog čega također uvozimo {useState}, možete pročitati više o useState ovdje.
Vrh naše datoteke App.js sada bi trebao izgledati ovako:
import React, {useState} iz "reagirati"; uvozi {simpleStorage} iz "./ abi / abi"; uvozi Web3 iz "web3"; uvoz "./App.css";
Sada se moramo osigurati da bilo koji proizvoljan korisnik može imati mogućnost povezivanja i upotrebe našeg dApp-a, sve dok imaju dobavljača novčanika!
Glavni novčanik koji se koristi u Ethereum prostoru za interakciju dApp-a je MetaMask, predstavljen u koraku 1.
Ako nemate MetaMask, posjetite metamaska.io.
Ako je MetaMask instaliran, možemo pristupiti novčaniku unutar svog dapp-a pomoću:
const web3 = novi Web3 (Web3.givenProvider);
“Web3.givenProvider” postavit će se u pregledniku koji podržava Ethereum.
(možete pročitati više o tome zašto je to potrebno ovdje)
Dakle, sada bi naš kod trebao izgledati ovako:
import React, {useState} iz "reagirati"; uvozi {simpleStorage} iz "./ abi / abi"; uvozi Web3 iz "web3"; uvoz "./App.css"; const web3 = novi Web3 (Web3.givenProvider);
U redu! Do sada smo:
- Pokrenuo projekt React
- Instalirani Web3
- Našem React projektu dodan je mapa koja sadrži našu izgradnju + ugovor + migraciju
- Stvorili smo datoteku abi.js koja sadrži abi podatke koje smo izvukli iz SimpleStorage.json
- Uvezli smo podatke koji su nam potrebni za interakciju s našim ugovorom
- Stvorio je varijablu koja omogućava našem dApp-u da komunicira s korisnikovim novčanikom
Opet, iako Truffle čini sljedećih nekoliko koraka nepotrebnima (kasnije ćemo vas provesti kroz puno jednostavniju verziju), u obrazovne ćemo svrhe našem dApp-u dodati malo više složenosti.
Ono što ćemo sada napraviti je stvoriti dvije nove varijable: jednu za pohranu adrese ugovora koju smo postavili na Ropstenu, a drugu da taj ugovor podudaramo s našim ABI-jem, tako da naša aplikacija zna kako s njim razgovarati!
Da biste pronašli adresu ugovora, dođite do JSON datoteke u kojoj smo bili ranije (koja sadrži ABI (SimpleStorage.json)) i pomaknite se na dno. Adresa se nalazi u polju “adresa” ovdje:
"sastavljač": { "Ime": "solc", "verzija": "0.5.8 + commit.23d335f2.Emscripten.clang" }, "mrežama": { "3": { "događaja": {}, "poveznice": {}, "adresa": "0x24164F46A62a73de326E55fe46D1239d136851d8", "transactionHash": "0x1f02006b451b9e85f70acdff15a01c6520e4beddfd93a20e88a9b702a607a7b0" }}, "schemaVersion": "3.0.16", "updatedAt": "2020-06-30T20: 45: 38.686Z", "devdoc": { "metode": {}}, "userdoc": { "metode": {}}}
Možete i prijeći na https://ropsten.etherscan.io/ i potražite adresu računa koji je rasporedio ugovor! U Etherscanu, klikom na “Stvaranje ugovora” izvest će se sama adresa ugovora.
Sada ćemo uzeti kopiju adrese vašeg ugovora i stvoriti novu varijablu za pohranu.
Bez toga nećemo imati mogućnost komunikacije s ugovorom i naš dApp neće raditi kako je predviđeno.
To ćete dodati pod našom const web3 = new Web3 (Web3.givenProvider);
const ugovorAddress = "adresu vašeg ugovora ovdje";
Tada ćemo stvoriti još jednu novu varijablu pod nazivom “storageContract” koja će sadržavati i adresu ugovora (tako da naša aplikacija zna gdje je ugovor) i ABI (tako da naša aplikacija zna kako komunicirati s ugovorom).
const storageContract = novi web3.eth.Contract (simpleStorage, contractAddress);
Naš App.js sada bi trebao izgledati ovako
import React, {useState} iz "reagirati"; uvozi {simpleStorage} iz "./ abi / abi"; uvozi Web3 iz "web3"; uvoz "./App.css"; const web3 = novi Web3 (Web3.givenProvider); const ugovorAddress = "adresu vašeg ugovora ovdje"; const storageContract = novi web3.eth.Contract (simpleStorage, contractAddress);
Sada trebamo nabaviti kuke da drže varijable koje će komunicirati s našim ugovorom i prednjim krajem. To ćemo učiniti izjavom sljedećeg u okviru naše funkcije aplikacije:
import React, {useState} iz "reagirati"; uvozi {simpleStorage} iz "./ abi / abi"; uvozi Web3 iz "web3"; uvoz "./App.css"; const web3 = novi Web3 (Web3.givenProvider); const ugovorAddress = "adresu vašeg ugovora"; const storageContract = novi web3.eth.Contract (simpleStorage, contractAddress); funkcija App () {const [broj, setUint] = useState (0); const [getNumber, setGet] = useState ("0");
Naša prva upotreba useState (0) sadržavat će uint256 koji korisnik izjavi.
(pravila o imenovanju broja, setUint, getNumber, setGet nadamo se da će pomoći pokazati što se događa)
vrijednost useState (“0”) djeluje kao rezervirano mjesto dok ne dobijemo potvrdu o potpisanoj akciji (naša deklarirana uint256)
setUint koji ćemo uskoro nazvati u povratku (o tome kasnije)
Vrijeme je za našu logiku
Dalje ćemo dodati logiku numberSet i NumberGet (dodajemo numberSet unutar naše funkcije App)
const numberSet = async (t) => {t.preventDefault (); const računi = čekati window.ethereum.enable (); const račun = računi [0]; const gas = čekati storageContract.methods.set (number) .estimateGas (); const post = čekati storageContract.methods.set (number) .send ({from: account, gas,}); }; const numberGet = async (t) => {t.preventDefault (); const post = čekati storageContract.methods.get (). call (); setGet (post); };
Postavili smo prevenDefault (pronađeni su detalji o prevenDefault ovdje)
Za ugovor koristimo i asinkroni poziv na get (pronađeni su detalji o async-u ovdje)
Naša udica setGet () pohranjuje zadanu vrijednost koju smo u početku pregledali (“0”)
const računi = čekati window.ethereum.enable ();
osigurava da zovemo svoju povezanu adresu putem MetaMaska.
const račun = računi [0];
Uvlači račun povezivanja
Možda se pitate što se događa
const gas = čekati storageContract.methods.set (number) .estimateGas ();
Naša aplikacija treba dopuštenje za pristup korisničkim sredstvima za plaćanje naknade za plin, bilo koje funkcije koja zahtijeva eter, bez obzira nalazi li se na testnet ili mainnet. Tu nam dobro dolazi veza s MetaMaskom da se potpišemo za ovu upotrebu kako bismo postavili naš uint256 i platili ga (s testnim ETH).
Dakle, za bilo koju funkciju koja treba plin, morate izračunati potencijalni plin koji se koristi.
Funkcija “Set” našeg ugovora zahtijeva plin
“Get” ne znači.
(to je zato što “Get” pregledava ono što je već deklarirano s “Set”)
const post će uzeti usvojeno uint256, potvrditi transakciju (naknadno plaćanje naknade za plin) iz vašeg MetaMask novčanika na mreži Ropsten.
Dalje prosljeđujemo parametre funkcija putem methods.set () i s našom deklariranom adresom (adresom korisnika) obrađujemo funkciju Set.
Transakciju pametnog ugovora kreiramo prosljeđivanjem parametara naše funkcije na metode pametnog ugovora.set () i procjenom adrese plina i korisničkog računa to.send ().
const post = čekati storageContract.methods.set (number) .send ({from: account, gas,});
Ovo bi trebala biti sva logika koja nam treba za pokrivanje našeg skupa brojeva.
Sada nam treba naš brojGet
const numberGet = async (t) => {t.preventDefault (); const post = čekati storageContract.methods.get (). call (); setGet (post); };
Naš const post dobiva naš postavljeni broj i setGet prolazi u novoj vrijednosti koju smo deklarirali
Tako će se naš “0” onClick odnositi na naš brojGet i prikazati naš unint256!
Dakle, sada bi vaš app.js trebao izgledati ovako
import React, {useState} iz "reagirati"; uvozi {simpleStorage} iz "./ abi / abi"; uvozi Web3 iz "web3"; uvoz "./App.css"; const web3 = novi Web3 (Web3.givenProvider); const ugovorAddress = "adresu vašeg ugovora"; const storageContract = novi web3.eth.Contract (simpleStorage, contractAddress); funkcija App () {const [broj, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); const računi = čekati window.ethereum.enable (); const račun = računi [0]; const gas = čekati storageContract.methods.set (number) .estimateGas (); const post = čekati storageContract.methods.set (number) .send ({from: account, gas,}); }; const numberGet = async (t) => {t.preventDefault (); const post = čekati storageContract.methods.get (). call (); setGet (post); };
Stvorimo vrlo osnovni povratak na prikaz kako bismo mogli testirati možemo li
- postavi vrijednost unint256,
- Povucite naš novčanik s metamaskama i potvrdite transakciju
- Platite trošak benzina
- zatim uzmite vrijednost (unint256) koju smo pohranili nakon završetka transakcije.
Naš povratak izgleda ovako:
return (Postavite svoj uint256: setUint (t.target.value)}} /> Potvrdite
Nabavite svoj uint256 {getNumber}); } izvoz zadane aplikacije;
Brzi CSS
Krenimo sada na datoteku App.css, izbrišimo kod ploče kotla i umjesto toga dodajte ovo
.glavni {poravnanje teksta: središte; zaslon: flex; justify-content: centar; boja pozadine: # f2f1f5; visina: 100vh; } .kartica {min-visina: 50vh; širina: 50vw; zaslon: flex; flex-smjer: stupac; align-items: sredina; justify-content: centar; } .form {visina: 20vh; širina: 20vw; zaslon: flex; opravdati-sadržaj: prostor-ravnomjerno; flex-smjer: stupac; } .button {širina: 20vw; visina: 5vh; }
Sada smo spremni za testiranje!
U vašem terminalu
početak pređe
U našem localhostu: 3000 trebali bismo izgledati ovako
Sada bismo trebali moći unijeti vrijednost unint256 u svoje polje za unos!
Nakon što potvrdimo svoj broj u našem dApp-u, potpisujemo se putem MetaMaska (provjerite je li vaš novčanik postavljen na mrežu Ropsten)
Uspjeli smo! &# 129303;
Sada imamo pametni ugovor povezan s prednjim krajem i imamo mogućnost manipuliranja funkcijom Set (pod uvjetom da imamo testni ETH za plaćanje naknade za plin za transakciju). Tada možemo pozvati funkciju Get i dohvatiti pohranjenu vrijednost uint265.
Prilično cool huh!?!
Dodatni styling
Sada je vrijeme da pokažemo kako lako može biti implementirati još popularniju Web2 tehnologiju u naš projekt.
Koristit ćemo MUI za dodavanje osnovnog stila, ako se već razvijate s Reactom, možda vam je poznat materijal-ui. (Pronađeni detalji ovdje) Material-UI ili skraćeno MUI vrlo je popularan React okvir koji vam omogućuje da brzo zavrtite projekt s puno ukuhanog stylinga pod uvjetom da slijedite konvencije imenovanja. Također je vrlo lako manipulirati ako želite samo koristiti temelj i prilagoditi ga od tamo.
* Ovo će biti vrlo kratak primjer kako dodati MUI projektu s malim dodacima kako bismo pokazali koliko brzo možete integrirati naš projekt kakav on ima s Web2 tehnologijom.
Dodavanje MUI-ja
Započet ćemo s pokretanjem naredbe (dok je još uvijek u našem direktoriju projekta u terminalu (ako je aplikacija još uvijek pokrenuta, morat ćete je zatvoriti (ctrl + c) ili otvoriti novu karticu)):
Da biste instalirali s npm:
npm install @ material-ui / core
Ili s pređom:
pređa dodati @ material-ui / core
Sad kad smo ubrizgali MUI, započet ćemo s promjenom stila. Pri vrhu naše datoteke app.js uvest ćemo nekoliko novih stvari:
uvozi {simpleStorage} iz "./ abi / abi"; gumb za uvoz iz "@ material-ui / core / Button"; uvozi TextField iz "@ material-ui / core / TextField"; uvezi {makeStyles} iz "@ material-ui / core / stilovi";
Uvoz {makeStyles} omogućuje nam manipuliranje stilom (u ovom slučaju) našim gumbima i tekstnim poljem, zajedno s uvozom zadanog MUI stila.
Sada ćemo napraviti varijablu (iznad naše funkcije) koja donosi stilski okvir iz MUI-ja
const useStyles = makeStyles ((tema) => ({korijen: { "& > *": {margin: theme.spacing (1),},},}));
Sada ćemo u našu funkciju aplikacije dodati i varijablu nazvanu “klase” povlačeći definirane stilove koje smo upravo deklarirali gore.
funkcija App () {const class = useStyles (); const [broj, setUint] = useState (0); const [getNumber, setGet] = useState ("0");
Sada ćemo izvršiti prilagodbe u okviru povratka kako bismo neka naša polja zamijenili onim što smo upravo uvezli.
return (setUint (t.target.value)} varijanta ="ocrtana" /> Potvrdite
Nabavite svoj uint256 {getNumber}); } izvoz zadane aplikacije;
Vaš bi kod sada trebao izgledati ovako
import React, {useState} iz "reagirati"; uvozi {simpleStorage} iz "./ abi / abi"; uvozi Web3 iz "web3"; uvoz "./App.css"; uvezi {makeStyles} iz "@ material-ui / core / stilovi"; gumb za uvoz iz "@ material-ui / core / Button"; uvozi TextField iz "@ material-ui / core / TextField"; const useStyles = makeStyles ((tema) => ({korijen: { "& > *": {margin: theme.spacing (1),},},})); const web3 = novi Web3 (Web3.givenProvider); const ugovorAddress = "adresu vašeg ugovora ovdje"; const storageContract = novi web3.eth.Contract (simpleStorage, contractAddress); funkcija App () {const class = useStyles (); const [broj, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); const računi = čekati window.ethereum.enable (); const račun = računi [0]; const gas = čekati storageContract.methods.set (number) .estimateGas (); const post = čekati storageContract.methods.set (number) .send ({from: account, gas,}); }; const numberGet = async (t) => {t.preventDefault (); const post = čekati storageContract.methods.get (). call (); setGet (post); }; return (setUint (t.target.value)} varijanta ="ocrtana" /> Potvrdite
Nabavite svoj uint256 {getNumber}); } izvoz zadane aplikacije;
Sad, ako pogledamo naš projekt reagiranja, trebao bi izgledati ovako!
Dobro napravljeno!
Još uvijek imamo sve funkcionalnosti od prije, a sada smo ubacili jednostavan okvir za daljnju prilagodbu našeg projekta kako god želimo. Pogledajte MUI dokumentacija eksperimentirati s vlastitim dodacima / izmjenama!
Bonus krug
Bilo bi lijepo pokazati korisnicima adresu adrese unutar našeg dApp-a, zar ne?
Pa napravimo vrlo brzu i osnovnu komponentu koja će učiniti upravo to!
Započet ćemo s izradom zasebne komponente koju možemo vratiti natrag u našu datoteku App.js. Dobra je ideja razdvojiti našu logiku kako ne bismo samo olakšali navigaciju kroz naš App.js, već i slijedili praksu komponente koja idealno radi samo jednu stvar. Ako završi s rastom, treba ga razgraditi na manje potkomponente.
Izgradnja komponenata
Napravit ćemo novu mapu koja se zove komponente na istoj razini kao i naša src i unutar te mape napravit ćemo datoteku Nav.js. Naša projektna skela sada bi trebala izgledati otprilike ovako
Također ćemo napraviti datoteku Nav.css unutar mape naših komponenata za uvoz svih stilova koje posebno primjenjujemo na komponentu Nav.
Otvorimo naš Nav.js i uvezimo našu React, Web3 i datoteku empty.css
uvoz React iz "reagirati"; uvozi Web3 iz "web3"; uvoz "./Nav.css"
Sada ćemo napraviti nastavu nazvanu Nav i u nju ćemo dodati samo nekoliko stvari kako bi prikazali našu povezanu adresu. Započet ćemo postavljanjem stanja da čita račun
klasa Nav proširuje React.Component {state = {account: "" };
I dalje ćemo unutar naše klase učitati račun za čitanje dodavanjem naše async logike loadAccount
async loadAccount () {const web3 = novi 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]}); }
Dalje ćemo stvoriti komponentuDidMount (koja će se pozvati odmah nakon montiranja komponente). U našem slučaju povlačenjem učitanog računa. Čitaj više ovdje
componentDidMount () {this.loadAccount (); }
Napomena:
To se može učiniti drugačije, umjesto klase možemo stvoriti funkciju i koristiti kuke suprotno od componentDidMount, ali radi ovog primjera držat ćemo se ove metode.
Zatim ćemo stvoriti render iznad našeg povratka, render je metoda koja je potrebna kada pišete React komponentu pomoću metode klase. U okviru našeg povratka u naš div dodamo klasu adrese (da bismo kasnije dobili osnovni stil) uz p oznaku kako bismo prikazali povezanu adresu koju dohvaćamo pomoću {this.state.account}
render () {return (Vaša povezana adresa: {this.state.account}); }} izvoz zadani Nav;
Naša Nav.js datoteka sada bi trebala izgledati ovako
uvoz React iz "reagirati"; uvozi Web3 iz "web3"; uvoz "./Nav.css" klasa Nav proširuje React.Component {state = {account: "" }; async loadAccount () {const web3 = novi 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ša povezana adresa: {this.state.account}); }} izvoz zadani Nav;
Krenimo na datoteku Nav.css i dodajte vrlo osnovni stil
.adresa {prikaz: flex; justify-content: centar; }
Tehnički biste to mogli dodati u datoteku App.css, imajte na umu, iako prilično brzo, što bi moglo postati neuredno. Komponente bi trebale biti ponovno upotrebljive i kako bi se izbjeglo što veće trenje razdvajanjem vašeg rada, može vam uštedjeti glavobolju na cesti.
Vratimo se sada našem App.js-u, uvezimo našu novoizrađenu komponentu i pobrinimo se da je dodamo u naš povratak da je prikažemo!
Naša gotova datoteka App.js trebala bi izgledati ovako
import React, {useState} iz "reagirati"; uvezite {simpleStorage} iz "./ abi / abi"; uvozi Web3 iz "web3"; uvoz Nav iz "./components/Nav.js"; uvoz "./App.css"; uvezi {makeStyles} iz "@ material-ui / core / stilovi"; gumb za uvoz iz "@ material-ui / core / Button"; uvozi TextField iz "@ material-ui / core / TextField"; const useStyles = makeStyles ((tema) => ({korijen: { "& > *": {margin: theme.spacing (1),},},})); const web3 = novi Web3 (Web3.givenProvider); const ugovorAddress = "vaša adresa ovdje"; const storageContract = novi web3.eth.Contract (simpleStorage, contractAddress); funkcija App () {const class = useStyles (); const [broj, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); const računi = čekati window.ethereum.enable (); const račun = računi [0]; const gas = čekati storageContract.methods.set (number) .estimateGas (); const post = čekati storageContract.methods.set (number) .send ({from: account, gas,}); }; const numberGet = async (t) => {t.preventDefault (); const post = čekati storageContract.methods.get (). call (); setGet (post); }; povratak ( setUint (t.target.value)} varijanta ="ocrtana" /> Potvrdite
Nabavite svoj uint256 {getNumber}); } izvoz zadane aplikacije;
Sada bismo svoju povezanu adresu trebali vidjeti gore i dalje zadržati svu našu funkcionalnost!
&# 127881; Uspjeli smo! &# 127881;
Sada imamo dApp koji smo izradili od temelja. Uključili smo naš pametni ugovor u React projekt, napisali logiku kako bismo bili sigurni da imamo korisničku funkcionalnost, stvorili komponentu za generiranje povezane adrese, a čak smo i našem projektu dodali popularan okvir za oblikovanje.
Dobro napravljeno! Ovo je samo početak za vaše razvojne avanture na Web3-u i već imate nešto da pokažete da ste ne samo stvorili nego i omotali glavu. Obratite nam se u Discordu i podijelite svoj projekt (pogotovo ako ste izvršili bilo kakve izmjene ili dopune) s nama!
- Uključivanje programera: 1. korak
Uključivanje programera: 1. korak
Uključivanje programera: 2. korak
Uključivanje programera: 2. korak
10-minutna orijentacija Ethereuma
10-minutna orijentacija Ethereuma
