create-eth-app மூலம் உங்கள் dapp ஃபிரண்ட்எண்ட் மேம்பாட்டைத் தொடங்குங்கள்

கடந்த முறை நாம் Solidity-இன் பெரிய படத்தைப் (opens in a new tab) பார்த்தோம், மேலும் create-eth-app (opens in a new tab) பற்றியும் ஏற்கனவே குறிப்பிட்டிருந்தோம். இப்போது அதை எவ்வாறு பயன்படுத்துவது, என்னென்ன அம்சங்கள் ஒருங்கிணைக்கப்பட்டுள்ளன மற்றும் அதை எவ்வாறு விரிவுபடுத்துவது என்பது குறித்த கூடுதல் யோசனைகளை நீங்கள் அறிந்துகொள்வீர்கள். Sablier (opens in a new tab)-இன் நிறுவனரான பால் ரஸ்வான் பெர்க் (Paul Razvan Berg) என்பவரால் தொடங்கப்பட்ட இந்த ஆப், உங்கள் ஃபிரண்ட்எண்ட் மேம்பாட்டைத் தொடங்கும், மேலும் தேர்வு செய்ய பல விருப்ப ஒருங்கிணைப்புகளுடன் வருகிறது.

நிறுவல்

நிறுவலுக்கு 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/-ஐத் திறக்கவும். நீங்கள் தயாரிப்புக்கு (production) டெப்ளாய் செய்யத் தயாராக இருக்கும்போது, yarn build மூலம் ஒரு மினிஃபைட் பண்டிலை (minified bundle) உருவாக்கவும். இதை ஹோஸ்ட் செய்வதற்கான ஒரு எளிய வழி 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 சின்டாக்ஸ் (syntax) ஆதரவு.
• ஆப்ஜெக்ட் ஸ்ப்ரெட் ஆப்பரேட்டர் (object spread operator) போன்ற ES6-க்கு அப்பாற்பட்ட மொழி கூடுதல் அம்சங்கள்.
• ஆட்டோபிரிஃபிக்ஸ்டு (Autoprefixed) CSS, எனவே உங்களுக்கு -webkit- அல்லது பிற முன்னொட்டுகள் தேவையில்லை.
• கவரேஜ் ரிப்போர்ட்டிங்கிற்கான (coverage reporting) உள்ளமைக்கப்பட்ட ஆதரவுடன் கூடிய வேகமான ஊடாடும் யூனிட் டெஸ்ட் ரன்னர் (unit test runner).
• பொதுவான தவறுகளைப் பற்றி எச்சரிக்கும் நேரடி மேம்பாட்டு சர்வர் (live development server).
• தயாரிப்புக்காக JS, CSS மற்றும் படங்களை ஹாஷ்கள் (hashes) மற்றும் சோர்ஸ்மேப்களுடன் (sourcemaps) பண்டில் செய்வதற்கான பில்ட் ஸ்கிரிப்ட் (build script).

குறிப்பாக create-eth-app புதிய ஹூக்ஸ் எஃபெக்ட்ஸை (hooks effects) (opens in a new tab) பயன்படுத்துகிறது. இது சக்திவாய்ந்த, அதே சமயம் மிகச் சிறிய ஃபங்ஷனல் காம்போனென்ட்களை (functional components) எழுதுவதற்கான ஒரு முறையாகும். create-eth-app-இல் அவை எவ்வாறு பயன்படுத்தப்படுகின்றன என்பதைப் பற்றி அறிய, Apollo குறித்த கீழேயுள்ள பகுதியைப் பார்க்கவும்.

Yarn Workspaces

Yarn Workspaces (opens in a new tab) பல பேக்கேஜ்களை வைத்திருக்க உங்களை அனுமதிக்கிறது, ஆனால் அவை அனைத்தையும் ரூட் ஃபோல்டரிலிருந்து (root folder) நிர்வகிக்கவும், yarn install-ஐப் பயன்படுத்தி அனைத்திற்கும் ஒரே நேரத்தில் சார்புகளை (dependencies) நிறுவவும் முடியும். ஸ்மார்ட் ஒப்பந்த முகவரிகள்/ABI மேலாண்மை (எந்த ஸ்மார்ட் ஒப்பந்தங்களை எங்கு டெப்ளாய் செய்தீர்கள் மற்றும் அவற்றுடன் எவ்வாறு தொடர்புகொள்வது என்பது பற்றிய தகவல்) அல்லது கிராஃப் ஒருங்கிணைப்பு போன்ற சிறிய கூடுதல் பேக்கேஜ்களுக்கு இது குறிப்பாகப் பொருந்தும், இவை இரண்டும் create-eth-app-இன் ஒரு பகுதியாகும்.

ethers.js

Web3 (opens in a new tab) இன்னும் பெரும்பாலும் பயன்படுத்தப்பட்டாலும், ethers.js (opens in a new tab) கடந்த ஆண்டில் ஒரு மாற்றாக அதிக கவனத்தைப் பெற்றுள்ளது, மேலும் இதுவே create-eth-app-இல் ஒருங்கிணைக்கப்பட்டுள்ளது. நீங்கள் இதனுடன் வேலை செய்யலாம், இதை Web3-க்கு மாற்றலாம் அல்லது பீட்டாவிலிருந்து (beta) வெளிவரவுள்ள 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 Will Power the Decentralized Web (opens in a new tab) என்ற கட்டுரையைப் பார்க்கவும்.

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

