Jak vytvořit škálovatelné dApps a inteligentní kontrakty v Ethereum se státními kanály krok za krokem. Část 1

Existuje celá řada různých řešení pro vytváření decentralizovaných aplikací, které se rozšiřují na tisíce nebo dokonce miliony uživatelů v reálném čase, jako jsou plazmové a státní kanály. V této příručce se naučíte krok za krokem, jak fungují státní kanály a jak vytvářet škálovatelné aplikace v Ethereum právě teď.

Nemusíte čekat na budoucí vylepšení blockchainu. Tato technologie je tu a můžete ji použít pro vytváření všech druhů dApps. Právě teď se státní kanály většinou používají pro hry založené na blockchainu v Ethereum.

Mysli na hazard s kryptoměnami. Existují způsoby, jak tyto informace zašifrovat a později je odhalit, což je klíčovým bodem tohoto systému.

Co jsou to státní kanály?

Jedná se o škálovací řešení pro vytváření decentralizovaných aplikací a inteligentních kontraktů, které mohou miliony uživatelů využít téměř v reálném čase. Pracují tak, že iniciují kanál mezi 2 nebo více uživateli, ve kterém si vyměňují šifrované a podepsané zprávy s informacemi o transakci, kterou chtějí provést.

Říká se jim „stav“, protože každá interakce musí mít stav, který lze aktualizovat. Přemýšlejte o skóre hry nebo bankovním zůstatku.

Proč existují?

Státní kanály byly vytvořeny, protože aplikace ethereum rychle rostly v popularitě, takže blockchain byl nepoužitelný, protože byl vyvinut s mírným využitím. Umožňují nepřetržité transakce, aniž by museli platit za plyn nebo čekat na zpracování horníků.

Což znamená bezplatné a rychlé transakce.

Co potřebujeme k vytvoření státního kanálu?

  1. Nejméně 2 uživatelé, kteří budou vzájemně komunikovat. Je třeba otevřít kanál mezi 2 nebo více uživateli. Podobné jako chatová aplikace.
  2. Chytrá smlouva s logikou státního kanálu, která ji otevře a uzavře.
  3. Pokud bude ve hře použit státní kanál, bude pro oba uživatele vyžadována úschova. Tato úschova v éteru bude při otevření kanálu uložena v inteligentní smlouvě.
  4. Javascriptová aplikace, která vygeneruje podepsané zprávy, které budou vyměněny mimo řetěz mezi uživateli.
  5. Metamask nebo podobný nástroj pro podepisování zpráv. Podepisování zpráv nestojí benzín a provádí se okamžitě. Je nutné, aby oba uživatelé podepsali zprávy, aby bylo zaručeno, že takové transakce generují tehy.
  6. E-mail nebo jakákoli externí aplikace k výměně těchto podepsaných zpráv, aby byla tato aplikace možná.

Jak fungují?

Nastavení státního kanálu je trochu složité, protože musíte zajistit, aby oba hráči byli chráněni v případě, že se něco pokazí, proto potřebujeme inteligentní smlouvu. Toto jsou kroky:

  1. Ve státním kanálu mezi 2 uživateli první zavádí inteligentní smlouvu, která kanál „otevře“.
  2. Druhý vykonává funkci této inteligentní smlouvy, aby se „připojil“ k tomuto státnímu kanálu.
  3. Poté mohou začít vyměňovat podepsané zprávy za aplikaci. Oba uživatelé mají přístup k vlastní aplikaci javascript pro generování zpráv s informacemi, které by udělali v inteligentní smlouvě, ale mimo řetěz.
  4. Rychlost transakcí závisí na tom, jak rychle každý uživatel může tyto zprávy vytvářet a podepisovat. Stále si vyměňují zprávy a hrají mimo řetěz, dokud se nerozhodnou, že hra skončila.
  5. Po dokončení hry může kdokoli z nich přejít na inteligentní smlouvu a provést funkci, která ji dokončí a která zahájí fázi „vyjednávání“.
  6. V této fázi mají oba uživatelé časový limit 1 den na nahrání posledních 2 zpráv, které mají k inteligentní smlouvě. Inteligentní smlouva zkontroluje nejnovější zprávy a uvolní prostředky na dokončení hry na základě těchto informací. Každá zpráva obsahuje výsledky předchozích interakcí, takže je bezpečné zkontrolovat pouze ty poslední.

Jak to můžete aplikovat v reálném světě?

