Как создавать масштабируемые приложения dApps и умные контракты в Ethereum с помощью State Channels, шаг за шагом. Часть 1

Существует множество различных решений для создания децентрализованных приложений, которые масштабируются до тысяч или даже миллионов пользователей в реальном времени, таких как плазменные каналы и каналы состояния. В этом руководстве вы шаг за шагом узнаете, как работают каналы состояния и как создавать масштабируемые приложения в Ethereum прямо сейчас.

Вам не нужно ждать будущих улучшений в блокчейне. Технология здесь, чтобы остаться, и вы можете использовать ее для создания всевозможных приложений. Прямо сейчас государственные каналы в основном используются для основанных на блокчейне игр в Ethereum.

Подумайте, азартные игры с криптовалютами. Существуют способы шифрования информации для последующего ее раскрытия, что является ключевым моментом этой системы.

Что такое государственные каналы?

Это масштабируемое решение для создания децентрализованных приложений и интеллектуальных контрактов, которое может использоваться миллионами пользователей практически в режиме реального времени. Они работают, инициируя канал между 2 или более пользователями, в котором они обмениваются зашифрованными, подписанными сообщениями с информацией о транзакции, которую они хотят выполнить.

Они называются «состояние», потому что каждое взаимодействие должно иметь состояние, которое может быть обновлено. Думайте о счете игры или банковском балансе.

Почему они существуют?

Государственные каналы были созданы потому, что популярность приложений ethereum быстро выросла, что сделало блокчейн непригодным для использования, поскольку он был разработан с умеренным использованием. Они позволяют осуществлять непрерывные транзакции без оплаты за газ или ожидания майнеров для обработки транзакций.

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

Что нам нужно для настройки государственного канала?

  1. Как минимум 2 пользователя, которые будут взаимодействовать друг с другом. Канал должен быть открыт между 2 или более пользователями. Похоже на приложение чата.
  2. Умный контракт с логикой государственного канала, который будет открывать и закрывать его.
  3. Если в игре будет использоваться канал состояния, для обоих пользователей потребуется условное депонирование. Это условное депонирование в эфире будет сохранено в смарт-контракте при открытии канала.
  4. Приложение Javascript, которое будет генерировать подписанные сообщения, которые будут обмениваться между пользователями вне цепочки.
  5. Метаска или аналогичный инструмент для подписи сообщений. Подписание сообщений не требует затрат и выполняется мгновенно. От обоих пользователей требуется подписать сообщения, чтобы гарантировать, что именно они генерируют такую ​​транзакцию.
  6. Электронная почта или любое внешнее приложение для обмена подписанными сообщениями, чтобы сделать это приложение возможным.

Как они работают?

Государственный канал немного сложен в настройке, потому что вы должны обеспечить защиту обоих игроков на случай, если что-то пойдет не так, поэтому нам нужен умный контракт. Вот эти шаги:

  1. В канале состояния между двумя пользователями первый развертывает интеллектуальный контракт, который «открывает» канал.
  2. Второй выполняет функцию этого умного контракта, чтобы «присоединиться» к этому государственному каналу ».
  3. Затем они могут начать обмен подписанными сообщениями для приложения. Оба пользователя имеют доступ к пользовательскому приложению javascript для генерации сообщений с информацией, которую они будут делать в умном контракте, но вне цепочки.
  4. Скорость транзакций зависит от того, насколько быстро каждый пользователь может создавать и подписывать эти сообщения. Они продолжают обмениваться сообщениями, играя вне сети, пока не решат, что игра окончена.
  5. Когда они заканчивают игру, любой из них может перейти к умному контракту и выполнить функцию для его завершения, которая начнет фазу «переговоров».
  6. На этом этапе у обоих пользователей есть тайм-аут в 1 день для загрузки последних двух сообщений, которые у них есть, в смарт-контракт. Умный контракт проверяет последние сообщения и высвобождает средства для завершения игры на основе этой информации. Каждое сообщение содержит результаты предыдущих взаимодействий, поэтому можно просто проверить последние.

Как вы можете применить это в реальной ситуации?

В этом руководстве я покажу вам, как создать канал состояния между двумя пользователями для игры в Ethereum. Помните, что каналы состояния могут использоваться для любого вида приложений, которые имеют «состояние» или счетчик. Вот почему игры идеальны. Поскольку вы можете отслеживать, кто выигрывает в каждой игре, для каждой игры есть состояние, которое можно обновить.

