Bagaimana untuk membuat dApps berskala dan kontrak pintar dalam Ethereum dengan Saluran Negeri langkah-demi-langkah. Bahagian 1

Terdapat banyak penyelesaian yang berbeza untuk mewujudkan aplikasi terdesentralisasi yang beribu-ribu atau bahkan berjuta-juta pengguna masa nyata seperti saluran plasma dan negeri. Dalam panduan ini anda akan belajar langkah demi langkah bagaimana saluran negara berfungsi dan bagaimana untuk membuat aplikasi berskala di Ethereum sekarang.

Anda tidak perlu menunggu penambahbaikan masa depan di blok tersebut. Teknologi ini di sini untuk kekal dan anda boleh menggunakannya untuk mencipta semua jenis dApps. Kini, saluran negara kebanyakannya digunakan untuk permainan berasaskan blokchain di Ethereum.

Berfikir berjudi dengan mata wang kripto. Terdapat cara untuk menyulitkan maklumat untuk terus mendedahkan kemudian yang merupakan titik utama sistem ini.

Apakah saluran negara?

Ia merupakan penyelesaian berskala untuk mewujudkan aplikasi terdesentralisasi dan kontrak cerdas yang boleh digunakan oleh berjuta-juta pengguna dalam hampir masa sebenar. Mereka bekerja dengan memulakan saluran antara 2 atau lebih pengguna di mana mereka menukar mesej yang disulitkan, ditandatangani dengan maklumat transaksi yang mereka mahu laksanakan.

Mereka dipanggil "negeri" kerana setiap interaksi perlu mempunyai keadaan yang boleh dikemas kini. Fikirkan tentang skor permainan atau baki bank.

Mengapa mereka wujud?

Saluran negeri dicipta kerana aplikasi ethereum berkembang dengan pesat menjadi populariti menjadikan blokchain tidak dapat digunakan kerana ia dibangunkan dengan penggunaan yang sederhana. Mereka membenarkan transaksi berterusan tanpa membayar gas atau menunggu penambang untuk memproses urus niaga.

Ini bermakna transaksi percuma dan cepat.

Apa yang perlu kita sediakan saluran negara?

  1. Sekurang-kurangnya 2 pengguna yang akan berinteraksi antara satu sama lain. Saluran perlu dibuka antara 2 atau lebih pengguna. Sama seperti aplikasi sembang.
  2. Kontrak pintar dengan logik saluran negeri yang akan membuka dan menutupnya.
  3. Sekiranya saluran negara akan digunakan dalam permainan, eskrow diperlukan untuk kedua-dua pengguna. Itu escrow di eter akan disimpan dalam kontrak pintar apabila membuka saluran.
  4. Aplikasi javascript yang akan menjana mesej yang ditandatangani yang akan ditukar rantaian antara pengguna.
  5. Metamask atau alat yang sama untuk menandatangani mesej. Menandatangani mesej tidak membebankan gas dan mereka dilaksanakan dengan serta-merta. Ia dikehendaki dari kedua-dua pengguna untuk menandatangani mesej untuk menjamin bahawa ia adalah yang menjana transaksi tersebut.
  6. E-mel atau mana-mana aplikasi luaran untuk menukar mesej yang ditandatangani untuk membuat permohonan itu mungkin.

Bagaimana mereka bekerja?

Saluran negara agak rumit untuk ditubuhkan kerana anda perlu memastikan kedua-dua pemain dilindungi sekiranya berlaku sesuatu yang salah, itulah sebabnya kami memerlukan kontrak pintar. Ini adalah langkah-langkah:

  1. Dalam saluran negeri antara 2 pengguna, yang pertama menggunakan kontrak pintar yang akan "membuka" saluran.
  2. Yang kedua melaksanakan fungsi kontrak pintar itu untuk "menyambung" saluran negara itu "
  3. Kemudian mereka boleh mula bertukar-tukar mesej yang ditandatangani untuk permohonan itu. Kedua-dua pengguna mempunyai akses kepada aplikasi javascript tersuai untuk menjana mesej dengan maklumat yang akan mereka lakukan dalam kontrak pintar, tetapi rantaian luar.
  4. Kelajuan transaksi bergantung pada seberapa cepat setiap pengguna dapat membuat dan menandatangani mesej tersebut. Mereka terus bertukar mesej, bermain rantaian sehingga mereka memutuskan bahawa permainan berakhir.
  5. Apabila mereka selesai permainan, sesiapa sahaja boleh pergi ke kontrak pintar dan melaksanakan fungsi untuk menyelesaikannya yang akan memulakan fasa "rundingan".
  6. Dalam fasa ini, kedua-dua pengguna mempunyai masa tamat selama 1 hari untuk memuat naik 2 mesej terkini yang mereka ada ke kontrak pintar. Kontrak pintar memeriksa pesanan terkini dan mengeluarkan dana untuk menyelesaikan permainan berdasarkan maklumat tersebut. Setiap mesej mengandungi hasil interaksi sebelum ini jadi selamat untuk semak sahaja yang terkini.

