⁦create-eth-app⁩ کے ساتھ اپنی غیر مرکزی ایپلی کیشن (dapp) کے فرنٹ اینڈ کی ڈیولپمنٹ کا آغاز کریں

پچھلی بار ہم نے Solidity کے مجموعی منظر (نئے ٹیب میں کھلتا ہے) کا جائزہ لیا تھا اور create-eth-app (نئے ٹیب میں کھلتا ہے) کا ذکر بھی کیا تھا۔ اب آپ جانیں گے کہ اسے کیسے استعمال کرنا ہے، اس میں کون سی خصوصیات شامل ہیں اور اسے مزید وسعت دینے کے حوالے سے اضافی خیالات کیا ہیں۔ Sablier (نئے ٹیب میں کھلتا ہے) کے بانی، پال رضوان برگ (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 (نئے ٹیب میں کھلتا ہے) کا استعمال کر رہا ہے۔ اپنی ایپ دیکھنے کے لیے، http://localhost:3000/ کھولیں۔ جب آپ پروڈکشن میں تعینات کرنے کے لیے تیار ہوں، تو yarn build کے ساتھ ایک منیفائیڈ (minified) بنڈل بنائیں۔ اسے ہوسٹ کرنے کا ایک آسان طریقہ Netlify (نئے ٹیب میں کھلتا ہے) ہوگا۔ آپ ایک GitHub ریپو بنا سکتے ہیں، اسے Netlify میں شامل کر سکتے ہیں، بلڈ کمانڈ سیٹ اپ کر سکتے ہیں اور آپ کا کام مکمل ہو گیا! آپ کی ایپ ہوسٹ ہو جائے گی اور ہر کسی کے لیے قابل استعمال ہوگی۔ اور یہ سب بالکل مفت ہے۔

خصوصیات

React اور create-react-app

سب سے پہلے ایپ کا دل: React اور create-react-app کے ساتھ آنے والی تمام اضافی خصوصیات۔ اگر آپ ایتھیریم کو ضم نہیں کرنا چاہتے تو صرف اس کا استعمال ایک بہترین آپشن ہے۔ React (نئے ٹیب میں کھلتا ہے) بذات خود انٹرایکٹو یوزر انٹرفیس (UI) بنانا بہت آسان بناتا ہے۔ یہ شاید Vue (نئے ٹیب میں کھلتا ہے) جتنا مبتدیوں کے لیے آسان نہ ہو، لیکن یہ اب بھی سب سے زیادہ استعمال ہوتا ہے، اس میں زیادہ خصوصیات ہیں اور سب سے اہم بات یہ ہے کہ انتخاب کے لیے ہزاروں اضافی لائبریریاں موجود ہیں۔ create-react-app اس کے ساتھ شروعات کرنا بھی بہت آسان بناتا ہے اور اس میں شامل ہیں:

• React، JSX، ES6، TypeScript، اور Flow سنٹیکس کی سپورٹ۔
• ES6 سے آگے زبان کے اضافی فیچرز جیسے آبجیکٹ اسپریڈ آپریٹر (object spread operator)۔
• آٹوپریفکسڈ (Autoprefixed) CSS، تاکہ آپ کو -webkit- یا دیگر پریفکسز کی ضرورت نہ پڑے۔
• کوریج رپورٹنگ کے لیے بلٹ ان سپورٹ کے ساتھ ایک تیز انٹرایکٹو یونٹ ٹیسٹ رنر۔
• ایک لائیو ڈیولپمنٹ سرور جو عام غلطیوں کے بارے میں متنبہ کرتا ہے۔
• پروڈکشن کے لیے JS، CSS، اور تصاویر کو بنڈل کرنے کے لیے ایک بلڈ اسکرپٹ، جس میں ہیشز (hashes) اور سورس میپس (sourcemaps) شامل ہیں۔

خاص طور پر create-eth-app نئے ہکس ایفیکٹس (hooks effects) (نئے ٹیب میں کھلتا ہے) کا استعمال کر رہا ہے۔ یہ طاقتور، لیکن بہت چھوٹے نام نہاد فنکشنل کمپوننٹس (functional components) لکھنے کا ایک طریقہ ہے۔ create-eth-app میں ان کا استعمال کیسے ہوتا ہے، اس کے لیے نیچے Apollo کے بارے میں سیکشن دیکھیں۔

Yarn Workspaces

Yarn Workspaces (نئے ٹیب میں کھلتا ہے) آپ کو متعدد پیکجز رکھنے کی اجازت دیتے ہیں، لیکن آپ ان سب کو روٹ فولڈر سے منظم کر سکتے ہیں اور yarn install کا استعمال کرتے ہوئے ایک ہی وقت میں سب کے لیے انحصار (dependencies) انسٹال کر سکتے ہیں۔ یہ خاص طور پر چھوٹے اضافی پیکجز کے لیے معنی خیز ہے جیسے سمارٹ کنٹریکٹ ایڈریسز/ABI مینجمنٹ (یہ معلومات کہ آپ نے کون سے سمارٹ کنٹریکٹس کہاں تعینات کیے ہیں اور ان کے ساتھ کیسے بات چیت کرنی ہے) یا گراف انضمام، جو دونوں create-eth-app کا حصہ ہیں۔

ethers.js

اگرچہ Web3 (نئے ٹیب میں کھلتا ہے) اب بھی زیادہ تر استعمال ہوتا ہے، لیکن پچھلے سال میں ایک متبادل کے طور پر ethers.js (نئے ٹیب میں کھلتا ہے) نے بہت زیادہ مقبولیت حاصل کی ہے اور یہی create-eth-app میں ضم کیا گیا ہے۔ آپ اس کے ساتھ کام کر سکتے ہیں، اسے Web3 میں تبدیل کر سکتے ہیں یا ethers.js v5 (نئے ٹیب میں کھلتا ہے) پر اپ گریڈ کرنے پر غور کر سکتے ہیں جو تقریباً بیٹا (beta) سے باہر آچکا ہے۔

The Graph

Restful API (نئے ٹیب میں کھلتا ہے) کے مقابلے میں GraphQL (نئے ٹیب میں کھلتا ہے) ڈیٹا کو ہینڈل کرنے کا ایک متبادل طریقہ ہے۔ Restful APIs پر ان کے کئی فوائد ہیں، خاص طور پر لامركزی بلاک چین ڈیٹا کے لیے۔ اگر آپ اس کے پیچھے کی وجوہات میں دلچسپی رکھتے ہیں، تو GraphQL Will Power the Decentralized Web (نئے ٹیب میں کھلتا ہے) پر ایک نظر ڈالیں۔

عام طور پر آپ اپنے سمارٹ کنٹریکٹ سے براہ راست ڈیٹا حاصل کرتے ہیں۔ تازہ ترین ٹریڈ کا وقت پڑھنا چاہتے ہیں؟ بس MyContract.methods.latestTradeTime().call() کو کال کریں جو ایک ایتھیریم نوڈ سے آپ کی غیر مرکزی ایپلی کیشن (dapp) میں ڈیٹا لاتا ہے۔ لیکن کیا ہوگا اگر آپ کو سینکڑوں مختلف ڈیٹا پوائنٹس کی ضرورت ہو؟ اس کے نتیجے میں نوڈ سے سینکڑوں بار ڈیٹا لانا پڑے گا، ہر بار ایک RTT (نئے ٹیب میں کھلتا ہے) کی ضرورت ہوگی جس سے آپ کی dapp سست اور غیر موثر ہو جائے گی۔ اس کا ایک حل آپ کے کنٹریکٹ کے اندر ایک فیچر کال فنکشن (fetcher call function) ہو سکتا ہے جو ایک ہی وقت میں متعدد ڈیٹا واپس کرتا ہے۔ تاہم، یہ ہمیشہ مثالی نہیں ہوتا۔

اور پھر آپ تاریخی ڈیٹا میں بھی دلچسپی لے سکتے ہیں۔ آپ نہ صرف آخری ٹریڈ کا وقت جاننا چاہتے ہیں، بلکہ ان تمام ٹریڈز کے اوقات بھی جاننا چاہتے ہیں جو آپ نے خود کبھی کی تھیں۔ create-eth-app سب گراف پیکج استعمال کریں، دستاویزات (نئے ٹیب میں کھلتا ہے) پڑھیں اور اسے اپنے کنٹریکٹس کے مطابق ڈھالیں۔ اگر آپ مقبول سمارٹ کنٹریکٹس تلاش کر رہے ہیں، تو ہو سکتا ہے کہ پہلے سے ہی کوئی سب گراف موجود ہو۔ سب گراف ایکسپلورر (نئے ٹیب میں کھلتا ہے) چیک کریں۔

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

Apollo

Apollo Boost (نئے ٹیب میں کھلتا ہے) انضمام کی بدولت آپ آسانی سے اپنی React dapp میں گراف کو ضم کر سکتے ہیں۔ خاص طور پر جب React ہکس اور Apollo (نئے ٹیب میں کھلتا ہے) کا استعمال کیا جائے، تو ڈیٹا لانا اتنا ہی آسان ہے جتنا کہ آپ کے کمپوننٹ میں ایک واحد 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۔

آوے

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

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

جب آپ create-eth-app کے ساتھ آوے کو ضم کرنے کا انتخاب کرتے ہیں، تو آپ کو ایک سب گراف انضمام (نئے ٹیب میں کھلتا ہے) ملے گا۔ آوے The Graph کا استعمال کرتا ہے اور آپ کو پہلے سے ہی روپسٹن اور مین نیٹ پر خام (raw) (نئے ٹیب میں کھلتا ہے) یا فارمیٹ شدہ (نئے ٹیب میں کھلتا ہے) شکل میں کئی استعمال کے لیے تیار سب گرافس فراہم کرتا ہے۔

Compound

Compound (نئے ٹیب میں کھلتا ہے) آوے کی طرح ہے۔ اس انضمام میں پہلے سے ہی نیا Compound v2 سب گراف (نئے ٹیب میں کھلتا ہے) شامل ہے۔ یہاں سود کمانے والے ٹوکنز کو حیرت انگیز طور پر cTokens کہا جاتا ہے۔

یونی سویپ

یونی سویپ (نئے ٹیب میں کھلتا ہے) ایک لامركزی ایکسچینج (DEX) ہے۔ سیالیت فراہم کرنے والے ٹریڈ کے دونوں اطراف کے لیے مطلوبہ ٹوکنز یا ایتھر فراہم کر کے فیس کما سکتے ہیں۔ یہ وسیع پیمانے پر استعمال ہوتا ہے اور اس لیے ٹوکنز کی ایک بہت وسیع رینج کے لیے اس میں سب سے زیادہ سیالیت موجود ہے۔ آپ اسے آسانی سے اپنی dapp میں ضم کر سکتے ہیں تاکہ، مثال کے طور پر، صارفین کو اپنے ETH کا DAI سے تبادلہ کرنے کی اجازت دی جا سکے۔

بدقسمتی سے، اس تحریر کے وقت انضمام صرف یونی سویپ v1 کے لیے ہے نہ کہ حال ہی میں جاری کردہ v2 (نئے ٹیب میں کھلتا ہے) کے لیے۔

Sablier

Sablier (نئے ٹیب میں کھلتا ہے) صارفین کو رقم کی ادائیگیوں کو اسٹریم (stream) کرنے کی اجازت دیتا ہے۔ ایک ہی تنخواہ کے دن کے بجائے، آپ کو ابتدائی سیٹ اپ کے بعد مزید انتظامیہ کے بغیر مسلسل اپنی رقم ملتی رہتی ہے۔ اس انضمام میں اس کا اپنا سب گراف (نئے ٹیب میں کھلتا ہے) شامل ہے۔

آگے کیا ہے؟

اگر آپ کے پاس create-eth-app کے بارے میں سوالات ہیں، تو Sablier کمیونٹی سرور (نئے ٹیب میں کھلتا ہے) پر جائیں، جہاں آپ create-eth-app کے مصنفین سے رابطہ کر سکتے ہیں۔ کچھ ابتدائی اگلے اقدامات کے طور پر آپ Material UI (نئے ٹیب میں کھلتا ہے) جیسے UI فریم ورک کو ضم کرنا، اس ڈیٹا کے لیے GraphQL استفسارات (queries) لکھنا جس کی آپ کو درحقیقت ضرورت ہے اور تعیناتی (deployment) کو سیٹ اپ کرنا چاہیں گے۔