من نحن؟

 

✍️ مقدمة:

هل تساءلت يومًا كيف تتيح لمستخدمي موقعك اختيار الألوان والخطوط وتخصيص تجربة الواجهة حسب ذوقهم؟
في هذا المقال، نقدم فكرة غير تقليدية: بناء نظام تخصيص واجهة مستخدم ديناميكي بالكامل باستخدام Laravel وملفات JSON لتخزين التفضيلات.

الميزة؟
يمكنك تقديم واجهة شخصية لكل مستخدم، دون إعادة تحميل CSS أو تعديل ملفات.

🎯 ما سنتعلمه اليوم:

• كيف تحفظ إعدادات التخصيص (Theme) في قاعدة البيانات باستخدام JSON

• كيف تطبق هذه التخصيصات ديناميكيًا في الواجهة

• كيف تجعل النظام سهل التوسعة لاحقًا

🧱 الخطوة 1: إعداد قاعدة البيانات

أولاً، نحتاج جدولًا لحفظ إعدادات المستخدمين.

php artisan make:migration add_theme_to_users_table --table=users

ثم أضف في ملف الهجرة:

$table->json('theme')->nullable();

قم بتشغيل الهجرة:

php artisan migrate

🛠️ الخطوة 2: إعداد الواجهة لحفظ التخصيص

يمكنك حفظ إعدادات الواجهة مثل:

• اللون الأساسي

• لون الخلفية

• نوع الخط

• حجم النص

مثال: إعدادات JSON

{
  "primary_color": "#3490dc",
  "background_color": "#f8fafc",
  "font": "Cairo",
  "text_size": "16px"
}

🧩 الخطوة 3: نموذج لحفظ التخصيص

public function updateTheme(Request $request)
{
    $validated = $request->validate([
        'primary_color' => 'required|string',
        'background_color' => 'required|string',
        'font' => 'required|string',
        'text_size' => 'required|string',
    ]);

    $theme = json_encode($validated);

    auth()->user()->update(['theme' => $theme]);

    return back()->with('status', 'تم حفظ التخصيص!');
}

🎨 الخطوة 4: تطبيق التخصيص في الواجهة

في ملف Blade الأساسي:

@php
$theme = json_decode(Auth::user()->theme ?? '{}');
@endphp

<style>
    body {
        background-color: {{ $theme->background_color ?? '#ffffff' }};
        font-family: {{ $theme->font ?? 'Arial' }};
        font-size: {{ $theme->text_size ?? '14px' }};
    }

    .btn-primary {
        background-color: {{ $theme->primary_color ?? '#007bff' }};
    }
</style>

📌 نصائح مهمة:

(النصيحة)◄	(الفائدة)
(استخدم JSON بدلاً من أعمدة متعددة)◄	(يجعل النظام أكثر مرونة وسهولة في التوسعة)
(أضف خيار "إعادة الإعدادات الافتراضية")◄	(لتحسين تجربة المستخدم)
(لا تعتمد على الجافاسكربت فقط)◄	(اجعل كل شيء يعمل حتى بدون JS)

🔄 أفكار للتوسعة لاحقًا:

• دعم الوضع الليلي والنهاري

• تخصيص التخطيط (Layout) الكامل

• السماح بحفظ أكثر من إعداد Theme

• إضافة معاينة حية للتخصيص قبل الحفظ

✅ الخلاصة:

بناء نظام تخصيص واجهة المستخدم باستخدام JSON وLaravel يمنح تطبيقك طابعًا احترافيًا وشخصيًا.
المستخدمون يحبون التحكم في تجربتهم، وأنت تمنحهم ذلك بطريقة آمنة وذكية وسهلة الصيانة.