Livewire لـ PHP: الدليل الشامل

1. ما هو Livewire ولماذا نستخدمه؟

Livewire هي مكتبة متكاملة لإطار Laravel، تتيح لك إنشاء واجهات مستخدم ديناميكية وتفاعلية دون الحاجة لكتابة أي كود JavaScript. تعمل هذه المكتبة من جانب الخادم، وتستخدم Alpine.js لتحديث DOM، بينما يبقى كل المنطق في PHP. إنها الأداة المثالية للمطورين الذين يرغبون في بناء تطبيقات ويب تفاعلية بسرعة، دون التعمق في أطر العمل الأمامية المعقدة.

الهدف الأساسي لـ Livewire هو تبسيط تطوير واجهات الويب الحديثة، مع الحفاظ على نهج Laravel المألوف. أنت تكتب المكونات (Components) بلغة PHP، وتقوم Livewire تلقائياً بمعالجة طلبات AJAX، وتحديث DOM، وإدارة الحالة. هذا مفيد بشكل خاص للنماذج، لوحات التحكم، غرف الدردشة، وأي عناصر تفاعلية أخرى.

تحل المكتبة مشكلة تكرار الكود بين الواجهة الأمامية والخلفية، مما يسمح للمطورين بالتركيز على منطق التطبيق بدلاً من إعداد WebSocket أو مكتبات JavaScript المعقدة. Livewire مثالية للمشاريع التي تهم فيها سرعة التطوير وسهولة الصيانة.

2. التثبيت

لتثبيت Livewire، استخدم Composer - مدير الحزم القياسي لـ PHP. نفّذ الأمر التالي في المجلد الرئيسي لمشروع Laravel الخاص بك:

composer require livewire/livewire

بعد التثبيت، ستقوم Livewire تلقائياً بتسجيل موفري الخدمات الخاصين بها. إذا كنت تستخدم Laravel 8 أو إصدار أحدث، فلا حاجة لتكوين إضافي. للإصدارات الأقدم، قد تحتاج إلى إضافة السطر التالي في ملف config/app.php:

'providers' => [
    // ...
    Livewire\LivewireServiceProvider::class,
];

تأكد أيضاً من تضمين أكواد CSS و JavaScript الخاصة بـ Livewire في القالب الخاص بك (عادةً layouts/app.blade.php):

@livewireStyles
</head>
<body>
    @livewireScripts
</body>

3. البداية السريعة - مثال عملي بسيط

لنقم بإنشاء مكون عداد بسيط. أولاً، نفّذ أمر artisan التالي:

php artisan make:livewire counter

سيؤدي هذا إلى إنشاء ملفين: app/Http/Livewire/Counter.php و resources/views/livewire/counter.blade.php. لنقم بتعديل كلاس PHP:

<?php
namespace App\Http\Livewire;
use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+1</button>
</div>

الآن، قم بإدراج المكون في أي صفحة Blade:

<livewire:counter />

تم! عند الضغط على الزر، سيزداد العداد دون إعادة تحميل الصفحة.

4. الدوال / الوظائف / الكلاسات الأساسية

4.1. render()

التوقيع: public function render(): View

الوصف: دالة إلزامية تقوم بإرجاع قالب Blade الخاص بالمكون. يتم استدعاؤها في كل مرة يتم فيها عرض المكون.

public function render()
{
    return view('livewire.my-component', ['data' => $this->getData()]);
}

4.2. mount()

التوقيع: public function mount(...$params): void

الوصف: تشبه دالة البناء (Constructor)، يتم استدعاؤها مرة واحدة عند أول عرض للمكون. تُستخدم لتهيئة الخصائص.

public $userId;
public $user;

public function mount($userId)
{
    $this->userId = $userId;
    $this->user = User::find($userId);
}