Kako stvoriti skalabilne dApps i pametne ugovore u Ethereumu s državnim kanalima korak po korak. 1. dio

Postoji puno različitih rješenja za stvaranje decentraliziranih aplikacija koje dosežu tisuće ili čak milijune korisnika u stvarnom vremenu, poput plazme i državnih kanala. U ovom ćete vodiču korak po korak naučiti kako funkcioniraju državni kanali i kako u ovom trenutku stvoriti skalabilne aplikacije u Ethereumu.

Ne morate čekati buduća poboljšanja u blockchainu. Tehnologija je tu da ostane i možete je koristiti za stvaranje svih vrsta dApps-a. Trenutno se državni kanali uglavnom koriste za igre temeljene na blockchainu u Ethereumu.

Razmislite o kockanju s kripto valutama. Postoje načini za šifriranje informacija da bi ih kasnije otkrili, što je ključna točka ovog sustava.

Što su državni kanali?

To je rješenje za skaliranje za stvaranje decentraliziranih aplikacija i pametnih ugovora koje milioni korisnika mogu koristiti u gotovo stvarnom vremenu. Oni djeluju tako što pokreću kanal između 2 ili više korisnika u kojima razmjenjuju šifrirane, potpisane poruke s podacima o transakciji koju žele izvršiti.

Nazivaju ih „državama“, jer svaka interakcija mora imati stanje koje se može ažurirati. Razmislite o rezultatima igre ili stanja u banci.

Zašto postoje?

Državni kanali su stvoreni zato što su eterijske aplikacije brzo porasle popularnost čineći blockchain neupotrebljivim jer je razvijen s umjerenom uporabom. Omogućuju neprestane transakcije bez plaćanja plina ili čekanja da rudari obrade transakcije.

Što znači besplatne i brze transakcije.

Što nam je potrebno za postavljanje državnog kanala?

  1. Najmanje 2 korisnika koji će međusobno komunicirati. Kanal treba otvoriti između 2 ili više korisnika. Slično kao i chat aplikacija.
  2. Pametan ugovor s logikom državnog kanala koji će ga otvoriti i zatvoriti.
  3. Ako se državni kanal koristi u igri, bit će potreban escrow za oba korisnika. Taj depozit u eteru bit će pohranjen u pametnom ugovoru prilikom otvaranja kanala.
  4. Javascript aplikacija koja će generirati potpisane poruke koje će se korisnicima razmjenjivati ​​izvan lanca.
  5. Metamaska ​​ili sličan alat za potpisivanje poruka. Poruke za potpisivanje ne koštaju benzin, a izvršavaju se odmah. Oba korisnika zahtijevaju da potpišu poruke kako bi jamčili da su upravo ti generirali takvu transakciju.
  6. E-pošta ili bilo koji vanjski program za razmjenu potpisanih poruka kako bi se omogućila aplikacija.

Kako djeluju?

Državni kanal pomalo je složen za postavljanje jer se morate osigurati da su oba igrača zaštićena u slučaju da nešto pođe po zlu, zato nam treba pametan ugovor. Ovo su koraci:

  1. U državnom kanalu između dva korisnika, prvi razrađuje pametni ugovor koji će "otvoriti" kanal.
  2. Drugi izvršava funkciju pametnog ugovora da se "pridruži" tom državnom kanalu "
  3. Tada mogu započeti razmjenu potpisanih poruka za aplikaciju. Oba korisnika imaju pristup prilagođenoj javascript aplikaciji za generiranje poruka s informacijama koje bi učinili pametnim ugovorom, ali izvan lanca.
  4. Brzina transakcija ovisi o tome koliko brzo svaki korisnik može stvoriti i potpisati te poruke. Stalno razmjenjuju poruke, igraju se izvan lanca dok ne odluče da je igra gotova.
  5. Kada završe igru, bilo tko od njih može pristupiti pametnom ugovoru i izvršiti funkciju koja ga dovršava, čime će započeti faza "pregovora".
  6. U ovoj fazi oba korisnika imaju vremensko ograničenje od 1 dana za učitavanje najnovijih 2 poruka na pametni ugovor. Pametni ugovor provjerava najnovije poruke i na temelju tih podataka oslobađa sredstva za završetak igre. Svaka poruka sadrži rezultate prethodnih interakcija, tako da je sigurno provjeriti najnovije.

Kako to možete primijeniti u stvarnoj situaciji?

