1,311 পড়া

Next.js, TypeScript এবং সলিডিটি সহ কীভাবে একটি বিকেন্দ্রীভূত দাতব্য প্ল্যাটফর্ম তৈরি করবেন

দ্বারা Darlington Gospel 8m2024/01/16

অতিদীর্ঘ; পড়তে

এই ব্যাপক নির্দেশিকাতে স্বাগতম যেখানে আমরা Next.js, সলিডিটি এবং TypeScript ব্যবহার করে একটি Web3 বিকেন্দ্রীভূত চ্যারিটি প্ল্যাটফর্ম তৈরি করব। এই টিউটোরিয়ালের শেষ নাগাদ, আপনি স্পষ্টভাবে বুঝতে পারবেন:

featured image - Next.js, TypeScript এবং সলিডিটি সহ কীভাবে একটি বিকেন্দ্রীভূত দাতব্য প্ল্যাটফর্ম তৈরি করবেন

আপনি কি তৈরি করবেন, বিটফিনিটি টেস্ট নেটওয়ার্ক এবং গিট রেপোতে লাইভ ডেমো দেখুন।

ভূমিকা

Next.js এর সাথে গতিশীল ইন্টারফেস তৈরি করা
সলিডিটির সাথে ইথেরিয়াম স্মার্ট চুক্তি তৈরি করা
টাইপস্ক্রিপ্ট ব্যবহার করে স্ট্যাটিক টাইপ চেকিং অন্তর্ভুক্ত করা
আপনার স্মার্ট চুক্তির সাথে স্থাপন করা এবং ইন্টারঅ্যাক্ট করা
ব্লকচেইন-ভিত্তিক দাতব্য প্ল্যাটফর্মের মৌলিক বিষয়গুলি বোঝা

এই টিউটোরিয়ালে অংশ নেওয়ার বোনাস হিসেবে, আপনি সহজেই একজন ইন-ডিমান্ড সলিডিটি ডেভেলপার হওয়ার বিষয়ে আমাদের সম্মানিত বইটির একটি কপি জিততে পারেন। এই অফারটি প্রথম 300 জনের জন্য বিনামূল্যে, নীচের ছোট ভিডিওটি দেখুন কিভাবে জিতবেন তার নির্দেশাবলীর জন্য।

পূর্বশর্ত

আমার সাথে নির্মাণের জন্য আপনাকে নিম্নলিখিত সরঞ্জামগুলি ইনস্টল করতে হবে:

Node.js
সুতা
গিট ব্যাশ
মেটামাস্ক
পরবর্তী.js
দৃঢ়তা
রেডাক্স টুলকিট
Tailwind CSS

এই টিউটোরিয়ালের জন্য MetaMask সেট আপ করতে, অনুগ্রহ করে নীচের নির্দেশমূলক ভিডিওটি দেখুন:

একবার আপনি সেটআপ সম্পন্ন করলে, আপনি আমাদের বইয়ের একটি বিনামূল্যের অনুলিপি পাওয়ার যোগ্য। আপনার বই দাবি করতে, আপনার কাজের প্রমাণ জমা দেওয়ার জন্য অনুগ্রহ করে ফর্মটি পূরণ করুন ৷

3 মাস পর্যন্ত বিনামূল্যের প্রিমিয়াম কোর্স পেতে নিম্নলিখিত নির্দেশমূলক ভিডিওগুলি দেখুন৷

ড্যাপ মেন্টরস একাডেমি, সহ:

আজই বিটফিনিটির সাথে আপনার যাত্রা শুরু করুন। আপনার প্রথম চ্যারিটি ডোনেশন ট্র্যাকিং dApp তৈরি করার সাথে সাথে একটি দ্রুত, সহজ, এবং ঝামেলা-মুক্ত বিকাশ প্রক্রিয়ার অভিজ্ঞতা নিন। বিটফিনিটি নেটওয়ার্কে আপনার স্মার্ট চুক্তি স্থাপন করুন এবং একটি ইতিবাচক প্রভাব ফেলুন।

এটি বলে, আসুন টিউটোরিয়ালটিতে ঝাঁপিয়ে পড়ি এবং আমাদের প্রকল্প সেট আপ করি।

