برنامج Node.js التعليمي: مرحبًا بالعالم

كيفية كتابة أول برنامج Node.js

يساعدك هذا البرنامج التعليمي على البدء مع Node.js. يشرح ما تحتاجه لكتابة أول برنامج Node.js، من أين يمكنك تنزيل الأدوات المطلوبة، كيفية تثبيت هذه الأدوات وكيفية كتابة أول برنامج "مرحبًا بالعالم". إذا لم تكن قد كتبت برنامج JavaScript من قبل، فهذا هو المكان المناسب للبدء.

ما هو Node.js

Node.js هو بيئة تشغيل مفتوحة المصدر ومتعددة المنصات تنفذ كود JavaScript خارج متصفح الويب. يسمح Node.js للمطورين باستخدام JavaScript لكتابة أدوات سطر الأوامر وللبرمجة من جانب الخادم — تشغيل نصوص من جانب الخادم لإنتاج محتوى صفحات ويب ديناميكي قبل إرسال الصفحة إلى متصفح الويب الخاص بالمستخدم.

ما هو خطأ في الصياغة؟

خطأ في الصياغة يعني أنني لا أفهم. إذا تحدثت مع شخص ما باللغة الإنجليزية ولم يفهم ما تقوله، سيرد بـ "أنا لا أفهم". إذا تحدثت مع جهاز الكمبيوتر بلغة JavaScript ولم يفهم الكمبيوتر ما تقوله، سيرد بـ "خطأ في الصياغة".

ما هو Visual Studio Code

Visual Studio Code هو محرر نصوص يساعدك أثناء عملية كتابة كود JavaScript. إنه مثل محرر النصوص المعتاد، ولكنه يوفر تمييزًا يساعدك على تحديد الوظائف والمتغيرات والفئات وكل ما يمكن أن يختلف عن النص العادي.

ما هو برنامج Node.js مرحبًا بالعالم

برنامج مرحبًا بالعالم هو أبسط برنامج يمكنك كتابته. ببساطة يطبع الجملة: مرحبًا بالعالم على شاشة الكمبيوتر. برنامج مرحبًا بالعالم هو أول برنامج يكتبه المطورون في أي لغة برمجة.

المتطلبات الأساسية

إليك ما تحتاجه للبدء. لكتابة أول برنامج كمبيوتر بلغة JavaScript، تحتاج إلى جهاز كمبيوتر يعمل بنظام Windows، وVisual Studio Code، وNode.js وكود المثال المقدم أدناه.

  • جهاز كمبيوتر يعمل بنظام Windows 10 أو 11
  • Visual Studio Code
  • Node.js
  • مشروع Ozeki Hello World مثال

الخطوة 1 - تنزيل Visual Studio Code

Visual Studio Code

في هذا الفيديو الأول، سنوضح لك كيفية تنزيل Visual Studio Code. إنها عملية سهلة؛ لن تواجه صعوبة في متابعتها. يبدأ الفيديو بزيارة الرابط التالي: https://code.visualstudio.com/download/. باتباع الخطوات، ستصل إلى مرحلة وجود المثبت على جهازك. من هنا، يمكنك بدء عملية التثبيت.

الفيديو 1 - كيفية تنزيل Visual Studio Code (فيديو تعليمي)

اختيار خيار Windows

للحصول على مثبت متوافق مع Windows، اختر الخيار المناسب لـ Windows 7, 8, 10. يقع تحت شعار Windows (الشكل 1). الآن سيبدأ متصفحك عملية التنزيل وسيكون لديك المثبت جاهزًا للبدء في أي وقت.

تنزيل Visual Studio Code
الشكل 1 - تنزيل Visual Studio Code

الخطوة 2 - تنزيل Node.js

Node.js

الغرض من هذا الفيديو هو إظهار كيفية تنزيل Node.js إلى جهازك. سيبدأ الفيديو بزيارة صفحة تنزيل Node.js. سيرشدك البرنامج التعليمي حتى تقوم بتثبيت بيئة التشغيل. الفيديو نفسه لا يتجاوز دقيقة واحدة ويحتوي على جميع المعلومات التي تحتاجها لإكمال العملية. يمكنك تنزيل Node.js من الرابط التالي: https://nodejs.org/en/download/current/

الفيديو 2 - كيفية تنزيل Node.js (فيديو تعليمي)

صفحة تنزيل Node.js

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

الشكل 2 - تنزيل Node.js

الخطوة 3 - تثبيت Visual Studio Code

لكتابة أول برنامج Node.js، ستحتاج إلى محرر نصوص مثل Visual Studio Code. في الفيديو التالي، يمكنك رؤية كيفية تثبيت Visual Studio Code على جهازك. سيبدأ الفيديو بزيارة صفحة تنزيل بيئة البرمجة Visual Studio. سينتهي بوجود المثبت المنزّل جاهزًا للاستخدام. خلال العملية، ستتعلم أي خيار تنزيل تحتاج إلى اختياره. يستحق هذا الفيديو المشاهدة لأنه بعد ذلك ستتمكن من تنزيل Visual Studio Code في أي وقت تريده. طوله دقيقة واحدة فقط ولكنه يحتوي على جميع المعلومات التي تحتاجها.

الفيديو 3 - كيفية تثبيت Visual Studio Code (فيديو تعليمي)

الخطوة 4 - تثبيت Node.js

لكتابة أول برنامج لك باستخدام Node.js، تحتاج إلى تثبيت بيئة تشغيل Node.js. يوضح الفيديو التالي كيفية إجراء هذا التثبيت. سيبدأ ببرنامج التثبيت على جهازك. في نهاية الفيديو، سيكون البرنامج مثبتًا بنجاح. العملية سهلة التنفيذ، والفيديو مفصل جدًا. لن تواجه أي مشكلة في متابعته.