Мы создадим игру в кости, в которой игрок 1 выбирает количество выпавших костей, а игрок 2 должен угадать это число, чтобы выиграть. Они смогут играть столько игр, сколько захотят, без необходимости выполнять транзакции на блокчейне. У нас также будет веб-приложение для отображения интерфейса.

Это индекс, по которому мы будем следовать, чтобы создать такое децентрализованное приложение:

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

1. Создание визуального веб-приложения

Прежде чем начинать с кода, я хочу убедиться, что мы прояснили все детали веб-приложения. Как это будет выглядеть, что находится в центре внимания.

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

Таким образом, фреймворк будет примерно таким:

  1. Игрок 1 заходит в веб-приложение, нажимает кнопку с надписью «Начать новую игру», затем он выполняет транзакцию метамаски для развертывания и установки смарт-контракта. Он получает адрес умного контракта, который он может отправить другому игроку, чтобы начать игру.
  2. Игрок 2 переходит в веб-приложение, нажимает кнопку с надписью «Присоединиться к существующей игре» с адресом контракта, полученным от игрока 1, затем он совершает транзакцию метамаски для настройки уже существующей игры и отправляет условное депонирование.

Итак, давайте начнем прямо там. Давайте создадим прямоугольник в центре веб-приложения с 2 кнопками. Создайте папку с именем dice и файл внутри с именем index.html. Вот код:

Вот так 2 кнопки выглядят по умолчанию


    <Голова>
        
         Игра Dice ethereum </ title>
    </ HEAD>
    <Тело>
        <div class = "main-content">
            <button> Начать новую игру </ button>
            <button> Присоединиться к существующей игре </ button>
        </ DIV>
    </ Body>
</ Html></pre><p>В этом коде я только что создал базовую структуру HTML с div, содержащим кнопки и заголовок. Обратите внимание, что у div есть класс main-content, который мы будем использовать в ближайшее время.</p><p>Давайте сделаем это красивее с помощью CSS. Создайте файл index.css со следующим кодом (вы можете скопировать и вставить его):</p><img alt="Вот как это будет выглядеть" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1576416098899.png" /><pre>тело {
    семейство шрифтов: без засечек;
}</pre><pre>.основное содержание {
    наценка: авто;
    максимальная ширина: 500 пикселей;
    цвет фона: белый дым;
    отступы: 50 пикселей;
    радиус границы: 10 пикселей;
    дисплей: сетка;
    Сетка-шаблон-строки: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    промежуток между столбцами сетки: 10 пикселей;
}</pre><pre>.main-content h1 {
    столбец сетки: 1 / размах 2;
}</pre><pre>кнопка .main-content {
    граница: нет;
    цвет белый;
    цвет фона: # 007dff;
    отступы: 20 пикселей;
    радиус границы: 5 пикселей;
    курсор: указатель;
}</pre><pre>Кнопка .main-content: hover {
    непрозрачность: 0,8;
}</pre><pre>Кнопка .main-content: active {
    непрозрачность: 0,6;
}</pre><p>Я добавил заголовок h1 в html, чтобы он выглядел лучше, обязательно обновите html, добавив ссылку на css:</p><pre><! DOCTYPE html>
<html lang = "en" dir = "ltr">
    <Голова>
        <meta charset = "utf-8">
        <link rel = "stylesheet" href = "index.css">
        <title> Игра Dice ethereum </ title>
    </ HEAD>
    <Тело>
        <div class = "main-content">
            <h1> Кости Эфириума </ h1>
            <button> Начать новую игру </ button>
            <button> Присоединиться к существующей игре </ button>
        </ DIV>
    </ Body>
