কিভাবে NextJS, TypeScript, Tailwind, এবং OneEntry CMS একটি ইকমার্স স্টোর তৈরি করতে ব্যবহার করবেন 🛒👨‍💻

ভূমিকা

এটি একটি অংশীদারিত্ব নিবন্ধ যা OneEntry CMS দ্বারা স্পনসর করা হয়েছে।

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

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

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

এই প্রকল্পের কোড GitHub সংগ্রহস্থলে উপলব্ধ হবে।

টেক স্ট্যাকের পছন্দ

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

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

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

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

বিষয়বস্তু এবং ডিজাইন

ল্যান্ডিং পৃষ্ঠাটি শিরোনাম শিরোনাম প্রদর্শন করবে, দোকানের বৈশিষ্ট্যগুলি তালিকাভুক্ত করবে এবং নায়কের ছবি অন্তর্ভুক্ত করবে।

প্রথম দোকান বিভাগটি পোশাকের জন্য উত্সর্গীকৃত হবে।

দ্বিতীয় দোকান বিভাগে গিয়ার অন্তর্ভুক্ত থাকবে।

প্রতিটি আইটেমের বিবরণ সহ একটি পৃথক পূর্বরূপ পৃষ্ঠা থাকবে।

ইতিমধ্যে কার্টে থাকা আইটেমগুলিকে সরানোর বিকল্প থাকবে৷

কার্ট সমস্ত নির্বাচিত আইটেম তালিকাভুক্ত করবে এবং মোট গণনা করবে।

OneEntry প্রকল্প তৈরি করুন

প্রথমত, ব্যবহারকারীকে একটি নতুন অ্যাকাউন্টের জন্য সাইন আপ করতে হবে। এটি করতে, OneEntry হোমপেজে নেভিগেট করুন এবং আপনার ইমেল অ্যাকাউন্টের মাধ্যমে সাইন আপ করুন ৷

এর পরে, লগ ইন করুন , এবং আপনাকে OneEntry ড্যাশবোর্ডে পাঠানো হবে।

একটি নতুন প্রকল্প তৈরি করে শুরু করুন।

আপনি এক মাসের জন্য অধ্যয়ন পরিকল্পনা ব্যবহার করার জন্য বিনামূল্যে কোড পাবেন। প্রকল্প তৈরির প্রক্রিয়া চলাকালীন আপনার এটি সক্রিয় করার সুযোগ থাকবে।

প্রকল্পটি তৈরি করতে কয়েক মিনিট সময় লাগবে। এটি প্রস্তুত হয়ে গেলে, প্রকল্পের স্থিতি "কাজ চলছে" এ পরিবর্তিত হবে এবং স্থিতি নির্দেশক সবুজ হবে৷

পেজ তৈরি করা

প্রকল্পটি তৈরি হওয়ার পরে, আপনি অ্যাপের জন্য ডেটা সঞ্চয় করতে আপনার CMS পোর্টাল অ্যাক্সেস করতে লগইন বিশদ সহ একটি ইমেল পাবেন।

লগইন করার পরে, আপনি আপনার প্রথম পৃষ্ঠা তৈরি করতে সক্ষম হবেন।

কন্টেন্ট ম্যানেজমেন্টে নেভিগেট করুন, একটি নতুন পৃষ্ঠা তৈরি করুন-এ ক্লিক করুন এবং প্রয়োজনীয় সমস্ত ডেটা পূরণ করুন - পৃষ্ঠার ধরন, পৃষ্ঠার শিরোনাম, পৃষ্ঠা ULR এবং মেনু আইটেমের নাম।

প্রবেশ করার পরে সমস্ত ডেটা স্বয়ংক্রিয়ভাবে সংরক্ষণ করা হয়।

বাড়ি, পোশাক, গিয়ার এবং কার্টের জন্য 4টি ভিন্ন পৃষ্ঠা তৈরি করুন। একবার তৈরি হয়ে গেলে, পৃষ্ঠাগুলি নীচের স্ক্রিনশটের মতো দেখতে হবে।

গুণাবলী তৈরি করুন

এরপরে, আমরা যে ডেটা স্ট্রাকচার সংরক্ষণ করব তা তৈরি করতে হবে। OneEntry CMS-এ, এটি ডেটার জন্য বৈশিষ্ট্য তৈরি করে অর্জন করা হয়।

সেটিংসে নেভিগেট করুন এবং অনুভূমিক মেনুতে বৈশিষ্ট্যগুলি নির্বাচন করুন৷ নাম, চিহ্নিতকারী এবং প্রকার প্রদান করে হোম পৃষ্ঠার জন্য একটি বৈশিষ্ট্য সেট তৈরি করুন:

একবার তৈরি হয়ে গেলে, এটি নীচের স্ক্রিনশটের মতো দেখাবে:

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

