Ana içeriğe geç

Bu sayfanın güncellenmesine yardım edin

🌏

Bu sayfanın yeni bir sürümü vardır ancak şu anda yalnızca İngilizce'dir. Son sürümü çevirmemize yardımcı ol.

Sayfayı çevir
İngilizce'yi gör

Burada hata yok!🐛

Bu sayfa tercüme edilmiyor. Bu sayfayı şimdilik kasıtlı olarak İngilizce bıraktık.

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

create-eth-app
ön uç
javascript
ethers.js
the graph
aave
compound
uniswap
sablier
Yeni başlayan
✍Markus Waas
📚soliditydeveloper.com
📆27 Nisan 2020
⏱️5 dakikalık okuma

Geçen sefer Solidity'nin büyük resmine baktık ve hâlihazırda create-eth-app'den bahsettik. Şimdi onu nasıl kullanacağınızı, hangi özelliklerin entegre olduğunu ve nasıl genişleteceğinize dair ek fikirleri öğreneceksiniz. Sablier'in kurucusu Paul Razvan Berg tarafından başlatılan bu uygulama, ön uç geliştirmenizi başlatacak ve beraberinde aralarından seçim yapabileceğiniz çeşitli isteğe bağlı entegrasyonlar getiriyor.

Kurulum

Kurulum için Yarn 0.25 veya üstü gerekir (npm install thread --global). Şunları çalıştırmak kadar kolaydır:

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

Perde arkasında create-react-app kullanır. Uygulamanızı görmek için, http://localhost:3000/ bağlantısını açın. Üretime dağıtmaya hazır olduğunuzda, yarn build ile küçültülmüş bir paket oluşturun. Bunu sunmanın kolay yollarından biri Netlify'dır. Bir GitHub deposu oluşturmanız, Netlify'a eklemeniz ve build komutunu kurmanız yeterli olur! 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 kendi başına interaktif UI'lar yapmayı gerçekten kolaylaştırır. Vue kadar yeni başlayanlar için uygun olmayabilir, ancak yine de çoğunlukla kullanılmaktadır, daha fazla özelliğe sahiptir ve en önemlisi aralarından seçim yapabileceğiniz binlerce ek kütüphane vardır. create-react-app, onunla başlamayı gerçekten kolaylaştırı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ı.
  • Autoprefixer CSS, yani -webkit- veya diğer ön eklere ihtiyacınız yok.
  • 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 kanca efektlerini kullanır. Güçlü, ancak çok küçük sözde fonksiyonel bileşenler yazmak için bir yöntem. create-eth-app'de nasıl kullanıldığını öğrenmek için aşağıdaki Apollo hakkındaki bölüme bakın.

Yarn Workspaces

Yarn Workspaces, birden çok pakete sahip olmanızın yanı sıra kök klasörden hepsini aynı anda yarn install kullanarak yönetmenize izin verir. Bu, özellikle her ikisi de create-eth-app'in bir parçası olan akıllı sözleşme adresleri/ABI yönetimi (hangi akıllı sözleşmeleri nereye yerleştirdiğiniz ve bunlarla nasıl iletişim kuracağınızla ilgili bilgiler) veya grafik entegrasyonu gibi daha küçük ek paketler için mantıklıdır.

ethers.js

Web3 hâlâ çoğunlukla kullanılıyor olsa da, ethers.js son yıl içinde bir alternatif olarak büyük bir ivme kazanmıştır ve create-eth-app içine entegre edilmiştir. Bununla çalışabilir, onu Web3 olarak değiştirebilir veya neredeyse beta sürümünden çıkmış olan ethers.js v5'e yükseltmeyi düşünebilirsiniz.

The Graph

