NextJs, Tailwind, এবং Sia Renterd ব্যবহার করে একটি Web3 মুভি স্ট্রিমিং dApp তৈরি করুন

ভূমিকা

ওয়েব বিকশিত হচ্ছে, এবং Web3 প্রযুক্তি ভিডিও স্ট্রিমিং সহ ঐতিহ্যবাহী শিল্পে বিপ্লব ঘটাচ্ছে। ওডিসির মতো প্ল্যাটফর্মগুলি চার্জের নেতৃত্ব দিচ্ছে, ইউটিউব এবং রাম্বলের বিকেন্দ্রীকৃত বিকল্পগুলি অফার করছে। একইভাবে, গুগল ড্রাইভ এবং ড্রপবক্সের মতো উত্তরাধিকার সরবরাহকারীদের বিপরীতে, সিয়া ডেটা স্টোরেজকে রূপান্তরিত করছে, একটি গোপনীয়তা-কেন্দ্রিক এবং ব্যবহারকারী-কেন্দ্রিক পদ্ধতি প্রদান করছে।

NextJs, TypeScript, Tailwind CSS, এবং Sia Renterd ব্যবহার করে একটি অত্যাধুনিক Web3 মুভি স্ট্রিমিং dApp তৈরির যাত্রায় আমাদের সাথে যোগ দিন। এই টিউটোরিয়াল সিরিজটি আপনাকে একটি বিকেন্দ্রীভূত অ্যাপ্লিকেশন তৈরি করতে গাইড করবে যা ব্যবহারকারীর ডেটার মালিকানা এবং গোপনীয়তা নিশ্চিত করতে Sia-এর ব্লকচেইন প্রযুক্তির ব্যবহার করে।

এই টিউটোরিয়ালের শেষে, আপনি এতে দক্ষতা অর্জন করবেন:

• বন্ধুদের সাথে শেয়ার করতে বা স্কুল প্রকল্প হিসেবে ব্যবহার করার জন্য একটি সম্পূর্ণ কার্যকরী মুভি স্ট্রিমিং প্ল্যাটফর্ম তৈরি করুন
• আপনার নিজস্ব SaaS (পরিষেবা হিসাবে সফ্টওয়্যার) অ্যাপ্লিকেশন চালু করুন
• ভিডিও স্ট্রিমিং শিল্পে Web3 প্রযুক্তির সম্ভাব্যতা আনলক করুন

প্রকল্পটি কার্যকর দেখতে নীচের ডেমো ভিডিওটি দেখুন এবং এই ধরনের আরও উদ্ভাবনী বিষয়বস্তুর জন্য আমাদের চ্যানেলটি সাবস্ক্রাইব করুন !

পূর্বশর্ত

অনুসরণ করার জন্য, নিশ্চিত করুন যে আপনি নিম্নলিখিত সরঞ্জামগুলি ইনস্টল করেছেন এবং স্ট্যাকের সাথে পরিচিতি আপনার বোঝার উন্নতি করবে:

• নোডজেস
• NextJs
• Tailwind CSS
• টাইপস্ক্রিপ্ট
• ডকার (প্রয়োজনীয়)

এই তিন পর্বের সিরিজটি কভার করবে:

• পার্ট 1: প্রজেক্ট সেটআপ - রেন্টার্ড জেন টেস্টনেট, প্যাকেজ ইনস্টলেশন, এবং এনভায়রনমেন্ট ভেরিয়েবল।
• পার্ট 2: ব্যাকএন্ড ডেভেলপমেন্ট - ব্যাকএন্ড পরিষেবা তৈরি করা
• পার্ট 3: ফ্রন্টএন্ড ডেভেলপমেন্ট - ব্যাকএন্ড পরিষেবার সাথে ফ্রন্টএন্ডকে একীভূত করা।

আপনি যদি পুরো বিকাশ প্রক্রিয়াটি দেখতে পছন্দ করেন তবে আমি এই প্লেলিস্টটি দেখার পরামর্শ দিচ্ছি , প্লেলিস্টে, এখানে যা কিছু লেখা আছে এবং আরও অনেক কিছু ভিডিওগুলিতে ধারণ করা হয়েছে৷

যে বলে, এর এই প্রকল্প সেট আপ করতে ঝাঁপ দাও.

প্রকল্প সেটআপ - অংশ 1

আমরা একটি প্রস্তুত সংগ্রহস্থল ক্লোন করে শুরু করব যাতে Sia Renterd ডকার কম্পোজ স্ক্রিপ্ট এবং ব্যাকএন্ড এবং ফ্রন্টএন্ড পরিষেবা অন্তর্ভুক্ত থাকে। নিম্নলিখিত কমান্ড চালান:

 $ git clone https://github.com/Daltonic/sia_vid_tv $ cd sia_vid_tv

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

 $ git checkout 01_starter_branch

এর পরে, আসুন এই রেন্টারড পরিষেবার জন্য সংশ্লিষ্ট পরিবেশ পরিবর্তনশীল সেট আপ করি। এই প্রকল্পের মূলে একটি .env ফাইল তৈরি করুন এবং নীচের কীগুলি প্রয়োগ করুন:

 RENTERD_SEED=<RENTERD_SEED_PHRASE> RENTERD_API_PASSWORD=<YOUR_PREFERED_PASSWORD> RENTERD_LOG_LEVEL=debug RENTERD_LOG_DATABASE_LEVEL=error

এই API কীগুলি পেতে, আপনাকে আপনার মেশিনে Sia Renterd ইনস্টল করতে হবে; অনুগ্রহ করে নীচের ছোট ভিডিওটি দেখুন, যা এটির সমস্ত সংক্ষিপ্তসার করে।

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

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

অবশেষে, আমরা এই প্রকল্পের মূলে নিম্নলিখিত ডকার কমান্ডটি চালিয়ে একটি ডকার কন্টেইনার স্পিন করতে পারি। নিশ্চিত করুন যে টার্মিনালটি এই docker-compose.yml ফাইলটির মতো একই ডিরেক্টরি অবস্থানে রয়েছে।

 $ docker compose -f "docker-compose.yml" up -d --build

ধারকটি নিচের দিকে টেনে আনতে কমান্ডটি নোট করুন: $ docker compose -f "docker-compose.yml" down আপনি যখন আপনার ডকার উদাহরণটি বন্ধ করতে চান তখন এটি চালান (কিন্তু এখন নয়)।

আপনি উপরের নির্দেশাবলী সঠিকভাবে সম্পাদন করলে, আপনি যখন আপনার ব্রাউজারে http://localhost:9880 এ যান তখন আপনাকে নীচের ইন্টারফেসটি দেখতে হবে।

লগ ইন করতে আপনার পাসওয়ার্ড (আপনার এনভায়রনমেন্ট ভেরিয়েবল থেকে) লিখুন। তারপর, ফাইল আপলোড, ডাউনলোড এবং স্ট্রিমিংয়ের জন্য আপনার Sia Renterd ইন্সট্যান্স সেট আপ করতে নীচের ভিডিওতে কনফিগারেশন পদ্ধতি অনুসরণ করুন।

উপরের ভিডিওটি 6:41 মিনিটের চিহ্নে শুরু হয়, অনুগ্রহ করে 20:01 চিহ্নে থামুন, এই অংশটি আপনাকে Renterd কনফিগারেশন প্রক্রিয়ার মাধ্যমে চাক্ষুষভাবে গাইড করবে।

মনে রাখবেন যে ব্লকচেইন সিঙ্ক্রোনাইজেশন প্রক্রিয়া, হোস্ট ম্যাচিং সহ, প্রস্তুত হতে 25 min পর্যন্ত সময় নেয়, তাই আপনাকে পুরো প্রক্রিয়াটির সাথে ধৈর্য ধরতে হবে।

অনুগ্রহ করে Renterd-এ vidtv নামে একটি নতুন বালতি তৈরি করুন, যেখানে এই প্রকল্পের জন্য আমাদের সমস্ত ফাইল সংরক্ষণ করা হবে৷ আপনি যদি উপরের নির্দেশাবলী সফলভাবে কার্যকর করে থাকেন, তাহলে আপনার রেন্টারড নোড আপলোড এবং ডাউনলোডের জন্য প্রস্তুত থাকতে হবে। নিচের ছবিটি দেখুন।