এখন, প্রতিটি সেটের জন্য নির্দিষ্ট গুণাবলী সংজ্ঞায়িত করা যাক।

আমরা আগে হোম সেকশন ওয়্যারফ্রেমে যে বিষয়বস্তু অন্তর্ভুক্ত করেছি তার উপর ভিত্তি করে, আমরা শিরোনাম, বিবরণ এবং চিত্র প্রদর্শন করতে চাই।

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

এখন, ফিরে যান এবং পোশাকের জন্য গিয়ার আইকনে ক্লিক করুন।

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

এখানে বৈশিষ্ট্য গঠন দেখতে কেমন হবে:

এর পরে, গিয়ার পৃষ্ঠার জন্য একই কাজ করুন, যা একই কাঠামো ব্যবহার করবে:

বিষয়বস্তু যোগ করুন

প্রকল্পের এই পর্যায়ে, আমরা ইতিমধ্যেই বিষয়বস্তু কাঠামো সংজ্ঞায়িত করেছি এবং নিজেই সামগ্রী তৈরি করা শুরু করতে প্রস্তুত।

বিষয়বস্তু ব্যবস্থাপনা বিভাগে নেভিগেট করুন যেখানে আপনি পূর্বে সাইটের জন্য আপনার সমস্ত পৃষ্ঠা তৈরি করেছিলেন:

হোমের জন্য সম্পাদনা বোতামে ক্লিক করুন। এর পরে, অনুভূমিক মেনুতে বৈশিষ্ট্য ট্যাবে ক্লিক করুন:

বৈশিষ্ট্যের সেটের জন্য হোম নির্বাচন করুন। এটি হোম পেজের জন্য সেটিংসে আমরা পূর্বে তৈরি করা সমস্ত বৈশিষ্ট্য লোড করবে৷

এখন কিছু নমুনা ডেটা পূরণ করুন যা আপনি হোম পেজে প্রদর্শন করতে চান।

এখন, আমাদের পোশাক এবং গিয়ার পৃষ্ঠাগুলির জন্য কিছু বিষয়বস্তু যোগ করা যাক।

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

এখন, Add icon for Clothing-এ ক্লিক করুন এবং কয়েকটি আইটেম যোগ করুন।

প্রথমে, আপনি যে পণ্যটি যুক্ত করতে চান তার শিরোনামটি যুক্ত করুন।

এখন অ্যাট্রিবিউট ট্যাবে স্যুইচ করুন, অ্যাট্রিবিউটের সেটের জন্য পোশাক নির্বাচন করুন এবং প্রয়োজনীয় ডেটা পূরণ করুন।

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

একটি API অ্যাক্সেস টোকেন তৈরি করুন

OneEntry CMS-এ তৈরি সমস্ত ডেটা সুরক্ষিত, তাই এটি অ্যাক্সেস করতে সক্ষম হওয়ার জন্য আমাদের একটি ব্যক্তিগত টোকেন তৈরি করতে হবে।

এটি করতে, সেটিংসে নেভিগেট করুন এবং অ্যাপ টোকেন নির্বাচন করুন। অ্যাপের নাম এবং মেয়াদ শেষ হওয়ার তারিখ লিখুন এবং তৈরি করুন ক্লিক করুন। এটি একটি অনন্য API কী তৈরি করবে।

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

নেক্সটজেএস প্রকল্প সেট আপ করা হচ্ছে

টিউটোরিয়ালের এই বিভাগে, আমরা কোডের সাথে কাজ শুরু করব এবং OneEntry CMS-এর সাথে কাজ করার জন্য NextJS প্রোজেক্ট কনফিগার করব।

টার্মিনাল খুলুন এবং npx create-next-app@latest কমান্ডটি চালান।

CLI সেটআপ উইজার্ড শুরু করবে। আপনার প্রকল্পের নাম লিখুন, এবং নীচে দেখানো সমস্ত ডিফল্ট মান নির্বাচন করুন:

সেটআপটি সম্পূর্ণ করতে এক মিনিট সময় দিন এবং নেক্সটজেএস অ্যাপ তৈরি হয়ে গেলে আপনি একটি বিজ্ঞপ্তি পাবেন।

এর পরে, cd winter-sports কমান্ড ব্যবহার করে নতুন তৈরি ফোল্ডারে ডিরেক্টরি পরিবর্তন করুন এবং তারপর বিকাশকারী সার্ভার শুরু করতে npm run dev চালান।

এটি অ্যাক্সেস করতে, টার্মিনালে প্রদত্ত লিঙ্কে ক্লিক করুন বা আপনার ওয়েব ব্রাউজার খুলুন এবং ম্যানুয়ালি http://localhost:3000- এ নেভিগেট করুন।