</ Html></pre><p>Возможно, вы заметили, что я использую новую сетку CSS. Это потому, что он в основном доступен для больших браузеров, поэтому его довольно безопасно использовать на этом этапе, так как большинство людей будут видеть CSS правильно.</p><p>Я решил, что лучший способ отобразить следующее действие, требуемое от пользователя, - показать div в javascript с необходимой информацией. Поэтому, когда он нажмет «Начать новую игру», он увидит окно с вопросом о том, какой депозитный счет он хочет настроить для игры.</p><p>Если он щелкнет «Присоединиться к существующей игре», его попросят указать целевой и договорный адрес существующей игры.</p><p>Вот как будут реагировать действия кнопок:</p><img alt="Как приложение выглядит с простым JavaScript" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1576416159998.gif" /><p>Чтобы сделать это возможным, я создал файл index.js с некоторой логикой JavaScript. Вот javascript, не забудьте набрать его своими руками, если вы хотите узнать лучше это:</p><p>Позвольте мне объяснить, что я там делал:</p><ul><li>Сначала я создал функцию start (), которая будет немедленно выполнена, чтобы обернуть содержимое, чтобы оно было красивым и содержалось в одной большой функции.</li><li>Затем я создал 2 прослушивателя событий, которые активируются каждый раз, когда я нажимаю кнопки запуска или присоединения в html-файле. Один для кнопки # new-game, а другой для кнопки # join-game. Я использую document.querySelector (), который является одним из самых мощных способов выбора чего-либо в вашем js-коде.</li><li>Внутри этих слушателей я показываю или скрываю блок div каждого соответствующего элемента. В основном, выбирая коробку с querySelector и удаляя или добавляя скрытый класс, который настроен в css для отображения: none; ,</li></ul><p>Затем мы можем соединить файл js с нашим modifie index.html:</p><pre><! DOCTYPE html>
<html lang = "en" dir = "ltr">
    <Голова>
        <meta charset = "utf-8">
        <link rel = "stylesheet" href = "index.css">
        <title> Игра Dice ethereum </ title>
    </ HEAD>
    <Тело>
        <div class = "main-content">
            <h1> Кости Эфириума </ h1>
            <button id = "new-game"> Начать новую игру </ button>
            <button id = "join-game"> Присоединиться к существующей игре </ button></pre><pre>            <div class = "скрытая настройка новой игры">
                <h3> Сколько условного депонирования вы будете использовать в ETH? </ h3>
                <input type = "number" placeholder = "2 ...">
            </ DIV></pre><pre>            <div class = "hidden-game-setup">
                <h3> Какой адрес умного контракта в существующей игре? </ h3>
                <input type = "text" placeholder = "0x38dfj39 ...">
            </ DIV></pre><pre>            <button id = "button-continue" class = "hidden"> Продолжить </ button>
        </ DIV></pre><pre>        </ins><div class="neighbor-articles"><h4 class="ui header">Смотрите также</h4><a href="/item/planning-your-perfect-sized-kickstarter-book-project-69e71e/" title="Планирование идеального книжного проекта Kickstarter">Планирование идеального книжного проекта Kickstarter</a><a href="/item/how-to-play-repop-world-64c3b3/" title="Как играть в REPOP WORLD">Как играть в REPOP WORLD</a><a href="/item/how-to-make-friends-and-believe-in-yourself-without-wearing-pants-d1177b/" title="Как подружиться и поверить в себя без штанов.">Как подружиться и поверить в себя без штанов.</a><a href="/item/how-to-go-from-good-to-great-a039a4/" title="Как перейти от хорошего к великому">Как перейти от хорошего к великому</a><a href="/item/how-to-talk-to-your-family-about-cryptocurrency-on-christmas-bed246/" title="Как поговорить с семьей о криптовалюте на Рождество">Как поговорить с семьей о криптовалюте на Рождество</a></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="vn flag"></i></a><a href="https://uk.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="ua flag"></i></a><a href="https://tr.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="tr flag"></i></a><a href="https://th.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="th flag"></i></a><a href="https://sv.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="ch flag"></i></a><a href="https://sr.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="rs flag"></i></a><a href="https://sl.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="si flag"></i></a><a href="https://sk.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="sk flag"></i></a><a href="https://ro.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="ro flag"></i></a><a href="https://pt.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="pt flag"></i></a><a href="https://pl.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="pl flag"></i></a><a href="https://chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="de flag"></i></a><a href="https://ar.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="sa flag"></i></a><a href="https://bg.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="bg flag"></i></a><a href="https://cs.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="cz flag"></i></a><a href="https://da.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="dk flag"></i></a><a href="https://el.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="gr flag"></i></a><a href="https://es.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="es flag"></i></a><a href="https://et.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="ee flag"></i></a><a href="https://fi.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="fi flag"></i></a><a href="https://fr.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="fr flag"></i></a><a href="https://hi.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="in flag"></i></a><a href="https://hr.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="hr flag"></i></a><a href="https://hu.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="hu flag"></i></a><a href="https://id.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="id flag"></i></a><a href="https://it.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="it flag"></i></a><a href="https://ja.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="jp flag"></i></a><a href="https://ko.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="kr flag"></i></a><a href="https://lt.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="lt flag"></i></a><a href="https://lv.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="lv flag"></i></a><a href="https://ms.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="my flag"></i></a><a href="https://nl.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="nl flag"></i></a><a href="https://no.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="no flag"></i></a><a href="https://uz.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="uz flag"></i></a></div>chinthaka.org<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>