Како креирати скалабилне дАппс и паметне уговоре у Етхереум-у са државним каналима корак по корак. Део 1

Постоји пуно различитих решења за креирање децентрализованих апликација које досежу хиљаде или чак милионе корисника у стварном времену, попут плазме и државних канала. У овом водичу ћете научити корак по корак како државни канали раде и како да одмах креирате скалабилне апликације у Етхереуму.

Не треба чекати будућа побољшања у блоцкцхаину. Технологија је ту да остане и можете да је користите за стварање свих врста дАппс-а. Тренутно се државни канали углавном користе за игре базиране на блоцкцхаин-у у Етхереуму.

Замислите коцкање са крипто валутама. Постоје начини за шифрирање информација да бисте их касније откривали што је кључна тачка овог система.

Шта су државни канали?

То је решење за скалирање за стварање децентрализованих апликација и паметних уговора које милиони корисника могу да користе у готово стварном времену. Они раде тако што иницирају канал између 2 или више корисника на којима размењују шифроване, потписане поруке са информацијама о трансакцији коју желе да изврше.

Називају их „државама“, јер свака интеракција мора имати стање које се може ажурирати. Размислите о резултатима игре или стања у банци.

Зашто они постоје?

Државни канали су створени јер су етхереум апликације брзо порасле популарност чинећи блоцкцхаин неупотребљивим јер је развијен са умереном употребом. Омогућују континуиране трансакције без плаћања плина или чекања да рудари обраде трансакције.

Што значи бесплатне и брзе трансакције.

Шта нам је потребно да бисмо поставили државни канал?

  1. Најмање 2 корисника који ће међусобно комуницирати. Канал треба отворити између 2 или више корисника. Слично као за чет апликацију.
  2. Паметан уговор с логиком државног канала који ће га отворити и затворити.
  3. Ако ће се државни канал користити у игри, бит ће потребан есцров за оба корисника. Тај есцров у етеру биће сачуван у паметном уговору приликом отварања канала.
  4. Јавасцрипт апликација која ће генерисати потписане поруке које ће се размењивати ван мреже.
  5. Метамаска или сличан алат за потписивање порука. Поруке за потписивање не коштају бензин и спроводе се одмах. Оба корисника захтевају да потпишу поруке како би гарантовали да су ти који генеришу такву трансакцију.
  6. Пошаљите е-пошту или било коју спољну апликацију за размену потписаних порука како бисте омогућили ту апликацију.

Како функционишу?

Државни канал је мало сложен за постављање, јер морате бити сигурни да су оба играча заштићена у случају да нешто пође по злу, зато нам треба паметан уговор. Ово су кораци:

  1. У државном каналу између два корисника, први разрађује паметни уговор који ће „отворити“ канал.
  2. Други извршава функцију паметног уговора да се "придружи" том државном каналу "
  3. Тада могу започети размјену потписаних порука за апликацију. Оба корисника имају приступ прилагођеној јавасцрипт апликацији за генерисање порука са информацијама које би радили паметним уговором, али ван ланца.
  4. Брзина трансакција зависи од тога колико брзо сваки корисник може да креира и потпише те поруке. Стално размјењују поруке, играју се изван ланца док не одлуче да је игра готова.
  5. Када заврше игру, било ко од њих може прећи на паметни уговор и извршити функцију да га доврши, чиме ће започети фаза „преговора“.
  6. У овој фази, оба корисника имају временски период од 1 дана да учитају последње 2 поруке које имају на паметни уговор. Паметни уговор провјерава најновије поруке и ослобађа средства за завршетак игре на основу тих информација. Свака порука садржи резултате претходних интеракција, тако да је сигурно само проверити најновије.

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

У овом водичу ћу вам показати како да креирате државни канал између 2 корисника за Етхереум игру. Запамтите да се државни канали могу користити за било коју апликацију која има „стање“ или бројач. Зато су игре идеалне. Будући да можете пратити ко побеђује у свакој игри, постоји стање за сваку игру које се може ажурирати.

Направит ћемо игру с коцкицама у којој играч 1 одабире број коцкица који ће се испасти, а играч 2 мора погодити тај број да би освојио. Они ће моћи да играју онолико игара колико желе без да извршавају трансакције на блоцкцхаину. Имаћемо и веб апликацију за приказивање интерфејса.

