create-eth-app के साथ अपने विकेंद्रीकृत एप्लिकेशन (dapp) फ्रंटएंड डेवलपमेंट की शुरुआत करें

पिछली बार हमने Solidity के व्यापक परिदृश्य (opens in a new tab) पर नज़र डाली थी और पहले ही create-eth-app (opens in a new tab) का उल्लेख किया था। अब आप जानेंगे कि इसका उपयोग कैसे करना है, इसमें कौन सी विशेषताएं एकीकृत हैं और इसका विस्तार कैसे किया जाए, इस पर अतिरिक्त विचार। Sablier (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/ खोलें। जब आप उत्पादन में तैनात करने (deploy) के लिए तैयार हों, तो yarn build के साथ एक छोटा (minified) बंडल बनाएं। इसे होस्ट करने का एक आसान तरीका Netlify (opens in a new tab) होगा। आप एक GitHub रेपो बना सकते हैं, इसे Netlify में जोड़ सकते हैं, बिल्ड कमांड सेट कर सकते हैं और आपका काम हो गया! आपका ऐप होस्ट हो जाएगा और सभी के लिए उपयोग करने योग्य होगा। और यह सब बिल्कुल मुफ्त है।

विशेषताएं

React और create-react-app

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

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

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

Yarn वर्कस्पेस

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

ethers.js

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

The Graph

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

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

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

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

Apollo

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

const { loading, error, data } = useQuery(myGraphQlQuery)

React.useEffect(() => {
  if (!loading && !error && data) {
    console.log({ data })
  }
}, [loading, error, data])

टेम्प्लेट

इसके अतिरिक्त आप कई अलग-अलग टेम्प्लेट में से चुन सकते हैं। अब तक आप आवे, Compound, यूनिस्वैप या 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) मिलेगा। आवे The Graph का उपयोग करता है और पहले से ही आपको रॉप्स्टन (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) है। तरलता प्रदाता व्यापार के दोनों पक्षों के लिए आवश्यक टोकन या ईथर प्रदान करके शुल्क कमा सकते हैं। इसका व्यापक रूप से उपयोग किया जाता है और इसलिए टोकन की एक बहुत विस्तृत श्रृंखला के लिए इसमें सबसे अधिक तरलता है। आप इसे आसानी से अपने dapp में एकीकृत कर सकते हैं, उदाहरण के लिए, उपयोगकर्ताओं को DAI के लिए अपने ETH को स्वैप करने की अनुमति देने के लिए।

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

Sablier

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

आगे क्या?

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