Merhaba sevgili okurlarımız.
Bugünkü eğitici içeriğimizde Binance’in popüler DEX’i ya da Türkçe ifadeyle merkeziyetsiz borsası PancakeSwap’ı forklamayı göstereceğiz.
Blok zincir teknolojisi doğası gereği şeffaf olduğundan pek çok proje açık kaynak kodlu. Bu da şu demek, bu projeleri forklayıp serbestçe kullanabilirsiniz. Zaten ekosistemdeki pek çok proje bir başkasının fork’u. Örneğin Sushiswap, Uniswap’ın bir forku. Bazen boynuz kulağı geçebiliyor. Bir projenin fork’u orijinalinden iyi olabiliyor.
Bu yazımızda PancakeSwap’ın kullanıcı arayüzünü fork’layacağız. Akıllı sözleşmelerini de ayrı bir eğitimde anlatırız.
Önemli Not:
Bu yazıda akıllı sözleşmelerle ilgili herhangi bir işlem yapılmayacaktır. Sadece UI dediğimiz kullanıcı arayüzünü forkluyor olacağız. Siz isterseniz arayüzü forklayıp istediğiniz şekilde özelleştirdikten sonra yine aynı akıllı sözleşmeleri kullanarak DEX’inizi deploy edebilirsiniz.
Adım Adım Rehber
Adım 1: Ortamın Ayarlanması
Öncelikle PancakeSwap arayüzünün kodlarını kendi masaüstümüze indirip lokalde çalışacağız.
Benim kullandığım alet-edevat:
- MacBook Pro
- Visual Studio Code
- Google Chrome
- MetaMask
Burada ister Windows ister Mac kullanın farketmez. Yeterki cihazınızda Visual Studio Code olsun.
Adım 2: Reponun Kurulması
PancakeSwap’ın resmi Github sayfasından UI için olan repoyu indiriyoruz.
Bunun için tek yapmanız gereken https://github.com/pancakeswap/pancake-frontend adresine gidip Code yazan yere tıklayarak kodun git adresini almak.
Reponun bulunduğu git adresi bu: https://github.com/pancakeswap/pancake-frontend.git
Bu adresi kopyaladıktan sonra Visual Studio Code’u açıyoruz ve “Clone Repo” tıklayarak repoyu bilgisayarımıza indiriyoruz.
Kopyaladığımız git uzantılı adresi açılan adres satırına yazıp enter’a basıyoruz.
Reponun boyutu büyük olduğundan klonlaması biraz uzun sürebilir. Klonlamanın tamamen bitmesini bekliyoruz.
Klonlama bittikten sonra bu repo’yu açmak ister misiniz diye soracak. Buna “Open” butonuna tıklayarak devam edebilirsiniz. Böylece repo bilgisayarımıza kurulmuş oldu. Tebrikler! Şimdi sonraki adıma geçelim.
Adım 3: Paketlerin Kurulumu
Şimdi repomuzu bilgisayarımıza indirdik ve hazır halde bekliyor. Reponun kullandığı paketlerin kurulumunu yapmamız lazım öncelikle.
Visual Studio Code’da “Terminal” ekranına geçiş yapıyoruz ve aşağıdaki komutu çalıştırıyoruz.
yarn
Bu komut reponun ihtiyaç duyduğu paketleri indirip kuracak. Bu işlem biraz uzun sürebilir, lütfen terminali kapatmadan kurulumun bitmesini bekleyin.
Adım 4: Lokal Sunucunun Başlatılması
Paket kurulumları tamamlandıktan sonra development server‘ı başlatacağız. Bunun için yine terminal ekranında aşağıdaki komutu çalıştırın:
yarn dev
Bu komutu çalıştırdıktan sonra tarayıcınızdan http://localhost:3000/ adresine girerek klonladığınız PancakeSwap arayüzüne ulaşabilirsiniz.
Adım 5: Arayüzün Güncellenmesi
Dördüncü adımı tamamladıktan sonra tarayıcınızda yukarıda belirtilen url’i açtığınızda PancakSwap’ın localhost üzerinde çalıştığını göreceksiniz! Tebrikler! İlk DEX’inizi ayağa kaldırdınız.
Şimdi sıra geldi arayüzü dilediğiniz şekilde değiştirmeye. Artık bundan sonrası sizin hayal gücünüze ve yapacağınız projenin içeriğine göre değişir.
Repoda views/ klasörü altında Farm, Likidite, Lottery, NFT, Pool ve diğer pek çok özelliğin klasörünü bulabilirsiniz. Bunlar arasında değiştirmek istedikleriniz üzerinde serbestçe değişiklik yapabilirsiniz.
Tarayıcınızda MetaMask kurulu ise sağ üst köşede bulunan “Connect Wallet” tıklayarak localhost üzerinden blok zincirlere de bağlantı kurabilirsiniz.
Dediğim gibi akıllı sözleşmeler üzerinde de değişiklik yapabilirsiniz ancak onun için Solidity biliyor olmanız gerekiyor.
Umarım bu rehber sizin için faydalı olmuştur. Herhangi bir sorunuz olursa lütfen yorum yazın. Bir sonraki eğitimde görüşmek üzere!
Popüler İçerikler
<a href="https://blockchaindanismanlik.com/kripto-para-kategorileri/">Piyasa Değerine Göre Kripto Para Kategorileri</a>
<a href="https://blockchaindanismanlik.com/kripto-para-derecelendirme/">Kripto Para Derecelendirme</a>
<a href="https://blockchaindanismanlik.com/bitcoin-sahibi-ulkeler/">Bitcoin Sahibi Ülkeler</a>
<a href="https://blockchaindanismanlik.com/bitcoin-sahibi-etf/">Bitcoin Sahibi ETF’ler</a>