2. إعداد بيئة التطوير

سنستخدم الأدوات التالية (على نظام Windows 10 x64):

• [Laragon] لتشغيل خادم الويب PHP؛
• [NetBeans] لتحرير كود PHP؛
• [Visual Studio Code] لكتابة كود JavaScript؛
• [Node.js] لتشغيله؛
• [npm] لتنزيل وتثبيت مكتبات JavaScript التي سنحتاجها؛

2.1. بيئة تطوير خادم الويب

تمت كتابة البرامج النصية لـ PHP واختبارها في البيئة التالية:

• بيئة خادم ويب Apache / نظام إدارة قواعد البيانات MySQL / PHP 7.3 تسمى Laragon؛
• بيئة تطوير NetBeans 10.0؛

2.1.1. تثبيت Laragon

Laragon هي حزمة تجمع بين عدة مكونات برمجية:

• خادم ويب Apache. سنستخدمه لكتابة نصوص برمجية للويب بلغة PHP؛
• نظام إدارة قواعد البيانات MySQL؛
• لغة البرمجة النصية PHP؛
• خادم Redis الذي يوفر التخزين المؤقت لتطبيقات الويب:

يمكن تنزيل Laragon (مارس 2019) من العنوان التالي:

https://laragon.org/download/

• ينتج عن التثبيت [1-5] هيكل الدليل التالي:

• [6] يحتوي على دليل تثبيت PHP؛

يؤدي تشغيل [Laragon] إلى عرض النافذة التالية:

• [1]: القائمة الرئيسية لـ Laragon؛
• [2]: زر [Start All] (بدء التشغيل) يطلق خادم الويب Apache وقاعدة بيانات MySQL؛
• [3]: يعرض زر [WEB] صفحة الويب [http://localhost]، والتي تتوافق مع ملف PHP [<laragon>/www/index.php]، حيث <laragon> هو مجلد تثبيت Laragon؛
• [4]: يتيح لك زر [Database] إدارة قاعدة بيانات MySQL باستخدام أداة [phpMyAdmin]. يجب تثبيت هذه الأداة مسبقًا؛
• [5]: يفتح زر [Terminal] محطة أوامر؛
• [6]: يفتح زر [Root] نافذة Windows Explorer في مجلد [<laragon>/www]، وهو الدليل الجذر لموقع الويب [http://localhost]. هذا هو المكان الذي يجب أن تضع فيه جميع تطبيقات الويب التي يديرها خادم Apache الخاص بـ Laragon؛

لنفتح محطة Laragon [5]:

• في [1]، نوع المحطة الطرفية. تتوفر ثلاثة أنواع من المحطات الطرفية في [6]؛
• في [2، 3]: المجلد الحالي؛
• في [4]، اكتب الأمر [echo %PATH%]، الذي يعرض قائمة المجلدات التي يتم البحث فيها عند البحث عن ملف قابل للتنفيذ. يتم تضمين جميع المجلدات الرئيسية لـ Laragon في مسار الملفات القابلة للتنفيذ هذا، وهو ما لن يحدث إذا فتحت موجه الأوامر [cmd] في Windows. في هذا المستند، عندما تحتاج إلى كتابة أوامر لتثبيت برنامج معين، يتم كتابة هذه الأوامر عمومًا في محطة Laragon؛

2.1.2. تثبيت NetBeans 10.0 IDE

يمكن تنزيل NetBeans 10.0 IDE من العنوان التالي (مارس 2019):

https://netbeans.apache.org/download/index.HTML

الملف الذي تم تنزيله هو ملف ZIP يحتاج فقط إلى فك ضغطه. بمجرد تثبيت NetBeans وتشغيله، يمكنك إنشاء أول مشروع PHP الخاص بك.

• في [1]، حدد خيار File / New Project (ملف / مشروع جديد)؛
• في [2]، حدد فئة [PHP]؛
• في [3]، حدد نوع المشروع [PHP Application]؛

• في [4]، قم بتسمية المشروع؛
• في [5]، اختر مجلدًا للمشروع؛
• في [6]، حدد إصدار PHP الذي تم تنزيله؛
• في [7]، حدد ترميز UTF-8 لملفات PHP؛
• في [8]، حدد وضع [Script] لتشغيل نصوص PHP في وضع سطر الأوامر. حدد [Local WEB Server] لتشغيل نص PHP في بيئة ويب؛
• في [9،10]، حدد دليل التثبيت لمترجم PHP الخاص بحزمة Laragon:

• حدد [Finish] لإكمال معالج إنشاء مشروع PHP؛

• في [11]، يتم إنشاء المشروع باستخدام البرنامج النصي [index.php]؛
• في [12]، نكتب نصًا برمجيًا بسيطًا بلغة PHP؛
• في [13]، نقوم بتشغيل [index.php]؛

• في [14]، تظهر النتائج في نافذة [الإخراج] في NetBeans؛
• في [15]، ننشئ نصًا برمجيًا جديدًا؛
• في [16]، البرنامج النصي الجديد؛

يمكن للقارئ إنشاء جميع البرامج النصية التالية في مجلدات مختلفة ضمن نفس مشروع PHP. يتوفر كود المصدر للبرامج النصية الواردة في هذا المستند في بنية دليل NetBeans التالية:

توجد البرامج النصية في هذا المستند في دليل مشروع [scripts-console] [1]. سنستخدم أيضًا مكتبات PHP التي سيتم وضعها في المجلد [<laragon-lite>/www/vendor] [2]، حيث <laragon-lite> هو دليل التثبيت لبرنامج Laragon. لكي يتعرف NetBeans على المكتبات الموجودة في [2] كجزء من مشروع [scripts-console]، نحتاج إلى تضمين المجلد [vendor] [2] في [مسار التضمين] [3] للمشروع. سنقوم بتكوين NetBeans بحيث يتم تضمين المجلد [<laragon-lite>/www/vendor] [2] في كل مشروع PHP جديد، وليس فقط في مشروع [scripts-console]:

• في [1-2]، انتقل إلى خيارات NetBeans؛
• في [3-4]، قم بتكوين خيارات PHP؛
• في [5-7]، قم بتكوين [مسار التضمين العام] لـ PHP: يتم تضمين المجلدات المدرجة في [7] تلقائيًا في [مسار التضمين] لكل مشروع PHP؛

• في [9]، قم بالوصول إلى خصائص فرع [مسار التضمين]؛
• في [10-11]، المكتبات الجديدة التي استكشفها NetBeans. يستكشف NetBeans كود PHP في هذه المكتبات ويخزن فئاتها وواجهاتها ووظائفها وما إلى ذلك، من أجل تقديم المساعدة للمطور؛

• في [12]، يستخدم مقتطف كود فئة [PhpMimeMailParser\Parser] من مكتبة [vendor/php-mime-mail-parser]؛
• في [13]، يقترح NetBeans طرق هذه الفئة؛
• في [14-15]، يعرض NetBeans الوثائق الخاصة بالطريقة المحددة؛

مفهوم [مسار التضمين] خاص بـ NetBeans. يوجد هذا المفهوم في PHP أيضًا، لكنهما، من حيث المبدأ، مفهومان مختلفان.

الآن بعد أن تم إعداد بيئة التطوير، يمكننا تغطية أساسيات PHP.

2.2. بيئة التطوير لـ JavaScript

يمكن تثبيت هذه الأدوات باستخدام Laragon (انظر قسم الروابط):

في [4]، قم بتثبيت [node.js]. بمجرد اكتمال التثبيت، افتح محطة Laragon (انظر قسم الروابط) وتحقق من إصدار [node.js] المثبت (1) وكذلك إصدار [npm] (2):

بعد ذلك، نقوم بتثبيت Visual Studio Code، الذي يُشار إليه غالبًا باسم [code] أو [VSCode] [3-6]. بمجرد الانتهاء من ذلك، يمكننا تشغيل أداة التطوير هذه:

2.2.1. تكوين Visual Studio Code

سنوضح الآن كيف قمنا بتكوين [VSCode] حتى يتمكن القارئ من فهم لقطات الشاشة التي ستظهر من وقت لآخر. للقارئ الحرية في تكوين [VSCode] كما يراه مناسبًا. يمكنه حتى إعداد مساحة العمل المفضلة لديه. هذا ليس مهمًا بالنسبة لما سنقوم به بعد ذلك.

أولاً، سنقوم بتغيير مظهر نافذة [VSCode] لتكون الخلفية فاتحة بدلاً من سوداء:

ثم نخفي الشريط الجانبي الأيسر [1-2]، الذي تتوفر عناصره أيضًا في القائمة. في [3-6]، نضبط الكود ليقوم بتنسيق نفسه في كل مرة يتم فيها حفظ الملف وفي كل مرة نقوم فيها بالنسخ واللصق.

بعد حفظ الإعدادات [Ctrl-S]، يمكنك إغلاق نافذة [الإعدادات] [7]. يمكنك العودة إلى إعدادات [VSCode] في أي وقت [8-10]:

يتم حفظ هذه الإعدادات في ملف [settings.json] الذي يمكن تحريره مباشرة. لنفتح نافذة [الإعدادات] كما هو موضح:

في [4]، يمكنك تعديل ملف [settings.json] مباشرةً:

• في [1]، المسار إلى ملف [settings.json]. إحدى طرق العودة إلى الإعدادات الافتراضية هي حذف هذا الملف؛
• في [2]، الإعدادات التي قمنا بتكوينها للتو؛

الآن، لنفتح محطة طرفية داخل [VSCode] [1-2]:

• في [3]، نوع المحطة الطرفية المفتوحة، وهنا PowerShell؛
• في [4]، يمكنك كتابة أوامر Windows؛
• في [6]، يمكنك فتح محطات طرفية إضافية؛
• في [5]، قائمة المحطات المفتوحة؛
• في [7]، يغلق المحطة الطرفية النشطة؛

سنستخدم محطة [VSCode] لتثبيت حزم JavaScript (المكتبات) باستخدام أداة [npm] (Node Package Manager). دعونا نتحقق، كما فعلنا سابقًا في محطة Laragon، من إصدار [npm] المثبت:

نرى أن الأمر [npm] لم يتم التعرف عليه. هذا يعني أنه ليس جزءًا من مسار PATH للمحطة الطرفية (قائمة المجلدات للبحث عن ملف قابل للتنفيذ، في هذه الحالة [npm]). يمكننا معرفة مسار PATH الذي تستخدمه المحطة الطرفية:

لم يتم العثور على الملف القابل للتنفيذ [npm] في هذه المجلدات. مثل الأدوات الأخرى التي تم تثبيتها بواسطة Laragon، فهو موجود في مجلد [<laragon>\bin] الخاص بـ Laragon، وتحديدًا في مجلد [nodejs] [4-6].

لتشغيل [VSCode] والوصول إلى [npm]، سنقوم بتشغيل [VSCode] من محطة Laragon. عند تشغيله بهذه الطريقة، سيرث [VSCode] مسار PATH الخاص بمحطة Laragon، والذي يحتوي على مجلدي الملفات التنفيذية [node] و[npm]:

• في [1]: اكتب الأمر [path]؛
• في [2]: قائمة المجلدات الموجودة في مسار PATH. نرى مجلد [node-v10] [2]، مما يضمن العثور على الملفات التنفيذية [node] و[npm]؛

يتم تشغيل [VSCode] من محطة Laragon باستخدام الأمر [code]:

• في [2]، افتح محطة PowerShell في [VSCode]؛
• في [3-4]، يمكنك رؤية أن الملفات التنفيذية [node] و [npm] متاحة؛

ملاحظة: لا تغلق محطة Laragon التي أطلقت بيئة التطوير [VSCode]، وإلا سيتم إغلاق VSCode نفسه.

سنقوم بإجراء تكوين أخير: سنقوم بتغيير محطة العمل الافتراضية لـ [VSCode]:

يتم تحديث ملف [settings.json] على الفور:

الآن، لنفتح محطة [VSCode] جديدة [1]:

• في [2]، محطة [cmd] (وليس PowerShell)؛
• في [3]، يعرض الأمر [path] مسار PATH الخاص بالمحطة الطرفية؛
• في [4]، يمكنك رؤية مجلدي الملفات التنفيذية [node] و [npm] بوضوح

2.2.2. إضافة ملحقات إلى Visual Studio Code

لنقم بإنشاء ملف JavaScript باستخدام [VSCode]:

• في [3-4]، نقوم بإنشاء مجلد؛
• في [5]، نضبطه كمجلد حالي في [VSCode]؛
• في [6]، افتح محطة طرفية؛
• في [7]، يمكنك أن ترى أنك الآن في المجلد المحدد. سيتم تنفيذ الخطوات التالية في هذا المجلد؛

• في [1-3]: قم بإنشاء مجلد جديد؛
• في [4]: أضف ملفًا إلى هذا المجلد؛

• في [5-7]: قم بإنشاء أول برنامج JavaScript الخاص بك؛

• في [8-9]: قم بتشغيل برنامج JavaScript؛
• تظهر النتيجة في وحدة التحكم في التنفيذ [10]. في [11]، نرى الأمر الذي تم تنفيذه: قام تطبيق [node] بتنفيذ البرنامج النصي [test-01.js]. كان ذلك ممكنًا لأن هذا الملف القابل للتنفيذ موجود في مسار [VSCode]؛ وإلا لكنا تلقينا خطأً يشير إلى أن الأمر [node] غير معروف؛

لنواصل بنفس الطريقة لتشغيل نص برمجي ثانٍ [test-02.js]:

• في [1-3]، تم تعريف البرنامج النصي الجديد. تتطلب عبارة [use strict] في السطر 1 فحصًا صارمًا للبناء النحوي. في هذا السياق، يجب إعلان كل متغير باستخدام إحدى الكلمات الرئيسية [let، const، var]. وهذا ليس هو الحال بالنسبة للمتغير [x] في السطر 2؛
• عندما نقوم بتشغيل هذا الكود باستخدام [Ctrl-F5]، نحصل على الخطأ [5]. من الممكن الحصول على تحذير بشأن هذا النوع من الأخطاء قبل التنفيذ. وهذا هو الأفضل. سنقوم بأمرين:
  • تثبيت مكتبة تسمى [eslint] باستخدام [npm] تتحقق مما إذا كانت صيغة البرنامج النصي تتوافق مع معيار ECMAScript 6؛
  • تثبيت ملحق Visual Studio Code، يُسمى أيضًا ESLINT، والذي يسهل استخدام مكتبة [eslint] داخل [VSCode]؛

أولاً، دعونا نثبّت مكتبة JavaScript [eslint] باستخدام أداة [npm]. لتثبيت مكتبة [npm] (المعروفة باسم الحزمة)، تحتاج إلى معرفة اسمها الدقيق. إذا كنت لا تعرفه، يمكنك الانتقال إلى موقع [npm] على الرابط (2019) [https://www.npmjs.com/]:

• في [3]، الحزم التي تبدأ بـ [esl]؛
• في [4-6]، ستجد حزمة [eslint]؛

• في [7]، الأمر [npm] لتثبيت حزمة [eslint]؛
• في [8]، تكوين الحزمة؛
• في [9]، كيفية استخدامها للتحقق من صحة بناء جملة نص برمجي JavaScript؛

نقوم بتثبيت حزمة [eslint] في نافذة [Terminal] في [VSCode]. أولاً، نحتاج إلى إنشاء ملف [package.json] في جذر دليل العمل [VSCode]. سيحتوي هذا الملف على قائمة حزم JavaScript المستخدمة في مشروع [VSCode]:

• في [1]، انقر بزر الماوس الأيمن في مستكشف المشروع (وليس على مجلد الاختبارات)؛
• في [3-4]، قم بإنشاء ملف [package.json] في جذر مشروع [JavaScript]، على نفس مستوى مجلد [tests] (ولكن ليس داخل [tests])؛
• في [4-6]، أضف كائن JSON فارغًا إلى ملف [package.json]؛

ثم افتح محطة [VSCode] لتثبيت [eslint]:

• في [2]، أنت في جذر مشروع [javascript]؛
• في [3]، الأمر الذي يقوم بتثبيت حزمة [eslint]؛
• بعد التنفيذ،
  • في [4-5]، تم تعديل ملف [package.json]. يظهر السطر 3 إصدار [eslint] المثبت. السطر 2، [devDependencies]، يتوافق مع الخيار [--save-dev] المستخدم أثناء التثبيت. تعني هذه الحجة أن التبعية المثبتة يجب أن تكون مدرجة في ملف [package.json] كجزء من خاصية [devDependencies]. تسرد هذه الخاصية تبعيات المشروع المطلوبة في وضع التطوير ولكن ليس في وضع الإنتاج. في الواقع، لا تكون تبعية [eslint] مطلوبة إلا أثناء التطوير للتحقق من أن الكود المكتوب يتوافق مع معيار ECMAScript؛
  • في [6]، ظهر مجلد [node_modules] في المشروع. هذا هو المجلد الذي يتم فيه تثبيت تبعيات المشروع؛

• في [7]، بعض الحزم المثبتة. هناك عدد غير قليل منها. في الواقع، لم يتم تثبيت حزمة [eslint] فحسب، بل تم أيضًا تثبيت جميع الحزم التي تعتمد عليها؛

• [1-2]، في محطة [VSCode]، قم بتشغيل الأمر لتكوين حزمة [eslint]. سيطرح هذا الأمر عدة أسئلة [3] لتحديد كيفية استخدام [eslint]. إذا كنت في شك، اترك الخيارات الافتراضية كما هي. لاختيار خيار، استخدم مفتاحي السهمين لأعلى ولأسفل على لوحة المفاتيح لاختيار الخيار ثم تأكيده؛
• في [4]، تم إنشاء ملف [.eslintrc.js] في جذر المشروع؛
• في [6]، محتويات الملف. يمكنك نسخ المحتويات إلى ملفك الخاص؛

module.exports = {
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": "eslint:recommended",
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
  }
};

هذا لا يكفي للإبلاغ عن الأخطاء في ملف [test-02.js]:

• يجب عليك كتابة الأمر [2-3] حتى يتم تحليل الملف [tests/test-02.js]؛
• في [4]، يتم الكشف عن الخطأ المتعلق بالمتغير غير المعلن؛

سنضيف ملحقًا إلى [VSCode] سيسمح لنا برؤية أخطاء JavaScript في الوقت الفعلي. يعتمد هذا الملحق على حزمة [eslint] التي قمنا بتثبيتها:

• في [3-5]، نقوم بتثبيت الملحق المسمى [ESLint]؛

• في [1]، تظهر صفحة معلومات حول الملحق الذي تم تثبيته حديثًا؛
• في [2]، يمكننا أن نرى أن وضع التحقق من صحة [ESLint] هو [type]، مما يعني أنه سيتم التحقق من صحة بناء جملة نصوص JavaScript أثناء كتابة النص؛

يمكن تكوين ESLint عبر ملف التكوين العام لـ [VSCode]:

• في [6-7]، تكوين [ESLint]. هنا يمكنك تعديله؛

الآن لنعد إلى ملف [test-02.js]:

• في [3-4]، يتم الآن الإبلاغ عن الأخطاء المتعلقة بالمتغير [x]؛
• في [5]: عدد أخطاء ESLint في الملف؛
• في [6]، يشير إلى وجود ملفات بها أخطاء في مجلد [tests]؛

إذا قمنا بإصلاح الخطأ، تختفي تحذيرات ESLint:

الآن دعونا نثبّت ملحقًا يُدعى [Code Runner]:

• بمجرد تثبيت ملحق [Code-Runner] [1-5]، يمكنك تهيئته باستخدام [6-7] (أعلاه)؛

• في [1-2]، خيارات التهيئة لـ [Code-Runner]؛
• في [3]، نحدد أنه يجب مسح محطة الإخراج قبل كل عملية تنفيذ؛
• في [4]، حدد عنصر [Executor Map]، الذي يسرد أدوات التنفيذ لمختلف اللغات؛
• في [5-6]، انسخ التكوين إلى الحافظة؛
• في [7-8]، نقوم بتعديل ملف [settings.json]؛

• في [2]، أضف فاصلة بعد العنصر الأخير في ملف [settings.json] [1]؛
• في [3]، الصق ما تم نسخه مسبقًا في [5-6]: هذه هي قائمة الأوامر لتشغيل اللغات المختلفة التي يدعمها [VSCode]؛
• في [4]، الأمر لتشغيل ملفات JavaScript. هذا لا يعمل إلا إذا كان [node] موجودًا في مسار [VSCode]. إذا لم يكن كذلك، يمكنك إدخال المسار الكامل للملف القابل للتنفيذ [5]؛

الآن دعونا نحفظ التكوين (Ctrl-S). باستخدام ملحق [Code Runner]، يمكن تنفيذ ملفات JavaScript بالنقر بزر الماوس الأيمن على الكود [6] (أعلاه):

2.2.3. بعض أوامر [VSCode] المفيدة

• لتنسيق الكود، انقر بزر الماوس الأيمن عليه [1]؛
• لإغلاق النوافذ المفتوحة، انقر بزر الماوس الأيمن على عناوينها [2-3]؛

• لعرض نافذة معينة [4-5]؛
• لحفظ مشروعك (مساحة العمل) [6-9]؛
• لحفظ مشروع [10-11]؛

• لفتح مشروع [11-16]:

• عرض الملحقات المثبتة [19-20]:

لدينا الآن أدوات جيدة للتطوير بلغة JavaScript. سنقدم الآن هذه اللغة باستخدام مقتطفات برمجية قصيرة. ونظرًا لأن هذه المقدمة تأتي بعد دورة تدريبية في لغة PHP، فسوف نقارن بين اللغتين من حين لآخر لإبراز الاختلافات بينهما.