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/-ஐத் திறக்கவும். நீங்கள் தயாரிப்புக்கு நிலைநிறுத்தத் தயாராக இருக்கும்போது, yarn build மூலம் சுருக்கப்பட்ட தொகுப்பை (minified bundle) உருவாக்கவும். இதை வழங்குவதற்கான (host) ஒரு எளிய வழி Netlify (opens in a new tab) ஆகும். நீங்கள் ஒரு GitHub களஞ்சியத்தை (repo) உருவாக்கி, அதை Netlify-இல் சேர்த்து, உருவாக்க கட்டளையை (build command) அமைத்தால் உங்கள் வேலை முடிந்தது! உங்கள் செயலி வழங்கப்பட்டு, அனைவரும் பயன்படுத்தக்கூடியதாக இருக்கும். மேலும் இவை அனைத்தும் முற்றிலும் இலவசம்.

அம்சங்கள்

React மற்றும் create-react-app

முதலாவதாக, செயலியின் இதயம்: React மற்றும் create-react-app உடன் வரும் அனைத்து கூடுதல் அம்சங்களும். நீங்கள் எத்திரியத்தை ஒருங்கிணைக்க விரும்பவில்லை என்றால், இதை மட்டும் பயன்படுத்துவது ஒரு சிறந்த தேர்வாகும். React (opens in a new tab) ஊடாடும் பயனர் இடைமுகங்களை (UI) உருவாக்குவதை மிகவும் எளிதாக்குகிறது. இது Vue (opens in a new tab) அளவுக்கு தொடக்கநிலையாளர்களுக்கு எளிதானதாக இல்லாமல் இருக்கலாம், ஆனால் இது இன்னும் அதிகமாகப் பயன்படுத்தப்படுகிறது, அதிக அம்சங்களைக் கொண்டுள்ளது மற்றும் மிக முக்கியமாகத் தேர்வு செய்ய ஆயிரக்கணக்கான கூடுதல் நூலகங்களைக் (libraries) கொண்டுள்ளது. create-react-app இதைத் தொடங்குவதையும் மிகவும் எளிதாக்குகிறது, மேலும் இதில் பின்வருவன அடங்கும்:

• React, JSX, ES6, TypeScript, Flow தொடரியல் (syntax) ஆதரவு.
• ஆப்ஜெக்ட் ஸ்ப்ரெட் ஆபரேட்டர் (object spread operator) போன்ற ES6-க்கு அப்பாற்பட்ட கூடுதல் மொழி அம்சங்கள்.
• தானாக முன்னொட்டு சேர்க்கப்பட்ட CSS (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) பல தொகுப்புகளை (packages) வைத்திருக்க உங்களை அனுமதிக்கிறது, ஆனால் அவை அனைத்தையும் ரூட் கோப்புறையிலிருந்து (root folder) நிர்வகிக்கவும், yarn install-ஐப் பயன்படுத்தி அனைத்திற்கும் ஒரே நேரத்தில் சார்புகளை (dependencies) நிறுவவும் முடியும். திறன் ஒப்பந்த முகவரிகள்/ABI மேலாண்மை (எந்தத் திறன் ஒப்பந்தங்களை எங்கு நிலைநிறுத்தினீர்கள் மற்றும் அவற்றுடன் எவ்வாறு தொடர்புகொள்வது என்பது பற்றிய தகவல்) அல்லது வரைபட ஒருங்கிணைப்பு (graph integration) போன்ற சிறிய கூடுதல் தொகுப்புகளுக்கு இது குறிப்பாகப் பொருந்தும், இவை இரண்டும் 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()-ஐ அழைத்தால் போதும், இது ஒரு எத்திரியம் கணுவிலிருந்து உங்கள் பரவலாக்கப்பட்ட செயலிக்குத் (dapp) தரவைப் பெறும். ஆனால் உங்களுக்கு நூற்றுக்கணக்கான வெவ்வேறு தரவுப் புள்ளிகள் தேவைப்பட்டால் என்ன செய்வது? இது கணுவிற்கு நூற்றுக்கணக்கான தரவுப் பெறுதல்களை ஏற்படுத்தும், ஒவ்வொரு முறையும் ஒரு RTT (opens in a new tab) தேவைப்படுவதால் உங்கள் dapp மெதுவாகவும் திறனற்றதாகவும் மாறும். இதற்கு ஒரு தீர்வாக, உங்கள் ஒப்பந்தத்திற்குள் ஒரே நேரத்தில் பல தரவுகளை வழங்கும் ஒரு ஃபெட்சர் கால் ஃபங்ஷனை (fetcher call function) பயன்படுத்தலாம். இருப்பினும் இது எப்போதும் சிறந்ததல்ல.

