النشر على الإنترنت

النشر: ماذا يعني

حتى الآن، يعيش تطبيقك في أداتك أو على حاسوبك: أنت وحدك تستطيع استخدامه. النشر (déployer) يعني نسخ تطبيقك إلى خادم متاح من الإنترنت، يقدّمه لأي شخص يفتح العنوان الصحيح. النتيجة الملموسة: رابط من نوع mon-app.vercel.app يستطيع توم كتابته على السبورة، ويفتحه كل تلميذ على هاتفه.

خبر سار لتطبيق مثل تطبيقك: الأمر مجاني وسريع ومؤتمت إلى حد كبير. التطبيقات «الساكنة» (HTML وCSS وJavaScript، بدون خادم خاص بك) هي الأسهل استضافة في العالم — ولهذا بالضبط اخترنا هذا الأساس التقني في الفصل 3. الخيارات البسيطة في البداية تؤتي ثمارها الآن.

المنصات المجانية

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

حالة خاصة: إن بنيت تطبيقك على Lovable أو v0 أو Bolt أو Replit، فهذه المنصات تقدم زر «Publish» أو «Deploy» مدمجًا يفعل كل شيء بنقرة واحدة. إنه الطريق الأسهل — استخدمه لأول نشر لك، وستستكشف Vercel أو Netlify عندما تحتاجهما.

الطريقة الأبسط: دون سطر أوامر

إن كان Git والطرفية لا يزالان يخيفانك، يوجد طريق دون أي أمر: السحب والإفلات في Netlify. تطلب من أداتك تصدير أو تنزيل ملفات تطبيقك (مجلد يحوي index.html والباقي)، تفتح صفحة الإيداع في Netlify، وتسحب المجلد إلى المنطقة المخصصة. بعد ثلاثين ثانية، لتطبيقك رابط عام.

لهذه الطريقة حدّ: عند كل تعديل على تطبيقك، يجب إعادة سحب المجلد يدويًا. وهي ممتازة لأول نشر أو لتطبيق قليل التغيير. أما إن كنت تعدّل كثيرًا، فطريق Git يصبح أكثر راحة — كل حفظة مدفوعة تحدّث الموقع تلقائيًا.

الطريق الكامل مع Git وVercel

النشر «الاحترافي» يتبع المنطق نفسه دائمًا: كودك يعيش في مستودع Git مستضاف على GitHub، والمنصة (Vercel أو Netlify) تراقب هذا المستودع. كلما دفعت تحديثًا، تعيد بناء موقعك ونشره تلقائيًا. إنه «push to deploy» الشهير (الدفع للنشر) — لن تهتم بعد الآن بالنشر أبدًا، إنه يتبع عملك.

لست بحاجة لحفظ الإجراء: اطلب من الذكاء الاصطناعي إرشادك، خطوة بخطوة، محددًا مستواك. إليك الموجّه الذي يستخدمه توم:

أرشدني لنشر هذا التطبيق على Vercel، خطوة بخطوة، انطلاقًا من الصفر.
لم أستخدم Git ولا Vercel من قبل. لديّ حساب GitHub جديد تمامًا.
لكل خطوة: قل لي أين أنقر أو أي أمر أكتب، واشرح في جملة واحدة فائدتها.
انتظر تأكيدي قبل الانتقال إلى الخطوة التالية.

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

# ربط مشروعك المحلي بالمستودع المنشأ على GitHub:
git remote add origin https://github.com/ton-compte/mon-app.git

# إرسال كودك إلى GitHub:
git push -u origin main

# ثم على vercel.com: « Add New Project » ← استيراد المستودع ← Deploy.

flowchart LR
  L["التطبيق على حاسوبك"] --> G["مستودع Git"]
  G --> V["Vercel / Netlify"]
  V --> U["رابط URL عام"]
  U --> F["ملاحظات المستخدمين"]
  F -.->|"تحسينات"| L

التحقق من تطبيقك على الإنترنت

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

• هل يُحمَّل التطبيق، دون صفحة بيضاء أو خطأ 404؟
• هل يعمل المسار الرئيسي من البداية إلى النهاية (إضافة، تأشير، رؤية السلسلة)؟
• هل تستمر البيانات بعد إعادة تحميل الصفحة؟
• هل العرض صحيح على الهاتف: نصوص مقروءة، أزرار قابلة للنقر بالإبهام؟

إن انكسر شيء على الإنترنت بينما كان يعمل محليًا، لا داعي للذعر: إنه أمر كلاسيكي جدًا. انسخ الخطأ من وحدة التحكم (F12، حتى على الإنترنت) وصِف للذكاء الاصطناعي الفرق: «محليًا يعمل، وعلى الإنترنت على Vercel أحصل على هذا الخطأ: ...». الأسباب المعتادة — مسار ملف خاطئ، حرف كبير في اسم ملف — تُصحَّح برسالة واحدة.

المشاركة وجمع الملاحظات

بمجرد النشر، شارك الرابط. الملاحظات الحقيقية هي أفضل وقود للتقدم: يعطي توم الرابط لبضعة تلاميذ ويراقب كيف يستخدمونه. وهنا، المفاجأة مضمونة — المستخدمون لا يفعلون أبدًا ما نتوقعه. تلميذ يحاول إضافة عشرين عادة، وآخر يبحث عن زر «تراجع» غير موجود، وثالث يسأل لماذا ليست بياناته على حاسوب المنزل (تذكّر: localStorage = بيانات لكل جهاز).

اجمع هذه الملاحظات ببساطة: راقب الناس يستخدمون التطبيق دون مساعدتهم، سجّل ما يعيقهم، واطرح سؤالين — «ما الذي أزعجك؟» و«ما الذي ينقصك أكثر؟». ثلاثة مستخدمين يكفون لرصد 80% من المشكلات الواضحة. أضِف إجاباتهم إلى قائمتك «لاحقًا»، ورتّب: ما يتكرر عدة مرات يصعد إلى الأعلى.

وماذا بعد؟

لديك تطبيق حقيقي على الإنترنت. كرّر: انتقِ من قائمتك «لاحقًا» المعزَّزة بملاحظات المستخدمين، أضِف ميزة في كل جلسة باتباع منهجية الفصل 4، وأعد النشر — مع «push to deploy»، كل تحسين مصادَق عليه ينطلق إلى الإنترنت وحده. أوراش النسخة الثانية الكلاسيكية: تصميم أفضل، نطاق مخصص، تصدير البيانات، أو المزامنة بين الأجهزة (حساب المستخدم الشهير، الآن وقد عرفت كلفته).

والأهم، ابدأ من جديد. اختر مشروعًا ثانيًا، أكثر طموحًا قليلًا، وأعد المسار الكامل: PRD مصغّر، بناء تكراري، تصحيح منهجي، نشر. كل مشروع يجعلك أكثر ارتياحًا في قيادة الذكاء الاصطناعي، أسرع في التشخيص، أدق في الوصف. هكذا بالضبط نتعلم البناء اليوم — وقد أتممت للتو الجولة الكاملة لأول مرة. مرحبًا بك في النادي.