Durum Kanalları ile adım adım Ethereum'da ölçeklenebilir dApp'ler ve akıllı sözleşmeler nasıl oluşturulur? Bölüm 1

Plazma ve durum kanalları gibi binlerce, hatta milyonlarca gerçek zamanlı kullanıcıya ölçeklenen merkezi olmayan uygulamalar oluşturmak için pek çok farklı çözüm vardır. Bu kılavuzda, durum kanallarının nasıl çalıştığını ve Ethereum'da şu anda ölçeklenebilir uygulamalar oluşturmayı adım adım öğreneceksiniz.

Blok zincirinde gelecekteki gelişmeler için beklemeniz gerekmez. Teknoloji burada kalmaktır ve her türlü dApp oluşturmak için kullanabilirsiniz. Şu anda, durum kanalları çoğunlukla Ethereum'daki blockchain tabanlı oyunlar için kullanılıyor.

Kripto para birimleriyle kumar oynamayı düşünün. Bilgiyi daha sonra ortaya çıkarmak için şifrelemenin yolları vardır ki bu, sistemin en önemli noktasıdır.

Devlet kanalları nedir?

Neredeyse gerçek zamanlı olarak milyonlarca kullanıcı tarafından kullanılabilecek ademi merkeziyetçi uygulamalar ve akıllı sözleşmeler oluşturmak için bir ölçeklendirme çözümü. Çalıştırmak istedikleri işlem bilgisiyle şifreli, imzalı mesaj alışverişinde bulundukları 2 veya daha fazla kullanıcı arasında bir kanal başlatarak çalışırlar.

Bunlara “durum” denir, çünkü her etkileşimin güncellenebilecek bir duruma sahip olması gerekir. Bir oyunun veya banka bakiyesinin puanını düşünün.

Neden varlar?

Devlet kanalları yaratıldı, çünkü ethereum uygulamaları hızla ılımlı bir şekilde büyüdü; Gaz ödemeden veya madencilerin işlemleri işleme koymasını beklemeden sürekli işlemlere izin verir.

Serbest ve hızlı işlem anlamına gelir.

Devlet kanalı oluşturmak için neye ihtiyacımız var?

  1. Birbirleriyle etkileşime girecek en az 2 kullanıcı. Bir kanalın 2 veya daha fazla kullanıcı arasında açılması gerekir. Bir sohbet uygulamasına benzer.
  2. Devlet kanalı mantığıyla açıp kapatacak akıllı bir sözleşme.
  3. Devlet kanalı bir oyunda kullanılacaksa, her iki kullanıcı için bir emanet gerekecek. Eterdeki bu emanet kanalı açarken akıllı sözleşmede saklanacak.
  4. Kullanıcılar arasında zincir dışı olarak değiştirilecek olan imzalı mesajları üretecek bir javascript uygulaması.
  5. Meta maskesi veya mesajları imzalamak için benzer bir araç. İmzalama mesajları düşük maliyetlidir ve anında çalıştırılır. Her iki kullanıcıdan da, söz konusu işlemi oluşturanların temin edilmesini sağlamak için mesajları imzalamaları gerekir.
  6. Bu uygulamayı mümkün kılmak için bu imzalı mesajları değiştirmek için e-posta veya herhangi bir harici uygulama.

Nasıl çalışıyorlar?

Devlet kanalı kurmak biraz karmaşık çünkü bir şeyin yanlış gitmesi durumunda her iki oyuncunun da korunmasını sağlamalısınız, bu yüzden akıllı bir sözleşmeye ihtiyacımız var. Bunlar adımlar:

  1. 2 kullanıcı arasındaki bir durum kanalında, ilki kanalı "açacak" akıllı sözleşmeyi uygular.
  2. İkincisi, bu akıllı sözleşmenin “bu devlet kanalına” katılmak için bir işlevini yerine getiriyor.
  3. Daha sonra uygulama için imzalı mesaj alışverişi başlayabilir. Her iki kullanıcı da akıllı bir sözleşmede yapabilecekleri bilgileri içeren ancak zincir dışı mesajlar oluşturmak için özel bir javascript uygulamasına erişebilir.
  4. İşlemlerin hızı, her kullanıcının bu mesajları ne kadar hızlı oluşturup imzalayabileceğine bağlıdır. Oyunun bittiğine karar verene kadar mesaj alışverişi yapıyor, zincirleme oynuyorlar.
  5. Oyunu bitirdiklerinde, herhangi biri akıllı sözleşmeye gidebilir ve bitirmek için “müzakere” aşamasını başlatacak bir işlev yürütebilir.
  6. Bu aşamada, her iki kullanıcının da akıllı sözleşmeye en son 2 iletisini yüklemek için 1 gün zaman aşımı süresi vardır. Akıllı sözleşme, en son mesajları kontrol eder ve oyunu bu bilgilere dayanarak bitirmek için para sağlar. Her mesaj önceki etkileşimlerin sonuçlarını içerir, bu nedenle en yeni olanları kontrol etmeniz güvenlidir.

