Cara membuat dApps yang dapat diukur dan kontrak pintar di Ethereum dengan Saluran Negara selangkah demi selangkah. Bagian 1

Ada banyak solusi berbeda untuk membuat aplikasi terdesentralisasi yang skala ke ribuan atau bahkan jutaan pengguna real-time seperti plasma dan saluran negara. Dalam panduan ini Anda akan belajar langkah demi langkah bagaimana saluran negara berfungsi dan cara membuat aplikasi yang dapat diskalakan di Ethereum sekarang.

Anda tidak perlu menunggu peningkatan di blockchain di masa mendatang. Teknologi ini ada untuk digunakan dan Anda dapat menggunakannya untuk membuat semua jenis dApps. Saat ini, saluran negara sebagian besar digunakan untuk game berbasis blockchain di Ethereum.

Pikirkan perjudian dengan mata uang kripto. Ada cara untuk mengenkripsi informasi agar tetap mengungkapkannya nanti yang merupakan titik kunci dari sistem ini.

Apakah saluran negara?

Ini adalah solusi penskalaan untuk membuat aplikasi terdesentralisasi dan kontrak pintar yang dapat digunakan oleh jutaan pengguna dalam waktu nyata. Mereka bekerja dengan memulai saluran antara 2 atau lebih pengguna di mana mereka bertukar pesan terenkripsi dan ditandatangani dengan informasi transaksi yang ingin mereka jalankan.

Mereka disebut "negara" karena setiap interaksi harus memiliki keadaan yang dapat diperbarui. Pikirkan skor permainan atau saldo bank.

Mengapa mereka ada?

Saluran negara dibuat karena aplikasi ethereum dengan cepat tumbuh dalam popularitas membuat blockchain tidak dapat digunakan karena dikembangkan dengan penggunaan moderat. Mereka memungkinkan transaksi terus menerus tanpa membayar gas atau menunggu penambang memproses transaksi.

Yang berarti transaksi gratis dan cepat.

Apa yang kita perlukan untuk mengatur saluran negara?

  1. Setidaknya 2 pengguna yang akan berinteraksi satu sama lain. Saluran harus dibuka antara 2 atau lebih pengguna. Mirip dengan aplikasi obrolan.
  2. Kontrak pintar dengan logika saluran negara yang akan membuka dan menutupnya.
  3. Jika saluran negara akan digunakan dalam game, escrow akan diperlukan untuk kedua pengguna. Escrow itu dalam eter akan disimpan dalam kontrak pintar ketika membuka saluran.
  4. Aplikasi javascript yang akan menghasilkan pesan yang ditandatangani yang akan ditukar secara tidak langsung antara pengguna.
  5. Metamask atau alat serupa untuk menandatangani pesan. Menandatangani pesan tidak memerlukan biaya dan dieksekusi secara instan. Diperlukan dari kedua pengguna untuk menandatangani pesan untuk menjamin bahwa mereka yang menghasilkan transaksi tersebut.
  6. Email atau aplikasi eksternal apa saja untuk bertukar pesan yang ditandatangani untuk memungkinkan aplikasi itu.

Bagaimana mereka bekerja?