V této příručce vám ukážu, jak vytvořit stavový kanál mezi dvěma uživateli pro hru Ethereum. Nezapomeňte, že stavové kanály lze použít pro jakoukoli aplikaci, která má „stav“ nebo čítač. Proto jsou hry ideální. Protože můžete sledovat, kdo vyhrává každou hru, je u každé hry stav, který lze aktualizovat.

Vytvoříme hru s kostkami, kde hráč 1 vybere počet kostek, které budou vypadat, a hráč 2 musí uhodnout toto číslo, aby vyhrál. Budou moci hrát tolik her, kolik chtějí, aniž by museli provádět transakce na blockchainu. Budeme mít také webovou aplikaci zobrazující rozhraní.

Toto je index, který budeme sledovat při vytváření takové decentralizované aplikace:

  1. Vytvoření vizuální webové aplikace. Toto je rozhraní, jak bude hra vypadat externím uživatelům. Použije se jako médium k výměně podepsaných zpráv za státní kanály.
  2. Vytváření funkcí požadovaných pro podepisování a šifrování zpráv.
  3. Vytvoření inteligentní smlouvy.

1. Vytvoření vizuální webové aplikace

Než začnu s kódem, chci se ujistit, že objasňujeme úplné podrobnosti webové aplikace. Jak to bude vypadat, na co se zaměřuje pozornost.

V tomto případě chceme zobrazit podobné věci pro oba hráče. Hráč 1 uvidí 6 obrazů kostek jako obrázky a bude si muset vybrat, který z nich vyjde, pak si druhý hráč bude muset vybrat mezi těmito tvářemi a bude moci vidět výsledek.

Rámec tedy bude něco takového:

  1. Hráč 1 přejde do webové aplikace, klikne na tlačítko s nápisem „Zahájit novou hru“, pak provede metamaskovou transakci, aby nasadil a vytvořil inteligentní smlouvu. Dostává inteligentní adresu smlouvy, kterou může poslat druhému hráči, aby zahájil hru.
  2. Hráč 2 přejde do webové aplikace, klikne na tlačítko s nápisem „Připojit se ke stávající hře“ s adresou smlouvy obdrženou od hráče 1, poté provede metamask transakci, aby nastavil již existující hru a odešle úschovu.

Začněme tedy hned tam. Vytvořme si uprostřed webové aplikace box se dvěma tlačítky. Vytvořte složku nazvanou kostky a soubor uvnitř nazvaný index.html. Zde je kód:

Takto ve výchozím nastavení vypadají 2 tlačítka


    
        
         Hra s kostkami ethereum 
    
    
        
                                  
    

V tomto kódu jsem právě vytvořil základní strukturu HTML s div obsahujícím tlačítka a nadpis. Mějte na paměti, že div má třídu nazvanou main-content, kterou za chvíli použijeme.

Udělejme to hezčí s nějakým css. Vytvořte soubor s názvem index.css s následujícím kódem (můžete jej zkopírovat a vložit):

Takto to bude vypadat
tělo {
    rodina fontů: sans-serif;
}
.hlavní obsah {
    marže: auto;
    max-width: 500px;
    barva pozadí: whitesmoke;
    čalounění: 50px;
    poloměr ohraničení: 10px;
    displej: mřížka;
    řádky mřížky-šablony: 1fr 1fr;
    sloupce mřížky-šablony: 1fr 1fr;
    mezera ve sloupci mřížky: 10px;
}
.main-content h1 {
    sloupec mřížky: 1 / rozpětí 2;
}
tlačítko .main-content {
    hranice: žádný;
    barva bílá;
    barva pozadí: # 007dff;
    čalounění: 20px;
    poloměr ohraničení: 5px;
    kurzor: ukazatel;
}
.main-content button: hover {
    krytí: 0,8;
}
tlačítko .main-content: active {
    krytí: 0,6;
}

Přidal jsem do html název h1, aby to vypadalo lépe, aktualizujte svůj html přidáním odkazu na css:



    
        
        
         Hra s kostkami ethereum 
    
    
        
            

Ethereum Dice

                                  
    

Možná jste si všimli, že používám novou mřížku css. Je to proto, že je většinou k dispozici pro velké prohlížeče, takže je v tuto chvíli docela bezpečné používat, protože většina lidí bude správně vidět CSS.

