Contents
Tredje trinn
Så du har grunnleggende. I forrige avsnitt utviklet du en smart kontrakt, og distribuerte den ved hjelp av Truffle. I forrige del ble imidlertid dine smarte kontrakter distribuert til et lokalt utviklingsnettverk – og det er ikke gøy, siden bare du kan distribuere ting og samhandle med det lokale testnettverket! Vi vil ha venner! Og tilgang til andre smarte kontrakter som andre mennesker har distribuert!
Derfor, i denne delen, vil vi gå over til å bruke et offentlig Ethereum-testnett, slik at du kan delta i all handlingen som skjer rundt Ethereum-økosystemet.!
La oss komme i gang!
Først skal vi snakke om hvordan du får tilgang til disse offentlige Ethereum-nettverkene.
For å få tilgang til disse nettverkene, må du koble til en node som er koblet til det respektive nettverket. Du kan se hvert Ethereum-nettverk som sin egen lille Ethereum-verden, og du kan se en Ethereum-node som inngangsport eller tilgangspunkt til hver av disse verdenene! Fordi Ethereum er et distribuert nettverk, lagrer hver Ethereum-node hele tilstanden til nettverket den er koblet til (det er noder som ikke trenger å lagre full tilstand, men ikke bekymre deg for det for nå), og kommuniserer kontinuerlig med de andre nodene i nettverket for å holde denne staten oppdatert! Derfor, for å kunne lese fra og skrive til denne tilstanden, må vi få tilgang til en av disse nodene.
Du kan veldig godt være vert for din egen node ved hjelp av en av de mange tilgjengelige Ethereum-klientene (Hyperledger Besu (Java-klient utviklet av ConsenSys), Geth (Go-klient), Parity (Rust-klient) osv.) – Det er imidlertid ganske litt DevOps-overhead som følger med hosting og vedlikehold av din egen Ethereum-node – spesielt hvis du vil gjøre det pålitelig! Som sådan har vi i ConsenSys bygget Infura – et Ethereum infrastrukturtilbud i verdensklasse. Infura tar seg av hele ‘node management’ -stykket for deg, og gir deg øyeblikkelig, pålitelig og skalerbar tilgang til klynger av Ethereum-noder! Du kan tenke på Infura som “Ethereum-nodes-as-a-Service” &# 128578;
Komme i gang med Infura
For å komme i gang med Infura, vil du registrere en konto på infura.io. Ikke bekymre deg – det er helt gratis å komme i gang, og du trenger ikke å oppgi sensitiv informasjon!
Når du er registrert, blir du sendt til en side som ser slik ut:
Som denne siden antyder, for å komme i gang, velger du det første alternativet “Kom i gang og lag ditt første prosjekt for å få tilgang til Ethereum-nettverket!”
Du kan gi navnet ditt prosjekt hva du vil – vi vil kalle vårt “testprosjekt”.
Nå får du legitimasjonen du trenger for å få tilgang til Infura-nodene!
Hold denne siden åpen! Vi kommer tilbake til det senere &# 128578;
Det neste vi skal gjøre er å initialisere et nytt Truffle-prosjekt. Hvis du trenger hjelp til å installere Truffle, kan du se den forrige delen av denne dokumentasjonen.
For å initialisere et nytt Truffle-prosjekt, opprett en ny mappe og kjør
trøffel init
Deretter vil du legge til Truffle HD Wallet-leverandøren i det nylig initialiserte prosjektet, slik at du kan signere transaksjonene dine før de sendes til Infura-nodene. Hver statlige endring du gjør i Ethereum kommer i form av en transaksjon – enten det er å distribuere en kontrakt, ringe en funksjon i en kontrakt eller sende et token! Hver transaksjon må signeres av en konto – derfor trenger applikasjonen vår muligheten til å signere transaksjoner slik at den kan gjøre statlige endringer i Ethereum!
Hver transaksjon koster også eter. Denne transaksjonskostnaden blir referert til som “gasskostnad”. Derfor, for å få de signerte transaksjonene våre behandlet av nettverket når de er sendt til Infura-nodene, må vi finansiere kontoen vår med litt eter. Vi vil dekke dette litt senere, men dette er bare en viktig grunn til at du trenger lommebok & lommebokleverandør!
Slik legger du til Truffle HD Wallet-leverandøren til den nylig initialiserte prosjekttypen i terminalen din:
npm install –save @ truffle / hdwallet-provider
Dette kan gi noen advarsler, men så lenge det installeres, er du klar!
Nå kan vi opprette en Ethereum-konto som applikasjonen vår kan bruke! Siden lommebokleverandøren vår er en HD (hierarkisk deterministisk) lommebok, kan vi deterministisk generere kontoer med samme fraseuttrykk, eller mnemonic.
For å opprette kontoen vår, må vi først starte Ganache. Ganache er et trøffelprodukt som lar oss enkelt lage vårt eget lokale dev-nettverk. For å kjøre ganache, skriv bare
ganache-cli
Hvis du fullførte trinn 2 i denne veiledningen, bør du ha Ganache / ganache-cli allerede installert. Hvis du ikke gjør det, kan du installere det ved å bruke kommandoen npm:
npm installer -g ganache-cli
Eller hvis du bruker garn
garn global legg til ganache-cli
Deretter må vi la appen vår snakke med Ganache. Gå til prosjektkatalogen din og sjekk truffle-config.js-filen, bare fjern kommentarer (eller legg til) følgende linjer under nettverk:
utvikling: {vert: "127.0.0.1", // Localhost (standard: ingen) port: 8545, // Standard Ethereum-port (standard: ingen) network_id: "*" // Ethvert nettverk (standard: ingen)},
Hyggelig! Nå kan appen vår snakke med Ganache-utviklingsnettverket vårt som kjører på 127.0.0.1:8545! Nå, i et nytt terminalvindu (men fortsatt i prosjektmappen), kjør kommandoen
trøffelkonsoll
for å koble til Ganache-nettverket. Ikke bekymre deg – vi kobler til et offentlig nettverk senere! Vi trenger bare å koble til Ganache akkurat nå for å lage nøklene våre &# 128578;
Merk: Hvis du får problemer, må du sørge for at RPC Server-portnummeret ditt samsvarer med trøffelkonfigurasjonsfilen din i Ganache. I standardtilfelle skal 8545 fungere, ellers endre konfigurasjonsfilen slik at den samsvarer med Ganache.
Skriv inn følgende kommandoer i Truffle-konsollen for å opprette lommeboken:
const HDWalletProvider = krever (‘@ truffle / hdwallet-provider’);
Dette bør resultere i et svar fra “udefinert”
For din 12-ords mnemonic kan du bruke en mnemonic generator som denne hvis du vil!
SIKKER PÅ AT DU SPARER MNEMONISK (FRØ) UTSETNING! Vi trenger det senere &# 128515;
Deretter legger du til følgende kommando i terminalen din (mens du fortsatt er i trøffelutvikling):
const mnemonic = ’12 ord her ‘; const lommebok = ny HDWalletProvider (mnemonic, "http: // localhost: 8545");
Skriv inn kommandoen i trøflekonsollen din
lommebok
Hvis du blar oppover, bør du se en liste over kontoer, som dette!
Til tross for at kontoen ble generert mens vi var koblet til Ganache, kan vi bruke den samme Ethereum-kontoen (e) over ethvert Ethereum-nettverk (vær imidlertid oppmerksom på – selv om den samme kontoen kan brukes på ethvert Ethereum-nettverk, eiendeler / aktiviteter knyttet til det kontoen er nettverksspesifikk – for eksempel hvis jeg foretar en transaksjon på Ethereum Mainnet, vil den transaksjonen bare skje på Ethereum Mainnet, og ingen andre nettverk). Vi skal nå slutte å samhandle med Ganache (lokalt dev-nettverk), og begynne å bruke den kontoen til å samhandle med noen offentlige nettverk!!
Vanligvis er det første du må gjøre når du samhandler med et offentlig nettverk, å skaffe deg noe av nettets eter. I vårt tilfelle kobler vi til Ropsten offentlige testnettverk, så vi må skaffe oss litt Ropsteneter (ETH)! Ikke bekymre deg – testnett ETH er gratis og rikelig, og superenkelt å få tak i &# 128077;
På tide å tilegne seg test ETH
For å få litt Ropsten ETH, gå over til Ropsten kran. Lim inn kontoadressen din og bratsj! Du har mottatt litt Ropsten ETH og kan begynne å sende transaksjoner (dvs. gjøre tilstandsendringer til) Ropsten-nettverket!
Som referanse er Ropsten testnett et offentlig Ethereum-testnettverk, der du kan teste koden din i et miljø som gjenspeiler nøyaktig det fra Ethereum-nettet. Hovedforskjellen mellom Ropsten-testnettet (og de andre offentlige Ethereum-testnettene) er at i testnett-land er ETH rikelig og har ingen virkelig verdi! Når du begynner å samhandle med Ethereum-nettet, vil Ether du bruker til å betale for transaksjonene dine (bensinkostnader) koste AKTUELLE dollar – og derfor må vi sørge for at vi gjør ting rett på forhånd, slik at vi ikke mister det harde -opptjente kontanter / vår dyrebare mainnet ETH!
Ropsten testnett, sammen med de fleste andre offentlige testnettverk, har mange blokkutforskere for deg å se aktiviteten som skjer i kjeden (https://ropsten.etherscan.io/). For å se den finansierte kontoen din, limer du bare inn kontoens adresse i utforskeren – så kan du se all historikken som er knyttet til den:
Ok! Nå som vi har fått lommebokleverandøren vår og en konto finansiert med Ropsten ETH, kan vi gå tilbake til prosjektet vårt og peke på Infura-noder som er koblet til Ropsten-testnettet.
Det første vi ønsker å gjøre er å lage en.env-fil for å huse våre dyrebare HEMMELIGHETER! Disse hemmelighetene inkluderer Infura API-nøkkelen (generert da vi opprettet Infura-kontoen), og vår mnemoniske setning.
På rotnivået i prosjektet, er det bare å opprette en ny fil “.env”. Du må også installere NPM-pakken dotenv ved å skrive inn følgende kommando i terminalen
npm install – lagre dotenv
I denne new.env-filen trenger du to ting:
INFURA_API_KEY = INSETT API-NØKKELEN DIN HER (ingen tilbud)
MNEMONIC = ”linsehvalvifte wire boble online sete avsløre lager nummer setning vinner”
INFURA_API_KEY er prosjekt-ID fra prosjektet du tidligere opprettet i infura:
Og MNEMONIC er den 12-ords frase setningen du tidligere brukte til å generere kontoen din.
Filen din skal nå se slik ut:
Greit, vi nærmer oss!
MERKNAD: Hvis du skal skyve dette til et Github-arkiv, eller gjøre dette prosjektet offentlig på noen måte, SKAL du være sikker på at du har din.env-fil i.gitignore slik at hemmelighetene dine ikke blir eksponert!
Nå må vi gå over til truffle-config.js-filen. Her må vi legge til noen få ting for å betegne leverandøren vår (som brukes til å samhandle med Infura (Truffle HDWallet Provider vi tidligere installerte), og peke appen vår på Ropsten Infura-noder.
Øverst på filen legger du til:
krever ("dotenv") .config (); const HDWalletProvider = krever ("@ trøffel / hdwallet-leverandør");
Deretter vil du legge til følgende nettverk under “nettverk”:
ropsten: {leverandør: () => ny HDWalletProvider (process.env.MNEMONIC, `https://ropsten.infura.io/v3/$ {process.env.INFURA_API_KEY}`), network_id: 3, // Ropstens id-gass: 5500000, // Ropsten har en nedre blokkgrense enn mainnet-bekreftelser: 2, // # confs for å vente mellom distribusjonene. (standard: 0) timeoutBlocks: 200, // # blokker før distribusjon time out (minimum / default: 50) skipDryRun: true // Hopp over tørrkjøring før migrasjoner? (standard: falsk for offentlige nett)}
Nå skal truffle-config.js-filen se slik ut!
Sideanmerkning:
Hvis du bruker Infura-sluttpunkter, er parameteren `fra` nødvendig, siden de ikke har lommebok. Hvis du bruker Ganache eller Geth RPC-sluttpunkter, er dette en valgfri parameter.
NÅ ER VI KLAR FOR MAGICEN! Det er på tide å distribuere en smart kontrakt til ROPSTEN!
Sette opp en smart kontrakt
Oppsett av fasthet
Først vil vi lage en smart kontrakt å distribuere! Du kan hente den smarte kontrakten du utviklet i forrige del av denne veiledningen, bygge din egen smarte kontrakt, eller bare bruke følgende (ekstremt enkle) prøvekontrakt:
pragma soliditet >= 0,5,8; kontrakt SimpleStorage {uint256 storedData; funksjonssett (uint256 x) offentlig {storeData = x; } funksjon få () offentlig visning returnerer (uint256) {retur StorageData; }}
Denne kontrakten skal opprettes som en “.sol” (Solidity) -fil i “kontrakter” -mappen til prosjektet ditt (i dette scenariet har vi opprettet SimpleStorage.sol-filen, som er vår SimpleStorage-kontrakt:
Oppsett av migrasjon
Deretter må vi konfigurere migreringsfilen!
Migrasjoner er JavaScript-filer som hjelper deg med å distribuere kontrakter til Ethereum-nettverket. Disse filene er ansvarlige for å iscenesette distribusjonsoppgavene dine, og de er skrevet under forutsetningen om at distribusjonsbehovet ditt vil endres over tid. Når prosjektet ditt utvikler seg, oppretter du nye migrasjonsskript for å fremme denne utviklingen i blockchain. En historie med tidligere kjørte migrasjoner blir registrert via en spesiell migrasjonskontrakt. Du kan finne mer informasjon om dem her.
Overføringsfilen vår for å distribuere kontrakten vår vil se slik ut:
const SimpleStorage = artifacts.require ("SimpleStorage.sol"); module.exports = function (deployer) {deployer.deploy (SimpleStorage); };
Lagre denne filen i “migrations” -mappen under navnet “2_deploy_contracts.js”.
Distribuere din første offentlige kontrakt
Tid for å migrere
Nå er du faktisk klar for MAGIC TO HAPPEN! Gå tilbake til konsollen, og skriv
trøffel migrere – nettverk ropsten
Boom!&# 128163; Koden din ble distribuert til det offentlige Ropsten Ethereum Test Net!!!
Det som nettopp skjedde var:
-
Din Solidity-smarte kontrakt (i mappen “kontrakter”) ble samlet ned til bytecode – den maskinlesbare koden som Ethereum Virtual Machine kan bruke.
-
Denne bytekoden, + noen andre data, ble samlet sammen til en transaksjon.
-
Transaksjonen ble signert av kontoen din.
-
Transaksjonen ble sendt til Infura-noden som er koblet til Ropsten.
-
Transaksjonen ble spredt over hele nettverket, plukket opp av en Ropsten-gruvearbeider, og inkludert i en Ropsten-blokk.
-
Din smarte kontrakt er nå LIVE på Ropsten blockchain!
Du kan se kontrakten din ved hjelp av Etherscan: https://ropsten.etherscan.io/ – lim bare inn kontraktens adresse (skal være i terminalen din) for å se den!
Fantastisk! Vi har nettopp distribuert vår aller første smarte kontrakt til et OFFENTLIG Ethereum-nettverk! &# 129327;
Prosessen er nøyaktig den samme for distribusjon til Ethereum mainnet, bortsett fra at du bytter ut nettverket i truffle-config.js-filen for Ethereum mainnet (og selvfølgelig kjører mainnet Truffle-migreringskommandoen i stedet for Ropsten-en) ! Vi vil ikke lede deg gjennom denne prosessen her, fordi distribusjon til Ethereum-nettet vil koste deg faktiske dollar – men hvis du vil ha hjelp med dette, kan du gå videre til ConsenSys Discord og vi hjelper deg mer enn gjerne!
Bygg en Web3-frontend
Nå som vi har distribuert kontrakten vår til Ropsten, la oss bygge et enkelt brukergrensesnitt for å samhandle med det!
Merk: dApp “frontend” er bare de vanlige, vanlige frontendene dine – som sådan kan vi bruke alle de gamle verktøyene vi er kjent med (create-react-app osv.) For å spinne opp frontend , og så er det bare å legge til noen få ting slik at frontendene kan lese fra og skrive til Ethereum! Dette betyr at alle dine gamle web dev-ferdigheter kan overføres direkte til Ethereum-land / Web3!!
Spinn opp React-prosjektet vårt
Ok, la oss komme i gang.
Forsikre deg først om at du har en katalog som inneholder all informasjonen vi nettopp laget for lagringskontrakten. Jeg har kalt mappen min “storage-back”, og den inneholder arbeidet vi nettopp fullførte for å få installert kontrakten og distribuert.
Nå skal vi begynne med å spinne opp et reageringsprosjekt, la oss kalle vårt i dette eksemplet “lagringslaboratorium”
La oss kjøre følgende i terminalen vår for å starte prosjektet vårt
npx create-react-app storage-lab
Nå som vi har fått vår nye prosjektkokeplate, la oss gå inn i prosjektkatalogen
cd lagringslaboratorium
Nå som vi er inne i prosjektet vårt, vil vi nå legge til Web3-pakken, som gjør at prosjektet vårt kan samhandle med Ethereum! Mer på web3 her
npm installer web3
Web3 er en av to hovedpakker vi kan bruke, den andre er ethers.js. For dette eksemplet bruker vi web3, men hvis du vil lese mer om ethers.js, ta en titt her
For en detaljert forklaring av de to, ta en titt på denne oppskriften web3 vs etere
Flott! Vi er nå nesten klare til å få vårt reaksjonsprosjekt til å interagere med kontrakten!
La oss først ta katalogen vår fra tidligere (for meg er det “lagring-tilbake”) som bare inneholder arbeidet vi allerede har gjort med våre smarte kontrakter, og la oss nå legge det til vårt nye reageringsprosjekt. Dette vil leve på samme nivå som vår src, og nå skal vi ha alt vi trenger sammen inne i vår reaksjon REPO.
Deretter må vi sette opp filen vår som inneholder ABI-informasjonen vår.
“ABI?”
Glad at du spurte!
Contract Application Binary Interface (ABI) er standard måte å samhandle med kontrakter innen Ethereum-økosystemet, både utenfor blockchain og for kontrakt-til-kontrakt-interaksjon. Da vi samlet vår SimpleStorage-kontrakt i et tidligere trinn, opprettet den en JSON-fil for oss. Sjekk selv, vi har en SimpleStorage.json-fil inne i våre build / kontrakter
En første titt på denne filen vil avsløre mye informasjon, akkurat nå trenger vi bare å fokusere på ABI for å synkronisere kontrakten vår med frontend vi utvikler. Denne JSON inneholder informasjonen vi trenger for å kommunisere kontrakten med frontend.
Vår ABI er en matrise som inneholder gjenstander. Når du ser på filen nærmere, kan du se at hvert av disse objektene faktisk er hver funksjon som SimpleStorage-kontrakten inneholder.
Du kan raskt se
“Name”: “set”
“Name”: “get”
begge med en “type:“ funksjon ”begge funksjonene vi erklærte da vi skrev vår smarte kontrakt!
Selv om trøffel forvirrer de neste trinnene, skal vi gå gjennom en mye mer “manuell” måte å gjøre ting på, slik at du blir utsatt for alt det grunnleggende &# 128578;
Først må du kopiere abi-informasjonen din – vi trenger den om et øyeblikk.
La oss lage en mappe inne i vår src som heter “abi”.
Inne i den nylagde abi-mappen, la oss nå lage en fil som heter abi.js
Merk: Vi trenger ikke teknisk å ha denne separasjonen, og vi kan bare legge til abi.js i src, men å beholde abi.js-filene inneholder hjelper med organisering.
Nå skal vi kopiere abi-oppsettet vi hentet tidligere fra SimpleStorage.JSON-filen og legge det til i den nyopprettede abi.js-filen. Vi vil endre filen litt for å la prosjektet vårt importere informasjonen til App.js. Ikke glem siden dette er en.js-fil, må vi legge til en eksport slik at vi har muligheten til å trekke den inn i appen.js senere. La oss gi navnet const det samme som kontrakten, unntatt med camelcase (se koden nedenfor):
Dette vil være koden vi lagrer i abi.js-filen
eksport const simpleStorage = [{konstant: usann, innganger: [{navn: "x", type: "uint256", }, ], Navn: "sett", utganger: [], betales: false, stateMutability: "ikke-betalbar", type: "funksjon", }, {konstant: sant, innganger: [], navn: "få", utganger: [{navn: "", type: "uint256", },], betales: false, stateMutability: "utsikt", type: "funksjon", },];
På tide å gå til App.js og importere både web3 og vår nylagede abi.js-fil.
Vi kommer også til å bruke kroker i dette eksemplet (det er grunnen til at vi også importerer {useState}. Du kan lese mer om useState her.
Toppen av vår App.js-fil skal nå se slik ut:
importer React, {useState} fra "reagere"; importer {simpleStorage} fra "./ abi / abi"; importere Web3 fra "web3"; import "./App.css";
Vi må nå sørge for at vi har muligheten for at vilkårlige brukere har muligheten til å koble til og bruke vår dApp, så lenge de har en lommebokleverandør!
Den viktigste lommeboken som brukes i Ethereum-rommet for dApp-interaksjon, er MetaMask, introdusert i trinn 1.
Hvis du ikke har MetaMask, kan du gå til metamask.io.
Med MetaMask installert, kan vi få tilgang til lommeboken vår inne i dapp med:
const web3 = ny Web3 (Web3.givenProvider);
“Web3.givenProvider” vil bli satt i en nettleser som støttes av Ethereum.
(du kan lese mer om hvorfor dette er nødvendig her)
Så nå skal koden vår se slik ut:
importer React, {useState} fra "reagere"; importer {simpleStorage} fra "./ abi / abi"; importere Web3 fra "web3"; import "./App.css"; const web3 = ny Web3 (Web3.givenProvider);
Ok! Så langt har vi:
- Spunnet opp et React-prosjekt
- Installert Web3
- Lagt til mappen vår som inneholder build + kontrakten + overføringen til React-prosjektet vårt
- Opprettet en abi.js-fil som inneholder abi-dataene vi hentet fra SimpleStorage.json
- Importerte dataene vi trenger for å samhandle med kontrakten vår
- Opprettet en variabel som lar dApp vår kommunisere med brukerens lommebok
Igjen, selv om Truffle gjør de neste få trinnene unødvendige (vi vil gå gjennom en mye enklere versjon senere), vil vi legge til litt mer manuell kompleksitet i dApp vår for pedagogiske formål.
Det vi skal gjøre nå er å opprette to nye variabler: en for å lagre adressen til kontrakten vi distribuerte på Ropsten, og den andre for å matche den kontrakten med ABI, slik at appen vår vet hvordan vi kan snakke med den!
For å finne kontraktsadressen, naviger til JSON-filen vi var i tidligere (som inneholder ABI (SimpleStorage.json)), og bla til bunnen. Adressen er i “adresse” -feltet her:
"kompilator": { "Navn": "solc", "versjon": "0.5.8 + commit.23d335f2.Emscripten.clang" }, "nettverk": { "3": { "arrangementer": {}, "lenker": {}, "adresse": "0x24164F46A62a73de326E55fe46D1239d136851d8", "transactionHash": "0x1f02006b451b9e85f70acdff15a01c6520e4beddfd93a20e88a9b702a607a7b0" }}, "skjemaVersjon": "3.0.16", "oppdatertAt": "2020-06-30T20: 45: 38.686Z", "devdoc": { "metoder": {}}, "brukerdokument": { "metoder": {}}}
Alternativt kan du gå over til https://ropsten.etherscan.io/ og slå opp adressen til kontoen som distribuerte kontrakten! Ved å klikke på “Opprettelse av kontrakt” i Etherscan vil selve kontraktsadressen avsløre.
Nå tar vi kopien av kontraktens adresse og oppretter en ny variabel for å lagre den.
Uten dette har vi ikke muligheten til å kommunisere med kontrakten, og vår dApp fungerer ikke som forutsatt.
Du vil legge til dette under vår const web3 = nye Web3 (Web3.givenProvider);
const contractAddress = "kontraktsadressen din her";
Deretter oppretter vi en ny variabel kalt “storageContract” som inneholder både kontraktsadressen vår (slik at appen vår vet hvor kontrakten er), og ABI (slik at appen vår vet hvordan de skal kommunisere med kontrakten).
const storageContract = ny web3.eth.Contract (simpleStorage, contractAddress);
Vår App.js skal nå se slik ut
importer React, {useState} fra "reagere"; importer {simpleStorage} fra "./ abi / abi"; importere Web3 fra "web3"; import "./App.css"; const web3 = ny Web3 (Web3.givenProvider); const contractAddress = "kontraktsadressen din her"; const storageContract = ny web3.eth.Contract (simpleStorage, contractAddress);
Vi må nå få krokene våre til å ha variabler som vil samhandle med kontrakten og frontend. Vi vil gjøre dette ved å erklære følgende i appfunksjonen vår:
importer React, {useState} fra "reagere"; importer {simpleStorage} fra "./ abi / abi"; importere Web3 fra "web3"; import "./App.css"; const web3 = ny Web3 (Web3.givenProvider); const contractAddress = "kontraktsadressen din"; const storageContract = ny web3.eth.Contract (simpleStorage, contractAddress); funksjon App () {const [nummer, setUint] = useState (0); const [getNumber, setGet] = useState ("0");
Vår første bruk av useState (0) holder uint256 brukeren erklærer.
(navnekonvensjonene for nummer, setUint, getNumber, setGet forhåpentligvis hjelp til å vise hva som skjer)
useState (“0”) -verdien fungerer som en plassholder til vi har bekreftelse på den signerte handlingen vår (vår erklærte uint256)
setUint vi vil snart ringe inn i retur (mer om dette senere)
På tide for vår logikk
Deretter vil vi legge til numberSet og NumberGet-logikken vår (vi legger til numberSet i funksjonen vår App)
const numberSet = async (t) => {t.preventDefault (); const-kontoer = venter på vinduet.ethereum.enable (); const-konto = kontoer [0]; const gas = venter på lagringContract.methods.set (nummer) .estimateGas (); const post = avventer storageContract.methods.set (nummer) .send ({fra: konto, gass,}); }; const numberGet = async (t) => {t.preventDefault (); const post = avventer storageContract.methods.get (). ring (); setGet (post); };
Vi setter en preventDefault (detaljer om preventDefault funnet her)
Vi bruker også en asynkroniseringsanrop på get for kontrakten (detaljer om async funnet her)
Hook setGet () lagrer en standardverdi vi opprinnelig ser på (“0”)
const-kontoer = venter på vinduet.ethereum.enable ();
sørger for at vi ringer til den tilkoblede adressen vår via MetaMask.
const-konto = kontoer [0];
Henter inn tilkoblingskontoen
Du lurer kanskje på hva som skjer
const gas = venter på lagringContract.methods.set (nummer) .estimateGas ();
Appen vår har tillatelse til å få tilgang til brukerfond for å betale for gassavgifter, alle funksjoner som ber om eter, uansett om det er på testnett eller nett. Det er her vår forbindelse til MetaMask er nyttig for å signere for denne bruken for å stille inn uint256 og betale for den (med test ETH).
Så for enhver funksjon som trenger gass, må du beregne den potensielle gassen som brukes.
“Set” -funksjonen i kontrakten krever gass
“Få” gjør det ikke.
(dette er fordi “Get” ser på det som allerede er erklært med “Set”)
const post kommer til å ta bestått i uint256, bekrefte transaksjonen (etter betaling av gassgebyr) fra MetaMask-lommeboken din på Ropsten-nettverket.
Deretter sender vi funksjonsparametrene via methods.set () og med vår deklarerte adresse (brukeradresse) håndterer vi deretter Set-funksjonen.
Vi oppretter vår smarte kontraktstransaksjon ved å overføre funksjonsparametrene til smarte kontraktsmetoder. Set (), og estimert gass- og brukerkontoadresse til.send ().
const post = avventer storageContract.methods.set (nummer) .send ({fra: konto, gass,});
Dette burde være all logikken vi trenger for å dekke nummeret vårt.
Nå trenger vi nummeret vårt
const numberGet = async (t) => {t.preventDefault (); const post = avventer storageContract.methods.get (). ring (); setGet (post); };
Vårt første innlegg henter vårt angitte nummer og setGet passerer inn den nye verdien vi erklærte
Så “0” vil onClick henvise til nummeret vårt Få og gjengi vårt unint256!
Så nå skal app.js se slik ut
importer React, {useState} fra "reagere"; importer {simpleStorage} fra "./ abi / abi"; importere Web3 fra "web3"; import "./App.css"; const web3 = ny Web3 (Web3.givenProvider); const contractAddress = "kontraktsadressen din"; const storageContract = ny web3.eth.Contract (simpleStorage, contractAddress); funksjon App () {const [nummer, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); const-kontoer = venter på vinduet.ethereum.enable (); const-konto = kontoer [0]; const gas = avventer lagringContract.methods.set (nummer) .estimateGas (); const post = avventer storageContract.methods.set (nummer) .send ({fra: konto, gass,}); }; const numberGet = async (t) => {t.preventDefault (); const post = avventer storageContract.methods.get (). ring (); setGet (post); };
La oss lage en veldig grunnleggende avkastning som skal gjengis, slik at vi kan teste om vi kan
- angi en unint256-verdi,
- Trekk opp metamask-lommeboken vår og bekreft transaksjonen
- Betal gasskostnaden
- få deretter verdien (unint256) vi lagret når transaksjonen er fullført.
Returen vår ser slik ut:
retur (Still inn uint256: setUint (t.target.value)} /> Bekrefte
Få din uint256 {getNumber}); } eksporter standardapp;
Noen raske CSS
La oss nå gå til App.css-filen, slette kjeleplatekoden og legge til denne i stedet
.hoved {text-align: center; skjerm: flex; rettferdiggjøre innhold: sentrum; bakgrunnsfarge: # f2f1f5; høyde: 100vh; } .kort {min høyde: 50vh; bredde: 50vw; skjerm: flex; flex-retning: kolonne; align-items: sentrum; rettferdiggjøre innhold: sentrum; } .form {høyde: 20vh; bredde: 20vw; skjerm: flex; rettferdiggjøre innhold: mellomrom jevnt; flex-retning: kolonne; } .knapp {bredde: 20vw; høyde: 5vh; }
Nå er vi klare til å teste!
I terminalløpet ditt
garnstart
I vår lokale vert: 3000 skal vi se slik ut
Vi skal nå kunne legge inn en unint256-verdi i vårt inndatafelt!
Etter at vi har bekreftet nummeret vårt i dApp, signerer vi deretter via MetaMask (Pass på at lommeboken din er satt til Ropsten-nettverket)
Vi gjorde det! &# 129303;
Vi har nå vår smarte kontrakt knyttet til en frontend og har muligheten til å manipulere Set-funksjonen (forutsatt at vi har testen ETH til å betale gassgebyret for transaksjonen). Deretter kan vi ringe på Get-funksjonen og hente den lagrede uint265-verdien.
Ganske kult huh!?!
Ekstra styling
Nå er det på tide å vise hvor enkelt det kan være å implementere enda mer populær Web2-teknologi i prosjektet vårt.
Vi kommer til å bruke MUI for å legge til grunnleggende styling. Hvis du utvikler deg med React allerede, er du kanskje kjent med material-ui. (Detaljer funnet her) Material-UI eller MUI for kort er et veldig populært React-rammeverk som lar deg raskt spinne opp et prosjekt med mye styling tilberedt, forutsatt at du følger navnekonvensjonene. Det er også veldig enkelt å manipulere hvis du bare vil bruke et fundament og tilpasse derfra.
* Dette vil være et veldig kort eksempel på hvordan du legger til MUI i et prosjekt med små tillegg for å demonstrere hvor raskt du kan innlemme prosjektet vårt slik det står med en Web2-teknologi.
Legger til MUI
Vi starter med å kjøre kommandoen (mens du fremdeles er i prosjektkatalogen vår i terminalen (hvis appen din fortsatt kjører, må du lukke den (ctrl + c), eller åpne en ny fane)):
Slik installerer du med npm:
npm install @ material-ui / core
Eller med garn:
garn legg til @ material-ui / core
Nå som vi har injisert MUI, begynner vi med å endre styling. På toppen av vår app.js-fil skal vi importere noen få nye ting:
importer {simpleStorage} fra "./ abi / abi"; importknapp fra "@ material-ui / core / Button"; importere TextField fra "@ material-ui / core / TextField"; importer {makeStyles} fra "@ material-ui / core / styles";
Importen av {makeStyles} lar oss manipulere stylingen (i dette tilfellet) våre knapper og tekstfelt sammen med import av standard MUI-styling.
Vi vil nå lage en variabel (over funksjonen vår) som bringer inn kjelestyling fra MUI
const useStyles = makeStyles ((tema) => ({rot: { "& > *": {margin: theme.spacing (1),},},}));
Nå i vår app-funksjon vil vi også legge til en variabel kalt “klasser” som trekker inn de definerte stilene vi nettopp har erklært ovenfor.
funksjon App () {const klasser = useStyles (); const [number, setUint] = useState (0); const [getNumber, setGet] = useState ("0");
Vi vil nå gjøre justeringer i retur for å erstatte noen av feltene våre med det vi nettopp har importert.
retur (setUint (t.target.value)} variant ="skissert" /> Bekrefte
Få din uint256 {getNumber}); } eksporter standardapp;
Koden din skal nå se slik ut
importer React, {useState} fra "reagere"; importer {simpleStorage} fra "./ abi / abi"; importere Web3 fra "web3"; import "./App.css"; importer {makeStyles} fra "@ material-ui / core / styles"; importknapp fra "@ material-ui / core / Button"; importere TextField fra "@ material-ui / core / TextField"; const useStyles = makeStyles ((tema) => ({rot: { "& > *": {margin: theme.spacing (1),},},})); const web3 = ny Web3 (Web3.givenProvider); const contractAddress = "kontraktsadressen din her"; const storageContract = ny web3.eth.Contract (simpleStorage, contractAddress); funksjon App () {const klasser = useStyles (); const [number, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); const-kontoer = venter på vinduet.ethereum.enable (); const-konto = kontoer [0]; const gas = venter på lagringContract.methods.set (nummer) .estimateGas (); const post = avventer storageContract.methods.set (nummer) .send ({fra: konto, gass,}); }; const numberGet = async (t) => {t.preventDefault (); const post = avventer storageContract.methods.get (). ring (); setGet (post); }; retur (setUint (t.target.value)} variant ="skissert" /> Bekrefte
Få din uint256 {getNumber}); } eksporter standardapp;
Nå hvis vi tar en titt på vårt reageringsprosjekt, bør det se slik ut!
Bra gjort!
Vi har fremdeles all funksjonaliteten fra før, og har nå injisert et brukervennlig rammeverk for å tilpasse prosjektet vårt ytterligere slik vi vil. Ta en titt på MUI dokumentasjon å eksperimentere med dine egne tillegg / modifikasjoner!
Bonusrunde
Det ville være fint å vise brukerne koble til adressen i vår dApp, ikke sant?
Vel, la oss lage en veldig rask og grunnleggende komponent for å gjøre akkurat det!
Vi starter med å lage en egen komponent som vi kan importere tilbake til vår App.js-fil. Det er en god ide å skille logikken vår for ikke bare å holde App.js lett å navigere, men også følge bruken av en komponent, ideelt sett bare å gjøre en ting. Hvis den ender opp med å vokse, bør den spaltes i mindre underkomponenter.
Komponentbygging
Vi vil lage en ny mappe kalt komponenter på samme nivå som srcen vår, og i den mappen vil vi lage en Nav.js-fil. Prosjektstillaset vårt skal nå se ut som dette
Vi vil også lage en Nav.css-fil i komponentmappen for å importere alle stiler vi bruker spesielt på Nav-komponenten.
La oss åpne Nav.js opp og la oss importere React, Web3 og vår tomme.css-fil
importer Reager fra "reagere"; importere Web3 fra "web3"; import "./Nav.css"
Nå skal vi lage en klasse som heter Nav, og vi vil legge til bare noen få ting i den for å vise den tilknyttede adressen vår. Vi begynner med å angi at staten skal lese kontoen
klasse Nav utvider React.Component {state = {account: "" };
Fortsatt innenfor klassen vår, vil vi laste kontoen du vil lese fra, ved å legge til loggen vår async loadAccount
async loadAccount () {const web3 = new Web3 (Web3.givenProvider || "http: // localhost: 8080"); const-nettverk = venter på web3.eth.net.getNetworkType (); const-kontoer = venter på web3.eth.getAccounts (); this.setState ({konto: kontoer [0]}); }
Vi vil deretter lage en componentDidMount (som vil bli påkalt umiddelbart etter at komponenten er montert) I vårt tilfelle trekker vi inn den lastede kontoen. Les mer her
componentDidMount () {this.loadAccount (); }
Sideanmerkning:
Dette kan gjøres annerledes, i stedet for en klasse kan vi opprette en funksjon og bruke kroker i motsetning til componentDidMount, men av hensyn til dette eksemplet vil vi holde oss til denne metoden.
Vi lager da en gjengivelse over vår retur, gjengivelse er en metode som kreves når du skriver en React-komponent ved hjelp av en klassemetode. I løpet av vår retur legger vi til en klasse av adresser i div (for å gi grunnleggende styling til senere) langs en p-tag for å vise den tilkoblede adressen som vi henter ved hjelp av {this.state.account}
gjengi () {return (Din tilkoblede adresse: {this.state.account}); }} eksporter standard Nav;
Nav.js-filen vår skal nå se slik ut
importer Reager fra "reagere"; importere Web3 fra "web3"; import "./Nav.css" klasse Nav utvider React.Component {state = {account: "" }; async loadAccount () {const web3 = new Web3 (Web3.givenProvider || "http: // localhost: 8080"); const-nettverk = venter på web3.eth.net.getNetworkType (); const-kontoer = venter på web3.eth.getAccounts (); this.setState ({konto: kontoer [0]}); } componentDidMount () {this.loadAccount (); } gjengi () {return (Din tilkoblede adresse: {this.state.account}); }} eksporter standard Nav;
La oss gå til Nav.css-filen og legge til veldig grunnleggende styling
.adresse {display: flex; rettferdiggjøre innhold: sentrum; }
Du kan teknisk sett legge til dette i App.css-filen, husk ganske raskt at det kan bli rotete. Komponenter skal være gjenbrukbare, og for å unngå så mye friksjon som mulig ved å dele opp arbeidet ditt, kan det spare deg for hodepine på veien.
La oss nå gå tilbake til App.js og importere den nylagde komponenten og sørge for at vi legger den til i retur for å vise den!
Den ferdige App.js-filen vår skal se slik ut
importer React, {useState} fra "reagere"; importer {simpleStorage} fra "./ abi / abi"; importere Web3 fra "web3"; importer Nav fra "./components/Nav.js"; import "./App.css"; importer {makeStyles} fra "@ material-ui / core / styles"; importknapp fra "@ material-ui / core / Button"; importere TextField fra "@ material-ui / core / TextField"; const useStyles = makeStyles ((tema) => ({rot: { "& > *": {margin: theme.spacing (1),},},})); const web3 = ny Web3 (Web3.givenProvider); const contractAddress = "adressen din her"; const storageContract = ny web3.eth.Contract (simpleStorage, contractAddress); funksjon App () {const klasser = useStyles (); const [number, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); const-kontoer = venter på vinduet.ethereum.enable (); const-konto = kontoer [0]; const gas = venter på lagringContract.methods.set (nummer) .estimateGas (); const post = avventer storageContract.methods.set (nummer) .send ({fra: konto, gass,}); }; const numberGet = async (t) => {t.preventDefault (); const post = avventer storageContract.methods.get (). ring (); setGet (post); }; komme tilbake ( setUint (t.target.value)} variant ="skissert" /> Bekrefte
Få din uint256 {getNumber}); } eksporter standardapp;
Vi bør nå se den tilknyttede adressen vår på toppen og fortsatt beholde all funksjonaliteten vår!
&# 127881; Vi gjorde det! &# 127881;
Vi har nå en dApp som vi har bygget fra grunnen av. Vi trakk inn vår smarte kontrakt i et React-prosjekt, skrev logikk for å sikre at vi har brukerfunksjonalitet, opprettet en komponent for å gjengi den tilkoblede adressen, og vi la til og med et populært stylingsrammeverk til prosjektet vårt.
Bra gjort! Dette er bare starten på Web3-utviklingseventyrene dine, og du har allerede noe å vise at du ikke bare har laget, men også viklet hodet rundt. Ta kontakt med oss i Discord og del prosjektet ditt (spesielt hvis du har gjort noen endringer eller tillegg) med oss!
- Onboarding for utviklere: Trinn 1
Onboarding for utviklere: Trinn 1
Onboarding for utviklere: Trinn 2
Onboarding for utviklere: Trinn 2
10-minutters Ethereum Orientering
10-minutters Ethereum Orientering
