Ethereum dApp Ön Yüz Geliştirme Eğitimi

Eğitim Hakkında

Cüzdan bağlantısından sözleşme çağrısına, olay dinlemeden üretim dağıtımına

Bu eğitim, React bilen ön yüz geliştiricilerine Ethereum üzerinde çalışan merkeziyetsiz uygulamaların (dApp) arayüzünü sıfırdan kurmayı öğretir. Katılımcılar provider ve signer kavramını, MetaMask ile cüzdan bağlantısını, ethers.js ile akıllı sözleşme okuma ve yazma çağrılarını, ABI kullanımını, işlem ve gas yönetimini, sözleşme olaylarını dinlemeyi uygular. wagmi, viem ve RainbowKit ile modern mimari, IPFS ve The Graph entegrasyonu ve güvenlik konuları uygulamalı işlenir.

Süre ve Format

3 Gün. Her gün dört modül; her konu test ağına bağlanan çalışan bir dApp arayüzü üzerinde kodlama atölyeleriyle pekiştirilir.

Seviye

Orta Seviye — React bilen geliştiriciler için Ethereum dApp arayüzü geliştirme eğitimi

Öğrenme Metodu

Sepolia test ağına bağlı örnek bir token ve NFT sözleşmesine karşı adım adım arayüz kodlanır; her modül canlı cüzdanla denenir.

Neden Bu Eğitim?

🦊Cüzdanla gerçek bağlantı

MetaMask ve WalletConnect ile kullanıcı cüzdanını güvenle bağlayıp hesap ve ağ değişimini yöneterek gerçek dApp deneyimi kurarsınız.

📝Sözleşmeyle etkileşim

ethers.js ve ABI ile akıllı sözleşmeleri okuyup işlem göndererek zincir üstü veriyi arayüze taşımayı uygulamalı öğrenirsiniz.

⚡Modern dApp yığını

wagmi, viem ve RainbowKit ile hook tabanlı, yeniden kullanılabilir ve üretime hazır bir Web3 ön yüz mimarisi kurarsınız.

Anahtar Konular

dapp eğitimiethereum front end eğitimiweb3 geliştirme eğitimiethers.js kursumetamask entegrasyonuwagmi rainbowkit eğitimiakıllı sözleşme arayüzüblockchain ön yüz geliştirmeweb3 react eğitimimerkeziyetsiz uygulama kursu

“İyi bir dApp arayüzü blokzincirin karmaşıklığını gizler; kullanıcı sadece bir düğmeye basar, güven ve şeffaflık perde arkasında çalışır.”

Ön Koşullar

Programdan en iyi verimi almak için gereken temel bilgi ve ortam

1

JavaScript ve React

Bileşen, state ve hook düzeyinde React ve modern JavaScript (async/await) bilgisi beklenir.

2

Temel blokzincir kavramı

Cüzdan, adres, işlem ve akıllı sözleşme gibi temel Ethereum kavramlarına aşinalık faydalıdır.

3

Node.js ortamı

Bilgisayarda kurulu Node.js, npm ve bir kod düzenleyici ile çalışabilen bir geliştirme ortamı gerekir.

4

MetaMask cüzdanı

Tarayıcıda kurulu MetaMask eklentisi ve test ağına (Sepolia) erişim için hazır bir cüzdan gereklidir.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı Web3 ön yüz mimarisini kavrar; ethers.js provider ve signer kurar, MetaMask ile cüzdan bağlar, hesap ve ağ değişimlerini yönetir ve zincirden bakiye okur.

Modül 1

Merkeziyetsiz Uygulama Mimarisi

Geleneksel istemci-sunucu ile dApp mimarisinin farkı
Ön yüz, akıllı sözleşme ve zincir arasındaki akış
JSON-RPC ve Ethereum düğümüyle iletişim mantığı
Infura ve Alchemy gibi RPC sağlayıcıların rolü
Test ağları (Sepolia) ve ana ağ ayrımı
dApp için proje iskeletinin React ile kurulması

Modül 2

ethers.js: Provider ve Signer

ethers.js kütüphanesinin kurulumu ve yapısı
JsonRpcProvider ile salt-okunur zincir erişimi
BrowserProvider ile cüzdan üzerinden bağlanma
Signer kavramı ve işlem imzalama yetkisi
window.ethereum nesnesinin (EIP-1193) kullanımı
Provider ve signer arasındaki rol farkının kavranması