আশ্চর্যজনক। এই মুহুর্তে, আমাদের রেন্টারড পরিষেবা ফাইলগুলি গ্রহণ শুরু করার জন্য প্রস্তুত, তবে আমাদের এটির সাথে প্রোগ্রাম্যাটিকভাবে যোগাযোগ করতে হবে।

ব্যাকএন্ড এবং ফ্রন্টএন্ডের জন্য প্যাকেজ এবং এনভায়রনমেন্ট ভেরিয়েবল সেট আপ করার মাধ্যমে এই টিউটোরিয়ালের এই অংশটিকে একটি গোল করা যাক।

ব্যাকএন্ড প্রজেক্ট সেটআপ ব্যাকএন্ড পরিষেবা প্যাকেজ ইনস্টল এবং আরও উন্নয়নের জন্য প্রস্তুত করার জন্য নিম্নলিখিত নির্দেশাবলী সম্পাদন করুন।

নিম্নলিখিত কমান্ডগুলি ব্যবহার করে একটি নতুন টার্মিনাল উদাহরণ থেকে ব্যাকএন্ড ডিরেক্টরিতে নেভিগেট করুন:

 $ cd backend $ yarn install #you can also use npm install $ touch .env #or mannually create it at the root of the backend directory

পরবর্তী, পরিবেশ ভেরিয়েবলে নিম্নলিখিত তথ্য সরবরাহ করুন।

 SIA_API_BUCKET=vidtv SIA_API_PASSWORD=<YOUR_PREFERED_PASSWORD> SIA_API_BASE_URL=http://localhost:9880 ORIGIN=http://localhost:9000 PORT=9000

এবং এখন, $ yarn build && yarn start এবং এটাও নিশ্চিত করুন যে এটি যেকোনো বাগ থেকে মুক্ত।

ফ্রন্টএন্ড প্রজেক্ট সেটআপ শেষ পর্যন্ত, ফ্রন্টএন্ডের সাথে যুক্ত প্যাকেজগুলি ইনস্টল করতে নিম্নলিখিত কমান্ডগুলি চালান। পরে, আমরা এটি চালাব।

নিম্নলিখিত কমান্ডগুলি ব্যবহার করে একটি নতুন টার্মিনাল উদাহরণ থেকে ব্যাকএন্ড ডিরেক্টরিতে নেভিগেট করুন:

 $ cd frontend $ yarn install #you can also use npm install $ touch .env #or mannually create it at the root of the backend directory

পরবর্তী, পরিবেশ ভেরিয়েবলে নিম্নলিখিত তথ্য সরবরাহ করুন।

 NEXT_PUBLIC_PROJECT_ID=<YOUR_WALLET_CONNECT_ID> NEXT_PUBLIC_FILE_SERVICE_URL=http://localhost:9000

সাইন আপ করুন এবং আপনার প্রোজেক্ট আইডি পেতে Walletconnect এর সাথে একটি প্রকল্প তৈরি করুন। আপনি এনভায়রনমেন্ট ভেরিয়েবলে প্রোজেক্ট আইডি সরবরাহ করার পরে, $ yarn build && yarn start করুন এবং এটি যে কোনও বাগ থেকে মুক্ত তা নিশ্চিত করতে।

এই মুহুর্তে, আপনি যখন http://localhost:3000 ব্রাউজারে যান তখন আপনি নীচের ইন্টারফেসটি দেখতে পাবেন।

পরবর্তী পদক্ষেপ এই মাইলফলক পৌঁছানোর জন্য অভিনন্দন! ব্যাকএন্ড পরিষেবা বিকাশ সম্পূর্ণ করতে অংশ 2-এ এগিয়ে যান ।

ব্যাকএন্ড পরিষেবা - পার্ট 2

আবার স্বাগতম! অনুগ্রহ করে পার্ট 1 পড়ুন যদি আপনি ইতিমধ্যে না থাকেন। এখন, আসুন পার্ট 2-এ ডুব দেওয়া যাক: আমাদের ওয়েব3 মুভি স্ট্রিমিং প্ল্যাটফর্মের জন্য ব্যাকএন্ড পরিষেবা তৈরি করা।

আমরা ব্যাকএন্ডের জন্য একটি স্টার্টার কোড প্রদান করেছি, যা বর্তমানে একটি "স্বাগত" বার্তা প্রদর্শন করে যখন আপনি সার্ভার শুরু করেন এবং আপনার ব্রাউজারে http://localhost:9000 এ যান৷ আসুন এই ভিত্তির উপর গড়ে তুলি।

আমাদের বর্তমানে ব্যাকএন্ডের সোর্স ডিরেক্টরিতে এই কোডগুলি রয়েছে। আমাকে সংক্ষেপে তাদের ব্যাখ্যা করা যাক.

ইউটিলিটি ফাইল এই ফোল্ডারটি যা সম্পূর্ণরূপে backend/src/utils এ সম্বোধন করা যেতে পারে দুটি অপরিহার্য ফাইল রয়েছে: একটি HTTP ব্যতিক্রম হ্যান্ডলার ফাংশন এবং ফাইল আপলোড তথ্য পরিচালনার জন্য একটি ইন্টারফেস।

এই কোডটি একটি কাস্টম HttpException ক্লাস সংজ্ঞায়িত করে যা অন্তর্নির্মিত জাভাস্ক্রিপ্ট Error শ্রেণীকে প্রসারিত করে, নির্দিষ্ট HTTP স্ট্যাটাস কোড এবং বার্তাগুলির সাথে ত্রুটির উদাহরণ তৈরি করার অনুমতি দেয়।

https://gist.github.com/Daltonic/bb37e1d4c5f84bc9c10fcbb8c3e19621

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

https://gist.github.com/Daltonic/64fb31bf3b19668a17d14f59e087a77e

এবং তারপর backend/src রুট ফোল্ডারে, আমাদের কাছে এই index.ts ফাইলটি রয়েছে যা CORS এবং ফাইল আপলোড সমর্থন সহ একটি Express.js সার্ভার সেট আপ করে, একটি একক GET রুট সংজ্ঞায়িত করে যা একটি "স্বাগত" বার্তা প্রদান করে, এবং ধরার মাধ্যমে ত্রুটিগুলি পরিচালনা করে এবং সেগুলিকে কাস্টম HttpExceptions হিসাবে পুনরায় নিক্ষেপ করে, তারপর পরিবেশ ভেরিয়েবলে নির্দিষ্ট করা 9000 পোর্টে সার্ভার শুরু করে।

https://gist.github.com/Daltonic/8d76c3a212681d7bfe89b0792b0e707f

এখন যেহেতু আমরা মূল ফাইলগুলি কভার করেছি, আসুন একটি services ফোল্ডারে দুটি নতুন ফাইল তৈরি করি, প্রতিটি আমাদের অ্যাপ্লিকেশনে একটি স্বতন্ত্র উদ্দেশ্য পরিবেশন করে।

সার্ভিস ফাইল

backend/src ফোল্ডারে, এই অবস্থানে services নামে একটি নতুন ফোল্ডার তৈরি করুন, এখানে আমরা দুটি পরিষেবা তৈরি করব:

1. Sia পরিষেবা : ফাইল আপলোড, ডাউনলোড, স্ট্রিমিং এবং ক্যাশিং পরিচালনা করে, রেন্টারড পরিষেবার সাথে যোগাযোগ করে।
2. ব্যাকগ্রাউন্ড সার্ভিস : ক্যাশ করা ফাইলগুলি পরিচালনা করে, প্রতিদিন মধ্যরাতে 7 দিন পরে সেগুলি স্বয়ংক্রিয়ভাবে সরিয়ে দেয়।

সিয়া সার্ভিস

backend/src/services ফোল্ডারে sia.service.ts নামে একটি ফাইল তৈরি করুন এবং এই পরিষেবাটি তৈরি করতে নীচের পদক্ষেপগুলি অনুসরণ করুন।

