create-eth-app के साथ अपने डैप फ्रंटएंड डेवलपमेंट की शुरूआत करें

पिछली बार हमने सॉलिडिटी की बड़ी तस्वीर (opens in a new tab) को देखा और पहले ही create-eth-app (opens in a new tab) का उल्लेख किया था। अब आप जानेंगे कि इसका उपयोग कैसे करें, कौन सी सुविधाएँ एकीकृत हैं और इस पर विस्तार करने के लिए अतिरिक्त विचार। सेबलिएर (opens in a new tab) के संस्थापक पॉल रेज़वान बर्ग द्वारा शुरू किया गया यह ऐप, आपके फ्रंटएंड डेवलपमेंट की शुरूआत करेगा और चुनने के लिए कई वैकल्पिक एकीकरणों के साथ आता है।

इंस्टॉलेशन

इंस्टॉलेशन के लिए Yarn 0.25 या उच्चतर (npm install yarn --global) की आवश्यकता है। यह रन करने जितना आसान है:

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

यह आंतरिक रूप से create-react-app (opens in a new tab) का उपयोग कर रहा है। अपने ऐप को देखने के लिए, http://localhost:3000/ खोलें। जब आप प्रोडक्शन में डिप्लॉय करने के लिए तैयार हों, तो yarn build के साथ एक मिनिफाइड बंडल बनाएं। इसे होस्ट करने का एक आसान तरीका Netlify (opens in a new tab) होगा। आप एक गिटहब रेपो बना सकते हैं, इसे Netlify में जोड़ सकते हैं, बिल्ड कमांड सेटअप कर सकते हैं और आपका काम हो गया! आपका ऐप होस्ट किया जाएगा और सभी के लिए प्रयोग करने योग्य होगा। और यह सब निःशुल्क है।

विशेषताएँ

रिएक्ट & create-react-app

सबसे पहले ऐप का दिल: रिएक्ट और create-react-app के साथ आने वाली सभी अतिरिक्त सुविधाएँ। केवल इसका उपयोग करना एक बढ़िया विकल्प है यदि आप एथेरियम को एकीकृत नहीं करना चाहते हैं। रिएक्ट (opens in a new tab) स्वयं इंटरैक्टिव UI बनाना वास्तव में आसान बनाता है। यह Vue (opens in a new tab) जितना शुरुआती-अनुकूल नहीं हो सकता है, लेकिन यह अभी भी अधिकतर उपयोग किया जाता है, इसमें अधिक सुविधाएँ हैं और सबसे महत्वपूर्ण बात यह है कि चुनने के लिए हजारों अतिरिक्त लाइब्रेरी हैं। create-react-app इसके साथ शुरू करना भी वास्तव में आसान बनाता है और इसमें शामिल हैं:

• रिएक्ट, JSX, ES6, टाइपस्क्रिप्ट, Flow सिंटैक्स समर्थन।
• ES6 से परे भाषा अतिरिक्त जैसे ऑब्जेक्ट स्प्रेड ऑपरेटर।
• ऑटोप्रीफिक्स्ड CSS, इसलिए आपको -webkit- या अन्य प्रीफिक्स की आवश्यकता नहीं है।
• कवरेज रिपोर्टिंग के लिए अंतर्निहित समर्थन के साथ एक तेज़ इंटरैक्टिव यूनिट टेस्ट रनर।
• एक लाइव डेवलपमेंट सर्वर जो सामान्य गलतियों के बारे में चेतावनी देता है।
• प्रोडक्शन के लिए JS, CSS, और छवियों को बंडल करने के लिए एक बिल्ड स्क्रिप्ट, जिसमें हैश और सोर्समैप हों।

विशेष रूप से create-eth-app नए hooks effects (opens in a new tab) का उपयोग कर रहा है। शक्तिशाली, फिर भी बहुत छोटे तथाकथित कार्यात्मक घटकों को लिखने की एक विधि। create-eth-app में उनका उपयोग कैसे किया जाता है, इसके लिए Apollo के बारे में नीचे दिया गया अनुभाग देखें।

Yarn Workspaces