Bunu gerçek dünyada nasıl uygulayabilirsiniz?

Bu kılavuzda size Ethereum oyunu için 2 kullanıcı arasında nasıl bir durum kanalı oluşturulacağını göstereceğim. Devlet kanallarının “devlet” veya sayaçlı herhangi bir uygulama için kullanılabileceğini unutmayın. Oyunların ideal olmasının nedeni budur. Her oyunu kimin kazandığını izleyebildiğiniz için, her oyun için güncellenebilecek bir durum var.

Oyuncu 1'in çıkacak olan zar sayısını seçtiği ve oyuncu 2'nin bu sayıyı tahmin etmek zorunda olduğu bir zar oyunu yaratacağız. Blockchain üzerinde işlem yapmak zorunda kalmadan istedikleri kadar oyun oynayabilecekler. Ayrıca arayüzü göstermek için bir web uygulaması olacak.

Bu tür merkezi olmayan bir uygulama oluşturmak için takip edeceğimiz endeks:

  1. Görsel web uygulaması oluşturma Bu arayüz, oyunun harici kullanıcılara nasıl görüneceği. Devlet kanalları için imzalı mesaj alışverişi için araç olarak kullanılacaktır.
  2. Mesajları imzalamak ve şifrelemek için gereken işlevleri oluşturma.
  3. Akıllı sözleşmenin oluşturulması.

1. Görsel web uygulamasını oluşturma

Kodla başlamadan önce, web uygulamasının tüm ayrıntılarını netleştirdiğimizden emin olmak istiyorum. Nasıl görüneceği, dikkatin odağı nedir.

Bu durumda iki oyuncu için de benzer şeyler göstermek istiyoruz. Oyuncu 1, zarın 6 yüzünü resim olarak görecek ve hangisinin çıkacağını seçmesi gerekecek, daha sonra ikinci oyuncunun bu yüzler arasında seçim yapması gerekecek ve sonucu görebilecek.

Yani çerçeve böyle bir şey olacak:

  1. Oyuncu 1 web uygulamasına gider, “Yeni oyuna başla” diyen bir düğmeye tıklar ve akıllı kontratı kurmak ve kurmak için bir metamask işlemi yapar. Oyuna başlamak için diğer oyuncuya gönderebileceği akıllı bir sözleşme adresi alır.
  2. Oyuncu 2 web uygulamasına gider, oyuncu 1'den gelen sözleşme adresiyle “Mevcut oyuna katıl” diyen bir düğmeye tıklar ve daha sonra mevcut oyunu ayarlamak için bir metamask işlemi yapar ve bir emanet gönderir.

Öyleyse şuradan başlayalım. Web uygulamasının ortasında 2 düğmeyle bir kutu oluşturalım. Zar adlı bir klasör ve index.html adlı bir dosya oluşturun. İşte kod:

Varsayılan olarak 2 düğme bu şekilde görünür


    
        
         Zar ethereum oyunu 
    
    
        
                                       

Bu kodda sadece temel HTML yapısını düğmeler ve bir başlık içeren bir div ile yarattım. Div'in, birazdan kullanacağımız ana içerik olarak adlandırılan bir sınıfa sahip olduğunu unutmayın.

Biraz css ile daha güzel yapalım. Aşağıdaki kodla index.css adlı bir dosya oluşturun (bunu kopyalayıp yapıştırabilirsiniz):