এই কোডটি একটি SiaService ক্লাস সংজ্ঞায়িত করে যা Sia API সেটিংস এবং একটি মূল URL এর জন্য পরিবেশ ভেরিয়েবলের সাথে শুরু করে, যা Sia পরিষেবার সাথে ইন্টারঅ্যাকশন পরিচালনার জন্য একটি ভিত্তি প্রদান করে। এখন, এই পরিষেবার জন্য বাকি কোডগুলি সরবরাহ করা যাক।

Sia Renterd-এ ফাইল আপলোড করা Sia নেটওয়ার্কে ফাইল আপলোড করার জন্য, আমাদের ক্লাসে এই তিনটি পদ্ধতি যোগ করতে হবে, দুটি হবে ব্যক্তিগত এবং একটি হবে সর্বজনীন।

এই কোডটি একটি প্রাইভেট পদ্ধতি generateRandomString সংজ্ঞায়িত করে যা একটি নির্দিষ্ট দৈর্ঘ্যের একটি এলোমেলো স্ট্রিং তৈরি করে, যা বড় হাতের এবং ছোট হাতের অক্ষর এবং সংখ্যার সমন্বয়ে গঠিত, একটি লুপ ব্যবহার করে একটি পূর্বনির্ধারিত স্ট্রিং থেকে এলোমেলোভাবে অক্ষর নির্বাচন করতে। Renterd-এ ফাইল পাঠানোর আগে আমরা প্রতিটি ফাইলের অনন্য নাম পরিবর্তন করতে এটি ব্যবহার করব।

উপরের কোডটি একটি ব্যক্তিগত পদ্ধতি uploadToSiaService সংজ্ঞায়িত করে যা Axios ব্যবহার করে Sia Renterd-এ একটি ফাইল আপলোড করে, আপলোডের অগ্রগতি এবং ত্রুটিগুলি পরিচালনা করে এবং Axios প্রতিক্রিয়া ফেরত দেয় বা আপলোড ব্যর্থ হলে একটি ত্রুটি ছুঁড়ে দেয়।

রেন্টারড এন্ডপয়েন্টগুলি API ডকুমেন্টেশনে লেখা আছে যা আপনি নীচের ভিডিওটি দেখতে বা দেখতে পারেন যেখানে আমি ব্যাখ্যা করেছি কিভাবে Sia Renterd API ডকুমেন্টেশন।

এখন পাবলিক পদ্ধতি অন্তর্ভুক্ত করা যাক যা আমরা পরে আমাদের অ্যাপ্লিকেশনে একটি শেষ পয়েন্ট হিসাবে প্রকাশ করব।

এই কোডটি একটি সর্বজনীন পদ্ধতি uploadFile সংজ্ঞায়িত করে যা একটি অনন্য শনাক্তকারী তৈরি করে একটি ফাইল আপলোড করে, ফাইলটিকে একটি স্থানীয় ক্যাশে সংরক্ষণ করে এবং তারপরে এটি Sia Renterd-এ আপলোড করে, ফাইলটির URL এবং একটি সফল বার্তা ফেরত দেয় বা আপলোড ব্যর্থ হলে একটি ত্রুটি ছুঁড়ে দেয়। .

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

এই কোডটি একটি ব্যক্তিগত পদ্ধতির সংজ্ঞায়িত করে যেটি Sia পরিষেবা থেকে একটি ফাইল downloadFromSiaService করে, স্থানীয়ভাবে ক্যাশে করে এবং ফাইলটির একটি পঠনযোগ্য স্ট্রিম প্রদান করে, ত্রুটিগুলি পরিচালনা করে এবং ফাইলটি না পাওয়া গেলে একটি 404 ইমেজ ফেরত দেয়।

ব্যাকএন্ড ডিরেক্টরিতে সেই প্রতিক্রিয়া_ফাইলগুলি পাওয়া যাক, অন্যথায় আমরা 404.png ফাইলটিকে কল করার সময় একটি ত্রুটি অনুভব করব। backend ডিরেক্টরিতে response_files নামে আরেকটি ফোল্ডার তৈরি করুন এবং এতে নিম্নলিখিত চিত্রগুলি অনুলিপি করুন।

পারফেক্ট, এখন এই ফাইল ডাউনলোড সার্ভিসটি সম্পূর্ণ করা যাক। এছাড়াও SiaService ক্লাসে নীচের পদ্ধতি যোগ করুন।

এই কোডটি একটি পাবলিক মেথড downloadFile সংজ্ঞায়িত করে যা Sia Renterd থেকে একটি ফাইল পুনরুদ্ধার করার জন্য ব্যক্তিগত পদ্ধতি downloadFromSiaService কল করে এবং পুনরুদ্ধার করা ফাইলের পঠনযোগ্য স্ট্রীম ফেরত দেয়।

সার্ভিস এন্ডপয়েন্ট

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

backend/src/index.ts ফাইলে যান এবং এই কোডগুলির সাথে এর বিষয়বস্তু আপডেট করুন৷

এই কোডটি CORS এবং ফাইল আপলোড সমর্থন সহ একটি Express.js সার্ভার সেট আপ করে, তিনটি শেষ পয়েন্ট সংজ্ঞায়িত করে: একটি স্বাগত বার্তা, Sia নেটওয়ার্কে ফাইল আপলোড এবং Sia নেটওয়ার্ক থেকে ফাইল ডাউনলোড, ফাইল অপারেশন পরিচালনা করতে SiaService ক্লাস ব্যবহার করে এবং HttpException এর জন্য ত্রুটি পরিচালনা

নিচের ভিডিওটির এই বিভাগটি দেখুন যদি আপনার কিছু ভিজ্যুয়াল সাহায্যের প্রয়োজন হয়, নিশ্চিত করুন যে আপনি 01:50:44 টাইমস্ট্যাম্পে থামছেন।

ফাইলগুলি কতক্ষণ ক্যাশে থাকে তা নিয়ন্ত্রণ করে আমাদের সার্ভারটি অব্যবহৃত ফাইল দিয়ে পূরণ না করে তা নিশ্চিত করার জন্য আমাদের একটি ক্যাশে পরিচালনা পরিষেবা তৈরি করতে হবে। এটা জানা গুরুত্বপূর্ণ যে আমাদের এই পরিষেবাটির প্রয়োজনের একমাত্র কারণ হল ডেটা লেটেন্সি কমানো৷

ব্যাকগ্রাউন্ড সার্ভিস

backend/src/services ফোল্ডারে যান এবং background.service.ts নামে একটি ফাইল তৈরি করুন এবং এতে কোডের এই ক্রম যুক্ত করুন।

এই কোডটি একটি BackgroundService ক্লাস সংজ্ঞায়িত করে যা একটি ক্যাশে ডিরেক্টরি সেট আপ করে এবং node-cron লাইব্রেরি ব্যবহার করে দৈনিক কাজের সময়সূচী করে, ব্যাকগ্রাউন্ড কাজগুলি শুরু করে এবং একটি নিশ্চিতকরণ বার্তা লগ করে। আসুন একটি পদ্ধতি তৈরি করি যা ক্যাশে থাকা 7 দিনের বেশি পুরানো ফাইল মুছে ফেলার জন্য দায়ী হবে।

পুরানো ফাইল মুছে ফেলা হচ্ছে BackgroundService ক্লাসে এই পদ্ধতিটি যোগ করুন।

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

এখন, একটি ফাংশন লিখি যা নোড-ক্রোন প্যাকেজ ব্যবহার করে ফাইল মুছে ফেলার সময় নির্ধারণ করতে হবে।

এই কোডটি প্রতিদিন মধ্যরাতে (00:00) স্বয়ংক্রিয় ফাইল পরিষ্কার করার জন্য deleteOldFiles পদ্ধতি চালানোর জন্য একটি দৈনিক ক্রন কাজ সেট আপ করে।

ব্যাকগ্রাউন্ড সার্ভিস ক্লাসের ইনস্ট্যান্টেশনে দৈনিক কাজের সময়সূচী করার জন্য আমাদের কনস্ট্রাক্টর ফাংশন আপডেট করতে হবে।

