الفرق بين المراجعتين ل"Laravel/frontend"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
 
(4 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE: بناء Javascript و CSS }}</noinclude>
 
<noinclude>{{DISPLAYTITLE: بناء Javascript و CSS }}</noinclude>
 
 
== مقدمة ==
 
== مقدمة ==
لا يفرض Laravel عليك استخدام أي معالج [[JavaScript]] و [[CSS]]، إلّا إنّه يوفّر نقطة انطلاق بسيطة باستخدام [[Bootstrap]] و [[Vue]] ممّا سيساعد العديد من التطبيقات. بصفة عامّة، يستخدم Laravel أوامر [[npm]] لتنصيب حزم الواجهات الأمامية هذه.
+
لا يفرض [[Laravel]] عليك استخدام أي معالج [[JavaScript]] و [[CSS]]، إلّا إنّه يوفّر نقطة انطلاق بسيطة باستخدام [[Bootstrap]] و [[Vue]] ممّا سيساعد العديد من التطبيقات. بصفة عامّة، يستخدم Laravel أوامر [[npm]] لتنصيب حزم الواجهات الأمامية هذه.
  
 
=== CSS ===
 
=== CSS ===
يوفّر [[Laravel/mix|Laravel Mix]] واجهة برمجية (API) سهلة ومعبّرة لترجمة Sass أو Less، وهي إضافات للغة CSS الأساسية التي تضيف المتغيّرات والمخاليط (mixins) والعديد من الخصائص الأخرى التي تجعل العمل بلغة [[CSS]] أكثر متعة. في هذه الصفحة، سنناقش باختصار ترجمة [[CSS]] بصفة عامّة لكن يمكنك تفقّد توثيق [[Laravel/mix|Laravel Mix]] لمعلومات أدق حول Sass و Less.
+
يوفّر [[Laravel/mix|Laravel Mix]] واجهة برمجية (API) سهلة ومعبّرة لترجمة [[Sass]] أو Less، وهي إضافات للغة CSS الأساسية التي تضيف المتغيّرات والمخاليط (mixins) والعديد من الخصائص الأخرى التي تجعل العمل بلغة [[CSS]] أكثر متعة. في هذه الصفحة، سنناقش باختصار ترجمة [[CSS]] بصفة عامّة لكن يمكنك تفقّد توثيق [[Laravel/mix|Laravel Mix]] لمعلومات أدق حول [[Sass]] و Less.
  
 
=== JavaScript ===
 
=== JavaScript ===
لا يتطلب Laravel إطار [[JavaScript]] معيّن ليبني التطبيق. بل يمكنك ألّا تستعمل JavaScript على الإطلاق لكن Laravel يوفّر آليات أساسية للبناء لتسهيل بدء كتابة [[JavaScript]] عصرية باستعمال مكتبة [[Vue]]. يوفّر [[Vue]] واجهة برمجيّة (API) معبّرة لبناء تطبيقات [[JavaScript]] فعّالة باستعمال المكوّنات. كما ب [[CSS]]، يمكن استعمال [[Laravel/mix|Laravel Mix]] لترجمة مكوّنات [[JavaScript]] لملف [[JavaScript]] واحد جاهز للاستعمال من المتصفح.
+
لا يتطلب [[Laravel]] إطار [[JavaScript]] معيّن ليبني التطبيق. بل يمكنك ألّا تستعمل [[JavaScript]] على الإطلاق لكن Laravel يوفّر آليات أساسية للبناء لتسهيل بدء كتابة [[JavaScript]] عصرية باستعمال مكتبة [[Vue]]. يوفّر [[Vue]] واجهة برمجيّة (API) معبّرة لبناء تطبيقات [[JavaScript]] فعّالة باستعمال المكوّنات. كما ب [[CSS]]، يمكن استعمال [[Laravel/mix|Laravel Mix]] لترجمة مكوّنات [[JavaScript]] لملف [[JavaScript]] واحد جاهز للاستعمال من المتصفح.
 