Ово је индекс који ћемо пратити да бисмо креирали такву децентрализовану апликацију:

  1. Креирање визуелне веб апликације. Ово је интерфејс, како ће игра изгледати спољним корисницима. Користиће се као медиј за размену потписаних порука за државне канале.
  2. Стварање функционалности потребних за потписивање и шифровање порука.
  3. Стварање паметног уговора.

1. Израда визуелне веб апликације

Пре него што започнем с кодом, желим да разјаснимо све детаљне детаље веб апликације. Како ће то изгледати, шта је фокус пажње.

У овом случају желимо приказати сличне ствари за оба играча. Играч 1 видеће 6 лица коцкица као слике и мораће да одабере оно које ће изаћи, а затим други играч, такође ће морати да бира између тих лица и моћи ће да види резултат.

Дакле, оквир ће бити овако:

  1. Играч 1 одлази у веб апликацију, кликне на дугме на коме пише "Покрени нову игру", а затим изврши трансакцију метамаске за распоређивање и подешавање паметног уговора. Добија паметну адресу уговора коју може послати другом играчу да започне игру.
  2. Плаиер 2 иде у веб апликацију, кликне на дугме на којем пише „Придружите се постојећој игри“ са адресом уговора примљеном од играча 1, а затим изврши трансакцију метамаске да постави већ постојећу игру и пошаље детекцију.

Па кренимо тамо. Креирајмо оквир усред веб апликације са 2 дугмета. Направите фасциклу која се зове коцкица и датотеку унутар која се зове индек.хтмл. Ево код:

Тако два подразумевано изгледају два дугмета

<хтмл ланг = "ен" дир = "лтр">
    <хеад>
        <мета цхарсет = "утф-8">
        <титле> Игра са коцкицама етхереум 
    
    <боди>
        <див цласс = "маин-цонтент">
            <буттон> Започните нову игру 
            <буттон> Придружите се постојећој игри 
        
    

У том коду управо сам створио основну ХТМЛ структуру са див-ом који садржи дугмад и наслов. Имајте на уму да див има класу која се зове главни садржај коју ћемо користити у трену.

Учинимо то лепшим са неким цсс-ом. Направите датотеку која се зове индек.цсс са следећим кодом (можете је копирати и залепити):

Ево како ће то изгледати
тело {
    породица фонтова: санс-сериф;
}
.главни садржај {
    маржа: ауто;
    мак-видтх: 500пк;
    позадинска боја: вхитесмоке;
    паддинг: 50пк;
    обруб границе: 10пк;
    дисплеј: решетка;
    грид-темплате-ровс: 1фр 1фр;
    грид-темплате-ступци: 1фр 1фр;
    грид-цолумн-гап: 10пк;
}
.маин-цонтент х1 {
    решетка-ступац: 1 / распон 2;
}
.маин-цонтент тастер {
    граница: нема;
    бела боја;
    позадинска боја: # 007дфф;
    паддинг: 20пк;
    обруб границе: 5пк;
    показивач: показивач;
}
тастер .маин-цонтент: задржите показивач {
    непрозирност: 0,8;
}
тастер главни садржај: активан {
    непрозирност: 0,6;
}

У ХТМЛ сам додао х1 наслов да бих изгледао боље, будите сигурни да ажурирате хтмл додавањем везе на цсс:


<хтмл ланг = "ен" дир = "лтр">
    <хеад>
        <мета цхарсет = "утф-8">
        <линк рел = "стилесхеет" хреф = "индек.цсс">
        <титле> Игра са коцкицама етхереум 
    
    <боди>
        <див цласс = "маин-цонтент">
            <х1> Етхереум коцкице 
            <буттон> Започните нову игру 
            <буттон> Придружите се постојећој игри 
        
    

Можда сте приметили да користим нову цсс мрежу. То је зато што је углавном доступан за велике прегледаче, тако да је у овом тренутку сасвим сигурно користити јер ће већина људи правилно видети цсс.

Одлучио сам да је најбољи начин да се следећа радња тражи од корисника приказивање див у јавасцрипту са потребним информацијама. Дакле, кад кликне на „Покрени нову игру“, видеће кутију у којој га питају колико депоновања жели да постави за игру.

Ако кликне на „Придружи се постојећој игри“, од њега ће се тражити адреса за депоновање и уговор постојеће игре.

Ево како ће реаговати акције дугмета:

Како апликација изгледа помоћу јавасцрипта

Да бих то омогућио створио сам датотеку индек.јс са неком ЈаваСцрипт логиком. Ево јавасцрипта, обавезно га откуцајте рукама ако желите да ово боље научите:

