البدء مع Laravel UI: إنشاء الواجهة الأمامية لتطبيقات Laravel الحديثة

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

تُعد Laravel UI طريقة بسيطة ومريحة لإنشاء سريع لأطر عمل الواجهة الأمامية الشائعة (Bootstrap، Vue، React)، والأهم من ذلك، قوالب المصادقة الجاهزة (تسجيل الدخول، التسجيل، إعادة تعيين كلمة المرور) لتطبيقات Laravel الخاصة بك. إنها مثالية لأولئك الذين يرغبون في بداية سريعة باستخدام مكدسات الواجهة الأمامية التقليدية دون التعقيد الإضافي للحلول مثل Laravel Breeze أو Jetstream.

ما هو Laravel UI؟ #

Laravel UI هي حزمة Composer توفر واجهة برمجة تطبيقات بسيطة لإنشاء قوالب أساسية للواجهة الأمامية. تتيح لك دمج أطر عمل الواجهة الأمامية الشائعة وعروض ومسارات المصادقة الأساسية في مشروع Laravel الخاص بك باستخدام بضعة أوامر Artisan فقط. هذا يعني أنه يمكنك الحصول على نظام تسجيل دخول/تسجيل يعمل بكامل طاقته وموضوع واجهة أمامية أساسي جاهز للعمل في دقائق.

لمحة تاريخية موجزة #

قبل Laravel 6.0، كان الأمر php artisan make:auth عنصرًا أساسيًا للعديد من المطورين، حيث كان يولد جميع العروض ووحدات التحكم والمسارات اللازمة للمصادقة. لمنح المطورين مزيدًا من الحرية والحفاظ على الإطار الأساسي خفيفًا، قرر Taylor Otwell (مؤسس Laravel) نقل هذه الوظيفة من القلب إلى حزمة مخصصة. أدت هذه الخطوة إلى ظهور Laravel UI، مما يضمن أن المطورين الذين ما زالوا يفضلون هذا النهج التقليدي يمكنهم إضافته بسهولة إلى مشاريعهم.

التثبيت #

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

composer require laravel/ui

بمجرد تثبيت الحزمة، ستتمكن من الوصول إلى أوامر php artisan ui جديدة.

إنشاء الواجهة الأمامية الأساسية #

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

لديك ثلاثة خيارات رئيسية:

1. Bootstrap #

لإنشاء قوالب Bootstrap والاعتمادات المتعلقة بها بـ JavaScript، قم بتشغيل:

php artisan ui bootstrap

2. Vue.js #

لإنشاء قوالب مكونات Vue.js والملفات ذات الصلة، قم بتشغيل:

php artisan ui vue

3. React.js #

لإنشاء قوالب مكونات React.js والملفات ذات الصلة، قم بتشغيل:

php artisan ui react

بعد تشغيل أي من هذه الأوامر، ستحتاج إلى تثبيت اعتمادات Node.js وتجميع أصولك. تستخدم Laravel UI أداة Laravel Mix (المبنية على Webpack) لتجميع الأصول. لذا، قم بتشغيل الأوامر التالية:

npm install
npm run dev

• سيقوم npm install بتنزيل جميع اعتمادات الواجهة الأمامية (مثل Bootstrap، Vue، React، Axios، Lodash، إلخ) المحددة في ملف package.json الخاص بك.
• سيقوم npm run dev بتجميع ملفات JavaScript و SASS/CSS الخاصة بك في الدلائل public/js و public/css على التوالي، لتكون جاهزة لاستخدام تطبيقك.

إذا كنت ترغب في إعادة تجميع الأصول تلقائيًا عند تغيير الملفات أثناء التطوير، فاستخدم npm run watch.

إضافة قوالب المصادقة (Authentication) #

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

لتضمين قوالب المصادقة، ما عليك سوى إضافة العلامة --auth إلى أمر إطار عمل الواجهة الأمامية الذي اخترته:

1. Bootstrap مع المصادقة #

php artisan ui bootstrap --auth

2. Vue.js مع المصادقة #

php artisan ui vue --auth

3. React.js مع المصادقة #

php artisan ui react --auth

بعد تشغيل الأمر، تذكر تثبيت اعتمادات Node.js وتجميع الأصول:

npm install
npm run dev

أخيرًا، إذا كان هذا تثبيتًا جديدًا لـ Laravel، فقد تحتاج إلى تشغيل ترحيلات قاعدة البيانات لإنشاء جدول users والجداول الافتراضية الأخرى إذا لم تكن قد قمت بذلك بالفعل:

php artisan migrate

الآن، إذا قمت بزيارة /login أو /register في متصفحك، يجب أن ترى نماذج المصادقة التي تم إنشاؤها حديثًا. تضيف Laravel UI تلقائيًا Auth::routes() إلى ملف routes/web.php الخاص بك، والذي يسجل جميع مسارات المصادقة الضرورية.

ما الذي يجلبه Laravel UI #

عند تشغيل أمر php artisan ui <framework> --auth، تقوم Laravel UI بالعديد من الإجراءات:

1. العروض (Views): تنشئ عروضًا لتسجيل الدخول والتسجيل وإعادة تعيين كلمة المرور، وملف home.blade.php أساسي في resources/views/auth/ و resources/views/home.blade.php. كما تنشئ ملف تخطيط رئيسي resources/views/layouts/app.blade.php.
2. الأصول (Assets): تُعد ملفات JavaScript أساسية (resources/js/app.js، bootstrap.js) وملفات SASS (resources/sass/app.scss) مصممة خصيصًا لإطار العمل الذي اخترته.
3. package.json: تضيف اعتمادات npm الضرورية لإطار العمل الذي اخترته (مثل bootstrap، vue، react، react-dom).
4. webpack.mix.js: تُحدث إعدادات Laravel Mix الخاصة بك لتجميع ملفات SASS و JavaScript.
5. المسارات (Routes): تضيف Auth::routes() إلى routes/web.php ومسارًا منزليًا افتراضيًا /home (يشير إلى HomeController@index).
6. وحدات التحكم (Controllers): قد تنشئ HomeController إذا لم تكن موجودة، والتي تُستخدم للمسار /home الافتراضي بعد تسجيل الدخول.

التخصيص والخطوات التالية #

جمال Laravel UI يكمن في أنها توفر نقطة بداية قوية قابلة للتخصيص بالكامل. جميع العروض التي تم إنشاؤها هي قوالب Blade قياسية، وملفات JavaScript/SASS هي أصول واجهة أمامية عادية. يمكنك تعديلها بالقدر الذي تحتاجه لتناسب متطلبات تصميم تطبيقك ووظيفته.

على سبيل المثال، لتغيير تصميم صفحة تسجيل الدخول، ستقوم ببساطة بتحرير resources/views/auth/login.blade.php.

Laravel UI مقابل Laravel Breeze/Jetstream #

من الجدير بالذكر أن Laravel قد طورت خياراتها لإنشاء الواجهة الأمامية. بينما لا تزال Laravel UI مدعومة بالكامل وتستخدم على نطاق واسع، تقدم بدائل أحدث مثل Laravel Breeze و Laravel Jetstream مجموعات بداية أكثر حداثة وغنية بالميزات.

• Laravel UI: بسيطة، خفيفة الوزن، تستخدم قوالب Blade التقليدية مع Bootstrap، Vue، أو React. مثالية للإعدادات السريعة والمشاريع التي تريد فيها الحد الأدنى من قوالب الواجهة الأمامية.
• Laravel Breeze: مجموعة بداية أكثر قوة بقليل تستخدم Blade أو Inertia.js مع Vue/React، وبشكل اختياري Livewire. إنها خيار رائع لإنشاء تطبيقات أحادية الصفحة (SPA) حديثة مع الحفاظ على الأشياء بسيطة نسبيًا.
• Laravel Jetstream: مجموعة بداية تطبيق شاملة تتضمن ميزات مثل المصادقة الثنائية، ودعم API عبر Laravel Sanctum، وإدارة الفريق، وإدارة الملفات الشخصية. تستخدم Livewire مع Blade أو Inertia.js مع Vue/React.

اختر Laravel UI إذا كنت تفضل بساطة الإعدادات التقليدية وتريد تحكمًا مباشرًا في دمج Bootstrap أو Vue أو React الأساسي دون طبقات إضافية.

الخاتمة #

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