Bagaimanakah anda boleh menggunakan ini dalam keadaan dunia sebenar?

Dalam panduan ini, saya akan menunjukkan kepada anda cara membuat saluran negeri antara 2 pengguna untuk permainan Ethereum. Ingat bahawa saluran negara boleh digunakan untuk apa-apa jenis aplikasi yang mempunyai "negeri" atau kaunter. Itulah sebabnya permainan adalah ideal. Kerana anda boleh mengesan siapa yang memenangi setiap permainan, ada keadaan untuk setiap permainan yang boleh dikemas kini.

Kami akan membuat permainan dadu di mana pemain 1 memilih bilangan dadu yang akan dikeluarkan dan pemain 2 akan meneka nombor itu untuk menang. Mereka akan dapat bermain seberapa banyak permainan yang mereka mahu tanpa perlu melakukan transaksi di blockchain. Kami juga akan mempunyai aplikasi web untuk menunjukkan antara muka.

Inilah indeks yang akan kita ikuti untuk mewujudkan aplikasi terdesentralisasi seperti:

  1. Mewujudkan aplikasi web visual. Inilah antara muka, bagaimana permainan akan kelihatan seperti kepada pengguna luar. Ia akan digunakan sebagai medium untuk menukar mesej yang ditandatangani untuk saluran negeri.
  2. Mewujudkan fungsi yang diperlukan untuk menandatangani dan menyulitkan mesej.
  3. Mewujudkan kontrak pintar.

1. Membuat aplikasi web visual

Sebelum memulakan kod itu, saya ingin memastikan bahawa kami menjelaskan butiran lengkap aplikasi web. Bagaimana rupanya, apakah tumpuan perhatian.

Dalam kes ini kita mahu memaparkan perkara yang sama untuk kedua-dua pemain. Pemain 1 akan melihat 6 muka dadu sebagai gambar dan dia harus memilih mana yang akan keluar, maka pemain kedua, juga harus memilih di antara wajah-wajah itu dan dia akan dapat melihat hasilnya.

Jadi rangka kerja akan menjadi seperti ini:

  1. Pemain 1 pergi ke aplikasi web, klik pada butang yang mengatakan "Memulakan permainan baru", maka dia membuat transaksi metamask untuk menyebarkan dan menyiapkan kontrak pintar. Dia menerima alamat kontrak pintar yang boleh dihantar kepada pemain lain untuk memulakan permainan.
  2. Player 2 pergi ke aplikasi web, klik pada butang yang mengatakan "Sertai permainan yang ada" dengan alamat kontrak yang diterima dari pemain 1, kemudian dia membuat transaksi metamask untuk menyiapkan permainan yang sudah ada dan menghantar escrow.

Jadi mari kita mulakan di sana. Mari buat kotak di tengah-tengah aplikasi web dengan 2 butang. Buat folder dipanggil dadu dan fail di dalam yang dipanggil index.html. Inilah kodanya:

Begitulah 2 butang kelihatan seperti lalai


    
        
         Dice ethereum game </ title>
    </ head>
    <body>
        <div class = "main-content">
            <butang> Mulakan permainan baru </ butang>
            <butang> Sertai permainan sedia ada </ butang>
        </ div>
    </ body>
</ html></pre><p>Dalam kod saya, saya hanya mencipta struktur HTML asas dengan div yang mengandungi butang dan tajuk. Perhatikan bahawa div mempunyai kelas yang dipanggil kandungan utama yang akan kita gunakan dalam seketika.</p><p>Mari buat yang lebih cantik dengan beberapa css. Buat fail bernama index.css dengan kod berikut (anda boleh salin dan tampal ini):</p><img alt="Inilah caranya" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1576416098899.png" /><pre>badan {
    font-family: sans-serif;
}</pre><pre>.kandungan utama {
    margin: auto;
    max-width: 500px;
    warna latar belakang: whitesmoke;
    padding: 50px;
    jejari sempadan: 10px;
    paparan: grid;
    grid-template-row: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
}</pre><pre>.main-content h1 {
    tiang grid: 1 / span 2;
}</pre><pre>.main-content button {
    sempadan: tiada;
    warna: putih;
    warna latar belakang: # 007dff;
    padding: 20px;
    jejari sempadan: 5px;
    kursor: penunjuk;
}</pre><pre>.main-content button: hover {
    kelegapan: 0.8;
}</pre><pre>.main-content button: active {
    kelegapan: 0.6;
}</pre><p>Saya menambahkan tajuk h1 ke html untuk menjadikannya kelihatan lebih baik, pastikan untuk mengemas kini html anda dengan menambahkan pautan ke css:</p><pre><! DOCTYPE html>
<html lang = "en" dir = "ltr">
    <head>
        <meta charset = "utf-8">
        <link rel = "stylesheet" href = "index.css">
        <title> Dice ethereum game </ title>
    </ head>
    <body>
        <div class = "main-content">
            <h1> Ethereum Dice </ h1>
            <butang> Mulakan permainan baru </ butang>
            <butang> Sertai permainan sedia ada </ butang>
        </ div>
    </ body>