Дозволите ми да објасним шта сам тамо урадио:

  • Прво сам створио функцију која се зове старт () која ће се одмах извршити тако да замота садржај тако да буде леп и садржан у једној великој функцији.
  • Тада сам креирао 2 слушаоца догађаја који се активирају кад год кликнем на дугме за покретање или придруживање у хтмл датотеци. Један за дугме # нова игра и други за дугме # придруживање игри. Користим доцумент.куериСелецтор () који је један од најмоћнијих начина да одаберете било шта у вашем јс коду.
  • Унутар тих слушалаца показујем или сакривам оквир див сваког одговарајућег елемента. У основи одабир оквира са куериСелецтор-ом и уклањање или додавање класе скривене која се у цсс-у поставља за приказ: ноне; .

Тада можемо повезати јс датотеку са нашим модифие индек.хтмл:


<хтмл ланг = "ен" дир = "лтр">
    <хеад>
        <мета цхарсет = "утф-8">
        <линк рел = "стилесхеет" хреф = "индек.цсс">
        <титле> Игра са коцкицама етхереум 
    
    <боди>
        <див цласс = "маин-цонтент">
            <х1> Етхереум коцкице 
            <буттон ид = "нев-гаме"> Покрени нову игру 
            <буттон ид = "придружи се игри"> Придружите се постојећој игри 
            <див цласс = "скривена нова игра-подешавање">
                <х3> Колико ескрупа ћете користити у ЕТХ? 
                <инпут типе = "нумбер" плацехолдер = "2 ...">
            
            <див цласс = "подешавање скривене придруживања игри">
                <х3> Која је паметна адреса уговора постојеће игре? 
                <инпут типе = "тект" плацехолдер = "0к38дфј39 ...">
            
            <буттон ид = "дугме-настави" цласс = "скривено"> Настави 
        
        <сцрипт срц = "индек.јс"> 
    

Ја сам подебљао нове делове кода који су додани. Следи ажурирани цсс за стил нових информација:

тело {
    породица фонтова: санс-сериф;
}
.сакривен {
    дисплеј: ниједан;
}
.главни садржај {
    маржа: ауто;
    мак-видтх: 500пк;
    позадинска боја: вхитесмоке;
    паддинг: 50пк;
    обруб границе: 10пк;
    дисплеј: решетка;
    грид-темплате-ровс: 1фр 80пк аутоматски;
    грид-темплате-ступци: 1фр 1фр;
    грид-цолумн-гап: 10пк;
}
.маин-цонтент х1 {
    решетка-ступац: 1 / распон 2;
}
.маин-цонтент тастер {
    граница: нема;
    бела боја;
    позадинска боја: # 007дфф;
    паддинг: 20пк;
    обруб границе: 5пк;
    показивач: показивач;
}
тастер .маин-цонтент: задржите показивач {
    непрозирност: 0,8;
}
тастер главни садржај: активан {
    непрозирност: 0,6;
}
тастер главни садржај: онемогућен {
    непрозирност: 0,5;
    боја позадине: сива;
    показивач: ауто;
}
.маин-цонтент инпут {
    ширина: 100%;
    обруб границе: 10пк;
    паддинг: 10пк;
    обруб: 1пк чврста светлост;
}
.маин-цонтент див.нев-гаме-сетуп, .маин-цонтент див.јоин-гаме-сетуп {
    решетка-ступац: 1 / распон 2;
}
# дугме-настави {
    решетка-ступац: 1 / распон 2;
    маргин-топ: 20пк;
}

Тренутно дугме „Настави“ не ради ништа, па створимо ту функцију за увођење новог паметног уговора и отварање државног канала када корисник жели да креира нову игру у следећем одељку.

2. Стварање и повезивање почетног паметног уговора

Време је да направите основну верзију паметног уговора и повежете је са вашим ЈаваСцриптом помоћу веб3.јс. За сада су нам потребни само конструктор и неке основне информације. Запишите овај код властитим рукама у нову датотеку под називом Дице.сол:

прагма солидити 0.4.25;
уговор Дице {
    адреса јавног играча1;
    адреса јавног играча2;
    уинт256 публиц плаиер1Есцров;
    уинт256 публиц плаиер2Есцров;
    плаће конструктора ()
        захтијевају (мсг.валуе> 0);
        плаиер1 = мсг.сендер;
        плаиер1Есцров = мсг.валуе;
    }
    функција сетупПлаиер2 () плаћа се јавно {
        захтијевају (мсг.валуе> 0);
        плаиер2 = мсг.сендер;
        плаиер2Есцров = мсг.валуе;
    }
}

