DApp Geliştirme için Tam Klavuz (Ethereum, Polygon, BSC ve Local Ağınızda React kullanarak kontrat ile etkileşime geçme ve yayınlama)

Buradaki yazıda remix ide kullanarak akıllı kontrat geliştirdik. Akıllı kontratımız ile etkileşime geçtik. Bununla birlikte token oluşturma, arz biçimleri ve erişim kontrolü gibi konulara değindik. Bu yazıda ise onun hem devamı niteliğinde hem de baştan sona uygulamalı bir geliştirme süreci olacak. Ekranı ikiye bölüp parça parça yazı ile birlikte hareket ederek geliştirme yaptığınız takdirde öğrenmeniz daha kalıcı olacaktır.

Yazıyı birebir uyguladığım youtube eğitim videosunu izleyebilirsiniz:

Tamamladığınızda ise fikir sahibi olacaklarınız şu konulardır:

• Hardhat kullanarak yerel(local) Ethereum geliştirme ortamı kurma
• Alchemy ile Ropsten test ağına kontrat yollama ve etkileşime geçme
• Infura ile Polygon Mumbai test ağına kontrat yollama ve etkileşime geçme
• BSC test ağına kontrat yollama ve etkileşime geçme
• React App oluşturma, app ile 3 farklı test ağı ile etkileşime geçme
• Metamask test ağları görme, yenilerini ekleme ve test tokenları alma
• Github kullanma
• Vercel ile React projemizi dış dünyaya açma

1- Çalışma ortamı için gerekli hesapları açalım ve düzenlemeleri yapalım

Aşağıdaki maddeleri uygulamak şuan uzun iş gibi gelebilir. Fakat bunları bir kere ayarladıktan sonra DApp geliştirme süreçlerimizde tekrar tekrar uğraşmayacağız.

• Alchemy için hesabınızı ve projenizi oluşturun.

Alchemy Nedir? Nasıl Kullanılır? - Eray USTA

• Infura için hesabınızı ve projenizi oluşturun.

Infura Nedir? Nasıl Kullanılır? - Eray USTA

• Github hesabınızı açabilir veya hesabınız varsa bu adımı geçebilirsiniz.
• Vercel sitesine gidip github hesabınız ile giriş yapın. Erişim için github iznini isteyecektir. Doğrudan izin verebilirsiniz. Daha sonra React App imizi doğrudan Vercel içerisinden yayınlayacağız.

• Metamask cüzdanınız yok ise chrome eklentisini kurun. Test ağlarını görebilmek için Settings > Advenced > Show test networks ü açık konumuna getirin.

Metamask da test ağlarını gösterme

• Metamask a Polygon Mumbai ağını eklemek için mumbai explorer a gidip en alttaki butona tıklayın.

• Metamask a BSC test ağını eklemek için bsc explorer a gidip yine en alttaki butona tıklayın.

• Node.js i kendi sitesinden indirip kurun. Kurulum kolay next next ile tamamlayabilirsiniz.
• Visual studio code u sitesinden indirip kurun. VS code eklentiler bölümünden solidity eklentisini yükleyin.

Tebrikler! 🎉 Tüm yazılım geliştirme ortamını çalışmak için hazırladınız.

2- Github ı ayarlayalım

• Github da boş bir repo oluşturun.

• Repoyu aşağıdaki şekilde bırakıp bilgisayarınızdan terminali açın.

• Terminalde klasör oluşturun ve github reponuza yollayın.

Local ortamdan github a dosyaları göndermek

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin Your_GIT_REPO_LINK
git push -u origin main

Git ile ilgili detaylı bilgi için aşağıdaki yazıdan faydalanabilirsiniz.

Git ve GitHub nasıl kullanılır

3- React App i başlatalım, Hardhat ve Ether.js yükleyelim

• React app oluşturmak için aşağıdaki komutu verin. Eğer bulunduğunuz klasörde oluşturmak isterseniz örnekteki gibi kullanabilirsiniz veya “.” nokta yerine klasör ismi verebilirsiniz.

npx create-react-app .

• Ardından Hardhat, Ether.js ve Hardhat in ether.js ile etkileşime girmesi için gerekli eklentileri yükleyin.

npm install ethers hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers

paketleri yükleme komutu

• Hardhat config dosyası, script ve test klasörlerinin oluşması için aşağıdaki komutu verip sample proje oluşturun.

npx hardhat

Oluşan dosyalarda,
hardhat.config.js : hardhat ayar dosyası
scripts : çalıştığında akıllı sözleşmenizi dağıtacak olan örnek sample-script.js komut dosyasını içeren bir klasör
test : akıllı sözleşme testlerini yazabileceğimiz dosyalar
contract: Greeter.sol isminde basit bir kontrat yer alır.

npx hardhat komutu

Hardhat ile ilgili bilgi için aşağıdaki yazıyı okuyabilirsiniz.

Hardhat Nedir? Nasıl Kullanılır? - Eray USTA

4- Kontratımızı Düzenleyelim ve Compile edelim