</ html></pre><p>Anda mungkin perasan bahawa saya menggunakan grid css baru. Itulah sebabnya kebanyakannya tersedia untuk pelayar besar jadi ia cukup selamat untuk menggunakannya pada ketika ini kerana kebanyakan orang akan melihat css dengan betul.</p><p>Saya memutuskan bahawa cara terbaik untuk memaparkan tindakan seterusnya yang diperlukan daripada pengguna adalah untuk menunjukkan div dalam javascript dengan maklumat yang diperlukan. Maka apabila dia mengklik "Mula permainan baru" dia akan melihat kotak yang meminta dia untuk berapa banyak escrow yang dia mahu untuk menetapkan untuk permainan.</p><p>Dia klik pada "Sertai permainan sedia ada" dia akan diminta untuk escrow dan alamat kontrak permainan yang ada.</p><p>Begini bagaimana tindakan butang akan bertindak balas:</p><img alt="Bagaimana rupa aplikasi dengan javascript biasa" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1576416159998.gif" /><p>Untuk membuatnya mungkin saya mencipta fail index.js dengan beberapa logika javascript. Inilah javascript, pastikan anda menaipkannya dengan tangan anda jika anda ingin belajar lebih baik ini:</p><p>Biar saya terangkan apa yang saya lakukan di sana:</p><ul><li>Mula-mula saya mencipta satu fungsi yang dipanggil start () yang akan dilaksanakan dengan segera untuk membungkus kandungan supaya ia bagus dan terkandung dalam satu fungsi besar.</li><li>Kemudian saya membuat 2 pendengar acara yang dapat diaktifkan setiap kali saya mengklik butang mula atau menyertai butang dalam fail html. Satu untuk # butang baru permainan dan yang lain untuk # butang join-game. Saya menggunakan document.querySelector () yang merupakan salah satu cara yang paling berkuasa untuk memilih apa-apa dalam kod js anda.</li><li>Di dalam pendengar, saya tunjukkan atau menyembunyikan kotak div bagi setiap elemen yang bersamaan. Pada dasarnya memilih kotak yang diklik dengan querySelector dan mengeluarkan atau menambah kelas tersembunyi yang persediaan dalam css untuk dipaparkan: tiada; .</li></ul><p>Kemudian kita boleh menyambung fail js dengan modifie index.html kami:</p><pre><! DOCTYPE html>
<html lang = "en" dir = "ltr">
    <head>
        <meta charset = "utf-8">
        <link rel = "stylesheet" href = "index.css">
        <title> Dice ethereum game </ title>
    </ head>
    <body>
        <div class = "main-content">
            <h1> Ethereum Dice </ h1>
            <butang id = "new-game"> Mulakan permainan baru </ button>
            <butang id = "join-game"> Sertai permainan sedia ada </ butang></pre><pre>            <div class = "hidden-new-game-setup">
                <h3> Berapa banyak escrow yang anda akan gunakan dalam ETH? </ h3>
                <input type = "number" placeholder = "2 ...">
            </ div></pre><pre>            <div class = "hidden join-game-setup">
                <h3> Apakah alamat kontrak pintar permainan yang sedia ada? </ h3>
                <input type = "text" placeholder = "0x38dfj39 ...">
            </ div></pre><pre>            <butang id = "button-continue" class = "hidden"> Continue </ button>
        </ div></pre><pre>        </ins><div class="neighbor-articles"><h4 class="ui header">Lihat juga</h4><a href="/item/planning-your-perfect-sized-kickstarter-book-project-69e71e/" title="Merancang Projek Buku Kickstarter Sempurna Anda">Merancang Projek Buku Kickstarter Sempurna Anda</a><a href="/item/how-to-play-repop-world-64c3b3/" title="Cara Main REPOP DUNIA">Cara Main REPOP DUNIA</a><a href="/item/how-to-make-friends-and-believe-in-yourself-without-wearing-pants-d1177b/" title="Bagaimana untuk membuat kawan dan percaya diri tanpa memakai seluar.">Bagaimana untuk membuat kawan dan percaya diri tanpa memakai seluar.</a><a href="/item/how-to-go-from-good-to-great-a039a4/" title="Bagaimana hendak pergi dari Good to Great">Bagaimana hendak pergi dari Good to Great</a><a href="/item/how-to-talk-to-your-family-about-cryptocurrency-on-christmas-bed246/" title="Bagaimana untuk bercakap dengan keluarga anda tentang Cryptocurrency pada Krismas">Bagaimana untuk bercakap dengan keluarga anda tentang Cryptocurrency pada Krismas</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://ru.chinthaka.org/item/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step-4263be/"><i class="ru 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://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>