İşte nasıl görüneceği
vücut {
    font-family: sans-serif;
}
.ana içerik {
    marj: otomatik;
    maksimum genişlik: 500px;
    arkaplan rengi: whitesmoke;
    dolgu maddesi: 50px;
    sınır yarıçapı: 10px;
    ekran: ızgara;
    ızgara-şablon satırları: 1fr 1fr;
    ızgara şablonu şablon sütunları: 1fr 1fr;
    ızgara-sütun aralığı: 10 piksel;
}
.main-content h1 {
    ızgara sütunu: 1 / span 2;
}
.main-content düğmesi {
    sınır: yok;
    Beyaz renk;
    arkaplan rengi: # 007dff;
    dolgu maddesi: 20px;
    sınır yarıçapı: 5 piksel;
    imleç: işaretçi;
}
.main-content düğmesi: vurgulu {
    opaklık: 0.8;
}
.main-content düğmesi: etkin {
    opaklık: 0.6;
}

Daha iyi görünmesi için html’ye bir h1 başlığı ekledim, css’e bağlantı ekleyerek html’nizi güncellediğinizden emin olun:



    
        
        
         Zar ethereum oyunu 
    
    
        
            

Ethereum Dice

                                       

Yeni css ızgarasını kullandığımı fark etmiş olabilirsiniz. Bunun nedeni, büyük tarayıcılar için çoğunlukla kullanılabilir olması, bu nedenle çoğu insan css'i düzgün bir şekilde göreceğinden bu noktada kullanmak oldukça güvenli.

Kullanıcıdan gerekli bir sonraki eylemi göstermenin en iyi yolunun, javascript'te gerekli bilgileri içeren bir div göstermektir. Bu yüzden “Yeni oyuna başla” düğmesine tıkladığında, oyuna ne kadar emanet etmek istediğini isteyen bir kutu görecek.

“Mevcut oyuna katıl” ı tıklattığında, mevcut oyunun emaneti ve sözleşme adresini sorması istenecek.

Düğme işlemlerinin nasıl yanıt vereceği aşağıda açıklanmaktadır:

Uygulama düz javascript ile nasıl görünüyor?

Bunu mümkün kılmak için bazı javascript mantığına sahip bir index.js dosyası oluşturdum. İşte javascript, daha iyi öğrenmek istiyorsanız, elinizle yazdığınızdan emin olun:

Orada ne yaptığımı açıklayayım:

  • Öncelikle, içeriği güzel bir şekilde ve büyük bir işlev içinde tutmak için derhal çalıştırılacak olan start () adlı bir işlev yarattım.
  • Sonra html dosyasındaki start veya join düğmelerine tıkladığımda aktif hale gelen 2 olay dinleyicisi yarattım. # Yeni oyun düğmesi için bir tane ve # katılmak-oyun düğmesi için bir tane daha. Js kodunuzda bir şey seçmenin en güçlü yollarından biri olan document.querySelector () kullanıyorum.
  • Bu dinleyicilerin içinde, karşılık gelen her bir öğenin div kutusunu gösterir veya gizlerim. Temelde querySelector ile kutuyu seçmek ve css 'de gösterilen gizli olan sınıfı gösterip kaldırmak veya kaldırmak: none; .

Daha sonra js dosyasını modifie index.html ile bağlayabiliriz:



    
        
        
         Zar ethereum oyunu 
    
    
        
            

Ethereum Dice

                         
            
                

ETH’de ne kadar emanet kullanacaksınız?

                             
            
            
        
        
    

Eklenen yeni kod parçalarını yazdım. Yeni bilgileri biçimlendirmek için güncellenmiş css aşağıdadır:

vücut {
    font-family: sans-serif;
}
.hidden {
    görüntü yok;
}
.ana içerik {
    marj: otomatik;
    maksimum genişlik: 500px;
    arkaplan rengi: whitesmoke;
    dolgu maddesi: 50px;
    sınır yarıçapı: 10px;
    ekran: ızgara;
    ızgara-şablon satırları: 1fr 80px auto;
    ızgara şablonu şablon sütunları: 1fr 1fr;
    ızgara-sütun aralığı: 10 piksel;
}
.main-content h1 {
    ızgara sütunu: 1 / span 2;
}
.main-content düğmesi {
    sınır: yok;
    Beyaz renk;
    arkaplan rengi: # 007dff;
    dolgu maddesi: 20px;
    sınır yarıçapı: 5 piksel;
    imleç: işaretçi;
}
.main-content düğmesi: vurgulu {
    opaklık: 0.8;
}
.main-content düğmesi: etkin {
    opaklık: 0.6;
}
.main-content düğmesi: disabled {
    opaklık: 0.5;
    arkaplan rengi: gri;
    imleç: otomatik;
}
.main-içerik girişi {
    genişlik:% 100;
    sınır yarıçapı: 10px;
    dolgu maddesi: 10px;
    sınır: 1px katı açık gri;
}
.main-içerik div.new-oyun-kurulum, .main-içerik div.join-oyun-kurulum {
    ızgara sütunu: 1 / span 2;
}
# button-devam et {
    ızgara sütunu: 1 / span 2;
    kenar boşluğu: 20 piksel;
}

Şu an “Devam Et” düğmesi artık hiçbir şey yapmıyor, bu yüzden bir kullanıcı bir sonraki bölümde yeni bir oyun oluşturmak istediğinde, yeni bir akıllı sözleşme dağıtmak ve durum kanalını açmak için bu işlevselliği oluşturalım.

2. İlk Akıllı Sözleşmeyi oluşturma ve bağlama

Akıllı sözleşmenin temel bir versiyonunu oluşturma ve web3.js kullanarak javascript'inize bağlamanın zamanı geldi. Şimdilik sadece yapıcıya ve bazı temel bilgilere ihtiyacımız var. Bu kodu Dice.sol adlı yeni bir dosyaya kendi elinizle yazın:

pragma katılığı 0.4.25;
sözleşme Zar {
    genel oyuncuya hitap etmek 1;
    genel oyuncuya hitap etmek2;
    uint256 genel oyuncu1Escrow;
    uint256 genel oyuncu2Escrow;
    constructor () halka açık {
        gerektiren (msg.value> 0);
        player1 = msg.sender;
        player1Escrow = msg.value;
    }
    setupPlayer2 () işlevi halka açık {
        gerektiren (msg.value> 0);
        player2 = msg.sender;
        player2Escrow = msg.value;
    }
}

Yapıcı, ilk oyuncunun adresini ve emanetini ayarlamak için yapıcı ve ikinci oyuncunun bilgilerini ayarlamak için setupPlayer2 () işlevini içerir.

Kullanıcı "Devam Et" düğmesine tıkladığında sözleşmeyi dağıtmak ve yapıcıyı belirtilen msg.value değerinde yürütmek istiyoruz. Bunu yapmak için, akıllı sözleşmemize web3.js uygulamak zorunda kalacağız. Tarayıcıdaki blockchain ile iletişim kurmanın ana yolu budur.

Uygulama klasörünüzden web3.js dosyasını buradan alın: https://github.com/ethereum/web3.js/blob/develop/dist/web3.js, resmi olan dağıtım kodunu güncelleyin.

Projenizi indirmek için bu bağlantıya gidin, kodun tamamını görmek için ham tıklayın ve proje klasörünüzdeki web3.js adlı yeni bir dosyaya yapıştırmak için kodu kopyalayın:

Sayfayı açın,

Metamask sizin için bir web3.js sürümü enjekte ettiğinden metamask kullanıyorsanız bunu yapmanız gerekmez; ancak metamask mevcut değilse, web3 kitaplığınızın blok zinciriyle etkileşime girmesi için projenizde web3 kitaplığının bulunması yararlıdır.

Blockchain ile konuşmak için metamask kullanıyoruz. Ancak, tarayıcınızda bir index.html dosyasını açtığınızda çalışmaz, çünkü dosya: // uzantısı meta maskesi için desteklenmez.

Daha sonra, dosyaları otomatik olarak çalıştıracak bir http: // localhost: 8080 URL'sine erişecek bir yerel sunucu çalıştırmamız gerekiyor çünkü metamask index.html dosyasını doğrudan açtığınızda çalışmaz. Bunu yapmak için terminali açın ve şunu takın:

npm i -g http sunucusu