নিখুঁত, শেষ পর্যন্ত, শুরু করার সময় সার্ভার প্রক্রিয়ার অংশ হিসাবে এই ব্যাকগ্রাউন্ড অপারেশনটি যোগ করা যাক। backend/src/index.ts ফাইলে যান এবং ব্যাকগ্রাউন্ড পরিষেবা ফাইল আমদানি করতে অ্যাপ লিসেনার পদ্ধতি আপডেট করুন।

আপনাকে $ yarn build && yarn start ব্যবহার করে ব্যাকএন্ড সার্ভিস কমান্ড পুনরায় চালু করতে হবে এবং নীচের চিত্রের মত একটি টার্মিনাল প্রিন্টআউট দেখতে হবে।

আপনি যদি দেখতে চান যে আমি কীভাবে পুরো ব্যাকগ্রাউন্ড পরিষেবা কোড করেছি, নীচের ভিডিওটি আপনার জন্য; শুধু নিশ্চিত করুন যে আপনি 02:16:07 টাইমস্ট্যাম্পে থামছেন।

পরবর্তী ধাপ অভিনন্দন, আপনি এখন এই টিউটোরিয়ালের চূড়ান্ত অংশের জন্য প্রস্তুত যা পার্ট 3 ।

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

Web3 মডেল প্রমাণীকরণ – পার্ট 3

Frontend ডিরেক্টরিতে 'config' নামে একটি নতুন ফোল্ডার তৈরি করুন এবং একটি সূচী ফাইল যোগ করুন, যার ফলে পাথ /frontend/config/index.tsx । এখন, এর সাথে নিম্নলিখিত কোড যোগ করা যাক।

এই কোডটি আমাদের Web3 অ্যাপ্লিকেশনের জন্য একটি Wagmi কনফিগারেশন সেট আপ করে, মেটাডেটা, সমর্থিত চেইন, এবং ওয়ালেট এবং সামাজিক লগইন বিকল্পগুলি সহ প্রমাণীকরণ সেটিংস সংজ্ঞায়িত করে এবং config এক্সপোর্টে সংরক্ষণ করে। প্রমাণীকরণ অবস্থার ট্র্যাক রাখতে আমাদের একটি প্রসঙ্গ API তৈরি করতে হবে।

কনটেক্সট এপিআই নেক্সট, ফ্রন্টেন্ড ডিরেক্টরিতে এখনও 'প্রসঙ্গ' নামে একটি নতুন ফোল্ডার তৈরি করুন এবং একটি ইনডেক্স ফাইল যোগ করুন, যার ফলে পাথ /frontend/context/index.tsx । এটিতে নিম্নলিখিত কোড যোগ করুন।

এই কোডটি Wagmi এবং React Query ব্যবহার করে একটি Web3Modal প্রদানকারী সেট আপ করে, প্রকল্প আইডি এবং থিম ভেরিয়েবলের সাথে Web3 মোডাল কনফিগার করে এবং একটি WagmiProvider এবং QueryClientProvider-এ অ্যাপ্লিকেশনটি মোড়ানো।

লেআউট আপডেট করা : উপরের কনফিগারেশনগুলি অন্তর্ভুক্ত করতে আমাদের অ্যাপ্লিকেশন লেআউট আপডেট করা যাক। /frontend/app/layout.tsx এ যান এবং নীচের কোডগুলি দিয়ে এর কোডগুলি প্রতিস্থাপন করুন।

উপরের কোডটি একটি Next.js অ্যাপ্লিকেশনের জন্য রুট লেআউট সেট আপ করে, যার মধ্যে মেটাডেটা, ফন্ট, শৈলী এবং Web3 মডেল, টোস্ট নোটিফিকেশন এবং হেডার এবং ফুটারের মতো লেআউট উপাদানের জন্য প্রদানকারী রয়েছে।

লগইন বোতাম এখন, আমাদের /frontend/app/components/layout/Header.tsx এবং /frontend/app/components/shared/Menu.tsx উপাদানগুলিতে লগইন বোতামগুলি সক্রিয় করতে হবে এবং নীচের তথ্য ব্যবহার করে তাদের কোড আপডেট করতে হবে।

এই কোডটি একটি নেভিগেশন বারের জন্য একটি প্রতিক্রিয়া উপাদান সংজ্ঞায়িত করে যার মধ্যে একটি লোগো, নেভিগেশন লিঙ্ক, একটি কাস্টম মেনু এবং একটি লগইন বোতাম রয়েছে যা বিভিন্ন স্ক্রীন আকারের জন্য একটি প্রতিক্রিয়াশীল ডিজাইন সহ একটি Web3 মডেল চালু করে৷

নিম্নলিখিত চিত্রগুলি প্রমাণ হিসাবে পপ আপ করা উচিত যে আমরা যা করেছি তা কাজ করে যখন আপনি লগইন বোতামে ক্লিক করেন এবং আপনার পছন্দের প্রদানকারী, X, Facebook, Google, Discord বা Ethereum-এর সাথে এগিয়ে যান৷

চমত্কার, আসুন আরও গভীরে যাই এবং আমাদের ডাটাবেস এবং NextJs API-ভিত্তিক সিস্টেম সেট আপ করি। প্রক্রিয়া সম্পর্কে কোনো বিভ্রান্তির জন্য, নীচের ভিডিও বিভাগ দেখুন; শুধু নিশ্চিত করুন যে আপনি 02:57:59 চিহ্নে থামছেন।

ডাটাবেস স্ক্রিপ্ট

প্রথমে, আসুন আমাদের পৃষ্ঠাগুলি এবং শেষ পয়েন্টগুলিকে সঠিকভাবে সম্বোধন করতে NextJs কনফিগারেশন স্ক্রিপ্টটি আপডেট করি এবং আমাদের দূরবর্তী চিত্রগুলিকে সতর্কতা এবং যাচাই-বাছাই থেকে মুক্ত করি।

এই কোডটি একটি Next.js কনফিগারেশন অবজেক্টকে সংজ্ঞায়িত করে যা API রুট পুনর্লিখন এবং ইমেজ অপ্টিমাইজেশন সেট আপ করে, যে কোনও HTTPS হোস্টনাম থেকে দূরবর্তী ছবি এবং স্থানীয় হোস্ট ডোমেন থেকে স্থানীয় ছবিগুলিকে অনুমতি দেয়।

ডেটাবেস কনফিগ স্ক্রিপ্ট আমরা এই অ্যাপ্লিকেশনের জন্য SQLite ব্যবহার করব, কিন্তু আপনি MYSQL বা NOSQL প্রদানকারীর মতো আরও শক্তিশালী সমাধান ব্যবহার করতে পারবেন। সরলতার জন্য, আসুন একটি SQLite ফ্ল্যাট ফাইলের সাথে কাজ করি।

/frontend/app/api/database.ts ফাইল পাথ তৈরি করুন এবং এতে নিচের কোড যোগ করুন।

এই কোডটি একটি SQLite ডাটাবেস সংযোগ সেট আপ করে, দুটি API ফাংশন সংজ্ঞায়িত করে, apiGet এবং apiPost , ডাটাবেসে GET এবং POST অনুরোধগুলি সম্পাদন করতে, ত্রুটি পরিচালনা এবং প্রতিশ্রুতি-ভিত্তিক অ্যাসিঙ্ক্রোনাস এক্সিকিউশন সহ। আমরা যখনই ডাটাবেস থেকে ডেটা পাঠাতে বা পুনরুদ্ধার করতে চাই তখনই আমরা এই কোডগুলি ব্যবহার করব।

ডাটাবেস মাইগ্রেশন স্ক্রিপ্ট আমাদের সমস্ত বিষয়বস্তু ধরে রাখার জন্য আমাদের একটি ডাটাবেস ফ্ল্যাট ফাইল এবং একটি টেবিল উভয়ই তৈরি করতে হবে। /frontend/app/api/migrations.ts ফাইল পাথ তৈরি করুন এবং এতে নিচের কোড যোগ করুন।

