⁦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) کی جانب سے شروع کی گئی یہ ایپ آپ کی فرنٹ اینڈ ڈیولپمنٹ کا آغاز کرے گی اور اس میں انتخاب کے لیے کئی اختیاری انضمام (integrations) شامل ہیں۔

تنصیب

تنصیب کے لیے 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) بنڈل بنائیں۔ اسے ہوسٹ کرنے کا ایک آسان طریقہ 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 سے آگے زبان کے اضافی فیچرز جیسے آبجیکٹ اسپریڈ آپریٹر (object spread operator)۔
• آٹوپریفکسڈ (Autoprefixed) CSS، تاکہ آپ کو -webkit- یا دیگر پریفکسز کی ضرورت نہ پڑے۔
• کوریج رپورٹنگ کے لیے بلٹ ان سپورٹ کے ساتھ ایک تیز انٹرایکٹو یونٹ ٹیسٹ رنر۔
• ایک لائیو ڈیولپمنٹ سرور جو عام غلطیوں کے بارے میں متنبہ کرتا ہے۔
• پروڈکشن کے لیے JS، CSS، اور تصاویر کو بنڈل کرنے کے لیے ایک بلڈ اسکرپٹ، جس میں ہیشز (hashes) اور سورس میپس (sourcemaps) شامل ہیں۔

خاص طور پر 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) آپ کو متعدد پیکجز رکھنے کی اجازت دیتے ہیں، لیکن آپ ان سب کو روٹ فولڈر سے منظم کر سکتے ہیں اور 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 میں تبدیل کر سکتے ہیں یا ethers.js v5 (opens in a new tab) پر اپ گریڈ کرنے پر غور کر سکتے ہیں جو تقریباً بیٹا (beta) سے باہر آچکا ہے۔

The Graph

Restful API (opens in a new tab) کے مقابلے میں GraphQL (opens in a new tab) ڈیٹا کو ہینڈل کرنے کا ایک متبادل طریقہ ہے۔ Restful APIs پر ان کے کئی فوائد ہیں، خاص طور پر لامركزی بلاک چین ڈیٹا کے لیے۔ اگر آپ اس کے پیچھے کی وجوہات میں دلچسپی رکھتے ہیں، تو 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 سب گراف پیکج استعمال کریں، دستاویزات (opens in a new tab) پڑھیں اور اسے اپنے کنٹریکٹس کے مطابق ڈھالیں۔ اگر آپ مقبول سمارٹ کنٹریکٹس تلاش کر رہے ہیں، تو ہو سکتا ہے کہ پہلے سے ہی کوئی سب گراف موجود ہو۔ سب گراف ایکسپلورر (opens in a new tab) چیک کریں۔

ایک بار جب آپ کے پاس سب گراف ہو جاتا ہے، تو یہ آپ کو اپنی dapp میں ایک سادہ استفسار (query) لکھنے کی اجازت دیتا ہے جو آپ کی ضرورت کے تمام اہم بلاک چین ڈیٹا بشمول تاریخی ڈیٹا کو بازیافت کرتا ہے، جس کے لیے صرف ایک بار ڈیٹا لانے (fetch) کی ضرورت ہوتی ہے۔

Apollo

Apollo Boost (opens in a new tab) انضمام کی بدولت آپ آسانی سے اپنی React dapp میں گراف کو ضم کر سکتے ہیں۔ خاص طور پر جب React ہکس اور Apollo (opens in a new tab) کا استعمال کیا جائے، تو ڈیٹا لانا اتنا ہی آسان ہے جتنا کہ آپ کے کمپوننٹ میں ایک واحد GraphQL استفسار (query) لکھنا:

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

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

ٹیمپلیٹس

اس کے علاوہ آپ کئی مختلف ٹیمپلیٹس میں سے انتخاب کر سکتے ہیں۔ اب تک آپ آوے، Compound، یونی سویپ یا Sablier انضمام استعمال کر سکتے ہیں۔ یہ سب پہلے سے بنے ہوئے سب گراف انضمام کے ساتھ اہم سروس سمارٹ کنٹریکٹ ایڈریسز کا اضافہ کرتے ہیں۔ بس تخلیق کی کمانڈ میں ٹیمپلیٹ شامل کریں جیسے yarn create eth-app my-eth-app --with-template aave۔

آوے

آوے (opens in a new tab) ایک لامركزی رقم قرض دینے کی مارکیٹ ہے۔ جمع کنندگان غیر فعال آمدنی (passive income) حاصل کرنے کے لیے مارکیٹ کو سیالیت فراہم کرتے ہیں، جبکہ قرض لینے والے ضمانت کا استعمال کرتے ہوئے قرض لے سکتے ہیں۔ آوے کی ایک منفرد خصوصیت وہ فلیش لون (opens in a new tab) ہیں جو آپ کو بغیر کسی ضمانت کے رقم ادھار لینے کی اجازت دیتے ہیں، بشرطیکہ آپ ایک ٹرانزیکشن کے اندر قرض واپس کر دیں۔ یہ مثال کے طور پر آربٹریج ٹریڈنگ (arbitrage trading) پر آپ کو اضافی نقد رقم دینے کے لیے مفید ہو سکتا ہے۔

ٹریڈ کیے گئے ٹوکنز جو آپ کو سود کماتے ہیں انہیں aTokens کہا جاتا ہے۔

جب آپ create-eth-app کے ساتھ آوے کو ضم کرنے کا انتخاب کرتے ہیں، تو آپ کو ایک سب گراف انضمام (opens in a new tab) ملے گا۔ آوے The Graph کا استعمال کرتا ہے اور آپ کو پہلے سے ہی روپسٹن اور مین نیٹ پر خام (raw) (opens in a new tab) یا فارمیٹ شدہ (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) ہے۔ سیالیت فراہم کرنے والے ٹریڈ کے دونوں اطراف کے لیے مطلوبہ ٹوکنز یا ایتھر فراہم کر کے فیس کما سکتے ہیں۔ یہ وسیع پیمانے پر استعمال ہوتا ہے اور اس لیے ٹوکنز کی ایک بہت وسیع رینج کے لیے اس میں سب سے زیادہ سیالیت موجود ہے۔ آپ اسے آسانی سے اپنی dapp میں ضم کر سکتے ہیں تاکہ، مثال کے طور پر، صارفین کو اپنے ETH کا DAI سے تبادلہ کرنے کی اجازت دی جا سکے۔

بدقسمتی سے، اس تحریر کے وقت انضمام صرف یونی سویپ 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 فریم ورک کو ضم کرنا، اس ڈیٹا کے لیے GraphQL استفسارات (queries) لکھنا جس کی آپ کو درحقیقت ضرورت ہے اور تعیناتی (deployment) کو سیٹ اپ کرنا چاہیں گے۔