Yarn Workspaces (opens in a new tab) आपको कई पैकेज रखने की अनुमति देते हैं, लेकिन उन सभी को रूट फ़ोल्डर से प्रबंधित करने और yarn install का उपयोग करके एक साथ सभी के लिए निर्भरताएँ स्थापित करने में सक्षम होते हैं। यह विशेष रूप से स्मार्ट अनुबंध पते/ABI प्रबंधन (यह जानकारी कि आपने कौन से स्मार्ट अनुबंध कहाँ डिप्लॉय किए हैं और उनके साथ कैसे संवाद करें) या ग्राफ़ एकीकरण जैसे छोटे अतिरिक्त पैकेजों के लिए मायने रखता है, दोनों create-eth-app का हिस्सा हैं।

ethers.js

हालांकि वेब3 (opens in a new tab) अभी भी ज़्यादातर उपयोग किया जाता है, ethers.js (opens in a new tab) को पिछले साल एक विकल्प के रूप में बहुत अधिक कर्षण मिल रहा है और यह create-eth-app में एकीकृत है। आप इसके साथ काम कर सकते हैं, इसे वेब3 में बदल सकते हैं या ethers.js v5 (opens in a new tab) में अपग्रेड करने पर विचार कर सकते हैं जो लगभग बीटा से बाहर है।

द ग्राफ़

ग्राफक्यूएल (opens in a new tab) रेस्टफुल API (opens in a new tab) की तुलना में डेटा को संभालने का एक वैकल्पिक तरीका है। रेस्टफुल Apis पर उनके कई फायदे हैं, विशेष रूप से विकेंद्रीकृत ब्लॉकचेन डेटा के लिए। यदि आप इसके पीछे के तर्क में रुचि रखते हैं, तो ग्राफक्यूएल विल पावर द डिसेंट्रलाइज्ड वेब (opens in a new tab) पर एक नज़र डालें।

आमतौर पर आप सीधे अपने स्मार्ट अनुबंध से डेटा प्राप्त करेंगे। नवीनतम ट्रेड का समय पढ़ना चाहते हैं? बस MyContract.methods.latestTradeTime().call() को कॉल करें जो आपके डैप में एथेरियम नोड से डेटा प्राप्त करता है। लेकिन क्या होगा यदि आपको सैकड़ों अलग-अलग डेटा बिंदुओं की आवश्यकता है? इसके परिणामस्वरूप नोड में सैकड़ों डेटा फ़ेच होंगे, हर बार RTT (opens in a new tab) की आवश्यकता होती है जिससे आपका डैप धीमा और अक्षम हो जाता है। एक समाधान आपके अनुबंध के अंदर एक फ़ेचर कॉल फ़ंक्शन हो सकता है जो एक साथ कई डेटा लौटाता है। हालांकि यह हमेशा आदर्श नहीं होता है।

और फिर आप ऐतिहासिक डेटा में भी रुचि ले सकते हैं। आप न केवल अंतिम ट्रेड का समय जानना चाहते हैं, बल्कि उन सभी ट्रेडों का समय भी जानना चाहते हैं जो आपने स्वयं किए हैं। create-eth-app सबग्राफ पैकेज का उपयोग करें, प्रलेखन (opens in a new tab) पढ़ें और इसे अपने स्वयं के अनुबंधों के अनुकूल बनाएं। यदि आप लोकप्रिय स्मार्ट अनुबंधों की तलाश में हैं, तो पहले से ही एक सबग्राफ हो सकता है। सबग्राफ एक्सप्लोरर (opens in a new tab) देखें।

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

Apollo

Apollo Boost (opens in a new tab) एकीकरण के लिए धन्यवाद, आप अपने रिएक्ट डैप में ग्राफ़ को आसानी से एकीकृत कर सकते हैं। विशेष रूप से रिएक्ट हुक और Apollo (opens in a new tab) का उपयोग करते समय, डेटा प्राप्त करना आपके घटक में एक एकल GraphQl क्वेरी लिखने जितना आसान है:

1const { loading, error, data } = useQuery(myGraphQlQuery)
2
3React.useEffect(() => {
4  if (!loading && !error && data) {
5    console.log({ data })
6  }
7}, [loading, error, data])
कॉपी करें

टेम्पलेट्स

