Ne inşa edeceksiniz, Bitfinity test ağındaki ve görün. canlı demoyu git repo'yu giriiş 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: 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 geliştiricisi olma konusundaki prestijli kitabımızın bir kopyasını kolayca kazanabilirsiniz. Bu teklif ilk için ücretsizdir, nasıl kazanılacağına ilişkin talimatlar için aşağıdaki kısa videoyu izleyin. sağlamlık 300 kişi Ö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: https://www.youtube.com/watch?v=qV1mbFOtkxo&embedable=true 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 izleyin eğitim videolarını Dapp Mentor Akademisi şunları içerir: Fullstack NFT Basım Kursu Fullstack NFT Pazaryeri Kursu Fullstack Blockchain Kursu vesaire. 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 dosyası oluşturun ve aşağıdaki anahtarları ekleyin: .env 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 ve ilgili proje kimliklerinizle değiştirin. <YOUR_ALCHEMY_PROJECT_ID> <WALLET_CONNECT_PROJECT_ID> : : YOUR_ALCHEMY_PROJECT_ID Anahtarı Buradan Alın WALLET_CONNECT_PROJECT_ID Anahtarı Buradan Alın Son olarak projeyi başlatmak için çalıştırın. yarn dev 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 klasörü oluşturun. store içinde iki klasör oluşturun: ve . store actions states içinde bir dosyası oluşturun. states globalStates.ts https://Gist.github.com/Daltonic/157a49fef39e3a1ac8b9a8883c6213f8?embedable=true içinde bir dosyası oluşturun. actions globalActions.ts https://Gist.github.com/Daltonic/c2217eff616b28a2261888ba77c236e7?embedable=true klasörünün içinde bir dosyası oluşturun. store globalSlices.ts https://Gist.github.com/Daltonic/69a29357cf1b9484425776a6ad4b26dd?embedable=true klasörünün içinde bir dosyası oluşturun. store index.ts https://Gist.github.com/Daltonic/7b3a9db8902d8ce831384ad42ca7231b?embedable=true dosyasını Redux sağlayıcısıyla güncelleyin. pages/_app.ts https://Gist.github.com/Daltonic/ef67f453bc38c4038edc627644d25e2a?embedable=true 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 klasörü oluşturun. contracts içinde bir dosyası oluşturun ve sözleşme kodunu aşağıya ekleyin. contracts DappFund.sol https://Gist.github.com/Daltonic/4e3f367d2b3a2227c951e74f4d58cbe8?embedable=true 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. DappFund İşte işlev bazında bir döküm: : 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. constructor() : 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 oluşturur ve bunu eşlemesine ekler. createCharity() CharityStruct charities : 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. updateCharity() : 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. deleteCharity() : 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. toggleBan() : 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 oluşturur ve bunu eşlemesine ekler. Ayrıca hayır kurumunun toplanan miktarını ve bağış sayısını da günceller. donate() SupportStruct supportersOf : 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. changeTax() : Bu işlev herkesin bir hayır kurumunun ayrıntılarını almasına olanak tanır. Verilen kimlikle ilişkili döndürür. getCharity() CharityStruct : Bu işlev herkesin tüm aktif hayır kurumlarının ayrıntılarını almasına olanak tanır. nesnelerinin bir dizisini döndürür. getCharities() CharityStruct : Bu işlev, kullanıcının tüm aktif hayır kurumlarının ayrıntılarını almasına olanak tanır. nesnelerinin bir dizisini döndürür. getMyCharities() CharityStruct : Bu işlev, herkesin belirli bir hayır kurumunun tüm destekçilerinin ayrıntılarını almasına olanak tanır. nesnelerinin bir dizisini döndürür. getSupports() SupportStruct : Bu dahili işlev fon transferi için kullanılır. Belirtilen adrese belirtilen miktarda Ether gönderir. payTo() : 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. currentTime() 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 dosyaları klasörü oluşturun. scripts içinde bir ve bir dosyası oluşturun ve aşağıdaki kodları ekleyin. scripts deploy.js seed.js Komut Dosyasını Dağıt https://Gist.github.com/Daltonic/e4038d184c36bf69ac9b6b75da321ca1?embedable=true Tohum Komut Dosyası https://Gist.github.com/Daltonic/65ca0f2dfdf0ec91bfcf78f49654b36e?embedable=true 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. https://www.youtube.com/watch?v=mVxRzkvX_w0&embedable=true Ön Uç Entegrasyonu Öncelikle proje kökünde bir klasörü oluşturun ve bunun içinde bir dosyası oluşturun. Bu dosya akıllı sözleşmemizle etkileşime girecek işlevleri içerecektir. services blockchain.tsx https://Gist.github.com/Daltonic/449b493fe7492386f6221329f3ee918b?embedable=true 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: : 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. getEthereumContracts() : Bu işlev sözleşmenin sahibini döndürür. getAdmin() , , : 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. getCharities() getMyCharities() getCharity() : Bu işlev, belirli bir hayır kurumunun destekçilerini kimliğine göre getirir. getSupporters() , : 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. createCharity() updateCharity() : Bu işlev, kullanıcının belirli bir hayır kurumuna bağışta bulunmasına olanak tanır. makeDonation() : Bu işlev, bir hayır kurumunun sahibinin onu silmesini sağlar. deleteCharity() : Bu işlev, sözleşme sahibinin bir hayır kurumunu yasaklamasına olanak tanır. banCharity() , : Bunlar, sözleşmeden döndürülen verileri daha kullanışlı bir formatta yapılandıran yardımcı işlevlerdir. structuredCharities() structuredSupporters() Aşağıdaki kodları kullanarak, içindeki dosyasını ağını içerecek şekilde güncelleyin. services provider.tsx bitfinity https://Gist.github.com/Daltonic/88476a8b642f0d1f879644ce7521e735?embedable=true 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: işlevinden veri almak için Güncelleme görüntüleme. getCharities() tüm Hayır Kurumları pages/index.tsx https://Gist.github.com/Daltonic/c7b5205c0a352e715ea6d369c4c5a739?embedable=true Redux'un ekranda görüntülenmeden önce blockchain verilerini depolamak için nasıl kullanıldığına dikkat edin. Mevcut kullanıcının hayır kurumlarını almak için kancasını kullanmak üzere güncelleyin. No 2: Kullanıcının Hayır Kurumlarını Görüntüleme useEffect() pages/projects.tsx https://Gist.github.com/Daltonic/55de269f6d41727ad2ca283adfea241e?embedable=true Lütfen mevcut kullanıcının hayır kurumlarını almak için 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. useEffect() Oluşturma form gönderimi için işlevini kullanacak şekilde güncelleyin. No 3: Yeni Hayır Kurumları pages/donations/create.tsx createCharity() https://Gist.github.com/Daltonic/58f3f813b5ee8bad45815545734c7410?embedable=true ve destekçilerini kimliğe göre almak için , ve işlevlerini kullanmak üzere Tek Yardım Kuruluşu Güncelleme görüntüleme. No 4: Hayır kurumunu getServerSideProps() getCharity() getSupporters() pages/donations/[id].tsx https://Gist.github.com/Daltonic/96c4908e8a5406ab4e85822bb16a4b6f?embedable=true kimliğe göre almak ve form alanlarını doldurmak için işlevini kullanmak üzere güncelleyin. No 5: Mevcut Hayır Kurumlarını Düzenleme Yardım kuruluşlarını getCharity() pages/donations/edit/[id].tsx https://Gist.github.com/Daltonic/045ec20e60ba4aaac4d9ae62620bff51?embedable=true Hayır kurumunu kimliğe göre almak için 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ü? getCharity() 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: işlevini kullanmak üzere güncelleyin. No 1: Charity Yasaklamasının İşlenmesi banCharity() handleBanning() components/Ban.tsx https://Gist.github.com/Daltonic/3890759a4c5a9d83b292c1e8cbb31d91?embedable=true Bir hayır kurumu listeden çıkarma prosedürünü yürütmek amacıyla ve işlevlerini kullanmak için dosyasını güncelleyin. No 2: Hayır Kurumunun Silinmesini İşleme handleDelete() deleteCharity() components/Delete.tsx https://Gist.github.com/Daltonic/a9dd133448062c32990435e9a762d17d?embedable=true işlevini kullanmak üzere dosyasını güncelleyin. No 3: Hayır Kurumlarına Bağış Yapmak handleSubmit() makeDonation() components/Donor.tsx https://Gist.github.com/Daltonic/9e82883fd17884330d2a82d5cf641eae?embedable=true Diğer bileşenler İşte Redux'un bunlara entegrasyonu nedeniyle güncellemeniz gereken bileşenlerin geri kalanı. 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. NavBtn Bileşeni https://Gist.github.com/Daltonic/38280dec93f6046187f4e438dbbb9007?embedable=true , destekçiler ve yasaklama modellerini ilgili düğmelere tıklandığında tetiklemek için Redux uygulamasını gözden geçirin ve güncelleyin. Ödeme Bileşeni Bağış https://Gist.github.com/Daltonic/37f2724bec3380f9ff6dbf7771278541?embedable=true Kapat düğmesi tıklandığında destekçi modunu kapatmak için Redux uygulamasını gözden geçirin ve güncelleyin. Destek Bileşeni https://Gist.github.com/Daltonic/59c6788386f9e0bc28b93094da25fa14?embedable=true 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. sunucunuz tüm bu süre boyunca kapalıysa, çalıştırarak sunucuyu tekrar başlatabilirsiniz. Nextjs yarn dev Daha fazla bilgi edinmek için bu yapının tam videosunu izlemenizi öneririz. YouTube kanalımızda Çö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!