আপনাকে NextJS ডেভেলপার সার্ভার ল্যান্ডিং পৃষ্ঠার সাথে উপস্থাপন করা উচিত:

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

ক্লিপবোর্ডে আগে অনুলিপি করা API কীটি নিম্নরূপ পেস্ট করুন:

 API_KEY=your-api-code-from-oneentry

OneEntry CMS থেকে ডেটা আনার জন্য API কল করার পর এটি আমাদের process.env.API_KEY এর মাধ্যমে কী অ্যাক্সেস করার অনুমতি দেবে।

আমাদের নেক্সটজেএস কনফিগার করতে হবে, তাই এটি আমাদের একটি বাহ্যিক ডোমেন থেকে মিডিয়া অন্তর্ভুক্ত করার অনুমতি দেয়। OneEntry CMS থেকে ছবি অ্যাক্সেস করার জন্য আমাদের এটির প্রয়োজন হবে।

প্রজেক্ট রুটে next.config.js ফাইলটি খুলুন এবং এটিকে নিম্নরূপ সম্পাদনা করুন:

 const nextConfig = { images: { remotePatterns: [ { hostname: "ecommerce.oneentry.cloud", }, ], }, }; module.exports = nextConfig;

অবশেষে, আমাদের অ্যাপটির জন্য Tailwind ডিফল্ট স্টাইলিং রিসেট করতে হবে কারণ আমরা স্ক্র্যাচ থেকে সমস্ত শৈলী লিখব।

src ফোল্ডারে অবস্থিত app ডিরেক্টরিতে globals.css ফাইলটি খুলুন এবং ফাইলের বিষয়বস্তুকে নিম্নলিখিতগুলিতে পরিবর্তন করুন:

 @tailwind base; @tailwind components; @tailwind utilities;

প্রকার তৈরি করুন

যেহেতু আমরা টাইপস্ক্রিপ্টের সাথে কাজ করব, তাই আমাদের অ্যাপ্লিকেশনে আমরা কী ধরনের ডেটা ব্যবহার করব তা নির্ধারণ করতে হবে।

আমরা পৃষ্ঠা এবং উপাদানগুলির মধ্যে এটি করতে পারি, তবে কোডটি পরিষ্কার রাখতে এবং পুনরাবৃত্তি এড়াতে, app ডিরেক্টরির মধ্যে একটি নতুন ফোল্ডার interfaces তৈরি করুন। নতুন তৈরি ফোল্ডারের ভিতরে একটি ফাইল data.tsx তৈরি করুন এবং কোডটি অন্তর্ভুক্ত করুন:

 export interface Product { id: string; category: string; title: string; subtitle: string; description: string; image: string; price: number; } export interface ProductAPI { id: string; attributeValues: { en_US: { producttitle: { value: { htmlValue: string }[]; }; productsubtitle: { value: { htmlValue: string }[]; }; productdescription: { value: { htmlValue: string }[]; }; productimage: { value: { downloadLink: string }[]; }; productprice: { value: number; }; }; }; } export interface Page { pageUrl: string; title: string; description: string; image: string; localizeInfos: { en_US: { title: string; }; }; } export interface PageAPI { attributeValues: { en_US: { herotitle: { value: { htmlValue: string }[]; }; herodescription: { value: { htmlValue: string }[]; }; heroimage: { value: { downloadLink: string }[]; }; }; }; } export interface URLProps { params: { category: string; productId: string; }; } export interface TextProps { className: string; text: string; }

পণ্য এবং পৃষ্ঠা ডেটা উভয়ই তাদের ফ্রন্ট-এন্ড রেন্ডারিং ডেটা স্ট্রাকচার এবং আনয়ন পদ্ধতির মাধ্যমে API থেকে প্রতিক্রিয়ার জন্য প্রকার থাকবে।

এছাড়াও, আমরা CMS-এ টেক্সট ইনপুট ক্ষেত্রগুলি থেকে প্রাপ্ত ডেটার জন্য URL প্যারামিটার এবং টেক্সট রেন্ডারার থেকে ডেটার জন্য ডেটা প্রকারগুলি সংজ্ঞায়িত করেছি।

API ফেচ ফাংশন তৈরি করুন

এখন, কিছু ফাংশন তৈরি করা যাক যা আমরা OneEntry CMS-এর সাথে যোগাযোগ করতে পৃষ্ঠা এবং পণ্যগুলির ডেটা আনতে ব্যবহার করব।

