1,311 रीडिंग

Next.js, टाइपस्क्रिप्ट और सॉलिडिटी के साथ एक विकेंद्रीकृत चैरिटी प्लेटफ़ॉर्म कैसे बनाएं

द्वारा Darlington Gospel 8m2024/01/16

बहुत लंबा; पढ़ने के लिए

इस व्यापक गाइड में आपका स्वागत है जहां हम नेक्स्ट.जेएस, सॉलिडिटी और टाइपस्क्रिप्ट का उपयोग करके एक वेब3 विकेंद्रीकृत चैरिटी प्लेटफॉर्म का निर्माण करेंगे। इस ट्यूटोरियल के अंत तक, आपको इसकी स्पष्ट समझ हो जाएगी:

featured image - Next.js, टाइपस्क्रिप्ट और सॉलिडिटी के साथ एक विकेंद्रीकृत चैरिटी प्लेटफ़ॉर्म कैसे बनाएं

आप क्या बना रहे होंगे, बिटफिनिटी टेस्ट नेटवर्क और गिट रेपो पर लाइव डेमो देखें।

परिचय

Next.js के साथ गतिशील इंटरफ़ेस का निर्माण
सॉलिडिटी के साथ एथेरियम स्मार्ट कॉन्ट्रैक्ट तैयार करना
टाइपस्क्रिप्ट का उपयोग करके स्थैतिक प्रकार की जाँच को शामिल करना
अपने स्मार्ट अनुबंधों को तैनात करना और उनके साथ इंटरैक्ट करना
ब्लॉकचेन-आधारित चैरिटी प्लेटफ़ॉर्म के बुनियादी सिद्धांतों को समझना

इस ट्यूटोरियल में भाग लेने के लिए बोनस के रूप में, आप इन-डिमांड सॉलिडिटी डेवलपर बनने पर हमारी प्रतिष्ठित पुस्तक की एक प्रति आसानी से जीत सकते हैं। यह ऑफर पहले 300 लोगों के लिए निःशुल्क है, जीतने के तरीके के निर्देशों के लिए नीचे दिया गया लघु वीडियो देखें।

आवश्यक शर्तें

मेरे साथ मिलकर निर्माण करने के लिए आपको निम्नलिखित उपकरण स्थापित करने की आवश्यकता होगी:

नोड.जे.एस
धागा
गिट बैश
मेटामास्क
अगला.जे.एस
दृढ़ता
रिडक्स टूलकिट
टेलविंड सीएसएस

इस ट्यूटोरियल के लिए मेटामास्क स्थापित करने के लिए, कृपया नीचे दिया गया निर्देशात्मक वीडियो देखें:

एक बार जब आप सेटअप पूरा कर लेंगे, तो आप हमारी पुस्तक की एक निःशुल्क प्रति प्राप्त करने के पात्र होंगे। अपनी पुस्तक पर दावा करने के लिए, कृपया अपने कार्य का प्रमाण जमा करने के लिए फ़ॉर्म भरें ।

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 फ़ाइल बनाएं।

actions के अंदर, एक globalActions.ts फ़ाइल बनाएं।

store फ़ोल्डर के अंदर एक globalSlices.ts फ़ाइल बनाएं।

store फ़ोल्डर के अंदर एक index.ts फ़ाइल बनाएं।

Redux प्रदाता के साथ pages/_app.ts फ़ाइल को अपडेट करें।

हमारे एप्लिकेशन को Redux टूलकिट के साथ लपेटा गया है, और बैकएंड को फ्रंटएंड के साथ एकीकृत करते समय हम Redux पर फिर से विचार करेंगे।

स्मार्ट अनुबंध विकास

इसके बाद, हम अपने प्लेटफ़ॉर्म के लिए स्मार्ट अनुबंध विकसित करेंगे:

प्रोजेक्ट रूट पर एक contracts फ़ोल्डर बनाएं।
contracts के अंदर, एक DappFund.sol फ़ाइल बनाएं और नीचे अनुबंध कोड जोड़ें।

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 फ़ाइल बनाएं और निम्नलिखित कोड जोड़ें।

स्क्रिप्ट तैनात करें

बीज लिपि

अनुबंध को तैनात करने और उसे डेटा से जोड़ने के लिए निम्नलिखित कमांड चलाएँ:
```
 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
```

यदि आपने इसे सही ढंग से किया है, तो आपको नीचे जैसा समान आउटपुट देखना चाहिए:

इस बिंदु पर हम अपने स्मार्ट अनुबंध का अपने फ्रंटएंड पर एकीकरण शुरू कर सकते हैं।