এই কোডটি একটি ডাটাবেস মাইগ্রেশন ফাংশনকে সংজ্ঞায়িত করে যা নির্দিষ্ট কলাম সহ একটি 'মুভি' টেবিল তৈরি করে যদি এটি বিদ্যমান না থাকে, SQLite ব্যবহার করে, এবং অপারেশনের ফলাফল লগ করে। এখন /frontend ডিরেক্টরিতে নির্দেশিত টার্মিনালে নীচের কমান্ডটি চালান।

 $ cd frontend $ npx esrun app/api/migrations.ts

এটি উল্লেখ্য যে এই প্রক্রিয়াটি ফ্রন্টএন্ড ডিরেক্টরির মূলে movies.db নামে একটি ডাটাবেস ফ্ল্যাট ফাইল তৈরি করবে। আমরা এই কমান্ডটি package.json স্ক্রিপ্টে যোগ করেছি, তাই ফ্রন্টএন্ড ডিরেক্টরিতে $ yarn migrate চালানো একই কাজ করবে।

ভিজ্যুয়াল সহায়তার জন্য, নীচের ভিডিওটি দেখুন, এটিকে 03:10:54 চিহ্নে থামান।

আবেদনের শেষ পয়েন্ট

এখন, চলুন মুভি তৈরি, পড়া, আপডেট করা এবং মুছে ফেলার জন্য কিছু শেষ বিন্দু সংজ্ঞায়িত করা যাক। আমরা এই শেষ পয়েন্টগুলি করতে NextJs API বিধান ব্যবহার করব।

মুভি এন্ডপয়েন্ট তৈরি করুন একটি মুভি তৈরি করতে, প্রয়োজনীয় তথ্যের মধ্যে ইউজার আইডি, মুভির নাম, ছবি, ভিডিও ইউআরএল, রিলিজের তারিখ, জেনার, রেটিং, ভাষা, সময়কাল এবং পটভূমির বিবরণ অন্তর্ভুক্ত থাকে। /frontend/app/api/movies/create/route.ts ফাইল পাথ তৈরি করুন এবং এতে নিচের কোড যোগ করুন।

এই কোডটি POST অনুরোধগুলি পরিচালনা করার জন্য একটি এন্ডপয়েন্টকে সংজ্ঞায়িত করে, মুভি ডেটা যাচাই এবং প্রক্রিয়া করতে, একটি অনন্য স্লাগ তৈরি করতে এবং ত্রুটিগুলি পরিচালনা করার সময় এবং JSON প্রতিক্রিয়াগুলি ফেরত দেওয়ার সময় একটি apiPost ফাংশন ব্যবহার করে একটি ডাটাবেসে ডেটা সন্নিবেশ করে৷

মুভি এন্ডপয়েন্ট আপডেট করুন একটি মুভি আপডেট করার জন্য, প্রয়োজনীয় তথ্যের মধ্যে ইউজার আইডি, স্লাগ এবং একটি মুভি তৈরি করার সময় প্রদত্ত অন্যান্য তথ্য অন্তর্ভুক্ত থাকে। /frontend/app/api/movies/update/route.ts ফাইল পাথ তৈরি করুন এবং এতে নিচের কোড যোগ করুন।

এই কোডটি একটি মুভি আপডেট করার জন্য POST অনুরোধগুলি পরিচালনা করার জন্য একটি এন্ডপয়েন্টকে সংজ্ঞায়িত করে, প্রয়োজনীয় বৈশিষ্ট্যগুলি যাচাই করা এবং apiPost ফাংশন ব্যবহার করে ডাটাবেসে মুভি ডেটা আপডেট করার জন্য একটি এসকিউএল কোয়েরি চালানো৷

মুভি এন্ডপয়েন্ট মুছুন একটি মুভি মুছে ফেলতে, প্রয়োজনীয় তথ্যের মধ্যে একটি মুভির ইউজার আইডি এবং স্লাগ অন্তর্ভুক্ত থাকে। /frontend/app/api/movies/delete/route.ts ফাইল পাথ তৈরি করুন এবং এতে নিচের কোড যোগ করুন।

এই কোডটি একটি মুভি মুছে ফেলার জন্য POST অনুরোধগুলি পরিচালনা করার জন্য একটি এন্ডপয়েন্টকে সংজ্ঞায়িত করে, প্রয়োজনীয় বৈশিষ্ট্যগুলি (ইউজারআইডি এবং স্লাগ) যাচাই করা এবং apiPost ফাংশন ব্যবহার করে ডাটাবেস থেকে মুভিটি মুছে ফেলার জন্য একটি SQL ক্যোয়ারী চালানো।

সমস্ত মুভিস এন্ডপয়েন্ট মুভিগুলি পাওয়ার জন্য প্রয়োজনীয় ঐচ্ছিক ডেটা হল পেজ সাইজ এবং ইউজারআইডি, যা ফলাফল ফিল্টার এবং পেজিনেট করার জন্য কোয়েরি প্যারামিটার হিসাবে পাস করা যেতে পারে। /frontend/app/api/movies/all/route.ts ফাইল পাথ তৈরি করুন এবং এতে নিচের কোড যোগ করুন।

উপরের কোডটি মুভিগুলি পুনরুদ্ধার করার জন্য GET অনুরোধগুলি পরিচালনা করার জন্য একটি এন্ডপয়েন্টকে সংজ্ঞায়িত করে, ব্যবহারকারী আইডি দ্বারা ঐচ্ছিক ফিল্টারিং এবং পেজ সাইজ অনুসারে পৃষ্ঠাগুলিকে অনুমতি দেয় এবং ফলাফলগুলি JSON ফর্ম্যাটে প্রদান করে৷

একক মুভি এন্ডপয়েন্ট একটি একক মুভি পুনরুদ্ধার করতে, প্রয়োজনীয় ডেটা হল একটি মুভির স্লাগ। /frontend/app/api/movies/[slug]/route.ts ফাইল পাথ তৈরি করুন এবং এতে নিচের কোড যোগ করুন।

এই কোডটি একটি এন্ডপয়েন্ট সংজ্ঞায়িত করে একটি মুভির স্লাগ দ্বারা পুনরুদ্ধার করার জন্য GET অনুরোধগুলি পরিচালনা করার জন্য, স্লাগ প্যারামিটারটি যাচাই করার জন্য, এবং apiGet ফাংশন ব্যবহার করে ডাটাবেস থেকে মুভি ডেটা পুনরুদ্ধার করার জন্য একটি SQL ক্যোয়ারী চালানোর জন্য।

এটি এই অ্যাপ্লিকেশনটির জন্য আমাদের প্রয়োজনীয় সমস্ত শেষ পয়েন্টগুলি চিহ্নিত করে৷ এই শেষ পয়েন্টগুলিকে আরও ভালভাবে বুঝতে সাহায্য করার জন্য আপনার যদি ভিজ্যুয়াল সাহায্যের প্রয়োজন হয়, অনুগ্রহ করে নীচের ভিডিওটি দেখুন, শুধু নিশ্চিত করুন যে আপনি 03:48:22 টাইমস্ট্যাম্পে থামছেন।

এন্ডপয়েন্ট ইন্টিগ্রেশন

আমাদের কাজ হল প্রাক-কোড করা উপাদান এবং পৃষ্ঠাগুলি পর্যালোচনা করা এবং আপডেট করা, প্রত্যেকের উদ্দেশ্য এবং কার্যকারিতা ব্যাখ্যা করা এবং বিদ্যমান কোডে আমরা যে পরিবর্তনগুলি করি তা নথিভুক্ত করা। আমরা পূর্বে api ডিরেক্টরিতে তৈরি করা শেষ পয়েন্টগুলির সাথে ইন্টারঅ্যাক্ট করার জন্য একটি পরিষেবা তৈরি করে শুরু করব।

/frontend/app/services/api.service.ts ফাইল পাথ তৈরি করুন এবং এতে নিচের কোড যোগ করুন।

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

আবেদন পাতা

আমাদের আবেদনের সাথে যুক্ত বিভিন্ন পৃষ্ঠা পর্যালোচনা এবং আপডেট করা যাক। আপনাকে অনেক কিছু পরিবর্তন করতে হবে না, শুধু এখানে হাইলাইট করা হয়েছে।