আবার, আমরা প্রতিটি ফাইলে এটি করতে পারি, কিন্তু কোডটি পরিষ্কার রাখতে, এর ভিতরে একটি fetchData.tsx ফাইল সহ app ডিরেক্টরির মধ্যে একটি নতুন ফোল্ডার services তৈরি করা যাক:

 export async function getPages() { const response = await fetch( "https://ecommerce.oneentry.cloud/api/content/pages", { method: "GET", headers: { "x-app-token": `${process.env.API_KEY}`, }, } ); return await response.json(); } export async function getProducts(category: string) { const response = await fetch( `https://ecommerce.oneentry.cloud/api/content/products/page/url/${category}?limit=4&offset=0&langCode=en_US&sortOrder=DESC&sortKey=id`, { method: "GET", headers: { "x-app-token": `${process.env.API_KEY}`, }, } ); return await response.json(); } export async function getProduct(id: string) { const response = await fetch( `https://ecommerce.oneentry.cloud/api/content/products/${id}`, { method: "GET", headers: { "x-app-token": `${process.env.API_KEY}`, }, } ); return await response.json(); }

getPages ফাংশন OneEntry CMS-এ আমরা যে সমস্ত পৃষ্ঠা তৈরি করেছি সেগুলি সম্পর্কে ডেটা আনবে।

getProducts ফাংশন category প্যারামিটারের উপর ভিত্তি করে পণ্যের একটি নির্দিষ্ট সংগ্রহের জন্য ডেটা আনবে। যখন আমরা পণ্য পৃষ্ঠায় ফাংশন আমদানি করব তখন আমরা প্যারামিটারটি পাস করব।

getProduct ফাংশনটি আমরা যে পণ্যটি খুলি তার id উপর ভিত্তি করে ডেটা আনবে। আমরা যখন কোনো নির্দিষ্ট পণ্যের পূর্বরূপ পৃষ্ঠায় ফাংশন আমদানি করব তখন আমরা প্যারামিটারটি পাস করব।

লক্ষ্য করুন যে আমরা এপিআই কী অ্যাক্সেস করতে process.env.API_KEY ব্যবহার করেছি যা আমরা আগে .env ফাইলে সংজ্ঞায়িত করেছি OneEntry CMS-এর অ্যাক্সেস প্রমাণীকরণের জন্য।

হেল্পার ফাংশন তৈরি করুন

এছাড়াও, যখন আমরা এখনও services ফোল্ডারে আছি, আসুন এটির ভিতরে helpers.tsx নামে আরেকটি নতুন ফাইল তৈরি করি যা ছোট ইউটিলিটি ফাংশন অন্তর্ভুক্ত করবে:

 export function calculateTotal(items: { price: number }[]) { return items.reduce((total, item) => total + Number(item.price), 0); } export function boughtStatus(items: { id: string }[], id: string) { return items.some((item) => item.id === id); } export function cartIndex(items: { id: string }[], id: string) { return items.findIndex((item) => item.id === id); }

calculateTotal ফাংশন কার্টে যোগ করা পণ্যের দাম যোগ করবে এবং মোট মূল্য ফেরত দেবে।

প্রিভিউ রুটের পৃথক আইটেমগুলি ইতিমধ্যে কার্টে যোগ করা হয়েছে কিনা তা boughtStatus সনাক্ত করবে।

cartIndex কার্টে যোগ করা পণ্যগুলির জন্য অ্যারেতে আইটেমের অবস্থান সনাক্ত করবে।

উপাদান তৈরি

app ডিরেক্টরিতে ফিরে যান এবং এর ভিতরে একটি নতুন ফোল্ডার components তৈরি করুন।

নতুন তৈরি ফোল্ডারটি খুলুন এবং এতে সাতটি পৃথক ফাইল অন্তর্ভুক্ত করুন: Header.tsx , Footer.tsx , Text.tsx , Card.tsx , Preview.tsx , Order.tsx , AddToCart.tsx ।

হেডার উপাদান

Header.tsx ফাইলটি খুলুন এবং নিম্নলিখিত কোডটি অন্তর্ভুক্ত করুন:

 import Link from "next/link"; import { Page } from "../interfaces/data"; export default function Header({ pages }: { pages: Page[] }) { return ( <div className="flex justify-between items-center mb-10 p-6"> <Link href="/"> <h1 className="text-xl">🏂 Alpine Sports</h1> </Link> <div className="flex space-x-4 list-none"> {pages.map((page, index: number) => ( <Link key={index} href={page.pageUrl === "home" ? "/" : `/${page.pageUrl}`} > {page.localizeInfos.en_US.title} </Link> ))} </div> </div> ); }

শিরোনামের জন্য, আমরা কোম্পানির নাম প্রদর্শন করেছি এবং নেভিগেশন লিঙ্কগুলির মাধ্যমে লুপ করেছি যা আমরা পৃষ্ঠাগুলিতে কম্পোনেন্ট আমদানি করার পরে API থেকে পাব।

আমরা একটি দুই-কলাম লেআউট তৈরি করেছি এবং সাধারণ নেভিগেশন চেহারা অর্জন করতে অনুভূমিকভাবে স্ক্রিনের বিপরীত দিকে উভয় উপাদানকে অবস্থান করেছি।