সেটআপ

আমরা একটি প্রস্তুত ফ্রন্টএন্ড রিপোজিটরি ক্লোন করে এবং পরিবেশ ভেরিয়েবল সেট আপ করে শুরু করব। নিম্নলিখিত কমান্ড চালান:

 git clone https://github.com/Daltonic/dappFundsX cd dappFundsX yarn install git checkout no_redux_no_blockchain

এর পরে, প্রকল্পের মূলে একটি .env ফাইল তৈরি করুন এবং নিম্নলিখিত কীগুলি অন্তর্ভুক্ত করুন:

 NEXT_PUBLIC_RPC_URL=http://127.0.0.1:8545 NEXT_PUBLIC_ALCHEMY_ID=<YOUR_ALCHEMY_PROJECT_ID> NEXT_PUBLIC_PROJECT_ID=<WALLET_CONNECT_PROJECT_ID> NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=somereallysecretsecret

আপনার নিজ নিজ প্রকল্প আইডি দিয়ে <YOUR_ALCHEMY_PROJECT_ID> এবং <WALLET_CONNECT_PROJECT_ID> প্রতিস্থাপন করুন।

YOUR_ALCHEMY_PROJECT_ID : এখানে কী পান WALLET_CONNECT_PROJECT_ID : এখানে কী পান

অবশেষে, প্রকল্পটি শুরু করতে yarn dev চালান।

এই প্রজেক্টের জন্য আমাদের ফ্রন্টএন্ড শক্ত এবং কিছু স্মার্ট কন্ট্রাক্ট ইন্টিগ্রেশনের জন্য প্রস্তুত, কিন্তু শেয়ার করা ডেটা স্পেস সক্ষম করতে আমাদের Reduxify এর প্রয়োজন হবে।

রেডাক্স স্টোর তৈরি করা

উপরের চিত্রটি আমাদের Redux স্টোরের কাঠামোর প্রতিনিধিত্ব করে, এটি সহজ হবে যেহেতু আমরা কিছু অতিরিক্ত জটিল প্রকল্প তৈরি করছি না।

আমরা আমাদের অ্যাপ্লিকেশনের বিশ্বব্যাপী অবস্থা পরিচালনা করতে Redux সেট আপ করব। এই পদক্ষেপগুলি অনুসরণ করুন:

প্রোজেক্ট রুটে একটি store ফোল্ডার তৈরি করুন।
store ভিতরে, দুটি ফোল্ডার তৈরি করুন: actions এবং states ।
states ভিতরে, একটি globalStates.ts ফাইল তৈরি করুন।

actions ভিতরে, একটি globalActions.ts ফাইল তৈরি করুন।

store ফোল্ডারের ভিতরে একটি globalSlices.ts ফাইল তৈরি করুন।

store ফোল্ডারের ভিতরে একটি index.ts ফাইল তৈরি করুন।

Redux প্রদানকারীর সাথে pages/_app.ts ফাইল আপডেট করুন।

আমাদের অ্যাপ্লিকেশনটি Redux টুলকিটের সাথে মোড়ানো হয়েছে, এবং ফ্রন্টএন্ডের সাথে ব্যাকএন্ডকে একীভূত করার সময় আমরা Redux পুনরায় দেখব।

স্মার্ট চুক্তি উন্নয়ন

এর পরে, আমরা আমাদের প্ল্যাটফর্মের জন্য স্মার্ট চুক্তি তৈরি করব:

প্রকল্পের মূলে একটি contracts ফোল্ডার তৈরি করুন।
contracts ভিতরে, একটি DappFund.sol ফাইল তৈরি করুন এবং নীচের চুক্তি কোড যোগ করুন।

DappFund চুক্তিটি দাতব্য সংস্থাগুলিকে তৈরি, আপডেট এবং দান করার পাশাপাশি প্রশাসনিক কার্যাবলী যেমন দাতব্য কর পরিবর্তন এবং একটি দাতব্য সংস্থাকে নিষিদ্ধ করার সুবিধা দেবে৷

এখানে একটি ফাংশন-বাই-ফাংশন ব্রেকডাউন রয়েছে:

constructor() : চুক্তিটি মোতায়েন করার সময় এই ফাংশনটি প্রাথমিক দাতব্য কর সেট করে। চুক্তির স্থাপনের সময় এটি শুধুমাত্র একবার কার্যকর করা হয়।
createCharity() : এই ফাংশনটি ব্যবহারকারীদের একটি নতুন দাতব্য সংস্থা তৈরি করতে দেয়। এটির জন্য বিভিন্ন পরামিতি যেমন নাম, বিবরণ, ছবি, প্রোফাইল এবং দাতব্য সংস্থার পরিমাণ প্রয়োজন। এটি পরীক্ষা করে যে এই প্যারামিটারগুলি বৈধ এবং তারপর একটি নতুন CharityStruct তৈরি করে এবং এটি charities ম্যাপিংয়ে যুক্ত করে৷
updateCharity() : এই ফাংশনটি দাতব্য প্রতিষ্ঠানের মালিককে তার বিবরণ আপডেট করতে দেয়। দাতব্য প্রতিষ্ঠানের বিশদ আপডেট করার আগে এটি চেক করে যে দাতব্য প্রতিষ্ঠানটি বিদ্যমান এবং প্রেরক দাতব্য প্রতিষ্ঠানের মালিক।
deleteCharity() : এই ফাংশনটি একটি দাতব্য প্রতিষ্ঠানের মালিককে এটিকে মুছে ফেলা হিসাবে চিহ্নিত করতে দেয়। এটি মুছে ফেলা হিসাবে চিহ্নিত করার আগে দাতব্য সংস্থাটি বিদ্যমান এবং প্রেরক দাতব্য প্রতিষ্ঠানের মালিক কিনা তা পরীক্ষা করে।
toggleBan() : এই ফাংশনটি চুক্তির মালিককে একটি দাতব্য সংস্থাকে নিষিদ্ধ বা নিষিদ্ধ করার অনুমতি দেয়। এটি চেক করে যে দাতব্য তার নিষিদ্ধ স্থিতি টগল করার আগে বিদ্যমান।
donate() : এই ফাংশন ব্যবহারকারীদের একটি দাতব্য দান করতে অনুমতি দেয়. এটি পরীক্ষা করে যে দাতব্য সংস্থাটি বিদ্যমান, নিষিদ্ধ নয় এবং এখনও তার তহবিল সংগ্রহের লক্ষ্যে পৌঁছায়নি৷ তারপরে এটি মোট অনুদানের সংখ্যা বৃদ্ধি করে, একটি নতুন SupportStruct তৈরি করে, এবং এটিকে supportersOf ম্যাপিংয়ের সাথে যুক্ত করে। এটি দাতব্য সংস্থার উত্থাপিত পরিমাণ এবং অনুদানের সংখ্যাও আপডেট করে।
changeTax() : এই ফাংশন চুক্তির মালিককে দাতব্য কর পরিবর্তন করতে দেয়। এটি ট্যাক্স আপডেট করার আগে নতুন ট্যাক্স শতাংশ বৈধ কিনা তা পরীক্ষা করে।
getCharity() : এই ফাংশনটি যেকেউ একটি দাতব্য সংস্থার বিবরণ পেতে দেয়। এটি প্রদত্ত আইডির সাথে যুক্ত CharityStruct ফেরত দেয়।
getCharities() : এই ফাংশনটি যে কাউকে সমস্ত সক্রিয় দাতব্য সংস্থার বিবরণ পেতে দেয়। এটি CharityStruct বস্তুর একটি অ্যারে প্রদান করে।
getMyCharities() : এই ফাংশনটি একজন ব্যবহারকারীকে তাদের সমস্ত সক্রিয় দাতব্য প্রতিষ্ঠানের বিবরণ পেতে দেয়। এটি CharityStruct বস্তুর একটি অ্যারে প্রদান করে।
getSupports() : এই ফাংশনটি যে কেউ একটি নির্দিষ্ট দাতব্য সংস্থার সমস্ত সমর্থকদের বিবরণ পেতে দেয়। এটি SupportStruct অবজেক্টের একটি অ্যারে প্রদান করে।
payTo() : এই অভ্যন্তরীণ ফাংশনটি তহবিল স্থানান্তর করতে ব্যবহৃত হয়। এটি প্রদত্ত ঠিকানায় ইথারের নির্দিষ্ট পরিমাণ পাঠায়।
currentTime() : এই অভ্যন্তরীণ ফাংশনটি ইউনিক্স যুগের পর থেকে সেকেন্ডে বর্তমান সময় প্রদান করে। এটি টাইমস্ট্যাম্প অনুদান এবং দাতব্য সৃষ্টিতে ব্যবহৃত হয়।