• Oluşan config dosyasında bir kaç düzenleme yapalım. ABI dosyalarının dizinini ve network ü local olarak ayarlayın. module.exports kodunu şu şekilde değiştirin:

module.exports = {
solidity: "0.8.4",
paths: {
   artifacts: './src/artifacts',
},
networks: {
hardhat: {
   chainId: 1337
 }
}
};

• Hardhat in oluşturduğu contracts/Greeter.sol kontratının versiyonunu 0.8.4 olarak değiştirin. Bu çok basit bir kontarttır. Temelde bir selamlama fonksiyonunu çağırır. Veya setGreeting ile selamlayı güncellemeye yarar.

• Fonksiyonları görmek adına kontrat Remix IDE de (bir önceki yazıda anlattığım) şu şekilde çalışır. (Sizin yapmanıza gerek yok. Sadece örnek çalışma şeklini göstermek istedim.)

• Kontratı derlemek için aşağıdaki komutu çalıştırın

npx hardhat compile

Komuttan sonra hardhat, compile edilen dosyaları (config de tanımladığımız konumdaki) artifacts klasörü içerisine oluşturur. Burada React içerisinde kullanacağımız dosya Greeter.json dosyasıdır. Bu kontratımızın ABI formatında bir çıktısıdır.

ABI nedir? ABI, application binary interface anlamına gelir. Bunu, dapp ile konuşacak akıllı sözleşme ile Ethereum blok zinciri arasındaki arayüz olarak düşünebilirsiniz. ABI ler genellikle Solidity den hardhat veya truffle ile derlenir. Ayrıca Remix ile derleyerek ABI dosyasını alabilirsiniz.

Şuan kontrat tarafında hemen hemen herşey hazır. Şimdide React tarafında kontratımız ile etkileşime gireceğimiz kısımları yazalım.

5- React Kodlarımızı Yazalım

• Ana dizinde bulunan src klasörü içindeki app.js dosyasını açın. Bu bizim tüm işlemleri yapacağımız dosyadır.

• Kodları aşağıdaki şekilde düzenleyin. (Satır satır ne işe yaradıklarını yorum satırlarında belirttim.)

6- Local ortamda Kontratımız deploy edip, React App i çalıştıralım

React kodlarını ve local ortamı hazırladık. Şimdi ise deploy edip localde kontrat ile etkileşime geçeceğiz.

• Öncelikle local node/zincir başlatmak için aşağıdaki komutu girin ve çalışır halde bırakın.

npx hardhat node

• 20 adet içerisinde 10 bin eth olan cüzdan oluşturmuş oldu. Bunlardan birinin private key ini kopyalayın.

• Kopyaladığınız private key i kullanarak cüzdanı metamask adresinize import edin.

• Hardhat in oluşturduğu scripts klasörü içerisindeki sample-script.js dosyasının adını deploy.js olarak değiştirin. Ayrı bir terminal sekmesinde kontratınızı aşağıdaki komut yardımı ile local ağınıza deploy edin.

npx hardhat run scripts/deploy.js --network localhost

• Deploy sonrası verdiği kodu kopyalayın.

• React kodlarımızdaki kontrat sahibini belirleyen kısıma yapıştırın.

• Artık local ortamımızda çalışan bir node umuz ve deploy ettiğimiz bir kontratımız var. Şimdi bununla react çalıştırarak etkileşime geçeceğiz. Aşağıda komutu çalıştırın. Compile ettikten sonra otomatik olarak yeni sekmede react app inizi açması gerekir.

npm start

• Açılan sekmede Metamask da local ağı seçmelisiniz. Ardından selamlama mesajlarını alabilir değiştirebilirsiniz.

Tebrikler! 🎉 Eğer her şey yolunda gittiyse local node üzerinde çalışan kontrat ile etkileşime giren ve transaction oluşturan bir dApp e sahipsin!

7- Test cüzdanlarımıza token isteyelim

Sözleşmemizde kullanacağımız Matic, Etherum ve BNB tokenlarına ihtiyacımız var. Bunları alabilmek içinde aşağıdaki adreslere gidip cüzdan adresini yapıştırıp token istemelisin.

Örneğin polygon için metamask cüzdanından kodu kopyalayıp buradan isteyebilirsin.

Aşağıdaki adreslere gidip cüzdanda ilgili test ağını seçip cüzdan adresini yapıştırdığında birkaç dakika içinde cüzdanına test tokenlar gelecektir.

1- Polygon Mumbai

Faucet: https://faucet.polygon.technology/

2- Ropsten

Faucet: https://faucet.metamask.io/

3- BSC

Faucet: https://testnet.binance.org/faucet-smart

8- Alchemy ile Ropsten, Infura ile Polygon Mumbai ve BSC test ağını kullanarak kontratları deploy edelim

• İlk kurulum aşamasında Alchemy ağında oluşturduğun projeden api adresini kopyalayıp aşağıdaki config dosyası örneğinde gördüğünüz gibi Alchemy satırına ekleyin

• Yine ilk kurulum aşamasında oluşturduğun Infura api adresini kopyalayıp aşağıdaki ilgili satıra ekleyin

