Vaihe 3: Käynnistä Dapp Developer Portal

    Kolmannet vaiheet

    Joten sinulla on perusasiat alas. Kehitit edellisessä osassa älykkään sopimuksen ja otit sen käyttöön tryffelin avulla. Edellisessä osassa älykkäät sopimuksesi otettiin käyttöön paikallisessa kehitysverkossa – ja se ei ole hauskaa, koska vain sinä voit asentaa asioita ja olla vuorovaikutuksessa kyseisen paikallisen testiverkon kanssa! Haluamme ystäviä! Ja pääsy muihin älykkäisiin sopimuksiin, jotka muut ovat käyttäneet!

    Siksi tässä osiossa siirrytään käyttämään julkista Ethereum-testiverkkoa, jotta voit osallistua kaikkiin Ethereumin ekosysteemin ympärillä tapahtuviin toimiin.!

    Aloitetaan!

    Ensin puhumme siitä, miten pääset näihin julkisiin Ethereum-verkkoihin.

    Näihin verkkoihin pääsemiseksi sinun on muodostettava yhteys solmuun, joka on kytketty kyseiseen verkkoon. Voit tarkastella kutakin Ethereum-verkkoa omana pienenä Ethereum-maailmana ja voit tarkastella Ethereum-solmua yhdyskäytävänä tai yhteysosoitteena kumpaankin näistä maailmoista! Koska Ethereum on hajautettu verkko, kukin Ethereum-solmu tallentaa koko verkon tilan, johon se on kytketty (on solmuja, joiden ei tarvitse tallentaa koko tilaa, mutta älä huoli siitä toistaiseksi) ja kommunikoi jatkuvasti verkon muiden solmujen kanssa, jotta tila pysyy ajan tasalla! Siksi, jotta voimme lukea ja kirjoittaa tähän tilaan, meidän on saatava käyttöoikeus johonkin näistä solmuista.

    Voit hyvin isännöidä omaa solmua käyttämällä yhtä monista tällä hetkellä käytettävissä olevista Ethereum-asiakkaista (Hyperledger Besu (ConsenSysin kehittämä Java-asiakas), Geth (Go-asiakas), Parity (Rust-asiakas) jne.) – kuitenkin, on olemassa melko pieni DevOps-yleiskustannus, joka sisältyy oman Ethereum-solmun ylläpitoon ja ylläpitoon – varsinkin jos haluat tehdä sen luotettavasti! Sellaisena olemme ConsenSysissä rakentaneet Infuran – maailmanluokan Ethereum-infrastruktuuritarjonnan. Infura huolehtii koko solmunhallintakappaleen puolestasi, tarjoten sinulle välittömän, luotettavan ja skaalautuvan pääsyn Ethereum-solmujen klustereihin! Voit ajatella Infuraa “Ethereum-solmuina palveluna” &# 128578;

    Infuran käytön aloittaminen

    Aloita Infuran käyttö rekisteröimällä tili osoitteessa infura.io. Älä huoli – aloittaminen on täysin ilmaista, eikä sinun tarvitse antaa mitään arkaluontoisia tietoja!

    Kun olet rekisteröitynyt, sinut ohjataan sivulle, joka näyttää tältä:

    Kirjaudu sisään

    Kuten tämä sivu ehdottaa, valitse aluksi ensimmäinen vaihtoehto “Aloita ja luo ensimmäinen projekti päästäksesi Ethereum-verkkoon!”

    Voit nimetä projektisi haluamallesi tavalla – me nimemme projektimme testiprojektiksi.

    InfuraNP

    Nyt sinulle annetaan tunnistetiedot, jotka sinun on käytettävä Infura-solmuihin!

    InfuraC

    Pidä tämä sivu auki! Palaamme asiaan myöhemmin &# 128578;

    Seuraava asia, jonka teemme, on uuden Truffle-projektin alustaminen. Jos tarvitset apua tryffelin asennuksessa, katso tämän oppaan edellinen osa.

    Alustaaksesi uuden tryffeliprojektin, luo uusi kansio ja suorita

    tryffeli init

    Seuraavaksi sinun on lisättävä Truffle HD Wallet -palveluntarjoaja äskettäin alustettuun projektiisi, jotta voit allekirjoittaa tapahtumat ennen niiden lähettämistä Infura-solmuihin. Jokainen Ethereumille tekemäsi osavaltiomuutos tapahtuu tapahtuman muodossa – olipa kyseessä sopimuksen käyttöönotto, toiminnon kutsuminen sopimuksen sisällä tai tunnuksen lähettäminen! Jokainen tapahtuma on allekirjoitettava tilillä – siksi sovelluksemme tarvitsee kyvyn allekirjoittaa tapahtumia, jotta se voi tehdä valtion muutoksia Ethereumiin!

    Jokainen tapahtuma maksaa myös eetteriä. Tätä tapahtumakustannusta kutsutaan “kaasukustannukseksi”. Siksi, jotta verkko pystyy käsittelemään allekirjoitetut maksutapahtumamme, kun ne on lähetetty Infura-solmuihin, meidän on rahoitettava tilimme eetterillä. Käsittelemme tämän hieman myöhemmin, mutta tämä on vain yksi tärkeä syy, miksi tarvitset lompakon & lompakon tarjoaja!

    Voit lisätä Truffle HD Wallet -palveluntarjoajan vasta alustettuun projektityyppiin päätelaitteessasi:

    npm install –save @ tryffeli / hdwallet-tarjoaja

    Tämä saattaa aiheuttaa joitain varoituksia, mutta niin kauan kuin se asennetaan, olet hyvä mennä!

    Nyt voimme luoda Ethereum-tilin sovelluksemme käyttöön! Koska lompakon tarjoajamme on HD (hierarkkinen deterministinen) lompakko, voimme luoda deterministisesti tilejä samalla siemenlauseella tai muistisanalla.

    Luodaksemme tilin meidän on ensin käynnistettävä Ganache. Ganache on tryffelituote, jonka avulla voimme helposti luoda oman paikallisen dev-verkostomme. Suorita ganache yksinkertaisesti kirjoittamalla

    ganache-cli

    Jos olet suorittanut tämän oppaan vaiheen 2, sinulla pitäisi olla jo asennettuna Ganache / ganache-cli – jos et, voit asentaa sen komennolla npm:

    npm asenna -g ganache-cli

    Tai jos käytät lankaa 

    lanka globaali lisää ganache-cli

    Seuraavaksi meidän on annettava sovelluksemme puhua Ganachen kanssa. Siirry projektihakemistoon ja maksa truffle-config.js-tiedosto, vain kommentoi (tai lisää) seuraavia rivejä verkon alla:

    kehitys: {isäntä: "127.0.0.1", // Localhost (oletus: ei ole) -portti: 8545, // Standard Ethereum -portti (oletus: ei mitään) network_id: "*" // Mikä tahansa verkko (oletus: ei mitään)},

    uncommenrt

    Kiva! Nyt sovelluksemme voi puhua Ganache-kehitysverkostomme kanssa, joka toimii osoitteessa 127.0.0.1:8545! Suorita nyt komento uudessa pääteikkunassa (mutta silti projektikansiossa)

    tryffelikonsoli

     yhteyden muodostamiseksi Ganache-verkkoon. Älä huoli – muodostamme yhteyden julkiseen verkkoon myöhemmin! Meidän on vain muodostettava yhteys Ganacheen juuri nyt avaintemme luomiseksi &# 128578;

    Huomaa: Jos sinulla on ongelmia, varmista, että Ganachessa RPC-palvelimen porttinumero vastaa tryffelin määritystiedostoa. Oletustapauksessa 8545: n pitäisi toimia, muuten muuta asetustiedostosi vastaamaan Ganache-tiedostoa.

    Luo nyt lompakko kirjoittamalla seuraavat komennot tryffelikonsoliin:

    const HDWalletProvider = vaatia (‘@ tryffeli / hdwallet-tarjoaja’);

    Tämän pitäisi johtaa “määrittelemättömän” vastaukseen

    12-sanaisessa muistitiedostossasi voit käyttää muistitekniikkaa, kuten Tämä jos haluat!

    VARMISTA, ETTÄ SÄÄSTÄT MNEMONINEN (SEED) Lauseesi! Tarvitsemme sitä myöhemmin &# 128515;

    Lisää seuraavaksi seuraava komento päätelaitteeseesi (vaikka se on edelleen tryffelien kehitystyössä):

    const mnemonic = ’12 sanaa täällä’; const lompakko = new HDWalletProvider (muistitikku, "http: // localhost: 8545");

    Kirjoita komento tryffelikonsoliin 

    lompakko

    Jos vierität ylöspäin, sinun pitäisi nähdä tällainen tililuettelo!

    addy

    Huolimatta siitä, että tili luotiin, kun olimme yhteydessä Ganacheen, voimme käyttää samaa Ethereum-tiliä missä tahansa Ethereum-verkossa (huomaa kuitenkin – vaikka samaa tiliä voidaan käyttää missä tahansa Ethereum-verkossa, siihen liittyvät varat / toiminnot ovat verkkokohtaisia ​​- jos esimerkiksi teen tapahtuman Ethereum Mainnetissä, tapahtuma tapahtuu vain Ethereum Mainnetissä eikä mikään muu verkko). Lopetamme nyt vuorovaikutuksen Ganachen (paikallinen dev-verkko) kanssa ja aloitamme tilin käyttämisen vuorovaikutuksessa joidenkin julkisten verkkojen kanssa!!

    Yleensä ensimmäinen asia, joka sinun on tehtävä vuorovaikutuksessa julkisen verkon kanssa, on hankkia osa verkon eetteristä. Meidän tapauksessamme muodostamme yhteyden Ropstenin julkiseen testiverkkoon, joten meidän on hankittava jonkin verran Ropsten-eetteriä (ETH)! Älä huoli – testiverkon ETH on ilmainen ja runsas ja erittäin helppo hankkia &# 128077;

    Aika hankkia testi ETH

    Jos haluat saada jonkin verran Ropsten ETH: ta, siirry Ropsten-hana. Liitä tilisi osoite ja alttoviulu! Olet saanut jonkin verran Ropsten ETH: tä ja voit alkaa lähettää tapahtumia (eli tehdä tilamuutoksia) Ropsten-verkkoon!

    Vertailun vuoksi Ropsten-testiverkko on julkinen Ethereum-testiverkko, jossa voit testata koodiasi ympäristössä, joka peilaa läheisesti Ethereumin mainnetin verkkoa. Tärkein ero Ropsten-testiverkon (ja muiden julkisten Ethereum-testiverkkojen) välillä on se, että testnet-maassa ETH on runsaasti eikä sillä ole todellista arvoa! Kun aloitat vuorovaikutuksen Ethereum-mainnetin kanssa, eetteri, jota käytät maksamaan transaktioistasi (kaasukustannukset), maksaa TODELLINEN dollaria – ja siksi meidän on varmistettava, että teemme asiat oikein etukäteen, jotta emme menetä kovaa – ansaitut rahat / arvokas mainnet ETH!

    Ropsten-testiverkossa, yhdessä useimpien muiden julkisten testiverkkojen kanssa, on monia lohkotutkijoita, jotta voit tarkastella ketjussa tapahtuvaa toimintaa (https://ropsten.etherscan.io/). Nähdäksesi rahoittamasi tilisi, liitä vain tilisi osoite tutkimusmatkailijaan – ja voit tarkastella koko siihen liittyvää historiaa:

    Näyttökuva 2020 09 01 klo 4 34 21

    Hyvä on! Nyt kun olemme saaneet lompakkotoimittajamme ja Ropsten ETH: n rahoittaman tilin, voimme palata projektiimme ja osoittaa sen Ropsten-testiverkkoon liitetyille Infura-solmuille.

    Ensimmäinen asia, jonka haluamme tehdä, on luoda a.env-tiedosto kallisarvoisten salaisuuksien säilyttämiseksi! Näihin salaisuuksiin kuuluu Infura API -avain (luotu Infura-tiliä luodessamme) ja muistisanamme.

    Luo projektisi juuritasolla uusi tiedosto .env. Lisäksi sinun on asennettava dotenv NPM -paketti kirjoittamalla seuraava komento terminaaliin

    npm install –säästä dotenv

    Tarvitset tässä new.env-tiedostossa kaksi asiaa:

    INFURA_API_KEY = LISÄÄ API-AVAIN TÄSTÄ (ei lainauksia)

    MNEMONIC = ”linssivalas tuulettimen lanka kupla online-paikka paljastaa varastossa numero lause voittaja”

    INFURA_API_KEY on projektitunnus hankkeesta, jonka olet aiemmin luonut infurassa:

    Näyttökuva 2020 09 01 klo 4 37 12 AM

    Ja MNEMONIC on 12 sanan alkulause, jota aiemmin käytit tilin luomiseen.

    Tiedostosi pitäisi nyt näyttää tältä:

    Näyttökuva 2020 09 01 klo 4 41 53

    Selvä, olemme lähestymässä!

    HUOMAUTUS: Jos aiot viedä tämän Github-arkistoon tai julkistaa tämän projektin millään tavalla, VARMISTA, että sinulla on .env-tiedosto in.gitignore, jotta salaisuutesi eivät paljastu.! 

    Nyt meidän on siirryttävä truffle-config.js-tiedostoon. Tässä meidän on lisättävä muutama asia palveluntarjoajaamme (jota käytetään vuorovaikutuksessa Infuran (aikaisemmin asentamamme tryffeli-HDWallet-palveluntarjoajan) kanssa) ja osoittamaan sovelluksemme Ropsten Infura -solmuihin.

    Lisää tiedoston yläosaan:

    vaatia("dotenv") .config (); const HDWalletProvider = vaatia ("@ tryffeli / hdwallet-tarjoaja");

    Seuraavaksi haluat lisätä verkkoihin seuraavan verkon:

    ropsten: {tarjoaja: () => uusi HDWalletProvider (process.env.MNEMONIC, `https://ropsten.infura.io/v3/$ {process.env.INFURA_API_KEY}`), network_id: 3, // Ropstenin id-kaasu: 5500000, // Ropstenilla on alempi estoraja kuin mainnet-vahvistukset: 2, // conf-tiedostojen odottaa käyttöönoton välillä (oletus: 0) timeoutBlocks: 200, // lohkojen määrä ennen käyttöönoton aikakatkaisua (minimi / oletus: 50) skipDryRun: true // Ohitetaanko kuivakäynti ennen siirtoja? (oletus: väärä julkisille verkoille)}

     

    Nyt tryffeli-config.js-tiedostosi pitäisi näyttää tältä!

    Sivuhuomautus:

    Jos käytät Infura-päätepisteitä, vaaditaan “ lähettäjä ” -parametri, koska niillä ei ole lompakkoa. Jos käytät Ganache- tai Geth RPC -päätepisteitä, tämä on valinnainen parametri.

    Näyttökuva 2020 09 01 klo 4 50 54 AM

    NYT OLEMME VALMIS TAIKOILLE! On aika ottaa älykäs sopimus käyttöön ROPSTENiin!

    Älykkään sopimuksen luominen

    Vakauden määritys

    Ensinnäkin haluamme luoda älykkään sopimuksen käyttöönottoa varten! Voit tarttua tämän oppaan edellisessä osassa kehittämääsi älykkääseen sopimukseen, luoda oman älykkään sopimuksen tai käyttää vain seuraavaa (erittäin yksinkertaista) esimerkkisopimusta:

    käytännöllisyys >= 0,5,8; sopimus SimpleStorage {uint256 storageData; funktiojoukko (uint256 x) public {tallennettuData = x; } function get () julkinen näkymä palauttaa (uint256) {palauta tallennetut tiedot; }}

    Tämä sopimus on luotava .sol (Solidity) -tiedostona projektisi “sopimukset” -kansioon (tässä tilanteessa olemme luoneet SimpleStorage.sol-tiedoston, joka on SimpleStorage-sopimuksemme:

    rakennustelineet

    Siirron määritys

    Seuraavaksi meidän on määritettävä siirtotiedostomme!

    Siirtymät ovat JavaScript-tiedostoja, jotka auttavat sinua ottamaan sopimukset käyttöön Ethereum-verkkoon. Nämä tiedostot ovat vastuussa käyttöönottotehtävien vaiheistamisesta, ja ne kirjoitetaan olettaen, että asennustarpeesi muuttuvat ajan myötä. Projektisi kehittyessä luot uusia siirtymiskomentosarjoja edistääkseen tätä kehitystä lohkoketjussa. Aiemmin suoritettujen siirtojen historia tallennetaan ketjuun erityisen siirtosopimuksen avulla. Löydät lisää tietoa niistä tässä.

    Sopimuksemme käyttöönoton siirtotiedostomme näyttää tältä:

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

    Tallenna tämä tiedosto siirtymiskansioon nimellä 2_deploy_contracts.js.

    Ensimmäisen julkisen sopimuksesi käyttöönotto

    Aika siirtyä

    Nyt olet todellakin valmis taikuuden tapahtuvaksi! Palaa konsoliin ja kirjoita

    tryffeli siirtyy – verkko ropsten

    Puomi!&# 128163; Koodisi otettiin käyttöön julkisessa Ropsten Ethereum Test Netissä!!! 

    Mitä juuri tapahtui, oli:

    1. Solidity-älykäs sopimuksesi (“sopimukset” -kansiossa) koottiin tavukoodiksi – koneellisesti luettavaksi koodiksi, jota Ethereum Virtual Machine käyttää.

    2. Tämä tavukoodi + jotkut muut tiedot niputettiin yhteen tapahtumaksi.

    3. Tilisi allekirjoitti tapahtuman.

    4. Kyseinen tapahtuma lähetettiin Infura-solmuun, joka on yhteydessä Ropsteniin.

    5. Kauppa levitettiin koko verkossa, otti Ropsten-kaivosmies ja sisälsi Ropsten-lohkon.

    6. Älykäs sopimuksesi on nyt LIVE Ropsten-lohkoketjussa!

    Voit tarkastella sopimusta Etherscanilla: https://ropsten.etherscan.io/ – yksinkertaisesti liitä sopimuksen osoite (sen pitäisi olla päätelaitteessasi) nähdäksesi sen!

    Näyttökuva 2020 09 01 klo 5 19 12

    Hämmästyttävä! Olemme juuri ottaneet käyttöön ensimmäisen älykkään sopimuksemme JULKISEN Ethereumin verkkoon! &# 129327;

    Prosessi on täsmälleen sama Ethereum-mainnet-sovelluksessa, paitsi että vaihdat verkon tryffeli-config.js-tiedostossa Ethereum-mainnetiin (ja tietysti suoritat mainnet-tryffelien siirtokomennon Ropsten-yhden sijaan) ! Emme käy läpi tätä prosessia täällä, koska käyttöönotto Ethereumin mainnetiin maksaa todelliset dollarit – mutta jos haluat apua tässä, siirry eteenpäin ConsenSys-ristiriita ja autamme mielellämme!

    Web3-käyttöliittymän rakentaminen 

    Nyt kun olemme siirtäneet sopimuksemme Ropsteniin, rakennetaan yksinkertainen käyttöliittymä vuorovaikutukseen sen kanssa!

    Huomaa: dApp-käyttöliittymät ovat vain jokapäiväisiä, säännöllisiä vanhoja käyttöliittymiäsi – sellaisenaan voimme käyttää kaikkia tuttuja vanhoja työkalujamme (luoda-reagoida-sovellus jne.) Kehittääksesi käyttöliittymäämme ja lisää sitten vain muutama asia, jotta käyttöliittymä voi lukea Ethereumista ja kirjoittaa siihen! Tämä tarkoittaa, että kaikki vanhat verkkokehittäjätaitosi ovat suoraan siirrettävissä Ethereum-land / Web3: een!!

    Nopeuta React-projektiamme 

    Selvä, aloitetaan.

    Varmista ensin, että sinulla on hakemisto, joka sisältää kaikki tiedot, jotka juuri teimme varastointisopimuksellemme. Olen nimittänyt kansioni “storage-back” -kohteeksi, ja se sisältää työn, jonka olemme juuri suorittaneet sopimuksen määrityksen ja käyttöönoton aloittamiseksi. 

    Näyttökuva 2020 09 01 klo 5 26 33

    Nyt aloitamme kehittelemällä reaktioprojektia, sanotaan tässä esimerkissä “varastointi-lab”

    Suoritetaan terminaalissamme seuraava aloittaaksemme projektimme 

    npx create-react-app storage-lab

    Nyt kun olemme saaneet uuden projektikattilamme, menemme projektihakemistoon

    cd-varastointi-lab

    Nyt kun olemme projektissamme, lisäämme nyt Web3-paketin, jonka avulla projektimme voi olla vuorovaikutuksessa Ethereumin kanssa! Lisää web3: sta tässä

    npm asenna web3

    Web3 on yksi kahdesta suurimmasta paketista, joita voimme käyttää, toinen on ethers.js. Tässä esimerkissä käytämme web3: ta, mutta jos haluat lukea lisää ethers.js: stä, katso tässä 

    Katso yksityiskohtainen selitys näistä kahdesta katsomalla tämä kirjoitus web3 vs. eetterit

    Loistava! Olemme nyt melkein valmiita saamaan reaktioprojektimme vuorovaikutukseen sopimuksemme kanssa!

    Ensinnäkin otetaan hakemistomme aiemmasta (minulle se on “varastointi-back”), joka sisältää vain työn, jonka olemme jo tehneet älykkäiden sopimusten kanssa, ja lisätään nyt uuteen reaktioprojektiimme. Tämä elää samalla tasolla kuin meidän src, ja nyt meillä pitäisi olla kaikki mitä tarvitsemme yhdessä sisällä REPO REPO.

    Näyttökuva 2020 09 01 klo 5 31 38

    Seuraavaksi meidän on määritettävä tiedosto, joka sisältää ABI-tiedot.

    “BISEKSUAALI?”

    Onneksi kysyit! 

    Contract Application Binary Interface (ABI) on tavallinen tapa olla vuorovaikutuksessa Ethereumin ekosysteemin sisäisten sopimusten kanssa, sekä lohkoketjun ulkopuolelta että sopimusten ja sopimusten välisessä vuorovaikutuksessa. Kun olemme koonneet SimpleStorage-sopimuksen aikaisemmassa vaiheessa, se loi meille JSON-tiedoston. Tarkista itse, meillä on SimpleStorage.json-tiedosto rakennuksen / sopimusten sisällä

    Näyttökuva 2020 09 01 klo 6 04 20

    Alkuperäinen tarkastelu tähän tiedostoon paljastaa paljon tietoa, nyt meidän on keskityttävä vain ABI: hen, jotta voimme synkronoida sopimuksemme kehitettävän käyttöliittymän kanssa. Tämä JSON sisältää tiedot, joita tarvitsemme kommunikoida sopimuksemme kanssa käyttöliittymämme kanssa.

    ABI on matriisi, joka pitää sisällään esineitä. Tarkasteltaessa tiedostoa lähemmäs näet, että kukin näistä esineistä on tosiasiallisesti kukin toiminto, jonka SimpleStorage-sopimuksemme sisältää.

    Näyttökuva 2020 09 01 klo 5 33 23

    Voit nopeasti nähdä

    “Name”: “set”

    “Nimi”: “hanki”

    molemmilla on “type:“ function ”-ominaisuudet, jotka molemmat ilmoitimme kirjoittaessamme älykästä sopimusta!

    Vaikka tryffeli hämmentää muutaman seuraavan vaiheen, käymme läpi paljon “manuaalisen” tavan tehdä asioita niin, että olet alttiina kaikille perusasioille &# 128578;

    Ensinnäkin, kopioi abi-tiedot – tarvitsemme niitä hetkessä. 

    Luodaan src: n sisällä kansio nimeltä “abi”.

    Tehkäämme juuri valmistetun abi-kansiomme sisälle tiedosto abi.js

    Huomaa: Meillä ei teknisesti tarvitse olla tätä erottelua ja voimme vain lisätä abi.js: n src: hen, mutta abi.js-tiedostojemme pitäminen auttaa organisaatiossa.

    Nyt kopioimme aikaisemmin tarttumamme abi-taulukon SimpleStorage.JSON-tiedostosta ja lisätään se äskettäin tehtyyn abi.js-tiedostoon. Muutamme tiedostoa hieman, jotta projektimme voi tuoda tiedot App.js: ään. Älä unohda, koska tämä on a.js-tiedosto, meidän on lisättävä vienti, jotta voimme vetää sen myöhemmin app.js: ään. Nimeetään ehto sama kuin sopimus, paitsi kamelikammion kanssa (katso koodi alla):

    Tämä on koodi, jonka tallennamme abi.js-tiedostoon

    export const simpleStorage = [{vakio: epätosi, syötteet: [{nimi: "x", tyyppi: "uint256", },], nimi: "aseta", lähdöt: [], maksettava: väärä, tilaMuutettavuus: "ei maksettava", tyyppi: "toiminto", }, {vakio: tosi, syötteet: [], nimi: "saada", lähdöt: [{nimi: "", tyyppi: "uint256", },], maksettava: false, stateMutability: "näkymä", tyyppi: "toiminto", },];

    Aika siirtyä App.js: ään ja tuoda sekä web3 että vasta valmistettu abi.js-tiedosto.

    Aiomme käyttää myös koukkuja tässä esimerkissä (minkä vuoksi tuomme myös {useState}, voit lukea lisää useState tässä.

    App.js-tiedostomme yläosan pitäisi nyt näyttää tältä:

    tuo React, {useState} kohteesta "reagoida"; tuo {simpleStorage} kohteesta "./ abi / abi"; tuo Web3 osoitteesta "verkko3"; tuonti "./App.css";

    Meidän on nyt varmistettava, että kaikilla mielivaltaisilla käyttäjillä on mahdollisuus yhdistää ja käyttää dAppia, kunhan heillä on lompakon tarjoaja!

    Ethereum-tilassa dApp-vuorovaikutuksessa käytettävä päälompakko on MetaMask, joka otettiin käyttöön vaiheessa 1.

    Jos sinulla ei ole MetaMaskia, käy osoitteessa metamask.io

    Kun MetaMask on asennettu, voimme käyttää lompakkoamme dappissamme seuraavilla tavoilla:

    const web3 = uusi Web3 (Web3.givenProvider);

    ”Web3.givenProvider” asetetaan Ethereumin tukemassa selaimessa.

    (voit lukea lisää miksi tämä on välttämätöntä tässä)

    Joten nyt koodimme pitäisi näyttää tältä:

    tuo React, {useState} kohteesta "reagoida"; tuo {simpleStorage} kohteesta "./ abi / abi"; tuo Web3 osoitteesta "verkko3"; tuonti "./App.css"; const web3 = uusi Web3 (Web3.givenProvider);

    Okei! Toistaiseksi olemme:

    • Kehitti React-projektin
    • Asennettu Web3
    • Lisättiin kansio, joka sisältää rakennus + sopimus + siirron React-projektiimme
    • Luonut abi.js-tiedoston, joka sisältää abi-tiedot, jotka otimme SimpleStorage.jsonista
    • Tuodut tiedot, joita tarvitsemme toimiakseen sopimuksessamme
    • Luonut muuttujan, jonka avulla dApp voi kommunikoida käyttäjän lompakon kanssa

    Jälleen, vaikka tryffeli tekee seuraavista vaiheista tarpeettomia (opastamme sinut myöhemmin paljon yksinkertaisemman version läpi), lisäämme dApp: iimme hieman enemmän manuaalista monimutkaisuutta koulutustarkoituksiin.

    Teemme nyt luomalla kaksi uutta muuttujaa: yhden tallentamaan Ropsteniin käyttöönotetun sopimuksen osoitteen ja toisen vastaamaan sopimusta ABI: hen, jotta sovelluksemme tietää kuinka puhua sen kanssa.! 

    Löydät sopimusosoitteen siirtymällä aiemmin käyttämäämme JSON-tiedostoon (joka sisältää ABI: n (SimpleStorage.json)) ja vierittämällä alareunaan. Osoite on täällä osoite-kentässä:

    "kääntäjä": { "nimi": "solc", "versio": "0,5,8 + sitoutuminen 23d335f2.Emscripten.clang" }, "verkoissa": { "3": { "Tapahtumat": {}, "linkkejä": {}, "osoite": "0x24164F46A62a73de326E55fe46D1239d136851d8", "actionHash": "0x1f02006b451b9e85f70acdff15a01c6520e4beddfd93a20e88a9b702a607a7b0" }}, "schemaVersion": "3.0.16", "updatedAt": "2020-06-30T20: 45: 38.686Z", "devdoc": { "menetelmiä": {}}, "userdoc": { "menetelmiä": {}}}

    Vaihtoehtoisesti voit siirtyä https://ropsten.etherscan.io/ ja etsi sen tilin osoite, jolla sopimus otettiin käyttöön! Etherscanissa napsauttamalla “Sopimuksen luominen” paljastetaan itse sopimusosoite.

    Näyttökuva 2020 09 01 klo 5 43 46 AM

    Nyt otamme kopion sopimuksesi osoitteesta ja luomme uuden muuttujan sen tallentamiseksi. 

    Ilman tätä meillä ei ole kykyä kommunikoida sopimuksen kanssa, eikä dApp-palvelumme toimi tarkoitetulla tavalla.

    Lisää tämä kohtaan const web3 = uusi Web3 (Web3.givenProvider);

    const sopimusosoite = "sopimusosoitteesi täällä";

    Sitten luomme uuden uuden muuttujan nimeltä “storageContract”, joka sisältää sekä sopimusosoitteemme (jotta sovelluksemme tietää missä sopimus on) että ABI: n (joten sovelluksemme tietää kuinka olla vuorovaikutuksessa sopimuksen kanssa)..

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

    App.js: n pitäisi nyt näyttää tältä

    tuo React, {useState} kohteesta "reagoida"; tuo {simpleStorage} kohteesta "./ abi / abi"; tuo Web3 osoitteesta "verkko3"; tuonti "./App.css"; const web3 = uusi Web3 (Web3.givenProvider); const sopimusosoite = "sopimusosoitteesi täällä"; const storageContract = uusi web3.eth.Contract (simpleStorage, contractAddress);

    Meidän on nyt saatava koukut pitämään muuttujia, jotka ovat vuorovaikutuksessa sopimuksemme ja käyttöliittymämme kanssa. Teemme tämän ilmoittamalla seuraavat sovellustoiminnossamme:

    tuo React, {useState} kohteesta "reagoida"; tuo {simpleStorage} kohteesta "./ abi / abi"; tuo Web3 osoitteesta "verkko3"; tuonti "./App.css"; const web3 = uusi Web3 (Web3.givenProvider); const sopimusosoite = "sopimusosoitteesi"; const storageContract = uusi web3.eth.Contract (simpleStorage, contractAddress); funktio App () {const [numero, setUint] = useState (0); const [getNumber, setGet] = useState ("0");

    Ensimmäinen käyttötapa useState (0) pitää käyttäjän ilmoittaman uint256: n.

    (numeron, setUint, getNumber, setGet nimeämiskäytännöt auttavat toivottavasti osoittamaan, mitä tapahtuu)

    useState (“0”) -arvo toimii paikkamerkkinä, kunnes meillä on vahvistus allekirjoitetusta toiminnostamme (ilmoitettu uint256)

    setUint kutsumme pian takaisin (lisää tästä myöhemmin)

    Aika logiikallemme

    Seuraavaksi lisätään numeroSet- ja NumberGet-logiikkamme (lisäämme numberSet-toiminnon sovelluksessamme)

    const numberSet = asynkronointi (t) => {t.preventDefault (); const tilit = odota ikkuna.ethereum.enable (); const-tili = tilit [0]; const gas = odota tallennustaContract.methods.set (number) .estimateGas (); const post = odota storageContract.methods.set (number) .send ({from: tili, kaasu,}); }; const numberGet = asynkronointi (t) => {t.preventDefault (); const post = odota storageContract.methods.get (). call (); setGet (viesti); };

    Asetimme preventDefault (yksityiskohdat preventDefaultista löytyi tässä)

    Käytämme sopimukseen myös asynkronointipyyntöä (yksityiskohdat asynkronista löytyi tässä)

    Koukku setGet () tallentaa oletusarvon, jota alun perin tarkastelemme (“0”)

    const tilit = odota ikkuna.ethereum.enable ();

    varmistaa, että soitamme yhdistettyyn osoitteeseemme MetaMaskin kautta.

    const-tili = tilit [0];

    Ottaa yhteyden tilin

    Saatat ihmetellä, mitä tapahtuu 

    const gas = odota tallennustaContract.methods.set (number) .estimateGas ();

    Sovelluksemme tarvitsee luvan käyttää käyttäjävaroja maksamaan kaasumaksut, kaikki eetteriä pyytävät toiminnot riippumatta siitä, onko se testnetissä tai mainnetissä. Täällä yhteys MetaMaskiin on kätevä allekirjoittamaan tämä käyttö uint256: n asettamiseksi ja sen maksamiseksi (testi ETH).

    Joten jokaiselle kaasua tarvitsevalle toiminnolle on laskettava potentiaalinen käytetty kaasu.

    Sopimuksen “Set” -toiminto vaatii kaasua

    “Get” ei.

    (tämä johtuu siitä, että “Hae” tarkastelee sitä, mikä on jo ilmoitettu asetuksella “Aseta”)

    const post aikoo ottaa hyväksytyn uint256: n, vahvista tapahtuma (postimaksun maksaminen) Ropsten-verkon MetaMask-lompakostasi.

    Seuraavaksi välitämme funktioparametrit Method.set (): n kautta ja sitten ilmoitetulla osoitteella (käyttäjän osoite) käsittelemme sitten Set-funktiota.

    Luomme älykkään sopimustapahtumamme siirtämällä toimintoparametrit älykkääseen sopimusmenetelmään. Set () ja arvioidun kaasun ja käyttäjätilin osoitteen osoitteeseen.send ().

    const post = odota storageContract.methods.set (number) .send ({from: tili, kaasu,});

    Tämän pitäisi olla kaikki logiikat, jotka meidän on katettava numeroSet.

    Tarvitsemme nyt numeromme Get

    const numberGet = asynkronointi (t) => {t.preventDefault (); const post = odota storageContract.methods.get (). call (); setGet (viesti); };

    Const-postimme noutaa asetetun numeromme ja setGet-passit uudessa ilmoittamassamme arvossa

    Joten meidän “0” tulee onClick viittaa meidän numberGet ja tekee meidän unint256!

     Joten nyt app.js: n pitäisi näyttää tältä

    tuo React, {useState} kohteesta "reagoida"; tuo {simpleStorage} kohteesta "./ abi / abi"; tuo Web3 osoitteesta "verkko3"; tuonti "./App.css"; const web3 = uusi Web3 (Web3.givenProvider); const sopimusosoite = "sopimusosoitteesi"; const storageContract = uusi web3.eth.Contract (simpleStorage, contractAddress); funktio App () {const [numero, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = asynkronointi (t) => {t.preventDefault (); const tilit = odota ikkuna.ethereum.enable (); const-tili = tilit [0]; const gas = odota tallennustaContract.methods.set (number) .estimateGas (); const post = odota storageContract.methods.set (number) .send ({from: tili, kaasu,}); }; const numberGet = asynkronointi (t) => {t.preventDefault (); const post = odota storageContract.methods.get (). call (); setGet (viesti); };

    Luodaan hyvin yksinkertainen paluu renderöintiin, jotta voimme testata, jos voimme 

    • aseta unint256-arvo,
    • Vedä metamask-lompakkomme ylös ja vahvista tapahtuma
    • Maksa kaasukustannukset
    • hanki sitten tallennettu arvo (unint256), kun tapahtuma on suoritettu.

    Paluumme näyttää tältä: 

    return (Aseta uint256: setUint (t.target.value)} /> Vahvistaa

    Hanki uint256 {getNumber}); } vie oletussovellus;

    Jotkut nopeat CSS

    Siirrytään nyt App.css-tiedostoon, poistetaan kattilan levykoodi ja lisätään tämä sen sijaan

    .main {text-align: center; näyttö: joustava; perustella sisältö: keskus; taustaväri: # f2f1f5; korkeus: 100vh; } .kortti {min-korkeus: 50vh; leveys: 50vw; näyttö: joustava; taipumissuunta: sarake; kohdista tuotteet: keskellä; perustella sisältö: keskus; } .form {korkeus: 20vh; leveys: 20vw; näyttö: joustava; perustella sisältö: tilaa tasaisesti; taipumissuunta: sarake; } .painike {leveys: 20vw; korkeus: 5vh; }

    Nyt olemme valmiita testaamaan!

    Päätelaitteellasi

    langan alku

    Paikallisessa palvelimessamme: 3000 meidän pitäisi näyttää tältä

     

    Näyttökuva 2020 09 01 klo 6 12 49

    Meidän pitäisi nyt pystyä syöttämään unint256-arvo syöttökenttään!

    Kun olemme vahvistaneet numeromme dApp-sovelluksessamme, allekirjoitamme sen MetaMaskin kautta (Varmista, että lompakkosi on asetettu Ropsten-verkkoon)

    confrim1

    Me teimme sen! &# 129303;

    Meillä on nyt älykäs sopimuksemme liitetty käyttöliittymään ja pystymme manipuloimaan Set-toimintoa (edellyttäen, että meillä on testi ETH maksamaan tapahtumasta kaasumaksu). Sitten voimme käyttää Get-toimintoa ja hakea tallennetun uint265-arvon.

    Melko siistiä huh!?!

    Extra tyyli 

    Nyt on aika näyttää, kuinka helppoa voi olla vielä suositun Web2-tekniikan käyttöönotto projektissamme.

    Aiomme käyttää MUI: ta perustyylin lisäämiseen, jos kehität Reactin kanssa jo, saatat tuntea materiaalin-ui. (Yksityiskohdat löytyi tässä) Lyhyesti sanottuna Material-UI tai MUI on erittäin suosittu React-kehys, jonka avulla voit nopeasti kehittää projektin, jossa on paljon muotoilua, edellyttäen, että noudatat nimeämiskäytäntöjä. Se on myös erittäin helppo käsitellä, jos haluat vain käyttää säätiötä ja muokata sieltä.

    * Tämä on erittäin lyhyt esimerkki siitä, kuinka lisätä MUI projektiin pienillä lisäyksillä osoittaaksesi kuinka nopeasti voit sisällyttää projektimme sellaisenaan Web2-tekniikan kanssa. 

    MUI lisätään

    Aloitamme suorittamalla komennon (ollessamme edelleen projektin hakemistossa terminaalissa (jos sovelluksesi on edelleen käynnissä, sinun on suljettava se (ctrl + c) tai avattava uusi välilehti)):

    Asennus npm: llä:

    npm install @ material-ui / core

    Tai langalla:

    lanka lisää @ material-ui / core

    Nyt kun olemme pistäneet MUI: n, aloitamme tyylin muuttamisesta. App.js-tiedostomme yläosasta aiomme tuoda muutamia uusia asioita:

    tuo {simpleStorage} kohteesta "./ abi / abi"; Tuo painike "@ material-ui / core / Button"; tuo TextField kohteesta "@ material-ui / core / TextField"; tuo {makeStyles} mistä "@ material-ui / core / styles";

    {MakeStyles} -tuotteen avulla voimme manipuloida painikkeita (tässä tapauksessa) painikkeita ja tekstikenttää sekä tuoda MUI-oletustyyliä. 

    Teemme nyt muuttujan (toiminnomme yläpuolella), joka tuo kattilan tyyliin MUI: sta

    const useStyles = makeStyles ((teema) => ({juuri: { "& > *": {marginaali: teema.väli (1),},},}));

    Lisäämme nyt sovellustoimintoon myös muuttujan nimeltä “luokat”, joka vetää määriteltyjä tyylejä, jotka juuri ilmoitimme yllä.

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

    Teemme nyt palautuksessamme muutoksia, jotta voimme korvata jotkut kenttämme juuri maahantuomillamme.

    return (setUint (t.target.value)} muunnos ="hahmoteltu" /> Vahvistaa

    Hanki uint256 {getNumber}); } vie oletussovellus;

    Koodisi pitäisi nyt näyttää tältä

    tuo React, {useState} kohteesta "reagoida"; tuo {simpleStorage} kohteesta "./ abi / abi"; tuo Web3 osoitteesta "verkko3"; tuonti "./App.css"; tuo {makeStyles} mistä "@ material-ui / core / styles"; Tuo painike "@ material-ui / core / Button"; tuo TextField kohteesta "@ material-ui / core / TextField"; const useStyles = makeStyles ((teema) => ({juuri: { "& > *": {marginaali: teema.väli (1),},},})); const web3 = uusi Web3 (Web3.givenProvider); const sopimusosoite = "sopimusosoitteesi täällä"; const storageContract = uusi web3.eth.Contract (simpleStorage, contractAddress); function App () {const class = useStyles (); const [numero, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = asynkronointi (t) => {t.preventDefault (); const tilit = odota ikkuna.ethereum.enable (); const-tili = tilit [0]; const gas = odota varastointiaContract.methods.set (number) .estimateGas (); const post = odota storageContract.methods.set (number) .send ({from: tili, kaasu,}); }; const numberGet = asynkronointi (t) => {t.preventDefault (); const post = odota storageContract.methods.get (). call (); setGet (viesti); }; return (setUint (t.target.value)} muunnos ="hahmoteltu" /> Vahvistaa

    Hanki uint256 {getNumber}); } vie oletussovellus;

    Jos nyt katsomme reaktioprojektiamme, sen pitäisi näyttää tältä!

    Näyttökuva 2020 09 01 klo 6 48 55

    Hyvin tehty!

    Meillä on edelleen kaikki edellisen toiminnot, ja nyt olemme injektoineet helppokäyttöisen kehyksen projektiimme räätälöimiseksi haluamallamme tavalla. Katsokaa MUI: ta dokumentointi kokeilla omia lisäyksiä / muokkauksia!

    Bonuskierros 

    Olisi mukavaa näyttää käyttäjille yhteysosoite dAppissamme, eikö niin?

    Tehdään hyvin nopea ja peruskomponentti täsmälleen niin!

    Aloitamme tekemällä erillisen komponentin, jonka voimme tuoda takaisin App.js-tiedostoon. On hyvä erottaa logiikkamme pitämään App.js-tiedostomme helposti navigoitavissa ja noudattamaan myös komponentin käytäntöä, joka tekee mieluiten vain yhden asian. Jos se päätyy kasvamaan, se tulisi hajottaa pienemmiksi alikomponenteiksi.

    Komponentin rakentaminen 

    Teemme uuden kansion, jota kutsutaan komponenteiksi samalla tasolla kuin src: n, ja siinä kansiossa teemme Nav.js-tiedoston. Projektitelineidemme pitäisi nyt näyttää tältä

    Näyttökuva 2020 09 01 klo 6 47 07

    Teemme myös komponenttikansioon Nav.css-tiedoston, jotta voimme tuoda kaikki Nav-komponenttiin soveltamamme tyylit.

    Avataan Nav.js-tiedostomme ylös ja tuodaan React-, Web3- ja empty.css-tiedostomme

    tuo React from "reagoida"; tuo Web3 osoitteesta "verkko3"; tuonti "./Nav.css"

    Nyt teemme luokan nimeltä Nav ja lisätään siihen vain muutama asia yhdistetyn osoitteen näyttämiseksi. Aloitamme asettamalla valtiomme lukemaan tiliä

    class Nav laajentaa React.Component {state = {account: "" };

    Vielä luokassamme, lataamme tilin lukemaan lisäämällä asynkronisen loadAccount-logiikkamme

    async loadAccount () {const web3 = uusi Web3 (Web3.givenProvider || "http: // localhost: 8080"); const verkko = odota web3.eth.net.getNetworkType (); const tilit = odota web3.eth.getAccounts (); this.setState ({tili: tilit [0]}); }

    Seuraavaksi luomme komponentinDidMount (joka käynnistetään heti komponentin kiinnityksen jälkeen). Meidän tapauksessamme haemme ladattua tiliä. Lue lisää tässä

    componentDidMount () {this.loadAccount (); }

    Sivuhuomautus:

    Tämä voidaan tehdä eri tavalla, luokan sijaan voimme luoda funktion ja käyttää koukkuja, jotka ovat komponentinDidMount vastakohtia, mutta tämän esimerkin vuoksi pidämme kiinni tästä menetelmästä.

    Sitten luomme renderöinnin palautuksemme yläpuolelle, renderöinti on menetelmä, jota tarvitaan, kun kirjoitat React-komponenttia luokan menetelmällä. Palautuksessamme lisäämme div-luokkaamme osoiteluokan (perusmuodon antamiseksi myöhemmin) pitkin p-tunnistetta osoittamaan yhdistetty osoite, jonka haemme {this.state.account} -palvelun avulla.

    render () {return (yhdistetty osoitteesi: {this.state.account}); }} vie oletusnav;

    Nav.js-tiedostomme pitäisi nyt näyttää tältä

    tuo React from "reagoida"; tuo Web3 osoitteesta "verkko3"; tuonti "./Nav.css" class Nav laajentaa React.Component {state = {account: "" }; async loadAccount () {const web3 = uusi Web3 (Web3.givenProvider || "http: // localhost: 8080"); const verkko = odota web3.eth.net.getNetworkType (); const tilit = odota web3.eth.getAccounts (); this.setState ({tili: tilit [0]}); } componentDidMount () {this.loadAccount (); } render () {return (yhdistetty osoitteesi: {this.state.account}); }} vie oletusnav;

     

    Siirry Nav.css-tiedostoon ja lisää hyvin yksinkertainen muotoilu

    .osoite {näyttö: joustava; perustella sisältö: keskus; }

    Voisit teknisesti lisätä tämän App.css-tiedostoon, pidä mielessä, vaikka melko nopeasti, mikä voi sotkea. Komponenttien tulee olla uudelleenkäytettäviä ja välttää mahdollisimman paljon kitkaa jakamalla työsi osiin, se voi säästää päänsärkyä tiellä.

    Palataan nyt App.js: ään ja tuomme äskettäin valmistettu komponenttimme ja varmista, että lisäämme sen paluuseemme näyttääksesi sen!

    Valmiiden App.js-tiedostomme pitäisi näyttää tältä

    tuo React, {useState} kohteesta "reagoida"; tuo {simpleStorage} kohteesta "./ abi / abi"; tuo Web3 osoitteesta "verkko3"; tuo Nav "./components/Nav.js"; tuonti "./App.css"; tuo {makeStyles} mistä "@ material-ui / core / styles"; Tuo painike "@ material-ui / core / Button"; Tuo TextField kohteesta "@ material-ui / core / TextField"; const useStyles = makeStyles ((teema) => ({juuri: { "& > *": {marginaali: teema.väli (1),},},})); const web3 = uusi Web3 (Web3.givenProvider); const sopimusosoite = "osoitteesi täällä"; const storageContract = uusi web3.eth.Contract (simpleStorage, contractAddress); function App () {const class = useStyles (); const [numero, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = asynkronointi (t) => {t.preventDefault (); const tilit = odota ikkuna.ethereum.enable (); const-tili = tilit [0]; const gas = odota varastointiaContract.methods.set (number) .estimateGas (); const post = odota storageContract.methods.set (number) .send ({from: tili, kaasu,}); }; const numberGet = asynkronointi (t) => {t.preventDefault (); const post = odota storageContract.methods.get (). call (); setGet (viesti); }; paluu ( setUint (t.target.value)} muunnos ="hahmoteltu" /> Vahvistaa

    Hanki uint256 {getNumber}); } vie oletussovellus;

    Meidän pitäisi nyt nähdä yhdistetty osoitteemme ylhäällä ja silti säilyttää kaikki toimintamme!

    bonus V1

    &# 127881; Me teimme sen! &# 127881;

    Meillä on nyt dApp, jonka olemme rakentaneet alusta asti. Otimme älykkään sopimuksemme React-projektiin, kirjoitimme logiikan varmistaaksemme, että meillä on käyttäjätoiminnot, loimme komponentin yhdistetyn osoitteen renderoimiseksi ja lisäsimme jopa suositun muotoilukehyksen projektiimme.

    Hyvin tehty! Tämä on vasta alkua Web3-kehityseikkailuihisi, ja sinulla on jo jotain osoitettavaa siitä, että olet paitsi luonut myös käärinyt pään. Ota yhteyttä meihin ristiriidassa ja jaa projektisi (varsinkin jos olet tehnyt muutoksia tai lisäyksiä) kanssamme!

      Kehittäjien käyttöönotto: Vaihe 1Kehittäjien käyttöönotto Vaihe 1

      Kehittäjien käyttöönotto: Vaihe 1

      Kehittäjien käyttöönotto: Vaihe 2Kehittäjien käyttöönotto Vaihe 2

      Kehittäjien käyttöönotto: Vaihe 2

      10 minuutin Ethereumin suunta10 minuutin Ethereumin suunta

      10 minuutin Ethereumin suunta

    Mike Owergreen Administrator
    Sorry! The Author has not filled his profile.
    follow me