create-eth-app सह तुमच्या विकेंद्रित ॲप्लिकेशन (dapp) फ्रंटएंड डेव्हलपमेंटला सुरुवात करा

मागील वेळी आपण Solidity चे संपूर्ण चित्र (opens in a new tab) पाहिले आणि create-eth-app (opens in a new tab) चा उल्लेख आधीच केला होता. आता तुम्हाला ते कसे वापरायचे, कोणती वैशिष्ट्ये एकत्रित केली आहेत आणि त्याचा विस्तार कसा करायचा यावरील अतिरिक्त कल्पना सापडतील. Sablier (opens in a new tab) चे संस्थापक पॉल रझवान बर्ग यांनी सुरू केलेले हे ॲप तुमच्या फ्रंटएंड डेव्हलपमेंटला सुरुवात करेल आणि निवडण्यासाठी अनेक पर्यायी एकत्रीकरणांसह (integrations) येते.

इन्स्टॉलेशन

इन्स्टॉलेशनसाठी Yarn 0.25 किंवा त्याहून अधिक आवृत्ती आवश्यक आहे (npm install yarn --global). हे रन करणे खूप सोपे आहे:

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

हे अंतर्गत (under the hood) create-react-app (opens in a new tab) वापरत आहे. तुमचे ॲप पाहण्यासाठी, http://localhost:3000/ उघडा. जेव्हा तुम्ही उत्पादनासाठी (production) प्रस्थापित करण्यासाठी (deploy) तयार असाल, तेव्हा yarn build सह एक मिनिफाईड बंडल तयार करा. हे होस्ट करण्याचा एक सोपा मार्ग म्हणजे Netlify (opens in a new tab) असू शकतो. तुम्ही एक GitHub रेपो तयार करू शकता, ती Netlify मध्ये जोडू शकता, बिल्ड कमांड सेट करू शकता आणि तुमचे काम पूर्ण झाले! तुमचे ॲप होस्ट केले जाईल आणि प्रत्येकासाठी वापरण्यायोग्य असेल. आणि हे सर्व विनामूल्य.

वैशिष्ट्ये

React आणि create-react-app

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

• React, JSX, ES6, TypeScript, 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

जरी 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 APIs च्या तुलनेत त्यांचे अनेक फायदे आहेत, विशेषतः विकेंद्रित ब्लॉकचेन डेटासाठी. जर तुम्हाला यामागील कारणांमध्ये स्वारस्य असेल, तर GraphQL Will Power the Decentralized Web (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 मध्ये एक सोपी क्वेरी लिहिण्याची परवानगी देतो जी तुम्हाला आवश्यक असलेल्या ऐतिहासिक डेटासह सर्व महत्त्वाचा ब्लॉकचेन डेटा मिळवते, यासाठी फक्त एकदाच डेटा मिळवणे (fetch) आवश्यक आहे.

Apollo

Apollo Boost (opens in a new tab) इंटिग्रेशनमुळे तुम्ही तुमच्या React dapp मध्ये ग्राफ सहजपणे एकत्रित करू शकता. विशेषतः React hooks आणि 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) हे एक विकेंद्रित पैसे कर्ज देण्याचे (lending) मार्केट आहे. ठेवीदार निष्क्रिय उत्पन्न मिळवण्यासाठी मार्केटला तरलता प्रदान करतात, तर कर्जदार तारण वापरून कर्ज घेऊ शकतात. आवे चे एक अद्वितीय वैशिष्ट्य म्हणजे ते फ्लॅश कर्ज (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) वर कच्च्या (raw) (opens in a new tab) किंवा स्वरूपित (formatted) (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 मध्ये सहजपणे एकत्रित करू शकता, उदाहरणार्थ, वापरकर्त्यांना त्यांच्या ETH ची DAI साठी अदलाबदल करण्याची परवानगी देण्यासाठी.

दुर्दैवाने, हे लिहित असताना इंटिग्रेशन फक्त युनिस्वॅप v1 साठी आहे आणि नुकत्याच रिलीज झालेल्या v2 (opens in a new tab) साठी नाही.

Sablier

Sablier (opens in a new tab) वापरकर्त्यांना पैशांचे पेमेंट्स स्ट्रीम करण्याची परवानगी देते. एकाच पगार दिवसाऐवजी (payday), सुरुवातीच्या सेटअप नंतर पुढील प्रशासनाशिवाय तुम्हाला तुमचे पैसे सतत मिळत राहतात. इंटिग्रेशनमध्ये त्याचा स्वतःचा सबग्राफ (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 क्वेरीज लिहायच्या असतील आणि प्रस्थापना (deployment) सेट करायची असेल.