إنشاء مدوّنة باستخدام Node.js وExpress (الجزء الأول)

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

مقدمة عن Node.js وExpress.js

ما هو Node.js؟

Node.js هو بيئة تشغيل مفتوحة المصدر تعتمد على محرك جافا سكريبت V8 الخاص بجوجل، يسمح بتشغيل جافا سكريبت خارج المتصفح، مما يتيح للمطورين بناء تطبيقات خلفية (Backend) باستخدام جافا سكريبت نفسها التي تُستخدم في الواجهة الأمامية. يتميز Node.js بقدرته على التعامل مع عدد كبير من الاتصالات المتزامنة بكفاءة عالية، مما يجعله مناسبًا لبناء تطبيقات شبكية وتطبيقات ويب حقيقية الوقت (Real-time).

ما هو Express.js؟

Express.js هو إطار عمل ويب بسيط ومرن مبني فوق Node.js، يُستخدم لتسهيل بناء تطبيقات الويب وواجهات برمجة التطبيقات (APIs). يوفر Express مجموعة من الوظائف التي تبسط عملية التعامل مع طلبات واستجابات HTTP، إدارة التوجيهات (Routes)، والدعم للملفات الثابتة، مما يسمح بإنشاء تطبيقات قابلة للتوسع بسرعة وسهولة.

لماذا نختار Node.js وExpress لإنشاء مدوّنة؟

• الأداء العالي: بفضل الطبيعة غير المتزامنة (Asynchronous) لـ Node.js، يمكن لتطبيقات Express التعامل مع عدد كبير من الطلبات بشكل فعال دون الحاجة إلى انتظار اكتمال كل عملية على حدة.

• توحيد اللغة البرمجية: باستخدام جافا سكريبت في كل من الواجهة الأمامية والخلفية، يسهل على المطورين العمل في جميع طبقات التطبيق.

• مجتمع كبير ودعم واسع: يتوفر عدد كبير من المكتبات والإضافات التي تُسهل تطوير التطبيقات.

• سهولة التعلم والاستخدام: Express يتمتع بواجهة بسيطة ومنهجية واضحة للتعامل مع الطلبات.

الخطوة الأولى: تجهيز بيئة العمل

لبداية مشروع مدوّنة باستخدام Node.js وExpress، يجب تجهيز بيئة العمل على جهاز المطور، وذلك عبر تثبيت الأدوات اللازمة:

1. تثبيت Node.js وnpm

يتم تحميل Node.js من الموقع الرسمي nodejs.org، حيث يتضمن الحزمة أداة npm (Node Package Manager) التي تُستخدم لإدارة مكتبات جافا سكريبت.

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

بعد تثبيت Node.js، يتم إنشاء مجلد مخصص للمشروع على الجهاز:

bash
CopyEdit
mkdir my-blog
cd my-blog

3. تهيئة المشروع

لتوليد ملف package.json الذي يحتوي على معلومات المشروع والمكتبات المستخدمة، يتم تنفيذ الأمر التالي:

bash
CopyEdit
npm init -y

يُنشئ هذا الأمر ملف package.json بالقيم الافتراضية.

تثبيت Express وإعداد الخادم الأساسي

1. تثبيت Express

لتثبيت Express في المشروع، نستخدم الأمر:

bash
CopyEdit
npm install express

2. إنشاء ملف الخادم الأساسي

يتم إنشاء ملف جديد باسم app.js أو server.js ليكون نقطة دخول التطبيق.

محتوى الملف الأساسي:

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

// إعداد المنفذ الذي سيستمع له الخادم
const PORT = process.env.PORT || 3000;

// إعداد مسار رئيسي
app.get('/', (req, res) => {
  res.send('مرحبًا بك في مدونتي!');
});

// بدء تشغيل الخادم
app.listen(PORT, () => {
  console.log(`الخادم يعمل على المنفذ ${PORT}`);
});

في هذا الملف، قمنا باستيراد مكتبة Express، وأنشأنا تطبيقًا جديدًا، وقمنا بتحديد مسار رئيسي (/) يعيد رسالة ترحيبية بسيطة.

تشغيل التطبيق ومراجعة النتائج

لتشغيل التطبيق، نستخدم الأمر التالي في الطرفية (Terminal):