इसके अतिरिक्त आप कई अलग-अलग टेम्पलेट्स में से चुन सकते हैं। अब तक आप आवे, Compound, UniSwap या sablier एकीकरण का उपयोग कर सकते हैं। वे सभी पूर्व-निर्मित सबग्राफ एकीकरणों के साथ महत्वपूर्ण सेवा स्मार्ट अनुबंध पते जोड़ते हैं। बस yarn create eth-app my-eth-app --with-template aave जैसे निर्माण कमांड में टेम्पलेट जोड़ें।

आवे

आवे (opens in a new tab) एक विकेन्द्रीकृत धन उधार बाजार है। जमाकर्ता निष्क्रिय आय अर्जित करने के लिए बाजार को लिक्विडिटी प्रदान करते हैं, जबकि उधारकर्ता कोलेटरल का उपयोग करके उधार ले सकते हैं। आवे की एक अनूठी विशेषता वे फ्लैश ऋण (opens in a new tab) हैं जो आपको बिना किसी कोलेटरल के पैसे उधार लेने की अनुमति देते हैं, जब तक आप एक ट्रांज़ैक्शन के भीतर ऋण वापस कर देते हैं। यह आर्बिट्रेज ट्रेडिंग पर आपको अतिरिक्त नकदी देने के लिए उपयोगी हो सकता है।

ट्रेड किए गए टोकन जो आपको ब्याज अर्जित करते हैं, aTokens कहलाते हैं।

जब आप create-eth-app के साथ आवे को एकीकृत करना चुनते हैं, तो आपको एक सबग्राफ एकीकरण (opens in a new tab) मिलेगा। आवे द ग्राफ़ का उपयोग करता है और पहले से ही आपको रोपस्टेन (opens in a new tab) और मेननेट (opens in a new tab) पर रॉ (opens in a new tab) या स्वरूपित (opens in a new tab) रूप में कई उपयोग के लिए तैयार सबग्राफ प्रदान करता है।

Compound

Compound (opens in a new tab) आवे के समान है। एकीकरण में पहले से ही नया Compound v2 सबग्राफ (opens in a new tab) शामिल है। यहाँ ब्याज अर्जित करने वाले टोकन आश्चर्यजनक रूप से cTokens कहलाते हैं।

यूनिस्वैप

यूनिस्वैप (opens in a new tab) एक विकेंद्रीकृत विनिमय केंद्र (DEX) है। लिक्विडिटी प्रदाता एक ट्रेड के दोनों पक्षों के लिए आवश्यक टोकन या ईथर प्रदान करके शुल्क अर्जित कर सकते हैं। इसका व्यापक रूप से उपयोग किया जाता है और इसलिए इसमें बहुत विस्तृत श्रृंखला के टोकन के लिए उच्चतम लिक्विडिटी में से एक है। आप इसे आसानी से अपने डैप में एकीकृत कर सकते हैं, उदाहरण के लिए, यूज़र को अपने ETH को DAI के लिए स्वैप करने की अनुमति देने के लिए।

दुर्भाग्य से, इस लेखन के समय एकीकरण केवल यूनिस्वैप v1 के लिए है, न कि अभी-अभी जारी किए गए v2 (opens in a new tab) के लिए।

सेबलिएर

सेबलिएर (opens in a new tab) यूज़र को धन भुगतान स्ट्रीमिंग करने की अनुमति देता है। एक ही payday के बजाय, प्रारंभिक सेटअप के बाद बिना किसी और प्रशासन के आपको वास्तव में लगातार अपना पैसा मिलता है। एकीकरण में इसका अपना सबग्राफ (opens in a new tab) शामिल है।

आगे क्या है?

यदि आपके पास create-eth-app के बारे में प्रश्न हैं, तो सेबलिएर समुदाय सर्वर (opens in a new tab) पर जाएं, जहां आप create-eth-app के लेखकों से संपर्क कर सकते हैं। कुछ पहले अगले कदमों के रूप में आप चाहें तो Material UI (opens in a new tab) जैसे UI फ्रेमवर्क को एकीकृत करें, वास्तव में आवश्यक डेटा के लिए ग्राफक्यूएल क्वेरी लिखें और डिप्लॉयमेंट सेटअप करें।

पेज का अंतिम अपडेट: 29 सितंबर 2025

m (opens in a new tab)

c (opens in a new tab)

b (opens in a new tab)

+2

योगदानकर्ताओं को देखें