आप क्या बना रहे होंगे, बिटफिनिटी टेस्ट नेटवर्क और पर देखें। गिट रेपो लाइव डेमो परिचय इस व्यापक गाइड में आपका स्वागत है जहां हम नेक्स्ट.जेएस, सॉलिडिटी और टाइपस्क्रिप्ट का उपयोग करके एक वेब3 विकेंद्रीकृत चैरिटी प्लेटफॉर्म का निर्माण करेंगे। इस ट्यूटोरियल के अंत तक, आपको इसकी स्पष्ट समझ हो जाएगी: Next.js के साथ गतिशील इंटरफ़ेस का निर्माण सॉलिडिटी के साथ एथेरियम स्मार्ट कॉन्ट्रैक्ट तैयार करना टाइपस्क्रिप्ट का उपयोग करके स्थैतिक प्रकार की जाँच को शामिल करना अपने स्मार्ट अनुबंधों को तैनात करना और उनके साथ इंटरैक्ट करना ब्लॉकचेन-आधारित चैरिटी प्लेटफ़ॉर्म के बुनियादी सिद्धांतों को समझना इस ट्यूटोरियल में भाग लेने के लिए बोनस के रूप में, आप इन-डिमांड डेवलपर बनने पर हमारी प्रतिष्ठित पुस्तक की एक प्रति आसानी से जीत सकते हैं। यह ऑफर पहले के लिए निःशुल्क है, जीतने के तरीके के निर्देशों के लिए नीचे दिया गया लघु वीडियो देखें। सॉलिडिटी 300 लोगों आवश्यक शर्तें मेरे साथ मिलकर निर्माण करने के लिए आपको निम्नलिखित उपकरण स्थापित करने की आवश्यकता होगी: नोड.जे.एस धागा गिट बैश मेटामास्क अगला.जे.एस दृढ़ता रिडक्स टूलकिट टेलविंड सीएसएस इस ट्यूटोरियल के लिए मेटामास्क स्थापित करने के लिए, कृपया नीचे दिया गया निर्देशात्मक वीडियो देखें: https://www.youtube.com/watch?v=qV1mbFOtkxo&embedable=true एक बार जब आप सेटअप पूरा कर लेंगे, तो आप हमारी पुस्तक की एक निःशुल्क प्रति प्राप्त करने के पात्र होंगे। अपनी पुस्तक पर दावा करने के लिए, । कृपया अपने कार्य का प्रमाण जमा करने के लिए फ़ॉर्म भरें 3 महीने तक के निःशुल्क प्रीमियम पाठ्यक्रम प्राप्त करने के लिए निम्नलिखित देखें निर्देशात्मक वीडियो डैप मेंटर्स अकादमी, जिसमें शामिल हैं: फुलस्टैक एनएफटी मिंटिंग कोर्स फुलस्टैक एनएफटी मार्केटप्लेस कोर्स फुलस्टैक ब्लॉकचेन कोर्स वगैरह। आज ही बिटफिनिटी के साथ अपनी यात्रा शुरू करें। जब आप अपना पहला चैरिटी डोनेशन ट्रैकिंग डीएपी बनाते हैं तो तेज़, सरल और परेशानी मुक्त विकास प्रक्रिया का अनुभव करें। अपने स्मार्ट अनुबंधों को बिटफ़िनिटी नेटवर्क पर तैनात करें और सकारात्मक प्रभाव डालें। ऐसा कहने के साथ, आइए ट्यूटोरियल पर जाएं और अपना प्रोजेक्ट सेट करें। स्थापित करना हम एक तैयार फ्रंटएंड रिपॉजिटरी की क्लोनिंग और पर्यावरण चर स्थापित करके शुरुआत करेंगे। निम्नलिखित आदेश चलाएँ: git clone https://github.com/Daltonic/dappFundsX cd dappFundsX yarn install git checkout no_redux_no_blockchain इसके बाद, प्रोजेक्ट के रूट पर एक फ़ाइल बनाएं और निम्नलिखित कुंजियाँ शामिल करें: .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 और को अपने संबंधित प्रोजेक्ट आईडी से बदलें। <YOUR_ALCHEMY_PROJECT_ID> <WALLET_CONNECT_PROJECT_ID> : : YOUR_ALCHEMY_PROJECT_ID कुंजी यहां प्राप्त करें WALLET_CONNECT_PROJECT_ID कुंजी यहां प्राप्त करें अंत में, प्रोजेक्ट शुरू करने के लिए चलाएँ। yarn dev इस परियोजना के लिए हमारा फ्रंटएंड ठोस है और कुछ स्मार्ट अनुबंध एकीकरण के लिए तैयार है, लेकिन साझा डेटा स्थान को सक्षम करने के लिए हमें अपने एप्लिकेशन को Reduxify की आवश्यकता होगी। Redux स्टोर का निर्माण उपरोक्त छवि हमारे Redux स्टोर की संरचना को दर्शाती है, यह सरल होगी क्योंकि हम कोई अत्यधिक जटिल प्रोजेक्ट नहीं बना रहे हैं। हम अपने एप्लिकेशन की वैश्विक स्थिति को प्रबंधित करने के लिए Redux की स्थापना करेंगे। इन चरणों का पालन करें: प्रोजेक्ट रूट पर एक फ़ोल्डर बनाएं। store के अंदर, दो फ़ोल्डर बनाएं: और । store actions states के अंदर, एक फ़ाइल बनाएं। states globalStates.ts https://gist.github.com/Daltonic/157a49fef39e3a1ac8b9a8883c6213f8?embedable=true के अंदर, एक फ़ाइल बनाएं। actions globalActions.ts https://gist.github.com/Daltonic/c2217eff616b28a2261888ba77c236e7?embedable=true फ़ोल्डर के अंदर एक फ़ाइल बनाएं। store globalSlices.ts https://gist.github.com/Daltonic/69a29357cf1b9484425776a6ad4b26dd?embedable=true फ़ोल्डर के अंदर एक फ़ाइल बनाएं। store index.ts https://gist.github.com/Daltonic/7b3a9db8902d8ce831384ad42ca7231b?embedable=true Redux प्रदाता के साथ फ़ाइल को अपडेट करें। pages/_app.ts https://gist.github.com/Daltonic/ef67f453bc38c4038edc627644d25e2a?embedable=true हमारे एप्लिकेशन को Redux टूलकिट के साथ लपेटा गया है, और बैकएंड को फ्रंटएंड के साथ एकीकृत करते समय हम Redux पर फिर से विचार करेंगे। स्मार्ट अनुबंध विकास इसके बाद, हम अपने प्लेटफ़ॉर्म के लिए स्मार्ट अनुबंध विकसित करेंगे: प्रोजेक्ट रूट पर एक फ़ोल्डर बनाएं। contracts के अंदर, एक फ़ाइल बनाएं और नीचे अनुबंध कोड जोड़ें। contracts DappFund.sol https://gist.github.com/Daltonic/4e3f367d2b3a2227c951e74f4d58cbe8?embedable=true अनुबंध दान के निर्माण, अद्यतन और दान की सुविधा प्रदान करेगा, साथ ही दान कर को बदलने और दान पर प्रतिबंध लगाने जैसे प्रशासनिक कार्यों की सुविधा भी देगा। DappFund यहां फ़ंक्शन-दर-फ़ंक्शन विश्लेषण दिया गया है: : यह फ़ंक्शन अनुबंध लागू होने पर प्रारंभिक चैरिटी टैक्स निर्धारित करता है। अनुबंध की तैनाती के दौरान इसे केवल एक बार निष्पादित किया जाता है। constructor() : यह फ़ंक्शन उपयोगकर्ताओं को एक नई चैरिटी बनाने की अनुमति देता है। इसके लिए नाम, विवरण, छवि, प्रोफ़ाइल और दान की राशि जैसे कई मापदंडों की आवश्यकता होती है। यह जाँचता है कि ये पैरामीटर मान्य हैं और फिर एक नया बनाता है और इसे मैपिंग में जोड़ता है। createCharity() CharityStruct charities : यह फ़ंक्शन किसी चैरिटी के मालिक को अपना विवरण अपडेट करने की अनुमति देता है। यह चैरिटी के विवरण को अपडेट करने से पहले जांच करता है कि चैरिटी मौजूद है और प्रेषक चैरिटी का मालिक है। updateCharity() : यह फ़ंक्शन किसी चैरिटी के मालिक को इसे हटाए गए के रूप में चिह्नित करने की अनुमति देता है। यह इसे हटाए गए के रूप में चिह्नित करने से पहले जांच करता है कि चैरिटी मौजूद है और प्रेषक चैरिटी का मालिक है। deleteCharity() : यह फ़ंक्शन अनुबंध स्वामी को किसी चैरिटी पर प्रतिबंध लगाने या उसे हटाने की अनुमति देता है। यह जांच करता है कि चैरिटी अपनी प्रतिबंधित स्थिति को बदलने से पहले मौजूद है या नहीं। toggleBan() : यह फ़ंक्शन उपयोगकर्ताओं को किसी चैरिटी के लिए दान करने की अनुमति देता है। यह जाँच करता है कि दान मौजूद है, प्रतिबंधित नहीं है, और अभी तक अपने धन उगाहने के लक्ष्य तक नहीं पहुंचा है। इसके बाद यह कुल दान संख्या बढ़ाता है, एक नया बनाता है, और इसे मैपिंग में जोड़ता है। यह चैरिटी की जुटाई गई राशि और दान संख्या को भी अपडेट करता है। donate() SupportStruct supportersOf : यह फ़ंक्शन अनुबंध स्वामी को चैरिटी टैक्स बदलने की अनुमति देता है। यह टैक्स अपडेट करने से पहले जांचता है कि नया टैक्स प्रतिशत वैध है या नहीं। changeTax() : यह फ़ंक्शन किसी को भी चैरिटी का विवरण प्राप्त करने की अनुमति देता है। यह दी गई आईडी से संबद्ध लौटाता है। getCharity() CharityStruct : यह फ़ंक्शन किसी को भी सभी सक्रिय चैरिटी का विवरण प्राप्त करने की अनुमति देता है। यह ऑब्जेक्ट्स की एक श्रृंखला लौटाता है। getCharities() CharityStruct : यह फ़ंक्शन उपयोगकर्ता को उनके सभी सक्रिय दान का विवरण प्राप्त करने की अनुमति देता है। यह ऑब्जेक्ट्स की एक श्रृंखला लौटाता है। getMyCharities() CharityStruct : यह फ़ंक्शन किसी को भी किसी विशिष्ट चैरिटी के सभी समर्थकों का विवरण प्राप्त करने की अनुमति देता है। यह ऑब्जेक्ट्स की एक सरणी लौटाता है। getSupports() SupportStruct : इस आंतरिक फ़ंक्शन का उपयोग फंड ट्रांसफर करने के लिए किया जाता है। यह दिए गए पते पर ईथर की निर्दिष्ट मात्रा भेजता है। payTo() : यह आंतरिक फ़ंक्शन यूनिक्स युग के बाद से वर्तमान समय को सेकंडों में लौटाता है। इसका उपयोग दान और दान कार्यों पर टाइमस्टैम्प लगाने के लिए किया जाता है। currentTime() अनुबंध परिनियोजन और सीडिंग अब, आइए अपना स्मार्ट अनुबंध तैनात करें और इसे कुछ डमी डेटा से भर दें: प्रोजेक्ट रूट पर एक फ़ोल्डर बनाएँ। scripts के अंदर, एक और एक फ़ाइल बनाएं और निम्नलिखित कोड जोड़ें। scripts deploy.js seed.js स्क्रिप्ट तैनात करें https://gist.github.com/Daltonic/e4038d184c36bf69ac9b6b75da321ca1?embedable=true बीज लिपि https://gist.github.com/Daltonic/65ca0f2dfdf0ec91bfcf78f49654b36e?embedable=true अनुबंध को तैनात करने और उसे डेटा से जोड़ने के लिए निम्नलिखित कमांड चलाएँ: 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 यदि आपने इसे सही ढंग से किया है, तो आपको नीचे जैसा समान आउटपुट देखना चाहिए: इस बिंदु पर हम अपने स्मार्ट अनुबंध का अपने फ्रंटएंड पर एकीकरण शुरू कर सकते हैं। https://www.youtube.com/watch?v=mVxRzkvX_w0&embedable=true फ्रंटएंड एकीकरण सबसे पहले, प्रोजेक्ट रूट पर एक फ़ोल्डर बनाएं और उसके अंदर एक फ़ाइल बनाएं। इस फ़ाइल में हमारे स्मार्ट अनुबंध के साथ इंटरैक्ट करने के फ़ंक्शन शामिल होंगे। services blockchain.tsx https://gist.github.com/Daltonic/449b493fe7492386f6221329f3ee918b?embedable=true प्रदान किया गया कोड हमारे स्मार्ट अनुबंध के साथ बातचीत के लिए हमारी ब्लॉकचेन सेवा का एक टाइपस्क्रिप्ट कार्यान्वयन है। यह सेवा उपयोगकर्ताओं को हमारे चैरिटी प्लेटफ़ॉर्म पर कार्य करने में सक्षम बनाती है, जिसमें चैरिटी बनाना और अपडेट करना, दान करना और बहुत कुछ शामिल है। यहां फ़ंक्शन-दर-फ़ंक्शन विश्लेषण दिया गया है: : यह फ़ंक्शन एथेरियम अनुबंध उदाहरण प्राप्त करता है जिसके साथ सेवा इंटरैक्ट करेगी। यह जांचता है कि क्या उपयोगकर्ता के पास एक कनेक्टेड एथेरियम खाता है और वह अनुबंध के साथ बातचीत करने के लिए इसका उपयोग करता है, अन्यथा, यह यादृच्छिक रूप से बनाए गए वॉलेट का उपयोग करता है। getEthereumContracts() : यह फ़ंक्शन अनुबंध के स्वामी को लौटाता है। getAdmin() , , : ये फ़ंक्शन क्रमशः सभी चैरिटी, वर्तमान उपयोगकर्ता द्वारा बनाई गई चैरिटी और उसकी आईडी द्वारा एक विशिष्ट चैरिटी प्राप्त करते हैं। getCharities() getMyCharities() getCharity() : यह फ़ंक्शन किसी विशिष्ट चैरिटी के समर्थकों को उसकी आईडी द्वारा लाता है। getSupporters() , : ये फ़ंक्शन उपयोगकर्ता को क्रमशः एक नई चैरिटी बनाने या मौजूदा चैरिटी को अपडेट करने की अनुमति देते हैं। createCharity() updateCharity() : यह फ़ंक्शन उपयोगकर्ता को किसी विशिष्ट चैरिटी के लिए दान करने की अनुमति देता है। makeDonation() : यह फ़ंक्शन किसी चैरिटी के मालिक को इसे हटाने की अनुमति देता है। deleteCharity() : यह फ़ंक्शन अनुबंध स्वामी को किसी दान पर प्रतिबंध लगाने की अनुमति देता है। banCharity() , : ये सहायक कार्य हैं जो अनुबंध से लौटाए गए डेटा को अधिक उपयोगी प्रारूप में संरचित करते हैं। structuredCharities() structuredSupporters() निम्नलिखित कोड का उपयोग करके नेटवर्क को शामिल करने के लिए के अंदर फ़ाइल को अपडेट करें। bitfinity services provider.tsx https://gist.github.com/Daltonic/88476a8b642f0d1f879644ce7521e735?embedable=true स्मार्ट कॉन्ट्रैक्ट के साथ इंटरेक्शन पेज इसके बाद, हम ब्लॉकचेन सेवा के कार्यों को फ्रंटएंड में उनके संबंधित इंटरफेस से लिंक करेंगे: फ़ंक्शन से डेटा प्राप्त करने के लिए सभी चैरिटी अपडेट प्रदर्शित करना। नंबर 1: getCharities() pages/index.tsx https://gist.github.com/Daltonic/c7b5205c0a352e715ea6d369c4c5a739?embedable=true ध्यान दें कि स्क्रीन पर प्रदर्शित होने से पहले ब्लॉकचेन डेटा को संग्रहीत करने के लिए Redux का उपयोग कैसे किया जाता है। वर्तमान उपयोगकर्ता की चैरिटी प्राप्त करने के लिए हुक का उपयोग करने के लिए अपडेट करें। नंबर 2: उपयोगकर्ता की चैरिटी प्रदर्शित करना useEffect() pages/projects.tsx https://gist.github.com/Daltonic/55de269f6d41727ad2ca283adfea241e?embedable=true कृपया वर्तमान उपयोगकर्ता के दान को पुनः प्राप्त करने के लिए हुक के उपयोग पर ध्यान दें और कई घटकों में ब्लॉकचेन से डेटा को संभालने और प्रदर्शित करने के लिए Redux का उपयोग कैसे किया जाता है। यह सभी पृष्ठों और घटकों में दोहराया जाने वाला पैटर्न होगा। useEffect() फॉर्म सबमिशन के लिए फ़ंक्शन का उपयोग करने के लिए अपडेट करें। नंबर 3: नई चैरिटी बनाना createCharity() pages/donations/create.tsx https://gist.github.com/Daltonic/58f3f813b5ee8 Bad45815545734c7410?embedable=true आईडी के आधार पर चैरिटी और समर्थकों को पुनः प्राप्त करने के लिए , और फ़ंक्शंस का उपयोग करने के लिए सिंगल चैरिटी अपडेट प्रदर्शित करना। नंबर 4: getServerSideProps() getCharity() getSupporters() pages/donations/[id].tsx https://gist.github.com/Daltonic/96c4908e8a5406ab4e85822bb16a4b6f?embedable=true आईडी द्वारा चैरिटी प्राप्त करने और फॉर्म फ़ील्ड को पॉप्युलेट करने के लिए फ़ंक्शन का उपयोग करने के लिए अपडेट करें। नंबर 5: मौजूदा चैरिटी का संपादन getCharity() pages/donations/edit/[id].tsx https://gist.github.com/Daltonic/045ec20e60ba4aaac4d9ae62620bff51?embedable=true क्या आपने देखा कि कैसे फ़ंक्शन का उपयोग आईडी द्वारा चैरिटी पुनर्प्राप्त करने के लिए किया गया था और यह भी कि इसका उपयोग फॉर्म फ़ील्ड को पॉप्युलेट करने के लिए कैसे किया गया था? getCharity() स्मार्ट कॉन्ट्रैक्ट वाले घटक जैसा कि हमने उपरोक्त पृष्ठों के साथ किया, आइए स्मार्ट अनुबंध के साथ इंटरैक्ट करने के लिए निम्नलिखित घटकों को अपडेट करें: फ़ंक्शन का उपयोग करने के लिए अपडेट करें। नंबर 1: चैरिटी बैनिंग को संभालना, handleBanning() banCharity() components/Ban.tsx https://gist.github.com/Daltonic/3890759a4c5a9d83b292c1e8cbb31d91?embedable=true नंबर 2: चैरिटी अनलिस्टिंग प्रक्रिया को निष्पादित करने के लिए और फ़ंक्शंस का उपयोग करने के लिए चैरिटी डिलीशन अपडेट फ़ाइल को । handleDelete() deleteCharity() components/Delete.tsx संभालना https://gist.github.com/Daltonic/a9dd133448062c32990435e9a762d17d?embedable=true फ़ंक्शन का उपयोग करने के लिए फ़ाइल को अपडेट करें। नंबर 3: चैरिटी के लिए दान करना handleSubmit() makeDonation() components/Donor.tsx https://gist.github.com/Daltonic/9e82883fd17884330d2a82d5cf641eae?embedable=true अन्य घटक यहां बाकी घटक हैं जिन्हें आपको भी अपडेट करना चाहिए क्योंकि उनमें Redux का एकीकरण है। उस घटक की समीक्षा और अद्यतन करता है जो उपयोगकर्ताओं को चैरिटी जानकारी को नेविगेट करने, हटाने और संपादित करने में सक्षम बनाता है। क्लिक करने पर डिलीट मोड को ट्रिगर करने के लिए Redux का उपयोग करें। NavBtn घटक https://gist.github.com/Daltonic/38280dec93f6046187f4e438dbbb9007?embedable=true दान, समर्थकों और उनके संबंधित बटन पर क्लिक करने पर प्रतिबंध लगाने वाले मॉडलों को ट्रिगर करने के लिए Redux के कार्यान्वयन की समीक्षा और अद्यतन करता है। भुगतान घटक https://gist.github.com/Daltonic/37f2724bec3380f9ff6dbf7771278541?embedable=true समीक्षा करता है और क्लोज़ बटन पर क्लिक करने पर समर्थक मोडल को बंद करने के लिए Redux के कार्यान्वयन को अद्यतन करता है। समर्थन घटक https://gist.github.com/Daltonic/59c6788386f9e0bc28b93094da25fa14?embedable=true इन अद्यतनों को लागू करने से, सभी घटक और पेज अब स्मार्ट अनुबंध से जुड़ गए हैं, जो परियोजना के पूरा होने का प्रतीक है। यदि आपका सर्वर इस दौरान डाउन था, तो आप चलाकर इसे फिर से चालू कर सकते हैं। नेक्स्टजेएस yarn dev आगे सीखने के लिए, हम अपने पर इस निर्माण का पूरा वीडियो देखने की सलाह देते हैं। YouTube चैनल निष्कर्ष इस ट्यूटोरियल में, हमने नेक्स्ट.जेएस, सॉलिडिटी और टाइपस्क्रिप्ट का उपयोग करके एक विकेंद्रीकृत चैरिटी प्लेटफ़ॉर्म बनाया है। हमने विकास परिवेश स्थापित किया, Redux स्टोर बनाया, और ब्लॉकचेन में स्मार्ट अनुबंध तैनात किया। स्मार्ट कॉन्ट्रैक्ट को फ्रंटएंड के साथ एकीकृत करके, हमने एक सहज उपयोगकर्ता अनुभव बनाया। पूरे ट्यूटोरियल के दौरान, आपने Web3 एप्लिकेशन बनाने, स्मार्ट कॉन्ट्रैक्ट तैयार करने और स्टेटिक टाइप चेकिंग को शामिल करने में मूल्यवान कौशल हासिल किए। अब, आप अपना स्वयं का विकेंद्रीकृत चैरिटी प्लेटफ़ॉर्म बनाने के लिए तैयार हैं। हैप्पी कोडिंग और Web3 की दुनिया में अपने नवाचार को उजागर करें!
