لقد قمت مؤخرًا بنشر مقطع فيديو على X حيث قمت بإعداد مشروع Laravel React مع المصادقة وصفحة ملف تعريف المستخدم في أقل من دقيقة! أعتقد أنه سيكون من المفيد مشاركة نسخة مكتوبة لأي شخص يفضل المتابعة بالإضافة إلى دليل تفصيلي.

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

لماذا لارافيل؟

Laravel هو إطار عمل PHP شائع يستخدم لبناء تطبيقات الويب الحديثة. إنها تكتسب زخمًا سريعًا، في الواقع، في سبتمبر 2024، أعلنت Accel عن استثمار بقيمة 57 مليون دولار في Laravel.

وفقًا للموقع الرسمي، فإن Laravel هو "إطار عمل PHP لحرفيي الويب"، وهو يرقى حقًا إلى هذا الوصف.

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

إعداد المشروع

مكدس التكنولوجيا

سنستخدم:

• Laravel (لواجهات برمجة التطبيقات الخلفية)

• SQLite وهي قاعدة البيانات الافتراضية لمشاريع Laravel (على الرغم من أنه يمكنك التبديل إلى قاعدة بيانات أخرى بسهولة)

• التفاعل للواجهة الأمامية (باستخدام Inertia.js)

• Laravel Breeze للتعامل مع المصادقة وإدارة المستخدم

متطلبات

لمتابعة هذا الدليل، تأكد من أن لديك:

• PHP 8 (يفضل 8.3)

• الملحن

• Node.js (الإصدار 21)

مستعد؟ هيا بنا نبدأ!

الخطوة 1: إنشاء مشروع Laravel جديد

أولاً، استخدم Composer لإنشاء مشروع Laravel جديد:

composer create-project laravel/laravel laravel-project

سيؤدي هذا إلى إنشاء دليل جديد باستخدام إعداد Laravel الافتراضي. انتقل إلى دليل المشروع وقم بخدمة التطبيق:

cd laravel-project
php artisan serve

إذا قمت بزيارة http://localhost:8000، فسترى صفحة الترحيب بـ Laravel.

تهانينا، لقد أنشأت مشروعك الأول في Laravel! ✅

افتراضيًا، يستخدم Laravel قاعدة بيانات SQLite، والتي تم إعدادها لك بالفعل. يمكنك العثور على ملف قاعدة البيانات على قاعدة البيانات/database.sqlite.

الخطوة 2: تثبيت Laravel Breeze

بعد ذلك، سنضيف Laravel Breeze، والذي يوفر الحد الأدنى من تنفيذ المصادقة، بما في ذلك:

• تسجيل الدخول

• تسجيل

• إعادة تعيين كلمة المرور

• التحقق من البريد الإلكتروني

• تأكيد كلمة المرور

بالإضافة إلى ذلك، يتضمن Breeze صفحة ملف تعريف بسيطة حيث يمكن للمستخدمين تحديث معلوماتهم.

أضف حزمة Breeze عن طريق تشغيل:

composer require laravel/breeze --dev

الآن، قم بتثبيت Breeze في مشروعك:

php artisan breeze:install

أثناء التثبيت، سيطالبك Breeze ببعض الخيارات:

• اخترت React للواجهة الأمامية، ولكن هناك بعض البدائل:

  • شفرة
  • لايف واير
  • النظرة
  • واجهة برمجة التطبيقات فقط

• اختياريًا، يمكنك تمكين الوضع الداكن، العرض من جانب الخادم (SSR)، Typescript، وESLint .

• عند سؤالك عن إطار عمل الاختبار، يمكنك الاختيار بين Pest أو PHPUnit. سأستخدم Pest.

بمجرد اكتمال العملية، سيكون Breeze قد أضاف كل ما تحتاجه للمصادقة وإدارة المستخدم.

لقد تم الأمر! ?

الخطوة 3: قم بتشغيل التطبيق الخاص بك

الآن بعد أن تم إعداد Breeze، أصبح تطبيقك جاهزًا ويمكنك تشغيله مرة أخرى:

php artisan serve

تفضل بزيارة http://localhost:8000/register لإنشاء مستخدم جديد.

ستبدأ بلوحة تحكم فارغة ويمكنك الانتقال إلى صفحة ملفك الشخصي لتعديل تفاصيل المستخدم وتحديث كلمة المرور الخاصة بك.

البيانات مخزنة بالفعل في قاعدة بيانات SQLite الخاصة بك، وتطبيقك جاهز للنشر!

خاتمة

باتباع هذه الخطوات، تكون قد نجحت في تمهيد تطبيق ويب متكامل باستخدام Laravel وReact، مع استكمال المصادقة ونظام إدارة ملف تعريف المستخدم.

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