চুক্তি স্থাপন এবং বীজ বপন

এখন, আসুন আমাদের স্মার্ট চুক্তি স্থাপন করি এবং কিছু ডামি ডেটা দিয়ে এটিকে পূরণ করি:

প্রজেক্ট রুটে একটি scripts ফোল্ডার তৈরি করুন।
scripts ভিতরে, একটি deploy.js এবং একটি seed.js ফাইল তৈরি করুন এবং নিম্নলিখিত কোডগুলি যোগ করুন।

স্ক্রিপ্ট স্থাপন

বীজ স্ক্রিপ্ট

চুক্তি স্থাপন করতে নিম্নলিখিত কমান্ডগুলি চালান এবং ডেটা সহ এটিকে বীজ করুন:
```
 yarn hardhat node # Run in terminal 1 yarn hardhat run scripts/deploy.js # Run in terminal 2 yarn hardhat run scripts/seed.js # Run in terminal 2
```

আপনি যদি এটি সঠিকভাবে করেন তবে আপনাকে নীচের মত একটি অনুরূপ আউটপুট দেখতে হবে:

এই মুহুর্তে আমরা আমাদের ফ্রন্টএন্ডে আমাদের স্মার্ট চুক্তির একীকরণ শুরু করতে পারি।

ফ্রন্টএন্ড ইন্টিগ্রেশন

প্রথমে প্রজেক্ট রুটে একটি services ফোল্ডার তৈরি করুন এবং এর ভিতরে একটি blockchain.tsx ফাইল তৈরি করুন। এই ফাইলে আমাদের স্মার্ট চুক্তির সাথে ইন্টারঅ্যাক্ট করার ফাংশন থাকবে।

প্রদত্ত কোডটি আমাদের স্মার্ট চুক্তির সাথে ইন্টারঅ্যাক্ট করার জন্য আমাদের ব্লকচেইন পরিষেবার একটি টাইপস্ক্রিপ্ট বাস্তবায়ন। এই পরিষেবাটি ব্যবহারকারীদের আমাদের দাতব্য প্ল্যাটফর্মে ক্রিয়া সম্পাদন করতে সক্ষম করে, যার মধ্যে দাতব্য সংস্থাগুলি তৈরি এবং আপডেট করা, দান করা এবং আরও অনেক কিছু।

এখানে একটি ফাংশন-বাই-ফাংশন ব্রেকডাউন রয়েছে:

getEthereumContracts() : এই ফাংশনটি Ethereum চুক্তির দৃষ্টান্তগুলি পায় যার সাথে পরিষেবাটি যোগাযোগ করবে। এটি ব্যবহারকারীর একটি সংযুক্ত Ethereum অ্যাকাউন্ট আছে কিনা তা পরীক্ষা করে এবং চুক্তির সাথে ইন্টারঅ্যাক্ট করতে এটি ব্যবহার করে, অন্যথায়, এটি একটি এলোমেলোভাবে তৈরি ওয়ালেট ব্যবহার করে।
getAdmin() : এই ফাংশন চুক্তির মালিককে ফেরত দেয়।
getCharities() , getMyCharities() , getCharity() : এই ফাংশনগুলি যথাক্রমে সমস্ত দাতব্য সংস্থা, বর্তমান ব্যবহারকারীর দ্বারা তৈরি দাতব্য সংস্থা এবং একটি নির্দিষ্ট দাতব্য সংস্থার আইডি দ্বারা নিয়ে আসে।
getSupporters() : এই ফাংশনটি একটি নির্দিষ্ট দাতব্য সংস্থার সমর্থকদের আইডি দ্বারা নিয়ে আসে।
createCharity() , updateCharity() : এই ফাংশনগুলি একজন ব্যবহারকারীকে যথাক্রমে একটি নতুন দাতব্য সংস্থা তৈরি করতে বা একটি বিদ্যমান দাতব্য আপডেট করার অনুমতি দেয়।
makeDonation() : এই ফাংশনটি একজন ব্যবহারকারীকে একটি নির্দিষ্ট দাতব্য প্রতিষ্ঠানে দান করতে দেয়।
deleteCharity() : এই ফাংশনটি দাতব্য প্রতিষ্ঠানের মালিককে এটি মুছে ফেলার অনুমতি দেয়।
banCharity() : এই ফাংশনটি চুক্তির মালিককে একটি দাতব্য সংস্থাকে নিষিদ্ধ করার অনুমতি দেয়।
structuredCharities() , structuredSupporters() : এইগুলি হল সহায়ক ফাংশন যা চুক্তি থেকে ফেরত ডেটাকে আরও ব্যবহারযোগ্য বিন্যাসে গঠন করে।

