الفرق بين المراجعتين ل"Laravel/frontend"
رؤيا-بنعطية (نقاش | مساهمات) ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| (10 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
| − | < | + | <noinclude>{{DISPLAYTITLE: بناء Javascript و CSS }}</noinclude> |
| − | مقدمة | + | == مقدمة == |
| + | لا يفرض [[Laravel]] عليك استخدام أي معالج [[JavaScript]] و [[CSS]]، إلّا إنّه يوفّر نقطة انطلاق بسيطة باستخدام [[Bootstrap]] و [[Vue]] ممّا سيساعد العديد من التطبيقات. بصفة عامّة، يستخدم Laravel أوامر [[npm]] لتنصيب حزم الواجهات الأمامية هذه. | ||
| − | + | === CSS === | |
| + | يوفّر [[Laravel/mix|Laravel Mix]] واجهة برمجية (API) سهلة ومعبّرة لترجمة [[Sass]] أو Less، وهي إضافات للغة CSS الأساسية التي تضيف المتغيّرات والمخاليط (mixins) والعديد من الخصائص الأخرى التي تجعل العمل بلغة [[CSS]] أكثر متعة. في هذه الصفحة، سنناقش باختصار ترجمة [[CSS]] بصفة عامّة لكن يمكنك تفقّد توثيق [[Laravel/mix|Laravel Mix]] لمعلومات أدق حول [[Sass]] و Less. | ||
| − | + | === 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 فعّالة باستعمال المكوّنات. كما ب | ||
حذف المكونات المساعدة لبناء الواجهات الرسومية | حذف المكونات المساعدة لبناء الواجهات الرسومية | ||
| − | إن أردت حذف بناءات الواجهات الأمامية من التطبيق، يمكنك ذلك عبر استعمال الأمر preset. | + | إن أردت حذف بناءات الواجهات الأمامية من التطبيق، يمكنك ذلك عبر استعمال الأمر <code>preset</code>. هذا الأمر حين يضاف إليه الخيار <code>none</code>، سيحذف بناء [[Bootstrap]] و [[Vue]] ويبقي فقط على ملف [[Sass]] فارغ وبعض مكتبات خدمات [[JavaScript]] الشائعة: <syntaxhighlight lang="php"> |
| − | هذا الأمر حين يضاف إليه الخيار | ||
php artisan preset none | php artisan preset none | ||
| − | كتابة CSS | + | </syntaxhighlight> |
| − | يتضمن ملف package.json في Laravel حزم Bootstrap تساعد على البدء في إعداد نماذج أوليّة للواجهة الأمامية للتطبيق باستخدام Bootstrap. لكن لك الحريّة في إضافة أو حذف أي حزمة من package.json حسب حاجة التطبيق. لست مطالبًا باستخدام إطار | + | |
| − | قبل ترجمة شيفرات | + | == كتابة CSS == |
| + | يتضمن ملف <code>package.json</code> في Laravel حزم [[Bootstrap]] تساعد على البدء في إعداد نماذج أوليّة للواجهة الأمامية للتطبيق باستخدام [[Bootstrap]]. لكن لك الحريّة في إضافة أو حذف أي حزمة من <code>package.json</code> حسب حاجة التطبيق. لست مطالبًا باستخدام إطار [[Bootstrap]]، لكنّه يمثّل نقطة انطلاق جيّدة لمن اختار استخدامه. | ||
| + | قبل ترجمة شيفرات [[CSS]]، ثبّت الاعتماديات اللازمة للواجهة الأمامية للتطبيق باستعمال إدارة حزم [[Node.js|Node]] (NPM) :<syntaxhighlight lang="php"> | ||
npm install | npm install | ||
| − | بعد أن تُثبَّت الاعتماديات باستعمال npm | + | </syntaxhighlight> |
| − | npm run dev | + | |
| − | + | بعد أن تُثبَّت الاعتماديات باستعمال <code>npm install</code>، يمكن الآن ترجمة ملفّات Sass لملفات [[CSS]] عاديّة باستعمال [https://wiki.hsoub.com/Laravel/mix Laravel Mix]. سيعالج الأمر <code>npm run dev</code> التعليمات في ملف <code>webpack.mix.js</code>. في العادة، ملفات [[CSS]] المترجَمة توضع في مجلد <code>public/css</code><syntaxhighlight lang="php"> | |
| + | npm run dev | ||
| + | </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]]. | |
| − | كل اعتماديات JavaScript التي يتطلّبها التطبيق موجودة في الملف package.json من الملف الرئيسي للتطبيق. هذا الملف شبيه بملف composer. | + | == كتابة JavaScript == |
| + | كل اعتماديات [[JavaScript]] التي يتطلّبها التطبيق موجودة في الملف <code>package.json</code> من الملف الرئيسي للتطبيق. هذا الملف شبيه بملف <code>composer.json</code>، غير أنّه يحدِّد اعتماديات [[JavaScript]] بدل اعتماديات PHP. يمكن تثبيت التبعيّات باستعمال إدارة حزم [[Node.js|Node]] (NPM):<syntaxhighlight lang="php"> | ||
npm install | npm install | ||
| − | ملاحظة: افتراضيًا، يتضمن ملف package.json بعض الحزم مثل vue و axios للمساعدة على بدء بناء تطبيقات JavaScript. لك حريّة إضافة أو حذف من package.json حسب حاجة التطبيق. | + | </syntaxhighlight> |
| + | |||
| + | ملاحظة: افتراضيًا، يتضمن ملف <code>package.json</code> بعض الحزم مثل <code>vue</code> و <code>axios</code> للمساعدة على بدء بناء تطبيقات [[JavaScript]]. لك حريّة إضافة أو حذف من <code>package.json</code> حسب حاجة التطبيق. | ||
| − | بعد تثبيت الحزم، يمكن استعمال الأمر npm run dev لترجمة الملفات. Webpack هو مجمّع وحدات لبناء تطبيقات JavaScript. عند تنفيذ الأمر npm run | + | بعد تثبيت الحزم، يمكن استعمال الأمر <code>npm run dev</code> لترجمة الملفات. <code>Webpack</code> هو مجمّع وحدات لبناء تطبيقات [[JavaScript]]. عند تنفيذ الأمر <code>npm run dev</code>، ينفّذ <code>Webpack</code> التعليمات الموجودة في الملف <code>webpack.mix.js</code><syntaxhighlight lang="php"> |
npm run dev | npm run dev | ||
| − | + | </syntaxhighlight> | |
| − | |||
| − | + | افتراضيًا، الملف <code>webpack.mix.js</code> سيترجم ملف Sass وملف <code>resources/assets/js/app.js</code>. في الملف <code>app.js</code> يمكنك تسجيل مكوّنات [[Vue]]، أو إن كنت تفضّل إطارًا آخر، يمكنك ضبط تطبيق [[JavaScript]] الخاص بك. توجد ملفات [[JavaScript]] المترجمة عادة في المجلد <code>public/js</code>. | |
| − | في العادة، تطبيقات Laravel الجديدة تحتوي على ملف ExampleComponent.vue لمكوّنات Vue في المجلد resources/assets/js/components. الملف ExampleComponent.vue مثال على مكوّن Vue في ملف واحد الذي يعرّف كل من JavaScript وقالب HTML في نفس الملف. يوفّر المكوّن في ملف واحد منهجيةً مريحة و ملائمة لبناء تطبيقات معتمدة على JavaScript. مثالٌ عن مكوّنٍ موجودٍ في الملف app.js: | + | ملاحظة: الملف <code>app.js</code> سيُحمِّل <code>resources/assets/js/bootstrap.js</code> ممّا سيمهّد و يضبط [[Vue]] و [[Axios]] و [[jQuery]] و كل تبعيّات [[JavaScript|Javascript]]. بإمكانك القيام بهذا في هذا الملف. |
| + | |||
| + | === كتابة مكوّنات [[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"> | ||
Vue.component( | Vue.component( | ||
| − | + | ||
| − | + | 'example-component', | |
| + | require('./components/ExampleComponent.vue') | ||
| + | |||
); | ); | ||
| − | لاستخدام المكوّن في التطبيق، يمكن إضافته إلى أحد قوالب HTML. على سبيل المثال، بعد تنفيذ الأمر make:auth لبناء نظام تعريف و توثيق التطبيقة، يمكن إضافة المكوّن إلى قالب Blade في home.blade.php | + | </syntaxhighlight> |
| + | |||
| + | لاستخدام المكوّن في التطبيق، يمكن إضافته إلى أحد قوالب [[HTML]]. على سبيل المثال، بعد تنفيذ الأمر <code>make:auth</code> لبناء نظام تعريف و توثيق التطبيقة، يمكن إضافة المكوّن إلى قالب [[Laravel/blade|Blade]] في <code>home.blade.php</code><syntaxhighlight lang="php"> | ||
@extends('layouts.app') | @extends('layouts.app') | ||
@section('content') | @section('content') | ||
| − | + | ||
| + | <example-component></example-component> | ||
| + | |||
@endsection | @endsection | ||
| − | ملاحظة: تذكر أنّه يجب إعادة تنفيذ الأمر npm run dev كلّما تغيّر مكوّن Vue. أو يمكن تنفيذ الأمر npm run watch لمراقبة وإعادة ترجمة المكوّن تلقائيًا كلما حصل تغيير. | + | </syntaxhighlight> |
| + | |||
| + | ملاحظة: تذكر أنّه يجب إعادة تنفيذ الأمر <code>npm run dev</code> كلّما تغيّر مكوّن [[Vue]]. أو يمكن تنفيذ الأمر <code>npm run watch</code> لمراقبة وإعادة ترجمة المكوّن تلقائيًا كلما حصل تغيير. | ||
| − | إن كنت مهتمًا بمعرفة المزيد عن كتابة مكوّنات | + | إن كنت مهتمًا بمعرفة المزيد عن كتابة مكوّنات [[Vue]]، ممكن أن تقرأ توثيق [[Vue]] الذي يقدّم توثيقًا كاملًا سهل القراءة . |
| − | استخدام React | + | === استخدام [[React]] === |
| + | إن كنت تفضل استخدام [[React]] لبناء تطبيقات [[JavaScript]]، يوفر Laravel طريقة لتغيير بناء Vue Ygn لبناء [[React]]. على تطبيق Laravel جديدة، يمكن استعمال الأمر <code>preset</code> مع الخيار <code>react</code>:<syntaxhighlight lang="php"> | ||
| + | php artisan preset react | ||
| + | </syntaxhighlight> | ||
| − | |||
| − | |||
هذا الأمر سيحذف قوالب بناء Vue ويعوضها بقوالب بناء React، بما في ذلك مثال عن مكونٍ نموذجي. | هذا الأمر سيحذف قوالب بناء Vue ويعوضها بقوالب بناء React، بما في ذلك مثال عن مكونٍ نموذجي. | ||
| − | مصادر | + | == مصادر == |
| − | صفحة 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، بما في ذلك مثال عن مكونٍ نموذجي.