خادم صغير مع Express

ابنِ خادمك الخاص في Node.js وExpress. أول API لك يجيب على أول طلب.

شاهد معي: إعداد خادم

Express أشهر حزمة لبناء خوادم في Node.js – يحوّل المهمة إلى بضعة أسطر فقط. الخادم مشروع منفصل، بعيداً عن تطبيق React (تذكّر: frontend وbackend نصفان). في الطرفية:

cd Desktop
mkdir my-server
cd my-server
npm init -y
npm install express

mkdir ينشئ مجلداً (make directory)،
npm init -y يعدّ مشروع Node.js جديداً (ينشئ package.json)،
npm install express يحمّل Express.

افتح المجلد في VS Code وأنشئ ملفاً اسمه server.js:

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

// When someone sends a GET to /api/hello, respond
app.get("/api/hello", (request, response) => {
  response.json({ message: "Hi! This is your own server. 🎉" });
});

app.listen(3900, () => {
  console.log("Server running at http://localhost:3900");
});

شغّله:

node server.js

وافتح http://localhost:3900/api/hello في متصفحك. هل ترى رد JSON؟ لقد بنيت خادماً للتو. بلا سحر – 10 أسطر.

ما يحدث في الكود:

require("express") – استعِر حزمة (نسخة الخادم من import).
app.get("/api/hello", ...) – «أجب على طلبات GET بهذا العنوان.» زوج العنوان + الرد يسمى endpoint.
response.json({...}) – أرسل JSON.
app.listen(3900) – استمع على المنفذ 3900. (Vite يعمل على 3901، والخادم على 3900 – برنامجان لا يمكنهما الاستماع على نفس المنفذ.)

توقف الخادم بـ Ctrl+C. وانتبه: بعد كل تغيير في الكود، يجب الإيقاف وإعادة التشغيل – الخادم ليس Vite، لا يحدّث نفسه.

شاهد معي: خادم ببيانات

الخادم عادة يوزّع بيانات. أضف endpoint ثانياً فوق listen:

const results = [
  { opponent: "Lakeside", score: "3:1", home: true },
  { opponent: "Northgate", score: "2:2", home: false },
  { opponent: "Elmwood", score: "4:0", home: true },
];

app.get("/api/results", (request, response) => {
  response.json(results);
});

أعد تشغيل الخادم وافتح http://localhost:3900/api/results – بياناتك، عبر API. هكذا بالضبط يعمل كل موقع كبير (فقط بقاعدة بيانات بدل array).

دورك الآن 💪

شغّل خادماً حسب الدليل.
أضف endpoint ببيانات من مشروعك: 🏫 /api/menu (array وجبات للأسبوع) · 🙋 /api/favorites (أفضل ألعابك/كتبك) · 🌍 /api/trips (قائمة رحلات) · ⚽ /api/results (نتائج مباريات).
أضف endpoint مرحاً /api/random يرجع رسالة مختلفة كل مرة:

const messages = ["We're winning today!", "Practice at 5 PM!", "Let's go, Eagles!"];

app.get("/api/random", (request, response) => {
  const random = messages[Math.floor(Math.random() * messages.length)];
  response.json({ message: random });
});

جرّب كل الـ endpoints في متصفحك – ثم جرّب استدعاء واحد بـ fetch() من الـ console، كما تعلّمت في الدرس السابق.

⚠️

«Cannot GET /api/…» تعني أن الـ endpoint غير موجود – تحقق من خطأ إملائي في العنوان ومن أنك أعدت تشغيل الخادم بعد تغييره. «EADDRINUSE» تعني أن المنفذ 3900 مستخدم أصلاً – ربما لديك خادم قديم في طرفية أخرى؛ أوجده وأوقفه (Ctrl+C).

✅

تحقق من نفسك: خادمك يعمل على المنفذ 3900 ويجيب على عدة endpoints ببيانات JSON خاصة بك. تعرف الـ frontend، وتبدأ بالـ backend – يبقى فقط وصلهما. سنفعل ذلك بالضبط في الدرس القادم مع سجل الزوار.

ما ستخرج به من هذا الدرس

خادم في Express: npm init -y، npm install express، node server.js، الإيقاف بـ Ctrl+C، إعادة التشغيل بعد كل تغيير.
Endpoint = عنوان + رد: app.get("/api/something", (request, response) => response.json(...)).
الـ frontend (3901) والـ backend (3900) برنامجان على منفذين.