3. lépés: Indítson el egy Dapp fejlesztői portált

    Harmadik lépések

    Szóval, lementek az alapok. Az előző szakaszban kidolgoztál egy intelligens szerződést, és a Szarvasgomba segítségével telepítetted. Az előző szakaszban azonban az intelligens szerződéseidet egy helyi fejlesztési hálózatra telepítették – és ez nem szórakoztató, mivel csak te telepíthetsz dolgokat és léphetsz kapcsolatba azzal a helyi teszthálózattal! Szeretnénk barátokat! És hozzáférés más intelligens szerződésekhez, amelyeket más emberek telepítettek!

    Ezért ebben a szakaszban áttérünk egy nyilvános Ethereum teszthálózat használatára, így csatlakozhat az Ethereum ökoszisztéma körül zajló összes tevékenységhez!

    Kezdjük el!

    Először arról fogunk beszélni, hogyan juthat hozzá ezekhez a nyilvános Ethereum hálózatokhoz.

    E hálózatok eléréséhez csatlakoznia kell egy csomóponthoz, amely az adott hálózathoz csatlakozik. Minden Ethereum hálózatot saját kis Ethereum világaként tekinthet meg, és egy Ethereum csomópontot átjáróként vagy hozzáférési pontként tekinthet meg ezeknek a világoknak mindegyikéhez! Mivel az Ethereum elosztott hálózat, minden Ethereum csomópont tárolja a hálózat teljes állapotát, amelyhez csatlakozik (vannak olyan csomópontok, amelyeknek nem kell tárolniuk a teljes állapotot, de egyelőre ne aggódjanak emiatt), és folyamatosan kommunikálnak a hálózat többi csomópontjával, hogy ez az állapot naprakész legyen! Ezért ahhoz, hogy ebből az állapotból olvashassunk és írhassunk hozzá, hozzáférést kell kapnunk e csomópontok egyikéhez.

    Nagyon jól befogadhatja saját csomópontját a jelenleg rendelkezésre álló sok Ethereum kliens (Hyperledger Besu (Java kliens, a ConsenSys által kifejlesztett), Geth (Go kliens), Parity (Rust kliens) stb.) Egyikével – azonban van egy egy kis DevOps rezsi, amely saját Ethereum csomópontjának tárolásával és fenntartásával jár – különösen, ha megbízhatóan szeretné megtenni! Mint ilyen, mi a ConsenSys-nél megépítettük az Infurát – az Ethereum világszínvonalú infrastrukturális kínálatát. Az Infura gondoskodik az egész „csomópontkezelésről”, amely azonnali, megbízható és skálázható hozzáférést biztosít az Ethereum csomópontok fürtjeihez! Úgy gondolhat az Infurára, mint „Ethereum-csomópontokra, mint szolgáltatásra” &# 128578;

    Az Infura kezdete

    Az Infura használatának megkezdéséhez regisztrálnia kell egy fiókot a következő címen: infura.io. Ne aggódjon – az induláshoz teljesen ingyenes, és nem kell semmilyen bizalmas információt megadnia!

    A regisztráció után egy olyan oldalra irányít, amely így néz ki:

    infuraLogin

    Ahogy ez az oldal sugallja, a kezdéshez válassza az első lehetőséget: „Indulás és hozza létre az első projektet az Ethereum hálózat eléréséhez!”

    Bármelyik nevet adhat a projektjének – mi megnevezzük a teszt-projektünket.

    InfuraNP

    Most megkapja az Infura csomópontok eléréséhez szükséges hitelesítő adatokat!


    InfuraC

    Tartsa nyitva ezt az oldalt! Később még visszatérünk rá &# 128578;

    A következő dolog az, hogy inicializálunk egy új Szarvasgomba projektet. Ha segítségre van szüksége a Szarvasgomba telepítéséhez, olvassa el a jelen dokumentum előző szakaszát.

    Új Truffle projekt inicializálásához hozzon létre egy új mappát, és futtassa a

    szarvasgomba init

    Ezután hozzá kell adnia a Truffle HD Wallet szolgáltatót az újonnan inicializált projektjéhez, hogy aláírhassa tranzakcióit, mielőtt azokat elküldenék az Infura csomópontokhoz. Minden állapotváltozás, amelyet az Ethereumnak végrehajt, tranzakció formájában történik – legyen szó szerződés bevezetéséről, egy szerződésen belüli funkció meghívásáról vagy token küldéséről! Minden tranzakciót számlával kell aláírni – ezért alkalmazásunknak képesnek kell lennie tranzakciók aláírására, hogy állapotváltozásokat hajthasson végre az Ethereumban!

    Minden tranzakció éterbe is kerül. Ezt a tranzakciós költséget „gázköltségnek” nevezik. Ezért annak érdekében, hogy az aláírt tranzakciókat a hálózat feldolgozza, miután elküldték őket az Infura csomópontokba, némi éterrel kell finanszíroznunk a számlánkat. Kicsit később kitérünk erre, de ez csak egy másik fontos ok, amiért pénztárcára lesz szüksége & pénztárca szolgáltató!

    A Truffle HD Wallet szolgáltató hozzáadása az újonnan inicializált projekt típushoz a terminálon:

    npm install –save @ szarvasgomba / hdwallet-szolgáltató

    Lehet, hogy ez figyelmeztetéseket ad, de amíg települ, addig jó!

    Most létrehozhatunk egy Ethereum fiókot alkalmazásunk használatához! Mivel pénztárca-szolgáltatónk HD (hierarchikus determinisztikus) pénztárca, ezért determinisztikusan generálhatunk számlákat ugyanazzal a kezdő kifejezéssel vagy memo.

    A fiókunk létrehozásához először el kell indítanunk a Ganache-ot. A Ganache egy szarvasgomba termék, amely lehetővé teszi számunkra, hogy egyszerűen létrehozzuk saját helyi fejlesztői hálózatunkat. A ganache futtatásához egyszerűen írja be

    ganache-cli

    Ha végrehajtotta az útmutató 2. lépését, akkor már telepítenie kell a Ganache / ganache-cli szoftvert – ha nem, akkor az npm paranccsal telepítheti:

    npm install -g ganache-cli

    Vagy ha fonalat használ 

    fonal globális add ganache-cli

    Ezután engedélyeznünk kell az alkalmazásunknak, hogy beszéljen Ganache-szal. Menjen át a projektkönyvtárába, és ellenőrizze a truffle-config.js fájlt, egyszerűen törölje a következő sorok megjegyzését (vagy adja hozzá) a hálózat alatt:

    fejlesztés: {host: "127.0.0.1", // Localhost (alapértelmezett: nincs) port: 8545, // Standard Ethereum port (alapértelmezett: nincs) network_id: "*" // Bármely hálózat (alapértelmezett: nincs)},

    uncommenrt

    Szép! Most az alkalmazásunk beszélhet a Ganache fejlesztői hálózatunkkal, amely 127.0.0.1:8545-nél fut! Most egy új terminálablakban (de még mindig a projekt mappájában) futtassa a parancsot

    szarvasgombás konzol

     hogy csatlakozzon a Ganache hálózatához. Ne aggódjon – később csatlakozunk egy nyilvános hálózathoz! A kulcsok létrehozásához csak most kell csatlakoznunk a Ganache-hoz &# 128578;

    Megjegyzés: Ha problémákba ütközik, győződjön meg arról, hogy a Ganache-ban az RPC-kiszolgáló portszáma megegyezik a szarvasgomba konfigurációs fájljával. Alapértelmezett esetben a 8545-nek működnie kell, különben módosítsa a konfigurációs fájlt, hogy megfeleljen a Ganache-nak.

    Most írja be a következő parancsokat a Szarvasgomba konzolba a pénztárca létrehozásához:

    const HDWalletProvider = igény (‘@ szarvasgomba / hdwallet-szolgáltató’);

    Ennek „undefined” választ kell eredményeznie

    12 szavas mnemonikához használhat mnemonikus generátort, mint pl ezt ha szeretné!

    ÜGYELJE, HOGY MEGTAKARÍTJA MNEMONIKAI (MAGVÁLASZTÁSI) KIFEJEZÉSÉT! Később szükségünk lesz rá &# 128515;

    Ezután adja hozzá a következő parancsot a terminálhoz (még szarvasgomba-fejlesztés közben):

    const mnemonic = ’12 szó itt ‘; const pénztárca = new HDWalletProvider (mnemonic, "http: // localhost: 8545");

    Most a szarvasgombás konzolon írja be a parancsot 

    pénztárca

    Ha felfelé görget, látnia kell egy ilyen fióklistát!

    addy

    Annak ellenére, hogy ezt a fiókot a Ganache-hez való kapcsolódásunk során hozták létre, ugyanolyan Ethereum-fiókot használhatunk bármely Ethereum-hálózaton keresztül (azonban kérjük, vegye figyelembe – bár ugyanazt a fiókot bármely Ethereum-hálózaton keresztül lehet használni, az ehhez kapcsolódó eszközök / tevékenységek számla hálózat-specifikus – például ha tranzakciót hajtok végre az Ethereum Mainnet-en, akkor az csak az Ethereum Mainnet-en történik, és nincs más hálózat). Most abbahagyjuk a kapcsolatot a Ganache-szal (helyi fejlesztői hálózat), és elkezdjük használni ezt a fiókot néhány nyilvános hálózattal való interakcióhoz!!

    Általában az első dolog, amit egy nyilvános hálózattal való interakció során kell tennie, az, hogy megszerezze a hálózat éterének egy részét. Esetünkben csatlakozni fogunk a Ropsten nyilvános teszthálózathoz, ezért beszereznünk kell egy kis Ropsten-étert (ETH)! Ne aggódjon – a teszt nettó ETH ingyenes és bőséges, és rendkívül könnyű beszerezni &# 128077;

    A teszt ETH megszerzésének ideje

    Ropsten ETH beszerzéséhez menjen át a Ropsten csaptelep. Illessze be a fiók címét és a brácsát! Kaptál egy kis Ropsten ETH-t, és elkezdhetsz tranzakciókat küldeni (azaz állapotváltozásokat hajthat végre) a Ropsten hálózaton!

    Tájékoztatásul a Ropsten tesztháló egy nyilvános Ethereum teszthálózat, ahol a kódját olyan környezetben tesztelheti, amely szorosan tükrözi az Ethereum mainnetét. A fő különbség a Ropsten tesztháló (és a többi nyilvános Ethereum tesztháló) között az, hogy a testnet-landban az ETH rengeteg, és nincs valós értéke! Amikor elkezd kapcsolatba lépni az Ethereum mainnettel, a tranzakciók (gázköltségek) kifizetéséhez használt éter TÉNYLEG dollárba kerül – és ezért meg kell győződnünk arról, hogy előre helyesen cselekszünk-e, hogy ne veszítsük el a nehéz -szerzett készpénz / értékes mainnet ETH!

    A Ropsten teszthálózat, a legtöbb többi nyilvános teszthálózattal együtt, számos blokk felfedezőt tartalmaz, amelyek segítségével megtekintheti a láncolatban zajló tevékenységeket (https://ropsten.etherscan.io/). Támogatott fiókjának megtekintéséhez egyszerűen illessze be fiókjának címét az explorerbe – és megtekintheti a hozzá társított összes előzményt:

    Képernyőfelvétel 2020 09 01, 4 34 21 órakor

    Rendben! Most, hogy megkaptuk pénztárca szolgáltatónkat és egy számlát, amelyet a Ropsten ETH finanszírozott, visszatérhetünk a projektünkhöz, és a Ropsten teszthálózathoz csatlakozó Infura csomópontokra mutathatunk.

    Az első dolog, amit meg akarunk tenni, egy a.env fájl létrehozása az értékes TITKOK elhelyezésére! Ezek a titkok tartalmazzák az Infura API kulcsunkat (amelyet az Infura fiók létrehozásakor generáltunk) és a mnemos kifejezést.

    A projekt gyökérszintjén egyszerűen hozzon létre egy új fájlt .env. Ezenkívül telepítenie kell a dotenv NPM csomagot a következő parancs beírásával a terminálba

    npm install –save dotenv

    Ebben az új.env fájlban két dologra lesz szüksége:

    INFURA_API_KEY = ITT Tegye be API kulcsát (nincs árajánlat)

    MNEMONIC = “lencse bálna ventilátor huzal buborék online ülés kiteszi a készlet szám mondat győztes”

    Az INFURA_API_KEY az előzőleg az infurában létrehozott projekt projektazonosítója:

    Képernyőkép - 2020 09 01, 4 37 12 órakor

    Az MNEMONIC pedig a 12 szóból álló kezdő kifejezés, amelyet korábban használt a fiók létrehozásához.

    A fájljának most így kell kinéznie:

    Képernyőkép - 2020 09 01 4 41 53 órakor

    Rendben, közeledünk!

    MEGJEGYZÉS: Ha ezt egy Github-adattárba akarja tolni, vagy bármilyen módon nyilvánosságra hozza ezt a projektet, GYŐZZE meg, hogy az.env fájl az.gitignore fájlban van-e, hogy titkait ne tegyék ki! 

    Most át kell térnünk a truffle-config.js fájlra. Itt hozzá kell adnunk néhány dolgot a szolgáltatónk jelölésére (amelyet az Infura (a korábban telepített szarvasgomba HDWallet szolgáltató) interakciójára használunk, és az alkalmazásunkat a Ropsten Infura csomópontokra kell irányítanunk.

    A fájl tetején adja hozzá:

    megkövetelik ("dotenv") .config (); const HDWalletProvider = szükség ("@ szarvasgomba / hdwallet-szolgáltató");

    Ezután a „hálózatok” alatt a következő hálózatot szeretné hozzáadni:

    ropsten: {szolgáltató: () => új HDWalletProvider (process.env.MNEMONIC, “https://ropsten.infura.io/v3/$ {process.env.INFURA_API_KEY}”), network_id: 3, // Ropsten azonosítója: 5500000, // Ropsten rendelkezik egy alsó blokkkorlát, mint a mainnet megerősítései: 2, // a confs # száma, hogy várjon a telepítések között. (alapértelmezett: 0) timeoutBlocks: 200, // blokkok száma a telepítés időkorlátja előtt (minimum / alapértelmezett: 50) skipDryRun: true // Átugrani a száraz futtatást az áttelepítések előtt? (alapértelmezett: hamis a nyilvános hálózatoknál)}

     

    Most a truffle-config.js fájlnak valami ilyennek kell kinéznie!

    Oldaljegyzet:

    Ha Infura végpontokat használ, akkor a `from ‘paraméterre van szükség, mivel nincs pénztárcájuk. Ha Ganache vagy Geth RPC végpontokat használ, ez egy opcionális paraméter.

    Képernyőkép - 2020 09 01, 4 50 54 órakor

    Most készen állunk a varázslatra! Ideje intelligens szerződést telepíteni a ROPSTEN-re!

    Intelligens szerződés létrehozása

    Szilárdság beállítása

    Először is intelligens szerződést akarunk létrehozni a telepítéshez! Foghatja az útmutató előző szakaszában kidolgozott intelligens szerződést, elkészítheti saját intelligens szerződését, vagy egyszerűen csak felhasználhatja a következő (rendkívül egyszerű) szerződésmintát:

    pragma szilárdság >= 0,5,8; szerződés SimpleStorage {uint256 tároltData; függvénykészlet (uint256 x) public {tároltData = x; } függvény get () nyilvános nézet visszatér (uint256) {return tároltData; }}

    Ezt a szerződést „.sol” (szilárdság) fájlként kell létrehozni a projekt „szerződések” mappájában (ebben a forgatókönyvben hoztuk létre a SimpleStorage.sol fájlt, amely a SimpleStorage szerződésünk:

    állvány

    Áttelepítés beállítása

    Ezután be kell állítanunk az áttelepítési fájlt!

    Az áttelepítések olyan JavaScript fájlok, amelyek segítenek a szerződések telepítésében az Ethereum hálózatra. Ezek a fájlok felelősek a telepítési feladatok szakaszosá tételéért, és abból a feltételezésből íródnak, hogy a telepítési igények idővel változnak. Amint a projekted fejlődik, új migrációs szkripteket hozol létre a blokklánc ezen fejlődésének elősegítése érdekében. A korábban futtatott migrációk előzményeit egy külön migrációs szerződés révén rögzítik láncon. További információt találhat róluk itt.

    A szerződésünk telepítéséhez szükséges migrációs fájlunk így fog kinézni:

    const SimpleStorage = artifacts.require ("SimpleStorage.sol"); module.exports = function (deployer) {deployer.deploy (SimpleStorage); };

    Mentse ezt a fájlt a „migrations” mappába “2_deploy_contracts.js” néven..

    Az első közbeszerzési szerződés bevezetése

    Ideje migrálni

    Most már TÉNYLEG készen áll arra, hogy megtörténjen a MÁGIA! Menjen vissza a konzolhoz, és gépeljen

    szarvasgomba migrál – hálózat ropsten

    Bumm!&# 128163; A kódot a nyilvános Ropsten Ethereum Test Net-be telepítették!!! 

    Ami most történt:

    1. A Solidity intelligens szerződését (a „szerződések” mappában) bájtkódig állította össze – a gép által olvasható kódot az Ethereum Virtual Machine számára.

    2. Ezt a bájtkódot és néhány egyéb adatot tranzakcióba csomagoltunk.

    3. Ezt a tranzakciót az Ön fiókja írta alá.

    4. Ezt a tranzakciót elküldték az Infura csomópontnak, amely csatlakozik a Ropstenhez.

    5. A tranzakciót a hálózaton keresztül terjesztették, egy ropsteni bányász vette fel és egy ropsten blokkba foglalta.

    6. Intelligens szerződése most ÉLŐ a Ropsten blokkláncon!

    Megtekintheti szerződését az Etherscan használatával: https://ropsten.etherscan.io/ – egyszerűen csak illessze be a szerződés címét (a terminálban kell lennie) a megtekintéshez!

    Képernyőkép - 2020 09 01, 5 19 12 órakor

    Elképesztő! Most telepítettük legelső intelligens szerződésünket a PUBLIC Ethereum hálózatra! &# 129327;

    A folyamat pontosan megegyezik az Ethereum mainnet telepítésével, azzal a különbséggel, hogy kicseréli a hálózatot a truffle-config.js fájlban az Ethereum mainnetre (és természetesen futtatja a mainnet Truffle migrációs parancsot a Ropsten helyett) ! Itt nem vezetjük végig ezt a folyamatot, mert az Ethereum mainnet-be történő telepítés tényleges dollárjába kerül – de ha segítségre van szüksége ebben, ugorjon tovább a ConsenSys viszály és örömmel segítenénk!

    Web3 frontend készítése 

    Most, hogy telepítettük a szerződésünket a Ropstenre, építsünk egy egyszerű felhasználói felületet, hogy kölcsönhatásba lépjünk vele!

    Megjegyzés: A dApp „kezelőfelületei” csak a mindennapi, rendszeres régi kezelőfelületek – mint ilyenek, használhatjuk az összes régi, általunk ismert eszközt (Create-Reago-App stb.), Hogy felpörgessük a kezelőfelületünket , majd csak adjon hozzá néhány dolgot, hogy a kezelőfelület olvashasson és írhasson az Ethereum számára! Ez azt jelenti, hogy az összes régi webfejlesztői készség közvetlenül átvihető az Ethereum-land / Web3-ra!!

    Pörgesse fel a React projektünket 

    Rendben, kezdjük.

    Először győződjön meg arról, hogy rendelkezik-e egy könyvtárral, amely tartalmazza az összes információt, amelyet a tárolási szerződésünkhöz készítettünk. A mappámat „storage-back” -nek neveztem el, és ez tartalmazza azt a munkát, amelyet éppen elvégeztünk a szerződés beállításának és telepítésének elvégzéséhez. 

    Képernyőkép - 2020 09 01, 5 26 33 órakor

    Most egy reagálási projekt felpörgetésével fogunk kezdeni, nevezzük ebben a példában a sajátunkat “storage-lab” -nak

    Terminálunkban futtassuk a következőket a projekt megkezdéséhez 

    npx create-react-app storage-lab

    Most, hogy megkaptuk az új projekt kazánlemezünket, menjünk be a projekt könyvtárba

    cd tároló-lab

    Most, hogy részt veszünk a projektünkben, hozzáadjuk a Web3 csomagot, amely lehetővé teszi a projektünk számára, hogy kölcsönhatásba lépjen az Ethereummal! További információ a web3-on itt

    npm web3 telepítés

    A Web3 egyike a két fő csomagnak, amelyeket használhatunk, a másik az ethers.js. Ebben a példában a web3-at fogjuk használni, de ha többet szeretne tudni az ethers.js fájlról, nézze meg itt 

    A kettő részletes magyarázatához nézze meg ezt az írást web3 vs éterek

    Nagy! Most már szinte készen állunk arra, hogy reakcióprojektünk kölcsönhatásba lépjen a szerződésünkkel!

    Először vegyük a korábbi könyvtárunkat (számomra ez a “storage-back”), amely csak az intelligens szerződéseinkkel már elvégzett munkát tartalmazza, és most tegyük hozzá új reakcióprojektünkhöz. Ez ugyanazon a szinten fog élni, mint a src, és most mindent meg kell szereznünk a reakció REPO-nkban.

    Képernyőkép - 2020 09 01, 5 31 38 órakor

    Ezután fel kell állítanunk az ABI-adatainkat tartalmazó fájlt.

    – ABI?

    Örülök, hogy megkérdezte! 

    A Contract Application Binary Interface (ABI) az Ethereum ökoszisztémán belüli szerződésekkel való interakció standard módja, mind a blokkláncon kívülről, mind a szerződés-szerződés kölcsönhatásban. Amikor egy korábbi lépésben összeállítottuk a SimpleStorage szerződésünket, létrehozott nekünk egy JSON fájlt. Ellenőrizze, hogy van-e egy SimpleStorage.json fájl a build / szerződéseink között

    Képernyőkép - 2020 09 01, 6 04 20 órakor

    Ennek a fájlnak a kezdeti áttekintése sok információt tár fel, jelenleg csak az ABI-re kell összpontosítanunk, hogy szinkronizálhassuk szerződésünket az általunk fejlesztett kezelőfelülettel. Ez a JSON tartalmazza azokat az információkat, amelyekre szükségünk van ahhoz, hogy közöljük a szerződésünket a kezelőfelülettel.

    Az ABI egy tömb, amely objektumokat tartalmaz. A fájlt közelebbről megnézve láthatja, hogy ezek az objektumok valójában az egyes funkciók, amelyeket a SimpleStorage szerződés tartalmaz.

    Képernyőkép - 2020 09 01, 5 33 23 órakor

    Gyorsan láthatja

    „Név”: „készlet”

    „Név”: „kap”

    mindkettő “type:“ function ”funkcióval, mindkettővel, amelyeket az okos szerződésünk megírásakor deklaráltunk!

    Bár a szarvasgomba elhomályosítja a következő néhány lépést, egy sokkal „manuálisabb” módszert fogunk végigjárni, hogy az összes alapismeret ki legyen téve Önnek &# 128578;

    Először folytassa és másolja az abi adatait – egy pillanat alatt szükségünk lesz rá. 

    Hozzunk létre egy mappát a src-n belül, „abi” néven.

    Készítsünk frissen készített abi mappánk belsejében egy abi.js nevű fájlt

    Megjegyzés: Technikailag nincs szükségünk erre a szétválasztásra, és egyszerűen hozzáadhatjuk az abi.js-t az src-hez, de az abi.js fájljaink megtartása segít a szervezésben.

    Most átmásoljuk az abi tömböt, amelyet korábban megfogtunk a SimpleStorage.JSON fájlból, és hozzáadjuk az újonnan készített abi.js fájlunkhoz. Kicsit megváltoztatjuk a fájlt, hogy a projektünk importálhassa az információkat az App.js fájlba. Ne felejtse el, mivel ez egy a.js fájl, hozzá kell adnunk egy exportot, hogy később be tudjuk vonni azt az app.js fájlba. Nevezzük meg a const-ot a szerződéssel megegyezőnek, kivéve a teve esetében (lásd az alábbi kódot):

    Ez lesz az a kód, amelyet az abi.js fájlban tárolunk

    export const simpleStorage = [{konstans: hamis, bemenetek: [{név: "x", típus: "uint256", },], név: "készlet", kimenetek: [], fizetendő: false, stateMutability: "nem fizethető", típus: "funkció", }, {konstans: igaz, bemenetek: [], név: "kap", kimenetek: [{név: "", típus: "uint256", },], fizetendő: false, stateMutability: "Kilátás", típus: "funkció", },];

    Ideje elindulni az App.js oldalunkra, és importálni a web3-at és a frissen készített abi.js fájlunkat.

    Ebben a példában horgokat is fogunk használni (ezért importáljuk a {useState} fájlt is, amelyről többet olvashat a useState-ről itt.

    Az App.js fájl tetejének most így kell kinéznie:

    a React, {useState} importálása innen: "reagál"; importálja a (z) {simpleStorage} fájlt innen "./ abi / abi"; a Web3 importálása innen: "web3"; import "./App.css";

    Most meg kell győződnünk arról, hogy minden önkényes felhasználó képes-e csatlakozni és használni a dApp-t, mindaddig, amíg rendelkezik pénztárca-szolgáltatóval!

    Az Ethereum térben a dApp interakcióhoz használt fő pénztárca a MetaMask, amelyet az 1. lépésben vezettek be.

    Ha nincs MetaMask, látogasson el metamask.io

    A MetaMask telepítésével hozzáférhetünk pénztárcánkhoz a dapp belsejében:

    const web3 = új Web3 (Web3.givenProvider);

    A „Web3.givenProvider” egy Ethereum által támogatott böngészőben lesz beállítva.

    (bővebben arról olvashat, hogy miért van erre szükség itt)

    Tehát most a kódunknak így kell kinéznie:

    a React, {useState} importálása innen: "reagál"; importálja a (z) {simpleStorage} fájlt innen "./ abi / abi"; a Web3 importálása innen: "web3"; import "./App.css"; const web3 = új Web3 (Web3.givenProvider);

    Rendben! Eddig:

    • Felfuttatta a React projektet
    • Telepített Web3
    • Hozzáadta a build + szerződés + áttelepítést tartalmazó mappánkat a React projektünkhöz
    • Létrehozott egy abi.js fájlt, amely tartalmazza az abi adatokat, amelyeket a SimpleStorage.json-ból vettünk ki
    • Importálta azokat az adatokat, amelyekre szükségünk van a szerződésünkhöz
    • Létrehozott egy változót, amely lehetővé teszi a dApp számára, hogy kommunikáljon a felhasználó pénztárcájával

    Ismét, bár a Szarvasgomba szükségtelenné teszi a következő néhány lépést (később egy sokkal egyszerűbb verziót ismertetünk), oktatási célokra egy kicsit több kézi bonyolultságot adunk a dApp-ba.

    Most két új változót fogunk létrehozni: az egyiket a Ropstenen telepített szerződés címének tárolására, a másikat pedig arra, hogy ezt a szerződést összehangoljuk az ABI-vel, hogy az alkalmazásunk tudja, hogyan kell vele beszélni.! 

    A szerződés címének megkereséséhez keresse meg azt a JSON fájlt, amelyben korábban voltunk (amely tartalmazza az ABI-t (SimpleStorage.json)), és görgessen az aljára. A cím itt a „cím” mezőben található:

    "fordítóprogram": { "név": "solc", "változat": "0,5,8 + elkötelezettség 23d335f2.Emscripten.clang" }, "hálózatok": { "3": { "események": {}, "linkek": {}, "cím": "0x24164F46A62a73de326E55fe46D1239d136851d8", "actionHash": "0x1f02006b451b9e85f70acdff15a01c6520e4beddfd93a20e88a9b702a607a7b0" }}, "schemaVersion": "3.0.16", "updatedAt": "2020-06-30T20: 45: 38.686Z", "devdoc": { "mód": {}}, "userdoc": { "mód": {}}}

    Alternatív megoldásként átmehet https://ropsten.etherscan.io/ és keresse meg annak a fióknak a címét, amely telepítette a szerződést! Az Etherscan-ban a „Szerződés létrehozása” gombra kattintva maga a Szerződés címe jelenik meg.

    Képernyőkép - 2020 09 01, 5 43 46 óra

    Most átvesszük a szerződés címének másolatát, és létrehozunk egy új változót a tárolásához. 

    E nélkül nem leszünk képesek kommunikálni a szerződéssel, és a dApp nem fog megfelelően működni.

    Ezt hozzáadhatja a const web3 = new Web3 (Web3.givenProvider) részünkhöz;

    const contractCím = "a szerződés címét itt";

    Ezután létrehozunk egy új, „storageContract” nevű változót, amely tartalmazza mind a szerződés címét (így az alkalmazásunk tudja, hol van a szerződés), mind az ABI-t (tehát az alkalmazásunk tudja, hogyan lépjen kapcsolatba a szerződéssel).

    const storageContract = új web3.eth.Contract (simpleStorage, contractAddress);

    Az App.js-nek most így kell kinéznie

    a React, {useState} importálása innen: "reagál"; importálja a (z) {simpleStorage} fájlt innen "./ abi / abi"; a Web3 importálása innen: "web3"; import "./App.css"; const web3 = új Web3 (Web3.givenProvider); const contractCím = "a szerződés címét itt"; const storageContract = új web3.eth.Contract (simpleStorage, contractAddress);

    Most meg kell szereznünk, hogy horgunk olyan változókat tartson, amelyek kölcsönhatásba lépnek a szerződésünkkel és a kezelőfelülettel. Ezt úgy fogjuk megtenni, hogy az alkalmazásfunkciónkban a következőket deklaráljuk:

    a React, {useState} importálása innen: "reagál"; importálja a (z) {simpleStorage} fájlt innen "./ abi / abi"; a Web3 importálása innen: "web3"; import "./App.css"; const web3 = új Web3 (Web3.givenProvider); const contractCím = "a szerződés címét"; const storageContract = új web3.eth.Contract (simpleStorage, contractAddress); function App () {const [szám, setUint] = useState (0); const [getNumber, setGet] = useState ("0");

    A useState (0) első használatakor megtartja a felhasználó által bejelentett uint256-ot.

    (a szám, setUint, getNumber, setGet elnevezési konvenciói remélhetőleg segítenek megmutatni, mi történik)

    A useState („0”) érték helyőrzőként működik, amíg meg nem erősítjük az aláírt műveletet (deklarált uint256)

    setUint hamarosan visszahívjuk (erről bővebben később)

    Ideje a logikánknak

    Ezután hozzáadjuk a numberSet és a NumberGet logikánkat (hozzáadjuk a numberSet-et az App függvényünkön belül)

    const numberSet = async (t) => {t.preventDefault (); const számlák = await window.ethereum.enable (); const számla = számlák [0]; const gas = várja a tárolástContract.methods.set (number) .estimateGas (); const post = várja a storageContract.methods.set (szám) .send ({from: számla, gáz,}); }; const numberGet = async (t) => {t.preventDefault (); const post = várja a storageContract.methods.get (). call (); setGet (post); };

    Beállítottunk egy preventDefault beállítást (a preventDefault részletei megtalálhatók itt)

    A szerződéshez aszinkron hívást is használunk (az aszinkron részleteit megtaláltuk itt)

    A hook setGet () egy alapértelmezett értéket tárol, amelyet eredetileg megtekintünk („0”)

    const számlák = await window.ethereum.enable ();

    gondoskodik arról, hogy a MetaMaskon keresztül hívjuk a csatlakoztatott címünket.

    const számla = számlák [0];

    Behúzza a csatlakozási fiókot

    Lehet, hogy kíváncsi vagy, mi folyik itt 

    const gas = várja a tárolástContract.methods.set (number) .estimateGas ();

    Alkalmazásunknak engedélyre van szüksége ahhoz, hogy hozzáférjen a felhasználói forrásokhoz a gázdíjak, az étert igénylő funkciók függetlenül attól, hogy tesztneten vagy mainneten van-e. Itt jön létre a kapcsolat a MetaMask-szal, hogy aláírjuk ezt a felhasználást, hogy beállítsuk az uint256-ot és fizessünk érte (teszt ETH-val)..

    Tehát minden olyan funkcióhoz, amelyhez gázra van szükség, ki kell számolnia a potenciálisan felhasznált gázt.

    Szerződésünk „Set” funkciója gázt igényel

    A „Get” nem.

    (ez azért van, mert a „Get” azt nézi, amit a „Set” -el már deklaráltak)

    A const post elfogadja az uint256-ban elfogadottakat, erősítse meg a tranzakciót (utólag fizetve a gázdíjat) a MetaMask pénztárcájából a Ropsten hálózaton.

    Ezután átadjuk a függvényparamétereket a method.set () segítségével, és a deklarált címünkkel (felhasználói cím) kezeljük a Set függvényt.

    Az intelligens szerződéses tranzakciónkat úgy hozhatjuk létre, hogy a funkció paramétereit átadjuk az intelligens szerződés metódusainak.set (), és becsült gáz- és felhasználói fiók címét a.send ().

    const post = várja a storageContract.methods.set (szám) .send ({from: számla, gáz,});

    Ez legyen az a logika, amire szükségünk van a numberSet lefedéséhez.

    Most szükségünk van a számunkra

    const numberGet = async (t) => {t.preventDefault (); const post = várja a storageContract.methods.get (). call (); setGet (post); };

    A const postunk lekéri a beállított számunkat és a setGet átadja az új értéket, amelyet deklaráltunk

    Tehát a „0” az onClick hivatkozni fog a numberGet-re, és az unint256-ot teszi vissza!

     Tehát most az app.js-nek így kell kinéznie

    a React, {useState} importálása innen: "reagál"; importálja a (z) {simpleStorage} fájlt innen "./ abi / abi"; a Web3 importálása innen: "web3"; import "./App.css"; const web3 = új Web3 (Web3.givenProvider); const contractCím = "a szerződés címét"; const storageContract = új web3.eth.Contract (simpleStorage, contractAddress); function App () {const [szám, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); const számlák = await window.ethereum.enable (); const számla = számlák [0]; const gas = várja a tárolástContract.methods.set (number) .estimateGas (); const post = várja a storageContract.methods.set (szám) .send ({from: számla, gáz,}); }; const numberGet = async (t) => {t.preventDefault (); const post = várja a storageContract.methods.get (). call (); setGet (post); };

    Hozzunk létre egy nagyon egyszerű hozamot a rendereléshez, hogy tesztelhessük, ha tudunk 

    • állítson be egy unint256 értéket,
    • Húzza fel a metamask pénztárcánkat és erősítse meg a tranzakciót
    • Fizesse a gázköltséget
    • akkor kapjuk meg az értéket (unint256), amelyet a tranzakció befejezése után tároltunk.

    Visszatérésünk így néz ki: 

    return (Állítsa be az uint256 értékét: setUint (t.target.value)} /> megerősít

    Szerezd meg uint256 {getNumber}); } exportálja az alapértelmezett alkalmazást;

    Néhány gyors CSS

    Most térjünk át az App.css fájlra, töröljük a kazánlap kódját, és adjuk hozzá ezt helyette

    .main {text-align: center; kijelző: flex; igazol-tartalom: központ; háttérszín: # f2f1f5; magasság: 100vh; } .kártya {min-magasság: 50vh; szélesség: 50vw; kijelző: flex; hajlítási irány: oszlop; align-items: center; igazol-tartalom: központ; } .form {magasság: 20vh; szélesség: 20vw; kijelző: flex; igazol-tartalom: tér-egyenletesen; hajlítási irány: oszlop; } .gomb {szélesség: 20vw; magasság: 5vh; }

    Most készen állunk a tesztelésre!

    A terminál futtatásában

    fonal kezdete

    Helyi vendéglátónkban: 3000 így kell kinéznünk

     

    Képernyőkép - 2020 09 01, 6 12 49 órakor

    Most már képesnek kell lennünk egy unint256 érték megadására a beviteli mezőnkben!

    Miután megerősítettük a számunkat a dApp-ban, aláírjuk a MetaMask-on keresztül (Győződjön meg róla, hogy pénztárcája Ropsten hálózatra van állítva)

    confrim1

    Megcsináltuk! &# 129303;

    Most már intelligens szerződésünk kapcsolódik egy kezelőfelülethez, és képesek vagyunk manipulálni a Set funkciót (feltéve, hogy rendelkezünk a teszt ETH-val a tranzakció gázdíjának megfizetéséhez). Ezután meghívhatjuk a Get függvényt, és lekérhetjük a tárolt uint265 értéket.

    Nagyon jó huh!?!

    Extra stílus 

    Itt az ideje, hogy megmutassuk, milyen egyszerű lehet még népszerűbb Web2 technológiát beépíteni a projektünkbe.

    Az MUI-t fogjuk használni az alapstílus hozzáadásához, ha már a React-tel fejlődik, akkor ismeri az anyag-ui-t. (Részletek megtalálva itt) A Material-UI vagy a MUI röviden egy nagyon népszerű React keretrendszer, amely lehetővé teszi, hogy gyorsan felpörgetjen egy projektet, sok stílussal elkészítve, feltéve, hogy betartja a névadási konvenciókat. Az is nagyon könnyen kezelhető, ha csak alapozót szeretne használni, és onnan testreszabni.

    * Ez egy nagyon rövid példa arra, hogyan lehet az MUI-t kis kiegészítésekkel hozzáadni egy projekthez, hogy bemutassuk, milyen gyorsan illesztheti be projektünket a Web2-technológiával összhangban.. 

    Az MUI hozzáadása

    Először a parancs futtatásával kezdjük (miközben még mindig a terminál projektkönyvtárában vagyunk (ha az alkalmazás még mindig fut, akkor be kell zárni (ctrl + c), vagy új lapot kell megnyitni)):

    Az npm használatával történő telepítés:

    npm install @ material-ui / core

    Vagy fonallal:

    fonal hozzáadása @ material-ui / core

    Most, hogy az MUI-t injekcióztuk, a stílus megváltoztatásával kezdjük. Az app.js fájl tetején néhány új dolgot fogunk importálni:

    importálja a (z) {simpleStorage} fájlt innen "./ abi / abi"; importálás gomb innen: "@ material-ui / core / Button"; importálja a TextField-et innen: "@ material-ui / core / TextField"; importálja a {makeStyles} fájlt innen "@ material-ui / core / styles";

    A {makeStyles} importálása lehetővé teszi számunkra a gombok és a szövegmező stílusának (ebben az esetben) manipulálását az alapértelmezett MUI stílus importálásával együtt. 

    Most egy olyan változót készítünk (a funkciónk felett), amely behozza a kazán stílusát az MUI-ból

    const useStyles = makeStyles ((téma) => ({gyökér: { "& > *": {margó: téma.köz (1),},},}));

    Most az App függvényünkben hozzáadunk egy „osztályok” nevű változót is, amelyek behúzzák az imént deklarált meghatározott stílusokat.

    function App () {const class = useStyles (); const [szám, setUint] = useState (0); const [getNumber, setGet] = useState ("0");

    Most visszatérítésünkön belül kiigazításokat hajtunk végre, hogy néhány mezőnket az imént importált helyettesítsük.

    return (setUint (t.target.value)} variáns ="vázolta" /> megerősít

    Szerezd meg uint256 {getNumber}); } exportálja az alapértelmezett alkalmazást;

    A kódjának most így kell kinéznie

    a React, {useState} importálása innen: "reagál"; importálja a (z) {simpleStorage} fájlt innen "./ abi / abi"; a Web3 importálása innen: "web3"; import "./App.css"; importálja a {makeStyles} fájlt innen "@ material-ui / core / styles"; importálás gomb innen: "@ material-ui / core / Button"; importálja a TextField-et innen: "@ material-ui / core / TextField"; const useStyles = makeStyles ((téma) => ({gyökér: { "& > *": {margó: téma.köz (1),},},})); const web3 = új Web3 (Web3.givenProvider); const contractCím = "a szerződés címét itt"; const storageContract = új web3.eth.Contract (simpleStorage, contractAddress); function App () {const class = useStyles (); const [szám, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); const számlák = await window.ethereum.enable (); const számla = számlák [0]; const gas = várja a tárolástContract.methods.set (number) .estimateGas (); const post = várja a storageContract.methods.set (szám) .send ({from: számla, gáz,}); }; const numberGet = async (t) => {t.preventDefault (); const post = várja a storageContract.methods.get (). call (); setGet (post); }; return (setUint (t.target.value)} variáns ="vázolta" /> megerősít

    Szerezd meg uint256 {getNumber}); } exportálja az alapértelmezett alkalmazást;

    Most, ha megnézzük a reakció projektünket, annak így kell kinéznie!

    Képernyőkép - 2020 09 01, 6 48 55 óra

    Szép munka!

    Még mindig rendelkezünk a korábbiak összes funkciójával, és most egy könnyen használható keretrendszert injektáltunk a projektünk további testreszabására, bármennyire is szeretnénk. Vessen egy pillantást a MUI-ra dokumentáció hogy kísérletezzen saját kiegészítéseivel / módosításaival!

    Bónusz kör 

    Jó lenne megmutatni a felhasználóknak a címet a dApp-on belül, nem igaz?

    Készítsünk egy nagyon gyors és alapvető komponenst pontosan ehhez!

    Először egy külön összetevőt készítünk, amelyet vissza tudunk importálni az App.js fájlba. Célszerű elkülöníteni a logikánkat, hogy ne csak az App.js-jünk legyen könnyen navigálható, hanem az is ideális, ha csak egy dolgot csinálna. Ha végül növekszik, kisebb alkomponensekre kell bontani.

    Az alkatrész kiépítése 

    Készítünk egy új mappát, az úgynevezett komponenseket, ugyanazon a szinten, mint az src, és ezen a mappán belül elkészítünk egy Nav.js fájlt. A projekt állványzatunknak most valami ilyennek kell kinéznie

    Képernyőkép - 2020 09 01, 6 47 07 órakor

    Készítünk egy Nav.css fájlt a komponensek mappánkban, hogy importálhassunk minden olyan stílust, amelyet kifejezetten a Nav komponensre alkalmazunk.

    Nyissuk meg a Nav.js fájlt, és importáljuk a React, a Web3 és az üres.css fájlunkat

    import React from "reagál"; a Web3 importálása innen: "web3"; import "./Nav.css"

    Most elkészítünk egy Nav nevű osztályt, és csak néhány dolgot adunk hozzá a csatlakoztatott cím megjelenítéséhez. Kezdjük azzal, hogy beállítjuk az államot a fiók elolvasására

    A Nav osztály kiterjeszti a React.Component {state = {account: "" };

    Az osztályunkon belül is betöltjük a fiókot, ahonnan olvashatunk, hozzáadva az async loadAccount logikánkat

    async loadAccount () {const web3 = new Web3 (Web3.givenProvider || "http: // localhost: 8080"); const hálózat = várja web3.eth.net.getNetworkType (); const számlák = várja web3.eth.getAccounts (); this.setState ({fiók: fiókok [0]}); }

    Ezután létrehozunk egy componentDidMount-ot (amelyet azonnal meghívunk a komponens felhelyezése után). Esetünkben behúzza a betöltött fiókot. Olvass tovább itt

    componentDidMount () {this.loadAccount (); }

    Oldaljegyzet:

    Ez másképp is megtehető, egy osztály helyett létrehozhatunk egy függvényt és használhatunk hookokat, amelyek ellentétesek a componentDidMount-tal, de a példa kedvéért ragaszkodunk ehhez a módszerhez.

    Ezután hozamot hozunk létre a visszatérésünk fölött, a render egy olyan módszer, amelyre akkor van szükség, amikor React komponenst írunk osztály metódussal. Visszatérésünkön belül hozzáadunk egy osztálycímet a div-hez (az alapstílus későbbi megadásához) egy p címke mentén, hogy megmutassuk az összekapcsolt címet, amelyet a {this.state.account} segítségével kaptunk

    render () {return (Csatlakozott címed: {this.state.account}); }} alapértelmezett Nav exportálása;

    A Nav.js fájlunknak most így kell kinéznie

    import React from "reagál"; a Web3 importálása innen: "web3"; import "./Nav.css" A Nav osztály kiterjeszti a React.Component {state = {account: "" }; async loadAccount () {const web3 = new Web3 (Web3.givenProvider || "http: // localhost: 8080"); const hálózat = várja web3.eth.net.getNetworkType (); const számlák = várja web3.eth.getAccounts (); this.setState ({fiók: fiókok [0]}); } componentDidMount () {this.loadAccount (); } render () {return (Csatlakozott címed: {this.state.account}); }} alapértelmezett Nav exportálása;

     

    Menjünk a Nav.css fájlra, és adjunk hozzá nagyon egyszerű stílust

    .cím {display: flex; igazol-tartalom: központ; }

    Technikailag hozzáadhatja ezt az App.css fájlhoz, de ne felejtse el, bár elég gyorsan összezavarodni. Az alkatrészeknek újrafelhasználhatóknak kell lenniük, és a lehető legnagyobb súrlódás elkerülése érdekében a munkájuk szétosztása révén fejfájást takaríthat meg az úton.

    Most térjünk vissza az App.js-re, és importáljuk az újonnan gyártott alkatrészünket, és feltétlenül adjuk hozzá a visszatéréshez a megjelenítéshez!

    A kész App.js fájlunknak így kell kinéznie

    a React, {useState} importálása innen: "reagál"; importálja a (z) {simpleStorage} fájlt innen "./ abi / abi"; a Web3 importálása innen: "web3"; a Nav importálása innen: "./components/Nav.js"; import "./App.css"; importálja a {makeStyles} fájlt innen "@ material-ui / core / styles"; importálás gomb innen: "@ material-ui / core / Button"; importálja a TextField-et innen: "@ material-ui / core / TextField"; const useStyles = makeStyles ((téma) => ({gyökér: { "& > *": {margó: téma.köz (1),},},})); const web3 = új Web3 (Web3.givenProvider); const contractCím = "a címed itt"; const storageContract = új web3.eth.Contract (simpleStorage, contractAddress); function App () {const class = useStyles (); const [szám, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); const számlák = await window.ethereum.enable (); const számla = számlák [0]; const gas = várja a tárolástContract.methods.set (number) .estimateGas (); const post = várja a storageContract.methods.set (szám) .send ({from: számla, gáz,}); }; const numberGet = async (t) => {t.preventDefault (); const post = várja a storageContract.methods.get (). call (); setGet (post); }; Visszatérés ( setUint (t.target.value)} variáns ="vázolta" /> megerősít

    Szerezd meg uint256 {getNumber}); } exportálja az alapértelmezett alkalmazást;

    Most fent kell látnunk a csatlakoztatott címünket, és továbbra is meg kell őriznünk minden funkciónkat!

    bónuszV1

    &# 127881; Megcsináltuk! &# 127881;

    Most van egy dApp, amelyet alapoktól kezdve építettünk. Bevontuk az intelligens szerződésünket egy React projektbe, logikát írtunk a felhasználói funkcionalitás biztosítása érdekében, létrehoztunk egy összetevőt a csatlakoztatott cím megjelenítésére, és még egy népszerű stíluskeretet is felvettünk a projektünkbe.

    Szép munka! Ez csak a kezdete a Web3 fejlesztési kalandjainak, és máris van mit mutatnia arról, hogy nemcsak létrehozott, hanem a fejét is körbetekerte. Keressen fel minket a Discordban, és ossza meg velünk projektjét (különösen, ha bármilyen módosítást vagy kiegészítést hajtott végre)!

      Fejlesztő beillesztése: 1. lépésFejlesztő beépítése 1. lépés

      Fejlesztő beillesztése: 1. lépés

      Fejlesztő beillesztése: 2. lépésFejlesztő beépítése 2. lépés

      Fejlesztő beillesztése: 2. lépés

      10 perces Ethereum orientáció10 perces Ethereum orientáció

      10 perces Ethereum orientáció
    Mike Owergreen Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map