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 सह एक मिनिफाइड बंडल तयार करा. हे होस्ट करण्याचा एक सोपा मार्ग म्हणजे Netlify (opens in a new tab). तुम्ही एक GitHub रेपो तयार करू शकता, ते Netlify मध्ये जोडू शकता, बिल्ड कमांड सेटअप करू शकता आणि तुमचे काम झाले! तुमचे ॲप होस्ट केले जाईल आणि सर्वांसाठी वापरण्यायोग्य असेल. आणि हे सर्व विनामूल्य.

वैशिष्ट्ये

React आणि create-react-app

सर्वप्रथम ॲपचे हृदय: React आणि create-react-app सह येणारी सर्व अतिरिक्त वैशिष्ट्ये. जर तुम्हाला Ethereum एकत्रित करायचे नसेल तर फक्त याचा वापर करणे हा एक उत्तम पर्याय आहे. 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 नवीन 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) पहा.

सामान्यतः तुम्ही थेट तुमच्या स्मार्ट कॉन्ट्रॅक्टमधून डेटा मिळवता. सर्वात नवीन व्यापाराची (trade) वेळ वाचायची आहे का? फक्त MyContract.methods.latestTradeTime().call() कॉल करा, जे Ethereum नोडमधून तुमच्या dapp मध्ये डेटा आणते. पण जर तुम्हाला शेकडो वेगवेगळ्या डेटा पॉइंट्सची गरज असेल तर? यामुळे नोडवर शेकडो डेटा फेचेस होतील, प्रत्येक वेळी RTT (opens in a new tab) ची आवश्यकता असेल, ज्यामुळे तुमचा dapp मंद आणि अकार्यक्षम होईल. एक पर्याय तुमच्या कॉन्ट्रॅक्टमधील एक फेचर कॉल फंक्शन असू शकते जे एकाच वेळी अनेक डेटा परत करते. तरीही, हे नेहमीच आदर्श नसते.

आणि मग तुम्हाला ऐतिहासिक डेटामध्ये देखील स्वारस्य असू शकते. तुम्हाला केवळ शेवटच्या व्यापाराची (trade) वेळच नाही, तर तुम्ही स्वतः केलेल्या सर्व व्यापारांच्या वेळा देखील जाणून घ्यायच्या आहेत. 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 hooks आणि 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])
कॉपी

टेम्प्लेट्स

याव्यतिरिक्त, तुम्ही अनेक वेगवेगळ्या टेम्प्लेट्समधून निवडू शकता. आतापर्यंत तुम्ही Aave, Compound, UniSwap किंवा sablier इंटिग्रेशन वापरू शकता. ते सर्व महत्त्वाचे सेवा स्मार्ट कॉन्ट्रॅक्ट ॲड्रेसेस आणि तयार सबग्राफ इंटिग्रेशन्स जोडतात. फक्त क्रिएशन कमांडमध्ये yarn create eth-app my-eth-app --with-template aave याप्रमाणे टेम्पलेट जोडा.

Aave

Aave (opens in a new tab) हे एक विकेंद्रित पैसे कर्ज देणारे मार्केट आहे. ठेवीदार निष्क्रिय उत्पन्न मिळवण्यासाठी मार्केटला तरलता प्रदान करतात, तर कर्जदार तारणाचा वापर करून कर्ज घेऊ शकतात. Aave चे एक अद्वितीय वैशिष्ट्य म्हणजे फ्लॅश लोन्स (opens in a new tab) जे तुम्हाला कोणत्याही तारणाशिवाय पैसे कर्ज घेण्याची परवानगी देतात, जोपर्यंत तुम्ही एकाच ट्रांजेक्शनमध्ये कर्ज परत करता. हे उपयुक्त ठरू शकते, उदाहरणार्थ, आर्बिट्रेज ट्रेडिंगवर अतिरिक्त रोख रक्कम मिळवण्यासाठी.

ट्रेड केलेले टोकन जे तुम्हाला व्याज मिळवून देतात त्यांना aTokens म्हणतात.

जेव्हा तुम्ही create-eth-app सह Aave एकत्रित करणे निवडता, तेव्हा तुम्हाला एक सबग्राफ इंटिग्रेशन (opens in a new tab) मिळेल. Aave 'The Graph' वापरते आणि तुम्हाला Ropsten (opens in a new tab) आणि Mainnet (opens in a new tab) वर रॉ (opens in a new tab) किंवा फॉर्मेटेड (opens in a new tab) स्वरूपात अनेक वापरण्यास-तयार सबग्राफ्स आधीच प्रदान करते.

Compound

Compound (opens in a new tab) हे Aave सारखेच आहे. या इंटिग्रेशनमध्ये नवीन Compound v2 Subgraph (opens in a new tab) आधीच समाविष्ट आहे. येथे व्याज मिळवणारे टोकन आश्चर्यकारकपणे cTokens म्हणून ओळखले जातात.

Uniswap

Uniswap (opens in a new tab) हे एक विकेंद्रित एक्सचेंज (DEX) आहे. तरलता प्रदाते (Liquidity providers) व्यापाराच्या दोन्ही बाजूंसाठी आवश्यक टोकन किंवा ईथर प्रदान करून शुल्क मिळवू शकतात. हे मोठ्या प्रमाणावर वापरले जाते आणि त्यामुळे त्यात टोकनच्या विस्तृत श्रेणीसाठी सर्वाधिक तरलता आहे. तुम्ही ते तुमच्या dapp मध्ये सहजपणे एकत्रित करू शकता, उदाहरणार्थ, वापरकर्त्यांना त्यांचे ETH, DAI साठी स्वॅप (swap) करण्याची परवानगी देण्यासाठी.

दुर्दैवाने, हे लिहिण्याच्या वेळी इंटिग्रेशन केवळ Uniswap 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 क्वेरी लिहू शकता आणि डिप्लॉयमेंट सेटअप करू शकता.

पृष्ठ अखेरचे अद्यतन: २९ सप्टेंबर, २०२५

m (opens in a new tab)

c (opens in a new tab)

b (opens in a new tab)

+2

योगदानकर्ता पहा