Как да създадете мащабируем dApps и интелигентни договори в Ethereum с държавни канали стъпка по стъпка. Част 1

Има много различни решения за създаване на децентрализирани приложения, които мащабират до хиляди или дори милиони потребители в реално време, като плазмени и държавни канали. В това ръководство ще научите стъпка по стъпка как работят държавните канали и как да създавате мащабируеми приложения в Ethereum в момента.

Не е нужно да чакате бъдещи подобрения в blockchain. Технологията е тук, за да остане и можете да я използвате за създаване на всички видове dApps. В момента държавните канали се използват най-вече за базирани на blockchain игри в Ethereum.

Помислете хазарт с криптовалути. Има начини за криптиране на информацията, за да я разкрием по-късно, което е ключов момент в тази система.

Какво представляват държавните канали?

Това е мащабиращо решение за създаване на децентрализирани приложения и интелигентни договори, които могат да бъдат използвани от милиони потребители в почти реално време. Те работят, като инициират канал между 2 или повече потребители, в който обменят криптирани, подписани съобщения с информацията за транзакцията, която искат да извършат.

Те се наричат ​​"състояние", защото всяко взаимодействие трябва да има състояние, което може да се актуализира. Помислете за резултат от игра или банков баланс.

Защо съществуват?

Държавните канали бяха създадени, защото приложенията на ethereum бързо нараснаха с популярността си, правейки блокчейн неизползваем, тъй като той беше разработен с умерена употреба. Те позволяват непрекъснати транзакции, без да плащат за газ или чакат миньорите да обработят транзакциите.

Което означава безплатни и бързи транзакции.

Какво трябва да настроим канал за състоянието?

  1. Поне 2 потребители, които ще си взаимодействат помежду си. Трябва да се отвори канал между 2 или повече потребители. Подобно на приложение за чат.
  2. Умен договор с логиката на държавния канал, който ще го отвори и затвори.
  3. Ако държавният канал ще бъде използван в играта, ще е необходимо дескроу за двамата потребители. Това ескроу в етер ще бъде запазено в интелигентния договор при отваряне на канала.
  4. Приложение за JavaScript, което ще генерира подписаните съобщения, които ще бъдат обменяни извън веригата между потребителите.
  5. Metamask или подобен инструмент за подписване на съобщения. Подписващите съобщения не струват газ и те се изпълняват моментално. Изисква се от двамата потребители да подпишат съобщенията, за да гарантират, че те са тези, генериращи такава транзакция.
  6. Изпратете имейл или всяко външно приложение за обмен на подписани съобщения, за да направите това приложение възможно.

Как работят?

Държавният канал е малко сложен за настройване, защото трябва да сте сигурни, че и двамата играчи са защитени в случай, че нещо се обърка, затова имаме нужда от интелигентен договор. Това са стъпките:

  1. В държавен канал между 2 потребители, първият разгръща интелигентния договор, който ще „отвори“ канала.
  2. Вторият изпълнява функция на този интелигентен договор за „присъединяване“ към този държавен канал “
  3. След това те могат да започнат да обменят подписани съобщения за приложението. И двамата потребители имат достъп до персонализирано javascript приложение за генериране на съобщения с информацията, която биха направили в интелигентен договор, но извън веригата.
  4. Скоростта на транзакциите зависи от това колко бързо всеки потребител може да създаде и подпише тези съобщения. Те продължават да обменят съобщения, играят извън веригата, докато не решат, че играта е приключила.
  5. Когато завършат играта, всеки от тях може да премине към интелигентния договор и да изпълни функция за довършването му, която ще започне фазата на „договаряне“.
  6. В тази фаза и двамата потребители имат изчакване от 1 ден, за да качат последните 2 съобщения, които имат към смарт договора. Интелигентният договор проверява най-новите съобщения и освобождава средствата за завършване на играта въз основа на тази информация. Всяко съобщение съдържа резултатите от предишните взаимодействия, така че е безопасно да проверите най-новите.

Как можете да приложите това в реална ситуация?