• BSC için herhangi bir hesaba ihtiyacın yok test ağını doğrudan kendisi sağlıyor. Config dosyasındaki bölümü kopyalayıp alabilirsin.
• Metamask ın private key ini kopyalayın. Fakat bunu her ihtimale karşı ayrı bir metamask cüzdanı oluşturup o şekilde yapın. Keylogger ile private keyiniz kopyalanırsa maalesef cüzdanınız başkasının eline geçmiş olacaktır. Benim tavsiyem ana cüzdanınızdan test vs. gibi işlemleri gerçekleştirmeyin.

• hardhat.config.js dosyasını düzenleyin. Private keyi ve test ağ adreslerini ekleyin.

• Kontratı Polygon Mumbai testnet ağına deploy etmek için aşağıdaki komutu çalıştırın.

npx hardhat run scripts/deploy.js --network mumbai

• Deploy sonrası kodu local ağda yaptığımız gibi kopyalayıp App.js dosyasından değiştirin. Fakat bu kodu kaybetmeyin daha sonra 3 ağda birden işlem gerçekleştireceğiz.

• React i tekrar npm start tekrar çalıştırın. Aşağıdaki gibi otomatik açılan sayfadan kontrat ile etkileşime geçin.

• Yukarıdaki adımların aynısını Ropsten ve Binance için yaparak 3 ağda da deploy edip verdiği kodları not edip kenarda tutalım.

Ben şu şekilde not ettim.

npx hardhat run scripts/deploy.js --network ropsten
npx hardhat run scripts/deploy.js --network binance

• Her komutu verdikten sonra oluşan kodları React App.js dosyasında değiştirerek ilgili ağlarda kontratların ayrı ayrı çalıştığını npm start komutu vererek kontrat ile etkileşime geçebilirsin.

9- React App ile 3 farklı kontrat ve ağ ile iletişime geçelim

• Bir önceki adımda 3 ağ için kullanacağımız cüzdan kodlarını bir yere not etmiştik. Şimdi onları kullanarak src klasörü içerisindeki App.js dosyamızı biraz daha düzenleyelim. Aşağıdaki kodda 24–28. ve ve 81–88. satırlayı inceleyin. Daha sonra kendi projeniz dosyayı direk yapıştırıp kendi deploy edilen kontrat bilginizle güncelleyin. Eğer kontrat ile uğraşmak istemiyorsan benim kodlarımı da kullanabilirsin. Benim deploy ettiğim kontrat ile iletişime geçip aynı sonucu verecektir.

• Daha sonra aşağıdaki komutu verin ve otomatik açılan adresten 3 ağda işlemleri gerçekleştirin.

npm start

• Videoda test anını görebilirsin.

10- Kodlarımızı github a yollayalım

• Aşağıdaki komutları sırası ile çalıştırın. Kodlarınız github a gönderilmiş olacak.

git add .
git commit -m "commit mesajınız"
git push origin main

• Kodlarımız artık github da yer alıyor. Düzenleme yapıp tekrar göndermek istersen üstteki komutları tekrar verebilirsin.

11- React App’imizi Vercel de dış dünyaya açalım

• Öncelikle hardhat artifacts klasörünü gitignore içerisine koyduğu için React app.js de kontrat abi dosyasının yolunu değiştirin.

import Greeter from './artifacts/contracts/Greeter.sol/Greeter.json'
// değiştir
import Greeter from './Greeter.json'

• Daha src/artifacts/contracts/Greeter.sol/Greeter.json içindeki dosyayı src içerisine koyun

• Kodların son halini aşağıdaki komutlar ile github a push edin.

git add .
git commit -m "kontrat düzeltme"
git push origin main

• Ardından Vercel hesabınıza github ile giriş yapın. New Project seçip proje için oluşturduğunuz repoyu import edin.
• Gelen pencereden Deploy butonuna basın. Bir süre bekleyin ve işte karşına herkesin erişimine açık bir dapp gelecek.
• Benim dapp linkim bu: https://test-dapp-blabla.vercel.app/

• Daha sonra github reposunda güncelleme yapıp push ettiğinde Vercel otomatik olarak son sürümü çekip deploy edecektir.

Tebrikler! 🎉

• İlk dapp projenizi oluşturdunuz.
• Local ve test ağlarıyla etkileşime geçtiniz.
• Vercel de projenizi yayınladınız.
• Github kullandınız.
• React kullandınız.
• Kontrat ile etkileşime geçtiniz.

12- Kapanış

Projenin kodlarına aşağıdaki github reposundan ulaşabilirsin.

GitHub - erayusta/test-dapp

Buraya kadar okuyup uyguladıysanız eğer Blockchain Developer, Full Stack Ethereum veya Web3 Developer ünvanları için büyük adımlar atmış olacaksınız. En kısa sürede youtube anlatımını kanalıma ekleyeceğim. Yerel ortamı kurduk ve tüm iletişimleri sağladık. Sırada NFT pazar yeri anlatımı var. Umarım onuda en kısa sürede paylaşacağım.

Beni twitter ve youtube hesaplarımdan da takip edebilirsin.