يعد Livewire واحدًا من أهم المشاريع في نظام Laravel البيئي الذي يستهدف بشكل خاص تطوير الواجهة الأمامية. لقد تم إصدار Livewire v3 مؤخرًا، لذا دعونا نستكشف ما هو Livewire، ونوع المشاريع التي تناسب بنيته.

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

باستخدام Livewire، من الممكن تطوير مكونات Blade التي توفر مستوى من التفاعل مساوٍ لذلك الذي تقدمه Vue أو React، دون الحاجة إلى إدارة تعقيد المشروع بواجهة أمامية وخلفية منفصلة. يمكنك الاستمرار في تطوير تطبيقك ضمن حدود قوالب Laravel وBlade.

كيف يعمل لايف واير

Livewire عبارة عن حزمة Composer يمكنك إضافتها إلى مشروع Laravel. يجب بعد ذلك تنشيطه على كل صفحة HTML (أو الصفحة، في حالة رغبتك في إنشاء تطبيق صفحة واحدة) باستخدام توجيهات Blade المناسبة. تتكون مكونات Livewire من فئة PHP وملف Blade الذي يحتوي على منطق كيفية عمل مكون واجهة أمامية محدد ويجب عرضه.

عندما يطلب المتصفح الوصول إلى صفحة يتم فيها استخدام Livewire، يحدث ما يلي:

• يتم عرض الصفحة بالحالات الأولية للمكون، مثل أي صفحة تم إنشاؤها باستخدام Blade؛
• عندما تقوم واجهة مستخدم المكون بإطلاق تفاعل، يتم إجراء استدعاء AJAX إلى المسار المناسب للإشارة إلى مكون Livewire والتفاعل الذي حدث، بالإضافة إلى حالة المكون؛
• تتم معالجة البيانات في جزء PHP من المكون، الذي يقوم بالعرض الجديد نتيجة للتفاعل ويرسلها مرة أخرى إلى المتصفح؛
• يتم تغيير DOM الخاص بالصفحة وفقًا للتغييرات الواردة من الخادم.

إنه مشابه جدًا لما يفعله Vue وReact، ولكن في هذه الحالة تتم إدارة منطق التفاعل للرد على التفاعل من خلال الواجهة الخلفية وليس في جانب جافا سكريبت.

لمساعدتك على فهم المنطق بشكل أفضل، سأعرض لك مثالاً على هذه المقارنة أدناه.

إذا كنت تريد معرفة المزيد حول تحديات بناء شركة يقودها المطورون، يمكنك متابعتي على Linkedin أو X.

كيفية تثبيت لارافيل لايف واير

يعد تثبيت Livewire ضئيلًا للغاية. قم بتثبيت حزمة Composer في مشروع Laravel الخاص بك وأضف توجيهات Blade اللازمة إلى جميع الصفحات (أو إلى التخطيط المشترك الذي تشتق منه جميع قوالب Blade في المشروع).

composer require livewire/livewire

    ...

    @livewireStyles


    ...

    @livewireScripts

كيفية إنشاء مكون Laravel Livewire

بمجرد تثبيت حزمة Composer، يتوفر أمر فرعي جديد لـ Artisan make لإنشاء مكون Livewire جديد. سيتم إنشاء كل مكون باستخدام فئة PHP وعرض Blade.

إنه مشابه للمكونات المستندة إلى الفصل في Blade.

php artisan make:livewire SpyInput    
COMPONENT CREATED ?

CLASS: app/Http/Livewire/SpyInput.php
VIEW: resources/views/livewire/spy-input.blade.php

سيقوم المكون في هذا المثال "بالتجسس" على ما هو مكتوب في حقل إدخال HTML، دون الحاجة إلى كتابة تعليمات برمجية JavaScript.

نقوم بعد ذلك بإدراج خاصية عامة لفئة المكون:

// app/Http/Livewire/SpyInput.php

namespace App\Livewire;

use Livewire\Component;

class SpyInput extends Component
{
    public string $message;

    public function render()
    {
        return view('livewire.spy-input');
    }
}

تنفيذ عرض المكون كما يلي:

// resources/views/livewire/spy-input.blade.php


    Type here:
    You typed: {{ $message }}

وأخيرًا ضع مكون Livewire في عرض النصل:

    @livewireStyles



    

    @livewireScripts

