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/ ను తెరవండి. మీరు ప్రొడక్షన్‌కు డిప్లాయ్ చేయడానికి సిద్ధంగా ఉన్నప్పుడు, 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 కొత్త హుక్స్ ఎఫెక్ట్స్ (hooks effects) (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 వికేంద్రీకృత వెబ్‌కు శక్తినిస్తుంది (GraphQL Will Power the Decentralized Web) (opens in a new tab) అనే ఆర్టికల్‌ను చూడండి.

సాధారణంగా మీరు మీ స్మార్ట్ కాంట్రాక్ట్ నుండి నేరుగా డేటాను పొందుతారు. తాజా ట్రేడ్ సమయాన్ని చదవాలనుకుంటున్నారా? ఎథీరియం నోడ్ నుండి మీ వికేంద్రీకృత అప్లికేషన్ (dapp) లోకి డేటాను పొందే MyContract.methods.latestTradeTime().call() ను కాల్ చేయండి. కానీ మీకు వందలాది విభిన్న డేటా పాయింట్లు అవసరమైతే ఏమి చేయాలి? దీని వలన నోడ్‌కు వందలాది డేటా ఫెచ్‌లు జరుగుతాయి, ప్రతిసారీ ఒక 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])

టెంప్లేట్‌లు

అదనంగా మీరు అనేక విభిన్న టెంప్లేట్‌ల నుండి ఎంచుకోవచ్చు. ఇప్పటివరకు మీరు Aave, Compound, యూనిస్వాప్ లేదా Sablier ఇంటిగ్రేషన్‌ను ఉపయోగించవచ్చు. అవన్నీ ముందుగా రూపొందించిన ఉపగ్రాఫ్ ఇంటిగ్రేషన్‌లతో పాటు ముఖ్యమైన సర్వీస్ స్మార్ట్ కాంట్రాక్ట్ చిరునామాలను జోడిస్తాయి. yarn create eth-app my-eth-app --with-template aave లాగా క్రియేషన్ కమాండ్‌కు టెంప్లేట్‌ను జోడించండి.

Aave

Aave (opens in a new tab) అనేది ఒక వికేంద్రీకృత రుణం ఇవ్వడం (lending) మార్కెట్. డిపాజిటర్లు నిష్క్రియ ఆదాయాన్ని సంపాదించడానికి మార్కెట్‌కు ద్రవ్యతను అందిస్తారు, అయితే రుణగ్రహీతలు తాకట్టులను ఉపయోగించి రుణం తీసుకోగలుగుతారు. Aave యొక్క ఒక ప్రత్యేక లక్షణం ఈ తక్షణ రుణాలు (flash loans) (opens in a new tab), ఇవి మీరు ఒకే లావాదేవీలో రుణాన్ని తిరిగి చెల్లించినంత కాలం, ఎలాంటి తాకట్టు లేకుండా డబ్బును అప్పుగా తీసుకోవడానికి మిమ్మల్ని అనుమతిస్తాయి. ఉదాహరణకు ఆర్బిట్రేజ్ ట్రేడింగ్‌లో మీకు అదనపు నగదును అందించడానికి ఇది ఉపయోగపడుతుంది.

మీకు వడ్డీలను సంపాదించిపెట్టే ట్రేడ్ చేయబడిన టోకెన్‌లను aTokens అని పిలుస్తారు.

మీరు create-eth-app తో Aave ను ఏకీకృతం చేయడానికి ఎంచుకున్నప్పుడు, మీరు ఒక ఉపగ్రాఫ్ ఇంటిగ్రేషన్‌ను (opens in a new tab) పొందుతారు. Aave The Graph ను ఉపయోగిస్తుంది మరియు ఇప్పటికే మీకు Ropsten (opens in a new tab) మరియు మెయిన్‌నెట్ (opens in a new tab) లో రా (raw) (opens in a new tab) లేదా ఫార్మాట్ చేయబడిన (opens in a new tab) రూపంలో ఉపయోగించడానికి సిద్ధంగా ఉన్న అనేక ఉపగ్రాఫ్‌లను అందిస్తుంది.

Compound

Compound (opens in a new tab) అనేది Aave లాంటిదే. ఈ ఇంటిగ్రేషన్ ఇప్పటికే కొత్త Compound v2 ఉపగ్రాఫ్‌ను (opens in a new tab) కలిగి ఉంది. ఇక్కడ వడ్డీలను సంపాదించే టోకెన్‌లను ఆశ్చర్యకరంగా cTokens అని పిలుస్తారు.

యూనిస్వాప్

యూనిస్వాప్ (opens in a new tab) అనేది ఒక వికేంద్రీకృత ఎక్స్ఛేంజ్ (DEX). ద్రవ్యత ప్రొవైడర్లు ట్రేడ్ యొక్క రెండు వైపులా అవసరమైన టోకెన్‌లు లేదా ఈథర్‌ను అందించడం ద్వారా ఫీజులను సంపాదించవచ్చు. ఇది విస్తృతంగా ఉపయోగించబడుతుంది మరియు అందువల్ల చాలా విస్తృత శ్రేణి టోకెన్‌ల కోసం అత్యధిక ద్రవ్యతలలో ఒకదాన్ని కలిగి ఉంది. ఉదాహరణకు, వినియోగదారులు తమ ETH ను DAI కి మార్పిడి చేసుకోవడానికి అనుమతించడానికి మీరు దీన్ని మీ dapp లో సులభంగా ఏకీకృతం చేయవచ్చు.

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