В това ръководство ще ви покажа как да създадете канал за състоянието между двама потребители за Ethereum игра. Не забравяйте, че държавните канали могат да се използват за всякакъв вид приложения, които имат "състояние" или брояч. Ето защо игрите са идеални. Тъй като можете да проследявате кой печели всяка игра, има състояние за всяка игра, която може да бъде актуализирана.

Ще създадем игра с зарове, при която играч 1 избира номера на зарове, който ще излезе, а играч 2 трябва да отгатне това число, за да спечели. Те ще могат да играят колкото се може повече игри, без да се налага да изпълняват транзакции на blockchain. Ще имаме и уеб приложение, което да показва интерфейса.

Това е индексът, който ще следваме, за да създадем такова децентрализирано приложение:

  1. Създаване на визуалното уеб приложение. Това е интерфейсът, как ще изглежда играта на външни потребители. Той ще бъде използван като средство за обмен на подписани съобщения за държавни канали.
  2. Създаване на функционалности, необходими за подписване и криптиране на съобщения.
  3. Създаване на интелигентния договор.

1. Създаване на визуалното уеб приложение

Преди дори да започна с кода, искам да се уверя, че изясняваме пълните детайли на уеб приложението. Как ще изглежда, какъв е фокусът на вниманието.

В този случай искаме да покажем подобни неща и за двамата играчи. Играч 1 ще види 6-те лица на зарове като изображения и той ще трябва да избере кое от тях ще излезе, а след това вторият играч, също ще трябва да избира между тези лица и той ще може да види резултата.

Така че рамката ще бъде нещо подобно:

  1. Играч 1 отива в уеб приложението, кликва върху бутон с надпис „Започнете нова игра“, след което прави транзакция с метамаска, за да разгърне и настрои смарт договора. Той получава интелигентен адрес на договора, който може да изпрати на другия играч, за да започне играта.
  2. Играч 2 отива в уеб приложението, кликва върху бутон с надпис „Присъединете се към съществуваща игра“ с адреса на договора, получен от играч 1, след което прави транзакция с метамаска, за да настрои вече съществуващата игра и изпраща ескроу.

Така че нека започнем оттам. Нека създадем поле в средата на уеб приложението с 2 бутона. Създайте папка, наречена зарове и файл вътре, наречен index.html. Ето кода:

Ето как изглеждат по подразбиране 2 бутона


    <Глава>
        
         Игра с ефириум за зарове 
    
    <Тяло>
        
                                       

В този код току-що създадох основната HTML структура с div, съдържащ бутоните и заглавието. Обърнете внимание, че div има клас, наречен main-content, който ще използваме за момент.

Нека направим това по-красиво с малко css. Създайте файл, наречен index.css, със следния код (можете да го копирате и поставите):

Ето как ще изглежда това
тяло {
    семейство шрифтове: sans-serif;
}
.главно съдържание {
    марж: автоматично;
    максимална ширина: 500px;
    цвят на фона: бял шум;
    подплънки: 50px;
    граница-радиус: 10px;
    дисплей: решетка;
    решетка-шаблон-редове: 1fr 1fr;
    решетка-шаблон-колони: 1fr 1fr;
    решетка-колона-празнина: 10px;
}
.main-content h1 {
    решетка-колона: 1 / педя 2;
}
. бутона за главно съдържание {
    граница: няма;
    цвят: бял;
    цвят на фона: # 007dff;
    подплънки: 20px;
    граница-радиус: 5px;
    курсор: указател;
}
. бутона за основно съдържание: задръжте курсора {
    непрозрачност: 0,8;
}
. бутона за основно съдържание: активен {
    непрозрачност: 0,6;
}

Добавих h1 заглавие към html, за да изглежда по-добре, не забравяйте да актуализирате вашия html, като добавите линка към css:



    <Глава>
        
        
         Игра с ефириум за зарове 
    
    <Тяло>
        
            

Ethereum Dice

                                       

Може би сте забелязали, че използвам новата css решетка. Това е така, защото той е достъпен най-вече за големите браузъри, така че е доста безопасно да го използвате в този момент, тъй като повечето хора ще виждат css правилно.

Реших, че най-добрият начин за показване на следващото действие, изисквано от потребителя, е да се покаже div в javascript с необходимата информация. Така че, когато щракне върху „Започнете нова игра“, той ще види поле, в което ще го попита колко ескроу иска да настрои за играта.