फ्रंटएंड एकीकरण

सबसे पहले, प्रोजेक्ट रूट पर एक services फ़ोल्डर बनाएं और उसके अंदर एक blockchain.tsx फ़ाइल बनाएं। इस फ़ाइल में हमारे स्मार्ट अनुबंध के साथ इंटरैक्ट करने के फ़ंक्शन शामिल होंगे।

प्रदान किया गया कोड हमारे स्मार्ट अनुबंध के साथ बातचीत के लिए हमारी ब्लॉकचेन सेवा का एक टाइपस्क्रिप्ट कार्यान्वयन है। यह सेवा उपयोगकर्ताओं को हमारे चैरिटी प्लेटफ़ॉर्म पर कार्य करने में सक्षम बनाती है, जिसमें चैरिटी बनाना और अपडेट करना, दान करना और बहुत कुछ शामिल है।

यहां फ़ंक्शन-दर-फ़ंक्शन विश्लेषण दिया गया है:

getEthereumContracts() : यह फ़ंक्शन एथेरियम अनुबंध उदाहरण प्राप्त करता है जिसके साथ सेवा इंटरैक्ट करेगी। यह जांचता है कि क्या उपयोगकर्ता के पास एक कनेक्टेड एथेरियम खाता है और वह अनुबंध के साथ बातचीत करने के लिए इसका उपयोग करता है, अन्यथा, यह यादृच्छिक रूप से बनाए गए वॉलेट का उपयोग करता है।
getAdmin() : यह फ़ंक्शन अनुबंध के स्वामी को लौटाता है।
getCharities() , getMyCharities() , getCharity() : ये फ़ंक्शन क्रमशः सभी चैरिटी, वर्तमान उपयोगकर्ता द्वारा बनाई गई चैरिटी और उसकी आईडी द्वारा एक विशिष्ट चैरिटी प्राप्त करते हैं।
getSupporters() : यह फ़ंक्शन किसी विशिष्ट चैरिटी के समर्थकों को उसकी आईडी द्वारा लाता है।
createCharity() , updateCharity() : ये फ़ंक्शन उपयोगकर्ता को क्रमशः एक नई चैरिटी बनाने या मौजूदा चैरिटी को अपडेट करने की अनुमति देते हैं।
makeDonation() : यह फ़ंक्शन उपयोगकर्ता को किसी विशिष्ट चैरिटी के लिए दान करने की अनुमति देता है।
deleteCharity() : यह फ़ंक्शन किसी चैरिटी के मालिक को इसे हटाने की अनुमति देता है।
banCharity() : यह फ़ंक्शन अनुबंध स्वामी को किसी दान पर प्रतिबंध लगाने की अनुमति देता है।
structuredCharities() , structuredSupporters() : ये सहायक कार्य हैं जो अनुबंध से लौटाए गए डेटा को अधिक उपयोगी प्रारूप में संरचित करते हैं।

निम्नलिखित कोड का उपयोग करके bitfinity नेटवर्क को शामिल करने के लिए services के अंदर provider.tsx फ़ाइल को अपडेट करें।

स्मार्ट कॉन्ट्रैक्ट के साथ इंटरेक्शन पेज

इसके बाद, हम ब्लॉकचेन सेवा के कार्यों को फ्रंटएंड में उनके संबंधित इंटरफेस से लिंक करेंगे:

नंबर 1: getCharities() फ़ंक्शन से डेटा प्राप्त करने के लिए सभी चैरिटी अपडेट pages/index.tsx प्रदर्शित करना।

ध्यान दें कि स्क्रीन पर प्रदर्शित होने से पहले ब्लॉकचेन डेटा को संग्रहीत करने के लिए Redux का उपयोग कैसे किया जाता है।

नंबर 2: उपयोगकर्ता की चैरिटी प्रदर्शित करना वर्तमान उपयोगकर्ता की चैरिटी प्राप्त करने के लिए useEffect() हुक का उपयोग करने के लिए pages/projects.tsx अपडेट करें।

कृपया वर्तमान उपयोगकर्ता के दान को पुनः प्राप्त करने के लिए useEffect() हुक के उपयोग पर ध्यान दें और कई घटकों में ब्लॉकचेन से डेटा को संभालने और प्रदर्शित करने के लिए Redux का उपयोग कैसे किया जाता है। यह सभी पृष्ठों और घटकों में दोहराया जाने वाला पैटर्न होगा।

नंबर 3: नई चैरिटी बनाना फॉर्म सबमिशन के लिए createCharity() फ़ंक्शन का उपयोग करने के लिए pages/donations/create.tsx अपडेट करें।