U ovom ćemo vam vodiču pokazati kako stvoriti državni kanal između 2 korisnika za Ethereum igru. Imajte na umu da se državni kanali mogu koristiti za bilo koju aplikaciju koja ima "državu" ili brojač. Zbog toga su igre idealne. Kako možete pratiti tko pobjeđuje u svakoj igri, postoji stanje za svaku igru ​​koje se može ažurirati.

Napravit ćemo igru ​​s kockicama u kojoj igrač 1 odabire broj kockica koji će se ispasti, a igrač 2 mora pogoditi taj broj da bi pobijedio. Oni će moći igrati onoliko igara koliko žele bez potrebe za izvršavanjem transakcija na blockchainu. Također ćemo imati internetsku aplikaciju za prikaz sučelja.

Ovo je indeks koji ćemo slijediti za stvaranje takve decentralizirane aplikacije:

  1. Izrada vizualne web aplikacije. Ovo je sučelje, kako će igra izgledati vanjskim korisnicima. Koristit će se kao medij za razmjenu potpisanih poruka za državne kanale.
  2. Stvaranje funkcionalnosti potrebnih za potpisivanje i šifriranje poruka.
  3. Stvaranje pametnog ugovora.

1. Izrada vizualne web aplikacije

Prije nego što uopće započnem s kodom, želim biti sigurni da smo razjasnili sve detalje web aplikacije. Kako će to izgledati, na šta je žarište pozornosti.

U ovom slučaju želimo prikazati slične stvari za oba igrača. Igrač 1 vidjet će 6 lica kockica kao slike i morat će odabrati neko koje će izaći, a zatim drugi igrač, također će morati birati između tih lica i moći će vidjeti rezultat.

Dakle, okvir će biti ovako:

  1. Player 1 ide u web-aplikaciju, klikne na gumb na kojem piše "Pokreni novu igru", a zatim napravi transakciju metamaske za uvođenje i postavljanje pametnog ugovora. Dobija pametnu adresu ugovora koju može poslati drugom igraču za početak igre.
  2. Player 2 ide u web-aplikaciju, klikne na gumb na kojem piše "Pridružite se postojećoj igri" s ugovornom adresom dobivenom od igrača 1, a zatim izvrši transakciju metamaske za postavljanje već postojeće igre i pošalje escrow.

Pa krenimo tamo. Kreirajmo okvir usred web aplikacije s 2 gumba. Stvorite mapu koja se zove kockice i datoteku unutar koja se zove index.html. Evo koda:

Tako izgledaju dva gumba prema zadanim postavkama


    
        
         Igra s kockicama ethereum 
    
    
        
                                       

Upravo sam u tom kodu stvorio osnovnu HTML strukturu s divom koji sadrži gumbe i naslov. Imajte na umu da div ima klasu koja se zove glavni sadržaj koju ćemo koristiti u trenu.

Učinimo to ljepšim s nekim css-om. Napravite datoteku koja se zove index.css sa sljedećim kodom (možete je kopirati i zalijepiti):

Evo kako će to izgledati
tijelo {
    obitelj fontova: sans-serif;
}
.glavni sadržaj {
    marža: auto;
    maksimalna širina: 500px;
    boja pozadine: whitesmoke;
    padding: 50px;
    obrub granice: 10px;
    prikaz: rešetka;
    grid-template-rews: 1fr 1fr;
    grid-template-stupci: 1fr 1fr;
    rešetka-stupac-jaz: 10px;
}
.main-sadržaj h1 {
    rešetka-stupac: 1 / raspon 2;
}
. gumb za glavni sadržaj {
    granica: nema;
    boja: bijela;
    boja pozadine: # 007dff;
    padding: 20px;
    obrub granice: 5px;
    pokazivač: pokazivač;
}
.mez glavnog sadržaja: zadržite pokazivač {
    neprozirnost: 0,8;
}
. gumb za glavni sadržaj: aktivan {
    neprozirnost: 0,6;
}

U html sam dodao h1 naslov da bi izgledao bolje, budite sigurni da ažurirate html dodavanjem veze na css:



    
        
        
         Igra s kockicama ethereum 
    
    
        
            

Ethereum kockice

                                       

Možda ste primijetili da koristim novu css rešetku. To je zato što je uglavnom dostupan za velike preglednike, tako da je u ovom trenutku sasvim sigurno koristiti jer će većina ljudi css vidjeti pravilno.

Odlučio sam da je najbolji način da se sljedeća radnja traži od korisnika prikazivanje div-a u javascriptu s potrebnim informacijama. Dakle, kad klikne "Pokreni novu igru", vidjet će se okvir s upitom koliko ekrana želi postaviti za igru.