الفيديو 4 - كيفية تثبيت Node.js (درس مرئي)

لاختبار ما إذا كان Node.js مثبتًا، يجب عليك فتح موجه الأوامر.

  1. افتح قائمة ابدأ
  2. اكتب "cmd" في حقل البحث
  3. اضغط على Enter
  4. ستظهر نافذة سوداء
  5. اكتب الكود في الطرفية كما هو موضح في (الكود 1)

node -v
    

الكود 1 - اختبار تثبيت Node.js

اختبار Node.js

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

الشكل 3 - اختبار تثبيت Node.js

بعد هذه الخطوات، يمكننا متابعة رحلتنا لكتابة أول برنامج 'Hello world!' بلغة JavaScript، وتشغيله في بيئة Node.js.

الخطوة 5 - إعداد البيئة

يجب علينا إنشاء مجلد لتخزين أكوادنا. يمكننا فعل ذلك قبل تشغيل Visual Studio Code، أو يمكننا فعله أثناء فتح مجلد.

في Visual Studio Code، لدينا القدرة على وجود طرفية داخل البرنامج، لذا نقوم بإعداد طرفية داخل البرنامج.

سيوضح لك الفيديو التالي كيفية إنشاء مشروع جديد في Visual Studio Code. خلال العملية، ستقوم بإنشاء مجلد جديد للمشروع. الفيديو مدته 52 ثانية فقط وهو مفصل جدًا. ستتعلم العملية بمشاهدة الفيديو.

الفيديو 5 - كيفية إعداد بيئتنا (درس مرئي)

إنشاء ملف جديد في Visual Studio Code

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

الشكل 4 - إنشاء ملف جديد في Visual Studio Code

إنشاء طرفية جديدة

لتشغيل برنامجك الأول، ستحتاج إلى طرفية. ستتمكن من استخدام الطرفية لرؤية ناتج برنامجك. لإنشاء واحدة، انقر على زر Terminal الموجود في شريط قوائم Visual Studio Code. هناك، ستجد زر New Terminal. هذا الزر سينشئ طرفية حيث يمكنك تشغيل برنامجك. (الشكل 5)

الشكل 5 - إنشاء طرفية جديدة في Visual Studio Code

الخطوة 6 - كتابة برنامج 'Hello world' بلغة JavaScript

أول برنامج تكتبه في أي لغة برمجة هو برنامج 'Hello world'. الهدف الوحيد من هذا البرنامج هو طباعة عبارة 'Hello world' على شاشة الكمبيوتر. في هذا المثال، البرنامج يحتوي على سطر واحد فقط: console.log("Hello world!"); و هذا السطر سيعيد 'Hello world!' إلى الشاشة.

console.log("Hello world!");
    

الكود 2 - الكود الذي سيعرض 'Hello world!' في الطرفية

كتابة سيناريو 'Hello World' (درس مرئي)

الغرض من الفيديو التالي هو مساعدتك في كتابة أول برنامج لك. كما هو الحال في معظم الحالات، أول برنامج سنكتبه هو برنامج 'Hello World'. سيعرض ببساطة 'Hello World' في الطرفية. سيبدأ الفيديو بقسم محرر الأكواد الفارغ وسينتهي بالبرنامج النهائي. الفيديو قصير ولكنه مفصل جدًا. يستغرق مشاهدته 14 ثانية فقط. لن تواجه أي مشكلة في فهمه.

الفيديو 6 - كيفية كتابة سيناريو 'Hello world!' (درس مرئي)

الخطوة 7 - تشغيل الكود داخل الطرفية

لتشغيل الكود الخاص بك، يجب عليك فتح طرفية وكتابة الكود التالي فيها:

//إذا قمت بتسمية ملفك بشيء آخر، يجب استبدال 'helloWorld' بهذا الاسم
node helloWorld.js
    

الكود 3 - سيقوم بتنفيذ كود helloWorld.js

سيقوم هذا بترجمة كود JavaScript الخاص بك، وسيتم عرض الكلمات داخل الأقواس الخاصة بـ console.log(); في طرفيتك.

الخطوة 8 - ماذا يحدث إذا ارتكبت خطأ في جافا سكريبت

يحتوي برنامج Visual Studio Code على اكتشاف أخطاء بناء الجملة المدمج، لذا إذا ارتكبت خطأ في كود جافا سكريبت الخاص بك، سيتعرف عليه الـ IDE وسيتم عرضه ضمن المشكلات. إذا كان هناك خطأ في الكود الخاص بك وقمت بتشغيله، سيتم عرض الخطأ في الطرفية أيضًا. في الفيديو التالي، يمكنك رؤية هذا يحدث. ستتعلم كيف يبدو الأمر إذا ارتكبت خطأ إملائي في الكود. ستتعلم أيضًا كيفية تصحيح الخطأ. طول الفيديو 48 ثانية فقط ويحتوي على جميع المعلومات التي تحتاجها لإكمال العملية. لن تواجه أي مشكلة في متابعة الخطوات.

الفيديو 7 - كيفية ارتكاب خطأ في بناء الجملة ثم تصحيحه (فيديو تعليمي)

الأخطاء في الكود

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

الشكل 6 - خطأ في كود جافا سكريبت في Visual Studio Code

ملخص

الآن بعد أن أكملت الخطوات الخمس البسيطة أعلاه، فقد اتخذت خطوتك الأولى في أن تصبح مطور برمجيات Node.js. قد يبدو هذا البرنامج بسيطًا، وقد لا يفعل الكثير، ولكن هذه هي الطريقة التي تبدأ بها الأشياء العظيمة. الخطوة التالية في رحلتك التعليمية ستكون إنشاء طلب HTTP.

More information