1,311 okumalar

Next.js, TypeScript ve Solidity ile Merkezi Olmayan Yardım Platformu Nasıl Oluşturulur

ile Darlington Gospel 8m2024/01/16

Çok uzun; Okumak

Next.js, Solidity ve TypeScript kullanarak Web3 Merkezi Olmayan Yardım Platformu oluşturacağımız bu kapsamlı kılavuza hoş geldiniz. Bu eğitimin sonunda aşağıdakileri net bir şekilde anlayacaksınız:

featured image - Next.js, TypeScript ve Solidity ile Merkezi Olmayan Yardım Platformu Nasıl Oluşturulur

Ne inşa edeceksiniz, Bitfinity test ağındaki canlı demoyu ve git repo'yu görün.

giriiş

Next.js ile dinamik arayüzler oluşturma
Solidity ile Ethereum akıllı sözleşmeleri hazırlamak
TypeScript kullanarak statik tür denetimini birleştirme
Akıllı sözleşmelerinizi dağıtma ve onlarla etkileşimde bulunma
Blockchain tabanlı yardım platformlarının temellerini anlamak

Bu eğitime katılmanın bir bonusu olarak, aranan bir sağlamlık geliştiricisi olma konusundaki prestijli kitabımızın bir kopyasını kolayca kazanabilirsiniz. Bu teklif ilk 300 kişi için ücretsizdir, nasıl kazanılacağına ilişkin talimatlar için aşağıdaki kısa videoyu izleyin.

Önkoşullar

Benimle birlikte derlemek için aşağıdaki araçların yüklü olması gerekir:

Node.js
İplik
Git Bash
MetaMask
Next.js
Sağlamlık
Redux Araç Seti
Arka rüzgar CSS

Bu eğitime yönelik MetaMask'ı ayarlamak için lütfen aşağıdaki eğitim videosunu izleyin:

Kurulumu tamamladıktan sonra kitabımızın ücretsiz bir kopyasını almaya hak kazanırsınız. Kitabınızı talep etmek için lütfen çalışma kanıtınızı göndermek üzere formu doldurun .

3 aya kadar ücretsiz premium kurslardan yararlanmak için aşağıdaki eğitim videolarını izleyin

Dapp Mentor Akademisi şunları içerir:

Bitfinity ile yolculuğunuza bugün başlayın. İlk Hayır Kurumu Bağış Takibi dApp'inizi oluştururken hızlı, basit ve sorunsuz bir geliştirme sürecini deneyimleyin. Akıllı sözleşmelerinizi Bitfinity ağına dağıtın ve olumlu bir etki yaratın.

Bununla birlikte, öğreticiye geçelim ve projemizi kuralım.

Kurmak

Hazırlanmış bir ön uç deposunu klonlayarak ve ortam değişkenlerini ayarlayarak başlayacağız. Aşağıdaki komutları çalıştırın:

 git clone https://github.com/Daltonic/dappFundsX cd dappFundsX yarn install git checkout no_redux_no_blockchain

Daha sonra projenin kökünde bir .env dosyası oluşturun ve aşağıdaki anahtarları ekleyin:

 NEXT_PUBLIC_RPC_URL=http://127.0.0.1:8545 NEXT_PUBLIC_ALCHEMY_ID=<YOUR_ALCHEMY_PROJECT_ID> NEXT_PUBLIC_PROJECT_ID=<WALLET_CONNECT_PROJECT_ID> NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=somereallysecretsecret

<YOUR_ALCHEMY_PROJECT_ID> ve <WALLET_CONNECT_PROJECT_ID> ilgili proje kimliklerinizle değiştirin.

YOUR_ALCHEMY_PROJECT_ID : Anahtarı Buradan Alın WALLET_CONNECT_PROJECT_ID : Anahtarı Buradan Alın

Son olarak projeyi başlatmak için yarn dev çalıştırın.

Bu proje için ön ucumuz sağlam ve bazı akıllı sözleşme entegrasyonuna hazır, ancak paylaşılan bir veri alanını etkinleştirmek için uygulamamızı Reduxify'a ihtiyacımız olacak.

Redux Mağazasını Oluşturmak

Yukarıdaki görüntü Redux mağazamızın yapısını temsil etmektedir, aşırı karmaşık bir proje oluşturmadığımız için basit olacaktır.

