تعلم Backend من الصفر: دليل شامل لـNode.js وExpress وREST API وAuthentication

1. يعني إيه Backend؟

مخطط توضيحي للعملية:

المستخدم (يضغط على زر "عرض الملف")
  ⬇️
الـ Frontend (يرسل طلب API Request)
  ⬇️
الـ Backend (يستقبل الطلب ويتحقق من الصلاحيات)
  ⬇️
الـ Database (يبحث الـ Backend عن الملف فيها)
  ⬇️
الـ Backend (يسترجع الملف ويجهزه في شكل API Response)
  ⬇️
الـ Frontend (يستقبل الرد ويعرض الملف للمستخدم)

مقارنة: Frontend ضد Backend

2. يعني إيه Node.js؟

قديماً كانت JavaScript تعمل فقط داخل المتصفح لإضافة تأثيرات للواجهة. بفضل Node.js، أصبح بإمكانك استخدام نفس لغة JS لكتابة أكواد الـ Backend والتواصل مع قواعد البيانات.

JavaScript + Node.js Runtime = إمكانية بناء خوادم وبرمجيات خارج المتصفح

أشهر استخدامات Node.js:

• بناء REST APIs السريعة للتطبيقات.
• التطبيقات اللحظية (Real-Time Applications) مثل تطبيقات الشات (باستخدام Socket.io).
• تطبيقات الـ Single Page Applications (SPA) بالتعاون مع React و Angular.
• أدوات سطر الأوامر (CLI Tools).

3. Node.js ولا PHP؟

💡 الخلاصة: إذا كنت تعرف JavaScript (من الـ Frontend)، فإن Node.js هو المسار الطبيعي والأسرع لك كـ Full-Stack Developer.

4. يعني إيه Express.js؟

لو Node.js هو المحرك، فـ Express.js هو الدركسيون وأدوات التحكم اللي بتسهل عليك القيادة وتنظيم الكود والـ Requests والـ Responses والـ Middleware.

5. إزاي أعمل Server باستخدام Node.js وExpress؟

خطوات بناء خادم (Server) بسيط جداً من الصفر:

1. قم بإنشاء مجلد جديد للمشروع وقم بتهيئته:

npm init -y

2. قم بتثبيت إطار عمل Express:

npm install express

3. أنشئ ملفاً باسم server.js واكتب هذا الكود:

const express = require("express");

// تهيئة التطبيق
const app = express();

// إنشاء مسار بسيط
app.get("/", (req, res) => {
  res.send("Hello Backend!");
});

// تشغيل السيرفر على البورت 3000
app.listen(3000, () => {
  console.log("Server is running on http://localhost:3000");
});

شرح الكود:

• express(): لإنشاء نسخة من التطبيق.
• app.get(): للاستماع لأي طلب من نوع GET يأتي على المسار الرئيسي /.
• req: الـ Request (الطلب الذي أرسله المستخدم، مثل بياناته).
• res: الـ Response (الرد الذي سيرسله الخادم، مثل النص "Hello Backend!").
• app.listen(3000): يخبر الخادم بأن يظل في وضع الاستماع للطلبات على المنفذ (Port) رقم 3000.

لتشغيله، اكتب في الـ Terminal: node server.js وافتح المتصفح على http://localhost:3000.

6. إزاي أعمل REST API؟

أهم الـ HTTP Methods في REST API:

• GET: لجلب البيانات (قراءة).
• POST: لإنشاء بيانات جديدة (مثلاً: تسجيل مستخدم جديد).
• PUT / PATCH: لتحديث أو تعديل بيانات موجودة.
• DELETE: لحذف بيانات.

مثال لتصميم مسارات (Endpoints) للـ API:

GET    /api/users       // جلب قائمة كل المستخدمين
GET    /api/users/1     // جلب تفاصيل المستخدم رقم 1
POST   /api/users       // إضافة مستخدم جديد للبيانات
PATCH  /api/users/1     // تعديل بعض بيانات المستخدم رقم 1
DELETE /api/users/1     // حذف المستخدم رقم 1

7. يعني إيه CRUD؟

كيف ترتبط الـ CRUD بالـ HTTP Methods؟

8. إزاي أعمل Login وRegister؟

بناء نظام تسجيل الدخول ليس مجرد مطابقة اسم وباسورد. هناك هندسة (Architecture) أمنية يجب اتباعها.

دورة الـ Register (إنشاء حساب جديد):