bash
CopyEdit
node app.js

عند زيارة الرابط http://localhost:3000/ في المتصفح، ستظهر رسالة الترحيب: “مرحبًا بك في مدونتي!”.

تنظيم المشروع بطريقة أفضل

لتحقيق هيكلية مرتبة وقابلة للتطوير، يُفضل تنظيم ملفات المشروع ضمن مجلدات محددة لكل نوع من الملفات. مثال على هيكلية بسيطة:

csharp
CopyEdit
my-blog/
│
├── app.js          # الملف الرئيسي للخادم
├── package.json    # معلومات المشروع والمكتبات
├── routes/         # مجلد تعريف المسارات
│   └── index.js    # تعريف مسارات الواجهة
├── views/          # مجلد لملفات القوالب (Templates)
├── public/         # مجلد للملفات الثابتة (CSS, JS, صور)

إضافة نظام القوالب (Template Engine)

في تطبيقات الويب، تحتاج إلى طريقة ديناميكية لإنشاء صفحات HTML. هنا يظهر دور محركات القوالب التي تسمح بإدخال بيانات متغيرة داخل قوالب HTML.

اختيار محرك القوالب

من أشهر محركات القوالب المستخدمة مع Express:

• EJS (Embedded JavaScript)

• Pug (سابقًا Jade)

• Handlebars

تثبيت EJS

لأسباب البساطة والانتشار، سنستخدم EJS. لتثبيته:

bash
CopyEdit
npm install ejs

تهيئة Express لاستخدام EJS

في ملف app.js نضيف:

javascript
CopyEdit
app.set('view engine', 'ejs');

إنشاء ملف قالب

في مجلد views/، نُنشئ ملفًا باسم index.ejs يحتوي على:

html
CopyEdit
html>
<html lang="ar">
<head>
  <meta charset="UTF-8" />
  <title>مدونتيtitle>
head>
<body>
  <h1>مرحبًا بك في مدونتيh1>
  <p>هذه الصفحة مُنشأة باستخدام EJS وExpress.p>
body>
html>

تعديل المسار الرئيسي لاستخدام القالب

في app.js:

javascript
CopyEdit
app.get('/', (req, res) => {
  res.render('index');
});

الآن عند زيارة الصفحة الرئيسية، يتم عرض صفحة HTML حقيقية بدلاً من النص العادي.

إضافة ملفات ثابتة (Static Files)

لتخصيص واجهة المدونة، من الضروري إضافة ملفات CSS وJavaScript وصور. نقوم بتحديد مجلد public للملفات الثابتة:

javascript
CopyEdit
app.use(express.static('public'));

في مجلد public يمكننا وضع ملفات CSS مثل style.css التي ترتبط داخل القالب index.ejs:

html
CopyEdit
<link rel="stylesheet" href="/style.css" />

إنشاء مسارات إضافية للمدوّنة

لإنشاء صفحات إضافية مثل صفحة “من نحن” أو “مقالات”، يمكننا إنشاء ملفات قوالب جديدة ضمن مجلد views، ومسارات جديدة في app.js أو ضمن ملفات في مجلد routes.

مثال في app.js:

javascript
CopyEdit
app.get('/about', (req, res) => {
  res.render('about');
});

تخزين بيانات المقالات (تهيئة قاعدة بيانات بسيطة)

حتى الآن، التطبيق يعرض صفحات ثابتة فقط. لتطوير مدوّنة حقيقية، يجب تخزين وإدارة المقالات بطريقة ديناميكية.

اختيار قاعدة بيانات

للبدء، يمكن استخدام قاعدة بيانات خفيفة مثل MongoDB أو حتى ملفات JSON للتخزين المؤقت.

• MongoDB: قاعدة بيانات NoSQL شهيرة، يمكن التعامل معها بسهولة عبر مكتبة Mongoose مع Node.js.

• JSON: مناسب للتطبيقات التجريبية البسيطة.

تثبيت Mongoose (في حالة MongoDB)

bash
CopyEdit
npm install mongoose

إعداد الاتصال بقاعدة البيانات

في app.js:

javascript
CopyEdit
const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/myblog', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'فشل الاتصال بقاعدة البيانات'));
db.once('open', () => {
  console.log('تم الاتصال بقاعدة البيانات بنجاح');
});