Modül 3

MetaMask ile Cüzdan Bağlantısı

eth_requestAccounts ile bağlantı izni isteme
Bağlı hesap adresinin alınması ve gösterimi
accountsChanged olayıyla hesap değişimi yönetimi
chainChanged olayıyla ağ değişiminin ele alınması
Yanlış ağda kullanıcıyı doğru ağa yönlendirme
Bağlantı durumunun React state'inde tutulması

Modül 4

Zincirden Veri Okuma

getBalance ile ETH bakiyesinin okunması
Wei ve Ether birim dönüşümü (formatEther/parseEther)
ENS adının çözümlenmesi ve gösterimi
Blok numarası ve ağ bilgisinin sorgulanması
BigInt ile zincir değerlerinin güvenli işlenmesi
Okuma verisinin arayüzde canlı gösterimi

Günün hedefiKatılımcı ABI ile sözleşme örneği oluşturur; view fonksiyonlarını okur, işlem gönderen fonksiyonları çağırır, gas ve onay sürecini yönetir ve sözleşme olaylarını dinler.

Modül 1

ABI ve Contract Nesnesi

ABI'nin (Application Binary Interface) anlamı ve rolü
Contract nesnesinin ABI ve adresle oluşturulması
Salt-okunur ve imzalı sözleşme örneği ayrımı
Sözleşme fonksiyonlarının JavaScript'ten çağrılması
Typechain ile tip güvenli sözleşme arayüzü üretimi
Derlenmiş çıktıdan ABI ve adresin elde edilmesi

Modül 2

Okuma (View) Çağrıları

view ve pure fonksiyonların gas'sız okunması
ERC-20 token bakiyesi ve toplam arzının okunması
NFT sahibi ve tokenURI bilgisinin sorgulanması
Çoklu okuma çağrısının Multicall ile birleştirilmesi
Dönen değerlerin arayüze uygun biçimlendirilmesi
Okuma hatalarının yakalanması ve gösterimi

Modül 3

Yazma İşlemleri ve Gas

State değiştiren fonksiyonların işlem (tx) olarak gönderimi
ERC-20 transfer ve approve akışının uygulanması
Gas limiti ve gas ücretinin (EIP-1559) kavranması
estimateGas ile işlem maliyetinin önden kestirimi
tx.wait ile işlem onayının (confirmation) beklenmesi
Bekleyen ve onaylanan işlem durumunun arayüzde izlenmesi

Modül 4

Olay (Event) Dinleme

Sözleşme olaylarının (Transfer, Approval) yapısı
contract.on ile gerçek zamanlı olay dinleme
queryFilter ile geçmiş olayların çekilmesi
Olay verisiyle arayüzün otomatik güncellenmesi
Dinleyicilerin bileşen sökülürken temizlenmesi
Olay indeksli (indexed) parametrelerle filtreleme

Günün hedefiKatılımcı wagmi ve viem ile hook tabanlı mimari kurar, RainbowKit ile cüzdan arayüzü ekler, IPFS ve The Graph'ı entegre eder, hata ve UX senaryolarını yönetip güvenli bir dApp yayınlar.

Modül 1

wagmi ve viem ile Modern Mimari

wagmi ve viem kütüphanelerinin kurulumu ve yapısı
useAccount ve useConnect hook'larıyla bağlantı yönetimi
useReadContract ile bildirimsel sözleşme okuma
useWriteContract ile işlem gönderimi ve durum takibi
useWaitForTransactionReceipt ile onay yönetimi
React Query önbelleğiyle zincir verisinin yönetimi

Modül 2

RainbowKit ile Cüzdan Deneyimi

RainbowKit ile çoklu cüzdan bağlantı arayüzü
WalletConnect ile mobil cüzdan desteği
Ağ (chain) seçimi ve değişim arayüzü
Bağlantı düğmesi ve hesap görünümünün özelleştirilmesi
Birden çok zincirin (multichain) yapılandırılması
Tema ve bağlantı akışının markaya uyarlanması

Modül 3

IPFS ve The Graph Entegrasyonu