மேலும் நீங்கள் வரலாற்றுத் தரவுகளிலும் ஆர்வம் காட்டலாம். கடைசி வர்த்தக நேரத்தை மட்டுமல்லாமல், நீங்கள் செய்த அனைத்து வர்த்தகங்களின் நேரங்களையும் அறிய விரும்புவீர்கள். 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 ஹூக்ஸ் மற்றும் அப்பல்லோவைப் (opens in a new tab) பயன்படுத்தும் போது, தரவைப் பெறுவது உங்கள் கூறில் (component) ஒரு ஒற்றை GraphQl வினவலை எழுதுவது போல எளிதானது:

const { loading, error, data } = useQuery(myGraphQlQuery)

React.useEffect(() => {
  if (!loading && !error && data) {
    console.log({ data })
  }
}, [loading, error, data])

வார்ப்புருக்கள் (Templates)

கூடுதலாக நீங்கள் பல வெவ்வேறு வார்ப்புருக்களிலிருந்து தேர்வு செய்யலாம். இதுவரை நீங்கள் ஆவே, Compound, யூனிஸ்வாப் அல்லது Sablier ஒருங்கிணைப்பைப் பயன்படுத்தலாம். அவை அனைத்தும் முன்-உருவாக்கப்பட்ட துணை வரைபட ஒருங்கிணைப்புகளுடன் முக்கியமான சேவைத் திறன் ஒப்பந்த முகவரிகளைச் சேர்க்கின்றன. yarn create eth-app my-eth-app --with-template aave போன்ற உருவாக்கக் கட்டளையில் வார்ப்புருவைச் சேர்த்தால் போதும்.

ஆவே

ஆவே (opens in a new tab) என்பது ஒரு பரவலாக்கப்பட்ட பணக் கடனளிப்புச் சந்தையாகும். வைப்பாளர்கள் (Depositors) செயலற்ற வருமானத்தைப் பெற சந்தைக்கு நீர்மைத்தன்மையை வழங்குகிறார்கள், அதே நேரத்தில் கடன் வாங்குபவர்கள் பிணையங்களைப் பயன்படுத்திக் கடன் வாங்க முடியும். ஆவேயின் ஒரு தனித்துவமான அம்சம் அந்த உடனடி கடன்கள் (opens in a new tab) ஆகும், இது ஒரு பரிவர்த்தனைக்குள் கடனைத் திருப்பிச் செலுத்தும் வரை, எந்தப் பிணையமும் இல்லாமல் பணத்தைக் கடன் வாங்க உங்களை அனுமதிக்கிறது. எடுத்துக்காட்டாக, ஆர்பிட்ரேஜ் வர்த்தகத்தில் (arbitrage trading) உங்களுக்குக் கூடுதல் பணத்தை வழங்க இது பயனுள்ளதாக இருக்கும்.

உங்களுக்கு வட்டியை ஈட்டித் தரும் வர்த்தகம் செய்யப்பட்ட டோக்கன்கள் aTokens என்று அழைக்கப்படுகின்றன.

create-eth-app உடன் ஆவேயை ஒருங்கிணைக்க நீங்கள் தேர்வு செய்யும் போது, உங்களுக்கு ஒரு துணை வரைபட ஒருங்கிணைப்பு (opens in a new tab) கிடைக்கும். ஆவே The Graph-ஐப் பயன்படுத்துகிறது, மேலும் ராப்ஸ்டன் (opens in a new tab) மற்றும் முதன்மை வலைப்பின்னலில் (opens in a new tab) மூல (raw) (opens in a new tab) அல்லது வடிவமைக்கப்பட்ட (formatted) (opens in a new tab) வடிவத்தில் பயன்படுத்தத் தயாராக உள்ள பல துணை வரைபடங்களை ஏற்கனவே உங்களுக்கு வழங்குகிறது.

Compound

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

அடுத்து என்ன?

create-eth-app பற்றி உங்களுக்குக் கேள்விகள் இருந்தால், Sablier சமூகச் சேவையகத்திற்குச் (community server) (opens in a new tab) செல்லவும், அங்கு நீங்கள் create-eth-app-இன் ஆசிரியர்களைத் தொடர்புகொள்ளலாம். சில முதல் அடுத்த படிகளாக, நீங்கள் Material UI (opens in a new tab) போன்ற ஒரு UI கட்டமைப்பை (framework) ஒருங்கிணைக்கலாம், உங்களுக்குத் தேவையான தரவுகளுக்கான GraphQL வினவல்களை எழுதலாம் மற்றும் நிலைநிறுத்தத்தை (deployment) அமைக்கலாம்.