মুভি পেজ তৈরি করুন

এই পৃষ্ঠাটি একটি মুভি প্রকাশনা ফর্ম যা ব্যবহারকারীদের ভিডিও এবং ইমেজ ফাইল আপলোড করতে, মুভির বিশদ বিবরণ ইনপুট করতে এবং ফিল্মটি প্রকাশ করার জন্য ফর্ম জমা দেওয়ার অনুমতি দেয়, বৈধতা এবং ত্রুটি হ্যান্ডলিং সহ, প্রতিক্রিয়া এবং ওয়াগমি লাইব্রেরি ব্যবহার করে৷

এখন, নিচের কোডগুলো দিয়ে /frontend/app/pages/create/page.tsx এ পাওয়া ফাইলটি আপডেট করুন।

মূল কোডের তুলনায় এই কোডে করা পরিবর্তনগুলি হল:

1. api.service থেকে createMovie ফাংশন ইম্পোর্ট করেছে এবং একটি নতুন মুভি তৈরি করতে handleSubmit ফাংশনে এটি ব্যবহার করেছে।
2. useAccount হুক থেকে ব্যবহারকারীর ঠিকানা পাস করে createMovie ফাংশন কলে userId প্যারামিটার যোগ করা হয়েছে।
3. createMovie দ্বারা প্রত্যাবর্তিত প্রতিশ্রুতি পরিচালনা করতে toast.promise ব্যবহার করতে handleSubmit ফাংশন আপডেট করা হয়েছে।
4. handleSubmit ফাংশনে createMovie ফাংশন কলে ত্রুটি হ্যান্ডলিং যোগ করা হয়েছে।

এই পরিবর্তনগুলি ফর্মটিকে API এ মুভি ডেটা জমা দিতে এবং একটি নতুন মুভি এন্ট্রি তৈরি করতে সক্ষম করে যখন ত্রুটিগুলি পরিচালনা করে এবং একটি সাফল্যের বার্তা প্রদর্শন করে৷

মুভি পৃষ্ঠা সম্পাদনা করুন

এই মুভি সম্পাদনা পৃষ্ঠাটি অনুমোদিত ব্যবহারকারীদের মুভির বিশদ আপডেট করতে, পোস্টার এবং ভিডিও আপলোড করতে এবং পরিবর্তনগুলি সংরক্ষণ করার অনুমতি দেয়, বৈধতা এবং ত্রুটি পরিচালনা করে, প্রতিক্রিয়া, ওয়াগমি এবং Next.js ব্যবহার করে, বিশেষভাবে ব্যবহারকারীদের তাদের সিনেমা সম্পাদনা করার জন্য ডিজাইন করা হয়েছে৷

এখন, নীচের কোডগুলি সহ /frontend/app/pages/movies/edit/[slug]/page.tsx এ পাওয়া ফাইলটি আপডেট করুন।

মূল থেকে আলাদা কোডে করা আপগ্রেডগুলি হল:

1. @/app/services/api.service থেকে fetchMovie এবং updateMovie ফাংশন আমদানি করা হয়েছে এবং যথাক্রমে useEffect হুক এবং handleSubmit ফাংশনে সেগুলি ব্যবহার করেছে৷
2. মুভি ডেটা পুনরুদ্ধার করতে fetchMovie ফাংশন দিয়ে posters.find() পদ্ধতি প্রতিস্থাপন করা হয়েছে।
3. আপডেট মুভির বিশদ বিবরণ সহ updateMovie ফাংশন কল করার জন্য handleSubmit ফাংশন আপডেট করা হয়েছে৷
4. handleSubmit ফাংশনে updateMovie ফাংশন কলে ত্রুটি হ্যান্ডলিং যোগ করা হয়েছে।

এই পরিবর্তনগুলি আমাদের অ্যাপ্লিকেশনকে মুভি ডেটা পুনরুদ্ধার এবং আপডেট করার জন্য আমাদের API এন্ডপয়েন্টগুলির সাথে ইন্টারঅ্যাক্ট করতে সক্ষম করে, যেখানে মূল কোড আমাদের স্থানীয় posters অ্যারের উপর নির্ভর করে।

হোম পেজ

ব্যবহারকারীদের জন্য একটি আকর্ষক এবং তথ্যপূর্ণ ল্যান্ডিং পৃষ্ঠা প্রদান করতে এই হোম পৃষ্ঠাটি ব্যানার উপাদান, চলচ্চিত্রগুলির একটি তালিকা (হয় একটি API উত্স বা একটি লোডিং UI থেকে), এবং সাবস্ক্রিপশন বিকল্পগুলি, প্রতিক্রিয়া এবং Next.js ব্যবহার করে।

নিম্নলিখিত কোডগুলির সাথে /frontend/app/pages/page.tsx এ পাওয়া ফাইলটি আপডেট করুন।

আমরা হোম পেজে যে পরিবর্তনগুলি করেছি তা হল:

1. ./services/api.service থেকে fetchMovies ফাংশন আমদানি করা হয়েছে এবং আমাদের API থেকে মুভি ডেটা পুনরুদ্ধার করতে useEffect হুকে এটি ব্যবহার করেছে।
2. স্থানীয় posters ডেটাকে fetchMovies ফাংশন কল দিয়ে প্রতিস্থাপন করা হয়েছে, যা আমাদের API থেকে ডেটা নিয়ে আসে।
3. movies অবস্থা সেট করার আগে সমাধান করার জন্য fetchMovies দ্বারা প্রত্যাবর্তনের প্রতিশ্রুতির জন্য অপেক্ষা করার জন্য await কীওয়ার্ড যোগ করা হয়েছে।

এই পরিবর্তনগুলি আমাদের অ্যাপ্লিকেশনটিকে স্থানীয় ডেটার উপর নির্ভর করার পরিবর্তে আমাদের API থেকে মুভি ডেটা পুনরুদ্ধার করতে সাহায্য করে, অ্যাপ্লিকেশনটিকে আরও গতিশীল এবং ডেটা-চালিত করে।

ব্যবহারকারীর অ্যাকাউন্ট পৃষ্ঠা

এই পৃষ্ঠাটি বর্তমানে সংযুক্ত ব্যবহারকারীর দ্বারা পোস্ট করা চলচ্চিত্রগুলির একটি তালিকা প্রদর্শন করে, যেখানে ডেটা আনার সময় একটি লোডিং কঙ্কাল প্লেসহোল্ডার রয়েছে এবং একটি বার্তা ব্যবহারকারীকে তাদের অ্যাকাউন্ট সংযোগ করতে অনুরোধ করে যদি তারা তা না করে থাকে, Wagmi ব্যবহার করে এবং প্রতিক্রিয়া-লোডিং- কঙ্কাল

নিম্নলিখিত কোডগুলির সাথে /frontend/app/pages/account/page.tsx এ পাওয়া ফাইলটি আপডেট করুন৷

পৃষ্ঠায় করা পরিবর্তনগুলি হল:

1. @/app/services/api.service থেকে fetchMovies ফাংশন আমদানি করা হয়েছে এবং আমাদের API থেকে মুভি ডেটা পুনরুদ্ধার করতে useEffect হুকে এটি ব্যবহার করেছে।
2. স্থানীয় posters ডেটাকে fetchMovies ফাংশন কল দিয়ে প্রতিস্থাপন করা হয়েছে, যা আমাদের API থেকে ডেটা নিয়ে আসে।
3. ব্যবহারকারী-নির্দিষ্ট মুভি ডেটা পুনরুদ্ধার করতে fetchMovies ফাংশনের যুক্তি হিসাবে পাস করা address ৷
4. মুভি তালিকা রেন্ডার করার আগে address জন্য শর্তসাপেক্ষ চেক সরিয়ে দেওয়া হয়েছে, কারণ fetchMovies ফাংশন এখন এই যুক্তিটি পরিচালনা করে।
5. লোডিং কঙ্কাল প্রদর্শনের জন্য শর্তসাপেক্ষ বিবৃতিকে সরলীকৃত করা হয়েছে, কারণ এটি এখন শুধুমাত্র loaded অবস্থার উপর নির্ভর করে।