حذف المكونات المساعدة لبناء الواجهات الرسومية
 
حذف المكونات المساعدة لبناء الواجهات الرسومية
إن أردت حذف بناءات الواجهات الأمامية من التطبيق، يمكنك ذلك عبر استعمال الأمر <syntaxhighlight lang="php">
+
إن أردت حذف بناءات الواجهات الأمامية من التطبيق، يمكنك ذلك عبر استعمال الأمر <code>preset</code>. هذا الأمر حين يضاف إليه الخيار <code>none</code>، سيحذف بناء [[Bootstrap]] و [[Vue]] ويبقي فقط على ملف [[Sass]] فارغ وبعض مكتبات خدمات [[JavaScript]] الشائعة: <syntaxhighlight lang="php">
preset
 
</syntaxhighlight>هذا الأمر حين يضاف إليه الخيار <code>none</code>، سيحذف بناء [[Bootstrap]] و [[Vue]] ويبقي فقط على ملف Sass فارغ وبعض مكتبات خدمات [[JavaScript]] الشائعة:<syntaxhighlight lang="php">
 
 
php artisan preset none
 
php artisan preset none
 
</syntaxhighlight>
 
</syntaxhighlight>
سطر 26: سطر 23:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
ملف <code>webpack.mix.js</code> المضَمّن مع Laravel سيترجم ملف Sass الموجود في <code>resources/assets/sass/app.scss</code>. هذا الملف <code>app.scss</code> سيستورد ملفًا من متغيّرات Sass وسيُحمّل [[Bootstrap]]، ممّا سيوفّر نقطة انطلاق جيدة لمعظم التطبيقات. لك حرية تخصيص الملف <code>app.scss</code> ليتناسب مع التطبيق، لكن إن أردت يمكنك استعمال معالج مسبق (pre-processor، مثل Less) مغاير بضبط [[Laravel/mix|Laravel Mix]].
+
ملف <code>webpack.mix.js</code> المضَمّن مع Laravel سيترجم ملف Sass الموجود في <code>resources/assets/sass/app.scss</code>. هذا الملف <code>app.scss</code> سيستورد ملفًا من متغيّرات [[Sass]] وسيُحمّل [[Bootstrap]]، ممّا سيوفّر نقطة انطلاق جيدة لمعظم التطبيقات. لك حرية تخصيص الملف <code>app.scss</code> ليتناسب مع التطبيق، لكن إن أردت يمكنك استعمال معالج مسبق (pre-processor، مثل Less) مغاير بضبط [[Laravel/mix|Laravel Mix]].
  
 
== كتابة JavaScript ==
 
== كتابة JavaScript ==
سطر 39: سطر 36:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
افتراضيًا، الملف webpack.mix.js سيترجم ملف Sass وملف resources/assets/js/app.js. في الملف app.js يمكنك تسجيل مكوّنات Vue، أو إن كنت تفضّل إطارًا آخر، يمكنك ضبط تطبيق JavaScript الخاص بك. توجد ملفات JavaScript المترجمة عادة في المجلد public/js.
+
افتراضيًا، الملف <code>webpack.mix.js</code> سيترجم ملف Sass وملف <code>resources/assets/js/app.js</code>. في الملف <code>app.js</code> يمكنك تسجيل مكوّنات [[Vue]]، أو إن كنت تفضّل إطارًا آخر، يمكنك ضبط تطبيق [[JavaScript]] الخاص بك. توجد ملفات [[JavaScript]] المترجمة عادة في المجلد <code>public/js</code>.
ملاحظة: الملف app.js سيُحمِّل resources/assets/js/bootstrap.js ممّا سيمهّد و يضبط Vue و Axios و jQuery و كل تبعيّات Javascript. بإمكانك القيام بهذا في هذا الملف.
 
  
=== كتابة مكوّنات Vue ===
+
ملاحظة: الملف <code>app.js</code> سيُحمِّل <code>resources/assets/js/bootstrap.js</code> ممّا سيمهّد و يضبط [[Vue]] و [[Axios]] و [[jQuery]] و كل تبعيّات [[JavaScript|Javascript]]. بإمكانك القيام بهذا في هذا الملف.
في العادة، تطبيقات Laravel الجديدة تحتوي على ملف ExampleComponent.vue لمكوّنات Vue في المجلد resources/assets/js/components. الملف ExampleComponent.vue مثال على مكوّن Vue في ملف واحد الذي يعرّف كل من JavaScript وقالب HTML في نفس الملف. يوفّر المكوّن في ملف واحد منهجيةً مريحة و ملائمة لبناء تطبيقات معتمدة على JavaScript. مثالٌ عن مكوّنٍ موجودٍ في الملف app.js:
+
 
 +