নিম্নলিখিত কোডগুলি ব্যবহার করে bitfinity নেটওয়ার্ক অন্তর্ভুক্ত করতে services মধ্যে provider.tsx ফাইলটি আপডেট করুন৷

পৃষ্ঠা স্মার্ট চুক্তির সাথে ইন্টারঅ্যাক্ট করছে

এর পরে, আমরা ব্লকচেইন পরিষেবার ফাংশনগুলিকে ফ্রন্টএন্ডে তাদের নিজ নিজ ইন্টারফেসের সাথে লিঙ্ক করব:

নং 1: getCharities() ফাংশন থেকে ডেটা পেতে সমস্ত চ্যারিটি আপডেট pages/index.tsx প্রদর্শন করা।

ব্লকচেইন ডেটা স্ক্রিনে প্রদর্শিত হওয়ার আগে কীভাবে Redux ব্যবহার করা হয় তা লক্ষ্য করুন।

নং 2: ব্যবহারকারীর দাতব্য প্রদর্শন করা বর্তমান ব্যবহারকারীর দাতব্য প্রতিষ্ঠান পেতে useEffect() হুক ব্যবহার করতে pages/projects.tsx আপডেট করুন।

বর্তমান ব্যবহারকারীর দাতব্য সংস্থাগুলি পুনরুদ্ধার করতে useEffect() হুকের ব্যবহার এবং একাধিক উপাদান জুড়ে ব্লকচেইন থেকে ডেটা পরিচালনা এবং প্রদর্শন করতে Redux কীভাবে ব্যবহার করা হয় তা দয়া করে নোট করুন৷ এটি পৃষ্ঠা এবং উপাদান জুড়ে একটি পুনরাবৃত্তি প্যাটার্ন হবে।

নং 3: ফর্ম জমা দেওয়ার জন্য createCharity() ফাংশন ব্যবহার করার জন্য নতুন দাতব্য প্রতিষ্ঠান আপডেট pages/donations/create.tsx তৈরি করা।

নং 4: Id দ্বারা দাতব্য এবং সমর্থকদের পুনরুদ্ধার করতে getServerSideProps() , getCharity() এবং getSupporters() ফাংশন ব্যবহার করতে একক চ্যারিটি আপডেট pages/donations/[id].tsx প্রদর্শন করা।

নং 5: বিদ্যমান দাতব্য সম্পাদনা pages/donations/edit/[id].tsx আপডেট করুন getCharity() ফাংশন ব্যবহার করে ID দ্বারা দাতব্য পুনরুদ্ধার করতে এবং ফর্ম ক্ষেত্রগুলি পূরণ করুন।

আপনি কি দেখেছেন কিভাবে getCharity() ফাংশনটি আইডি দ্বারা দাতব্য পুনরুদ্ধার করার জন্য ব্যবহার করা হয়েছিল এবং ফর্ম ক্ষেত্রগুলিকে পপুলেট করার জন্য কীভাবে এটি ব্যবহার করা হয়েছিল?

স্মার্ট চুক্তির সাথে উপাদান

