برنامج تعليمي حول استخدام التخزين من جانب العميل في تطبيقات الويب

عند إنشاء تطبيقات الويب الحديثة، وخاصة تطبيقات الويب التقدمية (PWAs)، من الضروري أن يكون لديك طريقة لتخزين البيانات في وضع عدم الاتصال. IndexedDB هي قاعدة بيانات قوية من جانب العميل تسمح لتطبيقات الويب بتخزين البيانات واستردادها، حتى عندما يكون المستخدم غير متصل بالإنترنت. سيرشدك هذا الدليل عبر أساسيات IndexedDB، ويوضح لك كيفية إنشاء البيانات وقراءتها وتحديثها وحذفها (عمليات CRUD) داخل تطبيق الويب الخاص بك.

ما هو IndexedDB؟

IndexedDB عبارة عن واجهة برمجة تطبيقات منخفضة المستوى للتخزين من جانب العميل لكميات كبيرة من البيانات المنظمة، بما في ذلك الملفات والنقاط الكبيرة. على عكس localStorage، يسمح لك IndexedDB بتخزين أنواع البيانات المعقدة، وليس السلاسل فقط. ويستخدم نموذج قاعدة بيانات معاملات غير متزامن، مما يجعله قويًا للتطبيقات التي تحتاج إلى التعامل مع مجموعات البيانات الكبيرة أو مزامنة البيانات دون اتصال بالإنترنت.

لماذا نستخدم IndexedDB؟

• إمكانيات عدم الاتصال بالإنترنت: مثالية لتطبيقات الويب التقدمية (PWAs) والتطبيقات غير المتصلة بالإنترنت أولاً.
• سعة التخزين: يمكن لـ IndexedDB تخزين المزيد من البيانات مقارنة بالتخزين المحلي (الذي يقتصر على حوالي 5-10 ميغابايت).
• المرونة: قم بتخزين الكائنات المعقدة مثل المصفوفات والكائنات وحتى النقط.
• غير متزامن: لا تحظر العمليات سلسلة واجهة المستخدم، مما يعني أن تطبيقك يظل مستجيبًا.

الشروع في العمل: إعداد IndexedDB

دعنا نتعمق في الخطوات الأساسية للعمل مع IndexedDB. سوف نغطي:

• إنشاء أو فتح قاعدة بيانات
• إنشاء مخازن العناصر (الجداول)
• إضافة بيانات
• قراءة البيانات
• تحديث البيانات
• حذف البيانات

الخطوة 1: فتح قاعدة بيانات

للتفاعل مع IndexedDB، تحتاج أولاً إلى فتح اتصال بقاعدة البيانات. إذا لم تكن قاعدة البيانات موجودة، فسيتم إنشاؤها.

const request = indexedDB.open('MyCustomersDatabase', 1);

request.onerror = (event) => {
    console.error('Database error:', event.target.errorCode);
};

request.onsuccess = (event) => {
    const db = event.target.result;
    console.log('Database opened successfully', db);
};

request.onupgradeneeded = (event) => {
    const db = event.target.result;
    if (!db.objectStoreNames.contains('customers')) {
        const objectStore = db.createObjectStore('customers', { keyPath: 'id' });
        objectStore.createIndex('name', 'name', { unique: false });
        objectStore.createIndex('email', 'email', { unique: true });
        console.log('Object store created.');
    }
};

إليك ما يحدث:

• يفتح IndexedDB.open قاعدة البيانات أو ينشئها.
• يعالج onerror أي أخطاء عند فتح قاعدة البيانات.
• يتم تشغيل onsuccess عند فتح اتصال قاعدة البيانات بنجاح.
• يتم تشغيل onupgradeneeded عندما تحتاج قاعدة البيانات إلى الترقية (على سبيل المثال، إذا كانت هذه هي المرة الأولى التي تفتح فيها قاعدة البيانات أو إذا تغير الإصدار). إنه المكان الذي تحدد فيه مخازن العناصر الخاصة بك (فكر فيها كجداول في SQL).

الخطوة 2: إضافة البيانات إلى IndexedDB

الآن بعد أن قمنا بإعداد قاعدة البيانات ومخزن العناصر، فلنضيف بعض البيانات إليها.

