ক্লার্ক এবং আপস্ট্যাশ রেডিসের সাথে একটি নিরাপদ, মাপযোগ্য সেশন স্টোর তৈরি করুন

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

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

প্রকল্প বিবরণ

এই ব্লগপোস্টে, আমরা একটি শপিং অ্যাপ্লিকেশনের জন্য একটি সেশন স্টোর তৈরি করতে Clerk, Next.js এবং Upstash Redis ব্যবহার করব। এই প্রকল্পে আমরা যে বৈশিষ্ট্যগুলি বাস্তবায়ন করব তার তালিকা এখানে রয়েছে:

ব্যবহারকারীরা সাইন-আপ, সাইন-ইন এবং সাইন-আউট ক্রিয়া সম্পাদন করতে সক্ষম হবেন৷
প্রত্যেক ব্যবহারকারী তাদের অনন্য শপিং কার্টে আইটেম যোগ করতে, সরাতে পারেন।
ব্যবহারকারীরা শপিং কার্টে আইটেমের পরিমাণ আপডেট করতে সক্ষম হবেন।

এই প্রকল্পে QStash এবং Upstash Ratelimit:

সম্পর্কিত কিছু অন্যান্য বৈশিষ্ট্য রয়েছে

অ্যাপ্লিকেশনের মধ্যে কিছু ক্রিয়া ইভেন্ট শুরু করবে, যার ফলে QStash-এর মাধ্যমে ইমেলের সময়সূচী হবে। এই ইমেলগুলি পরবর্তীতে পুনরায় পাঠানোর মাধ্যমে পাঠানো হবে। উদাহরণস্বরূপ, চেক আউট করার পরে, একটি শিপিং নিশ্চিতকরণ ইমেল 24 ঘন্টা পরে নির্ধারিত হবে। একইভাবে, একটি আইটেম কেনার পরে, ব্যবহারকারীরা একটি নির্দিষ্ট সময়-বিলম্বের পরে একটি প্রম্পট পাবেন, যা তাদের ক্রয়ের রেট দিতে উত্সাহিত করবে৷
ব্যবহারকারীদের আইটেম রেট করার বিকল্পও রয়েছে। সমস্ত রেটিং ডেটা সাবধানতার সাথে Upstash Redis-এ উপযুক্ত ডেটা স্ট্রাকচারে সংরক্ষণ করা হয়। ব্যবহারকারীর মিথস্ক্রিয়াগুলির একটি সুষম প্রবাহ নিশ্চিত করতে এবং সম্ভাব্য অপব্যবহার রোধ করতে, রেটিং ইভেন্টটি Upstash Ratelimit-এর হার-সীমিত ক্ষমতা দ্বারা নিয়ন্ত্রিত হয়৷

ডেমো

আপনি এখানে প্রকল্পের নিয়োজিত ডেমো দেখতে পারেন।

আপনি এখানে এই প্রকল্পের Github সংগ্রহস্থলে পৌঁছাতে পারেন।

Next.js অ্যাপ্লিকেশন তৈরি করা হচ্ছে

একটি নতুন টার্মিনাল উইন্ডো খুলুন, এবং নীচের প্রম্পট সহ অ্যাপ্লিকেশন তৈরি করুন:

npx create-next-app@latest

এটি আপনাকে প্রকল্পের বিকল্পগুলির জন্য জিজ্ঞাসা করবে, এবং আপনার কাছে আপনার Next.js প্রকল্পের টেমপ্লেট প্রস্তুত থাকবে৷

npx create-next-app@latest
Need to install the following packages:
 create-next-app@13.4.18
Ok to proceed? (y) y
✔ What is your project named? shopstash
✔ Would you like to use TypeScript? No / -> Yes
✔ Would you like to use ESLint? No / -> Yes
✔ Would you like to use Tailwind CSS? No / -> Yes
✔ Would you like to use `src/` directory? -> No / Yes
✔ Would you like to use App Router? (recommended) No / -> Yes
✔ Would you like to customize the default import alias? -> No / Yes
Creating a new Next.js app in /Users/***/shopstash.

একীকরণ ক্লার্ক

একটি প্রকল্পে ক্লার্ক যোগ করা মোটামুটি সহজ। আমরা পূর্বনির্মাণ উপাদান এবং হুকগুলির জন্য Clerk's Next.js SDK ব্যবহার করব। প্রথমে, এটি ইনস্টল করা যাক:

npm install clerk@nextjs

তারপর, আমরা ক্লার্ক ড্যাশবোর্ডে আমাদের অ্যাপ্লিকেশন তৈরি করব। আপনি আপনার পছন্দের উপর ভিত্তি করে প্রয়োজনীয় সাইন-আপ তথ্যের জন্য কনফিগারেশন করতে পারেন। একবার আপনি অ্যাপটি তৈরি করলে, প্রয়োজনীয় শংসাপত্রগুলি অনুরোধ করা হবে। আমরা এগুলোকে .env.local-এ কপি করব ফাইল এখানে একটি উদাহরণ:

.env.local

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_********
CLERK_SECRET_KEY=sk_test_********

আমরা '.env.local' ফাইলে ক্লার্কের জন্য পাথগুলিও কনফিগার করব৷

.env.local

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

এখন, সক্রিয় সেশন এবং ব্যবহারকারীর প্রসঙ্গগুলি ব্যবহার করতে, আমরা রুট লেআউটটিকে <ClerkProvider> দিয়ে মোড়ানো করব . এই টিউটোরিয়ালের আরও গভীরে, আমরা Header বাস্তবায়ন করব উপাদান।

layout.tsx

import { ClerkProvider } from "@clerk/nextjs";
 
import Header from "./components/Header";
 
export default function RootLayout({
 children,
}: {
 children: React.ReactNode;
}) {
 return (
 <ClerkProvider>
 <html lang="en">
 <body className="bg-white">
 <Header />
 <main className="container bg-white">
 <div className="flex min-h-screen items-start justify-center ">
 <div className="mt-5">{children}</div>
 </div>
 </main>
 </body>
 </html>
 </ClerkProvider>
 );
}

এখন, আমাদের প্রকল্পে ক্লার্ক ইনস্টল করা হয়েছে। পরবর্তী ধাপে কোন পৃষ্ঠাগুলি প্রমাণীকরণের পিছনে লুকানো হবে তা নির্ধারণ করা হয়। আমরা এই অপারেশনটি middleware.tsx-এ করব ফাইলটি রুট ফোল্ডারে রাখা হয়েছে।

Middleware.tsx

import { authMiddleware } from "@clerk/nextjs";
 
export default authMiddleware({});
 
