ভূমিকা ওয়েব বিকশিত হচ্ছে, এবং Web3 প্রযুক্তি ভিডিও স্ট্রিমিং সহ ঐতিহ্যবাহী শিল্পে বিপ্লব ঘটাচ্ছে। মতো প্ল্যাটফর্মগুলি চার্জের নেতৃত্ব দিচ্ছে, ইউটিউব এবং রাম্বলের বিকেন্দ্রীকৃত বিকল্পগুলি অফার করছে। একইভাবে, গুগল ড্রাইভ এবং ড্রপবক্সের মতো উত্তরাধিকার সরবরাহকারীদের বিপরীতে, ডেটা স্টোরেজকে রূপান্তরিত করছে, একটি গোপনীয়তা-কেন্দ্রিক এবং ব্যবহারকারী-কেন্দ্রিক পদ্ধতি প্রদান করছে। ওডিসির সিয়া NextJs, TypeScript, Tailwind CSS, এবং Sia Renterd ব্যবহার করে এই টিউটোরিয়াল সিরিজটি আপনাকে একটি বিকেন্দ্রীভূত অ্যাপ্লিকেশন তৈরি করতে গাইড করবে যা ব্যবহারকারীর ডেটার মালিকানা এবং গোপনীয়তা নিশ্চিত করতে Sia-এর ব্লকচেইন প্রযুক্তির ব্যবহার করে। একটি অত্যাধুনিক Web3 মুভি স্ট্রিমিং dApp তৈরির যাত্রায় আমাদের সাথে যোগ দিন। এই টিউটোরিয়ালের শেষে, আপনি এতে দক্ষতা অর্জন করবেন: বন্ধুদের সাথে শেয়ার করতে বা স্কুল প্রকল্প হিসেবে ব্যবহার করার জন্য একটি সম্পূর্ণ কার্যকরী মুভি স্ট্রিমিং প্ল্যাটফর্ম তৈরি করুন আপনার নিজস্ব SaaS (পরিষেবা হিসাবে সফ্টওয়্যার) অ্যাপ্লিকেশন চালু করুন ভিডিও স্ট্রিমিং শিল্পে Web3 প্রযুক্তির সম্ভাব্যতা আনলক করুন প্রকল্পটি কার্যকর দেখতে এবং এই ধরনের আরও উদ্ভাবনী বিষয়বস্তুর জন্য ! নীচের ডেমো ভিডিওটি দেখুন আমাদের চ্যানেলটি সাবস্ক্রাইব করুন https://www.youtube.com/watch?v=Hgfdesry8Ss&embedable=true পূর্বশর্ত অনুসরণ করার জন্য, নিশ্চিত করুন যে আপনি নিম্নলিখিত সরঞ্জামগুলি ইনস্টল করেছেন এবং স্ট্যাকের সাথে পরিচিতি আপনার বোঝার উন্নতি করবে: নোডজেস 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 ইনস্টল করতে হবে; অনুগ্রহ করে নীচের ছোট ভিডিওটি দেখুন, যা এটির সমস্ত সংক্ষিপ্তসার করে। https://www.youtube.com/watch?v=78XCHGWZwhA&embedable=true উপরের ভিডিওতে দেখানো রেন্টার্ড অ্যাপ্লিকেশনের সাথে একটি বীজ বাক্যাংশ তৈরি করুন এবং উপরের ভিডিওতে নির্দেশিত হিসাবে আপনার পরিবেশ পরিবর্তনশীলের মধ্যে এটি অন্তর্ভুক্ত করুন। আপনি সহজেই মনে রাখতে পারেন এমন কিছু দিয়ে পাসওয়ার্ড প্রতিস্থাপন করুন। এর পরে, আপনি যদি ইতিমধ্যে না করে থাকেন তবে আমাদের করে ডকার ইনস্টল করতে হবে। বিকল্পভাবে, সম্ভব হলে ডকার ইনস্ট্যান্স চালানোর জন্য বা ভিপিএসের মতো একটি বিনামূল্যের অনলাইন প্ল্যাটফর্ম ব্যবহার করুন। অন্যথায়, এটি আপনার স্থানীয় কম্পিউটারে ইনস্টল করুন। অফিসিয়াল ওয়েবসাইট থেকে এটি ডাউনলোড গিটপড অবশেষে, আমরা এই প্রকল্পের মূলে নিম্নলিখিত ডকার কমান্ডটি চালিয়ে একটি ডকার কন্টেইনার স্পিন করতে পারি। নিশ্চিত করুন যে টার্মিনালটি এই ফাইলটির মতো একই ডিরেক্টরি অবস্থানে রয়েছে। docker-compose.yml $ docker compose -f "docker-compose.yml" up -d --build ধারকটি নিচের দিকে টেনে আনতে কমান্ডটি নোট করুন: আপনি যখন আপনার ডকার উদাহরণটি বন্ধ করতে চান তখন এটি চালান (কিন্তু এখন নয়)। $ docker compose -f "docker-compose.yml" down আপনি উপরের নির্দেশাবলী সঠিকভাবে সম্পাদন করলে, আপনি যখন আপনার ব্রাউজারে এ যান তখন আপনাকে নীচের ইন্টারফেসটি দেখতে হবে। http://localhost:9880 লগ ইন করতে আপনার পাসওয়ার্ড (আপনার এনভায়রনমেন্ট ভেরিয়েবল থেকে) লিখুন। তারপর, ফাইল আপলোড, ডাউনলোড এবং স্ট্রিমিংয়ের জন্য আপনার Sia Renterd ইন্সট্যান্স সেট আপ করতে নীচের ভিডিওতে কনফিগারেশন পদ্ধতি অনুসরণ করুন। https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=401s&embedable=true উপরের ভিডিওটি মিনিটের চিহ্নে শুরু হয়, অনুগ্রহ করে চিহ্নে থামুন, এই অংশটি আপনাকে Renterd কনফিগারেশন প্রক্রিয়ার মাধ্যমে চাক্ষুষভাবে গাইড করবে। 6:41 20:01 মনে রাখবেন যে ব্লকচেইন সিঙ্ক্রোনাইজেশন প্রক্রিয়া, হোস্ট ম্যাচিং সহ, প্রস্তুত হতে পর্যন্ত সময় নেয়, তাই আপনাকে পুরো প্রক্রিয়াটির সাথে ধৈর্য ধরতে হবে। 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 আমাদের বর্তমানে ব্যাকএন্ডের সোর্স ডিরেক্টরিতে এই কোডগুলি রয়েছে। আমাকে সংক্ষেপে তাদের ব্যাখ্যা করা যাক. এই ফোল্ডারটি যা সম্পূর্ণরূপে এ সম্বোধন করা যেতে পারে দুটি অপরিহার্য ফাইল রয়েছে: একটি HTTP ব্যতিক্রম হ্যান্ডলার ফাংশন এবং ফাইল আপলোড তথ্য পরিচালনার জন্য একটি ইন্টারফেস। ইউটিলিটি ফাইল backend/src/utils এই কোডটি একটি কাস্টম ক্লাস সংজ্ঞায়িত করে যা অন্তর্নির্মিত জাভাস্ক্রিপ্ট শ্রেণীকে প্রসারিত করে, নির্দিষ্ট HTTP স্ট্যাটাস কোড এবং বার্তাগুলির সাথে ত্রুটির উদাহরণ তৈরি করার অনুমতি দেয়। HttpException Error https://gist.github.com/Daltonic/bb37e1d4c5f84bc9c10fcbb8c3e19621 এই কোডটি একটি ইন্টারফেস সংজ্ঞায়িত করে যা একটি আপলোড করা ফাইলের প্রতিনিধিত্ব করে, এর বৈশিষ্ট্যগুলি যেমন নাম, ডেটা, আকার, এনকোডিং এবং আরও অনেক কিছু নির্দিষ্ট করে, এই ব্যাকএন্ড অ্যাপ্লিকেশনে ফাইল আপলোডগুলি পরিচালনা করার জন্য একটি কাঠামোগত উপায় প্রদান করে। FileUpload https://gist.github.com/Daltonic/64fb31bf3b19668a17d14f59e087a77e এবং তারপর রুট ফোল্ডারে, আমাদের কাছে এই ফাইলটি রয়েছে যা CORS এবং ফাইল আপলোড সমর্থন সহ একটি Express.js সার্ভার সেট আপ করে, একটি একক GET রুট সংজ্ঞায়িত করে যা একটি "স্বাগত" বার্তা প্রদান করে, এবং ধরার মাধ্যমে ত্রুটিগুলি পরিচালনা করে এবং সেগুলিকে কাস্টম HttpExceptions হিসাবে পুনরায় নিক্ষেপ করে, তারপর পরিবেশ ভেরিয়েবলে নির্দিষ্ট করা 9000 পোর্টে সার্ভার শুরু করে। backend/src index.ts https://gist.github.com/Daltonic/8d76c3a212681d7bfe89b0792b0e707f এখন যেহেতু আমরা মূল ফাইলগুলি কভার করেছি, আসুন একটি ফোল্ডারে দুটি নতুন ফাইল তৈরি করি, প্রতিটি আমাদের অ্যাপ্লিকেশনে একটি স্বতন্ত্র উদ্দেশ্য পরিবেশন করে। services সার্ভিস ফাইল ফোল্ডারে, এই অবস্থানে নামে একটি নতুন ফোল্ডার তৈরি করুন, এখানে আমরা দুটি পরিষেবা তৈরি করব: backend/src services : ফাইল আপলোড, ডাউনলোড, স্ট্রিমিং এবং ক্যাশিং পরিচালনা করে, রেন্টারড পরিষেবার সাথে যোগাযোগ করে। Sia পরিষেবা : ক্যাশ করা ফাইলগুলি পরিচালনা করে, প্রতিদিন মধ্যরাতে 7 দিন পরে সেগুলি স্বয়ংক্রিয়ভাবে সরিয়ে দেয়। ব্যাকগ্রাউন্ড সার্ভিস সিয়া সার্ভিস ফোল্ডারে নামে একটি ফাইল তৈরি করুন এবং এই পরিষেবাটি তৈরি করতে নীচের পদক্ষেপগুলি অনুসরণ করুন। backend/src/services sia.service.ts https://gist.github.com/Daltonic/a82a0c1cf8d3e7b31702b66eeead3718?embedable=true এই কোডটি একটি ক্লাস সংজ্ঞায়িত করে যা Sia API সেটিংস এবং একটি মূল URL এর জন্য পরিবেশ ভেরিয়েবলের সাথে শুরু করে, যা Sia পরিষেবার সাথে ইন্টারঅ্যাকশন পরিচালনার জন্য একটি ভিত্তি প্রদান করে। এখন, এই পরিষেবার জন্য বাকি কোডগুলি সরবরাহ করা যাক। SiaService Sia নেটওয়ার্কে ফাইল আপলোড করার জন্য, আমাদের ক্লাসে এই তিনটি পদ্ধতি যোগ করতে হবে, দুটি হবে ব্যক্তিগত এবং একটি হবে সর্বজনীন। Sia Renterd-এ ফাইল আপলোড করা https://gist.github.com/Daltonic/ddf74dffc5ac1005585f7ae3ad55c286?embedable=true এই কোডটি একটি প্রাইভেট পদ্ধতি সংজ্ঞায়িত করে যা একটি নির্দিষ্ট দৈর্ঘ্যের একটি এলোমেলো স্ট্রিং তৈরি করে, যা বড় হাতের এবং ছোট হাতের অক্ষর এবং সংখ্যার সমন্বয়ে গঠিত, একটি লুপ ব্যবহার করে একটি পূর্বনির্ধারিত স্ট্রিং থেকে এলোমেলোভাবে অক্ষর নির্বাচন করতে। Renterd-এ ফাইল পাঠানোর আগে আমরা প্রতিটি ফাইলের অনন্য নাম পরিবর্তন করতে এটি ব্যবহার করব। generateRandomString https://gist.github.com/Daltonic/e6a82ac4af9eca9c881f4e0bdd1d682b?embedable=true উপরের কোডটি একটি ব্যক্তিগত পদ্ধতি সংজ্ঞায়িত করে যা Axios ব্যবহার করে Sia Renterd-এ একটি ফাইল আপলোড করে, আপলোডের অগ্রগতি এবং ত্রুটিগুলি পরিচালনা করে এবং Axios প্রতিক্রিয়া ফেরত দেয় বা আপলোড ব্যর্থ হলে একটি ত্রুটি ছুঁড়ে দেয়। uploadToSiaService রেন্টারড এন্ডপয়েন্টগুলি API ডকুমেন্টেশনে লেখা আছে যা আপনি নীচের ভিডিওটি দেখতে বা দেখতে পারেন যেখানে আমি ব্যাখ্যা করেছি কিভাবে Sia Renterd API ডকুমেন্টেশন। https://www.youtube.com/watch?v=zOmUMz0DBQM&embedable=true এখন পাবলিক পদ্ধতি অন্তর্ভুক্ত করা যাক যা আমরা পরে আমাদের অ্যাপ্লিকেশনে একটি শেষ পয়েন্ট হিসাবে প্রকাশ করব। https://gist.github.com/Daltonic/ce565350160a39c4d9f0abc0b7e7dc26?embedable=true এই কোডটি একটি সর্বজনীন পদ্ধতি সংজ্ঞায়িত করে যা একটি অনন্য শনাক্তকারী তৈরি করে একটি ফাইল আপলোড করে, ফাইলটিকে একটি স্থানীয় ক্যাশে সংরক্ষণ করে এবং তারপরে এটি Sia Renterd-এ আপলোড করে, ফাইলটির URL এবং একটি সফল বার্তা ফেরত দেয় বা আপলোড ব্যর্থ হলে একটি ত্রুটি ছুঁড়ে দেয়। . uploadFile Sia নেটওয়ার্কে ফাইল ডাউনলোড করতে, আমাদের ক্লাসে এই দুটি পদ্ধতি যুক্ত করতে হবে, একটি হবে ব্যক্তিগত এবং অন্যটি হবে সর্বজনীন। Sia রেন্টার্ডে ফাইল ডাউনলোড করা https://gist.github.com/Daltonic/b401e92d510ffddc8a0b7301d526f702?embedable=true এই কোডটি একটি ব্যক্তিগত পদ্ধতির সংজ্ঞায়িত করে যেটি Sia পরিষেবা থেকে একটি ফাইল করে, স্থানীয়ভাবে ক্যাশে করে এবং ফাইলটির একটি পঠনযোগ্য স্ট্রিম প্রদান করে, ত্রুটিগুলি পরিচালনা করে এবং ফাইলটি না পাওয়া গেলে একটি 404 ইমেজ ফেরত দেয়। downloadFromSiaService ব্যাকএন্ড ডিরেক্টরিতে সেই প্রতিক্রিয়া_ফাইলগুলি পাওয়া যাক, অন্যথায় আমরা ফাইলটিকে কল করার সময় একটি ত্রুটি অনুভব করব। ডিরেক্টরিতে নামে আরেকটি ফোল্ডার তৈরি করুন এবং এতে নিম্নলিখিত চিত্রগুলি অনুলিপি করুন। 404.png backend response_files পারফেক্ট, এখন এই ফাইল ডাউনলোড সার্ভিসটি সম্পূর্ণ করা যাক। এছাড়াও ক্লাসে নীচের পদ্ধতি যোগ করুন। SiaService https://gist.github.com/Daltonic/1f1a99c82d5b15693eaa2d8d2482f6c2?embedable=true এই কোডটি একটি পাবলিক মেথড সংজ্ঞায়িত করে যা Sia Renterd থেকে একটি ফাইল পুনরুদ্ধার করার জন্য ব্যক্তিগত পদ্ধতি কল করে এবং পুনরুদ্ধার করা ফাইলের পঠনযোগ্য স্ট্রীম ফেরত দেয়। downloadFile downloadFromSiaService সার্ভিস এন্ডপয়েন্ট এখন সময় এসেছে আমরা এই বিভিন্ন পদ্ধতিগুলিকে তাদের নিজ নিজ এন্ডপয়েন্টে জোড়া, বর্তমানে, আমাদের কাছে মাত্র একটি আছে, কিন্তু ফাইল আপলোড এবং ডাউনলোড করার জন্য আমাদের অতিরিক্ত দুটির প্রয়োজন হবে। ফাইল স্ট্রিমিং ডাউনলোড এন্ডপয়েন্টও ব্যবহার করবে। ফাইলে যান এবং এই কোডগুলির সাথে এর বিষয়বস্তু আপডেট করুন৷ backend/src/index.ts https://gist.github.com/Daltonic/c8dec40acbc47b2582c651e04fae432f?embedable=true এই কোডটি CORS এবং ফাইল আপলোড সমর্থন সহ একটি Express.js সার্ভার সেট আপ করে, তিনটি শেষ পয়েন্ট সংজ্ঞায়িত করে: একটি স্বাগত বার্তা, Sia নেটওয়ার্কে ফাইল আপলোড এবং Sia নেটওয়ার্ক থেকে ফাইল ডাউনলোড, ফাইল অপারেশন পরিচালনা করতে SiaService ক্লাস ব্যবহার করে এবং HttpException এর জন্য ত্রুটি পরিচালনা নিচের ভিডিওটির এই বিভাগটি দেখুন যদি আপনার কিছু ভিজ্যুয়াল সাহায্যের প্রয়োজন হয়, নিশ্চিত করুন যে আপনি টাইমস্ট্যাম্পে থামছেন। 01:50:44 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=3795&si=A6fF8n8Pd92i6weM&embedable=true ফাইলগুলি কতক্ষণ ক্যাশে থাকে তা নিয়ন্ত্রণ করে আমাদের সার্ভারটি অব্যবহৃত ফাইল দিয়ে পূরণ না করে তা নিশ্চিত করার জন্য আমাদের একটি ক্যাশে পরিচালনা পরিষেবা তৈরি করতে হবে। এটা জানা গুরুত্বপূর্ণ যে আমাদের এই পরিষেবাটির প্রয়োজনের একমাত্র কারণ হল কমানো৷ ডেটা লেটেন্সি ব্যাকগ্রাউন্ড সার্ভিস ফোল্ডারে যান এবং নামে একটি ফাইল তৈরি করুন এবং এতে কোডের এই ক্রম যুক্ত করুন। backend/src/services background.service.ts https://gist.github.com/Daltonic/bc62ccefd72cec85772dedd311afbffd?embedable=true এই কোডটি একটি ক্লাস সংজ্ঞায়িত করে যা একটি ক্যাশে ডিরেক্টরি সেট আপ করে এবং লাইব্রেরি ব্যবহার করে দৈনিক কাজের সময়সূচী করে, ব্যাকগ্রাউন্ড কাজগুলি শুরু করে এবং একটি নিশ্চিতকরণ বার্তা লগ করে। আসুন একটি পদ্ধতি তৈরি করি যা ক্যাশে থাকা 7 দিনের বেশি পুরানো ফাইল মুছে ফেলার জন্য দায়ী হবে। BackgroundService node-cron ক্লাসে এই পদ্ধতিটি যোগ করুন। পুরানো ফাইল মুছে ফেলা হচ্ছে BackgroundService https://gist.github.com/Daltonic/43da392512b88b6abf068be62d14eb7e?embedable=true এই কোডটি নামক একটি পদ্ধতিকে সংজ্ঞায়িত করে যা 7 দিনের বেশি পুরানো ক্যাশে ডিরেক্টরি থেকে ফাইলগুলিকে সরিয়ে দেয়, ডিরেক্টরিটি পড়ার মাধ্যমে, প্রতিটি ফাইলের তৈরির সময় পরীক্ষা করে, লক্ষ্যমাত্রা অতিক্রম করে এমন ফাইলগুলি সরিয়ে দেয়, কাজের শুরু এবং শেষ লগিং করে এবং কোনো ত্রুটি বা সফল মুছে ফেলা। deleteOldFiles এখন, একটি ফাংশন লিখি যা নোড-ক্রোন প্যাকেজ ব্যবহার করে ফাইল মুছে ফেলার সময় নির্ধারণ করতে হবে। https://gist.github.com/Daltonic/18b60b0bc1f7414a306f01f9087db435?embedable=true এই কোডটি প্রতিদিন মধ্যরাতে (00:00) স্বয়ংক্রিয় ফাইল পরিষ্কার করার জন্য পদ্ধতি চালানোর জন্য একটি দৈনিক ক্রন কাজ সেট আপ করে। deleteOldFiles ব্যাকগ্রাউন্ড সার্ভিস ক্লাসের ইনস্ট্যান্টেশনে দৈনিক কাজের সময়সূচী করার জন্য আমাদের কনস্ট্রাক্টর ফাংশন আপডেট করতে হবে। https://gist.github.com/Daltonic/5f608cd3793ff6deea56c262bdfbc395?embedable=true নিখুঁত, শেষ পর্যন্ত, শুরু করার সময় সার্ভার প্রক্রিয়ার অংশ হিসাবে এই ব্যাকগ্রাউন্ড অপারেশনটি যোগ করা যাক। ফাইলে যান এবং ব্যাকগ্রাউন্ড পরিষেবা ফাইল আমদানি করতে অ্যাপ লিসেনার পদ্ধতি আপডেট করুন। backend/src/index.ts https://gist.github.com/Daltonic/7966a7b27fa7eade2c6d1a7e60b2e530?embedable=true আপনাকে ব্যবহার করে ব্যাকএন্ড সার্ভিস কমান্ড পুনরায় চালু করতে হবে এবং নীচের চিত্রের মত একটি টার্মিনাল প্রিন্টআউট দেখতে হবে। $ yarn build && yarn start আপনি যদি দেখতে চান যে আমি কীভাবে পুরো ব্যাকগ্রাউন্ড পরিষেবা কোড করেছি, নীচের ভিডিওটি আপনার জন্য; শুধু নিশ্চিত করুন যে আপনি টাইমস্ট্যাম্পে থামছেন। 02:16:07 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=8167&si=4DZ27j0lqwufUgRf&embedable=true অভিনন্দন, আপনি এখন এই টিউটোরিয়ালের চূড়ান্ত অংশের জন্য প্রস্তুত যা । পরবর্তী ধাপ পার্ট 3 আসুন এই টিউটোরিয়াল সিরিজের শেষ অংশে ডুব দেওয়া যাক, যেখানে আমরা ব্যাকএন্ডকে ফ্রন্টএন্ডের সাথে একীভূত করব, ফাইল আপলোড অ্যাপ্লিকেশনটি সম্পূর্ণ করার জন্য অংশগুলিকে সংযুক্ত করব। আমরা নিশ্চিত করে শুরু করব যে ফ্রন্টএন্ডে প্রমাণীকরণগুলি চলছে এবং চলছে৷ Web3 মডেল প্রমাণীকরণ – পার্ট 3 Frontend ডিরেক্টরিতে 'config' নামে একটি নতুন ফোল্ডার তৈরি করুন এবং একটি সূচী ফাইল যোগ করুন, যার ফলে পাথ । এখন, এর সাথে নিম্নলিখিত কোড যোগ করা যাক। /frontend/config/index.tsx https://gist.github.com/Daltonic/38bbe9fa325fb793dd59136ebdea8b43?embedable=true এই কোডটি আমাদের Web3 অ্যাপ্লিকেশনের জন্য একটি Wagmi কনফিগারেশন সেট আপ করে, মেটাডেটা, সমর্থিত চেইন, এবং ওয়ালেট এবং সামাজিক লগইন বিকল্পগুলি সহ প্রমাণীকরণ সেটিংস সংজ্ঞায়িত করে এবং এক্সপোর্টে সংরক্ষণ করে। প্রমাণীকরণ অবস্থার ট্র্যাক রাখতে আমাদের একটি প্রসঙ্গ API তৈরি করতে হবে। config নেক্সট, ফ্রন্টেন্ড ডিরেক্টরিতে এখনও 'প্রসঙ্গ' নামে একটি নতুন ফোল্ডার তৈরি করুন এবং একটি ইনডেক্স ফাইল যোগ করুন, যার ফলে পাথ । এটিতে নিম্নলিখিত কোড যোগ করুন। কনটেক্সট এপিআই /frontend/context/index.tsx https://gist.github.com/Daltonic/db7330a9159ff83727cda0a384fd907e?embedable=true এই কোডটি Wagmi এবং React Query ব্যবহার করে একটি Web3Modal প্রদানকারী সেট আপ করে, প্রকল্প আইডি এবং থিম ভেরিয়েবলের সাথে Web3 মোডাল কনফিগার করে এবং একটি WagmiProvider এবং QueryClientProvider-এ অ্যাপ্লিকেশনটি মোড়ানো। : উপরের কনফিগারেশনগুলি অন্তর্ভুক্ত করতে আমাদের অ্যাপ্লিকেশন লেআউট আপডেট করা যাক। এ যান এবং নীচের কোডগুলি দিয়ে এর কোডগুলি প্রতিস্থাপন করুন। লেআউট আপডেট করা /frontend/app/layout.tsx https://gist.github.com/Daltonic/2b54f191d56fa02f0ae3974bd8ffd11b?embedable=true উপরের কোডটি একটি Next.js অ্যাপ্লিকেশনের জন্য রুট লেআউট সেট আপ করে, যার মধ্যে মেটাডেটা, ফন্ট, শৈলী এবং Web3 মডেল, টোস্ট নোটিফিকেশন এবং হেডার এবং ফুটারের মতো লেআউট উপাদানের জন্য প্রদানকারী রয়েছে। এখন, আমাদের এবং উপাদানগুলিতে লগইন বোতামগুলি সক্রিয় করতে হবে এবং নীচের তথ্য ব্যবহার করে তাদের কোড আপডেট করতে হবে। লগইন বোতাম /frontend/app/components/layout/Header.tsx /frontend/app/components/shared/Menu.tsx https://gist.github.com/Daltonic/f9f60e85c18da94a5bbc97d1acb3d423?embedable=true এই কোডটি একটি নেভিগেশন বারের জন্য একটি প্রতিক্রিয়া উপাদান সংজ্ঞায়িত করে যার মধ্যে একটি লোগো, নেভিগেশন লিঙ্ক, একটি কাস্টম মেনু এবং একটি লগইন বোতাম রয়েছে যা বিভিন্ন স্ক্রীন আকারের জন্য একটি প্রতিক্রিয়াশীল ডিজাইন সহ একটি Web3 মডেল চালু করে৷ নিম্নলিখিত চিত্রগুলি প্রমাণ হিসাবে পপ আপ করা উচিত যে আমরা যা করেছি তা কাজ করে যখন আপনি লগইন বোতামে ক্লিক করেন এবং আপনার পছন্দের প্রদানকারী, X, Facebook, Google, Discord বা Ethereum-এর সাথে এগিয়ে যান৷ চমত্কার, আসুন আরও গভীরে যাই এবং আমাদের ডাটাবেস এবং NextJs API-ভিত্তিক সিস্টেম সেট আপ করি। প্রক্রিয়া সম্পর্কে কোনো বিভ্রান্তির জন্য, নীচের ভিডিও বিভাগ দেখুন; শুধু নিশ্চিত করুন যে আপনি চিহ্নে থামছেন। 02:57:59 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=9305&si=OadhxKlut7o3iLl5&embedable=true ডাটাবেস স্ক্রিপ্ট প্রথমে, আসুন আমাদের পৃষ্ঠাগুলি এবং শেষ পয়েন্টগুলিকে সঠিকভাবে সম্বোধন করতে NextJs কনফিগারেশন স্ক্রিপ্টটি আপডেট করি এবং আমাদের দূরবর্তী চিত্রগুলিকে সতর্কতা এবং যাচাই-বাছাই থেকে মুক্ত করি। https://gist.github.com/Daltonic/a4ecb4d168f8bb01cb8abb600653c4cf?embedable=true এই কোডটি একটি Next.js কনফিগারেশন অবজেক্টকে সংজ্ঞায়িত করে যা API রুট পুনর্লিখন এবং ইমেজ অপ্টিমাইজেশন সেট আপ করে, যে কোনও HTTPS হোস্টনাম থেকে দূরবর্তী ছবি এবং স্থানীয় হোস্ট ডোমেন থেকে স্থানীয় ছবিগুলিকে অনুমতি দেয়। আমরা এই অ্যাপ্লিকেশনের জন্য SQLite ব্যবহার করব, কিন্তু আপনি MYSQL বা NOSQL প্রদানকারীর মতো আরও শক্তিশালী সমাধান ব্যবহার করতে পারবেন। সরলতার জন্য, আসুন একটি SQLite ফ্ল্যাট ফাইলের সাথে কাজ করি। ডেটাবেস কনফিগ স্ক্রিপ্ট ফাইল পাথ তৈরি করুন এবং এতে নিচের কোড যোগ করুন। /frontend/app/api/database.ts https://gist.github.com/Daltonic/b699c52587b28c2d9435827837019633?embedable=true এই কোডটি একটি SQLite ডাটাবেস সংযোগ সেট আপ করে, দুটি API ফাংশন সংজ্ঞায়িত করে, এবং , ডাটাবেসে GET এবং POST অনুরোধগুলি সম্পাদন করতে, ত্রুটি পরিচালনা এবং প্রতিশ্রুতি-ভিত্তিক অ্যাসিঙ্ক্রোনাস এক্সিকিউশন সহ। আমরা যখনই ডাটাবেস থেকে ডেটা পাঠাতে বা পুনরুদ্ধার করতে চাই তখনই আমরা এই কোডগুলি ব্যবহার করব। apiGet apiPost আমাদের সমস্ত বিষয়বস্তু ধরে রাখার জন্য আমাদের একটি ডাটাবেস ফ্ল্যাট ফাইল এবং একটি টেবিল উভয়ই তৈরি করতে হবে। ফাইল পাথ তৈরি করুন এবং এতে নিচের কোড যোগ করুন। ডাটাবেস মাইগ্রেশন স্ক্রিপ্ট /frontend/app/api/migrations.ts https://gist.github.com/Daltonic/4c213153fe53334fcf8444666587d6a5?embedable=true এই কোডটি একটি ডাটাবেস মাইগ্রেশন ফাংশনকে সংজ্ঞায়িত করে যা নির্দিষ্ট কলাম সহ একটি 'মুভি' টেবিল তৈরি করে যদি এটি বিদ্যমান না থাকে, SQLite ব্যবহার করে, এবং অপারেশনের ফলাফল লগ করে। এখন ডিরেক্টরিতে নির্দেশিত টার্মিনালে নীচের কমান্ডটি চালান। /frontend $ cd frontend $ npx esrun app/api/migrations.ts এটি উল্লেখ্য যে এই প্রক্রিয়াটি ফ্রন্টএন্ড ডিরেক্টরির মূলে নামে একটি ডাটাবেস ফ্ল্যাট ফাইল তৈরি করবে। আমরা এই কমান্ডটি package.json স্ক্রিপ্টে যোগ করেছি, তাই ফ্রন্টএন্ড ডিরেক্টরিতে চালানো একই কাজ করবে। movies.db $ yarn migrate ভিজ্যুয়াল সহায়তার জন্য, নীচের ভিডিওটি দেখুন, এটিকে চিহ্নে থামান। 03:10:54 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=10679&si=-uhv8Zw0T3Gx0XgQ&embedable=true আবেদনের শেষ পয়েন্ট এখন, চলুন মুভি তৈরি, পড়া, আপডেট করা এবং মুছে ফেলার জন্য কিছু শেষ বিন্দু সংজ্ঞায়িত করা যাক। আমরা এই শেষ পয়েন্টগুলি করতে NextJs API বিধান ব্যবহার করব। একটি মুভি তৈরি করতে, প্রয়োজনীয় তথ্যের মধ্যে ইউজার আইডি, মুভির নাম, ছবি, ভিডিও ইউআরএল, রিলিজের তারিখ, জেনার, রেটিং, ভাষা, সময়কাল এবং পটভূমির বিবরণ অন্তর্ভুক্ত থাকে। ফাইল পাথ তৈরি করুন এবং এতে নিচের কোড যোগ করুন। মুভি এন্ডপয়েন্ট তৈরি করুন /frontend/app/api/movies/create/route.ts https://gist.github.com/Daltonic/bf8a431ec00aa71491ae71781fb99278?embedable=true এই কোডটি POST অনুরোধগুলি পরিচালনা করার জন্য একটি এন্ডপয়েন্টকে সংজ্ঞায়িত করে, মুভি ডেটা যাচাই এবং প্রক্রিয়া করতে, একটি অনন্য স্লাগ তৈরি করতে এবং ত্রুটিগুলি পরিচালনা করার সময় এবং JSON প্রতিক্রিয়াগুলি ফেরত দেওয়ার সময় একটি apiPost ফাংশন ব্যবহার করে একটি ডাটাবেসে ডেটা সন্নিবেশ করে৷ একটি মুভি আপডেট করার জন্য, প্রয়োজনীয় তথ্যের মধ্যে ইউজার আইডি, স্লাগ এবং একটি মুভি তৈরি করার সময় প্রদত্ত অন্যান্য তথ্য অন্তর্ভুক্ত থাকে। ফাইল পাথ তৈরি করুন এবং এতে নিচের কোড যোগ করুন। মুভি এন্ডপয়েন্ট আপডেট করুন /frontend/app/api/movies/update/route.ts https://gist.github.com/Daltonic/2ed7d44cb8efe091675ebc0fc1bdf27c?embedable=true এই কোডটি একটি মুভি আপডেট করার জন্য POST অনুরোধগুলি পরিচালনা করার জন্য একটি এন্ডপয়েন্টকে সংজ্ঞায়িত করে, প্রয়োজনীয় বৈশিষ্ট্যগুলি যাচাই করা এবং apiPost ফাংশন ব্যবহার করে ডাটাবেসে মুভি ডেটা আপডেট করার জন্য একটি এসকিউএল কোয়েরি চালানো৷ একটি মুভি মুছে ফেলতে, প্রয়োজনীয় তথ্যের মধ্যে একটি মুভির ইউজার আইডি এবং স্লাগ অন্তর্ভুক্ত থাকে। ফাইল পাথ তৈরি করুন এবং এতে নিচের কোড যোগ করুন। মুভি এন্ডপয়েন্ট মুছুন /frontend/app/api/movies/delete/route.ts https://gist.github.com/Daltonic/aa7ab36b982ad1f377b2a4d26930dd8d?embedable=true এই কোডটি একটি মুভি মুছে ফেলার জন্য POST অনুরোধগুলি পরিচালনা করার জন্য একটি এন্ডপয়েন্টকে সংজ্ঞায়িত করে, প্রয়োজনীয় বৈশিষ্ট্যগুলি (ইউজারআইডি এবং স্লাগ) যাচাই করা এবং apiPost ফাংশন ব্যবহার করে ডাটাবেস থেকে মুভিটি মুছে ফেলার জন্য একটি SQL ক্যোয়ারী চালানো। মুভিগুলি পাওয়ার জন্য প্রয়োজনীয় ঐচ্ছিক ডেটা হল পেজ সাইজ এবং ইউজারআইডি, যা ফলাফল ফিল্টার এবং পেজিনেট করার জন্য কোয়েরি প্যারামিটার হিসাবে পাস করা যেতে পারে। ফাইল পাথ তৈরি করুন এবং এতে নিচের কোড যোগ করুন। সমস্ত মুভিস এন্ডপয়েন্ট /frontend/app/api/movies/all/route.ts https://gist.github.com/Daltonic/23bb2aa55446995dad87084bb7968c3e?embedable=true উপরের কোডটি মুভিগুলি পুনরুদ্ধার করার জন্য GET অনুরোধগুলি পরিচালনা করার জন্য একটি এন্ডপয়েন্টকে সংজ্ঞায়িত করে, ব্যবহারকারী আইডি দ্বারা ঐচ্ছিক ফিল্টারিং এবং পেজ সাইজ অনুসারে পৃষ্ঠাগুলিকে অনুমতি দেয় এবং ফলাফলগুলি JSON ফর্ম্যাটে প্রদান করে৷ একটি একক মুভি পুনরুদ্ধার করতে, প্রয়োজনীয় ডেটা হল একটি মুভির স্লাগ। ফাইল পাথ তৈরি করুন এবং এতে নিচের কোড যোগ করুন। একক মুভি এন্ডপয়েন্ট /frontend/app/api/movies/[slug]/route.ts https://gist.github.com/Daltonic/64e069e9bafd026a83796eaa95334ac8?embedable=true এই কোডটি একটি এন্ডপয়েন্ট সংজ্ঞায়িত করে একটি মুভির স্লাগ দ্বারা পুনরুদ্ধার করার জন্য GET অনুরোধগুলি পরিচালনা করার জন্য, স্লাগ প্যারামিটারটি যাচাই করার জন্য, এবং apiGet ফাংশন ব্যবহার করে ডাটাবেস থেকে মুভি ডেটা পুনরুদ্ধার করার জন্য একটি SQL ক্যোয়ারী চালানোর জন্য। এটি এই অ্যাপ্লিকেশনটির জন্য আমাদের প্রয়োজনীয় সমস্ত শেষ পয়েন্টগুলি চিহ্নিত করে৷ এই শেষ পয়েন্টগুলিকে আরও ভালভাবে বুঝতে সাহায্য করার জন্য আপনার যদি ভিজ্যুয়াল সাহায্যের প্রয়োজন হয়, অনুগ্রহ করে নীচের ভিডিওটি দেখুন, শুধু নিশ্চিত করুন যে আপনি টাইমস্ট্যাম্পে থামছেন। 03:48:22 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=10679&si=3Ynq9tNLx5SZXHBE&embedable=true এন্ডপয়েন্ট ইন্টিগ্রেশন আমাদের কাজ হল প্রাক-কোড করা উপাদান এবং পৃষ্ঠাগুলি পর্যালোচনা করা এবং আপডেট করা, প্রত্যেকের উদ্দেশ্য এবং কার্যকারিতা ব্যাখ্যা করা এবং বিদ্যমান কোডে আমরা যে পরিবর্তনগুলি করি তা নথিভুক্ত করা। আমরা পূর্বে ডিরেক্টরিতে তৈরি করা শেষ পয়েন্টগুলির সাথে ইন্টারঅ্যাক্ট করার জন্য একটি পরিষেবা তৈরি করে শুরু করব। api ফাইল পাথ তৈরি করুন এবং এতে নিচের কোড যোগ করুন। /frontend/app/services/api.service.ts https://gist.github.com/Daltonic/fdf65c7ffaf3ea8219c617cdb7c96375?embedable=true এই পরিষেবাটি একটি মুভি ডাটাবেসের সাথে ইন্টারঅ্যাক্ট করার জন্য ফাংশনগুলির একটি সেট প্রদান করে, অ্যাপ্লিকেশনটিকে মুভিগুলি আনার অনুমতি দেয়, স্লাগ দ্বারা একটি একক মুভি আনয়ন করতে, একটি নতুন চলচ্চিত্র তৈরি করতে, একটি বিদ্যমান চলচ্চিত্র আপডেট করতে, একটি চলচ্চিত্র মুছে ফেলতে এবং API অনুরোধ এবং পরিচালনা ব্যবহার করে ফাইলগুলি আপলোড করতে দেয়৷ ত্রুটি আবেদন পাতা আমাদের আবেদনের সাথে যুক্ত বিভিন্ন পৃষ্ঠা পর্যালোচনা এবং আপডেট করা যাক। আপনাকে অনেক কিছু পরিবর্তন করতে হবে না, শুধু এখানে হাইলাইট করা হয়েছে। মুভি পেজ তৈরি করুন এই পৃষ্ঠাটি একটি মুভি প্রকাশনা ফর্ম যা ব্যবহারকারীদের ভিডিও এবং ইমেজ ফাইল আপলোড করতে, মুভির বিশদ বিবরণ ইনপুট করতে এবং ফিল্মটি প্রকাশ করার জন্য ফর্ম জমা দেওয়ার অনুমতি দেয়, বৈধতা এবং ত্রুটি হ্যান্ডলিং সহ, প্রতিক্রিয়া এবং ওয়াগমি লাইব্রেরি ব্যবহার করে৷ এখন, নিচের কোডগুলো দিয়ে এ পাওয়া ফাইলটি আপডেট করুন। /frontend/app/pages/create/page.tsx https://gist.github.com/Daltonic/0ec440d6dfc2b46e07ecec3e81f532c6?embedable=true মূল কোডের তুলনায় এই কোডে করা পরিবর্তনগুলি হল: থেকে ফাংশন ইম্পোর্ট করেছে এবং একটি নতুন মুভি তৈরি করতে ফাংশনে এটি ব্যবহার করেছে। api.service createMovie handleSubmit হুক থেকে ব্যবহারকারীর ঠিকানা পাস করে ফাংশন কলে প্যারামিটার যোগ করা হয়েছে। useAccount createMovie userId দ্বারা প্রত্যাবর্তিত প্রতিশ্রুতি পরিচালনা করতে ব্যবহার করতে ফাংশন আপডেট করা হয়েছে। createMovie toast.promise handleSubmit ফাংশনে ফাংশন কলে ত্রুটি হ্যান্ডলিং যোগ করা হয়েছে। handleSubmit createMovie এই পরিবর্তনগুলি ফর্মটিকে API এ মুভি ডেটা জমা দিতে এবং একটি নতুন মুভি এন্ট্রি তৈরি করতে সক্ষম করে যখন ত্রুটিগুলি পরিচালনা করে এবং একটি সাফল্যের বার্তা প্রদর্শন করে৷ মুভি পৃষ্ঠা সম্পাদনা করুন এই মুভি সম্পাদনা পৃষ্ঠাটি অনুমোদিত ব্যবহারকারীদের মুভির বিশদ আপডেট করতে, পোস্টার এবং ভিডিও আপলোড করতে এবং পরিবর্তনগুলি সংরক্ষণ করার অনুমতি দেয়, বৈধতা এবং ত্রুটি পরিচালনা করে, প্রতিক্রিয়া, ওয়াগমি এবং Next.js ব্যবহার করে, বিশেষভাবে ব্যবহারকারীদের তাদের সিনেমা সম্পাদনা করার জন্য ডিজাইন করা হয়েছে৷ এখন, নীচের কোডগুলি সহ এ পাওয়া ফাইলটি আপডেট করুন। /frontend/app/pages/movies/edit/[slug]/page.tsx https://gist.github.com/Daltonic/63ddb6e3c65e3bcd2665ab0e3ffb6205?embedable=true মূল থেকে আলাদা কোডে করা আপগ্রেডগুলি হল: থেকে এবং ফাংশন আমদানি করা হয়েছে এবং যথাক্রমে হুক এবং ফাংশনে সেগুলি ব্যবহার করেছে৷ @/app/services/api.service fetchMovie updateMovie useEffect handleSubmit মুভি ডেটা পুনরুদ্ধার করতে ফাংশন দিয়ে পদ্ধতি প্রতিস্থাপন করা হয়েছে। fetchMovie posters.find() আপডেট মুভির বিশদ বিবরণ সহ ফাংশন কল করার জন্য ফাংশন আপডেট করা হয়েছে৷ updateMovie handleSubmit ফাংশনে ফাংশন কলে ত্রুটি হ্যান্ডলিং যোগ করা হয়েছে। handleSubmit updateMovie এই পরিবর্তনগুলি আমাদের অ্যাপ্লিকেশনকে মুভি ডেটা পুনরুদ্ধার এবং আপডেট করার জন্য আমাদের API এন্ডপয়েন্টগুলির সাথে ইন্টারঅ্যাক্ট করতে সক্ষম করে, যেখানে মূল কোড আমাদের স্থানীয় অ্যারের উপর নির্ভর করে। posters হোম পেজ ব্যবহারকারীদের জন্য একটি আকর্ষক এবং তথ্যপূর্ণ ল্যান্ডিং পৃষ্ঠা প্রদান করতে এই হোম পৃষ্ঠাটি ব্যানার উপাদান, চলচ্চিত্রগুলির একটি তালিকা (হয় একটি API উত্স বা একটি লোডিং UI থেকে), এবং সাবস্ক্রিপশন বিকল্পগুলি, প্রতিক্রিয়া এবং Next.js ব্যবহার করে। নিম্নলিখিত কোডগুলির সাথে এ পাওয়া ফাইলটি আপডেট করুন। /frontend/app/pages/page.tsx https://gist.github.com/Daltonic/97cb49662ed70be9b183b4f601b529d6?embedable=true আমরা হোম পেজে যে পরিবর্তনগুলি করেছি তা হল: থেকে ফাংশন আমদানি করা হয়েছে এবং আমাদের API থেকে মুভি ডেটা পুনরুদ্ধার করতে হুকে এটি ব্যবহার করেছে। ./services/api.service fetchMovies useEffect স্থানীয় ডেটাকে ফাংশন কল দিয়ে প্রতিস্থাপন করা হয়েছে, যা আমাদের API থেকে ডেটা নিয়ে আসে। posters fetchMovies অবস্থা সেট করার আগে সমাধান করার জন্য দ্বারা প্রত্যাবর্তনের প্রতিশ্রুতির জন্য অপেক্ষা করার জন্য কীওয়ার্ড যোগ করা হয়েছে। movies fetchMovies await এই পরিবর্তনগুলি আমাদের অ্যাপ্লিকেশনটিকে স্থানীয় ডেটার উপর নির্ভর করার পরিবর্তে আমাদের API থেকে মুভি ডেটা পুনরুদ্ধার করতে সাহায্য করে, অ্যাপ্লিকেশনটিকে আরও গতিশীল এবং ডেটা-চালিত করে। ব্যবহারকারীর অ্যাকাউন্ট পৃষ্ঠা এই পৃষ্ঠাটি বর্তমানে সংযুক্ত ব্যবহারকারীর দ্বারা পোস্ট করা চলচ্চিত্রগুলির একটি তালিকা প্রদর্শন করে, যেখানে ডেটা আনার সময় একটি লোডিং কঙ্কাল প্লেসহোল্ডার রয়েছে এবং একটি বার্তা ব্যবহারকারীকে তাদের অ্যাকাউন্ট সংযোগ করতে অনুরোধ করে যদি তারা তা না করে থাকে, Wagmi ব্যবহার করে এবং প্রতিক্রিয়া-লোডিং- কঙ্কাল নিম্নলিখিত কোডগুলির সাথে এ পাওয়া ফাইলটি আপডেট করুন৷ /frontend/app/pages/account/page.tsx https://gist.github.com/Daltonic/ba714bfa557f10aebacfa8b5ac3d7111?embedable=true পৃষ্ঠায় করা পরিবর্তনগুলি হল: থেকে ফাংশন আমদানি করা হয়েছে এবং আমাদের API থেকে মুভি ডেটা পুনরুদ্ধার করতে হুকে এটি ব্যবহার করেছে। @/app/services/api.service fetchMovies useEffect স্থানীয় ডেটাকে ফাংশন কল দিয়ে প্রতিস্থাপন করা হয়েছে, যা আমাদের API থেকে ডেটা নিয়ে আসে। posters fetchMovies ব্যবহারকারী-নির্দিষ্ট মুভি ডেটা পুনরুদ্ধার করতে ফাংশনের যুক্তি হিসাবে পাস করা ৷ fetchMovies address মুভি তালিকা রেন্ডার করার আগে জন্য শর্তসাপেক্ষ চেক সরিয়ে দেওয়া হয়েছে, কারণ ফাংশন এখন এই যুক্তিটি পরিচালনা করে। address fetchMovies লোডিং কঙ্কাল প্রদর্শনের জন্য শর্তসাপেক্ষ বিবৃতিকে সরলীকৃত করা হয়েছে, কারণ এটি এখন শুধুমাত্র অবস্থার উপর নির্ভর করে। loaded এই পরিবর্তনগুলি আমাদের API থেকে মুভি ডেটা পুনরুদ্ধার করে, সংযুক্ত ব্যবহারকারীর জন্য নির্দিষ্ট, এবং ডেটা আনার সময় একটি লোডিং কঙ্কাল প্রদর্শন করে৷ চলচ্চিত্রের বিবরণ পৃষ্ঠা এই পৃষ্ঠাটি একটি ভিডিও প্লেয়ার এবং সম্পর্কিত চলচ্চিত্র সহ একটি সিনেমার নাম, মুক্তির বছর, রেটিং, সময়কাল, জেনার এবং পটভূমির তথ্য সহ একটি সিনেমার বিবরণ প্রদর্শন করে এবং ব্যবহারকারী মালিক হলে মুভিটি সম্পাদনা বা মুছে ফেলার বিকল্প প্রদান করে, Next.js, এবং Wagmi ব্যবহার করা। নিম্নলিখিত কোডগুলির সাথে এ পাওয়া ফাইলটি আপডেট করুন৷ /frontend/app/pages/movies/[slug]/page.tsx https://gist.github.com/Daltonic/5e37c94db3d73005a481ffd0cd141140?embedable=true আমরা এখানে কিছু বিশাল পরিবর্তন করেছি! এখানে আমরা যা করেছি তার একটি সারসংক্ষেপ: থেকে , , এবং ফাংশনগুলি আমদানি করা হয়েছে এবং সেগুলিকে আমাদের API শেষ পয়েন্টগুলির সাথে ইন্টারঅ্যাক্ট করতে ব্যবহার করেছে৷ @/app/services/api.service deleteMovie fetchMovie fetchMovies মুভি ডেটা পুনরুদ্ধার করতে API কলগুলির সাথে স্থানীয় ডেটা প্রতিস্থাপন করা হয়েছে৷ ফাংশন ব্যবহার করে মুভি মুছে ফেলার কার্যকারিতা প্রয়োগ করা হয়েছে। deleteMovie একটি চলচ্চিত্র মুছে ফেলার সময় একটি বিজ্ঞপ্তি প্রদর্শন করতে ব্যবহার করা হয়েছে। toast.promise স্থানীয় ডেটা সরানো হয়েছে এবং API কলগুলির সাথে এটি প্রতিস্থাপিত হয়েছে৷ posters ফাংশন কল করতে এবং প্রতিক্রিয়া পরিচালনা করতে ফাংশন আপডেট করা হয়েছে। deleteMovie handleSubmit এবং ফাংশন কল করতে হুক আপডেট করা হয়েছে৷ fetchMovie fetchMovies useEffect এই পরিবর্তনগুলির কারণে মুভি ডেটা পুনরুদ্ধার এবং মুছে ফেলার জন্য আমাদের অ্যাপ্লিকেশন আমাদের API এর সাথে ইন্টারঅ্যাক্ট করে এবং মুছে ফেলার প্রক্রিয়া চলাকালীন ব্যবহারকারীকে বিজ্ঞপ্তিগুলি প্রদর্শন করে৷ নীচের ভিডিওটির এই অংশটি আপনাকে দেখাবে কিভাবে আমরা এই পৃষ্ঠাগুলিকে শেষ পয়েন্টের সাথে একত্রিত করেছি, আপনি যদি কোনো সমস্যায় পড়েন তাহলে অনুগ্রহ করে সেই অংশটি নির্দ্বিধায় দেখুন৷ শুধু নিশ্চিত করুন যে আপনি টাইমস্ট্যাম্পে থামছেন। 04:57:41 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=14070&si=XCKxX3HvX3RjtNHY&embedable=true অ্যাপ্লিকেশন উপাদান আসুন আমাদের অ্যাপ্লিকেশনের প্রতিটি উপাদানের উদ্দেশ্য নিয়ে আলোচনা করি। আমরা পরিবর্তন করা প্রয়োজন যে কোনো উপাদান আপডেট করা হবে. ব্যানার উপাদান এই উপাদানটি মুভি ব্যানারগুলির একটি ঘূর্ণায়মান ব্যাকগ্রাউন্ড ইমেজ প্রদর্শন করে, প্রতি 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 https://gist.github.com/Daltonic/2aee8838dedcd6f14ef0f25103106a3a?embedable=true এই উপাদানটিতে করা পরিবর্তনগুলি হল: : আসল কোডে প্রকৃত আপলোড ফাইল কার্যকারিতা প্রয়োগ করা হয়নি। এটি শুধুমাত্র ফাইল আপলোড না করে একটি সফল টোস্ট বিজ্ঞপ্তি দেখিয়েছে। এই আপডেট করা কোডটিতে থেকে ফাংশন রয়েছে যা ফাইল আপলোড পরিচালনা করে। আপলোড ফাইল কার্যকারিতা api.service uploadFile : আপডেট করা কোড আপলোডের অগ্রগতি ট্র্যাক করে এবং এটি UI এ প্রদর্শন করে। অগ্রগতি ট্র্যাকিং : আপডেট করা কোড ফাইল আপলোড প্রক্রিয়ার জন্য ত্রুটি হ্যান্ডলিং অন্তর্ভুক্ত. ত্রুটি হ্যান্ডলিং : আপডেট করা কোডটি রেগুলার এক্সপ্রেশন ব্যবহার করে আরও শক্তিশালী ফাইল টাইপ ভ্যালিডেশন ব্যবহার করে। ফাইল টাইপ ভ্যালিডেশন : আপডেট করা কোডটি আরও ভালভাবে সংগঠিত, বিভিন্ন কাজ পরিচালনার জন্য আলাদা ফাংশন সহ, এটি পড়া এবং বজায় রাখা সহজ করে তোলে। কোড অর্গানাইজেশন : আপডেট করা কোডে কিছু UI আপডেট রয়েছে, যেমন আপলোডের অগ্রগতি দেখানো এবং আপলোডের সময় একটি বাতিল বোতাম। UI আপডেট প্রকৃত ফাইল আপলোড কার্যকারিতা, অগ্রগতি ট্র্যাকিং, ত্রুটি পরিচালনা এবং আরও ভাল কোড সংগঠন সহ এই আপডেট করা কোডটি আরও সম্পূর্ণ এবং শক্তিশালী। নীচের ভিডিওটি ব্যাখ্যা করে যে প্রতিটি উপাদান আরও বিশদে কী করে, দয়া করে আপনার উন্নতির জন্য এটি পরীক্ষা করে দেখুন৷ https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=17861&si=LNxLwBkKeE7kH3Xt&embedable=true এবং এটাই বন্ধুরা, আমরা এই প্রকল্পটি সম্পন্ন করেছি, এবং আমাদের যে শেষ পদক্ষেপটি নিতে হবে তা হল ব্রাউজারে এই প্রকল্পটি চালু করা। ব্রাউজারে প্রজেক্টটি লাইভ দেখতে চালান। $ yarn build && yarn start আপনি যদি কোন সমস্যার সম্মুখীন হন, তাহলে সমস্যা সমাধানের জন্য নিম্নলিখিত সংস্থানগুলি পড়ুন৷ পরের বার পর্যন্ত, সব ভাল! 🏠 Sia ওয়েবসাইট 🔥 সিয়া ভাড়া করা 👨💻 Sia Renterd API 🚀 সিয়া ডিসকর্ড চ্যানেল 💡 YouTube ভিডিও প্লেলিস্ট লেখক সম্পর্কে আমি একজন ওয়েব3 ডেভেলপার এবং এর প্রতিষ্ঠাতা, এমন একটি কোম্পানি যা ব্যবসা এবং ব্যক্তিদের বিকেন্দ্রীভূত অ্যাপ্লিকেশন তৈরি এবং চালু করতে সাহায্য করে। সফ্টওয়্যার শিল্পে আমার 8 বছরের বেশি অভিজ্ঞতা রয়েছে এবং আমি নতুন এবং উদ্ভাবনী অ্যাপ্লিকেশন তৈরি করতে ব্লকচেইন প্রযুক্তি ব্যবহার করার বিষয়ে উত্সাহী। আমি চালাই যেখানে আমি ওয়েব3 ডেভেলপমেন্টের টিউটোরিয়াল এবং টিপস শেয়ার করি এবং আমি নিয়মিত ব্লকচেইন স্পেসের সাম্প্রতিক প্রবণতা সম্পর্কে অনলাইনে নিবন্ধ পোস্ট করি। Dapp Mentors- ড্যাপ মেন্টরস নামে একটি ইউটিউব চ্যানেল
