كيفية البدء في استخدام Node.js و Express

المقدمة

Express هو إطار عمل تطبيق ويب لـ Node.js يتيح لك إنشاء واجهات برمجة تطبيقات (APIs) قوية وخوادم ويب بطريقة أسهل وأنظف بكثير. إنه حزمة خفيفة الوزن لا تحجب ميزات Node.js الأساسية.

في هذا المقال، ستقوم بتثبيت واستخدام Express لإنشاء خادم ويب.

المتطلبات المسبقة

إذا كنت ترغب في متابعة هذا المقال، ستحتاج إلى:

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.

تم التحقق من هذا البرنامج التعليمي باستخدام Node v15.14.0، npm v7.10.0، express v4.17.1، وserve-index v1.9.1.

الخطوة 1 — إعداد المشروع

أولاً، افتح نافذة الطرفية الخاصة بك وأنشئ دليل مشروع جديد:

mkdir express-example

ثم، انتقل إلى الدليل الذي تم إنشاؤه حديثًا:

cd express-example

في هذه النقطة، يمكنك تهيئة مشروع npm جديد:

npm init -y

بعد ذلك، ستحتاج إلى تثبيت حزمة express:

npm install express@4.17.1

في هذه النقطة، لديك مشروع جديد جاهز لاستخدام Express.

الخطوة ٢ — إنشاء خادم Express

الآن بعد تثبيت Express، أنشئ ملفًا جديدًا ب اسم server.js وافتحه بمحرر النصوص الخاص بك. ثم، أضف السطور التالية من الكود:

const express = require('express');

const app = express();

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

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

هذه الأسطر من الكود هي حيث نخبر خادم Express الخاص بنا كيفية التعامل مع طلب GET إلى خادمنا. يتضمن Express وظائف مماثلة لـ POST، PUT، إلخ، باستخدام app.post(...)، app.put(...)، إلخ.

تأخذ هذه الوظائف معلمتين رئيسيتين. الأول هو عنوان URL لهذه الوظيفة للتصرف عليه. في هذه الحالة، نستهدف '/'، وهو جذر موقعنا على الويب: في هذه الحالة، localhost:3000.

المعلمة الثانية هي وظيفة تحتوي على معاملين: req و res. req يمثل الطلب الذي تم إرساله إلى الخادم؛ يمكننا استخدام هذا الكائن لقراءة البيانات حول ما يطلب العميل فعله. res يمثل الاستجابة التي سنقوم بإرسالها إلى العميل.

هنا، نقوم باستدعاء وظيفة على res لإرسال استجابة: 'استجابة ناجحة.'.

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

أخيرًا، بمجرد إعداد طلباتنا، يجب علينا بدء خادمنا! نحن نمرر 3000 إلى دالة listen، والتي تخبر التطبيق بالمنفذ الذي يجب الاستماع إليه. الدالة الممررة كالمعلمة الثانية اختيارية وتعمل عند بدء تشغيل الخادم. يوفر ذلك لنا بعض التغذية الراجعة في وحدة التحكم لمعرفة أن تطبيقنا قيد التشغيل.

قم بزيارة نافذة الطرفية الخاصة بك وشغل تطبيقك:

node server.js

ثم، قم بزيارة localhost:3000 في متصفح الويب الخاص بك. ستعرض نافذة المتصفح الخاصة بك: 'Successful response'. ستعرض نافذة الطرفية الخاصة بك: 'Example app is listening on port 3000.'.

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

الخطوة 3 — باستخدام الوسيطات

مع Express، يمكننا كتابة واستخدام دوال الوسيط، والتي لها وصول إلى جميع الطلبات HTTP الواردة إلى الخادم. يمكن أن تقوم هذه الوظائف بما يلي:

• تنفيذ أي كود.
• إجراء تغييرات على كائنات الطلب والاستجابة.
• إنهاء دورة الطلب والاستجابة.
• استدعاء دالة الوسيط التالية في الستاك.

يمكننا كتابة وظائف الوسيط الخاصة بنا أو استخدام وسيطات من جهات خارجية عن طريق استيرادها بنفس الطريقة التي نفعل بها مع أي حزمة أخرى.

لنبدأ بكتابة وسيط البرمجيات الخاص بنا، ثم سنحاول استخدام بعض وسيطات البرمجيات الموجودة لتقديم الملفات الثابتة.

لتحديد وظيفة وسيط البرمجيات، نستدعي app.use() ونمرر لها وظيفة. إليك وظيفة وسيط بسيطة لطباعة الوقت الحالي في وحدة التحكم أثناء كل طلب:

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

يخبر استدعاء next() وسيط البرمجيات بالانتقال إلى الوظيفة التالية إذا كانت موجودة. هذا مهم لتضمينه في نهاية وظيفتنا – خلاف ذلك، سيتعلق الطلب على هذا الوسيط.

يمكننا اختياريًا تمرير مسار إلى وسيط البرمجيات، والذي سيتعامل فقط مع الطلبات إلى تلك المسار. على سبيل المثال:

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

من خلال تمرير '/request-type' كالمعامل الأول لـ app.use()، سيتم تشغيل هذه الوظيفة فقط للطلبات المُرسلة إلى localhost:3000/request-type.

أعد زيارة نافذة الطرفية الخاصة بك وشغّل تطبيقك:

node server.js

ثم، قم بزيارة localhost:3000/request-type في متصفح الويب الخاص بك. ستعرض نافذة الطرفية الخاصة بك الطابع الزمني للطلب و 'نوع الطلب: GET'.

الآن، دعونا نحاول استخدام وسيط البرمجيات الموجود لتقديم الملفات الثابتة. يأتي Express مع وظيفة وسيط برمجيات مدمجة: express.static. سنستخدم أيضًا وظيفة وسيط البرمجيات للطرف الثالث، serve-index، لعرض قائمة فهرس لملفاتنا.

أولاً، داخل نفس المجلد الذي يوجد فيه خادم express، قم بإنشاء دليل بالاسم public وضع بعض الملفات فيه.

ثم، قم بتثبيت الحزمة serve-index:

npm install serve-index@1.9.1

أولاً، قم بإستيراد حزمة serve-index في أعلى ملف الخادم.

ثم، قم بتضمين الوسيطات express.static و serveIndex وأخبرهم بالمسار الذي يجب الوصول إليه واسم الدليل:

const express = require('express');
const serveIndex = require('serve-index');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.use('/public', express.static('public'));
app.use('/public', serveIndex('public'));

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

الآن، أعد تشغيل الخادم وانتقل إلى localhost:3000/public. ستظهر لك قائمة بجميع ملفاتك!

الاستنتاج

في هذا المقال، قمت بتثبيت واستخدام Express لبناء خادم ويب. كما استخدمت وظائف الوسيط المدمجة والطرف الثالث.

استمر في تعلمك مع كيفية استخدام كائن req في Express، كيفية استخدام كائن res في Express، و كيفية تحديد المسارات وطرق الطلب HTTP في Express.