الخاتمة الكبيرة: النشر على الإنترنت

انقل تطبيقك كله إلى الإنترنت – والتفت إلى الرحلة من أول <h1> حتى هنا.

الخطوة الأخيرة في الرحلة

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

نشر الـ frontend (React)

Vite يستطيع تحويل تطبيقك إلى ملفات جاهزة بأمر واحد:

npm run build

هذا ينشئ مجلد dist/ – HTML وCSS وJavaScript عادي. وأنت تعرف أين تضعه: موقع ثابت، كما في المستوى 1!

GitHub Pages – ارفع محتوى dist/ إلى repository، كما تعرف من المستوى 1.
أو بأسهل، Netlify / Vercel – مجانيان، تربطهما بحساب GitHub، وينشران تلقائياً مع كل تغيير. جرّب أحدهما مع أحد الوالدين؛ الإعداد الموجّه يمرّرك في بضع نقرات.

نشر الـ backend (Node.js)

الخادم يحتاج جهازاً يعمل دائماً. لهذا خدمات مثل Render أو Railway – لديهما خطط مجانية تكفي لمشروع مدرسي:

ارفع مجلد my-server إلى repository خاص على GitHub (بلا node_modules – يُثبَّت على الخادم تلقائياً).
على render.com (مع أحد الوالدين)، اختر New → Web Service، صل repository على GitHub، واضبط: Build Command npm install، Start Command node server.js.
Render يعطيك عنواناً مثل https://my-server.onrender.com. جرّب .../api/messages في متصفحك – API لك حي على الإنترنت!
تفصيل أخير: في الـ frontend، استبدل كل http://localhost:3900 بعنوان الخادم الجديد، وانشر الـ frontend مجدداً.

⚠️

قبل أن تطلق سجل الزوار إلى العالم، فكّر كحارس: أي شخص على الإنترنت يمكنه إيجاده. أبقِ فحوصات طول الرسالة على الخادم (لديكها من الدرس السابق!)، ولا تعرض الرسائل كـ HTML خام (React يحميك من هذا تلقائياً – سبب آخر لاستخدامه)، واتفق مع أحد الوالدين على مراجعة السجل من حين لآخر. المواقع الكبيرة لديها فرق كاملة لهذا – يسمى الاعتدال (moderation).

🏆 تهانينا، أيها المعلم!

خذ لحظة للنظر إلى حيث بدأت:

المستوى 1: ملف فارغ → <h1>It works!</h1> → موقع كامل من HTML وCSS على GitHub Pages.
المستوى 2: متغيرات، شروط، functions → وضع داكن، معرض، اختبار، نموذج.
المستوى 3: الطرفية، Node.js، React، components، state، Express، API → تطبيق full-stack على الإنترنت.

ما تعرفه الآن هو الأساس الحقيقي لحرفة مطوّر الويب. ليس نسخة لعبة – الأساس الفعلي. نفس الأدوات، نفس العمليات، نفس طريقة التفكير كما في الشركات الحقيقية.

إلى أين بعد ذلك؟

اتجاهات قليلة تتبع طبيعياً من هنا:

قواعد البيانات – لتبقى الرسائل بعد إعادة تشغيل الخادم (SQLite أصدق بداية).
TypeScript – JavaScript مع فحص أخطاء؛ معيار في الشركات.
Git في الطرفية – git add، git commit، git push بدل رفع الملفات يدوياً.
فكرتك الخاصة – أفضل معلّم موجود. تطبيق لصفك؟ جدول بطولة لناديك؟ الآن تعرف كيف تبنيه.

✅

تحقق من نفسك (ووداعاً): الـ frontend والـ backend يعملان على عناوين عامة، وسجل الزوار يقبل رسائل من حول العالم. أرسل العنوان لعائلتك – ولا تنسَ أن تخبرهم أنك بنيت كل شيء بيديك. 🚀

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

Frontend: npm run build → ملفات ثابتة → GitHub Pages/Netlify/Vercel.
Backend: repository على GitHub → Render/Railway → عنوان API عام → استبدل localhost في الـ frontend.
تطبيق عام مسؤولية: فحوصات على الخادم وعين بالغ تراقب.