Rozhodl jsem se, že nejlepším způsobem, jak zobrazit další akci vyžadovanou od uživatele, je ukázat div v javascriptu s požadovanými informacemi. Když klikne na „Zahájit novou hru“, uvidí krabici s dotazem, kolik úsudku chce pro hru nastavit.

Když klikne na „Připojit se ke stávající hře“, bude požádán o úschovu a adresu smlouvy existující hry.

Akce tlačítek bude reagovat takto:

Jak aplikace vypadá s obyčejným javascriptem

Abych to umožnil, vytvořil jsem soubor index.js s nějakou logikou javascript. Zde je javascript. Pokud se chcete dozvědět více, nezapomeňte jej napsat rukama.

Dovolte mi vysvětlit, co jsem tam udělal:

  • Nejprve jsem vytvořil funkci nazvanou start (), která bude okamžitě spuštěna, aby zabalila obsah tak, aby byl pěkný a obsažený v jedné velké funkci.
  • Pak jsem vytvořil 2 posluchače událostí, které se aktivují pokaždé, když kliknu na tlačítka start nebo připojit v souboru html. Jeden pro tlačítko # new-game a další pro tlačítko # join-game. Používám document.querySelector (), což je jeden z nejúčinnějších způsobů, jak vybrat cokoli ve vašem kódu js.
  • Uvnitř těchto posluchačů zobrazuji nebo skrývám pole div každého odpovídajícího prvku. V podstatě výběr boxu s querySelector a odstranění nebo přidání skryté třídy, která je nastavena v css k zobrazení: none; .

Pak můžeme propojit soubor js s naším modifie index.html:



    
        
        
         Hra s kostkami ethereum 
    
    
        
            

Ethereum Dice

                         
            
            
            
        
        
    

Tučně jsem přidal nové kousky kódu. Následuje aktualizovaná verze CSS pro úpravu nových informací:

tělo {
    rodina fontů: sans-serif;
}
.hidden {
    displej: žádný;
}
.hlavní obsah {
    marže: auto;
    max-width: 500px;
    barva pozadí: whitesmoke;
    čalounění: 50px;
    poloměr ohraničení: 10px;
    displej: mřížka;
    řádky mřížky-šablony: 1fr 80px auto;
    sloupce mřížky-šablony: 1fr 1fr;
    mezera ve sloupci mřížky: 10px;
}
.main-content h1 {
    sloupec mřížky: 1 / rozpětí 2;
}
tlačítko .main-content {
    hranice: žádný;
    barva bílá;
    barva pozadí: # 007dff;
    čalounění: 20px;
    poloměr ohraničení: 5px;
    kurzor: ukazatel;
}
.main-content button: hover {
    krytí: 0,8;
}
tlačítko .main-content: active {
    krytí: 0,6;
}
Tlačítko .main-content: disabled {
    krytí: 0,5;
    barva pozadí: šedá;
    kurzor: auto;
}
.main-content input {
    šířka: 100%;
    poloměr ohraničení: 10px;
    čalounění: 10px;
    ohraničení: 1px pevná světlezelená;
}
.main-content div.new-game-setup, .main-content div.join-game-setup {
    sloupec mřížky: 1 / rozpětí 2;
}
# button-pokračovat {
    sloupec mřížky: 1 / rozpětí 2;
    okraj: 20px;
}

Tlačítko „Pokračovat“ právě teď nic nedělá, takže vytvořme tuto funkci, abychom nasadili novou inteligentní smlouvu, a otevřete státní kanál, když uživatel chce vytvořit novou hru v další části.

2. Vytvoření a připojení počáteční smlouvy Smart

Je čas vytvořit základní verzi inteligentní smlouvy a propojit ji s vaším javascriptem pomocí web3.js. Prozatím potřebujeme pouze konstruktéra a některé základní informace. Zapište si tento kód vlastníma rukama do nového souboru s názvem Dice.sol:

pragmatická pevnost 0,25;
smlouva kostky {
    adresa veřejného hráče1;
    adresa veřejného hráče2;
    uint256 veřejný hráč1Escrow;
    uint256 veřejný hráč2Escrow;
    konstruktor () veřejný závazek {
        vyžadují (msg.value> 0);
        player1 = msg.sender;
        player1Escrow = msg.value;
    }
    function setupPlayer2 () veřejný splatný {
        vyžadují (msg.value> 0);
        player2 = msg.sender;
        player2Escrow = msg.value;
    }
}

Existují 2 funkce, konstruktor pro nastavení adresy a úschovu prvního hráče a funkce setupPlayer2 () pro nastavení informací druhého hráče.

