إنشاء مشروع Express

إنشاء مشروع Express يعتبر خطوة أساسية لكل مطور يرغب في تطوير تطبيقات ويب معاصرة باستخدام Node.js. هنا، سنناقش الخطوات اللازمة لإنشاء مشروع Express على نظام تشغيل ويندوز، باستخدام أداة تحرير الكود Visual Studio Code، والملحقات الإضافية الضرورية.

متطلبات البدء بالمشروع

1. تثبيت Node.js: أول خطوة هي تثبيت Node.js، وهو يشمل npm، مدير الحزم الذي ستحتاجه لتثبيت Express وأية حزم أخرى. يمكن تحميله من الموقع الرسمي لـ Node.js.
2. تثبيت Visual Studio Code: Visual Studio Code هو محرر كود مجاني، قوي وخفيف، متاح لنظام التشغيل ويندوز. يمكن تحميله من موقع Visual Studio Code الرسمي.
3. ملحقات Visual Studio Code:

• ESLint: لتحسين جودة الكود وتوافقه مع المعايير.
• Prettier: لتنسيق الكود تلقائيًا والحفاظ على اتساق الأسلوب.
• Node.js Extensions Pack: يشمل مجموعة من الإضافات المفيدة لتطوير Node.js. يمكن تثبيت هذه الملحقات من خلال متجر Visual Studio Code الداخلي.

إنشاء مشروع Express

1. إنشاء مجلد المشروع:

   mkdir my-express-app
   cd my-express-app

2. تهيئة مشروع Node.js:

   npm init -y

هذا الأمر ينشئ ملف package.json بالإعدادات الافتراضية.

3. تثبيت Express:

   npm install express

هيكل مشروع Express القياسي

هيكل المشروع يتكون عادة من:

app.js: يحتوي على إعدادات السيرفر الأساسية.

routes/: مجلد يحتوي على ملفات تعريف المسارات.

public/: للموارد الثابتة مثل الصور، CSS وJavaScript.

views/: لملفات القوالب إذا كنت تستخدم محرك قوالب مثل EJS أو Pug.

node_modules/: يحتوي على الحزم التي تم تثبيتها.

package.json: يدير الحزم وسكربتات التشغيل.

مثال على كود إبتدائي لمشروع Express

app.js:

const express = require('express');
const app = express();

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

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

هذا الكود ينشئ خادمًا يستمع على المنفذ 3000 ويستجيب بـ “Hello World!” للطلبات التي تأتي إلى المسار الجذر.

باتباع هذه الخطوات، يمكنك إعداد بيئة تطوير Express قوية على ويندوز واستخدام Visual Studio Code كأداة تطوير. يقدم Express.js بيئة تطوير مرنة وقوية لبناء تطبيقات الويب الحديثة وAPIs، مما يجعله خيارًا مفضلاً لمطوري JavaScript في جميع أنحاء العالم.

معاينة النتيجة

لمعاينة نتيجة الكود الذي كتبته في المتصفح، يجب أولاً تأكد من أنك قمت بتشغيل الخادم الخاص بك بنجاح باستخدام Node.js. إليك الخطوات التفصيلية للقيام بذلك وكيفية معاينة النتيجة:

خطوات تشغيل الخادم ومعاينة النتيجة في المتصفح:

1. افتح المحطة أو موجه الأوامر (Command Prompt):

يمكنك فتح موجه الأوامر على نظام ويندوز بالضغط على Win + R، ثم كتابة cmd والضغط على Enter.

1. انتقل إلى المجلد الذي يحتوي على مشروعك:

استخدم الأمر cd لتغيير الدليل إلى المجلد حيث قمت بحفظ مشروعك. مثلاً:

bash cd path\to\my-express-app

1. تشغيل الخادم:

بمجرد أن تكون داخل مجلد المشروع، قم بتشغيل الخادم باستخدام Node.js بكتابة الأمر التالي:

node app.js

يجب أن ترى رسالة في موجه الأوامر تؤكد أن الخادم يعمل، مثل:

Server is running on port 3000

1. فتح المتصفح:

افتح متصفح الويب المفضل لديك.

أدخل عنوان URL الخاص بالخادم:

في شريط العنوان بالمتصفح، اكتب:

http://localhost:3000

ثم اضغط Enter.

1. معاينة النتيجة:

• يجب أن ترى النص “Hello World!” يظهر في المتصفح. هذا يعني أن خادم Express الخاص بك يعمل بشكل صحيح ويستجيب للطلبات على المنفذ 3000.

ماذا لو لم تظهر النتيجة؟

إذا لم تر النتيجة المتوقعة أو واجهتك أية مشكلات، تحقق من الأمور التالية:

• تأكد من أن الخادم قيد التشغيل وأنه لا توجد رسائل خطأ في موجه الأوامر.
• تحقق من الكود: انظر مرة أخرى في ملف app.js للتأكد من أنه لا توجد أخطاء برمجية.
• التحقق من جدار الحماية: قد يمنع جدار الحماية الاتصالات الواردة إلى المنفذ 3000، لذا تأكد من أن الإعدادات تسمح بالاتصال.

باتباع هذه الخطوات، يجب أن تتمكن من تشغيل ومعاينة مشروع Express الخاص بك في المتصفح بسهولة.