ফুটার উপাদান

Footer.tsx ফাইলটি খুলুন এবং নিম্নলিখিত কোডটি অন্তর্ভুক্ত করুন:

 export default function Footer() { return ( <div className="text-center mt-auto p-6"> <h1>Alpine Sports, Inc.</h1> <p>All rights reserved, {new Date().getFullYear()}</p> </div> ); }

ফুটারে, আমরা কোম্পানির নমুনা নাম এবং বর্তমান বছরের সাথে বিষয়বস্তুর অধিকার অন্তর্ভুক্ত করেছি। আমরা বিষয়বস্তু কেন্দ্রীভূত করেছি এবং কিছু প্যাডিং যোগ করেছি।

পাঠ্য উপাদান

Text.tsx ফাইলটি খুলুন এবং নিম্নলিখিত কোডটি অন্তর্ভুক্ত করুন:

 import { TextProps } from "../interfaces/data"; export default function Text({ className, text }: TextProps) { return ( <div className={className} dangerouslySetInnerHTML={{ __html: text }} /> ); }

পাঠ্য উপাদানটি আমরা OneEntry CMS থেকে প্রাপ্ত পাঠ্য ডেটা রেন্ডার করবে এবং HTML ট্যাগ ছাড়াই আমাদের অ্যাপ্লিকেশনে সঠিকভাবে প্রদর্শন করবে।

কার্ড উপাদান

Card.tsx ফাইলটি খুলুন এবং নিম্নলিখিত কোডটি অন্তর্ভুক্ত করুন:

 import Link from "next/link"; import Text from "../components/Text"; import { Product } from "../interfaces/data"; export default function Card({ product }: { product: Product }) { return ( <Link href={`/${product.category}/${product.id}`}> <div className="group relative"> <div className="group-hover:opacity-75 h-80"> <img src={product.image} alt="Product card image" className="h-full w-full object-cover object-center" /> </div> <div className="mt-4 flex justify-between"> <div> <h3 className="text-sm text-gray-700"> <Text className="" text={product.title} /> </h3> <Text className="mt-1 text-sm text-gray-500" text={product.subtitle} /> </div> <p className="text-sm font-medium text-gray-900">${product.price}</p> </div> </div> </Link> ); }

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

চিত্রটি কার্ডের শীর্ষে প্রদর্শিত হবে, তারপরে শিরোনাম এবং বিবরণ এবং উপাদানটির নীচের ডানদিকে মূল্য প্রদর্শিত হবে৷

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

Preview.tsx ফাইলটি খুলুন এবং নিম্নলিখিত কোডটি অন্তর্ভুক্ত করুন:

 "use-client"; import Image from "next/image"; import Text from "./Text"; import { Product } from "../interfaces/data"; export default function Preview({ children, productItem, }: { children: React.ReactNode; productItem: Product; }) { return ( <div className="flex mx-auto max-w-screen-xl"> <div className="flex-1 flex justify-start items-center"> <Image src={productItem.image} alt="Product preview image" width="450" height="900" /> </div> <div className="flex-1"> <Text className="text-5xl pb-8" text={productItem.title} /> <Text className="text-4xl pb-8 text-gray-700" text={`$${productItem.price}`} /> <Text className="pb-8 text-gray-500 text-justify" text={productItem.description} /> {children} </div> </div> ); }

ব্যবহারকারী একবার ক্লিক করলে প্রতিটি পণ্য সম্পর্কে আরও তথ্য প্রদর্শন করতে পূর্বরূপ উপাদানটি ব্যবহার করা হবে।

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

অর্ডার উপাদান

Order.tsx ফাইলটি খুলুন এবং নিম্নলিখিত কোডটি অন্তর্ভুক্ত করুন:

 "use client"; import { useState, useEffect } from "react"; import Link from "next/link"; import Image from "next/image"; import Text from "./Text"; import { calculateTotal } from "../services/helpers"; import { Product } from "../interfaces/data"; export default function Order() { const [cartItems, setCartItems] = useState<Product[]>([]); useEffect(() => { const storedCartItems = localStorage.getItem("cartItems"); const cartItems = storedCartItems ? JSON.parse(storedCartItems) : []; setCartItems(cartItems); }, []); return ( <div> {cartItems.map((item, index) => ( <div key={index} className="flex items-center border-b border-gray-300 py-2" > <div className="w-20 h-20 mr-12"> <Image src={item.image} alt={item.title} width={80} height={80} /> </div> <div> <Link href={`/${item.category}/${item.id}`} className="text-lg font-semibold" > <Text className="" text={item.title} /> </Link> <Text className="text-gray-600" text={item.subtitle} /> <p className="text-gray-800">Price: ${item.price}</p> </div> </div> ))} <div className="mt-4 text-end"> <h2 className="text-xl font-semibold mb-8"> Total Amount: ${calculateTotal(cartItems)} </h2> <button className="bg-blue-500 hover:bg-blue-700 py-2 px-8 rounded"> Proceed to checkout </button> </div> </div> ); }

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

