create-eth-appతో మీ డాప్ ఫ్రంటెండ్ అభివృద్ధిని ప్రారంభించండి

గతసారి మనం 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/ని తెరవండి. మీరు ప్రొడక్షన్‌కు డిప్లాయ్ చేయడానికి సిద్ధంగా ఉన్నప్పుడు, yarn buildతో ఒక మినిఫైడ్ బండిల్‌ను సృష్టించండి. దీనిని హోస్ట్ చేయడానికి ఒక సులభమైన మార్గం 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_లో వాటిని ఎలా ఉపయోగిస్తారో తెలుసుకోవడానికి అపోలో గురించిన క్రింది విభాగాన్ని చూడండి.

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)కి అప్‌గ్రేడ్ చేయడాన్ని పరిగణించవచ్చు.

ది గ్రాఫ్

Restful API (opens in a new tab)తో పోలిస్తే డేటాను నిర్వహించడానికి GraphQL (opens in a new tab) ఒక ప్రత్యామ్నాయ మార్గం. రెస్ట్‌ఫుల్ APIల కంటే వీటికి అనేక ప్రయోజనాలు ఉన్నాయి, ముఖ్యంగా వికేంద్రీకృత బ్లాక్‌చెయిన్ డేటా కోసం. దీని వెనుక ఉన్న కారణంపై మీకు ఆసక్తి ఉంటే, వికేంద్రీకృత వెబ్‌ను GraphQL శక్తివంతం చేస్తుంది (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

అపోలో బూస్ట్ (opens in a new tab) ఇంటిగ్రేషన్‌కు ధన్యవాదాలు, మీరు మీ React డాప్‌లో గ్రాఫ్‌ను సులభంగా విలీనం చేయవచ్చు. ముఖ్యంగా React హుక్స్ మరియు అపోలో (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 ది గ్రాఫ్‌ను ఉపయోగిస్తుంది మరియు ఇప్పటికే 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). లిక్విడిటీ ప్రొవైడర్లు ఒక ట్రేడ్ యొక్క రెండు వైపులా అవసరమైన టోకెన్‌లు లేదా ఈథర్‌ను అందించడం ద్వారా ఫీజులను సంపాదించవచ్చు. ఇది విస్తృతంగా ఉపయోగించబడుతుంది మరియు అందువల్ల చాలా విస్తృత శ్రేణి టోకెన్‌ల కోసం అత్యధిక లిక్విడిటీలలో ఒకటిగా ఉంది. ఉదాహరణకు, వినియోగదారులు వారి ETHని DAI కోసం మార్చుకోవడానికి అనుమతించడానికి, మీరు మీ డాప్‌లో దీన్ని సులభంగా ఇంటిగ్రేట్ చేయవచ్చు.

దురదృష్టవశాత్తు, ఇది వ్రాసే సమయానికి, ఈ ఇంటిగ్రేషన్ 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 క్వెరీలను వ్రాయండి మరియు డిప్లాయ్‌మెంట్‌ను సెటప్ చేయండి.

పేజీ చివరి అప్‌డేట్: 29 సెప్టెంబర్, 2025

m (opens in a new tab)

c (opens in a new tab)

b (opens in a new tab)

+2

సహకారులను చూడండి