export const config = {
 matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

এটি দিয়ে, পুরো অ্যাপ্লিকেশনটি সুরক্ষিত। আপনি সাইন ইন না করে কোনো পৃষ্ঠা অ্যাক্সেস করার চেষ্টা করলে, আপনাকে প্রমাণীকরণের জন্য সূচী পৃষ্ঠায় পুনঃনির্দেশিত করা হবে৷

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

এখানে একজন সক্রিয় ব্যবহারকারী ছাড়া হেডারের অবস্থা:

ক্লার্ক এবং আপস্ট্যাশ রেডিসের সাথে একটি নিরাপদ, মাপযোগ্য সেশন স্টোর তৈরি করুন

চূড়ান্ত পদক্ষেপ হল ব্যবহারকারীর কর্মের জন্য প্রয়োজনীয় রুট তৈরি করা। এই প্রকল্পের জন্য, আমরা বিল্টইন ক্লার্ক সাইন-আপ/সাইন-ইন উপাদানগুলি ব্যবহার করব, তবে আপনি অনন্য ব্যবহারকারী সাইনিং প্রবাহের জন্য কাস্টমাইজড পৃষ্ঠা ডিজাইনও তৈরি করতে পারেন৷ সাইন আপের জন্য, আমরা app/sign-in/[[...sign-up]]/page.tsx তৈরি করতে যাচ্ছি রুট।

app/sign-in/[[...sign-up]]/page.tsx

import { SignUp } from "@clerk/nextjs";
 
const SignUpPage = () => {
 return (
 <>
 <SignUp />
 </>
 );
};
export default SignUpPage;

সাইন আপ পৃষ্ঠাটি সাইন ইন করার জন্য প্রায় অভিন্ন, এবং আমরা এটিকে একই পথে বাস্তবায়ন করব৷

app/sign-in/[[...sign-up]]/page.tsx

import { SignIn } from "@clerk/nextjs";
 
const SignInPage = () => {
 return (
 <>
 <SignIn />
 </>
 );
};
export default SignInPage;

আমাদের প্রকল্পে ক্লার্কের সফল একীকরণের সাথে, আমরা এখন আরও অগ্রসর হতে চাই। সক্রিয় ব্যবহারকারী বৈশিষ্ট্যটি রয়েছে, প্রতিটি স্বতন্ত্র ব্যবহারকারীর জন্য Redis-এ একটি অনন্য সেশন স্টোর প্রতিষ্ঠা করার জন্য আমাদের জন্য স্টেজ সেট করছে। আমাদের কৌশলের মধ্যে রয়েছে ক্লার্কের কাছ থেকে ব্যবহারকারীর আইডি পুনরুদ্ধার করা এবং পরবর্তীতে Upstash Redis-এ উক্ত ব্যবহারকারীর জন্য সেশন ডেটা সংরক্ষণ করা। প্রক্রিয়াটি ব্যাখ্যা করার জন্য, আসুন একটি শপিং কার্ট তৈরি করার কথা বিবেচনা করি। এখানে, প্রতিটি পৃথক সেশন তার নিজ নিজ কার্ট আইটেম ডেটা বজায় রাখবে।

প্রথম এবং সর্বাগ্রে, একটি কার্ট আইটেম কি গঠন করে তা আমাদের ধারণা করতে হবে। এটি আমাদের ব্লুপ্রিন্ট হিসাবে কাজ করবে কারণ আমরা অ্যাপ্লিকেশনের বাকি অংশটি তৈরি করি। আপনি যদি বিভিন্ন আইটেমগুলির সাথে আপনার অ্যাপ্লিকেশনটি পূরণ করতে চান তবে ChatGPT এর মতো সরঞ্জামগুলি অমূল্য হতে পারে। বিকল্পভাবে, একটি আরও সরাসরি পদ্ধতিতে এই উদাহরণের সাথে যুক্ত GitHub সংগ্রহস্থল থেকে তাদের সোর্সিং জড়িত। এবং, অবশ্যই, আপনার ফ্রন্টএন্ডকে সত্যিকার অর্থে প্রাণবন্ত করতে, আপনাকে প্রতিটি আইটেমের জন্য উপযুক্ত ছবি ডিজাইন বা উৎস করতে হবে।

public/items.tsx

export const items = [
 {
 id: 1,
 title: "Elegant Leather Watch",
 image: "/images/1.png",
 description: "A sophisticated leather watch for all occasions.",
 company: "Timepiece Creations",
 price: 99.99,
 },
];

শপিং কার্ট বাস্তবায়ন করা

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

এটি সম্ভব করার জন্য, আমরা আধা-বৈশ্বিক স্কেলে প্রয়োজনীয় কার্ট ক্রিয়াকলাপগুলিতে (যেমন আইটেমগুলি যোগ করা, সেগুলি সরানো বা কার্ট পুনরায় সেট করা) অ্যাক্সেসের প্রস্তাব দিয়ে প্রতিক্রিয়া প্রসঙ্গ API ব্যবহার করতে যাচ্ছি৷

Upstash Redis-এ সংযোগ সেট আপ করতে, আমরা UPSTASH_REDIS_REST_URL কপি করব এবং UPSTASH_REDIS_REST_TOKEN কনসোল থেকে মান এবং সেগুলিকে আপনার .env এ আটকান ফাইল।

.env

UPSTASH_REDIS_REST_URL=<YOUR_URL>
UPSTASH_REDIS_REST_TOKEN=<YOUR_TOKEN>

আমাদের কার্ট প্রসঙ্গ app/context/CartContext.tsx-এ রাখা হবে ফাইল আমরা মূল অ্যাপ্লিকেশনটির চারপাশে এই প্রসঙ্গটি আবৃত করব, এটি প্রদান করা পদ্ধতিগুলি ব্যবহার করতে আমাদের সক্ষম করে। এখানে ক্ষমতার একটি দ্রুত রানডাউন রয়েছে:

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

উচ্চ ওভারভিউতে অ্যালগরিদম কীভাবে কাজ করে তা এখানে।

কার্ট, একটি সেশন স্টোর হিসাবে বিবেচিত, Upstash Redis-এ একটি হ্যাশে রাখা হবে৷ এই হ্যাশের অনন্য শনাক্তকারী ব্যবহারকারীর আইডির উপর ভিত্তি করে হবে, তাই প্রতিটি ব্যবহারকারীর cart:<USER_ID> ফর্ম্যাটে একটি কার্ট থাকবে .
রেডিস হ্যাশে কার্ট ডেটা সংরক্ষণ করার সময়, আমরা কী হিসাবে আইটেম আইডি এবং মান হিসাবে প্রতিটি আইটেমের পরিমাণ ব্যবহার করব। Redis এর অন্তর্নির্মিত কমান্ডের জন্য ধন্যবাদ, কার্ট পরিবর্তন করা একটি হাওয়া হয়ে ওঠে৷
ক্লায়েন্টের দিকে, কার্টটি আইটেম অবজেক্টের একটি অ্যারের সমন্বয়ে একটি স্টেট হিসাবে পরিচালিত হবে। যখন একটি পৃষ্ঠা লোড হয়, তখন useEffect হুক আপস্ট্যাশ রেডিস থেকে কার্ট ডেটা নিয়ে আসে। কার্টে কোনো পরিবর্তন করা হলে, সমস্ত প্রাসঙ্গিক উপাদান পুনরায় রেন্ডার করা হবে।
রেডিসের সহজবোধ্য ডেটা স্ট্রাকচার addItem বাস্তবায়নকে সহজ করে এবং removeItem কার্যকারিতা redis.hincrby() স্থাপন করে কমান্ড, আমরা কার্টের মধ্যে আইটেমগুলির পরিমাণ সামঞ্জস্য করা থেকে আইটেমগুলি যোগ করা বা অপসারণ করা পর্যন্ত কাজগুলি পরিচালনা করতে পারি। এই ইউটিলিটি রেডিসের দক্ষতাকে আন্ডারস্কোর করে।
resetCart এর জন্য ফাংশন, আমরা redis.del() ব্যবহার করে Upstash ডাটাবেস থেকে হ্যাশের কী মুছে ফেলব .

এখন যেহেতু আপনি কার্টের ধারণাগত রূপরেখাটি উপলব্ধি করেছেন, এখন আমাদের হাতা গুটিয়ে নেওয়ার এবং মূল পদ্ধতিতে প্রবেশ করার সময়।

কার্টে আইটেম যোগ করা হচ্ছে

রেডিস হ্যাশের দৃষ্টিকোণ থেকে, একটি আইটেম যোগ করা বা এর পরিমাণ পরিবর্তন করার জন্য একই কমান্ডের প্রয়োজন। hincrby কমান্ড হয় কী তৈরি করে এবং এর মান 1 এ সেট করে বা increment এর উপর ভিত্তি করে সম্পর্কিত মান বাড়ায় কমান্ডের প্যারামিটার।

ক্লায়েন্ট-সাইডে, আমরা হয় একটি নতুন আইটেম প্রবর্তন করে বা কার্টের অবস্থায় পরিমাণ পরিবর্তন করে এই ক্রিয়াগুলিকে মিরর করব৷

contexts/CartContext.tsx

const addItem = async (id: number) => {
 const item = items.find((i) => i.id === id);
 if (!item) return;
 
 const doesItemExist = cart.some((i) => {
 return id === i.id;
 });
 
 let newCart: Item[];
 
 if (!doesItemExist) {
 newCart = [...(cart || []), item];
 redis.hincrby(`user:${userId}`, id.toString(), 1);
 
 //We create an item in the state object with the given id, and set the quantity to 1.
 const newCartItemIDs = { ...cartItems, [id]: 1 };
 
 setCartItemIDs(newCartItemIDs);
 setCart(newCart);
 } else {
 const item = items.find((i) => i.id === id);
 
 //This item currently exists in the state object as key, so we increase the value by 1.
 const updatedItemQuantities = {
 ...cartItems,
 [id]: cartItems[id] + 1,
 };
 
 setCartItems(updatedItemQuantities);
 redis.hincrby(`user:${userId}`, id.toString(), 1);
 }
};

কার্ট থেকে আইটেম সরানো হচ্ছে

অপসারণ যোগ অপারেশন অনুরূপ. আপনি hincrby ব্যবহার করে একটি হ্যাশ মান কমাতে পারেন , increment দেওয়ার মাধ্যমে -1 হিসাবে প্যারামিটার .

contexts/CartContext.tsx

const removeItem = async (id: number, force: boolean = false) => {
 const doesItemExist = cart.some((i) => {
 return id === i.id;
 });
 
 if (!doesItemExist) return;
 
 if (cartItems[id] === 1 || force) {
 const newCart: Item[] = cart.filter((item: { id: number }) => {
 return item.id !== id;
 });
 
 // Creating the new state object for cart
 const newCartItems = { ...cartItems };
 delete newCartItems[id];
 
 //Removing the item from Upstash Redis hashset.
 redis.hdel(`user:${userId}`, id.toString());
 
 setCart(newCart);
 setCartItems(newCartItems);
 } else if (cartItems[id] > 1) {
 const updatedItemQuantities = {
 ...cartItems,
 [id]: cartItems[id] - 1,
 };
 
 setCartItems(updatedItemQuantities);
 redis.hincrby(`user:${userId}`, id.toString(), -1);
 }
};

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

সূচী পাতা :এখানে, সমস্ত আইটেম প্রদর্শিত হয়. প্রতিটি আইটেমের সাথে অনন্য বোতাম রয়েছে, আপনাকে সেগুলিকে আপনার কার্টে যোগ করতে দেয়। যদি একটি পণ্য ইতিমধ্যেই আপনার কার্টে থাকে, আপনার কাছে এটি অপসারণের বিকল্প থাকবে৷
৷
আমরা shadcnui ব্যবহার করব UI লাইব্রেরি প্রতিক্রিয়া করুন, এবং একটি মডেল/শীট তৈরি করুন যা একক পৃষ্ঠায় কার্টের সমস্ত আইটেমকে একত্রিত করে। এই স্থানটি শুধু ব্রাউজ করার জন্য নয়; আপনি প্রয়োজন হিসাবে আইটেম পরিমাণ পরিবর্তন করতে পারেন. এবং যদি আপনি পরিবর্তনযোগ্য বোধ করেন, কার্ট রিসেট করার বা চেকআউটে এগিয়ে যাওয়ার বিকল্পগুলি সেখানে রয়েছে৷

সূচী পাতা

লক্ষণীয় একটি বিষয়:সূচী পৃষ্ঠায় আইটেমগুলি সক্রিয়, সাইন-ইন করা ব্যবহারকারীদের জন্য বিশেষভাবে প্রদর্শন করা হয়। প্রথমে, আমরা ক্লার্কের কাছ থেকে ব্যবহারকারীর ডেটা নিয়ে আসি এবং ক্লার্কের প্রতিক্রিয়ার ভিত্তিতে উপাদানগুলি রেন্ডার করি৷

কার্ড কম্পোনেন্টে, আমরা শুধু প্রয়োজনীয় ফাংশন এবং বস্তু CartContext পুনরুদ্ধার করব।

components/CardComponent.tsx

export default function CardComponent(props: { item: cardProps }) {
 const { item } = props;
 const { id, title, image, company } = item;
 const { addItem, removeItem, cartItems } = useContext(CartContext);
 
 return (
 <>
 <Card className="transition duration-200 hover:shadow-lg">
 <Link href={`/products/${id}`}>
 <CardHeader>
 <CardTitle>{title}</CardTitle>
 </CardHeader>
 <CardContent>
 <Image src={image} alt={title} width={300} height={300}></Image>
 <CardDescription>{company}</CardDescription>
 </CardContent>
 </Link>
 <CardFooter>
 <div className="grid grid-rows-2">
 <CartButton
 id={id}
 cartItems={cartItems}
 addItem={addItem}
 removeItem={removeItem}
 />
 </div>
 </CardFooter>
 </Card>
 </>
 );
}

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

components/CartButton.tsx

const CartButton = ({
 id,
 cartItems,
 addItem,
 removeItem,
}: {
 id: number;
 cartItems: cartContent;
 addItem: (id: number) => Promise<void>;
 removeItem: (id: number, force: boolean) => Promise<void>;
}) => {
 const itemExists: boolean = cartItems?.hasOwnProperty(id);
 const { triggerEvent } = useContext(UserStateContext);
 return (
 <button
 className={`${
 itemExists ? "bg-red-400 text-black" : "bg-cyan-500 text-black"
 } flex items-center justify-center gap-3 rounded-full px-4 py-2 transition-all duration-300`}
 onClick={() => {
 if (itemExists) {
 removeItem(id, true);
 } else {
 addItem(id);
 }
 }}
 >
 <p className="text-sm font-bold">
 {itemExists ? "Remove from Cart" : "Add to Cart"}
 </p>
 <FaCartShopping size="25" />
 </button>
 );
};

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

আমরা আমাদের বেস হিসাবে shadcn/ui শীট কম্পোনেন্টের দিকে ঘুরছি, এর অভ্যন্তরকে ব্যক্তিগতকৃত করার পরিকল্পনা নিয়ে।

এমন পরিস্থিতিতে যেখানে কার্টটি খালি থাকে, উপাদানটি পরিস্থিতির একটি পরিষ্কার ছবি আঁকে:

যাইহোক, আইটেমগুলি কার্টে ঢুকে যাওয়ার সাথে সাথে এই উপাদানটিতে তারা সহজেই দৃশ্যমান হয়ে ওঠে। আপনি শুধুমাত্র আপনার নির্বাচনগুলিই দেখতে পারবেন না, তবে আপনার আইটেমগুলির পরিমাণে পরিবর্তন বা সমষ্টিগত মান পরিমাপ করার স্বাধীনতাও রয়েছে৷

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

কোডের সেই চূড়ান্ত স্নিপেট দিয়ে, আমাদের প্রকল্পটি তার উপসংহারে পৌঁছেছে। আমরা সফলভাবে ধারণা থেকে বাস্তবায়নের পথে যাত্রা করেছি, Upstash Redis এর শক্তি এবং shadcn/ui লাইব্রেরির নমনীয়তা ব্যবহার করে আমাদের কার্ট বৈশিষ্ট্যকে জীবন্ত করে তুলেছি।

উপসংহার

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

এই প্রকল্পে আরও উন্নতির জন্য এখানে কিছু পরামর্শ রয়েছে:

ব্যবহারকারীর অভিজ্ঞতা: যদিও আমরা একটি শক্তিশালী এবং কার্যকরী কার্ট স্থাপন করেছি, ইউজার ইন্টারফেস বর্ধিতকরণগুলি-অ্যানিমেশন, ফিডব্যাক লুপ বা এমনকি বিশদ পণ্যের প্রিভিউগুলিকে আরও গভীরভাবে অনুসন্ধান করা একটি আরও বেশি নিরবচ্ছিন্ন ব্যবহারকারীর যাত্রা প্রদান করতে পারে৷
পারফরম্যান্স: Upstash Redis-এর ভিত্তিগত ব্যবহারের মাধ্যমে, আমরা আরও উন্নত ক্যাশিং কৌশলগুলিকে আরও গভীরভাবে দেখতে পারি, সম্ভবত উন্নত লোডের সময় এবং একটি সমৃদ্ধ অফলাইন অভিজ্ঞতার জন্য পরিষেবা কর্মীদের একীভূত করতে৷
বৈশিষ্ট্য: পছন্দের তালিকা, বর্তমান কার্টের বিষয়বস্তুর উপর ভিত্তি করে তৈরি পণ্যের সুপারিশ, বা প্রচারমূলক কোড প্রয়োগ করার জন্য একটি সিস্টেমের সাথে কার্টের ক্ষমতা প্রসারিত করা কেনাকাটার অভিজ্ঞতাকে উন্নত করতে পারে।
একীকরণ: একটি বিস্তৃত ইকমার্স সমাধানের জন্য একটি মসৃণ চেকআউট প্রক্রিয়া বা এমনকি তৃতীয় পক্ষের ইনভেন্টরি বা CRM সিস্টেমগুলির সাথে ইন্টারফেসের জন্য পেমেন্ট গেটওয়েগুলিকে একীভূত করার সম্ভাবনা রয়েছে৷

এই উন্নয়ন অ্যাডভেঞ্চার অনুসরণ করার জন্য আপনাকে ধন্যবাদ. আমরা আপনার প্রতিক্রিয়া শুনতে আগ্রহী এবং এই মৌলিক কাঠামোতে আপনি যে উদ্ভাবন আনতে পারেন তা দেখতে চাই! এই প্রকল্প সম্পর্কে আপনার কোন প্রশ্ন বা সমস্যা থাকলে, নির্দ্বিধায় আমার সাথে fahreddin@upstash.com এ যোগাযোগ করুন।

আপনি এখানে প্রকল্পের Github সংগ্রহস্থল খুঁজে পেতে পারেন.

যে অংশে আমরা QStash ব্যবহার করে ইমেল শিডিউল করি এবং রিসেন্ড করি তা অন্য পোস্টে কভার করা হবে। ততক্ষণ পর্যন্ত আপনি বাস্তবায়ন দেখতে উদাহরণ রেপো পরীক্ষা করতে পারেন।