কম্পোনেন্ট রেন্ডার হয়ে গেলে, অ্যাপটি বর্তমানে কার্টে থাকা সমস্ত আইটেম অ্যাক্সেস করবে, তাদের cardItems স্টেট ভেরিয়েবলে সেট করবে এবং map পদ্ধতির মাধ্যমে স্ক্রিনে রেন্ডার করবে।

রেন্ডার করা আইটেমের মোট পরিমাণ calculateTotal ফাংশনের মাধ্যমে গণনা করা হবে, যা আমরা helpers.tsx ফাইল থেকে আমদানি করেছি।

AddToCart উপাদান

AddToCart.tsx ফাইলটি খুলুন এবং নিম্নলিখিত কোডটি অন্তর্ভুক্ত করুন:

 "use client"; import React, { useState, useEffect } from "react"; import { boughtStatus, cartIndex } from "../services/helpers"; import { Product } from "../interfaces/data"; export default function AddToCart({ category, id, title, subtitle, image, price, }: Product) { const storedCartItems = JSON.parse(localStorage.getItem("cartItems") || "[]"); const isPurchased = boughtStatus(storedCartItems, id); const indexInCart = cartIndex(storedCartItems, id); const [btnState, setBtnState] = useState(false); useEffect(() => { isPurchased && setBtnState(true); }, []); const handleButtonClick = () => { const updatedCartItems = [...storedCartItems]; if (!btnState && !isPurchased) { updatedCartItems.push({ category, id, title, subtitle, image, price }); } else if (isPurchased) { updatedCartItems.splice(indexInCart, 1); } localStorage.setItem("cartItems", JSON.stringify(updatedCartItems)); setBtnState(!btnState); }; return ( <button className={`${ !btnState ? "bg-blue-500 hover:bg-blue-600" : "bg-yellow-300 hover:bg-yellow-400" } py-2 px-8 rounded`} onClick={handleButtonClick} > {!btnState ? "Add to Cart" : "Remove from Cart"} </button> ); }

addToCart উপাদানটি পৃথক পণ্যের পূর্বরূপ পৃষ্ঠায় প্রদর্শিত হবে এবং ব্যবহারকারীকে শপিং কার্টে পণ্যটি যোগ করার অনুমতি দেবে।

রেন্ডারিং করার পরে, isPurchased ফাংশন সনাক্ত করবে যে পণ্যটি ইতিমধ্যে কার্টে যোগ করা হয়েছে কিনা। এটি রেন্ডার করা বোতাম না হলে, "কার্টে যোগ করুন" প্রদর্শন করবে অন্যথায় এটি "কার্ট থেকে সরান" বলবে।

handleButtonClick ফাংশন ক্লিক বৈশিষ্ট্যটি সেই অনুযায়ী উপরের অবস্থার উপর ভিত্তি করে আইটেম অ্যারে থেকে পণ্যটিকে যুক্ত বা সরিয়ে দেবে।

পেজ তৈরি করুন

অবশেষে, টিউটোরিয়ালের পূর্ববর্তী বিভাগে আমরা যে উপাদানগুলি তৈরি করেছি তা আমদানি করি এবং অ্যাপ্লিকেশনটির জন্য পৃষ্ঠা লজিক তৈরি করি।

হোম পেজ

app ডিরেক্টরিতে page.tsx খুলুন এবং এটির বিষয়বস্তু নিম্নরূপ সম্পাদনা করুন:

 import Image from "next/image"; import Header from "./components/Header"; import Text from "./components/Text"; import Footer from "./components/Footer"; import { getPages } from "./services/fetchData"; import { PageAPI } from "./interfaces/data"; export default async function Home() { const pages = await getPages(); const getValues = (el: PageAPI) => { const { herotitle, herodescription, heroimage } = el.attributeValues.en_US; return { title: herotitle.value[0].htmlValue, description: herodescription.value[0].htmlValue, image: heroimage.value[0].downloadLink, }; }; const pageContent = getValues(pages[0]); return ( <div className="flex flex-col min-h-screen"> <Header pages={pages} /> <div className="flex flex-row mx-auto max-w-screen-xl"> <div className="flex-1"> <Text className="text-6xl pb-10 text-gray-900" text={pageContent.title} /> <Text className="text-xl pb-8 text-gray-500 text-justify" text={pageContent.description} /> </div> <div className="flex-1 flex justify-end items-center"> <Image src={pageContent.image} alt="Photo by Karsten Winegeart on Unsplash" width={450} height={900} /> </div> </div> <Footer /> </div> ); }