Klikne na "Pridruži se postojećoj igri", tražit će se adresa za uklanjanje i ugovor postojeće igre.

Evo kako će reagirati akcije gumba:

Kako aplikacija izgleda s običnim JavaScriptom

Da bih to omogućio stvorio sam datoteku index.js s nekom JavaScript logikom. Evo javascripta, obavezno ga upišite rukama ako želite ovo bolje naučiti:

Dopustite mi da objasnim što sam tamo učinio:

  • Prvo sam stvorio funkciju koja se zove start () koja će se odmah izvršiti za omatanje sadržaja tako da bude lijep i sadržan u jednoj velikoj funkciji.
  • Tada sam stvorio dva slušatelja događaja koji se aktiviraju kad god kliknem na gumbe za pokretanje ili pridruživanje u html datoteci. Jedna za gumb # nova igra i druga za gumb # pridruživanje igri. Koristim document.querySelector () koji je jedan od najmoćnijih načina za odabir bilo čega u vašem js kodu.
  • Unutar tih slušatelja pokazujem ili sakrivam okvir div svakog odgovarajućeg elementa. U osnovi odabir okvira s querySelector-om i uklanjanje ili dodavanje klase skrivene koja je u css postavljena za prikaz: none; ,

Tada možemo povezati js datoteku s našim modifie index.html:



    
        
        
         Igra s kockicama ethereum 
    
    
        
            

Ethereum kockice

                         
            
                

Koliki ćete broj escrow koristiti u ETH?

                             
            
                

Koja je pametna adresa ugovora postojeće igre?

                             
             Nastavi 
        
        
    

Ja sam podebljao nove dijelove koda koji su dodani. Slijedi ažurirani css za stil novih podataka:

tijelo {
    obitelj fontova: sans-serif;
}
.hidden {
    prikaz: nijedan;
}
.glavni sadržaj {
    marža: auto;
    maksimalna širina: 500px;
    boja pozadine: whitesmoke;
    padding: 50px;
    obrub granice: 10px;
    prikaz: rešetka;
    grid-template-rews: 1fr 80px automatski;
    grid-template-stupci: 1fr 1fr;
    rešetka-stupac-jaz: 10px;
}
.main-sadržaj h1 {
    rešetka-stupac: 1 / raspon 2;
}
. gumb za glavni sadržaj {
    granica: nema;
    boja: bijela;
    boja pozadine: # 007dff;
    padding: 20px;
    obrub granice: 5px;
    pokazivač: pokazivač;
}
.mez glavnog sadržaja: zadržite pokazivač {
    neprozirnost: 0,8;
}
. gumb za glavni sadržaj: aktivan {
    neprozirnost: 0,6;
}
. gumb za glavni sadržaj: onemogućeno {
    neprozirnost: 0,5;
    boja pozadine: siva;
    pokazivač: auto;
}
.manal-content unos {
    širina: 100%;
    obrub granice: 10px;
    padding: 10px;
    obrub: 1px čvrsta svjetlosna siva;
}
.main-content div.new-game-setup, .main-content div.join-game-setup {
    rešetka-stupac: 1 / raspon 2;
}
# gumb-nastavi {
    rešetka-stupac: 1 / raspon 2;
    margina-top: 20px;
}

Gumb "Nastavi" trenutno ne radi ništa, pa stvorimo tu funkcionalnost za uvođenje novog pametnog ugovora i otvaranje državnog kanala kada korisnik želi stvoriti novu igru ​​u sljedećem odjeljku.

2. Stvaranje i povezivanje početnog pametnog ugovora

Vrijeme je da stvorite osnovnu verziju pametnog ugovora i povežete ga s vašim JavaScriptom pomoću web3.js. Za sada su nam potrebni samo konstruktor i neke osnovne informacije. Zapišite ovaj kôd vlastitim rukama u novu datoteku pod nazivom Dice.sol:

pragma čvrstoća 0,4,25;
ugovor kockice {
    adresa javni igrač1;
    adresa javni igrač2;
    uint256 javni player1Escrow;
    uint256 javni player2Escrow;
    graditelj () javno plaća {
        zahtijevati (msg.value> 0);
        player1 = msg.sender;
        player1Escrow = msg.value;
    }
    funkcija setupPlayer2 () javna plaća {
        zahtijevati (msg.value> 0);
        player2 = msg.sender;
        player2Escrow = msg.value;
    }
}