في مكون النصل العادي، تكون جميع الخصائص العامة لفئة المكون مرئية في قالب النصل. لذلك في {{ $message }} سيتم عرض قيمة الخاصية $message تلقائيًا. ومع ذلك، في المكون العادي المعتمد على الفئة، يحدث هذا فقط عند عرض المكون الأول. إذا كتبت شيئًا ما في حقل الإدخال فلن يتغير شيء في علامة الامتداد.

ومع ذلك، في مكون Livewire، استخدمنا السمة wire:model = "message" في الحقل. تضمن هذه السمة أن قيمة حقل الإدخال مرتبطة بخاصية $message في فئة PHP. عندما تكتب القيمة الجديدة في حقل الإدخال، يتم إرسالها إلى الخادم، الذي يقوم بتحديث قيمة الرسالة $ وإجراء عرض جديد، وإرسالها مرة أخرى إلى الواجهة الأمامية التي تقوم بعد ذلك بتحديث النص في {{ $ الرسالة }}.

من خلال فتح علامة التبويب "الشبكة" في أدوات تطوير المتصفح، سنلاحظ أنه عند كل ضغطة على مفتاح على لوحة المفاتيح يتم إجراء اتصال بالخادم على المسار أدناه:

/livewire/message/

تحتوي الاستجابة لكل استدعاء على ملف HTML الجديد للمكون، والذي سيقوم Livewire بإدراجه في الصفحة بدلاً من القديم. تتوفر سمات الأسلاك المخصصة المختلفة. على سبيل المثال، يمكنك تنفيذ طريقة عامة لفئة المكون عند النقر فوق الزر. وفيما يلي مثال على هذا المزايدة:

Click Here

class SpyInput extends Component
{
    public function doSomething()
    {
        // Your code here…
    }
}

حيث doSomething هي طريقة عامة لفئة PHP لمكون Livewire.

التكامل مع ميزات Laravel الأخرى

تتصرف فئة PHP المتصلة بالمكون مثل أي فئة PHP أخرى في مشروع Laravel. والفرق الوحيد هو أنه يستخدم طريقة التحميل بدلاً من مُنشئ الفئة __construct الكلاسيكي لتهيئة الخصائص العامة للفئة.

{{-- Initial assignment of the the $book property in the ShowBook class --}}


class ShowBook extends Component
{
    public $title;
    public $excerpt;

    // "mount" instead of "__constuct"
    public function mount(Book $book = null)
    {
        $this->title = $book->title;
        $this->excerpt = $book->excerpt;
    }
}

يمكنك أيضًا استخدام قواعد الخاصية المحمية $ لتكوين قيود التحقق من الصحة على البيانات المرسلة من الواجهة الأمامية إلى الواجهة الخلفية. يجب عليك استدعاء طريقة التحقق من الصحة () للتحقق من صحة البيانات:

class BookForm extends Component
{
    public $title;
    public $excerpt;
    public $isbn;

    protected $rules = [
        'title' => ['required', 'max:200'],
        'isbn' => ['required', 'unique:books', 'size:17'],
        'excerpt' => 'max:500'
    ];

    public function saveBook()
    {
        $validated = $this->validate($this->rules);

        Book::create($validated);

        return redirect()->to('/books);
    }
}

أو يمكنك استخدام سمات PHP للإعلان عن قواعد التحقق المطلوبة لخاصية فئة:

class BookForm extends Component
{
    #[Validate('required|max:200')]
    public $title;

    #[Validate('required|unique:books|size:17')]
    public $isbn;

    #[Validate('max:500')]
    public $excerpt;

    public function saveBook()
    {
        $this->validate();

        Book::create([
            'title' => $this->title,
            'isbn' => $this->isbn,
            'excerpt' => $this->excerpt,
        ]);

        return redirect()->to('/books);
    }
}

بشكل عام، يتصرف كل مكون من مكونات Livewire بالطرق التي يتوقعها مطور Laravel من فئة PHP داخل مشروع Laravel. وبالتالي السماح بإنشاء واجهات ويب تفاعلية دون الحاجة إلى فصل مشاريع التطوير بين Laravel وVue/React.

راقب تطبيق Laravel الخاص بك مجانًا

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

إذا كنت تبحث عن مراقبة HTTP، ورؤى استعلام قاعدة البيانات، والقدرة على إعادة توجيه التنبيهات والإشعارات إلى بيئة المراسلة المفضلة لديك، فجرّب Inspector مجانًا. سجل حسابك.

أو تعرف على المزيد على الموقع: https://inspector.dev