হোম পেজে, হেডারের ডেটা পেতে আমরা প্রথমে getPages ফাংশনকে কল করব।

তারপর আমরা হিরো পৃষ্ঠার ডেটা আনতে getValues ফাংশন ব্যবহার করি এবং তারপরে সহজ প্রক্রিয়াকরণের জন্য সেগুলিকে pageContent অবজেক্টে পরিণত করি।

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

পণ্য পৃষ্ঠা

app ডিরেক্টরিতে এবং এর ভিতরে একটি নতুন ফোল্ডার [category] তৈরি করুন - একটি ফাইল page.tsx ।

নির্দিষ্ট ফাইলের নাম ব্যবহার করা গুরুত্বপূর্ণ কারণ এটিই নেক্সটজেএস রুটগুলি পরিচালনা করতে এবং URL প্যারামিটারগুলি অ্যাক্সেস করতে ব্যবহার করে।

page.tsx এ নিম্নলিখিত কোডটি অন্তর্ভুক্ত করুন:

 import Header from "../components/Header"; import Footer from "../components/Footer"; import Card from "../components/Card"; import { getPages, getProducts } from "../services/fetchData"; import { ProductAPI, URLProps } from "../interfaces/data"; export default async function Product({ params }: URLProps) { const { category } = params; const pages = await getPages(); const products = await getProducts(category); const getValues = (products: ProductAPI[]) => { return products.map((el) => { const { producttitle, productsubtitle, productdescription, productimage, productprice, } = el.attributeValues.en_US; return { id: el.id, category: category, title: producttitle.value[0].htmlValue, subtitle: productsubtitle.value[0].htmlValue, description: productdescription.value[0].htmlValue, image: productimage.value[0].downloadLink, price: productprice.value, }; }); }; const productItems = getValues(products.items); return ( <div className="flex flex-col min-h-screen"> <Header pages={pages} /> <div className="mx-auto max-w-screen-xl px-8"> <h2 className="text-4xl text-gray-900 mb-12"> Browse our {category} collection: </h2> <div className="grid gap-x-6 gap-y-10 grid-cols-4 mt-6"> {productItems.map((product) => { return <Card key={product.id} product={product} />; })} </div> </div> <Footer /> </div> ); }

পণ্যের পৃষ্ঠার জন্য, আমরা প্রথমে URL থেকে category প্যারামিটারটি পাই, যা আমরা getProducts ফাংশনে পাস করি, সাইটের কোন পৃষ্ঠাটি পরিদর্শন করা হয় তার উপর ভিত্তি করে আমাদের কোন শ্রেণীর পণ্য আনতে হবে তা বর্ণনা করতে।

একবার ডেটা প্রাপ্ত হয়ে গেলে, আমরা সহজ প্রক্রিয়াকরণের জন্য পৃষ্ঠার জন্য প্রয়োজনীয় সমস্ত গুণাবলী সমন্বিত বস্তুর productItems একটি অ্যারে তৈরি করি।

তারপর আমরা map পদ্ধতির মাধ্যমে এটি লুপ করি এবং component ফোল্ডার থেকে আমদানি করা কার্ড কম্পোনেন্টে প্রপস দিয়ে এটিকে স্ক্রিনে রেন্ডার করি।

পূর্বরূপ পৃষ্ঠা

[category] ফোল্ডারের ভিতরে, [productId] নামে আরেকটি ফোল্ডার তৈরি করুন।

সদ্য তৈরি ফোল্ডারটি খুলুন, এবং কোড সহ এর ভিতরে একটি ফাইল page.tsx তৈরি করুন:

 import Header from "../../components/Header"; import Preview from "../../components/Preview"; import AddToCart from "../../components/AddToCart"; import Footer from "../../components/Footer"; import { getPages, getProduct } from "../../services/fetchData"; import { ProductAPI, URLProps } from "../../interfaces/data"; export default async function Product({ params }: URLProps) { const { category, productId } = params; const pages = await getPages(); const product = await getProduct(productId); const getValues = (el: ProductAPI) => { const { producttitle, productsubtitle, productdescription, productimage, productprice, } = el.attributeValues.en_US; return { id: el.id, category: category, title: producttitle.value[0].htmlValue, subtitle: productsubtitle.value[0].htmlValue, description: productdescription.value[0].htmlValue, image: productimage.value[0].downloadLink, price: productprice.value, }; }; const productItem = getValues(product); return ( <div className="flex flex-col min-h-screen"> <Header pages={pages} /> <div className="flex mx-auto max-w-screen-xl"> <div className="flex-1 flex justify-start items-center"> <Preview productItem={productItem}> <AddToCart id={productId} category={category} title={productItem.title} subtitle={productItem.subtitle} description={productItem.description} image={productItem.image} price={productItem.price} /> </Preview> </div> </div> <Footer /> </div> ); }

