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 রিপোজিটরি তৈরি করতে পারেন, এটি 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-এর বাইরের অতিরিক্ত ল্যাঙ্গুয়েজ ফিচার।
• অটোপ্রিফিক্সড CSS, তাই আপনার -webkit- বা অন্যান্য প্রিফিক্সের প্রয়োজন নেই।
• কভারেজ রিপোর্টিংয়ের জন্য বিল্ট-ইন সাপোর্ট সহ একটি দ্রুত ইন্টারেক্টিভ ইউনিট টেস্ট রানার।
• একটি লাইভ ডেভেলপমেন্ট সার্ভার যা সাধারণ ভুলগুলো সম্পর্কে সতর্ক করে।
• প্রোডাকশনের জন্য JS, CSS এবং ছবিগুলোকে হ্যাশ এবং সোর্সম্যাপ সহ বান্ডেল করার জন্য একটি বিল্ড স্ক্রিপ্ট।

বিশেষ করে create-eth-app নতুন hooks effects (opens in a new tab) ব্যবহার করছে। এটি শক্তিশালী, অথচ খুব ছোট তথাকথিত ফাংশনাল কম্পোনেন্ট লেখার একটি পদ্ধতি। create-eth-app-এ এগুলো কীভাবে ব্যবহৃত হয় তা জানতে নিচে Apollo সম্পর্কিত সেকশনটি দেখুন।

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)-এ আপগ্রেড করার কথা বিবেচনা করতে পারেন যা প্রায় বিটা পর্যায় পার করে ফেলেছে।

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-কে ধীর এবং অদক্ষ করে তুলবে। এর একটি সমাধান হতে পারে আপনার কন্ট্রাক্টের ভেতরে একটি ফেচার কল ফাংশন ব্যবহার করা যা একবারে একাধিক ডেটা রিটার্ন করে। তবে এটি সবসময় আদর্শ নয়।

তাছাড়া আপনি হয়তো ঐতিহাসিক ডেটার প্রতিও আগ্রহী হতে পারেন। আপনি শুধু শেষ ট্রেডের সময়ই নয়, বরং আপনার নিজের করা সমস্ত ট্রেডের সময়ও জানতে চান। 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 কোয়েরি লেখার মতোই সহজ:

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

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

টেমপ্লেটসমূহ

এর পাশাপাশি আপনি বেশ কয়েকটি ভিন্ন টেমপ্লেট থেকে বেছে নিতে পারেন। এখন পর্যন্ত আপনি একটি Aave, Compound, ইউনিসোয়াপ বা Sablier ইন্টিগ্রেশন ব্যবহার করতে পারেন। এগুলো সবই আগে থেকে তৈরি করা সাবগ্রাফ ইন্টিগ্রেশনের পাশাপাশি গুরুত্বপূর্ণ সার্ভিস স্মার্ট কন্ট্রাক্ট অ্যাড্রেস যোগ করে। শুধু yarn create eth-app my-eth-app --with-template aave-এর মতো ক্রিয়েশন কমান্ডে টেমপ্লেটটি যোগ করুন।

Aave

Aave (opens in a new tab) হলো একটি বিকেন্দ্রীকৃত অর্থ ঋণ প্রদান মার্কেট। আমানতকারীরা প্যাসিভ ইনকাম উপার্জনের জন্য মার্কেটে তারল্য প্রদান করে, অন্যদিকে ঋণগ্রহীতারা জামানত ব্যবহার করে ঋণ নিতে সক্ষম হয়। Aave-এর একটি অনন্য বৈশিষ্ট্য হলো এই ফ্ল্যাশ লোন (opens in a new tab) যা আপনাকে কোনো জামানত ছাড়াই অর্থ ধার করার সুবিধা দেয়, যতক্ষণ না আপনি একটি ট্রানজ্যাকশনের মধ্যে ঋণ ফেরত দেন। এটি উদাহরণস্বরূপ আরবিট্রেজ ট্রেডিংয়ে আপনাকে অতিরিক্ত নগদ অর্থ প্রদানের জন্য কার্যকর হতে পারে।

যেসব ট্রেড করা টোকেন আপনাকে সুদ উপার্জন করে দেয় সেগুলোকে aTokens বলা হয়।

যখন আপনি create-eth-app-এর সাথে Aave ইন্টিগ্রেট করা বেছে নেবেন, তখন আপনি একটি সাবগ্রাফ ইন্টিগ্রেশন (opens in a new tab) পাবেন। Aave The Graph ব্যবহার করে এবং ইতিমধ্যে আপনাকে Ropsten (opens in a new tab) এবং মেইননেট (opens in a new tab)-এ র (raw) (opens in a new tab) বা ফরম্যাটেড (opens in a new tab) আকারে বেশ কয়েকটি ব্যবহারের জন্য প্রস্তুত সাবগ্রাফ প্রদান করে।

Compound

Compound (opens in a new tab) অনেকটা Aave-এর মতোই। এই ইন্টিগ্রেশনে ইতিমধ্যে নতুন 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) ব্যবহারকারীদের স্ট্রিমিং মানি পেমেন্টের সুবিধা দেয়। একটি নির্দিষ্ট বেতনের দিনের পরিবর্তে, প্রাথমিক সেটআপের পর কোনো অতিরিক্ত পরিচালনা ছাড়াই আপনি আসলে আপনার টাকা অনবরত পেতে থাকেন। এই ইন্টিগ্রেশনে এর নিজস্ব সাবগ্রাফ (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 কোয়েরি লিখতে পারেন এবং ডিপ্লয়মেন্ট সেটআপ করতে পারেন।