এই পরিবর্তনগুলি আমাদের API থেকে মুভি ডেটা পুনরুদ্ধার করে, সংযুক্ত ব্যবহারকারীর জন্য নির্দিষ্ট, এবং ডেটা আনার সময় একটি লোডিং কঙ্কাল প্রদর্শন করে৷

চলচ্চিত্রের বিবরণ পৃষ্ঠা

এই পৃষ্ঠাটি একটি ভিডিও প্লেয়ার এবং সম্পর্কিত চলচ্চিত্র সহ একটি সিনেমার নাম, মুক্তির বছর, রেটিং, সময়কাল, জেনার এবং পটভূমির তথ্য সহ একটি সিনেমার বিবরণ প্রদর্শন করে এবং ব্যবহারকারী মালিক হলে মুভিটি সম্পাদনা বা মুছে ফেলার বিকল্প প্রদান করে, Next.js, এবং Wagmi ব্যবহার করা।

নিম্নলিখিত কোডগুলির সাথে /frontend/app/pages/movies/[slug]/page.tsx এ পাওয়া ফাইলটি আপডেট করুন৷

আমরা এখানে কিছু বিশাল পরিবর্তন করেছি! এখানে আমরা যা করেছি তার একটি সারসংক্ষেপ:

1. @/app/services/api.service থেকে deleteMovie , fetchMovie , এবং fetchMovies ফাংশনগুলি আমদানি করা হয়েছে এবং সেগুলিকে আমাদের API শেষ পয়েন্টগুলির সাথে ইন্টারঅ্যাক্ট করতে ব্যবহার করেছে৷
2. মুভি ডেটা পুনরুদ্ধার করতে API কলগুলির সাথে স্থানীয় ডেটা প্রতিস্থাপন করা হয়েছে৷
3. deleteMovie ফাংশন ব্যবহার করে মুভি মুছে ফেলার কার্যকারিতা প্রয়োগ করা হয়েছে।
4. একটি চলচ্চিত্র মুছে ফেলার সময় একটি বিজ্ঞপ্তি প্রদর্শন করতে toast.promise ব্যবহার করা হয়েছে।
5. posters স্থানীয় ডেটা সরানো হয়েছে এবং API কলগুলির সাথে এটি প্রতিস্থাপিত হয়েছে৷
6. deleteMovie ফাংশন কল করতে এবং প্রতিক্রিয়া পরিচালনা করতে handleSubmit ফাংশন আপডেট করা হয়েছে।
7. fetchMovie এবং fetchMovies ফাংশন কল করতে useEffect হুক আপডেট করা হয়েছে৷

এই পরিবর্তনগুলির কারণে মুভি ডেটা পুনরুদ্ধার এবং মুছে ফেলার জন্য আমাদের অ্যাপ্লিকেশন আমাদের API এর সাথে ইন্টারঅ্যাক্ট করে এবং মুছে ফেলার প্রক্রিয়া চলাকালীন ব্যবহারকারীকে বিজ্ঞপ্তিগুলি প্রদর্শন করে৷

নীচের ভিডিওটির এই অংশটি আপনাকে দেখাবে কিভাবে আমরা এই পৃষ্ঠাগুলিকে শেষ পয়েন্টের সাথে একত্রিত করেছি, আপনি যদি কোনো সমস্যায় পড়েন তাহলে অনুগ্রহ করে সেই অংশটি নির্দ্বিধায় দেখুন৷ শুধু নিশ্চিত করুন যে আপনি 04:57:41 টাইমস্ট্যাম্পে থামছেন।

অ্যাপ্লিকেশন উপাদান

আসুন আমাদের অ্যাপ্লিকেশনের প্রতিটি উপাদানের উদ্দেশ্য নিয়ে আলোচনা করি। আমরা পরিবর্তন করা প্রয়োজন যে কোনো উপাদান আপডেট করা হবে.

ব্যানার উপাদান

এই উপাদানটি মুভি ব্যানারগুলির একটি ঘূর্ণায়মান ব্যাকগ্রাউন্ড ইমেজ প্রদর্শন করে, প্রতি 5 সেকেন্ডে মুভি ইমেজগুলির একটি অ্যারের মাধ্যমে সাইকেল চালায়, একটি সহজ এবং স্বয়ংক্রিয় স্লাইডশো প্রভাব তৈরি করে৷ এই উপাদান কোড /frontend/app/components/home/Banner.tsx এ মূল্যায়ন করা যেতে পারে।

পোস্টার উপাদান

এই উপাদানটি সোয়াইপার লাইব্রেরি ব্যবহার করে মুভি পোস্টারগুলির একটি প্রতিক্রিয়াশীল এবং ইন্টারেক্টিভ ক্যারোজেল প্রদর্শন করে, অটোপ্লে, পেজিনেশন এবং নেভিগেশনের মতো বৈশিষ্ট্য সহ, প্রপ হিসাবে পাস করা চলচ্চিত্রগুলির একটি তালিকা প্রদর্শন করে, একটি গতিশীল বিন্যাস বিভিন্ন স্ক্রীন আকারের সাথে খাপ খায়। এই উপাদান কোড /frontend/app/components/home/Posters.tsx এ মূল্যায়ন করা যেতে পারে।

পোস্টার UI উপাদান

এই উপাদানটি একটি মুভি পোস্টার বিভাগের জন্য একটি স্থানধারক কঙ্কাল লেআউট প্রদর্শন করে, প্রতিক্রিয়া-লোডিং-কঙ্কাল লাইব্রেরি ব্যবহার করে, "পোস্টার" প্রপের উপর ভিত্তি করে একটি গতিশীল সংখ্যক কঙ্কাল পোস্টার দেখায়, একটি প্রতিক্রিয়াশীল নকশা বিভিন্ন স্ক্রীন আকারের সাথে খাপ খাইয়ে নিয়ে, একটি লোডিং নির্দেশ করে প্রকৃত পোস্টার ডেটা আনা এবং প্রদর্শিত না হওয়া পর্যন্ত রাজ্য। এই উপাদান কোড /frontend/app/components/home/PosterUI.tsx এ মূল্যায়ন করা যেতে পারে।

সদস্যতা উপাদান

এই উপাদানটি একটি সাবস্ক্রিপশন প্ল্যান বিভাগ প্রদর্শন করে, বিভিন্ন ডামি প্ল্যানের বিবরণ, দাম এবং সুবিধা সহ প্রদর্শন করে। এটি ব্যবহারকারীদের একটি প্রতিক্রিয়াশীল গ্রিড লেআউট এবং ইন্টারেক্টিভ হোভার ইফেক্ট ব্যবহার করে ব্যবহারকারীর অভিজ্ঞতা বাড়াতে তাদের প্রয়োজন অনুসারে একটি পরিকল্পনা বেছে নিতে দেয়। এই উপাদান কোড /frontend/app/components/home/Subscription.tsx এ মূল্যায়ন করা যেতে পারে।

হেডার কম্পোনেন্ট

এই উপাদানটি পৃষ্ঠার শীর্ষে একটি নির্দিষ্ট নেভিগেশন বার রেন্ডার করে, যেখানে একটি লোগো, বিভিন্ন বিভাগের লিঙ্ক সহ একটি নেভিগেশন মেনু, প্রতিক্রিয়াশীল ডিজাইনের জন্য একটি মেনু টগল বোতাম এবং একটি লগইন বোতাম রয়েছে, যা অ্যাপ্লিকেশন জুড়ে একটি সামঞ্জস্যপূর্ণ এবং অ্যাক্সেসযোগ্য হেডার বিভাগ প্রদান করে . এই উপাদান কোড /frontend/app/components/layout/Header.tsx এ মূল্যায়ন করা যেতে পারে।

ফুটার উপাদান