Saluran negara agak rumit untuk diatur karena Anda harus memastikan kedua pemain terlindungi jika terjadi kesalahan, itu sebabnya kami membutuhkan kontrak pintar. Inilah langkah-langkahnya:

  1. Dalam saluran negara antara 2 pengguna, yang pertama menyebarkan kontrak pintar yang akan "membuka" saluran.
  2. Yang kedua mengeksekusi fungsi kontrak pintar itu untuk "bergabung" dengan saluran negara itu "
  3. Kemudian mereka dapat mulai bertukar pesan yang ditandatangani untuk aplikasi. Kedua pengguna memiliki akses ke aplikasi javascript khusus untuk menghasilkan pesan dengan informasi yang akan mereka lakukan dalam kontrak pintar, tetapi tidak terhubung.
  4. Kecepatan transaksi tergantung pada seberapa cepat setiap pengguna dapat membuat dan menandatangani pesan-pesan itu. Mereka terus bertukar pesan, bermain tanpa rantai sampai mereka memutuskan bahwa permainan sudah berakhir.
  5. Ketika mereka menyelesaikan permainan, siapa pun dari mereka dapat pergi ke kontrak pintar dan menjalankan fungsi untuk menyelesaikannya yang akan memulai fase "negosiasi".
  6. Dalam fase ini, kedua pengguna memiliki batas waktu 1 hari untuk mengunggah 2 pesan terbaru yang mereka miliki ke kontrak pintar. Kontrak pintar memeriksa pesan-pesan terbaru dan mengeluarkan dana untuk menyelesaikan permainan berdasarkan informasi itu. Setiap pesan berisi hasil interaksi sebelumnya sehingga cukup aman untuk memeriksa yang terbaru.

Bagaimana Anda bisa menerapkan ini dalam situasi dunia nyata?

Dalam panduan ini saya akan menunjukkan kepada Anda cara membuat saluran negara antara 2 pengguna untuk game Ethereum. Ingat bahwa saluran negara dapat digunakan untuk segala jenis aplikasi yang memiliki "keadaan" atau penghitung. Itu sebabnya permainan itu ideal. Karena Anda dapat melacak siapa yang memenangkan setiap game, ada keadaan untuk setiap game yang dapat diperbarui.

Kami akan membuat permainan dadu di mana pemain 1 memilih jumlah dadu yang akan keluar dan pemain 2 harus menebak angka itu untuk menang. Mereka akan dapat memainkan game sebanyak yang mereka inginkan tanpa harus melakukan transaksi pada blockchain. Kami juga akan memiliki aplikasi web untuk menampilkan antarmuka.

Ini adalah indeks yang akan kami ikuti untuk membuat aplikasi terdesentralisasi seperti itu:

  1. Membuat aplikasi web visual. Ini adalah antarmuka, bagaimana permainan akan terlihat seperti pengguna eksternal. Ini akan digunakan sebagai media untuk bertukar pesan yang ditandatangani untuk saluran negara.
  2. Membuat fungsi yang diperlukan untuk menandatangani dan mengenkripsi pesan.
  3. Menciptakan kontrak pintar.

1. Membuat aplikasi web visual

Bahkan sebelum memulai dengan kode saya ingin memastikan bahwa kami mengklarifikasi detail lengkap dari aplikasi web. Seperti apa tampilannya, apa yang menjadi fokus perhatian.

Dalam hal ini kami ingin menampilkan hal serupa untuk kedua pemain. Pemain 1 akan melihat 6 wajah dadu sebagai gambar dan dia harus memilih yang mana yang akan keluar, kemudian pemain kedua, juga harus memilih antara wajah-wajah itu dan dia akan dapat melihat hasilnya.

Jadi kerangka kerjanya akan seperti ini:

  1. Pemain 1 pergi ke aplikasi web, mengklik tombol yang mengatakan "Mulai game baru", lalu dia melakukan transaksi metamask untuk menyebarkan dan mengatur kontrak pintar. Dia menerima alamat kontrak pintar yang bisa dia kirim ke pemain lain untuk memulai permainan.
  2. Pemain 2 pergi ke aplikasi web, mengklik tombol yang mengatakan "Bergabung dengan game yang ada" dengan alamat kontrak yang diterima dari pemain 1, lalu dia melakukan transaksi metamask untuk mengatur game yang sudah ada dan mengirimkan escrow.

Jadi mari kita mulai dari sana. Mari kita buat kotak di tengah aplikasi web dengan 2 tombol. Buat folder bernama dadu dan file di dalamnya disebut index.html. Ini kodenya:

Seperti itulah 2 tombol terlihat secara default


    
        
         Game dadu ethereum 
    
    
        
                          Bergabunglah dengan game yang ada         
    

