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

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

इंस्टॉलेशन

इंस्टॉलेशन के लिए 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 (एक नए टैब में खुलता है) का उपयोग कर रहा है। अपना ऐप देखने के लिए, http://localhost:3000/ खोलें। जब आप उत्पादन में तैनात करने (deploy) के लिए तैयार हों, तो yarn build के साथ एक छोटा (minified) बंडल बनाएं। इसे होस्ट करने का एक आसान तरीका Netlify (एक नए टैब में खुलता है) होगा। आप एक GitHub रेपो बना सकते हैं, इसे Netlify में जोड़ सकते हैं, बिल्ड कमांड सेट कर सकते हैं और आपका काम हो गया! आपका ऐप होस्ट हो जाएगा और सभी के लिए उपयोग करने योग्य होगा। और यह सब बिल्कुल मुफ्त है।

विशेषताएं

React और create-react-app

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

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

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

Yarn वर्कस्पेस

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

ethers.js

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

The Graph

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

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

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

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

Apollo

Apollo Boost (एक नए टैब में खुलता है) एकीकरण के लिए धन्यवाद, आप आसानी से अपने React dapp में ग्राफ को एकीकृत कर सकते हैं। विशेष रूप से React हुक्स और Apollo (एक नए टैब में खुलता है) का उपयोग करते समय, डेटा प्राप्त करना उतना ही सरल है जितना कि आपके घटक में एक एकल 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।

आवे

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

व्यापार किए गए टोकन जो आपको ब्याज दिलाते हैं उन्हें aTokens कहा जाता है।

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

Compound

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

यूनिस्वैप

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

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

Sablier

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

आगे क्या?

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