GraphQL, Restful API'ye kıyasla verileri işlemenin alternatif bir yoludur. Özellikle merkeziyetsiz blok zinciri verileri için Restful Api'lere göre çeşitli avantajları vardır. Eğer bunun ardındaki sebepler konusunda meraklıysanız, GraphQL Merkeziyetsiz Ağı Güçlendirecek'e bir 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? Verileri Infura gibi bir Ethereum düğümünden Dapp'inize getiren MyContract.methods.latestTradeTime().call()'u çağırmanız yeterlidir. Peki ya yüzlerce farklı veri noktasına ihtiyacınız varsa? Bu, düğüme yüzlerce veri alınmasına yol açar ve bu alımların her biri bir RTT gerektirerek Dapp'inizi yavaş ve verimsiz hâle 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 alt grafik paketini kullanın, belgeleri okuyun ve kendi sözleşmelerinize uyarlayın. Popüler akıllı sözleşmeler arıyorsanız, zaten bir alt grafik bile olabilir. Alt grafik gezgini'ne bir göz atın.

Bir alt grafiğiniz olduğunda, ihtiyacınız olan geçmiş veriler de dahil olmak üzere tüm önemli blok zinciri verilerini alan Dapp'inize basit bir sorgu yazmanıza olanak tanır, yalnızca tek bir getirme gerekir.

Apollo

Apollo Boost entegrasyonu sayesinde grafiği React Dapp'inizde kolayca entegre edebilirsiniz. Özellikle React hooks ve Apollo kullanılırken, verileri almak, 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])
8
📋 Kopyala

Şablonlar

Üstte birkaç farklı şablon arasından seçim yapabilirsiniz. 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 şeklinde eklemeniz yeterlidir.

Aave

Aave merkeziyetsiz bir 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 bir özelliği, krediyi tek işlemde iade ettiğiniz sürece herhangi bir teminat olmadan borç para almanıza olanak tanıyan hızlı kredilerdir. Bu, örneğin arbitraj ticaretinde size ekstra nakit vermek için faydalı olabilir.

Size faiz kazandıran takas edilmiş token'lara aTokens denir.

Aave'yi create-eth-app ile entegre etmek istediğinizde, bir alt grafik entegrasyonu alacaksınız. Aave, The Graph'i kullanır ve size Ropsten ve Mainnet'te saf veya formatlanmış olarak birkaç kullanıma hazır alt grafik sağlar.

Aave Hızlı Kredi meme'i - "Şey, hızlı kredimi 1 işlemden daha uzun süre tutabilseydim, bu müthiş olurdu"

Compound

Compound, Aave'ye benzer. Bu entegrasyon hâlihazırda yeni Compound v2 Alt Grafiğini kapsar. Burada faiz kazandıran token'lara şaşırtıcı bir şekilde cTokens denir.

Uniswap

Uniswap, merkeziyetsiz bir borsadır (DEX). Likidite sağlayıcıları, bir ticaretin her iki tarafı için gerekli token'ları veya ether'ı 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 değiştirmelerine izin vermek için Dapp'inize kolayca entegre edebilirsiniz.

Ne yazık ki, bu yazının yazıldığı sırada entegrasyon yalnızca Uniswap v1 içindir ve yeni yayınlanan v2 için değildir.

Sablier

Sablier, kullanıcıların para ödemeleri akışına izin verir. Tek bir ödeme günü yerine, ilk kurulumdan sonra başka bir yönetim olmaksızın paranızı sürekli olarak alırsınız. Bu entegrasyon kendi alt grafiğini içerir.

Sırada ne var?

create-eth-app hakkında sorularınız varsa, create-eth-app'in yazarlarıyla iletişim kurabileceğiniz Sablier topluluk sunucusuna gidebilirsiniz. Bir sonraki adım olarak Material UI gibi bir UI çerçevesini entegre edebilir, ihtiyacınız olan veriler için GraphQL sorguları yazabilir ve dağıtımı kurabilirsiniz.

Son düzenleme: , Invalid DateTime
Sayfayı düzenle

Bu sayfa yararlı oldu mu?