Постоје две функције, конструктор за подешавање адресе и депоновање првог играча и функција сетупПлаиер2 () за подешавање информација другог играча.

Желимо да применимо уговор и извршимо конструктор са наведеним мсг.валуе десницом када корисник кликне дугме „Настави“. Да бисмо то урадили, мораћемо да имплементирамо веб3.јс у наш паметни уговор. Будући да је то главни начин комуникације са блоцкцхаин-ом на прегледачу.

Овде набавите веб3.јс у директоријуму апликација: хттпс://гитхуб.цом/етхереум/веб3.јс/блоб/девелоп/дист/веб3.јс који је званични, ажурирајте код дистрибуције.

Да бисте га преузели за свој пројекат, идите на ту везу, кликните на сирову датотеку да бисте видели цео код и копирајте га у нову датотеку звану веб3.јс унутар фасцикле пројекта:

Отворите страницу, кликните на

То заиста не треба да радите ако користите метамаску јер метамаск убризгава верзију веб3.јс за вас, али је корисно да веб3 библиотека у вашем пројекту делује у интеракцији са блоцкцхаином ако метамаска није доступна.

Користимо метамаску да разговарамо са блоцкцхаином. Међутим, то не ради када отворите датотеку индек.хтмл на свом прегледачу, јер датотека: // није подржана за метамаску.

Затим морамо покренути локални послужитељ који ће датотеке послуживати на хттп: // лоцалхост: 8080 урл јер метамаска не ради кад директно отворите датотеку индек.хтмл. Да бисте то учинили, отворите терминал и инсталирајте ово:

нпм и -г хттп-сервер

Затим у фасцикли пројекта извршите хттп-сервер да бисте покренули локални сервер за свој индек.хтмл:

хттп-сервер

То ће послужити датотеке на лоцалхосту: 8080 како бисте им могли приступити и убризгати веб3 из метамаске.

С тим да се усредсредимо, усредсредимо се на распоређивање уговора који смо управо креирали из наше веб апликације, и то управо када корисник кликне на „Настави“.

За имплементацију новог уговора потребни су нам АБИ, параметри конструктора и бајт код. То су услови за веб3.јс.

  1. Да бисте генерисали АБИ, идите на ремик.етхереум.орг, залепите код у главни део и кликните на АБИ:

То ће копирати АБИ код. Идите у фасциклу свог пројекта и направите датотеку звану цонтрацтДата.јс да бисте тамо залепили код са променљивом која се зове аби попут:

2. Сада нам треба бајт код вашег паметног уговора. Бајт код је састављени паметни уговор који ће бити распоређен у блоцкцхаин, потребне су нам те информације да бисмо га могли применити. Да бисте добили бајт код да се ремиксује поново и кликните на ово дугме:

Дугме за копирање бајт кода за ваш код

И створите још једну променљиву унутар цонтрацтДата.јс која се зове бајт код с тим информацијама попут:

Тај исти код можете копирати ако је ваш паметни уговор потпуно исти као онај који сам створио изнад.

Увозите ту ЈаваСцрипт датотеку у ваш хтмл пре датотеке индек.јс да бисте имали на располагању променљиве аби и бајт код:

<сцрипт срц = "цонтрацтДата.јс"> 
<сцрипт срц = "индек.јс"> 

Пре него што креирамо уговор на Јавасцрипт-у, морамо додати слушатеља догађаја у дугме за наставак у одељку „Покрени нову игру“:

Оно што сам тамо урадио је:

  • Улазима сам додао ИД-ове на којима се корисник пита колико етера жели да стави у депоновање и адресу уговора ако се придружи постојећој игри.
  • Потом сам изнад индекса.јс додао јавасцрипт импорт <сцрипт срц = "цонтрацтДата.јс> јер желимо да аби и бајт код буду доступни у индексу.јс, јер га прво морамо увести.

Затим додамо потребну логику да би то дугме функционисало. Проверићемо да ли је унос адресе уговора у ХТМЛ-у празан или не.

Ако није празна, претпоставит ћемо да играч започиње нову игру која вам је занимљиво, омогућава вам да започнете игру помоћу дугмета за придруживање ако адресу оставите празну.

Пре него што вам покажем целокупни код, желим да вам објасним како да примените уговор користећи веб3.јс. Изгледа једноставно, али заглавио сам у неким областима.