1. المستخدم يملأ الفورم (Frontend) ويرسل بياناته بطلب POST /register.
2. الـ Backend يتأكد أولاً أن البيانات صحيحة والإيميل غير مستخدم (Validation).
3. الـ Backend يقوم بتشفير الباسورد (Password Hashing) باستخدام مكتبات مثل bcrypt، لا نخزن الباسورد كنص صريح أبداً!
4. يتم حفظ البيانات المشفرة في الـ Database ويرد الـ Backend برسالة "تم بنجاح".

دورة الـ Login (تسجيل الدخول):

1. المستخدم يرسل إيميل وباسورد بطلب POST /login.
2. الـ Backend يبحث عن الإيميل في الـ Database.
3. الـ Backend يقارن الباسورد المدخل بالباسورد المُشفر المخزن لديه.
4. إذا كانا متطابقين، يقوم الـ Backend بإنشاء Session أو Token (مثل JWT) وإرساله للـ Frontend كدليل على صحة هوية المستخدم.

⚠️ لا تعتمد أبداً على الـ Frontend وحده للتحقق من أمان النظام (Security).

9. إزاي أعمل Authentication؟

نُطبق الـ Authentication عبر عدة طرق، أشهرها:

• الجلسات (Sessions & Cookies): كان الأسلوب الشائع قديماً، حيث يحتفظ الخادم بسجل للمسجلين في الذاكرة ويربطهم بـ Cookie في المتصفح.
• الرموز (Tokens - JWT): هو الأسلوب الأحدث والأكثر توافقاً مع تطبيقات React/Vue والـ REST APIs الحديثة (Stateless).

10. الفرق بين Authentication وAuthorization

11. يعني إيه JWT؟

مخطط عمل الـ JWT:

1. تسجيل الدخول ببيانات صحيحة.
2. السيرفر يصنع Token (JWT) ويوقع عليه بمفتاح سري ويرسله لك.
3. يقوم الـ Frontend بحفظ هذا الـ Token.
4. في أي طلب لاحق لبيانات خاصة، يرسل الـ Frontend الـ Token مع الطلب.
5. يتأكد السيرفر من صحة التوقيع على الـ Token، وإذا كان سليماً، يسمح بالعملية.

⚠️ تحذير هام: الـ JWT ليس "مُشفراً" بالكامل، بل هو "مُوقع" لضمان عدم تلاعبه. الجزء المسمى (Payload) بداخله يمكن لأي شخص قراءته بسهولة. لذا، لا تضع أبداً الباسوردات أو معلومات حساسة داخل الـ Token! ضع فقط المعرف (ID) والصلاحية (Role).

12. إزاي أربط Backend بالFrontend؟

الربط يتم عن طريق إرسال HTTP Requests من الـ Frontend (مثل React) إلى عنوان الـ Backend API URL واستقبال الـ JSON.

مثال باستخدام fetch() في الـ Frontend:

// كود داخل مشروع React أو JavaScript عادي
fetch("http://localhost:3000/api/users")
  .then(response => {
    // التحقق من حالة الرد
    if (!response.ok) {
      throw new Error("حدث خطأ في الشبكة");
    }
    return response.json(); // تحويل الرد إلى JSON
  })
  .then(data => {
    console.log(data); // هنا البيانات القادمة من الـ Backend
    // يمكنك حفظها في الـ State لعرضها للمستخدم
  })
  .catch(error => console.error("Error:", error));

أشياء ستواجهها عند الربط:

• مشكلة CORS (Cross-Origin Resource Sharing): ستحدث عندما يحاول Frontend يعمل على localhost:3000 التحدث مع Backend على localhost:5000. يجب تفعيل مكتبة cors في الـ Backend للسماح للواجهة بالاتصال به.
• Loading State: يجب وضع مؤشر تحميل (Spinner) في الواجهة أثناء انتظار الرد من الخادم.
• Error Handling: معالجة الأخطاء (مثل تعطل الخادم) وإظهار رسالة لطيفة للمستخدم بدلاً من انهيار الواجهة.

13. HTTP Status Codes التي يجب أن تعرفها

عندما يرد الـ Backend، يُرسل رقم يسمى Status Code ليخبر الواجهة بحالة الطلب.

14. إزاي أرفع Backend Online؟

رفع الـ Backend أصعب قليلاً من واجهات المواقع الثابتة؛ لأنه يحتاج إلى بيئة تشغيل (Server) تعمل على مدار الساعة وتستطيع الاتصال بقاعدة البيانات.