NFT meta verisinin ve görselin IPFS'te saklanması
Pinata veya nft.storage ile içerik pinleme
ipfs:// bağlantısının ağ geçidiyle gösterimi
The Graph ve subgraph ile zincir verisi sorgulama
GraphQL ile olay geçmişinin verimli çekilmesi
Zincir dışı ve zincir üstü verinin birlikte kullanımı

Modül 4

Güvenlik, UX ve Dağıtım

İşlem öncesi kullanıcıya net onay ve bilgi sunma
Sonsuz approve riskine karşı sınırlı onay yaklaşımı
Phishing ve sahte işlem istemlerine karşı farkındalık
Yükleniyor, hata ve başarı durumlarının UX tasarımı
Ortam değişkenleriyle RPC anahtarlarının yönetimi
dApp'in Vercel veya IPFS üzerinde yayınlanması

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Cüzdan bağlantısı

MetaMask ve WalletConnect ile cüzdan bağlar, hesap ve ağ değişimini güvenle yöneten bir dApp arayüzü kurarsınız.

✅

Provider/signer kullanımı

ethers.js provider ve signer'ı doğru kurarak zincir okuma ile işlem imzalama arasındaki farkı uygulamaya dökersiniz.

✅

Sözleşme okuma

ABI ve Contract nesnesiyle view fonksiyonlarını okuyup token ve NFT verisini arayüzde canlı gösterirsiniz.

✅

İşlem gönderme

State değiştiren fonksiyonları çağırır, gas'ı kestirir ve işlem onayını bekleyerek durumu kullanıcıya gösterirsiniz.

✅

Olay dinleme

Sözleşme olaylarını gerçek zamanlı dinler ve geçmiş olayları çekerek arayüzü otomatik güncel tutarsınız.

✅

Modern Web3 yığını

wagmi, viem ve RainbowKit ile hook tabanlı, yeniden kullanılabilir ve üretime hazır bir ön yüz mimarisi kurarsınız.

✅

IPFS ve The Graph

NFT verisini IPFS'te saklar ve The Graph subgraph'ı ile zincir verisini verimli biçimde sorgularsınız.

✅

Güvenli dağıtım

Approve riskleri ve phishing'e karşı güvenli UX kurup dApp'i Vercel veya IPFS üzerinde yayınlarsınız.

Kimler İçin Uygundur?

React veya temel JavaScript bilen ön yüz geliştiricileri
Web3 dünyasına geçmek isteyen yazılımcılar
akıllı sözleşmelerle etkileşen arayüz kurmak isteyen full-stack geliştiriciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

React veya temel JavaScript bilen ön yüz geliştiricileri, Web3 alanına geçmek isteyen yazılımcılar ve akıllı sözleşmelerle etkileşen arayüz kurmak isteyen full-stack geliştiriciler için uygundur. Solidity ile sözleşme yazmak bu eğitimin kapsamı değildir; odak tamamen ön yüzdedir.

Akıllı sözleşme (Solidity) yazmayı da öğretiyor mu?

Hayır, bu eğitim sözleşme yazımına değil arayüz geliştirmeye odaklanır. Hazır ve dağıtılmış örnek sözleşmelere (ERC-20 token ve NFT) karşı okuma ve yazma işlemleri yapılır. ABI'nin nasıl kullanıldığı anlatılır, ancak sözleşme geliştirme ayrı bir Solidity eğitiminin konusudur.

Gerçek para harcamam gerekir mi?

Hayır. Tüm atölyeler Sepolia test ağı üzerinde yapılır ve test ETH'si musluk (faucet) üzerinden ücretsiz alınır. Böylece işlem gönderme, gas ve onay süreçleri gerçek maliyet olmadan güvenle uygulanır.

Hangi kütüphane ve araçlar kullanılıyor?

ethers.js ve viem düşük seviye etkileşim için, wagmi hook tabanlı mimari için, RainbowKit cüzdan bağlantı arayüzü için kullanılır. Ayrıca MetaMask cüzdanı, Infura/Alchemy RPC sağlayıcıları, IPFS depolama ve The Graph sorgulama araçları uygulamalı işlenir.

Eğitim sonunda sertifika veriliyor mu?

Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Bu sertifika tamamlanan modülleri ve geliştirilen dApp arayüzü atölyelerini belgeler; kurumsal gruplara özel senaryo uyarlaması yapılabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika