پروژه فروشگاه اینترنتی با جاوااسکریپت - بخش اول: دیتابیس محصولات

🎯 اهداف یادگیری

• آشنایی با ساختار دیتابیس محصولات در جاوااسکریپت
• یادگیری ایجاد و مدیریت آرایه‌های پیچیده
• پیاده‌سازی توابع CRUD برای محصولات
• استفاده از localStorage برای ذخیره داده‌ها

📌 ساختار دیتابیس محصولات

برای شروع، یک آرایه از محصولات با ویژگی‌های مختلف تعریف می‌کنیم:

// آرایه محصولات فروشگاه
const products = [
    {
        id: 1,
        name: "لپ تاپ ایسوس ROG",
        price: 35000000,
        category: "لپ تاپ",
        image: "laptop.jpg",
        stock: 15,
        rating: 4.5
    },
    {
        id: 2,
        name: "گوشی سامسونگ S22",
        price: 25000000,
        category: "موبایل",
        image: "phone.jpg",
        stock: 30,
        rating: 4.8
    }
];

ویژگی‌های هر محصول:

• id: شناسه یکتا برای هر محصول
• name: نام محصول به فارسی
• price: قیمت به ریال
• category: دسته‌بندی محصول

📌 ذخیره و بازیابی داده‌ها با localStorage

برای ذخیره دائمی داده‌ها از localStorage استفاده می‌کنیم:

// ذخیره محصولات در localStorage
function saveProductsToLocalStorage(products) {
    localStorage.setItem('shop_products', JSON.stringify(products));
}
// بازیابی محصولات از localStorage
function getProductsFromLocalStorage() {
    const products = JSON.parse(localStorage.getItem('shop_products'));
    return products || [];
}

نکات مهم localStorage:

• محدودیت حجم: حدود 5MB برای هر دامنه
• ذخیره رشته‌ای: فقط می‌توان داده‌های رشته‌ای ذخیره کرد (استفاده از JSON)
• محدودیت دسترسی: فقط از طریق همان دامنه قابل دسترسی است

📌 پیاده‌سازی توابع CRUD

توابع اصلی برای مدیریت محصولات:

// افزودن محصول جدید
function addProduct(newProduct) {
    const products = getProductsFromLocalStorage();
    newProduct.id = Date.now();
    products.push(newProduct);
    saveProductsToLocalStorage(products);
    return newProduct;
}
// حذف محصول بر اساس شناسه
function deleteProduct(id) {
    let products = getProductsFromLocalStorage();
    products = products.filter(product => product.id !== id);
    saveProductsToLocalStorage(products);
}

توابع اصلی CRUD:

• Create (addProduct): افزودن محصول جدید
• Read (getProducts): دریافت لیست محصولات
• Update (updateProduct): ویرایش محصول موجود
• Delete (deleteProduct): حذف محصول

📌 جستجو و فیلتر محصولات

تابع جستجو در بین محصولات:

// جستجوی محصول بر اساس نام یا دسته‌بندی
function searchProducts(query) {
    const products = getProductsFromLocalStorage();
    return products.filter(product => {
        return product.name.includes(query) || product.category.includes(query);
    });
}

ویژگی‌های قابل جستجو:

• نام محصول: جستجو در عنوان محصولات
• دسته‌بندی: فیلتر بر اساس دسته‌بندی
• محدوده قیمت: فیلتر بر اساس کمترین و بیشترین قیمت
• امتیاز: فیلتر محصولات با امتیاز بالاتر از حد مشخص

📌 تمرین عملی

توابع زیر را برای پروژه فروشگاه تکمیل کنید:

// 1. تابع ویرایش محصول
function updateProduct(id, updatedData) {
    // کدهای شما
}
// 2. تابع فیلتر بر اساس محدوده قیمت
function filterByPriceRange(min, max) {
    // کدهای شما
}

راهنمای تمرین:

1. تابع updateProduct باید محصول را بر اساس id پیدا کرده و فیلدهای جدید را اعمال کند
2. تابع filterByPriceRange باید محصولات بین دو قیمت min و max را برگرداند
3. از متدهای آرایه مانند find و filter استفاده کنید
4. تغییرات را در localStorage ذخیره کنید

📌 قدم بعدی

در بخش بعدی با پیاده‌سازی سبد خرید و مدیریت سفارشات آشنا خواهیم شد!