Web 3.0 Uyumlu Ethereum DApp Geliştirme – Adım Adım Rehber

Dikkat:
Bu yazı çok fazla teknik terim içerir. Dolayısıyla yazının hedef kitlesi daha çok programcılar ve teknik detaya hakim kimselerdir. Örneğin bir CEO bu yazıyı okurken hiç bir şey anlamayabilir.
Bu yazıda, Web3.js ve Truffle kullanarak basit bir Ethereum DApp oluşturma adımlarını açıklayacağız ve blok zincirine gönderilen API işlemlerinin izlenmesini ayarlayacağız. Bu makalede ayrıca, DApp’lerin geliştirilmesinde yer alan çeşitli teknolojileri inceleyeceğiz.
Yazı yüksek miktarda teknik bilgi içerir. Ona göre gardınızı alın lütfen. Sonra ben duymadım olmasın.

Giriş

Yazıya en temelden başlayalım. Önce biraz konsepti irdeleyelim sonra kod kısmına geçeriz. Bu bölümü sıkıcı bulanlar, doğrudan teknik kısma atlayabilir.

Merkezi olmayan uygulamalar (veya DApp’ler) ya da merkeziyetsiz uygulamalar, AWS veya Azure gibi bulut sistemlerde çalışmazlar. Merkeziyetsiz uygulamalar adından da anlaşılacağı üzeri ademi merkezidirler. Bu ne demek? Bu şu demek, bu uygulamalar blockchain ile hayatımıza giren dağıtık defter teknolojisini kullanırlar. Yani Azure veya AWS gibi sunucularda bulunmak yerine, coğrafi olarak dünyanın dört bir tarafına dağılmış node’lar üzerinde çalışırlar.

Bu blok zinciri düğümleri ya da node’ları, herhangi bir lider node gerektirmez. Raft ve Paxos gibi çeşitli konsensüs protokollerinde lider seçiminin aksine, blok zinciri işlemleri Proof of Work veya Proof of Stake aracılığıyla “rastgele” düğümlere gönderilir ve bunlar tarafından işlenir. Bu düğümler, dünya çapında çeşitli bilgi işlem cihazlarında rastgele boyutta bir ağda çalışan trustless düğümlerdir.

DApp’ler, bir API üzerinden bu blok zinciri ile etkileşime giren ön uç uygulamalardır. Ethereum için bu API, Moesif’in yerel olarak desteklediği Ethereum Web3 API adlı bir JSON-RPC katmanıdır. Her blok zincirin farklı API uç noktaları vardır ve bu API’lerden o blok zincir ile iletişime geçebilirsiniz.

Buradaki adresten hemen hemen tüm blok zincirlerin API bilgilerini bulabilirsiniz.

Örneğin Avalanche’ın (as bayrakları) RPC bilgileri aşağıdaki şekildedir; 

https://ava-mainnet.public.blastapi.io/ext/bc/C/rpc
https://api.avax.network/ext/bc/C/rpc
https://rpc.ankr.com/avalanche

Ethereum Nedir?

Ethereum, akıllı sözleşmeler yürütebilen bir blok zincirdir. Yaşayan bir uygulamalar bütünüdür.

Ethereum sanal makinesi (EVM) Turing complete’tir ve doğrudan blok zinciri ağında rastgele hesaplama çalıştırabilir.

Bitcoin’in sınırlı bir komut seti olmasına rağmen, bir Ethereum sözleşmesi, bir uygulama geliştiricisinin bir sözleşmede tam olarak hangi işlemlerin gerçekleştirilebileceğini belirlemesine izin verir.

Basit akıllı sözleşmeler, bir dizi özel geçişe sahip bir Sonlu Durum Makinesi (FSM) olarak düşünülebilir.

Akıllı Sözleşme Nedir?

Akıllı sözleşmeler, bir blok zinciri kullanıcılarının herhangi bir merkezi otorite olmadan oy kullanma ve benzeri işlemler gibi bir grup kullanıcı arasında para ve varlık alışverişinde bulunmalarına veya diğer eylemleri gerçekleştirmelerine olanak sağlar.

Ethereum platformu için akıllı sözleşmeler, Solidity adlı bir dil kullanılarak tanımlanır.

JSON-RPC Nedir?

JSON-RPC, payload için JSON kullanan, state bilgisi olmayan, hafif bir uzaktan yordam çağrısı (RPC) protokolüdür. Kaynak-merkezli RESTful API’lerinin aksine, JSON-RPC gibi RPC API’leri prosedüreldir ve RESTful API’lerinden daha sıkı bir şekilde birleştirilebilir.

Ön uç uygulamaları, JSON-RPC kullanarak Ethereum ağı ile iletişim kurar. Web3, JSON-RPC spesifikasyonu kullanılarak oluşturulan Ethereum uyumlu API ve binding’lerdir.

Herhangi bir merkezi olmayan uygulama, tarayıcı tabanlı DApp’ler için Web3.js ve benzeri bir Web3 SDK’sı kullanmalıdır.

Dapp Oluşturma Rehberi

Artık Ethereum DApp’leri hakkında biraz bilginiz olduğuna göre, şimdi Dapp oluşturma rehberine geçelim.

Biz bu yazıda, Ethereum üzerinde DApp oluşturmak için bir dizi araç ve ortak kod sağlayan Truffle Framework’ünü kullanacağız.

Başlamadan önce aşağıdaki sorulara cevap bulmamız lazım. Siz bu soruları kendi Dapp’ınızı geliştireceğiniz zaman mutlaka kendinize sorun.

Geliştireceğiniz Dapp’ın arayüzü olacak mı?

Eğer arka planda sessizce çalışan bir otomasyon yapmayacaksanız, Dapp’ınızın bir arayüzü olmalı ki son kullanıcı ile etkileşime girebilsin. Arayüz olmadan olmaz di mi? Ancak şunu not edin lütfen, Dapp geliştirirken arayüz çok önemli değildir. Önemli olan işlevidir. Yani Uniswap’ı ele alalım. Uniswap’ı Uniswap yapan arka planda çalışan akıllı sözleşmeleridir. O sözleşmeler aslında bir ekonomik modeli temsil eder. Akıllı sözleşmelerle kullanıcıların etkileşime girmesini sağlayan ise arayüzdür.

Eğer yazacağınız Dapp Chrome ya da Edge benzeri bir tarayıcıda çalışacaksa, yani tarayıcı tabanlı bir Dapp yazacaksanız o zaman arayüzünüz Javascript benzeri bir scripting dili ile yazabilirsiniz. En popüler Javascript framework’lerinden biri React olduğu için biz kendi örneğimizde React kullanacağız.

Truffle framework’ü, create-react-app ortak kod oluşturucusundan türetilen truffle-react adlı bir standart (boxes diye geçer) sağlar.

Akıllı sözleşmeleriniz hazır mı?

İşin zaten en civcivli en önemli kısmı burası. Akıllı sözleşmeleriniz hazır mı?

Akıllı sözleşmeler, DApp’iniz için kuralları ve geçişleri tanımlar ve Ethereum sanal makinesinde çalışan bir kod parçasıdır. Ethereum ağı üzerinde hesaplamaları çalıştıracak gaz ücretleri çok pahalı olabileceğinden, akıllı sözleşmelerinize gereksiz logic’ler koymaktan kaçının. Dur şurdan da bir if-else döndüreyim demeyin. Ne kadar az hesaplama o kadar az gaz ücreti.

Akıllı sözleşmemize SimpleStorage ile başlayalım. Bu kod storedData adında unsigned bir integer’i depolar ve set ve get’ini ayarlar.

pragma solidity ^0.4.18;
contract SimpleStorage {
  uint storedData;
  function set(uint x) public {
    storedData = x;
  }
  function get() public view returns (uint) {
    return storedData;
  }
}

Testleri nerde yapacaksınız?

Bildiğiniz gibi Ethereum ana ağı (mainnet) üzerinde test yapamazsınız çünkü gaz ücreti ödemek durumundasınız. O yüzden Ethereum’un testnet’lerinden birinde (Ropsten, Kovan vb) sözleşmelerinizi ve dapp’lerinizi test edebilirsiniz.

Hatta Truffle’ın da kendi sunduğu test ortamları var. Doğrudan Truffle üzerinde de test edebilirsiniz.

Adım Adım Rehber

Adım 1: Truffle Kurulumu

Öncelikle Truffle framework’ünü kuruyoruz. Unix tabanlı bir sistemde çalıştığınızı varsayıyorum.

npm install -g truffle

Framework’ü diğer projeler için de kullanmaya devam edebilmemiz için burada -g flagini kullanıyoruz.

Adım 2: Boilerplate Kurulumu

Boilerplate kodu generate ediyoruz.

truffle unbox react

Truffle’da boilerplate “box” diye adlandırılır. React boilerplate’i ise create-react-app kullanır.

Yukarıdaki kodu çalıştırdığınızda gerekli dosyalar ve klasörler oluşacak.

Burada özellikle dikkat etmeniz gereken bir kaç klasör var:

  • React kodun bulundupu src/ klasörü.
  • Solidity’de yazılan akıllı sözleşmelerin tutulduğu contracts/ klasörü. Bu klasörde yukarıda bahsettiğimiz SimpleStorage.sol adlı dosyayı göreceksiniz.
  • migrations/ klasörü içinde sözleşmeleri Ethereum ana ağında deploy etmemize yardımcı olacak scriptler bulunur.
  • Son olarak React kodunun inject edildiği index.html yani uygulamaya giriş sayfası da public/ klasöründe bulunur

Adım 3: Development

Aşağıdaki komutla development ortamını çalıştırıyoruz.

truffle develop

Bu komutu çalıştırdığınızda iki şey çalışır; birincisi http://127.0.0.1:9545 adresinde Ethereum Node Emulator çalışmaya başlar ve her birinde 100 Ether bulunan 10 tane test hesabı oluşturur. İkinci olarak Truffle komut satırı çalışmaya başlar.

Adım 4: Derleme

Şimdi akıllı sözleşmelerimizi derleyeceğiz.

Truffle komut satırından aşağıdaki komutu girin:

compile

Bu komut Solidity kontratlarınızı JSON artifact’ler içine derleyecek.

Derlenmiş kontratları build/contracts klasöründe bulabilirsiniz.

Adım 5: Deploy

Şimdi sıra deploy etmeye geldi.

Truffle komut satırında aşağıdaki komutu çalıştırın:

migrate

Bu komut akıllı sözleşmelerinizi emule edilmiş Ethereum node’u üzerinde deploy edecek. Gerçek Ethereum ağına deploy etmek isterseniz tek yapmanız gereken truffle-config.js içindeki parametreleri değiştirmek olacak.

Bu aşamada App.js dosyasını düzenleyerek Dapp’inize bazı interaktif özellikler ekleyebilirsiniz.

Adım 6: Dapp’inizi Çalıştırın

Artık Dapp’iniz çalışmaya hazır halde. Aşağıdaki komutu çalıştırarak uygulamanızı tarayıcıda açarak test edebilirsiniz.

npm run start

Yalnız bu noktada Dapp’imizin Ethereum ağı ile pek bir etkileşimi yok. Çünkü herhangi bir şey yazmadık. Biraz o kısma bakalım şimdi.

Her şeyden önce, Web3 objesi üzerinde bir kimlik bilgisi alarak ve ağ bilgilerini ayarlayarak bir Ethereum ağına bağlanmamız gerekiyor.

Not:
Not: Yazdığınız DApp’in Web3.js’ye nasıl bağlandığını görmek istiyorsanız, utils/getWeb3.js dosyasına bakın. Web3 önce tarayıcı penceresine enjekte edilmiş bir Web3 nesnesi olup olmadığını kontrol eder ve bunu kullanır. Eğer herhangi bir Web3 objesi enjekte edilmemişse, Web3 ağın sağlayıcısı olarak http://127.0.0.1/9545’e bağlanmaya çalışır. Mist tarayıcı kullanıyorsanız veya Metamask uzantısını kullanıyorsanız, web3 nesnesi enjekte edilir. DApp’inizi hangi ağa bağlayacağınızı Metamask veya Mist tarayıcısı üzerinden ayarlayabilirsiniz.

Adım 7: Dapp’inizi Editleyin

App.js içinde, componentWillMount() metoduyla Web3 nesnesine bir referans alır ve onu local state şeklinde saklarız. Ayrıca sözleşmenin local bir versiyonunu da initiate ederiz.

getWeb3
.then(results => {
  this.setState({
    web3: results.web3
  })
  // Instantiate contract once web3 provided.
  this.instantiateContract()
})
.catch(() => {
  console.log('Error finding web3.')
})

Şimdi bu kısma küçük bir form ekleyelim.

<form className="pure-form pure-form-stacked">
  <fieldset>
    <label htmlFor="storage">Storage Tutarı</label>
    <input id="storage" type="number" ref={c => { this.storageAmountInput = c }} />
    <button
      className="pure-button"
      onClick={(e) => {
        e.preventDefault();
        this.addToSimpleStorage()
      }}
    >
      Storage Belirle
    </button>
  </fieldset>
</form>

Bu form, kullanıcıların SimpleStorage sözleşmesinde saklamak istedikleri bir değeri belirlemelerine olanak tanır. Butona tıklandığında ise aşağıdaki fonksiyon çalışır:

addToSimpleStorage() {
  if (this.state.simpleStorageInstance && this.state.accounts) {
    const value = this.storageAmountInput.value;
    this.state.simpleStorageInstance.set(value, {from: this.state.accounts[0]})
      .then((result) => {
        return this.state.simpleStorageInstance.get.call(this.state.accounts[0])
      }).then((result) => {
        this.setState(prevState => ({
          ...prevState,
          storageValue: result.c[0]
        }));
      }).catch((err) => {
        console.log('error');
        console.log(err);
      });
  } else {
    this.setState(prevState => ({
      ...prevState,
      error: new Error('simple storage instance yüklenemedi..')
    }))
  }
}

Hepsi bu! Küçücük de olsa Ethereum blokzinciri ile etkileşime giren bir Dapp yazdık.

Adım 8: Dapp’inizi Tekrar Çalıştırın

Artık Dapp’iniz eklediğiniz küçük form ile birlikte çalışmaya hazır halde. Aşağıdaki komutu çalıştırarak uygulamanızı tarayıcıda açarak test edebilirsiniz.

npm run start

Açılan ekranda storage değeri girerek o değeri Ethereum ağına yazabilirsiniz ve böylece Ethereum blok zinciri üzerine doğrudan veri yazmış olursunuz. Tabii bizim kullandığımız emulator olduğu için gerçek Ethereum ağına yazmamış olacağız.

Umarım yukarıdaki örnek anlatım faydalı olmuştur. Yorumlarınızı yazabilirseniz cevaplamaya çalışırım.

İlginizi Çekebilir:

DeFi Uygulamaları Geliştirme

Merkezi olmayan uygulama (dApps) geliştirme hizmetlerimize bir göz atın.


İncele

0xpff

Kripto para dünyasına ilgilidir. Okur, araştırır, öğrenir, paylaşır.

Yorumunuz Varsa Paylaşın