دليل استخدام Node.js وإطار العمل Express للمبتدئين

يسمح إطار تطبيقات الويب Express المستخدم في بيئة Node.js بتسريع عمل واجهات برمجة التطبيقات المتينة API وخوادم الويب بسهولة، وهو عبارة عن حزمة خفيفة الحجم لا تحجب ميزات Node.js الأساسية.

سنتعرف في هذا المقال على كيفية تثبيت إطار Express واستخدامه لإنشاء خادم ويب.

ستحتاج خلال هذا المقال إلى:

بيئة تطوير محلية من أجل Node.js.
يتوافق هذا المقال مع كل من الإصدارات Node v15.14.0، و ، express v4.171 و npm v7.10.0، و server-index v1.9.1

إعداد المشروع

افتح واجهة الطرفية Terminal وانشئ مجلدًا للمشروع الجديد، كما يلي:

$ mkdir express-example

انتقل بعدها إلى المجلد الذي أنشأته آنفًا:

$ cd express-example

أصبح بإمكانك الآن استخدام مشروع npm جديد:

$ npm init -y

ثبت حزمة express باستخدام الأمر التالي:

npm install express@4.17.1

أصبح لديك مشروع Express جاهز للاستخدام.

إنشاء خادم Express

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

const express = require('express');

const app = express();

يعمل السطر الأول على جلب وحدة Express module الرئيسية من الحزم التي ثبتها سابقًا، هذه الوحدة هي عبارة عن دالة تُنفَّذ في السطر الثاني لإنشاء المتغير app. يمكنك إنشاء عدة متغيرات app بهذه الطريقة لكل منها طلباتها requests وردودها responses الخاصة بها.

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 عن الطلب المرسل إلى الخادم، ويمكننا استخدامه لمعرفة ما يطلبه العميل client، أما الوسيط res فيعبر عن الرد الذي سنرسله للعميل.

ثم استدعينا دالة send بواسطة res لإظهار الرسالة: ".Successful response".

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.'));

يجب أن نشغل الخادم بمجرد انتهائها من إعداد الطلبات requests، وذلك بتمرير القيمة 3000 إلى الدالة listen التي تخبر المتغير app بالمنفذ port الذي يجب استعماله. يُعد تمرير دالة في المعامل الثاني أمرًا اختياريًا، حيث تُنفذ هذه الدالة عند تشغيل الخادم، الأمر الذي يمكننا من معرفة فيما إذا كان التطبيق يعمل في الطرفية console.

شَغل التطبيق من واجهة الطرفية باستخدام الأمر:

node server.js

اكتب localhost:3000 في متصفح الانترنت، ستلاحظ ظهور رسالة: "Successful response"، وستعرض واجهة الطرفية الرسالة التالية: Example app is listening on port 3000.

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

سنشرح بإيجاز ما هي البرامج الوسيطة Middleware وكيفية إعداد هذا الخادم كخادم ملفات ثابت.

استخدام البرامج الوسيطة Middleware

يمكننا كتابة دوال وسيطة middleware functions في Express لها صلاحية وصول لكل طلبات HTTP القادمة إلى الخادم، ويمكن لهذه الدوال القيام بما يلي:

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

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

سنبدأ بتعلم كيفية كتابة دالة وسيطة خاصة بنا، ثم سنستخدم بعض البرامج الوسيطة لتخديم الملفات الثابتة، ونستدعي ()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.'));

تعالج الدالة الطلبات الواردة إلى localhost:3000/request-type فقط، عند تمرير request-type/ في الوسيط الأول للدالة ()app.use.

شَغل التطبيق من واجهة الطرفية باستخدام الأمر:

$ node server.js

اكتب localhost:3000/request-type في متصفح الانترنت، ستلاحظ أن واجهة الطرفية ستعرض وقت الطلب والرسالة "Request type: GET".

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

أنشئ مجلدًا باسم public داخل المجلد الموجود فيه خادم express، وضع فيه بعض الملفات ثم ثبت حزمة serve-index:

$ npm install serve-index@1.9.1

استورد حزمة serve-indexفي أعلى ملف الخادم، ثم ضَمّن البرنامجين الوسيطين express.static و serve-index وأخبرهما بمسار الوصول للمجلد واسمه:

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.'));