تعريف نموذج المقالة (Article Model)

يتم إنشاء نموذج (Schema) للمقالات لتحديد بنية البيانات في قاعدة MongoDB.

في مجلد جديد باسم models نُنشئ ملف Article.js:

javascript
CopyEdit
const mongoose = require('mongoose');

const articleSchema = new mongoose.Schema({
  title: { type: String, required: true },
  content: { type: String, required: true },
  date: { type: Date, default: Date.now },
});

module.exports = mongoose.model('Article', articleSchema);

إضافة صفحات عرض المقالات

عرض جميع المقالات

في ملف app.js:

javascript
CopyEdit
const Article = require('./models/Article');

app.get('/articles', async (req, res) => {
  try {
    const articles = await Article.find().sort({ date: -1 });
    res.render('articles', { articles });
  } catch (err) {
    res.status(500).send('حدث خطأ أثناء جلب المقالات');
  }
});

إنشاء قالب لعرض المقالات (views/articles.ejs)

html
CopyEdit
html>
<html lang="ar">
<head>
  <meta charset="UTF-8" />
  <title>المقالاتtitle>
head>
<body>
  <h1>جميع المقالاتh1>
  <ul>
    <% articles.forEach(article => { %>
      <li>
        <h2><%= article.title %>h2>
        <p><%= article.content.substring(0, 100) %>...p>
        <small>تاريخ النشر: <%= article.date.toLocaleDateString() %>small>
      li>
    <% }) %>
  ul>
body>
html>

التعامل مع إنشاء مقال جديد

إعداد استقبال البيانات من النموذج

لإضافة مقالات جديدة، نحتاج إلى صفحة تعرض نموذج إدخال المقال، ومسار يعالج بيانات النموذج.

1. إعداد Middleware لقراءة بيانات POST

javascript
CopyEdit
app.use(express.urlencoded({ extended: false }));

2. إنشاء صفحة النموذج (views/new-article.ejs)

html
CopyEdit
html>
<html lang="ar">
<head>
  <meta charset="UTF-8" />
  <title>إنشاء مقال جديدtitle>
head>
<body>
  <h1>إضافة مقال جديدh1>
  <form action="/articles" method="POST">
    <label for="title">عنوان المقال:label><br />
    <input type="text" id="title" name="title" required /><br /><br />
    <label for="content">محتوى المقال:label><br />
    <textarea id="content" name="content" rows="10" cols="50" required>textarea><br /><br />
    <button type="submit">نشر المقالbutton>
  form>
body>
html>

3. إنشاء مسار لعرض النموذج

javascript
CopyEdit
app.get('/articles/new', (req, res) => {
  res.render('new-article');
});

4. معالجة إرسال النموذج وتخزين المقال في قاعدة البيانات

javascript
CopyEdit
app.post('/articles', async (req, res) => {
  const { title, content } = req.body;
  try {
    const article = new Article({ title, content });
    await article.save();
    res.redirect('/articles');
  } catch (err) {
    res.status(500).send('حدث خطأ أثناء حفظ المقال');
  }
});

تحسينات إضافية وملخص للجزء الأول

في هذا الجزء الأول من بناء مدوّنة باستخدام Node.js وExpress، تم التركيز على:

• إعداد بيئة العمل.

• تثبيت Express وإنشاء الخادم الأساسي.

• إعداد محرك القوالب EJS لعرض صفحات HTML ديناميكية.

• إضافة ملفات ثابتة مثل CSS لتحسين واجهة المستخدم.

• إنشاء هيكلية منظمة للمشروع.

• إعداد قاعدة بيانات MongoDB باستخدام Mongoose.

• إنشاء نموذج (Schema) للمقالات.

• إنشاء صفحات عرض المقالات وقائمة بها.

• إضافة إمكانية إنشاء مقالات جديدة عبر نموذج إدخال.

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

جدول ملخص للخطوات الأساسية لإنشاء مدونة باستخدام Node.js وExpress

المراجع

• الموقع الرسمي لـ Node.js: https://nodejs.org

• توثيق Express.js: https://expressjs.com

• توثيق Mongoose: https://mongoosejs.com

• دليل EJS: https://ejs.co

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