=== كتابة مكوّنات [[Vue]] ===
 +
في العادة، تطبيقات Laravel الجديدة تحتوي على ملف <code>ExampleComponent.vue</code> لمكوّنات [[Vue]] في المجلد <code>resources/assets/js/components</code>. الملف <code>ExampleComponent.vue</code> مثال على مكوّن [[Vue]] في ملف واحد الذي يعرّف كل من [[JavaScript]] وقالب [[HTML]] في نفس الملف. يوفّر المكوّن في ملف واحد منهجيةً مريحة و ملائمة لبناء تطبيقات معتمدة على [[JavaScript]]. مثالٌ عن مكوّنٍ موجودٍ في الملف <code>app.js</code>:
 
<syntaxhighlight lang="php">
 
<syntaxhighlight lang="php">
 
Vue.component(
 
Vue.component(
سطر 53: سطر 51:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
لاستخدام المكوّن في التطبيق، يمكن إضافته إلى أحد قوالب HTML. على سبيل المثال، بعد تنفيذ الأمر make:auth لبناء نظام تعريف و توثيق التطبيقة، يمكن إضافة المكوّن إلى قالب Blade في home.blade.php<syntaxhighlight lang="php">
+
لاستخدام المكوّن في التطبيق، يمكن إضافته إلى أحد قوالب [[HTML]]. على سبيل المثال، بعد تنفيذ الأمر <code>make:auth</code> لبناء نظام تعريف و توثيق التطبيقة، يمكن إضافة المكوّن إلى قالب [[Laravel/blade|Blade]] في <code>home.blade.php</code><syntaxhighlight lang="php">
 
@extends('layouts.app')
 
@extends('layouts.app')
  
سطر 63: سطر 61:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
ملاحظة: تذكر أنّه يجب إعادة تنفيذ الأمر npm run dev كلّما تغيّر مكوّن Vue. أو يمكن تنفيذ الأمر npm run watch لمراقبة وإعادة ترجمة المكوّن تلقائيًا كلما حصل تغيير.
+
ملاحظة: تذكر أنّه يجب إعادة تنفيذ الأمر <code>npm run dev</code> كلّما تغيّر مكوّن [[Vue]]. أو يمكن تنفيذ الأمر <code>npm run watch</code> لمراقبة وإعادة ترجمة المكوّن تلقائيًا كلما حصل تغيير.
  
إن كنت مهتمًا بمعرفة المزيد عن كتابة مكوّنات Vue، ممكن أن تقرأ توثيق Vue الذي يقدّم توثيقًا كاملًا سهل القراءة لإطار Vue.
+
إن كنت مهتمًا بمعرفة المزيد عن كتابة مكوّنات [[Vue]]، ممكن أن تقرأ توثيق [[Vue]] الذي يقدّم توثيقًا كاملًا سهل القراءة .
  
=== استخدام React ===
+
=== استخدام [[React]] ===
إن كنت تفضل استخدام React لبناء تطبيقات JavaScript، يوفر Laravel طريقة لتغيير بناء Vue Ygn بناء React. على تطبيق Laravel جديدة، يمكن استعمال الأمر preset مع الخيار react:<syntaxhighlight lang="php">
+
إن كنت تفضل استخدام [[React]] لبناء تطبيقات [[JavaScript]]، يوفر Laravel طريقة لتغيير بناء Vue Ygn لبناء [[React]]. على تطبيق Laravel جديدة، يمكن استعمال الأمر <code>preset</code> مع الخيار <code>react</code>:<syntaxhighlight lang="php">
 
php artisan preset react
 
php artisan preset react
 
</syntaxhighlight>
 
</syntaxhighlight>
سطر 74: سطر 72:
 
هذا الأمر سيحذف قوالب بناء Vue ويعوضها بقوالب بناء React، بما في ذلك مثال عن مكونٍ نموذجي.
 
هذا الأمر سيحذف قوالب بناء Vue ويعوضها بقوالب بناء React، بما في ذلك مثال عن مكونٍ نموذجي.
  
مصادر  
+
== مصادر ==
 
+
* [https://laravel.com/docs/5.6/frontend صفحة Frontend في توثيق Laravel الرسمي.]
[https://laravel.com/docs/5.6/frontend صفحة Frontend في توثيق Laravel الرسمي.]
+
[[تصنيف:Laravel|{{SUBPAGENAME}}]]
 +
[[تصنيف:Laravel Frontend|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 13:27، 23 أكتوبر 2018

مقدمة

لا يفرض Laravel عليك استخدام أي معالج JavaScript و CSS، إلّا إنّه يوفّر نقطة انطلاق بسيطة باستخدام Bootstrap و Vue ممّا سيساعد العديد من التطبيقات. بصفة عامّة، يستخدم Laravel أوامر npm لتنصيب حزم الواجهات الأمامية هذه.

CSS

يوفّر Laravel Mix واجهة برمجية (API) سهلة ومعبّرة لترجمة Sass أو Less، وهي إضافات للغة CSS الأساسية التي تضيف المتغيّرات والمخاليط (mixins) والعديد من الخصائص الأخرى التي تجعل العمل بلغة CSS أكثر متعة. في هذه الصفحة، سنناقش باختصار ترجمة CSS بصفة عامّة لكن يمكنك تفقّد توثيق Laravel Mix لمعلومات أدق حول Sass و Less.

JavaScript

لا يتطلب Laravel إطار JavaScript معيّن ليبني التطبيق. بل يمكنك ألّا تستعمل JavaScript على الإطلاق لكن Laravel يوفّر آليات أساسية للبناء لتسهيل بدء كتابة JavaScript عصرية باستعمال مكتبة Vue. يوفّر Vue واجهة برمجيّة (API) معبّرة لبناء تطبيقات JavaScript فعّالة باستعمال المكوّنات. كما ب CSS، يمكن استعمال Laravel Mix لترجمة مكوّنات JavaScript لملف JavaScript واحد جاهز للاستعمال من المتصفح. حذف المكونات المساعدة لبناء الواجهات الرسومية

إن أردت حذف بناءات الواجهات الأمامية من التطبيق، يمكنك ذلك عبر استعمال الأمر preset. هذا الأمر حين يضاف إليه الخيار none، سيحذف بناء Bootstrap و Vue ويبقي فقط على ملف Sass فارغ وبعض مكتبات خدمات JavaScript الشائعة:

php artisan preset none

كتابة CSS

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

قبل ترجمة شيفرات CSS، ثبّت الاعتماديات اللازمة للواجهة الأمامية للتطبيق باستعمال إدارة حزم Node‏ (NPM) ‏:

npm install

بعد أن تُثبَّت الاعتماديات باستعمال npm install، يمكن الآن ترجمة ملفّات Sass لملفات CSS عاديّة باستعمال Laravel Mix. سيعالج الأمر npm run dev التعليمات في ملف webpack.mix.js. في العادة، ملفات CSS المترجَمة توضع في مجلد public/css

 npm run dev

ملف webpack.mix.js المضَمّن مع Laravel سيترجم ملف Sass الموجود في resources/assets/sass/app.scss. هذا الملف app.scss سيستورد ملفًا من متغيّرات Sass وسيُحمّل Bootstrap، ممّا سيوفّر نقطة انطلاق جيدة لمعظم التطبيقات. لك حرية تخصيص الملف app.scss ليتناسب مع التطبيق، لكن إن أردت يمكنك استعمال معالج مسبق (pre-processor، مثل Less) مغاير بضبط Laravel Mix.

كتابة JavaScript

كل اعتماديات JavaScript التي يتطلّبها التطبيق موجودة في الملف package.json من الملف الرئيسي للتطبيق. هذا الملف شبيه بملف composer.json، غير أنّه يحدِّد اعتماديات JavaScript بدل اعتماديات PHP. يمكن تثبيت التبعيّات باستعمال إدارة حزم Node ‏(NPM):

npm install

ملاحظة: افتراضيًا، يتضمن ملف package.json بعض الحزم مثل vue و axios للمساعدة على بدء بناء تطبيقات JavaScript. لك حريّة إضافة أو حذف من package.json حسب حاجة التطبيق.

بعد تثبيت الحزم، يمكن استعمال الأمر npm run dev لترجمة الملفات. Webpack هو مجمّع وحدات لبناء تطبيقات JavaScript. عند تنفيذ الأمر npm run dev، ينفّذ Webpack التعليمات الموجودة في الملف webpack.mix.js

npm run dev

افتراضيًا، الملف webpack.mix.js سيترجم ملف Sass وملف resources/assets/js/app.js. في الملف app.js يمكنك تسجيل مكوّنات Vue، أو إن كنت تفضّل إطارًا آخر، يمكنك ضبط تطبيق JavaScript الخاص بك. توجد ملفات JavaScript المترجمة عادة في المجلد public/js.

ملاحظة: الملف app.js سيُحمِّل resources/assets/js/bootstrap.js ممّا سيمهّد و يضبط Vue و Axios و jQuery و كل تبعيّات Javascript. بإمكانك القيام بهذا في هذا الملف.

كتابة مكوّنات Vue

في العادة، تطبيقات Laravel الجديدة تحتوي على ملف ExampleComponent.vue لمكوّنات Vue في المجلد resources/assets/js/components. الملف ExampleComponent.vue مثال على مكوّن Vue في ملف واحد الذي يعرّف كل من JavaScript وقالب HTML في نفس الملف. يوفّر المكوّن في ملف واحد منهجيةً مريحة و ملائمة لبناء تطبيقات معتمدة على JavaScript. مثالٌ عن مكوّنٍ موجودٍ في الملف app.js:

Vue.component(

   'example-component',
   require('./components/ExampleComponent.vue')

);

لاستخدام المكوّن في التطبيق، يمكن إضافته إلى أحد قوالب HTML. على سبيل المثال، بعد تنفيذ الأمر make:auth لبناء نظام تعريف و توثيق التطبيقة، يمكن إضافة المكوّن إلى قالب Blade في home.blade.php

@extends('layouts.app')

@section('content')

   <example-component></example-component>

@endsection

ملاحظة: تذكر أنّه يجب إعادة تنفيذ الأمر npm run dev كلّما تغيّر مكوّن Vue. أو يمكن تنفيذ الأمر npm run watch لمراقبة وإعادة ترجمة المكوّن تلقائيًا كلما حصل تغيير.

إن كنت مهتمًا بمعرفة المزيد عن كتابة مكوّنات Vue، ممكن أن تقرأ توثيق Vue الذي يقدّم توثيقًا كاملًا سهل القراءة .

استخدام React

إن كنت تفضل استخدام React لبناء تطبيقات JavaScript، يوفر Laravel طريقة لتغيير بناء Vue Ygn لبناء React. على تطبيق Laravel جديدة، يمكن استعمال الأمر preset مع الخيار react:

php artisan preset react

هذا الأمر سيحذف قوالب بناء Vue ويعوضها بقوالب بناء React، بما في ذلك مثال عن مكونٍ نموذجي.

مصادر