এই উপাদানটি পৃষ্ঠার নীচে একটি ফুটার সেকশন রেন্ডার করে, যেখানে অ্যাপ্লিকেশনের লোগো, একটি সংক্ষিপ্ত বিবরণ, নেভিগেশন লিঙ্ক, যোগাযোগের তথ্য এবং সিয়া ফাউন্ডেশন দ্বারা চালিত বিকেন্দ্রীভূত স্টোরেজ সমাধানের উল্লেখ করে একটি ক্রেডিট রয়েছে যা প্রাসঙ্গিক একটি পরিষ্কার এবং সংগঠিত ফুটার বিভাগ প্রদান করে। তথ্য এবং লিঙ্ক। এই উপাদান কোড /frontend/app/components/layout/Footer.tsx এ মূল্যায়ন করা যেতে পারে।

মেনু উপাদান

এই উপাদানটি একটি প্রতিক্রিয়াশীল মেনু টগল বোতাম রেন্ডার করে, যা ক্লিক করা হলে, নেভিগেশন লিঙ্ক সমন্বিত একটি ড্রপডাউন মেনু খোলে বা বন্ধ করে, যাতে ব্যবহারকারীরা ছোট স্ক্রিনে অ্যাপ্লিকেশনের বিভিন্ন বিভাগে অ্যাক্সেস করতে পারে যেখানে ন্যাভিগেশন লিঙ্কগুলি ইতিমধ্যেই দৃশ্যমান বড় স্ক্রিনে মেনু লুকিয়ে থাকে। . এই উপাদান কোড /frontend/app/components/shared/Menu.tsx এ মূল্যায়ন করা যেতে পারে।

মুভি কার্ড কম্পোনেন্ট

এই উপাদানটি হোভার ইফেক্ট সহ একটি একক মুভির পোস্টার প্রদর্শন করে, অতিরিক্ত তথ্য যেমন মুভির নাম, মুক্তির বছর এবং ব্যাকগ্রাউন্ড সারাংশ দেখায় এবং মুভির বিশদ পৃষ্ঠার লিঙ্ক হিসাবেও কাজ করে, ব্যবহারকারীকে উন্নত করতে একটি প্রতিক্রিয়াশীল ডিজাইন এবং অ্যানিমেটেড ট্রানজিশন ব্যবহার করে অভিজ্ঞতা এই উপাদান কোড /frontend/app/components/shared/MovieCard.tsx এ মূল্যায়ন করা যেতে পারে।

আপলোড করা উপাদান

এই উপাদানটি একটি আপলোড করা ফাইলের একটি পূর্বরূপ প্রদর্শন করে, একটি চিত্র বা একটি ভিডিও, একটি অগ্রগতি বার এবং একটি অপসারণ বোতাম সহ, ব্যবহারকারীদের আপলোড করা ফাইলটি পর্যালোচনা এবং মুছে ফেলার অনুমতি দেয়, পাশাপাশি অ্যানিমেশন এবং হোভার প্রভাবগুলির সাথে একটি দৃশ্যমান আকর্ষণীয় এবং ইন্টারেক্টিভ ইন্টারফেস প্রদান করে। . এই উপাদান কোড /frontend/app/components/shared/Uploaded.tsx এ মূল্যায়ন করা যেতে পারে।

আপলোডার উপাদান

এই উপাদানটি ফাইল আপলোড করার জন্য একটি ইউজার ইন্টারফেস প্রদান করে, বিশেষ করে ভিডিও বা পোস্টার, ড্র্যাগ-এন্ড-ড্রপ, ফাইলের ধরন যাচাইকরণ, আকারের সীমা, আপলোড অগ্রগতি ট্র্যাকিং এবং সাফল্য/ত্রুটি বিজ্ঞপ্তির মতো বৈশিষ্ট্য সহ, প্রতিক্রিয়া রাজ্য পরিচালনা, ইভেন্টের সংমিশ্রণ ব্যবহার করে আপলোড প্রক্রিয়া পরিচালনা করতে হ্যান্ডলিং, এবং API ইন্টিগ্রেশন।

নিম্নলিখিত কোডগুলির সাথে /frontend/app/components/shared/uploader.tsx এ পাওয়া ফাইলটি আপডেট করুন৷

এই উপাদানটিতে করা পরিবর্তনগুলি হল:

1. আপলোড ফাইল কার্যকারিতা : আসল কোডে প্রকৃত আপলোড ফাইল কার্যকারিতা প্রয়োগ করা হয়নি। এটি শুধুমাত্র ফাইল আপলোড না করে একটি সফল টোস্ট বিজ্ঞপ্তি দেখিয়েছে। এই আপডেট করা কোডটিতে api.service থেকে uploadFile ফাংশন রয়েছে যা ফাইল আপলোড পরিচালনা করে।
2. অগ্রগতি ট্র্যাকিং : আপডেট করা কোড আপলোডের অগ্রগতি ট্র্যাক করে এবং এটি UI এ প্রদর্শন করে।
3. ত্রুটি হ্যান্ডলিং : আপডেট করা কোড ফাইল আপলোড প্রক্রিয়ার জন্য ত্রুটি হ্যান্ডলিং অন্তর্ভুক্ত.
4. ফাইল টাইপ ভ্যালিডেশন : আপডেট করা কোডটি রেগুলার এক্সপ্রেশন ব্যবহার করে আরও শক্তিশালী ফাইল টাইপ ভ্যালিডেশন ব্যবহার করে।
5. কোড অর্গানাইজেশন : আপডেট করা কোডটি আরও ভালভাবে সংগঠিত, বিভিন্ন কাজ পরিচালনার জন্য আলাদা ফাংশন সহ, এটি পড়া এবং বজায় রাখা সহজ করে তোলে।
6. UI আপডেট : আপডেট করা কোডে কিছু UI আপডেট রয়েছে, যেমন আপলোডের অগ্রগতি দেখানো এবং আপলোডের সময় একটি বাতিল বোতাম।

প্রকৃত ফাইল আপলোড কার্যকারিতা, অগ্রগতি ট্র্যাকিং, ত্রুটি পরিচালনা এবং আরও ভাল কোড সংগঠন সহ এই আপডেট করা কোডটি আরও সম্পূর্ণ এবং শক্তিশালী।

নীচের ভিডিওটি ব্যাখ্যা করে যে প্রতিটি উপাদান আরও বিশদে কী করে, দয়া করে আপনার উন্নতির জন্য এটি পরীক্ষা করে দেখুন৷

এবং এটাই বন্ধুরা, আমরা এই প্রকল্পটি সম্পন্ন করেছি, এবং আমাদের যে শেষ পদক্ষেপটি নিতে হবে তা হল ব্রাউজারে এই প্রকল্পটি চালু করা। ব্রাউজারে প্রজেক্টটি লাইভ দেখতে $ yarn build && yarn start চালান।

আপনি যদি কোন সমস্যার সম্মুখীন হন, তাহলে সমস্যা সমাধানের জন্য নিম্নলিখিত সংস্থানগুলি পড়ুন৷ পরের বার পর্যন্ত, সব ভাল!

• 🏠 Sia ওয়েবসাইট
• 🔥 সিয়া ভাড়া করা
• 👨‍💻 Sia Renterd API
• 🚀 সিয়া ডিসকর্ড চ্যানেল
• 💡 YouTube ভিডিও প্লেলিস্ট

লেখক সম্পর্কে

আমি একজন ওয়েব3 ডেভেলপার এবং Dapp Mentors- এর প্রতিষ্ঠাতা, এমন একটি কোম্পানি যা ব্যবসা এবং ব্যক্তিদের বিকেন্দ্রীভূত অ্যাপ্লিকেশন তৈরি এবং চালু করতে সাহায্য করে। সফ্টওয়্যার শিল্পে আমার 8 বছরের বেশি অভিজ্ঞতা রয়েছে এবং আমি নতুন এবং উদ্ভাবনী অ্যাপ্লিকেশন তৈরি করতে ব্লকচেইন প্রযুক্তি ব্যবহার করার বিষয়ে উত্সাহী। আমি ড্যাপ মেন্টরস নামে একটি ইউটিউব চ্যানেল চালাই যেখানে আমি ওয়েব3 ডেভেলপমেন্টের টিউটোরিয়াল এবং টিপস শেয়ার করি এবং আমি নিয়মিত ব্লকচেইন স্পেসের সাম্প্রতিক প্রবণতা সম্পর্কে অনলাইনে নিবন্ধ পোস্ট করি।