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 repo-வை உருவாக்கி, அதை Netlify-இல் சேர்த்து, build கட்டளையை அமைத்தால் போதும், நீங்கள் முடித்துவிட்டீர்கள்! உங்கள் செயலி ஹோஸ்ட் செய்யப்பட்டு அனைவருக்கும் பயன்படுத்தக்கூடியதாக இருக்கும். மேலும் இவை அனைத்தும் கட்டணமின்றி.

அம்சங்கள்

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 தொடரியல் ஆதரவு.
• object spread operator போன்ற ES6-க்கு அப்பாற்பட்ட மொழி கூடுதல் அம்சங்கள்.
• தானாக முன்னொட்டு சேர்க்கப்பட்ட CSS, எனவே உங்களுக்கு -webkit- அல்லது பிற முன்னொட்டுகள் தேவையில்லை.
• கவரேஜ் அறிக்கையிடலுக்கான உள்ளமைக்கப்பட்ட ஆதரவுடன் கூடிய வேகமான ஊடாடும் யூனிட் டெஸ்ட் ரன்னர்.
• பொதுவான தவறுகளைப் பற்றி எச்சரிக்கும் ஒரு நேரடி மேம்பாட்டு சர்வர்.
• உற்பத்திக்கு, JS, CSS மற்றும் படங்களை ஹாஷ்கள் மற்றும் சோர்ஸ்மேப்புகளுடன் தொகுக்க ஒரு பில்டு ஸ்கிரிப்ட்.

குறிப்பாக create-eth-app ஆனது புதிய hooks effects (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) ஆகும். அவற்றுக்கு Restful API-களை விட பல நன்மைகள் உள்ளன, குறிப்பாக பரவலாக்கப்பட்ட பிளாக்செயின் தரவுகளுக்கு. இதன் பின்னணியில் உள்ள காரணத்தில் நீங்கள் ஆர்வமாக இருந்தால், GraphQL Will Power the Decentralized Web (opens in a new tab)-ஐப் பாருங்கள்.

பொதுவாக, நீங்கள் உங்கள் ஸ்மார்ட் கான்ட்ராக்டிலிருந்து நேரடியாக தரவைப் பெறுவீர்கள். சமீபத்திய வர்த்தகத்தின் நேரத்தைப் படிக்க விரும்புகிறீர்களா? உங்கள் dapp-க்குள் எத்தேரியம் முனையிலிருந்து தரவைப் பெறும் MyContract.methods.latestTradeTime().call()-ஐ அழைத்தால் போதும். ஆனால் உங்களுக்கு நூற்றுக்கணக்கான வெவ்வேறு தரவுப் புள்ளிகள் தேவைப்பட்டால் என்ன செய்வது? அது முனையத்திற்கு நூற்றுக்கணக்கான தரவுப் பெறுதல்களை விளைவிக்கும், ஒவ்வொரு முறையும் ஒரு RTT (opens in a new tab) தேவைப்படும், இது உங்கள் dapp-ஐ மெதுவாகவும் திறனற்றதாகவும் ஆக்கும். உங்கள் கான்ட்ராக்டுக்குள் ஒரே நேரத்தில் பல தரவுகளைத் தரும் ஒரு fetcher call செயல்பாட்டை உருவாக்குவது ஒரு மாற்று வழியாக இருக்கலாம். இருப்பினும் இது எப்போதும் சிறந்ததல்ல.

மேலும் நீங்கள் வரலாற்றுத் தரவுகளிலும் ஆர்வமாக இருக்கலாம். நீங்கள் கடைசி வர்த்தக நேரத்தை மட்டுமல்ல, நீங்களே செய்த அனைத்து வர்த்தகங்களின் நேரங்களையும் அறிய விரும்பலாம். 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-இன் ஒரு தனித்துவமான அம்சம் 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) மற்றும் Mainnet (opens in a new tab)-இல் raw (opens in a new tab) அல்லது formatted (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-ஆக மாற்ற அனுமதிக்க, இதை உங்கள் dapp-இல் எளிதாக ஒருங்கிணைக்கலாம்.

துரதிர்ஷ்டவசமாக, இதை எழுதும் நேரத்தில் இந்த ஒருங்கிணைப்பு 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

பங்களிப்பாளர்களைக் காட்டு