नंबर 4: आईडी के आधार पर चैरिटी और समर्थकों को पुनः प्राप्त करने के लिए getServerSideProps() , getCharity() और getSupporters() फ़ंक्शंस का उपयोग करने के लिए सिंगल चैरिटी अपडेट pages/donations/[id].tsx प्रदर्शित करना।

नंबर 5: मौजूदा चैरिटी का संपादन आईडी द्वारा चैरिटी प्राप्त करने और फॉर्म फ़ील्ड को पॉप्युलेट करने के लिए getCharity() फ़ंक्शन का उपयोग करने के लिए pages/donations/edit/[id].tsx अपडेट करें।

क्या आपने देखा कि कैसे getCharity() फ़ंक्शन का उपयोग आईडी द्वारा चैरिटी पुनर्प्राप्त करने के लिए किया गया था और यह भी कि इसका उपयोग फॉर्म फ़ील्ड को पॉप्युलेट करने के लिए कैसे किया गया था?

स्मार्ट कॉन्ट्रैक्ट वाले घटक

जैसा कि हमने उपरोक्त पृष्ठों के साथ किया, आइए स्मार्ट अनुबंध के साथ इंटरैक्ट करने के लिए निम्नलिखित घटकों को अपडेट करें:

नंबर 1: चैरिटी बैनिंग को संभालना, handleBanning() banCharity() फ़ंक्शन का उपयोग करने के लिए components/Ban.tsx अपडेट करें।

नंबर 2: चैरिटी अनलिस्टिंग प्रक्रिया को निष्पादित करने के लिए handleDelete() और deleteCharity() फ़ंक्शंस का उपयोग करने के लिए चैरिटी डिलीशन अपडेट components/Delete.tsx फ़ाइल को संभालना ।

नंबर 3: चैरिटी के लिए दान करना handleSubmit() makeDonation() फ़ंक्शन का उपयोग करने के लिए components/Donor.tsx फ़ाइल को अपडेट करें।

अन्य घटक

यहां बाकी घटक हैं जिन्हें आपको भी अपडेट करना चाहिए क्योंकि उनमें Redux का एकीकरण है।

NavBtn घटक उस घटक की समीक्षा और अद्यतन करता है जो उपयोगकर्ताओं को चैरिटी जानकारी को नेविगेट करने, हटाने और संपादित करने में सक्षम बनाता है। क्लिक करने पर डिलीट मोड को ट्रिगर करने के लिए Redux का उपयोग करें।

भुगतान घटक दान, समर्थकों और उनके संबंधित बटन पर क्लिक करने पर प्रतिबंध लगाने वाले मॉडलों को ट्रिगर करने के लिए Redux के कार्यान्वयन की समीक्षा और अद्यतन करता है।

समर्थन घटक समीक्षा करता है और क्लोज़ बटन पर क्लिक करने पर समर्थक मोडल को बंद करने के लिए Redux के कार्यान्वयन को अद्यतन करता है।

इन अद्यतनों को लागू करने से, सभी घटक और पेज अब स्मार्ट अनुबंध से जुड़ गए हैं, जो परियोजना के पूरा होने का प्रतीक है।

यदि आपका नेक्स्टजेएस सर्वर इस दौरान डाउन था, तो आप yarn dev चलाकर इसे फिर से चालू कर सकते हैं।

आगे सीखने के लिए, हम अपने YouTube चैनल पर इस निर्माण का पूरा वीडियो देखने की सलाह देते हैं।

निष्कर्ष

इस ट्यूटोरियल में, हमने नेक्स्ट.जेएस, सॉलिडिटी और टाइपस्क्रिप्ट का उपयोग करके एक विकेंद्रीकृत चैरिटी प्लेटफ़ॉर्म बनाया है। हमने विकास परिवेश स्थापित किया, Redux स्टोर बनाया, और ब्लॉकचेन में स्मार्ट अनुबंध तैनात किया। स्मार्ट कॉन्ट्रैक्ट को फ्रंटएंड के साथ एकीकृत करके, हमने एक सहज उपयोगकर्ता अनुभव बनाया।

पूरे ट्यूटोरियल के दौरान, आपने Web3 एप्लिकेशन बनाने, स्मार्ट कॉन्ट्रैक्ट तैयार करने और स्टेटिक टाइप चेकिंग को शामिल करने में मूल्यवान कौशल हासिल किए।

अब, आप अपना स्वयं का विकेंद्रीकृत चैरिटी प्लेटफ़ॉर्म बनाने के लिए तैयार हैं। हैप्पी कोडिंग और Web3 की दुनिया में अपने नवाचार को उजागर करें!