Dalam kode itu saya baru saja membuat struktur HTML dasar dengan div yang berisi tombol dan judul. Perhatikan bahwa div memiliki kelas yang disebut konten utama yang akan kita gunakan sebentar lagi.

Mari kita buat itu lebih cantik dengan beberapa css. Buat file bernama index.css dengan kode berikut (Anda dapat menyalin dan menempel ini):

Begini tampilannya
tubuh {
    font-family: sans-serif;
}
.isi utama {
    margin: otomatis;
    lebar maks: 500px;
    warna latar belakang: whitesmoke;
    padding: 50px;
    batas-radius: 10px;
    tampilan: kotak;
    grid-template-rows: 1fr 1fr;
    grid-template-kolom: 1fr 1fr;
    grid-kolom-gap: 10px;
}
. konten utama h1 {
    grid-kolom: 1 / span 2;
}
tombol. konten utama {
    perbatasan: tidak ada;
    warna putih;
    warna latar: # 007dff;
    padding: 20px;
    batas-radius: 5px;
    kursor: pointer;
}
Tombol .main-content: hover {
    opacity: 0,8;
}
tombol. konten utama: aktif {
    opacity: 0,6;
}

Saya menambahkan judul h1 ke html agar terlihat lebih baik, pastikan untuk memperbarui html Anda dengan menambahkan tautan ke css:



    
        
        
         Game dadu ethereum 
    
    
        
            

Dadu Ethereum

                                  
    

Anda mungkin memperhatikan bahwa saya menggunakan kotak css baru. Itu karena sebagian besar tersedia untuk peramban besar sehingga cukup aman untuk menggunakannya pada saat ini karena kebanyakan orang akan melihat css dengan benar.

Saya memutuskan bahwa cara terbaik untuk menampilkan tindakan selanjutnya yang diperlukan dari pengguna adalah menunjukkan div dalam javascript dengan informasi yang diperlukan. Jadi ketika dia mengklik "Mulai game baru" dia akan melihat sebuah kotak menanyakan padanya berapa banyak escrow yang ingin dia siapkan untuk game.

Jika dia mengklik "Bergabung dengan game yang ada" dia akan diminta untuk escrow dan alamat kontrak dari game yang ada.

Begini cara tindakan tombol akan merespons:

Tampilan aplikasi dengan javascript biasa

Untuk membuat itu mungkin saya membuat file index.js dengan beberapa logika javascript. Ini javascript, pastikan untuk mengetiknya dengan tangan Anda jika Anda ingin mempelajari lebih baik ini:

Izinkan saya menjelaskan apa yang saya lakukan di sana:

  • Pertama saya membuat fungsi yang disebut start () yang akan dieksekusi segera untuk membungkus konten sehingga bagus dan terkandung dalam satu fungsi besar.
  • Lalu saya membuat 2 pendengar acara yang diaktifkan setiap kali saya mengklik tombol mulai atau bergabung dalam file html. Satu untuk tombol # permainan baru dan lainnya untuk tombol # gabung permainan. Saya menggunakan document.querySelector () yang merupakan salah satu cara paling ampuh untuk memilih apa pun dalam kode js Anda.
  • Di dalam pendengar itu, saya menunjukkan atau menyembunyikan kotak div dari setiap elemen yang sesuai. Pada dasarnya memilih kotak dengan querySelector dan menghapus atau menambahkan kelas tersembunyi yang setup di css untuk ditampilkan: tidak ada; .

Kemudian kita dapat menghubungkan file js dengan index.html modifie kami:



    
        
        
         Game dadu ethereum 
    
    
        
            

Dadu Ethereum

                         
            
            
            
        
        
    

Saya menebalkan potongan kode baru yang ditambahkan. Berikut ini adalah css yang diperbarui untuk menata informasi baru:

tubuh {
    font-family: sans-serif;
}
.hidden {
    display: tidak ada;
}
.isi utama {
    margin: otomatis;
    lebar maks: 500px;
    warna latar belakang: whitesmoke;
    padding: 50px;
    batas-radius: 10px;
    tampilan: kotak;
    grid-template-rows: 1fr 80px otomatis;
    grid-template-kolom: 1fr 1fr;
    grid-kolom-gap: 10px;
}
. konten utama h1 {
    grid-kolom: 1 / span 2;
}
tombol. konten utama {
    perbatasan: tidak ada;
    warna putih;
    warna latar: # 007dff;
    padding: 20px;
    batas-radius: 5px;
    kursor: pointer;
}
Tombol .main-content: hover {
    opacity: 0,8;
}
tombol. konten utama: aktif {
    opacity: 0,6;
}
tombol. konten utama: dinonaktifkan {
    opacity: 0,5;
    warna latar belakang: abu-abu;
    kursor: otomatis;
}
.main-content input {
    lebar: 100%;
    batas-radius: 10px;
    padding: 10px;
    perbatasan: 1px lightgrey solid;
}
.main-content div.new-game-setup, .main-content div.join-game-setup {
    grid-kolom: 1 / span 2;
}
# button-continue {
    grid-kolom: 1 / span 2;
    margin-top: 20px;
}

Tombol "Lanjutkan" sekarang tidak melakukan apa-apa jadi mari kita buat fungsionalitas itu untuk menyebarkan kontrak pintar baru dan membuka saluran negara ketika pengguna ingin membuat game baru di bagian berikutnya.

2. Membuat dan menghubungkan Kontrak Cerdas awal

Saatnya untuk membuat versi dasar dari kontrak pintar dan menghubungkannya dengan javascript Anda menggunakan web3.js. Untuk saat ini kami hanya memerlukan konstruktor dan beberapa informasi dasar. Tulis kode ini dengan tangan Anda sendiri dalam file baru bernama Dice.sol:

pragma solidity 0.4.25;
kontrak Dice {
    address public player1;
    address public player2;
    uint256 public player1Escrow;
    uint256 pemain publik2Escrow;
    constructor () utang publik {
        membutuhkan (msg.value> 0);
        player1 = msg.sender;
        player1Escrow = msg.value;
    }
    function setupPlayer2 () dibayar publik {
        membutuhkan (msg.value> 0);
        player2 = msg.sender;
        player2Escrow = msg.value;
    }
}

Ada 2 fungsi, konstruktor untuk mengatur alamat dan escrow dari pemain pertama dan fungsi setupPlayer2 () untuk mengatur informasi pemain kedua.

Kami ingin menggunakan kontrak dan mengeksekusi konstruktor dengan nilai msg yang ditentukan tepat ketika pengguna mengklik tombol "Lanjutkan". Untuk melakukan itu, kita harus menerapkan web3.js dalam kontrak pintar kita. Karena ini adalah cara utama untuk berkomunikasi dengan blockchain di browser.

Dapatkan web3.js di folder aplikasi Anda dari sini: https://github.com/ethereum/web3.js/blob/develop/dist/web3.js yang merupakan kode pembaruan resmi distribusi.

Untuk mengunduhnya untuk proyek Anda, buka tautan itu, klik mentah untuk melihat kode lengkap dan salin kode untuk menempelkannya ke file baru bernama web3.js di dalam folder proyek Anda:

Buka halaman, klik

Anda tidak benar-benar harus melakukan itu jika Anda menggunakan metamask karena metamask menyuntikkan versi web3.js untuk Anda, tetapi akan bermanfaat jika memiliki perpustakaan web3 di proyek Anda untuk berinteraksi dengan blockchain jika metamask tidak tersedia.

Kami menggunakan metamask untuk berbicara dengan blockchain. Namun itu tidak berfungsi ketika Anda membuka file index.html di browser Anda karena file: // ekstensi tidak didukung untuk metamask.

Kami kemudian perlu menjalankan server lokal yang akan menyajikan file ke http: // localhost: 8080 url karena metamask tidak berfungsi ketika Anda membuka file index.html secara langsung. Untuk melakukan itu, buka terminal dan instal ini:

npm i -g http-server

Kemudian, di folder proyek Anda jalankan http-server untuk memulai server lokal untuk index.html Anda:

http-server

Itu akan melayani file di localhost: 8080 sehingga Anda dapat mengaksesnya dan menyuntikkan web3 dari metamask.

Dengan itu, mari kita fokus pada penerapan kontrak yang baru saja kita buat dari aplikasi web kita, tepat ketika pengguna mengklik ‘Lanjut’.

Untuk menggunakan kontrak baru, kita perlu ABI, parameter konstruktor dan bytecode. Itulah persyaratan untuk web3.js.

  1. Untuk membuat ABI, buka remix.ethereum.org, rekatkan kode Anda di bagian utama dan klik ABI:

Itu akan menyalin kode ABI. Buka folder proyek Anda dan buat file bernama contractData.js untuk menempelkan kode di sana dengan variabel yang disebut abi seperti:

2. Sekarang kita perlu bytecode dari kontrak pintar Anda. Bytecode adalah kontrak pintar yang dikompilasi yang akan digunakan untuk blockchain, kita membutuhkan informasi itu untuk dapat menyebarkannya. Untuk mendapatkan bytecode harus melakukan remix lagi dan klik tombol ini:

Tombol salin bytecode untuk kode Anda

Dan buat variabel lain di dalam contractData.js yang disebut bytecode dengan informasi seperti itu:

Anda dapat menyalin kode yang sama jika kontrak pintar Anda persis seperti yang saya buat di atas.

Impor file javascript dalam html Anda sebelum file index.js untuk memiliki variabel abi dan bytecode yang tersedia:

Sebelum membuat kontrak pada javascript, kita perlu menambahkan pendengar acara ke tombol melanjutkan dari bagian "Mulai permainan baru":

Apa yang saya lakukan di sana adalah:

  • Saya menambahkan id id ke input di mana pengguna ditanya berapa banyak eter yang ingin dimasukkan ke dalam escrow dan alamat kontrak jika ia bergabung dengan game yang ada.
  • Kemudian saya menambahkan javascript import di atas index.js karena kami ingin agar abi dan bytecode tersedia di dalam index.js karena harus diimpor terlebih dahulu.

Kemudian kami menambahkan logika yang diperlukan untuk membuat tombol itu berfungsi. Kami akan memeriksa apakah input alamat kontrak dalam HTML kosong atau tidak.

Jika tidak kosong, maka kami akan menganggap bahwa pemain memulai permainan baru yang menarik, memungkinkan Anda untuk memulai permainan dengan menggunakan tombol bergabung jika Anda membiarkan alamat itu kosong.

Sebelum saya menunjukkan kepada Anda seluruh kode, saya ingin menjelaskan kepada Anda cara menggunakan kontrak menggunakan web3.js. Ini terlihat sederhana tetapi saya terjebak di beberapa daerah.

Jadi ketika pengguna mengklik "Mulai game baru", ia memberi kami jumlah escrow di eter dan alamatnya, kami dapat menggunakan kontrak baru dengan fungsi ini:

Pada dasarnya Anda membuat instance kontrak dengan abi dan Anda menjalankan metode .new () untuk kontrak itu dengan bytecode.

Kemudian, di callback, Anda mendapatkan kesalahan jika ada dan hasil objek. Objek hasil akan berisi alamat. Dari kontrak yang digunakan ketika transaksi diproses oleh para penambang.

Yang berarti bahwa panggilan balik ini akan dieksekusi 2 kali. Satu ketika Anda menjalankan pembuatan kontrak dan yang lain ketika alamat kontrak itu tersedia.

Anda dapat memeriksa kapan alamat kontrak tersedia dengan pernyataan sederhana jika:

if (! result.address) {
    // Pembuatan kontrak telah dimulai
} lain {
    // Kontrak telah digunakan dan Anda dapat menggunakan alamat dengan result.address
}