Ardından, proje klasörünüzde index.html'niz için yerel bir sunucu başlatmak üzere http-server komutunu çalıştırın:

http-sunucu

Bu, localhost: 8080'deki dosyalara hizmet eder, böylece onlara erişebilir ve web3'ü meta maskeden enjekte edebilirsiniz.

Bunun dışında, kullanıcı 'Devam Et'i tıkladığında, web uygulamamızdan yeni oluşturduğumuz sözleşmeyi dağıtmaya odaklanalım.

Yeni bir sözleşme yapmak için ABI'ye, yapıcı parametrelerine ve bayt koduna ihtiyacımız var. Bunlar web3.js. için şartlardır.

  1. ABI'yi oluşturmak için remix.ethereum.org adresine gidin, kodunuzu ana bölüme yapıştırın ve ABI'ye tıklayın:

Bu ABI kodunu kopyalayacaktır. Proje klasörünüze gidin ve kodu şu şekilde abi adında bir değişkenle yapıştırmak için şuraya bir dosya oluşturun:

2. Şimdi akıllı sözleşmenizin byte koduna ihtiyacımız var. Bayt kodu, blok zincirine dağıtılacak olan derlenmiş akıllı sözleşmedir, dağıtmak için bu bilgilere ihtiyacımız var. Bayt kodunu tekrar almak için tekrar remix yapıp bu butona tıklayın:

Kodunuz için bayt kodu kopyalama düğmesi

Ayrıca, bu gibi bir bilgiyle bytecode adlı bir sözleşme değişkeni oluşturun:

Akıllı sözleşmeniz yukarıdaki gibi oluşturduysanız aynı kodu kopyalayabilirsiniz.

Bu javascript dosyasını, abi ve bytecode değişkenlerinin mevcut olması için index.js dosyasından önce html'nize içe aktarın:

Javascriptte sözleşmeyi oluşturmadan önce, “Yeni oyuna başla” bölümünün devam düğmesine bir olay dinleyicisi eklememiz gerekir:

Orada yaptığım şey:

  • Kullanıcının, mevcut bir oyuna katılıyorsa, emanete ne kadar eter koymak istediği sorusu girilen girişlere ve sözleşmenin adresini girdim.
  • Daha sonra, ilk içe aktarılması gerektiğinden, index.js'in içinde abi ve bytecode kullanılabilir olmasını istediğimiz için, javascript import dizinini yukarıda kullandım.

Daha sonra bu butonun çalışması için gerekli mantığı ekledik. HTML'deki sözleşme adresi girişinin boş olup olmadığını kontrol edeceğiz.

Boş değilse, oyuncunun yeni bir oyuna başladığını varsayalım; bu, adresi boş bırakırsanız, birleştirme tuşunu kullanarak bir oyuna başlamanıza izin verir.

Kodun tamamını size göstermeden önce, web3.js. kullanarak bir sözleşmenin nasıl dağıtılacağını açıklamak istiyorum. Çok basit görünüyor ama bazı bölgelerde sıkışıp kaldım.

Böylece kullanıcı “Yeni oyuna başla” düğmesine tıkladığında, bize eter ve adresindeki emanet miktarını verir, bu fonksiyonla yeni bir sözleşme yapabiliriz:

Temel olarak abi ile sözleşme örneğini yaratırsınız ve bytecode ile o sözleşme için .new () yöntemini uygularsınız.

Ardından, geri aramada, eğer varsa ve sonuç nesnesinde bir hata oluşur. Sonuç nesnesi, işlem madenciler tarafından işlendiğinde konuşlandırılan sözleşmenin adresini içerir.

Bu, bu geri arama işleminin 2 kez yürütüleceği anlamına gelir. Biri sözleşme yarattığınızda, diğeri ise sözleşmenin adresi mevcut olduğunda.

Sözleşmenin adresinin basit bir if ifadesiyle ne zaman kullanılabileceğini kontrol edebilirsiniz:

if (! result.address) {
    // Sözleşme oluşturma başladı
} Başka {
    // Sözleşme imzalandı ve adresi result.address ile kullanabilirsiniz.
}

Web3 ile böyle bir sözleşme yaparsınız.

Peki ya blok zinciri üzerinde mevcut bir sözleşmeye erişmek istiyorsanız?