এই পৃষ্ঠাটি ব্যবহারকারীদের পণ্য পৃষ্ঠায় তাদের কার্ডে ক্লিক করার পরে যেকোন পৃথক পণ্যের জন্য আরও বিশদ দেখতে অনুমতি দেবে।

আমরা প্রথমে URL থেকে productId প্যারামিটারটি পাই, যা আমরা পরবর্তীতে getProduct ফাংশনে পাস করি, প্রিভিউ পৃষ্ঠায় কোন পণ্যটি দেখা হবে তার ভিত্তিতে আমাদের কোন পণ্য আনতে হবে তা নির্দিষ্ট করতে।

একবার ডেটা প্রাপ্ত হয়ে গেলে, আমরা একটি অবজেক্ট productItem তৈরি করি যা প্রপস হিসাবে প্রিভিউ কম্পোনেন্টে পাস করার জন্য সমস্ত প্রয়োজনীয় গুণাবলী নিয়ে গঠিত।

আমরা category প্যারামিটারও পাই, যেহেতু আমাদের এটিকে অ্যাড টু কার্ট কম্পোনেন্টে পাস করতে হবে, তাই আমরা কার্ট পৃষ্ঠায় আইটেমের জন্য একটি বৈধ লিঙ্ক তৈরি করতে পারি।

কার্ট পাতা

অবশেষে, app ডিরেক্টরিতে একটি নতুন ফোল্ডার cart তৈরি করুন।

এটি খুলুন, নিম্নলিখিত কোড সহ একটি নতুন ফাইল page.tsx তৈরি করুন:

 import Header from "../components/Header"; import Order from "../components/Order"; import Footer from "../components/Footer"; import { getPages } from "../services/fetchData"; export default async function Cart() { const pages = await getPages(); return ( <div className="flex flex-col min-h-screen"> <Header pages={pages} /> <div className="container mx-auto max-w-screen-xl px-8"> <h2 className="text-4xl text-gray-900 mb-12">Shopping cart summary:</h2> <Order /> </div> <Footer /> </div> ); }

আমরা প্রথমে প্রয়োজনীয় ডেটা নিয়ে এসেছি এবং তারপর এটিকে প্রপস হিসাবে হেডারে পাস করেছি।

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

পরীক্ষামূলক

অভিনন্দন, আপনি একটি কাজের প্রকল্প তৈরি করেছেন!

প্রথমে, বিকাশকারী সার্ভারটি এখনও চলছে কিনা তা পরীক্ষা করুন। যদি তা না হয়, আবার শুরু করতে npm run dev কমান্ডটি চালান এবং এটি দেখতে localhost:3000 অ্যাক্সেস করুন।

আপনার প্রকল্প এখন এই মত হওয়া উচিত:

আপনি দেখতে পাচ্ছেন, হোম বিভাগের বিষয়বস্তু হোম অ্যাট্রিবিউট সেট থেকে সফলভাবে আনা হয়েছে যা আমরা ডেটা ক্ষেত্রে নির্দিষ্ট করেছি।

এছাড়াও, OneEntry CMS ক্যাটালগ থেকে সমস্ত আইটেম সঠিকভাবে রেন্ডার করা সমস্ত তথ্য সহ পোশাক এবং গিয়ার বিভাগে আনা হয়েছে।

নেক্সটজেএস রুট হ্যান্ডলিং এবং পণ্যের পরামিতিগুলির জন্য ধন্যবাদ ব্যবহারকারীরা প্রতিটি পণ্য আলাদাভাবে তার উত্সর্গীকৃত পৃষ্ঠায় পূর্বরূপ দেখতে পারেন।

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

উপসংহার

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

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

আশা করি, এটি আপনার জন্য উপযোগী হবে এবং আপনি কীভাবে OneEntry CMS ব্যাকএন্ড সমাধান হিসাবে ব্যবহার করবেন, কীভাবে এটি আপনার অ্যাপ্লিকেশনের সামনের প্রান্তের সাথে যুক্ত করবেন এবং NextJS, Typescript, এবং Tailwind-এর সেরা বৈশিষ্ট্যগুলি কীভাবে ব্যবহার করবেন সে সম্পর্কে একটি অন্তর্দৃষ্টি পাবেন। .

আমার নিউজলেটারে সাবস্ক্রাইব করে আমি আবিষ্কার করি সেরা সম্পদ, সরঞ্জাম, উত্পাদনশীলতা টিপস এবং ক্যারিয়ার বৃদ্ধির টিপস পাওয়ার বিষয়টি নিশ্চিত করুন!

এছাড়াও, Twitter , LinkedIn , এবং GitHub- এ আমার সাথে সংযোগ করুন!

এছাড়াও এখানে প্রকাশিত