Щраква върху „Присъединете се към съществуващата игра“, ще бъде поискан адрес за ескроу и договор на съществуващата игра.

Ето как ще реагират действията с бутоните:

Как изглежда приложението с обикновен javascript

За да направя това възможно, създадох файл index.js с известна javascript логика. Ето javascript, не забравяйте да го напишете с ръце, ако искате да научите по-добре това:

Нека обясня какво направих там:

  • Първо създадох функция, наречена start (), която ще бъде изпълнена незабавно, за да обвива съдържанието, така че да е хубаво и да се съдържа в една голяма функция.
  • Тогава създадох 2 слушатели на събития, които се активират всеки път, когато щракнете върху бутоните за стартиране или присъединяване в html файла. Една за бутона # нова игра и друга за бутона за # присъединяване към играта. Използвам document.querySelector (), който е един от най-мощните начини да изберете нещо във вашия js код.
  • Вътре в тези слушатели показвам или скривам полето на div на всеки съответен елемент. Основно избор на полето с querySelector и премахване или добавяне на скрития клас, който е инсталиран в css за показване: няма; ,

Тогава можем да свържем js файла с нашия modifie index.html:



    <Глава>
        
        
         Игра с ефириум за зарове 
    
    <Тяло>
        
            

Ethereum Dice

                         
            
                

Колко escrow ще използвате в ETH?

                             
            
                

Какъв е интелигентният адрес на договора на съществуващата игра?

                             
            
        
        
    

Укрепих новите части от кода, добавени. Следва актуализираното css за стил на новата информация:

тяло {
    семейство шрифтове: sans-serif;
}
.hidden {
    дисплей: няма;
}
.главно съдържание {
    марж: автоматично;
    максимална ширина: 500px;
    цвят на фона: бял шум;
    подплънки: 50px;
    граница-радиус: 10px;
    дисплей: решетка;
    решетка-шаблон-редове: 1fr 80px автоматично;
    решетка-шаблон-колони: 1fr 1fr;
    решетка-колона-празнина: 10px;
}
.main-content h1 {
    решетка-колона: 1 / педя 2;
}
. бутона за главно съдържание {
    граница: няма;
    цвят: бял;
    цвят на фона: # 007dff;
    подплънки: 20px;
    граница-радиус: 5px;
    курсор: указател;
}
. бутона за основно съдържание: задръжте курсора {
    непрозрачност: 0,8;
}
. бутона за основно съдържание: активен {
    непрозрачност: 0,6;
}
. бутона за основно съдържание: деактивиран {
    непрозрачност: 0,5;
    цвят на фона: сив;
    курсор: автоматично;
}
.main-content input {
    ширина: 100%;
    граница-радиус: 10px;
    подплънки: 10px;
    граница: 1px твърд светлосив цвят;
}
.main-content div.new-game-setup, .main-content div.join-game-setup {
    решетка-колона: 1 / педя 2;
}
# бутон-продължете {
    решетка-колона: 1 / педя 2;
    марж-отгоре: 20px;
}

Бутонът „Продължи“ в момента не прави нищо, така че нека да създадем тази функционалност, за да разгърнем нов интелигентен договор и да отворим държавния канал, когато потребителят иска да създаде нова игра в следващия раздел.

2. Създаване и свързване на първоначалния смарт договор

Време е да създадете основна версия на интелигентния договор и да го свържете със своя JavaScript с помощта на web3.js. Засега се нуждаем само от конструктора и малко основна информация. Запишете този код със собствените си ръце в нов файл, наречен Dice.sol:

плътност на прагмата 0.4.25;
договор Dice {
    адрес публичен играч1;
    адрес public player2;
    uint256 public player1Escrow;
    uint256 public player2Escrow;
    конструктор () публично платимо {
        изисквам (msg.value> 0);
        player1 = msg.sender;
        player1Escrow = msg.value;
    }
    функция setupPlayer2 () публично платимо {
        изисквам (msg.value> 0);
        player2 = msg.sender;
        player2Escrow = msg.value;
    }
}

Има 2 функции, конструктора за настройка на адреса и дескрипцията на първия играч и функцията setupPlayer2 () за настройка на информацията на втория играч.

Искаме да разгърнем договора и да изпълним конструктора с посочената msg.value права, когато потребителят натисне бутона „Продължи“. За да направим това, ще трябва да приложим web3.js в нашия интелигентен договор. Тъй като това е основният начин за комуникация с blockchain в браузъра.

Вземете web3.js в папката на приложението си от тук: https://github.com/ethereum/web3.js/blob/develop/dist/web3.js, който е официалният, актуализирайте кода за разпространение.

За да го изтеглите за вашия проект, отидете на тази връзка, щракнете върху суров, за да видите пълния код и копирайте кода, за да го поставите в нов файл, наречен web3.js във вашата папка на проекта:

Отворете страницата, кликнете върху „сурово“, изберете всички с ctrl + a, копирайте кода и го поставете в нов файл във вашия проект, наречен web3.js

Не е нужно наистина да правите това, ако използвате метамаска, тъй като метамаската инжектира версия на web3.js за вас, но е полезно библиотеката на web3 във вашия проект да взаимодейства с blockchain, ако метамаската не е налична.

Използваме метамаска, за да говорим с blockchain. Това обаче не работи, когато отворите файл index.html в браузъра си, тъй като разширението file: // не се поддържа за метамаска.

След това трябва да стартираме локален сървър, който ще обслужва файловете на http: // localhost: 8080 URL, тъй като метамаската не работи, когато директно отворите файла index.html. За целта отворете терминала и инсталирайте това:

npm i -g http-сървър

След това в папката на вашия проект изпълнете http-сървър, за да стартирате локален сървър за вашия index.html:

HTTP сървър

Това ще обслужва файловете в localhost: 8080, така че да имате достъп до тях и да инжектирате web3 от метамаска.

Като изключим това, нека се съсредоточим върху изпълнението на договора, който току-що създадохме от нашето уеб приложение, точно когато потребителят кликне върху „Продължи“.

За да разгърнем нов договор се нуждаем от ABI, параметрите на конструктора и байтовия код. Това са изискванията за web3.js.

  1. За да генерирате ABI, отидете на remix.ethereum.org, поставете кода си в главния раздел и кликнете върху ABI:

Това ще копира ABI кода. Отидете в папката на вашия проект и създайте файл, наречен contractData.js, за да поставите кода там с променлива, наречена abi, така:

2. Сега имаме нужда от байт код на вашия смарт договор. Байтовият код е съставеният интелигентен договор, който ще бъде разгърнат в blockchain, тази информация ни трябва, за да можем да я разгърнем. За да получите отново байта кода да ремиксира и кликнете върху този бутон:

Бутонът за копиране на байт код за вашия код

И създайте друга променлива вътре в ContraData.js, наречена байт код с тази информация, така:

Можете да копирате същия код, ако умният ви договор е точно като този, който създадох по-горе.

Импортирайте този JavaScript файл във вашия html преди файла index.js, за да имате променливи abi и bytecode:

Преди да създадем договора на javascript, трябва да добавим слушател на събитие към бутона за продължаване на секцията „Стартиране на нова игра“:

Това, което направих там, е:

  • Добавих идентификационен номер на идентификатор към входовете, където потребителят е питан колко етер иска да въведе в дескроу и адреса на договора, ако се присъедини към съществуваща игра.
  • След това добавих javascript import по-горе index.js, защото искаме да имаме достъпните аби и байт-код в index.js, тъй като първо трябва да бъде импортиран.

След това добавяме необходимата логика, за да работи този бутон. Ще проверим дали въвеждането на адреса на договора в HTML е празен или не.

Ако тя не е празна, ще предположим, че играчът започва нова игра, което е интересно, което ви позволява да стартирате игра, като използвате бутона за присъединяване, ако оставите адреса празен.

Преди да ви покажа целия код, искам да ви обясня как да разгърна договор с помощта на web3.js. Изглежда просто, но се забих в някои области.

Така че, когато потребителят кликне върху „Стартирайте нова игра“, той ни дава сумата за дескрипция в етер и неговия адрес, можем да разгърнем нов договор с тази функция:

По същество създавате екземпляра на договор с abi и изпълнявате метода .new () за този договор с байтовия код.

След това при обратния разговор получавате грешка, ако има такава, и резултат от обекта. Резултатният обект ще съдържа. Адреса на договора, разгърнат, когато транзакцията се обработва от миньорите.

Което означава, че този обратен разговор ще бъде изпълнен 2 пъти. Една, когато изпълните изпълнението на договора, и друга, когато адресът на този договор е наличен.

Можете да проверите кога е наличен адресът на договора с просто изявление if:

ако (! резултат.адрес) {
    // Започва създаването на договора
} else {
    // Договорът е разгърнат и можете да използвате адреса с result.address
}

Ето как разгърнете договор с web3.

Но какво ще стане, ако искате да получите достъп до съществуващ договор на blockchain?

Точно това е необходимо, за да се „присъединим“ към игра с зарове, за да създадем екземпляр на договор. За целта се нуждаем само от ABI и адреса на договора, байт кодът не е необходим. Ето как го правите в web3:

Договор = web3.eth.contract (abi)
contractInstance = Contract.at (addressSelected)

След това можете да изпълнявате функции на този договор така:

contractInstance.setupPlayer2 ({
  стойност: web3.toWei (valueSelected),
  газ: 4e6
}, (грешка, резултат) => {
    // Направете нещо след изпълнение на функцията
})

Трябва ви само инстанцията, името на функцията, параметрите, ако има такива, и функцията за обратно извикване.

След като разбрах как функционирането и създаването на интелигентен договор работи на JavaScript, ще ви покажа пълния код на приложението:

Игнорирайте всичко по-горе. Това, върху което трябва да се съсредоточите, е в блока на слушателя „# бутона-продължение“:

document.querySelector ( "# бутон-продължи"). addEventListener ()

Защото трябва да се интересувате само от това какво се случва, когато играч 1 или играч 2 натиснете бутона „Продължи“. Ето разбивката:

  • Когато някой играч кликне върху този бутон, слушателят на това събитие се изпълнява
  • Вътре получавам стойностите на входовете за настройка на escrow и адреса на разгърнатия договор, ако играчът се присъедини към съществуваща игра. Това са променливите valueSelected и addressSelected.
  • Тогава създавам променливата за настройка на договора с abi, която ще е необходима и за двамата играчи.
  • След това виждам дали адресът на разгърнатия договор е зададен или не. Ако адресът е празен, това означава, че играчът е кликнал върху „Започнете нова игра“, тъй като в този случай той няма да вижда адреса.
  • Което означава, че използвам нова игра или интелигентен договор за този играч с избрания escrow.
  • Този първи играч ще види адреса на интелигентния договор. Той ще трябва да сподели този адрес с другия играч, за да започне игра с зарове, тъй като имате нужда от двама играчи.
  • Ако е предоставил адрес, това означава, че иска да се присъедини към съществуваща игра. Можем да направим това, като създадем инстанция на смарт договора, използвайки адреса му и след това изпълни функцията setupPlayer2 ().
  • Използвам функцията setInterval, за да проверя на всеки 1 секунда дали настройката на плейъра 2 е завършена или не, за да започне играта.

Страхотен! Ако сте го направили досега, това означава, че сте ангажирани и че всъщност научавате нещо. Най-добрата част е по-близо, отколкото си мислите. В следващата статия ще видите как да създадете държавни канали за вашата игра в JavaScript, за да създадете мащабируемо децентрализирано приложение Ethereum.

Не пропускайте и бъдете първият, който го прочете, когато приключи. Присъединете се към моя изключителен списък с пощенски адреси на Ethereum Developers, за да получавате актуализации и информация директно от мен тук: http://eepurl.com/dDQ2yX

Част 2 вече е налична тук: https://medium.com/@merunasgrincalaitis/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step- 690f71a9bf2f

Ако се чувствате затрупани с подобна усъвършенствана информация или просто сте новак за солидността и Ethereum dapps, проверете книгата ми „Ethereum Developer: Learn Solidity from Scratch“ тук https://merunas.io/