Bir sözleşme örneği oluşturmak için tam olarak bir zar oyuna katılmak için ihtiyacımız olan şey budur. Bu amaçla sadece ABI'ye ve sözleşmenin adresine ihtiyacımız var, bayt kodu gerekli değil. İşte web3'te nasıl yaptığınız:

Sözleşme = web3.eth.contract (abi)
ContracInstance = Sözleşme.at (addressSelected)

Bundan sonra, bu sözleşmenin işlevlerini aşağıdaki gibi çalıştırabilirsiniz:

contractInstance.setupPlayer2 ({
  değer: web3.toWei (valueSelected),
  gaz: 4e6
}, (err, sonuç) => {
    // İşlevi yürüttükten sonra bir şeyler yapın
})

Sadece örneğe, işlev adına, varsa parametrelere ve geri arama işlevine ihtiyacınız vardır.

Akıllı bir sözleşmenin konuşlandırılmasının ve başlatılmasının javascript üzerinde nasıl çalıştığını anladığınıza göre, size uygulamanın tam kodunu göstereceğim:

Yukarıdaki her şeyi dikkate almayın, odaklanmanız gereken ‘# button-Devam’ dinleyicisinin bloğunda:

document.querySelector ( '# düğme-devam'). addEventListener ()

Çünkü sadece 1 ya da 2 numaralı oyuncu ‘Devam Et’ düğmesini tıkladığında ne olacağını umursaman gerekir. İşte dağılım:

  • Herhangi bir oyuncu bu düğmeye tıkladığında, bu olay dinleyicisi yürütülür
  • İçeride, oyuncu mevcut bir oyuna katılıyorsa emaneti ve dağıtılan sözleşmenin adresini ayarlamak için girdilerin değerlerini alıyorum. Bunlar valueSelected ve addressSelected değişkenleridir.
  • Sonra her iki oyuncu için gerekli olacak abi ile sözleşme kurulum değişkenini yarattım.
  • Bundan sonra, konuşlandırılmış sözleşmenin adresinin ayarlanıp ayarlanmadığını görüyorum. Eğer adres boşsa, oyuncu "yeni oyuna başla" ya tıkladığında bu durumda adres girişini göremez.
  • Bu, seçilen oyuncu ile o oyuncu için yeni bir oyun veya akıllı kontrat dağıtmam anlamına geliyor.
  • Bu ilk oyuncu konuşlandırılan akıllı sözleşmenin adresini görecek. İki oyuncuya ihtiyacınız olduğundan, bir zar oyunu başlatmak için bu adresi diğer oyuncu ile paylaşması gerekecek.
  • Bir adres vermişse, mevcut bir oyuna katılmak istiyor demektir. Bunu, adresini kullanarak akıllı sözleşmenin bir örneğini oluşturarak ve ardından setupPlayer2 () işlevini uygulayarak yapabiliriz.
  • SetInterval işlevini, her 2 saniyede bir oynatıcının kurulumunun tamamlanıp tamamlanmadığını veya oyuna başlayıp başlamadığını kontrol etmek için kullanıyorum.

Harika! Eğer şimdiye kadar yaptıysanız, bu sizin bağlı olduğunuz ve gerçekte bir şeyler öğrendiğiniz anlamına gelir. En iyi kısmı düşündüğünden daha yakın. Bir sonraki makalede, ölçeklendirilebilir bir Ethereum ademi merkeziyetçi uygulama oluşturmak için javascript'te oyununuz için durum kanalları oluşturmayı göreceksiniz.

Kaçırmayın ve tamamlandığında ilk yazan siz olun. Doğrudan burada benden güncelleme ve bilgi almak için özel Ethereum Geliştiricileri posta listeme katılın: http://eepurl.com/dDQ2yX

Bölüm 2 şu anda burada: https://medium.com/@merunasgrincalaitis/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step- 690f71a9bf2f

Bu kadar gelişmiş bir bilgiyle boğulmuş hissediyorsanız veya sadece sağlamlık ve Ethereum dapps konusunda yeniyseniz, burada “Ethereum Developer: Sıfırdan Sağlığı Öğrenin” kitabımı kontrol edin https://merunas.io/