Postoje dvije funkcije, konstruktor za postavljanje adrese i uklanjanje prvog igrača i funkcija setupPlayer2 () za postavljanje podataka drugog igrača.

Želimo implementirati ugovor i izvršiti konstruktor s navedenim msg.value desnicom kad korisnik klikne gumb "Nastavi". Da bismo to postigli, morat ćemo implementirati web3.js u naš pametni ugovor. Budući da je to glavni način komunikacije s blockchainom na pregledniku.

Ovdje nabavite web3.js u mapu aplikacije: https://github.com/ethereum/web3.js/blob/develop/dist/web3.js koji je službeni, ažurirajte kôd distribucije.

Da biste ga preuzeli za svoj projekt, idite na tu vezu, kliknite na sirovu stranicu da biste vidjeli cijeli kôd i kopirajte ga u novu datoteku zvanu web3.js unutar mape projekta:

Otvorite stranicu, kliknite na

To zapravo ne trebate činiti ako upotrebljavate metamasku jer metamask ubrizgava verziju web3.js za vas, no korisno je imati knjižnicu web3 u svom projektu za interakciju s blockchainom ako metamaska ​​nije dostupna.

Koristimo metamasku za razgovor s blockchainom. No to ne funkcionira kada otvorite datoteku index.html na pregledniku jer datoteka: // nije podržana za metamasku.

Tada moramo pokrenuti lokalni poslužitelj koji će datoteke posluživati ​​na http: // localhost: 8080 url jer metamaska ​​ne radi kad izravno otvorite datoteku index.html. Da biste to učinili, otvorite terminal i instalirajte ovo:

npm i -g http-poslužitelja

Zatim u mapi projekta izvedite http-poslužitelj da biste pokrenuli lokalni poslužitelj za svoj index.html:

http server

To će poslužiti datoteke na localhostu: 8080 kako biste im mogli pristupiti i ubrizgati web3 iz metamaske.

S time se isključimo, usredotočimo se na implementaciju ugovora koji smo upravo stvorili iz naše web aplikacije, i to upravo kad korisnik klikne na 'Nastavi'.

Za uvođenje novog ugovora potrebni su nam ABI, parametri konstruktora i bytecode. To su uvjeti za web3.js.

  1. Da biste generirali ABI, idite na remix.ethereum.org, zalijepite svoj kod u glavni odjeljak i kliknite na ABI:

To će kopirati ABI kod. Idite u mapu projekta i stvorite datoteku zvanu contractData.js kako biste tamo zalijepili kôd varijablom koja se zove abi poput:

2. Sada nam treba bajt kod vašeg pametnog ugovora. Bytecode je sastavljeni pametni ugovor koji će biti raspoređen u blockchain, potrebne su nam te informacije da bismo ga mogli implementirati. Da biste dobili bytecode ponovo ga treba remiksirati i kliknite ovaj gumb:

Gumb za kopiranje bajt koda za vaš kôd

I stvorite još jednu varijablu unutar contractData.js nazvanu bytecode s tim podacima poput:

Taj isti kod možete kopirati ako je vaš pametni ugovor potpuno sličan onome koji sam stvorio gore.

Uvozite tu datoteku JavaScripta u vaš HTML prije datoteke index.js da biste imali na raspolaganju varijable abi i bytecode:

Prije stvaranja ugovora na JavaScriptu, trebamo dodati slušatelja događaja u gumb za nastavak odjeljka "Pokreni novu igru":

Ono što sam tamo učinio je:

  • Ulazima sam dodao ID-ove na kojima se korisnik pita koliko etera želi staviti u escrow i adresu ugovora ako se pridruži postojećoj igri.
  • Zatim sam iznad index.js dodao javascript import jer želimo imati abi i bytecode dostupan u indeksu.js jer ga prvo moramo uvesti.

Tada dodamo potrebnu logiku kako bi taj gumb djelovao. Provjerit ćemo je li unos adrese ugovora u HTML-u prazan ili ne.

Ako nije prazna, pretpostavit ćemo da igrač započinje novu igru ​​što vam je zanimljivo, omogućava vam da započnete igru ​​pomoću gumba za pridruživanje ako adresu ostavite praznu.

Prije nego vam pokažem cijeli kôd, želim vam objasniti kako rasporediti ugovor pomoću web3.js. Izgleda jednostavno, ali zaglavio sam u nekim područjima.

Kada korisnik klikne na "Pokreni novu igru", u eteru i njegovoj adresi nam da iznos escrowa, a s ovom funkcijom možemo uvesti novi ugovor:

U osnovi stvarate instancu ugovora s abi-om i izvršavate metodu .new () za taj ugovor s bytecodeom.

Tada u povratnom pozivu dobivate pogrešku, ako postoji, i objekt s rezultatima. Rezultatni objekt će sadržavati. Adresu ugovora raspoređenu kada transakciju rudari obrađuju.

Što znači da će ovaj povratni poziv biti izveden 2 puta. Jedna kada izvršite kreiranje ugovora, a druga kada je adresa tog ugovora dostupna.

Možete provjeriti kad je adresa ugovora dostupna jednostavnom if:

if (! rezultat.adress) {
    // Stvaranje ugovora je započelo
} else {
    // Ugovor je raspoređen i možete koristiti adresu s adresom rezultata
}

Na taj način implementirate ugovor s web3.

Ali što ako želite pristupiti postojećem ugovoru na blockchainu?

To je upravo ono što nam je potrebno da se "pridružimo" igri s kockicama i stvorimo instancu ugovora. U tu svrhu trebamo samo ABI i adresu ugovora, bajt kod nije potreban. Evo kako to radite na web3:

Ugovor = web3.eth.contract (abi)
contractInstance = Contract.at (adresa izabrana)

Nakon toga možete izvršiti funkcije tog ugovora na takav način:

contractInstance.setupPlayer2 ({
  vrijednost: web3.toWei (valueSelected),
  gas: 4e6
}, (pogreška, rezultat) => {
    // Učinite nešto nakon izvršenja funkcije
})

Trebate samo instancu, naziv funkcije, parametre ako ih ima i funkciju povratnog poziva.

Sad kad ste razumjeli kako implementacija i instancija pametnog ugovora funkcionira na Javascriptu, prikazat ću vam puni kod aplikacije:

Zanemarite sve gore, na što se morate usredotočiti nalazi se u blokadu slušalice "# gumb-nastavi":

document.querySelector ( '# tipka-dalje'). addEventListener ()

Jer vas jedino treba brinuti što se događa kada igrač 1 ili igrač 2 kliknu na gumb 'Nastavi'. Evo rascjepa:

  • Kada bilo koji igrač klikne na taj gumb, izvršava se slušatelj događaja
  • Unutra dobivam vrijednosti ulaza za postavljanje escrow-a i adrese raspoređenog ugovora ako se igrač pridruži postojećoj igri. To su vrijednostiSelected i addressSelected varijable.
  • Tada kreiram varijablu za podešavanje ugovora s abi-om koja će biti potrebna obojici igrača.
  • Nakon toga vidim je li postavljena adresa raspoređenog ugovora ili ne. Ako je adresa prazna, to znači da je igrač kliknuo "Pokreni novu igru", jer u tom slučaju neće vidjeti unos adrese.
  • Što znači da za tog igrača ugradim novu igru ​​ili pametni ugovor s odabranim escrowom.
  • Taj prvi igrač vidjet će adresu raspoređenog pametnog ugovora. Morat će podijeliti tu adresu s drugim igračem kako bi pokrenuo igru ​​s kockicama jer su vam potrebna dva igrača.
  • Ako je odredio adresu, znači da se želi pridružiti postojećoj igri. To možemo učiniti tako što ćemo stvoriti instancu pametnog ugovora koristeći njegovu adresu i zatim izvršiti funkciju setupPlayer2 ().
  • Koristim funkciju setInterval da provjerim svake 1 sekunde je li postavljanje igrača 2 dovršeno ili nije započeo igru.

Sjajno! Ako ste to uspjeli do sada, to znači da ste predani i da zapravo nešto učite. Najbolji dio je bliži nego što mislite. U sljedećem članku vidjet ćete kako stvoriti državne kanale za svoju igru ​​u JavaScriptu da biste stvorili skalabilni Ethereum decentralizirani program.

Ne propustite i budite prvi koji će ga pročitati kad je dovršeno. Pridružite se mom ekskluzivnom popisu e-pošte Ethereum Developersa kako biste ovdje mogli primati ažuriranja i podatke: http://eepurl.com/dDQ2yX

Drugi dio je sada dostupan ovdje: https://medium.com/@merunasgrincalaitis/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step- 690f71a9bf2f

Ako se osjećate preplavljenim takvim naprednim informacijama ili ste tek novi za solidnost i Ethereum dapps, pogledajte moju knjigu „Ethereum Developer: Learn Solidity from Scratch“ ovdje https://merunas.io/