هل تتعلم تطوير الويب وتشعر بالحيرة بشأن كيفية بدء مشروع Node.js؟ لا تقلق، لقد حصلت عليك! سأرشدك خلال إنشاء الواجهة الخلفية الأولى لك باستخدام Node.js وExpress.js في 5 خطوات فقط.

️5 خطوات رئيسية:

• الخطوة 1: إعداد المشروع
• الخطوة 2: تنظيم مجلداتك
• الخطوة 3: إنشاء ملف server.js
• الخطوة 4: إنشاء المسارات
• الخطوة 5: تشغيل الواجهة الخلفية لديك

الخطوة 1: إعداد المشروع؟️

1. تثبيت Node.js وnpm: قم بتنزيل Node.js وتثبيته من الموقع الرسمي. يأتي مع npm (Node Package Manager)، الذي يساعدك على إدارة الحزم.

2. إنشاء مجلد مشروع: قم بإنشاء مجلد لمشروعك. افتح المحطة (أو موجه الأوامر) واكتب:

   mkdir my-node-project
   cd my-node-project

3. تهيئة مشروعك: داخل المجلد، قم بإعداد مشروع Node.js جديد عن طريق كتابة:

   npm init

سيؤدي هذا إلى إنشاء ملف package.json حيث يتم تخزين جميع معلومات مشروعك وتبعياته. ما عليك سوى الضغط على Enter لكل سؤال إذا لم تكن متأكدًا.

4. تثبيت Express.js: Express.js هو إطار عمل يجعل إنشاء الواجهة الخلفية أسهل. قم بتثبيته بكتابة:

   npm install express

الخطوة 2: تنظيم المجلدات الخاصة بك؟

الحفاظ على الأشياء منظمة أمر مهم! إليك كيفية تنظيم مشروعك:

• server.js: هذا هو المكان الذي نكتب فيه رمز الخادم الرئيسي.
• الطرق/: قم بتخزين ملفات المسار هنا (حيث تتعامل مع طلبات الويب).
• وحدات التحكم/: رمز المتجر الذي يدير منطق المسارات.
• models/: قم بتخزين نماذج قاعدة البيانات إذا كنت تستخدم قاعدة بيانات (ليست هناك حاجة إليها الآن).

مثال على بنية المجلد:

my-node-project/
├── routes/
├── server.js
├── package.json
└── node_modules/

الخطوة 3: إنشاء ملف server.js ️

1. إنشاء الملف: داخل مجلد المشروع الخاص بك، قم بإنشاء ملف يسمى server.js. ستكون هذه نقطة الدخول لتطبيقك.

2. اكتب خادم Node.js الأول الخاص بك:

   const express = require('express'); // Importing express
   const app = express(); // Creating an express app

   // Create a route that sends a response when visiting the homepage
   app.get('/', (req, res) => {
     res.send('
Hello, Express.js Server!
');
   });

   // Set up the server to listen on port 3000
   const port = 3000;
   app.listen(port, () => {
     console.log(`Server is running on port ${port}`);
   });

3. اختباره: قم بتشغيل الخادم الخاص بك عن طريق كتابة:

   node server.js

الآن، افتح متصفح الويب الخاص بك وانتقل إلى http://localhost:3000. يجب أن تشاهد "مرحبًا، خادم Express.js!" على الشاشة!

الخطوة 4: بناء الطرق؟

تحدد المسارات كيفية استجابة الخادم الخاص بك لطلبات URL المختلفة.

1. إنشاء مسار: في ملف server.js، لديك بالفعل طريق واحد:

   app.get('/', (req, res) => {
     res.send('Hello, Express.js Server!');
   });

2. إضافة المزيد من المسارات: دعونا نضيف المزيد من المسارات:

   app.get('/about', (req, res) => {
     res.send('This is the about page');
   });

   app.get('/contact', (req, res) => {
     res.send('This is the contact page');
   });

3. اختبار مساراتك: بعد الحفظ، انتقل إلى متصفحك وقم بزيارة عناوين URL هذه:

• http://localhost:3000/ – يجب أن يظهر "Hello, Express.js Server!"
• http://localhost:3000/about - يجب أن يظهر "هذه هي الصفحة الخاصة"
• http://localhost:3000/contact – يجب أن تظهر "هذه هي صفحة الاتصال"

الخطوة 5: تشغيل الواجهة الخلفية الخاصة بك ؟؟

للمحافظة على تشغيل خادمك واختبار التغييرات:

1. ابدأ الخادم الخاص بك: قم بتشغيل الخادم الخاص بك مرة أخرى:

   node server.js

2. اختبره: يمكنك زيارة عناوين URL في متصفحك أو استخدام أداة مثل Postman لإرسال الطلبات.

3. حافظ على تحديث الخادم الخاص بك: يمكنك تثبيت Nodemon، الذي يعيد تشغيل الخادم تلقائيًا عند تغيير الرمز:

   npm install -g nodemon

الآن، بدلاً من العقدة server.js، قم بتشغيل:

   nodemon server.js

الإخراج؟:

عند زيارتك http://localhost:3000/، سترى:

Hello, Express.js Server!

عند زيارة http://localhost:3000/about، سترى:

This is the about page

✅؟ التوصية:

استخدم قالب فكرة مطور الواجهة الخلفية القابل للطباعة لتتبع تقدمك!

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

خارطة الطريق هذه:

• ️ يوفر مسارًا واضحًا لتجنب الالتباس.
• ؟ يساعدك على البقاء متحفزًا من خلال تحديد مكان البدء والنهاية.
• ؟ يتبع خطة منظمة، تشبه المنهج المدرسي.
• ؟ ينظم تعلمك بأهداف أسبوعية للأدوات واللغات.
• ⏳ يضمن الإنجاز خلال 6 أشهر، ويغطي كل ما تحتاجه.
• ؟ يتميز بتصميم جميل لسهولة التصفح.

شكرا لقراءة هذا المقال. تأكد من متابعتي؟ للحصول على آخر التحديثات.

اقرأ المزيد: المهارات اللازمة لتصبح مطورًا للواجهة الخلفية في 6 أشهر (خريطة الطريق)