const addCustomer = (db, customer) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.add(customer);

    request.onsuccess = () => {
        console.log('Customer added:', customer);
    };

    request.onerror = (event) => {
        console.error('Error adding customer:', event.target.errorCode);
    };
}

const customer = { id: 1, name: 'John Doe', email: '[email protected]' };

request.onsuccess = (event) => {
    const db = event.target.result;
    addCustomer(db, customer);
};

إليك ما يحدث:

• نقوم بإنشاء معاملة مع حق الوصول "للقراءة والكتابة" للسماح بالتعديلات.
• يتم استخدام طريقة add () لإدراج البيانات في مخزن الكائنات.
• نستمع إلى أحداث النجاح والخطأ للتأكد من إضافة البيانات بنجاح.

الخطوة 3: قراءة البيانات من IndexedDB

تعد قراءة البيانات من IndexedDB أمرًا سهلاً أيضًا. فلنسترجع العميل الذي أضفناه للتو باستخدام طريقة get().

const getCustomer = (db, id) => {
    const transaction = db.transaction(['customers'], 'readonly');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.get(id);

    request.onsuccess = (event) => {
        const customer = event.target.result;
        if (customer) {
            console.log('Customer found:', customer);
        } else {
            console.log('Customer not found.');
        }
    };

    request.onerror = (event) => {
        console.error('Error fetching customer:', event.target.errorCode);
    };
}

request.onsuccess = (event) => {
    const db = event.target.result;
    getCustomer(db, 1); // Fetch customer with ID 1
};

الخطوة 4: تحديث البيانات في IndexedDB

لتحديث سجل موجود، يمكننا استخدام طريقة put()، والتي تعمل بشكل مشابه لـ add() ولكنها تستبدل السجل إذا كان المفتاح موجودًا بالفعل.

const updateCustomer = (db, customer) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.put(customer);

    request.onsuccess = () => {
        console.log('Customer updated:', customer);
    };

    request.onerror = (event) => {
        console.error('Error updating customer:', event.target.errorCode);
    };
}

const updatedCustomer = { id: 1, name: 'Jane Doe', email: '[email protected]' };

request.onsuccess = (event) => {
    const db = event.target.result;
    updateCustomer(db, updatedCustomer);
};

الخطوة 5: حذف البيانات من IndexedDB

أخيرًا، لحذف سجل، استخدم طريقة الحذف ().

const deleteCustomer = (db, id) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.delete(id);

    request.onsuccess = () => {
        console.log('Customer deleted.');
    };

    request.onerror = (event) => {
        console.error('Error deleting customer:', event.target.errorCode);
    };
}

request.onsuccess = (event) => {
    const db = event.target.result;
    deleteCustomer(db, 1); // Delete customer with ID 1
};

خاتمة

يعد IndexedDB حلاً قويًا للتعامل مع تخزين البيانات من جانب العميل، خاصة في تطبيقات الويب غير المتصلة بالإنترنت. باتباع هذا الدليل، تعلمت كيفية:

• فتح وإنشاء قاعدة بيانات
• إنشاء مخازن العناصر
• إضافة البيانات وقراءتها وتحديثها وحذفها

باستخدام IndexedDB، يمكنك إنشاء تطبيقات ويب أكثر مرونة تقوم بتخزين البيانات محليًا وتعمل حتى بدون الاتصال بالإنترنت.

مراجع:

1. MDN Web Docs - IndexedDB API
   
   دليل شامل حول كيفية عمل IndexedDB وطرق واجهة برمجة التطبيقات (API) الخاصة به وحالات الاستخدام.
   
   دليل MDN IndexedDB

2. مطورو Google - IndexedDB
   
   مقالة مفصلة تغطي أفضل الممارسات واستخدام IndexedDB لإنشاء تطبيقات ويب غير متصلة بالإنترنت.
   
   مطورو جوجل - IndexedDB

3. واجهة برمجة تطبيقات قاعدة البيانات المفهرسة W3C
   
   المواصفات الرسمية من W3C توضح التنفيذ الفني وهيكل IndexedDB.
   
   مواصفات W3C IndexedDB

ستوفر هذه الموارد عمقًا وسياقًا إضافيًا إذا كنت تتطلع إلى استكشاف المزيد حول IndexedDB خارج هذا البرنامج التعليمي!

تعليمات سعيدة!