Uygulamamızın global durumunu yönetmek için Redux'u kuracağız. Bu adımları takip et:

Proje kökünde bir store klasörü oluşturun.
store içinde iki klasör oluşturun: actions ve states .
states içinde bir globalStates.ts dosyası oluşturun.

actions içinde bir globalActions.ts dosyası oluşturun.

store klasörünün içinde bir globalSlices.ts dosyası oluşturun.

store klasörünün içinde bir index.ts dosyası oluşturun.

pages/_app.ts dosyasını Redux sağlayıcısıyla güncelleyin.

Uygulamamız Redux araç seti ile tamamlandı ve arka ucu ön uçla entegre ederken Redux'u tekrar ziyaret edeceğiz.

Akıllı Sözleşme Geliştirme

Daha sonra platformumuz için akıllı sözleşmeyi geliştireceğiz:

Proje kökünde bir contracts klasörü oluşturun.
contracts içinde bir DappFund.sol dosyası oluşturun ve sözleşme kodunu aşağıya ekleyin.

DappFund sözleşmesi, hayır kurumlarının oluşturulmasını, güncellenmesini ve bağışlanmasını kolaylaştırmanın yanı sıra hayır kurumu vergisinin değiştirilmesi ve hayır kurumunun yasaklanması gibi idari işlevleri de kolaylaştıracak.

İşte işlev bazında bir döküm:

constructor() : Bu işlev, sözleşme dağıtıldığında ilk hayır kurumu vergisini ayarlar. Sözleşmenin dağıtımı sırasında yalnızca bir kez yürütülür.
createCharity() : Bu işlev, kullanıcıların yeni bir yardım kuruluşu oluşturmasına olanak tanır. Hayır kurumunun adı, açıklaması, resmi, profili ve miktarı gibi çeşitli parametreler gerektirir. Bu parametrelerin geçerli olup olmadığını kontrol eder ve ardından yeni bir CharityStruct oluşturur ve bunu charities eşlemesine ekler.
updateCharity() : Bu işlev, bir hayır kurumunun sahibinin ayrıntılarını güncellemesine olanak tanır. Hayır kurumunun ayrıntılarını güncellemeden önce hayır kurumunun var olup olmadığını ve gönderenin hayır kurumunun sahibi olup olmadığını kontrol eder.
deleteCharity() : Bu işlev, bir hayır kurumunun sahibinin onu silinmiş olarak işaretlemesine olanak tanır. Hayır kurumunun var olup olmadığını ve gönderenin hayır kurumunun sahibi olup olmadığını, silinmiş olarak işaretlemeden önce kontrol eder.
toggleBan() : Bu işlev, sözleşme sahibinin bir hayır kurumunu yasaklamasına veya yasağını kaldırmasına olanak tanır. Yasak durumunu değiştirmeden önce hayır kurumunun var olup olmadığını kontrol eder.
donate() : Bu işlev, kullanıcıların bir hayır kurumuna bağışta bulunmasına olanak tanır. Yardım kuruluşunun var olup olmadığını, yasaklı olup olmadığını ve bağış toplama hedefine henüz ulaşmadığını kontrol eder. Daha sonra toplam bağış sayısını artırır, yeni bir SupportStruct oluşturur ve bunu supportersOf eşlemesine ekler. Ayrıca hayır kurumunun toplanan miktarını ve bağış sayısını da günceller.
changeTax() : Bu işlev, sözleşme sahibinin hayır kurumu vergisini değiştirmesine olanak tanır. Vergiyi güncellemeden önce yeni vergi yüzdesinin geçerli olup olmadığını kontrol eder.
getCharity() : Bu işlev herkesin bir hayır kurumunun ayrıntılarını almasına olanak tanır. Verilen kimlikle ilişkili CharityStruct döndürür.
getCharities() : Bu işlev herkesin tüm aktif hayır kurumlarının ayrıntılarını almasına olanak tanır. CharityStruct nesnelerinin bir dizisini döndürür.
getMyCharities() : Bu işlev, kullanıcının tüm aktif hayır kurumlarının ayrıntılarını almasına olanak tanır. CharityStruct nesnelerinin bir dizisini döndürür.
getSupports() : Bu işlev, herkesin belirli bir hayır kurumunun tüm destekçilerinin ayrıntılarını almasına olanak tanır. SupportStruct nesnelerinin bir dizisini döndürür.
payTo() : Bu dahili işlev fon transferi için kullanılır. Belirtilen adrese belirtilen miktarda Ether gönderir.
currentTime() : Bu dahili işlev, Unix Epoch'tan bu yana geçen süreyi saniye cinsinden döndürür. Bağışlara ve yardım kuruluşlarına zaman damgası koymak için kullanılır.