الخطوات العامة للـ Deployment:

1. تأكد من تشغيل المشروع ونجاحه محلياً (Local).
2. قم برفع الكود الخاص بالـ Backend على GitHub.
3. اختر منصة استضافة تدعم Node.js (مثل Render, Railway, DigitalOcean App Platform، أو VPS).
4. قم بربط الـ Repository الخاص بك بالمنصة.
5. حدد الـ Build Command (إن وُجد) والـ Start Command (غالباً node server.js أو npm start).
6. قم بإضافة Environment Variables في لوحة تحكم المنصة (القسم التالي يشرحها).
7. اضغط Deploy، واحتفظ بالـ URL الجديد للـ API.
8. في الـ Frontend، قم بتغيير روابط fetch() من localhost إلى الرابط الجديد الذي حصلت عليه.

15. يعني إيه Environment Variables؟

لا يجب أبداً، بأي حال من الأحوال، كتابة كلمات السر أو روابط قواعد البيانات الحقيقية مكشوفة في كود الخادم ورفعه على GitHub. أي شخص يمكنه رؤيتها وسرقة بياناتك.

مثال لملف .env مخفي محلياً:

PORT=3000
DATABASE_URL=mongodb+srv://admin:[email protected]/mydb
JWT_SECRET=super_secret_key_12345!

في كود الـ Node.js، نصل إليها عن طريق process.env.DATABASE_URL.
عند رفع الكود لـ GitHub، نتأكد من وضع ملف .env داخل ملف .gitignore حتى لا يتم رفعه. ثم نضع هذه المتغيرات في لوحة تحكم منصة الـ Hosting يدوياً.

مشروع Backend للمبتدئين: User Management API

لبناء خبرة حقيقية، قم بإنشاء مشروع كامل كالتالي:

تفاصيل المشروع:

• التكنولوجيا: Node.js, Express, MongoDB (عبر Mongoose).
• Auth System: تطبيق Login و Register مع تشفير الباسوردات وإنتاج JWT.
• CRUD: إضافة، قراءة، تعديل، وحذف بيانات المستخدمين.
• Protected Routes: مسارات لا يمكن للمستخدم العادي دخولها إلا بالـ Token الصحيح.
• Roles: ميزة الـ Admin الذي يحق له وحده حذف مستخدمين (Authorization).

هيكلة مجلدات المشروع (Architecture) المقترحة:

src/
├── config/         # إعدادات الاتصال بقاعدة البيانات
├── models/         # تصميم البيانات (مثل جدول المستخدم User Schema)
├── controllers/    # العمليات البرمجية (المنطق) الخاصة بكل مسار
├── routes/         # تعريف مسارات الـ API وربطها بالـ Controllers
├── middleware/     # فحص الـ Tokens أو التحقق من البيانات قبل وصولها للـ Controller
└── app.js          # نقطة انطلاق السيرفر الأساسية

التقسيم الجيد (Architecture) يجعل مشروعك قابلاً للصيانة وإضافة ميزات جديدة دون فوضى.

أهم قواعد الأمان (Security) التي يجب أن تعرفها

الـ Backend هو حائط الصد الأساسي لأمان التطبيق. كمبتدئ، تذكر هذه القواعد دائماً:

• لا تخزن كلمات المرور كنص صريح: استخدم مكتبة مثل bcrypt لعمل Hashing.
• أخفِ أسرارك: استخدم الـ Environment Variables (ملف .env) لكل ما هو سري وتأكد أنه لا يُرفع على GitHub.
• تحقق من المدخلات (Validate Input): لا تثق أبداً في البيانات القادمة من الـ Frontend. إذا كنت تتوقع رقماً وتلقيت نصاً، ارفض الطلب لحماية قاعدة البيانات من الثغرات.
• لا ترسل أخطاء السيرفر التفصيلية (Stack Trace) للمستخدم: في مرحلة الـ Production، أرسل رسالة خطأ عامة مثل "خطأ داخلي" حتى لا تكشف تفاصيل بنية خادمك للـ Hackers.
• استخدم HTTPS: لتشفير البيانات المنتقلة بين المتصفح والخادم حتى لا يتم اعتراضها.

ماذا أتعلم بعد Backend؟ (Roadmap)

مسار تعلم Backend المنطقي خطوة بخطوة:

الأسئلة الشائعة (FAQ)