আমরা উপরের পৃষ্ঠাগুলির মতো করেছিলাম, আসুন স্মার্ট চুক্তির সাথে ইন্টারঅ্যাক্ট করতে নিম্নলিখিত উপাদানগুলি আপডেট করি:

নং 1: ব্যানচ্যারিটি handleBanning() banCharity() ফাংশন ব্যবহার করার জন্য চ্যারিটি ব্যানিং আপডেট components/Ban.tsx পরিচালনা করুন।

নং 2: একটি দাতব্য তালিকামুক্তকরণ প্রক্রিয়া চালানোর জন্য handleDelete() এবং deleteCharity() ফাংশন ব্যবহার করার জন্য চ্যারিটি মুছে ফেলার আপডেট components/Delete.tsx ফাইল পরিচালনা করা।

নং 3: দাতব্য প্রতিষ্ঠানকে দান করা মেকডোনেশন handleSubmit() makeDonation() ফাংশন ব্যবহার করার জন্য components/Donor.tsx ফাইল আপডেট করুন।

অন্যান্য উপাদান

এখানে বাকি উপাদানগুলি রয়েছে যা আপনার আপডেট করা উচিত কারণ সেগুলিতে Redux এর একীকরণ।

NavBtn কম্পোনেন্ট পর্যালোচনা এবং কম্পোনেন্ট আপডেট করে যা ব্যবহারকারীদের দাতব্য তথ্য নেভিগেট করতে, মুছতে এবং সম্পাদনা করতে সক্ষম করে। ক্লিক করার পরে ডিলিট মোডাল ট্রিগার করতে Redux ব্যবহার করুন।

পেমেন্ট কম্পোনেন্ট তাদের নিজ নিজ বোতামে ক্লিক করার পরে অনুদান, সমর্থকদের ট্রিগার করতে এবং মডেল নিষিদ্ধ করতে Redux-এর বাস্তবায়ন পর্যালোচনা এবং আপডেট করুন।

ক্লোজ বোতামে ক্লিক করা হলে সমর্থকদের মোডাল বন্ধ করতে Redux- এর বাস্তবায়ন পর্যালোচনা এবং আপডেট করে।

এই আপডেটগুলি বাস্তবায়নের মাধ্যমে, সমস্ত উপাদান এবং পৃষ্ঠাগুলি এখন স্মার্ট চুক্তির সাথে সংযুক্ত, প্রকল্পের সমাপ্তি চিহ্নিত করে৷

আপনার Nextjs সার্ভার এতক্ষণ ডাউন থাকলে, আপনি yarn dev চালিয়ে এটিকে আবার স্পিন আপ করতে পারেন।

আরও শেখার জন্য, আমরা আমাদের YouTube চ্যানেলে এই বিল্ডটির সম্পূর্ণ ভিডিও দেখার পরামর্শ দিচ্ছি।

উপসংহার

এই টিউটোরিয়ালে, আমরা Next.js, Solidity, এবং TypeScript ব্যবহার করে একটি বিকেন্দ্রীভূত দাতব্য প্ল্যাটফর্ম তৈরি করেছি। আমরা ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করেছি, Redux স্টোর তৈরি করেছি এবং ব্লকচেইনে স্মার্ট কন্ট্রাক্ট স্থাপন করেছি। ফ্রন্টএন্ডের সাথে স্মার্ট চুক্তিকে একীভূত করার মাধ্যমে, আমরা একটি বিরামহীন ব্যবহারকারীর অভিজ্ঞতা তৈরি করেছি।

পুরো টিউটোরিয়াল জুড়ে, আপনি Web3 অ্যাপ্লিকেশন তৈরি করতে, স্মার্ট কন্ট্রাক্ট তৈরি করতে এবং স্ট্যাটিক টাইপ চেকিং অন্তর্ভুক্ত করার ক্ষেত্রে মূল্যবান দক্ষতা অর্জন করেছেন।

এখন, আপনি আপনার নিজস্ব বিকেন্দ্রীভূত দাতব্য প্ল্যাটফর্ম তৈরি করতে প্রস্তুত। সুখী কোডিং এবং Web3 জগতে আপনার উদ্ভাবন প্রকাশ করুন!