إطار العمل Express.js

Express.js هو أحد هذه الحلول التي جاءت لمساعدة عشاق Node.js على تطوير تطبيقات ويب على أساس متين ومنظم، إنه إطار عمل صغير (Micro framework) جلب معه عدد من المزايا التي يحتاجها قطعا أي مطور في مشاريعه.
يجب الحذر عند مقارنة Express مع إطارات العمل المعروفة للغات برمجية أخرى، مثلا Symfony أو Laravel بالنسبة ل PHP و Django للغة بايثون، فهذه إطارات عمل ضخمة ومتكاملة، بينما Express.js هو إطار عمل صغير لا يوفر كل مقومات تلك الأطر.
في هذا المقال سنتكلم عن ثلاثة أمور ومزايا مهمة جاء بها إطار العمل Express.js لجعل حياة المطور أسهل وأكثر تنظيما.
1. Routing

من المزايا المهمة والأساسية التي يجب على كل إطارعمل توفيرها للمطورين هي إتاحة نظام لقراءة العناوين (routes) وهذه من أجمل الميزات التي نجدها في Express، نظام Routing الخاص به رائع وسهل الفهم والإستيعاب كما سنرى في الأمثلة أسفله.
أول ما يجب القيام به هو تثبيت إطار العمل Express عن طريق الأمر التالي :
npm install express
1

npm install express



بالطبع هذا الأمر لن يتم تنفيده إذا لم تقم بتثبيت برنامج Node.js على جهازك.
لنفترض بأن لدينا ثلاث صفحات في تطبيقنا ومساراتها كالتالي :
/ /about /contact
1
2
3

/
/about
/contact



للوصول لكل مسار على حدة من داخل ملف الجافاسكريبت، ومن دون إستخدام Express.js، سيتوجب علينا تدبر أمورنا على النحو التالي :

var http = require('http'); var url = require('url'); var server = http.createServer(function(req, res) { var page = url.parse(req.url).pathname; res.writeHead(200, {"Content-Type": "text/plain"}); if (page == '/') { res.write('أنت في الصفحة الرئيسية'); } else if (page == '/about') { res.write('صفحة عن المشروع ؟'); } else if (page == '/contact') { res.write('اتصل بنا'); } res.end(); }); server.listen(8080);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var http = require('http');
var url = require('url');

var server = http.createServer(function(req, res) {
var page = url.parse(req.url).pathname;
res.writeHead(200, {"Content-Type": "text/plain"});
if (page == '/') {
res.write('أنت في الصفحة الرئيسية');
}
else if (page == '/about') {
res.write('صفحة عن المشروع ؟');
}
else if (page == '/contact') {
res.write('اتصل بنا');
}
res.end();
});
server.listen(8080);



نلاحظ بأننا أضفنا وحدتين (Modules) الأولى اسمها http للإتصال بالخادم، والثانية اسمها url لغرض قراءة الرابط وتفكيكه حتى نعرف الصفحة المطلوب عرض محتواها.
هذا جميل لحد اللحظة، ولكن ما ذا لو أردنا إضافة صفحات جديدة ؟ هل سنستمر في إضافة الجمل الشرطية if ؟ وماذا لو كانت عندنا بارامترات في المسار وأردنا قراءتها ؟! وماذا وماذا … إلخ! الأمور ستتعقد أليس كذلك ؟
لا تقلقوا سنرى الآن كيف أن الأمر سهل وعملي مع إطار العمل Express.js.
أنظروا لهذه الشيفرة :
var express = require('express'); var app = express(); app.get('/', function(req, res) { res.setHeader('Content-Type', 'text/plain'); res.end('أنت في الصفحة الرئيسية'); }); app.get('/about', function(req, res) { res.setHeader('Content-Type', 'text/plain'); res.end('صفحة عن المشروع ؟'); }); app.get('/contact', function(req, res) { res.setHeader('Content-Type', 'text/plain'); res.end('اتصل بنا'); }); app.listen(8080);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

app.get('/', function(req, res) {
res.setHeader('Content-Type', 'text/plain');
res.end('أنت في الصفحة الرئيسية');
});

app.get('/about', function(req, res) {
res.setHeader('Content-Type', 'text/plain');
res.end('صفحة عن المشروع ؟');
});

