create-eth-app ile dapp ön uç geliştirmenizi başlatın

Geçen sefer Solidity'nin genel resmine (opens in a new tab) göz atmış ve [create-eth-app]'ten (https://github.com/PaulRBerg/create-eth-app (opens in a new tab)) zaten bahsetmiştik. Şimdi onu nasıl kullanacağınızı, hangi özelliklerin entegre olduğunu ve nasıl genişleteceğinize dair ek fikirleri öğreneceksiniz. Sablier (opens in a new tab)'in kurucusu Paul Razvan Berg tarafından başlatılan bu uygulama, ön uç geliştirmenizi başlatacak ve aralarından seçim yapabileceğiniz çeşitli isteğe bağlı entegrasyonlarla birlikte gelir.

Kurulum

Kurulum için Yarn 0.25 veya üzeri gereklidir (npm install yarn --global). Şunları çalıştırmak kadar basittir:

yarn create eth-app my-eth-app
cd my-eth-app
yarn react-app:start

Arka planda create-react-app (opens in a new tab) kullanır. Uygulamanızı görmek için http://localhost:3000/ adresini açın. Üretime dağıtmaya hazır olduğunuzda, yarn build ile küçültülmüş bir paket oluşturun. Bunu barındırmanın kolay bir yolu Netlify (opens in a new tab)'dır. Bir GitHub deposu oluşturabilir, onu Netlify'a ekleyebilir, derleme komutunu ayarlayabilir ve işlem tamamdır! Uygulamanız barındırılacak ve herkes tarafından kullanılabilir olacak. Ve hepsi ücretsiz.

Özellikler

React ve create-react-app

Öncelikle uygulamanın kalbi: React ve create-react-app ile gelen tüm ek özellikler. Sadece bunu kullanmak, Ethereum'u entegre etmek istemiyorsanız harika bir seçenektir. React (opens in a new tab) kendi başına etkileşimli kullanıcı arayüzleri oluşturmayı gerçekten kolaylaştırır. Vue (opens in a new tab) kadar başlangıç seviyesine uygun olmayabilir, ancak yine de çoğunlukla kullanılır, daha fazla özelliğe sahiptir ve en önemlisi aralarından seçim yapabileceğiniz binlerce ek kütüphanesi vardır. create-react-app ile başlamak da gerçekten çok kolaydır ve şunları içerir:

• React, JSX, ES6, TypeScript, Flow söz dizimi desteği.
• Nesne yayma operatörü gibi ES6'nın ötesinde dil ekstraları.
• Otomatik olarak ön eklenen CSS, bu nedenle -webkit- veya diğer ön eklere ihtiyacınız olmaz.
• Kapsam raporlaması için yerleşik desteğe sahip hızlı etkileşimli birim test çalıştırıcısı.
• Yaygın hatalar hakkında uyaran canlı bir geliştirme sunucusu.
• Hash değerleri ve kaynak haritaları içeren, üretim için JS, CSS ve görüntüleri bir araya getirmeye yarayan bir derleme komut dosyası.

Özellikle create-eth-app yeni hook etkilerinden (opens in a new tab) yararlanır. Güçlü, ancak çok küçük sözde fonksiyonel bileşenler yazmak için bir yöntem. create-eth-app içinde nasıl kullanıldıklarını görmek için Apollo ile ilgili aşağıdaki bölüme bakın.

Yarn Workspaces

Yarn Workspaces (opens in a new tab) birden fazla pakete sahip olmanıza olanak tanır, ancak hepsini kök klasörden yönetebilir ve yarn install kullanarak tüm bağımlılıkları tek seferde kurabilirsiniz. Bu, özellikle create-eth-app'in bir parçası olan, akıllı sözleşme adresleri/ABI yönetimi (hangi akıllı sözleşmeleri nereye dağıttığınız ve onlarla nasıl iletişim kuracağınız hakkındaki bilgiler) veya grafik entegrasyonu gibi daha küçük ek paketler için mantıklıdır.

ethers.js

Web3 (opens in a new tab) hala çoğunlukla kullanılıyor olsa da, ethers.js (opens in a new tab) son bir yılda bir alternatif olarak çok daha fazla ilgi gördü ve create-eth-app'e entegre edilen kütüphanedir. Bununla çalışabilir, Web3'e geçebilir veya neredeyse beta sürümünden çıkmış olan ethers.js v5 (opens in a new tab)'e yükseltmeyi düşünebilirsiniz.

The Graph

GraphQL (opens in a new tab), bir Restful API (opens in a new tab) ile karşılaştırıldığında verileri işlemek için alternatif bir yoldur. Özellikle merkeziyetsiz blokzincir verileri için Restful API'lere göre çeşitli avantajları vardır. Bunun arkasındaki mantığı merak ediyorsanız, GraphQL Will Power the Decentralized Web (opens in a new tab) makalesine göz atın.

Genellikle akıllı sözleşmenizden doğrudan veri alırsınız. En son işlemin gerçekleştiği zamanı okumak mı istiyorsunuz? Bir Ethereum düğümünden merkeziyetsiz uygulamanıza veri çeken MyContract.methods.latestTradeTime().call() fonksiyonunu çağırmanız yeterlidir. Peki ya yüzlerce farklı veri noktasına ihtiyacınız varsa? Bu durum, düğüme yüzlerce veri getirilmesine neden olur ve her seferinde bir RTT (opens in a new tab) gerektirerek merkeziyetsiz uygulamanızı yavaş ve verimsiz hale getirir. Bir geçici çözüm, sözleşmenizin içinde aynı anda birden çok veri döndüren bir alıcı çağrı işlevi olabilir. Ancak bu her zaman ideal değildir.

Tarihsel verilerle de ilgileniyor olabilirsiniz. Yalnızca son işlem zamanını değil, kendi yaptığınız tüm işlemlerin zamanlarını da bilmek istiyorsunuz. create-eth-app subgraph paketini kullanın, dokümanları (opens in a new tab) okuyun ve kendi sözleşmelerinize uyarlayın. Popüler akıllı sözleşmeler arıyorsanız, zaten bir alt grafik bile olabilir. Subgraph explorer (opens in a new tab)'a göz atın.

Bir alt grafiğiniz olduğunda, bu, ihtiyacınız olan geçmiş veriler de dahil olmak üzere tüm önemli blokzincir verilerini alan merkeziyetsiz uygulamanıza basit bir sorgu yazmanıza olanak tanır; bunun için yalnızca tek bir getirme işlemi gerekir.

Apollo

Apollo Boost (opens in a new tab) entegrasyonu sayesinde grafiği React merkeziyetsiz uygulamanıza kolayca entegre edebilirsiniz. Özellikle React hook'larını ve Apollo'yu (opens in a new tab) kullanırken, veri getirmek bileşeninize tek bir GraphQL sorgusu yazmak kadar basittir:

1const { loading, error, data } = useQuery(myGraphQlQuery)
2
3React.useEffect(() => {
4  if (!loading && !error && data) {
5    console.log({ data })
6  }
7}, [loading, error, data])
Kopyala

Şablonlar

Ayrıca birkaç farklı şablon arasından seçim yapabilirsiniz. Şu ana kadar bir Aave, Compound, Uniswap veya Sablier entegrasyonu kullanabilirsiniz. Hepsi, önceden yapılmış alt grafik entegrasyonlarının yanı sıra önemli hizmet akıllı sözleşme adresleri ekler. Şablonu oluşturma komutuna yarn create eth-app my-eth-app --with-template aave gibi eklemeniz yeterlidir.

Aave

Aave (opens in a new tab) merkeziyetsiz bir para borç verme piyasasıdır. Mevduat sahipleri pasif bir gelir elde etmek için piyasaya likidite sağlarken, borçlular teminat kullanarak borç alabilirler. Aave'nin benzersiz özelliklerinden biri, krediyi tek bir işlem içinde iade ettiğiniz sürece, herhangi bir teminat olmadan borç para almanıza olanak tanıyan hızlı kredilerdir (opens in a new tab). Bu, örneğin arbitraj ticaretinde size ekstra nakit vermek için faydalı olabilir.

Size faiz kazandıran işlem görmüş token'lara aTokens denir.

create-eth-app ile Aave'yi entegre etmeyi seçtiğinizde, bir subgraph entegrasyonu (opens in a new tab) elde edersiniz. Aave, The Graph'i kullanır ve size Ropsten (opens in a new tab) ve Ana Ağ (opens in a new tab) üzerinde ham (opens in a new tab) veya biçimlendirilmiş (opens in a new tab) biçimde kullanıma hazır birkaç alt grafik sunar.

Compound

Compound (opens in a new tab), Aave'ye benzer. Entegrasyon, yeni Compound v2 Subgraph (opens in a new tab)'ı zaten içeriyor. Burada faiz kazandıran token'lara şaşırtıcı bir şekilde cTokens denir.

Uniswap

Uniswap (opens in a new tab) merkeziyetsiz bir borsadır (DEX). Likidite sağlayıcıları, bir işlemin her iki tarafı için gerekli token'ları veya ether'i sağlayarak ücret kazanabilir. Yaygın olarak kullanılır ve bu nedenle çok çeşitli token'lar için en yüksek likiditelerden birine sahiptir. Örneğin, kullanıcıların ETH'lerini DAI ile takas etmelerine olanak tanımak için merkeziyetsiz uygulamanıza kolayca entegre edebilirsiniz.

Ne yazık ki, bu yazı yazıldığı sırada entegrasyon yalnızca Uniswap v1 içindir, yeni çıkan v2 (opens in a new tab) için değildir.

Sablier

Sablier (opens in a new tab) kullanıcılara sürekli para ödemesi yapma olanağı tanır. Tek bir ödeme günü yerine, ilk kurulumdan sonra başka bir işleme gerek kalmadan paranızı sürekli olarak alırsınız. Entegrasyon, kendi alt grafiğini (opens in a new tab) içerir.

Sırada ne var?

create-eth-app hakkında sorularınız varsa, create-eth-app yazarlarıyla iletişime geçebileceğiniz Sablier topluluk sunucusuna (opens in a new tab) gidin. Bir sonraki adım olarak Material UI (opens in a new tab) gibi bir kullanıcı arayüzü (UI) çerçevesi entegre edebilir, gerçekten ihtiyacınız olan veriler için GraphQL sorguları yazabilir ve dağıtımı kurabilirsiniz.

Sayfanın son güncellenmesi: 29 Eylül 2025

m (opens in a new tab)

c (opens in a new tab)

b (opens in a new tab)

+2

Katkıda bulunanları göster