ما هو الخادم وما فائدة Node.js

أين يعيش الموقع فعلاً، ما هو API، ولماذا نموذج المستوى 2 لم يكن له مكان يرسل إليه الرسائل.

تتذكّر ذلك النموذج بلا مستلم؟

في المستوى 2، بنيت نموذجاً يفحص رسالة، يقول شكراً… ثم يرمي الرسالة. لم يكن هناك مكان لحفظها. موقعك حتى الآن يستطيع فقط توزيع ملفات جاهزة – لا يستطيع استقبال وتذكّر أي شيء. لذلك تحتاج خادماً. وهذا بالضبط ما ستتعلّم بناءه.

Frontend وbackend

كل تطبيق كبير (Instagram، مدرسة أونلاين، متجر) له نصفان:

Frontend – ما يعمل في متصفح الزائر. HTML، CSS، JavaScript، React. تعرف كل هذا أصلاً!
Backend – برنامج يعمل على خادم. يستقبل الطلبات، يحفظ البيانات، يفرض القواعد. وبفضل Node.js، يمكن كتابته بلغة تعرفها: JavaScript.

كيف يتحدث النصفان؟ عبر API (Application Programming Interface) – عناوين متفق عليها يرد عليها الـ backend. إليك محادثة نموذجية:

Frontend:  GET /api/messages         ("Send me all the messages.")
Backend:   [{ "name": "Grandma", "text": "Lovely website!" }]

Frontend:  POST /api/messages        ("Here's data, save it: ...")
Backend:   { "saved": true }

GET = «أعطني بيانات» (متصفحك يفعل هذا كلما فتحت صفحة).
POST = «إليك بيانات، احفظها» (هذا ما يفعله نموذجك).

البيانات تُرسل بصيغة JSON – تبدو تقريباً ككائنات JavaScript التي تعرفها من الاختبار. صدفة سعيدة؟ لا – JSON اختصار لـ JavaScript Object Notation. إنه في صفّك.

أين يعمل backend كهذا؟

أثناء التطوير، على جهازك (localhost – تعرفه من Vite). في الإنتاج، على جهاز يعمل دائماً ومتصل – إما «شريحة» مستأجرة من خادم (VPS)، أو خدمة تتولى كل شيء لك (Render، Railway…). سنصل إلى النشر في الدرس الأخير.

💡

إذن ماذا كان GitHub Pages؟ استضافة للـ frontend فقط – يوزّع ملفات، لا أكثر. مثالي لموقع المستوى 1–2 (وأيضاً الأكثر أماناً: حيث لا يعمل شيء، لا يمكن اختراق شيء). تحتاج backend في اللحظة التي يجب فيها على موقعك استقبال وتذكّر شيء – رسائل، تسجيلات، مستخدمون.

دورك الآن 💪 (مهمة صغيرة من الفضول)

افتح موقعك المفضّل، اضغط F12، وانتقل إلى تبويب Network. أعد تحميل الصفحة وراقب شلال الطلبات – كل سطر محادثة بين المتصفح وخادم.
أوجد طلباً من نوع GET في القائمة، وآخر يرجع JSON (عمود Type: json أو fetch). انقره وانظر الرد – سترى البيانات التي تُبنى منها الصفحة.
اكتب هذا في console وراقب الـ frontend يطلب بيانات بنفسه:

fetch("https://api.chucknorris.io/jokes/random")
  .then((response) => response.json())
  .then((data) => console.log(data.value));

fetch(...) أمر JavaScript «اتصل بـ API.» في الدرس 9، ستستخدم هذا الأمر بالذات لوصل نموذج بخادمك.

✅

تحقق من نفسك: تستطيع شرح الفرق بين frontend وbackend بكلماتك، وتعرف ما هو GET وPOST وJSON، ورأيت في لوحة Network كيف تتحدث المواقع. في الدرس القادم، ستبني خادماً كهذا بنفسك.

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

الـ frontend يعمل على جهاز الزائر، والـ backend على خادم؛ يتحدثان عبر API برسائل GET (أعطِ) وPOST (احفظ).
البيانات تسري بصيغة JSON – تبدو ككائنات JavaScript.
fetch() طريقة الـ frontend لطلب بيانات من خادم.