app.get('/contact', function(req, res) {
res.setHeader('Content-Type', 'text/plain');
res.end('اتصل بنا');
});

app.listen(8080);



الكود الآن أصبح أوضح وأكثر تنظيما، بل نستطيع الآن قراءة الروابط التي تحتوي على بارامترات بكل يسر :
app.get('/profile/:user_id', function(req, res) { res.setHeader('Content-Type', 'text/plain'); res.end('البروفايل الخاص بالمستخدم رقم : ' + req.params.user_id); });
1
2
3
4

app.get('/profile/:user_id', function(req, res) {
res.setHeader('Content-Type', 'text/plain');
res.end('البروفايل الخاص بالمستخدم رقم : ' + req.params.user_id);
});



في الرابط نقوم بتمرير الرقم أو id الخاص بالمستخدم وبناء عليه نعرض البروفايل الخاص به من قاعدة البيانات مثلا.
يمكننا كذلك إظهار صفحة 404 إذا كان الصفحة المطلوبة غير موجودة عن طريق إضافة الشيفرة التالية أسفل المسارات Routes.
app.use(function(req, res, next){ res.setHeader('Content-Type', 'text/plain'); res.send(404, 'الصفحة غير موجودة'); });
1
2
3
4

app.use(function(req, res, next){
res.setHeader('Content-Type', 'text/plain');
res.send(404, 'الصفحة غير موجودة');
});



2. نظام القوالب Templates

ربما جربت من قبل شعور رؤية أكواد HTML مختلطة بأكواد جافاسكريبت، بالتأكيد إنه شعور سيء ومحبط، يكفي رؤية هذا لتعرف ماذا أقصد :
res.write('<!DOCTYPE html>'+ '<html>'+ ' <head>'+ ' <meta charset="utf-8" />'+ ' <title>'+page_title+'</title>'+ ' </head>'+ ' <body>'+ ' <p>'+content+'</p>'+ ' </body>'+ '</html>');
1
2
3
4
5
6
7
8
9
10

res.write('<!DOCTYPE html>'+
'<html>'+
' <head>'+
' <meta charset="utf-8" />'+
' <title>'+page_title+'</title>'+
' </head>'+
' <body>'+
' <p>'+content+'</p>'+
' </body>'+
'</html>');



هذا مجرد كود صغير فما بالك لو كان أكبر من ذلك! لا أريد تخيل تلك الذكريات المؤلمة
علينا أن نشكر Express لأنه وضع بين أيدينا نظام قوالب رائع يفصل كود الجافاسكريبت عن HTML حيث يضع الأخيرة في ملفات مستقلة جاعلا بذلك سير العمل أكثر تنظيما واحترافية.
يمكن استخدام عدة أنظمة للقوالب مع إطار العمل Express، مثلا Jade و Haml، ولكننا في هذا الشرح سنختار EJS، فهو بسيط ويفي بالغرض في غالب الأحيان. لنقم بتركيبه أولا :
npm install ejs
1

npm install ejs



لن نكون مضطرين بعد اليوم لخلط الجافاسكريب مع ال HTML، إطار العمل Express يمكننا من استدعاء قوالب .ejs على الشكل التالي :
app.get('/about', function(req, res) { res.render('about.ejs'); });
1
2
3

app.get('/about', function(req, res) {
res.render('about.ejs');
});



الملف about.ejs الذي يتم استدعاؤه وعرض محتواه يوجد في المسار views/about.ejs/.
نظام القوالب EJSبالطبع يمكن تمرير متغيرات لهذه القوالب على هذا المنوال :
app.get('/profile/:user_id', function(req, res) { res.render('profile.ejs', {etage: req.params.user_id}); });
1
2
3

app.get('/profile/:user_id', function(req, res) {
res.render('profile.ejs', {etage: req.params.user_id});
});



هنا نقوم باستدعاء الملف profile.ejs بعد تمرير المتغير user_id له.
المتغير يؤخذ من داخل ملف القالب profile.ejs ويستعمل كالتالي :
<h1>عنوان الصفحة</h1> <p>بروفايل المستخدم رقم : <%= user_id %></p>
1
2

<h1>عنوان الصفحة</h1>
<p>بروفايل المستخدم رقم : <%= user_id %></p>