மேலும் நீங்கள் வரலாற்றுத் தரவுகளிலும் (historical data) ஆர்வம் காட்டலாம். கடைசி வர்த்தக நேரத்தை மட்டுமல்லாமல், நீங்கள் செய்த அனைத்து வர்த்தகங்களின் நேரங்களையும் அறிய விரும்பலாம். create-eth-app சப்-கிராஃப் (subgraph) பேக்கேஜைப் பயன்படுத்தவும், ஆவணங்களைப் (opens in a new tab) படித்து அதை உங்கள் சொந்த ஒப்பந்தங்களுக்கு ஏற்ப மாற்றியமைக்கவும். நீங்கள் பிரபலமான ஸ்மார்ட் ஒப்பந்தங்களைத் தேடுகிறீர்கள் என்றால், ஏற்கனவே ஒரு சப்-கிராஃப் இருக்கலாம். சப்-கிராஃப் எக்ஸ்ப்ளோரரைப் (subgraph explorer) (opens in a new tab) பார்க்கவும்.

உங்களிடம் ஒரு சப்-கிராஃப் இருந்தால், உங்கள் dapp-இல் ஒரு எளிய குவெரியை (query) எழுத இது உங்களை அனுமதிக்கிறது, இது உங்களுக்குத் தேவையான வரலாற்றுத் தரவுகள் உட்பட அனைத்து முக்கியமான பிளாக்செயின் தரவுகளையும் மீட்டெடுக்கிறது, இதற்கு ஒரே ஒரு ஃபெட்ச் (fetch) மட்டுமே தேவை.

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) என்பது ஒரு பரவலாக்கப்பட்ட பணக் கடன் சந்தையாகும். டெபாசிட் செய்பவர்கள் செயலற்ற வருமானத்தைப் (passive income) பெற சந்தைக்கு பணப்புழக்கத்தை (liquidity) வழங்குகிறார்கள், அதே நேரத்தில் கடன் வாங்குபவர்கள் பிணையங்களைப் (collaterals) பயன்படுத்திக் கடன் வாங்க முடியும். Aave-இன் ஒரு தனித்துவமான அம்சம் இந்த ஃபிளாஷ் கடன்கள் (flash loans) (opens in a new tab) ஆகும், இது ஒரு பரிவர்த்தனைக்குள் கடனைத் திருப்பிச் செலுத்தும் வரை, எந்தவொரு பிணையமும் இல்லாமல் கடன் வாங்க உங்களை அனுமதிக்கிறது. ஆர்பிட்ரேஜ் (arbitrage) வர்த்தகத்தில் உங்களுக்கு கூடுதல் பணத்தை வழங்க இது பயனுள்ளதாக இருக்கும்.

உங்களுக்கு வட்டியை ஈட்டித் தரும் வர்த்தகம் செய்யப்பட்ட டோக்கன்கள் 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 சப்-கிராஃப் (opens in a new tab) சேர்க்கப்பட்டுள்ளது. இங்கு வட்டி ஈட்டும் டோக்கன்கள் ஆச்சரியப்படும் விதமாக cTokens என்று அழைக்கப்படுகின்றன.

Uniswap

Uniswap (opens in a new tab) என்பது ஒரு பரவலாக்கப்பட்ட பரிமாற்றம் (DEX) ஆகும். பணப்புழக்கத்தை வழங்குபவர்கள் (Liquidity providers) ஒரு வர்த்தகத்தின் இரு தரப்பிற்கும் தேவையான டோக்கன்கள் அல்லது ஈதரை வழங்குவதன் மூலம் கட்டணங்களை ஈட்டலாம். இது பரவலாகப் பயன்படுத்தப்படுகிறது, எனவே பல வகையான டோக்கன்களுக்கு அதிக பணப்புழக்கங்களில் ஒன்றைக் கொண்டுள்ளது. எடுத்துக்காட்டாக, பயனர்கள் தங்கள் ETH-ஐ DAI-க்கு மாற்றுவதற்கு (swap) அனுமதிக்க, இதை உங்கள் dapp-இல் எளிதாக ஒருங்கிணைக்கலாம்.

துரதிர்ஷ்டவசமாக, இதை எழுதும் நேரத்தில் இந்த ஒருங்கிணைப்பு Uniswap v1-க்கு மட்டுமே உள்ளது, சமீபத்தில் வெளியிடப்பட்ட v2 (opens in a new tab)-க்கு அல்ல.

Sablier

Sablier (opens in a new tab) பயனர்களை பணப் கொடுப்பனவுகளை ஸ்ட்ரீம் (stream) செய்ய அனுமதிக்கிறது. ஒரே ஒரு சம்பள நாளுக்குப் பதிலாக, ஆரம்ப அமைப்பிற்குப் பிறகு எந்தவொரு கூடுதல் நிர்வாகமும் இல்லாமல் உங்கள் பணத்தை நீங்கள் தொடர்ந்து பெறுவீர்கள். இந்த ஒருங்கிணைப்பு அதன் சொந்த சப்-கிராஃபை (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 ஃபிரேம்வொர்க்கை (framework) ஒருங்கிணைக்கலாம், உங்களுக்குத் தேவையான தரவுகளுக்கான GraphQL குவெரிகளை எழுதலாம் மற்றும் டெப்ளாய்மென்ட்டை (deployment) அமைக்கலாம்.

பக்கம் கடைசியாகப் புதுப்பிக்கப்பட்டது: 29 செப்டம்பர், 2025

m (opens in a new tab)

c (opens in a new tab)

b (opens in a new tab)

+2

பங்களிப்பாளர்களைப் பார்க்கவும்