Sözleşme Dağıtımı ve Tohumlama

Şimdi akıllı sözleşmemizi dağıtalım ve onu bazı sahte verilerle dolduralım:

Proje kökünde bir scripts dosyaları klasörü oluşturun.
scripts içinde bir deploy.js ve bir seed.js dosyası oluşturun ve aşağıdaki kodları ekleyin.

Komut Dosyasını Dağıt

Tohum Komut Dosyası

Sözleşmeyi dağıtmak ve verilerle tohumlamak için aşağıdaki komutları çalıştırın:

 yarn hardhat node # Run in terminal 1 yarn hardhat run scripts/deploy.js # Run in terminal 2 yarn hardhat run scripts/seed.js # Run in terminal 2

Eğer bunu doğru yaptıysanız aşağıdakine benzer bir çıktı görmelisiniz:

Bu noktada akıllı sözleşmemizin ön uçumuza entegrasyonuna başlayabiliriz.

Ön Uç Entegrasyonu

Öncelikle proje kökünde bir services klasörü oluşturun ve bunun içinde bir blockchain.tsx dosyası oluşturun. Bu dosya akıllı sözleşmemizle etkileşime girecek işlevleri içerecektir.

Sağlanan kod, akıllı sözleşmemizle etkileşime geçmek için blockchain hizmetimizin TypeScript uygulamasıdır. Bu hizmet, kullanıcıların yardım platformumuzda hayır kurumları oluşturma ve güncelleme, bağış yapma ve daha fazlasını içeren eylemler gerçekleştirmesine olanak tanır.

İşte işlev bazında bir döküm:

getEthereumContracts() : Bu işlev, hizmetin etkileşime gireceği Ethereum sözleşme örneklerini alır. Kullanıcının bağlı bir Ethereum hesabı olup olmadığını kontrol eder ve bunu sözleşmeyle etkileşimde bulunmak için kullanır, aksi takdirde rastgele oluşturulmuş bir cüzdan kullanır.
getAdmin() : Bu işlev sözleşmenin sahibini döndürür.
getCharities() , getMyCharities() , getCharity() : Bu işlevler sırasıyla tüm hayır kurumlarını, geçerli kullanıcı tarafından oluşturulan hayır kurumlarını ve belirli bir hayır kurumunu kimliğine göre getirir.
getSupporters() : Bu işlev, belirli bir hayır kurumunun destekçilerini kimliğine göre getirir.
createCharity() , updateCharity() : Bu işlevler, kullanıcının sırasıyla yeni bir hayır kurumu oluşturmasına veya mevcut bir hayır kurumunu güncellemesine olanak tanır.
makeDonation() : Bu işlev, kullanıcının belirli bir hayır kurumuna bağışta bulunmasına olanak tanır.
deleteCharity() : Bu işlev, bir hayır kurumunun sahibinin onu silmesini sağlar.
banCharity() : Bu işlev, sözleşme sahibinin bir hayır kurumunu yasaklamasına olanak tanır.
structuredCharities() , structuredSupporters() : Bunlar, sözleşmeden döndürülen verileri daha kullanışlı bir formatta yapılandıran yardımcı işlevlerdir.

Aşağıdaki kodları kullanarak, services içindeki provider.tsx dosyasını bitfinity ağını içerecek şekilde güncelleyin.

Akıllı Sözleşme ile Etkileşime Giren Sayfa

Daha sonra blockchain hizmetindeki işlevleri ön uçtaki ilgili arayüzlere bağlayacağız:

No 1: getCharities() işlevinden veri almak için tüm Hayır Kurumları Güncelleme pages/index.tsx görüntüleme.

Redux'un ekranda görüntülenmeden önce blockchain verilerini depolamak için nasıl kullanıldığına dikkat edin.