Chceme nasadit smlouvu a spustit konstruktor se zadanou hodnotou msg.value, když uživatel klikne na tlačítko „Pokračovat“. Za tímto účelem musíme implementovat web3.js do naší chytré smlouvy. Protože je to hlavní způsob komunikace s blockchainem v prohlížeči.

Stáhněte si web3.js do své složky aplikace zde: https://github.com/ethereum/web3.js/blob/develop/dist/web3.js, což je oficiální aktualizační distribuční kód.

Chcete-li jej stáhnout do svého projektu, přejděte na tento odkaz, kliknutím na raw zobrazíte celý kód a zkopírujte kód a vložte jej do nového souboru s názvem web3.js ve složce projektu:

Otevřete stránku, klikněte na „raw“, vyberte vše pomocí ctrl + a, zkopírujte kód a vložte jej do nového souboru ve vašem projektu s názvem web3.js

To opravdu nemusíte dělat, pokud používáte metamask, protože metamask pro vás injektuje verzi web3.js, ale je užitečné mít knihovnu web3 ve vašem projektu, aby interagovala s blockchainem, pokud metamask není k dispozici.

Používáme metamask k rozhovoru s blockchainem. Při otevření souboru index.html v prohlížeči to však nefunguje, protože přípona file: // není pro metamask podporována.

Poté musíme spustit místní server, který bude soubory obsluhovat na adrese URL http: // localhost: 8080, protože metamask nefunguje, když otevřete soubor index.html přímo. Chcete-li to provést, otevřete terminál a nainstalujte toto:

npm i -g http-server

Poté ve složce projektu spusťte http-server a spusťte místní server pro váš index.html:

http-server

To bude sloužit souborům na localhost: 8080, abyste k nim měli přístup a vstříkli web3 z metamask.

Díky tomu se můžeme soustředit na nasazení smlouvy, kterou jsme právě vytvořili z naší webové aplikace, a to hned, když uživatel klikne na „Pokračovat“.

K nasazení nové smlouvy potřebujeme ABI, parametry konstruktoru a bytecode. To jsou požadavky na web3.js.

  1. Chcete-li vygenerovat ABI, přejděte na adresu remix.ethereum.org, vložte svůj kód do hlavní sekce a klikněte na ABI:

Tím se zkopíruje kód ABI. Přejděte do složky projektu a vytvořte soubor s názvem contractData.js, do kterého vložte kód s proměnnou nazvanou abi:

2. Nyní potřebujeme bajtkód vaší inteligentní smlouvy. Bajtcode je kompilovaná inteligentní smlouva, která bude nasazena do blockchainu. Potřebujeme tyto informace, abychom ji mohli nasadit. Chcete-li dostat bajtkód znovu do remixu a klikněte na toto tlačítko:

Tlačítko pro kopírování bajtkódu pro váš kód

A vytvořte další proměnnou uvnitř contractData.js nazvanou bytecode s těmito informacemi:

Stejný kód můžete zkopírovat, pokud je vaše inteligentní smlouva přesně stejná jako smlouva, kterou jsem vytvořil výše.

Importujte tento soubor javascript v html před soubor index.js, abyste měli k dispozici proměnné abi a bytecode:

Před vytvořením smlouvy na javascript musíme přidat tlačítko posluchače události do tlačítka pokračovat v sekci „Zahájit novou hru“:

Co jsem tam udělal je:

  • Přidal jsem ids id na vstupy, kde se uživatel zeptá, kolik etheru chce vložit do úschovy a na adresu smlouvy, pokud se připojí k existující hře.
  • Pak jsem přidal javascript import nad index.js, protože chceme mít k dispozici abi a bytecode uvnitř index.js, protože musí být nejprve naimportován.

Poté přidáme požadovanou logiku, aby tlačítko fungovalo. Prověříme, zda je zadaná adresa smlouvy v HTML prázdná nebo ne.

Pokud není prázdná, budeme předpokládat, že hráč zahajuje novou hru, která zajímavě umožňuje zahájit hru pomocí tlačítka spojení, pokud necháte adresu prázdnou.

Než vám ukážu celý kód, chci vám vysvětlit, jak nasadit smlouvu pomocí web3.js. Vypadá to jednoduše, ale v některých oblastech jsem uvízl.

Takže když uživatel klikne na „Zahájit novou hru“, dá nám částku úschovy v etheru a jeho adresu, můžeme s touto funkcí zavést novou smlouvu:

V podstatě vytvoříte instanci smlouvy s abi a provedete metodu .new () pro tuto smlouvu s bytecode.

Poté se při zpětném volání zobrazí chyba, pokud existuje, a výsledný objekt. Výsledný objekt bude obsahovat .adresu smlouvy nasazené při zpracování transakce horníky.

Což znamená, že toto zpětné volání bude provedeno 2krát. Jeden, když provedete vytvoření smlouvy, druhý, když je k dispozici adresa této smlouvy.

Kdykoli je k dispozici adresa smlouvy, můžete zkontrolovat jednoduchý příkaz if:

if (! result.address) {
    // Zahájení vytváření smlouvy
} jinde {
    // Smlouva byla nasazena a můžete použít adresu s result.address
}

Takto nasadíte smlouvu s web3.

Ale co když chcete získat přístup ke stávající smlouvě o blockchainu?

To je přesně to, co musíme „připojit“ ke kostkové hře, abychom vytvořili instanci smlouvy. Za tímto účelem potřebujeme pouze ABI a adresu smlouvy, bytecode není nutný. Postupujte takto:

Smlouva = web3.eth.contract (abi)
contractInstance = Contract.at (addressSelected)

Poté můžete vykonávat funkce této smlouvy takto:

contractInstance.setupPlayer2 ({
  value: web3.toWei (valueSelected),
  plyn: 4e6
}, (err, result) => {
    // Po provedení funkce něco udělejte
})

Potřebujete pouze instanci, název funkce, parametry, pokud existují, a funkci zpětného volání.

Nyní, když rozumíte tomu, jak nasazení a okamžité řešení inteligentní smlouvy funguje na javascriptu, vám ukážu úplný kód aplikace:

Ignorujte vše výše, na co se musíte zaměřit, je v bloku posluchače „# button-pokračovat“:

document.querySelector ('# button-pokračovat'). addEventListener ()

Protože se musíte starat pouze o to, co se stane, když hráč 1 nebo hráč 2 kliknou na tlačítko „Pokračovat“. Zde je rozpis:

  • Když kterýkoli hráč klikne na toto tlačítko, bude tento posluchač událostí spuštěn
  • Uvnitř získávám hodnoty vstupů pro nastavení úschovy a adresy rozložené smlouvy, pokud se hráč připojuje k existující hře. To jsou proměnné valueSelected a addressSelected.
  • Pak vytvořím proměnnou nastavení kontraktu s abi, která bude potřebovat pro oba hráče.
  • Poté uvidím, zda je adresa nasazené smlouvy nastavena či nikoli. Pokud je adresa prázdná, znamená to, že hráč klikl na „Zahájit novou hru“, protože v tom případě neuvidí zadanou adresu.
  • Což znamená, že implementuji novou hru nebo inteligentní smlouvu pro tohoto hráče s vybranou úschovou.
  • První hráč uvidí nasazenou adresu inteligentní smlouvy. Aby začal hrát s kostkami, bude muset tuto adresu sdílet s druhým hráčem, protože potřebujete 2 hráče.
  • Pokud zadal adresu, znamená to, že se chce připojit ke stávající hře. Můžeme to udělat vytvořením instance inteligentní smlouvy pomocí její adresy a poté provedením funkce setupPlayer2 ().
  • Pomocí funkce setInterval kontroluji každou 1 sekundu, zda bylo nastavení hráče 2 dokončeno nebo nezačalo hru.

Skvělý! Pokud se vám to podařilo, znamená to, že jste odhodláni a že se něco skutečně učíte. Nejlepší část je blíž, než si myslíte. V dalším článku uvidíte, jak vytvořit stavové kanály pro vaši hru v javascriptu a vytvořit škálovatelnou decentralizovanou aplikaci Ethereum.

Nenechte si ujít a buďte první, kdo si jej přečte, až bude dokončen. Připojte se k mému exkluzivnímu seznamu adresátů Ethereum Developers a dostávejte aktualizace a informace přímo ode mě zde: http://eepurl.com/dDQ2yX

Část 2 je nyní k dispozici zde: https://medium.com/@merunasgrincalaitis/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step- 690f71a9bf2f

Pokud se cítíte ohromeni takovými vyspělými informacemi nebo jste právě nováčkem solidivity a Ethereum dapps, podívejte se do mé knihy „Ethereum Developer: Learn Solidity From Scratch“ zde https://merunas.io/