Дакле, када корисник кликне на „Покрени нову игру“, а он нам да износ есцров у етеру и његову адресу, можемо применити нови уговор са овом функцијом:

У суштини, креирате инстанцу уговора са аби-ом и извршавате метод .нев () за тај уговор с бајт-кодом.

Затим, у повратном позиву, добијате грешку ако постоји и објект резултата. Резултатни објекат ће садржати. Адресу уговора распоређену када трансакцију рудари обрађују.

Што значи да ће се овај повратни позив извршити 2 пута. Једна када извршите креирање уговора, а друга када је адреса тог уговора доступна.

Можете да проверите када је адреса уговора доступна једноставном иф:

иф (! резултат. адреса) {
    // Стварање уговора је започело
} елсе {
    // Уговор је распоређен и можете користити адресу са адресом резултата
}

Тако распоређујете уговор са веб3.

Али шта ако желите приступити постојећем уговору на блоцкцхаину?

Управо то је оно што нам је потребно да се „придружимо“ играма с коцкицама како бисмо створили инстанцу уговора. У ту сврху нам треба само АБИ и адреса уговора, бајт код није потребан. Ево како то урадите у веб3:

Уговор = веб3.етх.цонтрацт (аби)
цонтрацтИнстанце = Цонтрацт.ат (адреса изабрана)

Након тога можете извршити функције тог уговора на такав начин:

цонтрацтИнстанце.сетупПлаиер2 ({
  вредност: веб3.тоВеи (валуеСелецтед),
  гас: 4е6
}, (грешка, резултат) => {
    // Урадите нешто након извршења функције
})

Потребни су вам само инстанца, име функције, параметри ако постоје и функција повратног позива.

Сада када разумете како имплементација и инстанција паметног уговора функционише на Јавасцрипт-у, показаћу вам пуни код апликације:

Занемарите све горе, оно на што морате да се фокусирате налази се у блоку слушалице „# дугме-настави“:

доцумент.куериСелецтор ('# дугме-настави'). аддЕвентЛистенер ()

Јер вам је једино стало до тога што се догоди када играч 1 или играч 2 кликну на дугме 'Настави'. Ево поделе:

  • Када било који играч кликне на то дугме, слушалац овог догађаја се извршава
  • Изнутра добијам вредности улаза за подешавање депоновања и адресу распоређеног уговора ако се играч придружи постојећој игри. То су променљиве валуеСелецтед и аддрессСелецтед.
  • Тада креирам променљиву поставку уговора с аби-ом која ће бити потребна за оба играча.
  • Након тога видим да ли је постављена адреса распоређеног уговора или не. Ако је адреса празна, то значи да је играч кликнуо на "Покрени нову игру", јер у том случају неће видети унос адресе.
  • Што значи да распоредим нову игру или паметни уговор за тог играча са одабраним есцровом.
  • Тај први играч ће видети адресу распоређеног паметног уговора. Он ће морати да подели ту адресу са другим играчем да би започео игру с коцкицама јер су вам потребна два играча.
  • Ако је унео адресу, значи да жели да се придружи постојећој игри. То можемо учинити тако што ћемо створити инстанцу паметног уговора користећи адресу те затим извршити функцију сетупПлаиер2 ().
  • Користим функцију сетИнтервал да проверим сваке 1 секунде да ли је подешавање играча 2 завршено или не почиње игру.

Велики! Ако сте то успели до сада, то значи да сте предани и да нешто заиста учите. Најбољи део је ближи него што мислите. У следећем чланку видећете како да креирате државне канале за своју игру у ЈаваСцрипту да бисте креирали скалабилну Етхереум децентрализовану апликацију.

Не пропустите и будите први који ће га прочитати након завршетка. Придружите се мојој ексклузивној листи за слање Етхереум програмера да бисте овде добијали ажурирања и информације директно: хттп://еепурл.цом/дДК2иКс

Други део је сада доступан овде: хттпс://медиум.цом/@мерунасгринцалаитис/хов-то-цреате-сцалабле-даппс-анд-смарт-цонтрацтс-ин-етхереум-витх-стате-цханнелс-степ-би-степ- 690ф71а9бф2ф

Ако се осећате преплављеним таквим напредним информацијама или сте тек нови за солидност и Етхереум даппс, погледајте моју књигу „Етхереум Девелопер: Леарн Солидити фром Сцратцх“ овде хттпс://мерунас.ио/