No 2: Kullanıcının Hayır Kurumlarını Görüntüleme Mevcut kullanıcının hayır kurumlarını almak için useEffect() kancasını kullanmak üzere pages/projects.tsx güncelleyin.

Lütfen mevcut kullanıcının hayır kurumlarını almak için useEffect() kancasının kullanıldığına ve Redux'un birden fazla bileşen genelinde blok zincirindeki verileri işlemek ve görüntülemek için nasıl kullanıldığına dikkat edin. Bu, sayfalar ve bileşenler boyunca tekrarlanan bir model olacaktır.

No 3: Yeni Hayır Kurumları Oluşturma pages/donations/create.tsx form gönderimi için createCharity() işlevini kullanacak şekilde güncelleyin.

No 4: Hayır kurumunu ve destekçilerini kimliğe göre almak için getServerSideProps() , getCharity() ve getSupporters() işlevlerini kullanmak üzere Tek Yardım Kuruluşu Güncelleme pages/donations/[id].tsx görüntüleme.

No 5: Mevcut Hayır Kurumlarını Düzenleme Yardım kuruluşlarını kimliğe göre almak ve form alanlarını doldurmak için getCharity() işlevini kullanmak üzere pages/donations/edit/[id].tsx güncelleyin.

Hayır kurumunu kimliğe göre almak için getCharity() işlevinin nasıl kullanıldığını ve ayrıca form alanlarını doldurmak için nasıl kullanıldığını gördünüz mü?

Akıllı Sözleşmeli Bileşenler

Yukarıdaki sayfalarda yaptığımız gibi, akıllı sözleşmeyle etkileşim kurmak için aşağıdaki bileşenleri güncelleyelim:

No 1: Charity Yasaklamasının İşlenmesi banCharity() handleBanning() işlevini kullanmak üzere components/Ban.tsx güncelleyin.

No 2: Hayır Kurumunun Silinmesini İşleme Bir hayır kurumu listeden çıkarma prosedürünü yürütmek amacıyla handleDelete() ve deleteCharity() işlevlerini kullanmak için components/Delete.tsx dosyasını güncelleyin.

No 3: Hayır Kurumlarına Bağış Yapmak handleSubmit() makeDonation() işlevini kullanmak üzere components/Donor.tsx dosyasını güncelleyin.

Diğer bileşenler

İşte Redux'un bunlara entegrasyonu nedeniyle güncellemeniz gereken bileşenlerin geri kalanı.

NavBtn Bileşeni Kullanıcıların hayır kurumu bilgilerinde gezinmesine, silmesine ve düzenlemesine olanak tanıyan bileşeni inceleyin ve güncelleyin. Tıklandığında silme modunu tetiklemek için Redux'u kullanın.

Ödeme Bileşeni Bağış , destekçiler ve yasaklama modellerini ilgili düğmelere tıklandığında tetiklemek için Redux uygulamasını gözden geçirin ve güncelleyin.

Destek Bileşeni Kapat düğmesi tıklandığında destekçi modunu kapatmak için Redux uygulamasını gözden geçirin ve güncelleyin.

Bu güncellemelerin uygulanmasıyla tüm bileşenler ve sayfalar artık akıllı sözleşmeye bağlanarak projenin tamamlandığını gösteriyor.

Nextjs sunucunuz tüm bu süre boyunca kapalıysa, yarn dev çalıştırarak sunucuyu tekrar başlatabilirsiniz.

Daha fazla bilgi edinmek için bu yapının tam videosunu YouTube kanalımızda izlemenizi öneririz.

Çözüm

Bu eğitimde Next.js, Solidity ve TypeScript kullanarak Merkezi Olmayan Yardım Platformu oluşturduk. Geliştirme ortamını kurduk, Redux mağazasını kurduk ve akıllı sözleşmeyi blok zincirine yerleştirdik. Akıllı sözleşmeyi ön uçla entegre ederek kusursuz bir kullanıcı deneyimi yarattık.

Eğitim boyunca Web3 uygulamaları oluşturma, akıllı sözleşmeler oluşturma ve statik tür kontrolünü birleştirme konusunda değerli beceriler kazandınız.

Artık kendi Merkezi Olmayan Yardım Platformunuzu oluşturmaya hazırsınız. Mutlu kodlamalar ve Web3 dünyasında yeniliğinizi ortaya çıkarın!