المتغير قد يكون مصفوفة كذلك وتعرض المعلومات التي بداخله عن طريق حلقة التكرار for كما لو كنت في ملف جافاسكريبت اعتيادي.
لنأخذ هذا المثال :
//ملف الجافاسكريبت app.get('/post/:post_id', function(req, res) { var comments = ['هذا جميل!', 'موضوع رائع، شكرا.', 'محتوى رائع وجميل.']; res.render('post.ejs', {comments: comments}); }); //ملف post.ejs <% for(var i = 0 ; i <= comments.length ; i++) { %> <p> <%= comments[i] %> </p> <% } %>
1
2
3
4
5
6
7
8
9
10
11
12

//ملف الجافاسكريبت
app.get('/post/:post_id', function(req, res) {
var comments = ['هذا جميل!', 'موضوع رائع، شكرا.', 'محتوى رائع وجميل.'];
res.render('post.ejs', {comments: comments});
});

//ملف post.ejs
<%
for(var i = 0 ; i <= comments.length ; i++) {
%>
<p> <%= comments[i] %> </p>
<% } %>



هذا الكود قد يكون مألوفا عندك خاصة إذا كانت لك تجربة ولو قصيرة مع إطار العمل سيمفوني أوغيره.
يمكنكم زيارة الموقع الرسمي لنظام القوالب Embedded JavaScript لمعرفة المزيد حول إمكانياته ومميزاته.
3. Middlewares

ال Middleware (أو الوسيط) هو عبارة عن برنامج صغير له وظيفة معينة ومحددة. وإطار العمل Express مبني على مفهوم ال Middlewares و يويتوفر على عدة أنواع منها، نذكر منها ما يلي :

• cookie-parser : للتعامل مع الكوكيز.
• cookie-session : للتعامل مع الجلسات (sessions).
• CSRF : للحماية من ثغرات CSRF.

في إطار العمل لارافيل هناك مفهوم ال Middlewares كذلك، و Express يقوم باستخدامه بشكل رائع.
Express.js – Middlewaresلنتخيل مثال زائر غير مسجل جاء لموقعك محاولا الدخول للوحة التحكم عن طريق الرابط /dashboard ، هذه طبعا محاولة تطفلية ولا يجب أن تتم بنجاح، لهذا سنقوم بإضافة middleware في أعلى شيفرتنا البرمجية وظيفته الأساسية هي التأكد من أن الذي يريد الدخول للوحة التحكم قد سجل دخوله (Logged In).
var app = require("express")(); function checkLogin() { return false; } app.use(function(req, res, next){ if(checkLogin()) { next(); } else { res.send("المرجو تسجيل الدخول أولا !!!"); } }) app.get("/dashboard", function(req, res, next){ res.send("هذه لوحة التحكم"); }); app.listen(8080);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

var app = require("express")();

function checkLogin()
{
return false;
}
app.use(function(req, res, next){
if(checkLogin())
{
next();
}
else
{
res.send("المرجو تسجيل الدخول أولا !!!");
}
})

app.get("/dashboard", function(req, res, next){
res.send("هذه لوحة التحكم");
});


app.listen(8080);



أولا أنشأنا دالة اسمها checkLogin تقوم بالتأكد من أن الزئر مُعرَّف، ثم بعد ذلك نقوم بالتحقق من قيمتها في ال middleware داخل الدالة app.use() . إذا كان ما ترجعه الدالة checkLogin هو true نمر ل middleware التالي app.get("/dashboard") عن طريق الدالة next() ، وإذا كانت قيمة checkLogin() هي false، أي أن الزائر غير مُعرَّف، يقوم ال middleware بإظهار رسالة خطأ على سبيل المثال.
الشيء الذي يجب الإنتباه إليه جيدا هو أهمية الترتيب عند استخدام ال middlewares، ال middleware الذي يُستدعَى أولا هو الذي يتم تنفيذه أولا. الدالة next تقوم باستدعاء ال middleware التالي من حيث الترتيب في الكود.
هذا مجرد تقديم وشرح بسيطين لمفهوم ال middlewares لإطار العمل Express.js. ينصح دائما بالبحث واستزادة المعلومات في الموقع الرسمي للفريموورك.