Itulah cara Anda menggunakan kontrak dengan web3.

Tetapi bagaimana jika Anda ingin mengakses kontrak yang ada di blockchain?

Itulah tepatnya yang kita butuhkan untuk "bergabung" dengan permainan dadu, untuk membuat instance kontrak. Untuk tujuan itu kita hanya perlu ABI dan alamat kontrak, bytecode tidak diperlukan. Begini cara Anda melakukannya di web3:

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

Setelah itu Anda dapat menjalankan fungsi-fungsi kontrak itu seperti:

contractInstance.setupPlayer2 ({
  nilai: web3.toWei (valueSelected),
  gas: 4e6
}, (err, hasil) => {
    // Lakukan sesuatu setelah menjalankan fungsi
})

Anda hanya perlu instance, nama fungsi, parameter jika ada, dan fungsi panggil balik.

Sekarang setelah Anda memahami bagaimana penerapan dan instantiasi kontrak pintar berfungsi pada javascript, saya akan menunjukkan kepada Anda kode lengkap aplikasi:

Abaikan semua hal di atas, yang harus Anda fokuskan adalah di blok pendengar ‘# button-continue ':

document.querySelector ('# button-continue'). addEventListener ()

Karena Anda hanya perlu peduli dengan apa yang terjadi ketika pemain 1 atau pemain 2 mengklik tombol 'Lanjutkan'. Inilah rinciannya:

  • Ketika pemain mengklik tombol itu, pendengar acara ini dieksekusi
  • Di dalam, saya mendapatkan nilai input untuk menyiapkan escrow dan alamat kontrak yang dikerahkan jika pemain bergabung dengan permainan yang ada. Mereka adalah variabel valueSelected dan addressSelected.
  • Kemudian saya membuat variabel pengaturan kontrak dengan abi yang akan dibutuhkan untuk kedua pemain.
  • Setelah itu saya melihat apakah alamat kontrak yang digunakan sudah diatur atau tidak. Jika alamatnya kosong, itu artinya pemain mengklik "Mulai permainan baru" karena dalam kasus itu dia tidak akan melihat input alamat.
  • Yang berarti bahwa saya menggunakan permainan baru atau kontrak pintar untuk pemain dengan escrow yang dipilih.
  • Pemain pertama itu akan melihat alamat kontrak pintar yang digunakan. Dia harus berbagi alamat itu dengan pemain lain untuk memulai permainan dadu karena Anda membutuhkan 2 pemain.
  • Jika dia telah memberikan alamat, itu berarti dia ingin bergabung dengan game yang ada. Kita dapat melakukannya dengan membuat instance dari kontrak pintar menggunakan alamatnya dan kemudian menjalankan fungsi setupPlayer2 ().
  • Saya menggunakan fungsi setInterval untuk memeriksa setiap 1 detik apakah pengaturan pemain 2 telah selesai atau tidak untuk memulai permainan.

Besar! Jika Anda berhasil sejauh ini berarti Anda berkomitmen dan Anda benar-benar mempelajari sesuatu. Bagian yang terbaik lebih dekat daripada yang Anda pikirkan. Pada artikel berikutnya Anda akan melihat cara membuat saluran negara untuk game Anda dalam javascript untuk membuat aplikasi terdesentralisasi Ethereum yang dapat diskalakan.

Jangan ketinggalan dan jadilah yang pertama membacanya ketika sudah selesai. Bergabunglah dengan milis eksklusif Pengembang Ethereum untuk menerima pembaruan dan informasi langsung dari saya di sini: http://eepurl.com/dDQ2yX

Bagian 2 sekarang tersedia di sini: https://medium.com/@merunasgrincalaitis/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step- 690f71a9bf2f

Jika Anda merasa kewalahan dengan informasi canggih semacam itu atau Anda baru mengenal soliditas dan Ethereum dapps, periksa buku saya “Pengembang Ethereum: Pelajari Soliditas Dari Awal” di sini https://merunas.io/