create-eth-app এর মাধ্যমে আপনার ডিএ্যাপ ফ্রন্টএন্ড ডেভেলপমেন্ট শুরু করুন

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

এছাড়া আপনি হয়তো ঐতিহাসিক ডেটার প্রতিও আগ্রহী হতে পারেন। আপনি শুধু সর্বশেষ ট্রেডের সময়ই নয়, বরং আপনার করা সমস্ত ট্রেডের সময় জানতে চান। create-eth-app সাবগ্রাফ প্যাকেজটি ব্যবহার করুন, ডকুমেন্টেশন (opens in a new tab) পড়ুন এবং এটিকে আপনার নিজের কন্ট্রাক্টগুলোর সাথে মানিয়ে নিন। আপনি যদি জনপ্রিয় স্মার্ট কন্ট্রাক্ট খুঁজছেন, তবে হয়তো ইতিমধ্যেই একটি সাবগ্রাফ থাকতে পারে। সাবগ্রাফ এক্সপ্লোরার (opens in a new tab) চেক করে দেখুন।

একবার আপনার কাছে একটি সাবগ্রাফ থাকলে, এটি আপনাকে আপনার ডিএ্যাপ এ একটি সাধারণ কোয়েরি লেখার সুযোগ দেয় যা আপনার প্রয়োজনীয় ঐতিহাসিক ডেটাসহ সমস্ত গুরুত্বপূর্ণ ব্লকচেইন ডেটা নিয়ে আসে, যার জন্য শুধুমাত্র একটি ফেচ প্রয়োজন।

Apollo

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

Uniswap

Uniswap (opens in a new tab) হলো একটি ডিসেন্ট্রালাইজড এক্সচেঞ্জ (DEX)। লিকুইডিটি প্রদানকারীরা ট্রেডের উভয় পক্ষের জন্য প্রয়োজনীয় টোকেন বা ইথার প্রদান করে ফি উপার্জন করতে পারে। এটি ব্যাপকভাবে ব্যবহৃত হয় এবং তাই বিভিন্ন ধরণের টোকেন এর জন্য এর লিকুইডিটি সবচেয়ে বেশি। আপনি সহজেই এটিকে আপনার ডিএ্যাপ এ ইন্টিগ্রেট করতে পারেন, উদাহরণস্বরূপ, ব্যবহারকারীদের তাদের ETH এর বদলে DAI সোয়াপ করার সুযোগ দিতে।

দুর্ভাগ্যবশত, এই লেখাটি লেখার সময় ইন্টিগ্রেশনটি শুধুমাত্র Uniswap 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 কোয়েরি লিখতে পারেন এবং ডিপ্লয়মেন্ট সেটআপ করতে পারেন।

পেজ সর্বশেষ আপডেট: ২৯ সেপ্টেম্বর, ২০২৫

m (opens in a new tab)

c (opens in a new tab)

b (opens in a new tab)

+2

অবদানকারীদের দেখুন